Merge pull request #19 from C-STYR/cole-feature

Implemented radial graph functionality in WebMetrics Tab

Author: CourageWolf

package.json

@@ -99,6 +99,7 @@
     "jest-diff": "^26.1.0",
     "jest-puppeteer": "^4.4.0",
     "jest-runner-eslint": "^0.7.7",
+    "jscharting-react": "^1.2.1",
     "puppeteer": "^5.1.0",
     "sass": "^1.26.10",
     "sass-loader": "^7.3.1",
@@ -138,25 +139,29 @@
     "@visx/zoom": "^1.0.0",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
+    "apexcharts": "^3.23.1",
     "cookie": "^0.4.1",
     "d3": "^5.16.0",
     "d3-scale-chromatic": "^2.0.0",
     "d3-shape": "^2.0.0",
     "d3-zoom": "^1.8.3",
     "immer": "^3.3.0",
     "jest-runner": "^26.1.0",
+    "jscharting": "^3.0.2",
     "jsondiffpatch": "^0.3.11",
     "mixpanel": "^0.11.0",
     "mixpanel-browser": "^2.39.0",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.7.1",
     "rc-tooltip": "^3.7.3",
     "react": "^16.13.1",
+    "react-apexcharts": "^1.3.7",
     "react-dom": "^16.13.1",
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
-    "recoil": "0.0.10"
+    "recoil": "0.0.10",
+    "web-vitals": "^1.1.0"
   }
 }

src/app/components/StateRoute.tsx

@@ -20,6 +20,8 @@ import { useStoreContext } from '../store';
 import PerformanceVisx from './PerformanceVisx';
 import Legend from './AtomsRelationshipLegend';
 import AtomsRelationship from './AtomsRelationship';
+import WebMetrics from './WebMetrics';
+
 
 const History = require('./History').default;
 const ErrorHandler = require('./ErrorHandler').default;
@@ -37,14 +39,16 @@ export interface StateRouteProps {
     children?: any[];
     atomsComponents?: any;
     atomSelectors?: any;
+   
   };
   hierarchy: any;
   snapshots: [];
   viewIndex: number;
