fix displaying NaN when there is no metric data

Author: demircaner

src/app/components/StateRoute.tsx

@@ -116,7 +116,7 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className='noState'>{NO_STATE_MSG}</div>;
   };
   const renderWebMetrics = () => {
-    let LCPColor, FIDColor, CLSColor, FCPColor, TTFBColor;
+    let LCPColor, FIDColor, FCPColor, TTFBColor;
 
     if (webMetrics.LCP <= 2000) LCPColor = "#0bce6b";
     if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = "#E56543";
@@ -125,8 +125,7 @@ const StateRoute = (props: StateRouteProps) => {
     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";
@@ -138,10 +137,10 @@ const StateRoute = (props: StateRouteProps) => {
     return (
       <div className="web-metrics-container">
         <WebMetrics color={LCPColor} series={(webMetrics.LCP / 2500) * 100}
-          formatted={(val) => { return (Number.isNaN(val)) ? '-- ms' : (((val / 100) * 2500).toFixed(2) + ' ms')}}
+          formatted={(val) => { return (Number.isNaN(val)) ? '- ms' : (((val / 100) * 2500).toFixed(2) + ' ms')}}
         label="LCP" />
         <WebMetrics color={FIDColor} series={(webMetrics.FID) * 25}
-          formatted={(val) => { return (Number.isNaN(val)) ? '-- ms' : ((val / 25).toFixed(2) + ' ms')}}
+          formatted={(val) => { return (Number.isNaN(val)) ? '- ms' : ((val / 25).toFixed(2) + ' ms')}}
           label="FID" />
         <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"/>

src/app/components/WebMetrics.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, Component } from 'react';
 import Charts from 'react-apexcharts';
-import useForceUpdate from './useForceUpdate';
 
 const radialGraph = (props) => {
 
@@ -88,16 +87,13 @@ const radialGraph = (props) => {
     };
 
 
-		return (
-			
-
-<div id="card">
-	<div id="chart">
-		<Charts options={state.options} series={state.series} type="radialBar" height={250} width={250}/>
-	</div>
-</div>
-
-		)
+	return (	
+		<div id="card">
+			<div id="chart">
+				<Charts options={state.options} series={state.series} type="radialBar" height={250} width={250}/>
+			</div>
+		</div>
+	)
 }