Added styling to the component cards indicating the render of each component, added a renderingFrequency and performanceVisx scss files

>
>
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

archive/.pre-v4-demo.gif.icloud

@@ -13,8 +13,8 @@ import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store'
 import RenderingFrequency from './RenderingFrequency';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
+// import FormControlLabel from '@material-ui/core/FormControlLabel';
+// import Switch from '@material-ui/core/Switch';
 
 /* NOTES
 Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
@@ -328,7 +328,10 @@ const PerformanceVisx = (props: BarStackProps) => {
         <div>
           {view === 'frequencyCards'  */}
             {/* ?  */}
-            <RenderingFrequency data={data.componentData}/> 
+           
+           <div id='RenderContainer'>
+             <RenderingFrequency data={data.componentData}/> 
+             </div> 
             {/* : <BarGraph data={data}/>
           }
         </div> */}

archive/pre-v4-demo.gif

@@ -1,5 +1,5 @@
-import React from 'react'
 
+import React from 'react';
 
 
 const RenderingFrequency = (props) => {
@@ -12,17 +12,28 @@ const RenderingFrequency = (props) => {
       Object.keys(perfData).map( componentName => {
         const currentComponent = perfData[componentName]
         return (
-          <div>
-            <h2>{componentName} </h2>
-            <p>{currentComponent.stateType}</p>
-            <div>Render Count: {currentComponent.renderFrequency} </div>
-            <p>Average Time: {(currentComponent.totalRenderTime/currentComponent.renderFrequency).toFixed(3) } ms</p>
-          </div>
-        )
+					<div className="StyledGridElement">
+						<div className="RenderLeft">
+							<h3>{componentName} </h3>
+							<h4>{currentComponent.stateType}</h4>
+							<h4>
+								average time:{' '}
+								{(
+									currentComponent.totalRenderTime /
+									currentComponent.renderFrequency
+								).toFixed(3)}{' '}
+								ms
+							</h4>
+						</div>
+						<div className="RenderRight">
+							<p>{currentComponent.renderFrequency}</p>
+						</div>
+					</div>
+				);
       })
       }
     </div>
   )
 }
 
-export default RenderingFrequency
+export default RenderingFrequency;

assets/.extension-console.gif.icloud

@@ -0,0 +1,4 @@
+#RenderContainer {
+	display: flex;
+	justify-content: center;
+}

assets/.reactime-console.gif.icloud

@@ -0,0 +1,48 @@
+.StyledGridElement {
+	display: flex;
+	// align-content: center;
+	align-items: center;
+	justify-content: space-between;
+	background: #242529;
+	padding: 20px;
+	width: 40vh;
+	height: 5vh;
+	margin: 20px 10px;
+	font-family: 'Roboto', sans-serif;
+	border-radius: 5px;
+	border: 1px solid rgba(184, 196, 194, 0.25);
+	box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
+
+	h3 {
+		color: $text-color;
+		margin-bottom: 5px;
+		margin-top: 5px;
+		text-transform: uppercase;
+		font-size: 14px;
+		font-weight: 500;
+	}
+
+	h4 {
+		color: $text-color;
+		margin-bottom: 5px;
+		margin-top: 5px;
+		font-weight: 300;
+	}
+
+	p {
+		color: $brand-color;
+		line-height: 20px;
+		text-align: center;
+		font-size: 18px;
+		line-height: 18px;
+	}
+}
+.RenderLeft {
+	// padding: 10px;
+}
+.RenderRight {
+	border-radius: 5px;
+	background: $blue-color-gradient;
+	width: 10%;
+	padding: 0 0.5em;
+}