Radial Graphs with correct data implemented in Web Metrics tab

Co-authored-by: kev-ngo <[email protected]>
Co-authored-by: CourageWolf <[email protected]>
Co-authored-by: DennisLpz <[email protected]>
Co-authored-by: demircaner <[email protected]>

Author: 5 people

src/app/components/StateRoute.tsx

@@ -119,10 +119,12 @@ const StateRoute = (props: StateRouteProps) => {
   };
   const renderWebMetrics = () => {
     return (
-      <div>
-        <WebMetrics webMetrics={webMetrics}/>
-        <WebMetrics webMetrics={webMetrics}/>
-        <WebMetrics webMetrics={webMetrics}/>
+      <div className="web-metrics-container">
+        <WebMetrics series={(webMetrics.LCP / 2500) * 100} formatted={(val) => ((val / 100) * 2500).toFixed(2)} label="LCP"/>
+        <WebMetrics series={(webMetrics.FID) * 50} formatted={(val) => ((val / 50)).toFixed(2)} label="FID"/>
+        <WebMetrics series={(webMetrics.CLS * 50) * 100} formatted={(val) => ((val / 100) / 50).toFixed(2)} label="CLS"/>
+        <WebMetrics series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2)} label="FCP"/>
+        <WebMetrics series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2)} label="TTFB"/>
       </div>
     )
   };

src/app/components/WebMetrics.tsx

@@ -1,32 +1,35 @@
-import React, { useState } from 'react';
-import Charts from 'react-apexcharts'
+import React, { useState, useEffect, Component } from 'react';
+import Charts from 'react-apexcharts';
+import useForceUpdate from './useForceUpdate';
 
-const radialGraph = ({webMetrics}) => {
+const radialGraph = (props) => {
 		const state = {
 
-			series: [(webMetrics.FCP / 1000) * 100],
+			series: [props.series],
 			options: {
+				colors: ['#0bce6b'],
 				chart: {
-					height: 350,
+					height: 100,
+					width: 100,
 					type: 'radialBar',
 					toolbar: {
-						show: true
+						show: false,
 					}
 				},
 				plotOptions: {
 					radialBar: {
 						startAngle: -135,
-						endAngle: 225,
+						endAngle: 135,
 						 hollow: {
 							margin: 0,
-							size: '90%',
+							size: '80%',
 							background: '#242529',
 							image: undefined,
 							imageOffsetX: 0,
 							imageOffsetY: 0,
 							position: 'front',
 							dropShadow: {
-								enabled: true,
+								enabled: false,
 								top: 3,
 								left: 0,
 								blur: 4,
@@ -35,7 +38,7 @@ const radialGraph = ({webMetrics}) => {
 						},
 						track: {
 							background: '#fff',
-							strokeWidth: '10%',
+							strokeWidth: '3%',
 							margin: 0, // margin is in pixels
 							dropShadow: {
 								enabled: true,
@@ -52,12 +55,10 @@ const radialGraph = ({webMetrics}) => {
 								offsetY: -10,
 								show: true,
 								color: '#fff',
-								fontSize: '17px'
+								fontSize: '38px'
 							},
 							value: {
-								formatter: function(val) {
-									return parseInt(webMetrics.FCP);
-								},
+								formatter: props.formatted,
 								color: '#fff',
 								fontSize: '25px',
 								show: true,
@@ -66,38 +67,47 @@ const radialGraph = ({webMetrics}) => {
 					}
 				},
 				fill: {
-					type: 'gradient',
+					type: 'solid',
 					gradient: {
 						shade: 'dark',
 						type: 'horizontal',
-						shadeIntensity: 0.5,
-						gradientToColors: ['#ABE5A1'],
-						inverseColors: true,
+						shadeIntensity: 0.1,
+						gradientToColors: ['#0bce6b'],
+						inverseColors: false,
 						opacityFrom: 1,
 						opacityTo: 1,
 						stops: [0, 100]
 					}
 				},
 				stroke: {
-					lineCap: 'round'
+					lineCap: 'flat'
 				},
-				labels: ['FCP'],
-			},
-		
-		
+				labels: [props.label],
+			},		
     };
-   
+
+let formatted;
+
+const [webMetricsState, setWebMetricsState] = useState(props)
+
+useEffect(() => {
+	setWebMetricsState(props);
+	formatted = props.formatted;
+}, [props])
+
+// console.log("props.formatted", props.formatted)
 
 		return (
 
 
 <div id="card">
 	<div id="chart">
-		<Charts options={state.options} series={state.series} type="radialBar" height={350} />
+		<Charts options={state.options} series={state.series} type="radialBar" height={250} width={250}/>
 	</div>
 </div>
 
 		)
 }
 
+
 export default radialGraph;

src/app/styles/layout/_stateContainer.scss

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