PerformanceVisx refactoring done and styling of the rendering feature done

>
>
Co-authored-by: Nkmai <[email protected]>
Co-authored-by: lind-tania <[email protected]>
Co-authored-by: rtviner <[email protected]>
Co-authored-by: caitlinchan23 <[email protected]>
 

Author: Nkmai

src/app/components/PerformanceVisx.tsx

@@ -98,11 +98,12 @@ const PerformanceVisx = (props: BarStackProps) => {
   }
   // filter and structure incoming data for VISX
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
-  
+  const colorSlider = "#ff6569"
+  // style={{ position: 'relative' }}
     // if performance tab is too small it will not return VISX component
     return  (
-      <div style={{ position: 'relative' }}>
-        <FormControlLabel
+      <div className='renderTab'>
+        <FormControlLabel style={{"margin-left":"30px", "margin-top": "20px"}}
         control={
           <Switch
             onChange={toggleView}
@@ -113,9 +114,9 @@ const PerformanceVisx = (props: BarStackProps) => {
         label="Renders"
       />
       {/* <button onClick={toggleView}>Toggle Button</button> */}
-        <div>
+        <div style={{"display": "flex", "justify-content": "center"}}>
           {isToggled === 'frequencyCards' 
-            ? <RenderingFrequency data={data.componentData}/> 
+            ? <RenderingFrequency  data={data.componentData}/> 
             : <BarGraph data={data} width={width} height={height}/>
           }
         </div>