+  webMetrics: object;
 }
 
 const StateRoute = (props: StateRouteProps) => {
-  const { snapshot, hierarchy, snapshots, viewIndex } = props;
+  const { snapshot, hierarchy, snapshots, viewIndex, webMetrics } = props;
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   const isRecoil = snapshot.atomsComponents ? true : false;
@@ -111,6 +115,37 @@ const StateRoute = (props: StateRouteProps) => {
       return <Tree snapshot={snapshot} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
+
+  };
+  const renderWebMetrics = () => {
+    let LCPColor, FIDColor, CLSColor, FCPColor, TTFBColor;
+
+    if (webMetrics.LCP <= 2000) LCPColor = "#0bce6b";
+    if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = "#E56543";
+    if (webMetrics.LCP > 4000 ) LCPColor = "#fc2000";
+    if (webMetrics.FID <= 100) FIDColor = "#0bce6b";
+    if (webMetrics.FID > 100 && webMetrics.FID <= 300 ) FIDColor = "#fc5a03";
+    if (webMetrics.FID > 300 ) FIDColor = "#fc2000";
+    if (webMetrics.CLS <= 0.1) FIDColor = "#0bce6b";
+    if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25 ) CLSColor = "#fc5a03";
+    if (webMetrics.CLS > 0.25 ) CLSColor = "#fc2000";
+    if (webMetrics.FCP <= 9000) FCPColor = "#0bce6b";
+    if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100 ) FCPColor = "#fc5a03";
+    if (webMetrics.FCP > 1100 ) FCPColor = "#fc2000";
+    if (webMetrics.TTFB <= 600) TTFBColor = "#0bce6b";
+    if (webMetrics.TTFB > 600 ) TTFBColor = "#fc2000";
+
+
+    
+    return (
+      <div className="web-metrics-container">
+        <WebMetrics color={LCPColor} series={(webMetrics.LCP / 2500) * 100} formatted={(val) => ((val / 100) * 2500).toFixed(2) + ' ms'} label="LCP"/>
+        <WebMetrics color={FIDColor} series={(webMetrics.FID) * 25} formatted={(val) => ((val / 25)).toFixed(2) + ' ms'} label="FID"/>
+        {/* <WebMetrics color={CLSColor} series={(webMetrics.CLS * 50) * 100} formatted={(val) => ((val / 100) / 50).toFixed(2)} label="CLS"/> */}
+        <WebMetrics color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
+        <WebMetrics color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'} label="TTFB"/>
+      </div>
+    )
   };
 
   const renderPerfView = () => {
@@ -155,6 +190,13 @@ const StateRoute = (props: StateRouteProps) => {
         >
           History
         </NavLink>
+        <NavLink
+          className="router-link"
+          activeClassName="is-active"
+          to="/webMetrics"
+        >
+          Web Metrics
+        </NavLink>
         <NavLink
           className="router-link"
           activeClassName="is-active"
@@ -176,6 +218,7 @@ const StateRoute = (props: StateRouteProps) => {
         <Route path="/performance" render={renderPerfView} />
         <Route path="/history" render={renderHistory} />
         <Route path="/relationship" render={renderAtomsRelationship} />
+        <Route path="/webMetrics" render={renderWebMetrics} />
         <Route path="/tree" render={renderTree} />
         <Route path="/" render={renderComponentMap} />
       </Switch>

src/app/components/WebMetrics.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect, Component } from 'react';
+import Charts from 'react-apexcharts';
+import useForceUpdate from './useForceUpdate';
+
+const radialGraph = (props) => {
+
+		const state = {
+		
+			series: [props.series],
+			options: {
+				colors: [props.color],
+				chart: {
+					height: 100,
+					width: 100,
+					type: 'radialBar',
+					toolbar: {
+						show: false,
+					}
+				},
+				plotOptions: {
+					radialBar: {
+						startAngle: -135,
+						endAngle: 135,
+						 hollow: {
+							margin: 0,
+							size: '75%',
+							background: '#242529',
+							image: undefined,
+							imageOffsetX: 0,
+							imageOffsetY: 0,
+							position: 'front',
+							dropShadow: {
+								enabled: false,
+								top: 3,
+								left: 0,
+								blur: 4,
+								opacity: 0.24
+							}
+						},
+						track: {
+							background: '#fff',
+							strokeWidth: '3%',
+							margin: 0, // margin is in pixels
+							dropShadow: {
+								enabled: true,
+								top: -3,
+								left: 0,
+								blur: 4,
+								opacity: 0.35
+							}
+						},
+				
+						dataLabels: {
+							show: true,
+							name: {
+								offsetY: -10,
+								show: true,
+								color: '#fff',
+								fontSize: '24px'
+							},
+							value: {
+								formatter: props.formatted,
+								color: '#fff',
+								fontSize: '16px',
+								show: true,
+							}
+						}
+					}
+				},
+				fill: {
+					type: 'solid',
+					gradient: {
+						shade: 'dark',
+						type: 'horizontal',
+						shadeIntensity: 0.1,
+						gradientToColors: [props.color],
+						inverseColors: false,
+						opacityFrom: 1,
+						opacityTo: 1,
+						stops: [0, 100]
+					}
+				},
+				stroke: {
+					lineCap: 'flat'
+				},
+				labels: [props.label],
+			},		
+    };
+
+
+		return (
+			
+
+<div id="card">
+	<div id="chart">
+		<Charts options={state.options} series={state.series} type="radialBar" height={250} width={250}/>
+	</div>
+</div>
+
+		)
+}
+
+
+export default radialGraph;

src/app/containers/ActionContainer.tsx

@@ -115,15 +115,13 @@ function ActionContainer(props) {
   );
 
   if (!timeTravel) {
-    console.log("should be false:", timeTravel)
     return (
       //returns an empty div when timeTravel is false
 
       <div></div>
     ) 
   }
   else {
-    console.log("Should be true:", timeTravel);
     // this is not logging; the prop is not being udpdated or the component is not being re-rendered.
     return (
       <div className="action-container">

src/app/containers/MainContainer.tsx

@@ -151,8 +151,11 @@ function MainContainer(): any {
       </div>
     );
   }
-  const { viewIndex, sliderIndex, snapshots, hierarchy } = tabs[currentTab];
+  const { viewIndex, sliderIndex, snapshots, hierarchy, webMetrics } = tabs[currentTab];
   // if viewIndex is -1, then use the sliderIndex instead
+  console.log('webMetrics in MainContainer >>>', webMetrics);
+
+
   const snapshotView =
     viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // cleaning hierarchy and snapshotView from stateless data
@@ -222,6 +225,7 @@ function MainContainer(): any {
         {snapshots.length ? (
           <StateContainer
             toggleActionContainer={toggleActionContainer}
+            webMetrics={webMetrics}
             viewIndex={viewIndex}
             snapshot={snapshotDisplay}
             hierarchy={hierarchyDisplay}

src/app/containers/StateContainer.tsx

@@ -24,6 +24,7 @@ interface StateContainerProps {
     }
   >;
   toggleActionContainer?: any;
+  webMetrics: object;
   AtomsRelationship?: any[];
   hierarchy: Record<string, unknown>;
   snapshots: [];
@@ -33,7 +34,7 @@ interface StateContainerProps {
 
 // eslint-disable-next-line react/prop-types
 const StateContainer = (props: StateContainerProps): JSX.Element => {
-  const { snapshot, hierarchy, snapshots, viewIndex, toggleActionContainer } = props;
+  const { snapshot, hierarchy, snapshots, viewIndex, toggleActionContainer, webMetrics } = props;
   const [Text, setText] = useState('State');
 
   return (
@@ -74,6 +75,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
               setText('State');
               return (
                 <StateRoute
+                  webMetrics={webMetrics}
                   viewIndex={viewIndex}
                   snapshot={snapshot}
                   hierarchy={hierarchy}

src/app/styles/layout/_stateContainer.scss

@@ -194,3 +194,17 @@
 .router-link-performance.is-active {
   font-weight: 600;
 }
+
+// Web Metrics Container
+.web-metrics-container {
+
+  // padding: 3rem;
+  // display: grid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 3rem;
+  // grid-template-columns: repeat(2, 1fr);
+  // grid-template-rows: repeat(2, 1fr);
+}