Fixed initial webMetrics issue

Author: Christopher Stamper

src/app/components/StateRoute/StateRoute.tsx

@@ -95,72 +95,91 @@ const StateRoute = (props: StateRouteProps) => {
     let INPColor: String;
 
     // adjust the strings that represent colors of the webmetrics performance bar for 'Largest Contentful Paint (LCP)', 'First Input Delay (FID)', 'First Contentfuly Paint (FCP)', and 'Time to First Byte (TTFB)' based on webMetrics outputs.
-    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.FCP <= 900) 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';
-    if (webMetrics.CLS <= 0.1) CLSColor = '#0bce6b';
-    if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) CLSColor = '#E56543';
-    if (webMetrics.CLS > 0.25) CLSColor = '#fc2000';
-    if (webMetrics.INP <= 200) INPColor = '#0bce6b';
-    if (webMetrics.INP <= 500) INPColor = '#E56543';
-    if (webMetrics.INP > 500) INPColor = '#fc2000';
+    if (webMetrics.LCP <= 2500) LCPColor = ['#0bce6b'];
+    if (webMetrics.LCP > 2500 && webMetrics.LCP < 4000) LCPColor = ['#fc5a03'];
+    if (webMetrics.LCP > 4000 && webMetrics.LCP <= 7000) LCPColor = ['#fc2000'];
+    if (webMetrics.LCP > 7000) LCPColor = ['#fc2000', '#000000'];
+
+    if (webMetrics.FID <= 100) FIDColor = ['#0bce6b'];
+    if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = ['#fc5a03'];
+    if (webMetrics.FID > 300 && webMetrics.FID <= 500) FIDColor = ['#fc2000'];
+    if (webMetrics.FID > 500) FIDColor = ['#fc2000', '#000000'];
+
+    if (webMetrics.FCP <= 1800) FCPColor = ['#0bce6b'];
+    if (webMetrics.FCP > 1800 && webMetrics.FCP <= 3000) FCPColor = ['#fc5a03'];
+    if (webMetrics.FCP > 3000 && webMetrics.FCP <= 5000) FCPColor = ['#fc2000'];
+    if (webMetrics.FCP > 5000) FCPColor = ['#fc2000', '#000000'];
+
+    if (webMetrics.TTFB <= 800) TTFBColor = ['#0bce6b'];
+    if (webMetrics.TTFB > 800 && webMetrics.TTFB <= 1800) TTFBColor = ['#fc5a03'];
+    if (webMetrics.TTFB > 1800 && webMetrics.TTFB <= 3000) TTFBColor = ['#fc2000'];
+    if (webMetrics.TTFB > 3000) TTFBColor = ['#fc2000', '#000000'];
+
+    if (webMetrics.CLS <= 0.1) CLSColor = ['#0bce6b'];
+    if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) CLSColor = ['#fc5a03'];
+    if (webMetrics.CLS > 0.25 && webMetrics.CLS <= 0.5) CLSColor = ['#fc2000'];
+    if (webMetrics.CLS > 0.5) CLSColor = ['#fc2000', '#000000'];
+
+    if (webMetrics.INP <= 200) INPColor = ['#0bce6b'];
+    if (webMetrics.INP > 200 && webMetrics.INP <= 500) INPColor = ['#fc5a03'];
+    if (webMetrics.INP > 500 && webMetrics.INP <= 700) INPColor = ['#fc2000'];
+    if (webMetrics.INP > 700) INPColor = ['#fc2000', '#000000'];
+
+    const fakeLCP = 7500;
+
+    if (fakeLCP <= 2500) LCPColor = ['#0bce6b'];
+    if (fakeLCP > 2500 && fakeLCP < 4000) LCPColor = ['#fc5a03'];
+    if (fakeLCP > 4000 && fakeLCP <= 7000) LCPColor = ['#fc2000'];
+    if (fakeLCP > 7000) LCPColor = ['#fc2000', '#000000'];
 
     return (
       <div className='web-metrics-container'>
         <WebMetrics
           color={LCPColor}
-          series={(webMetrics.LCP / 2500) * 100}
-          formatted={(val) =>
-            Number.isNaN(val) ? '- ms' : `${((val / 100) * 2500).toFixed(2)} ms`
+          series={webMetrics.LCP ? [webMetrics.LCP / 70 < 100 ? webMetrics.LCP / 70 : 100] : 0}
+          formatted={(_) =>
+            typeof webMetrics.LCP !== 'number' ? '- ms' : `${(webMetrics.LCP).toFixed(2)} ms`
           }
           label='Largest Contentful Paint'
           name='Largest Contentful Paint'
           description='Measures loading performance. The benchmark is less than 2500 ms.'
         />
         <WebMetrics
           color={FIDColor}
-          series={webMetrics.FID * 25}
-          formatted={(val) => (Number.isNaN(val) ? '- ms' : `${(val / 25).toFixed(2)} ms`)}
+          series={webMetrics.FID ? [webMetrics.FID / 5 < 100 ? webMetrics.FID / 5 : 100] : 0}
+          formatted={(_) => typeof webMetrics.FID !== 'number' ? '- ms' : `${(webMetrics.FID).toFixed(2)} ms`}
           label='First Input Delay'
           name='First Input Delay'
           description='Measures interactivity. The benchmark is less than 100 ms.'
         />
         <WebMetrics
           color={FCPColor}
-          series={(webMetrics.FCP / 1000) * 100}
-          formatted={(val) => `${((val / 100) * 1000).toFixed(2)} ms`}
+          series={webMetrics.FCP ? [webMetrics.FCP / 50 < 100 ? webMetrics.FCP / 50 : 100] : 0}
+          formatted={(_) => typeof webMetrics.FCP !== 'number' ? '- ms' : `${(webMetrics.FCP).toFixed(2)} ms`}
           label='First Contentful Paint'
           name='First Contentful Paint'
           description='Measures the time it takes the browser to render the first piece of DOM content. No benchmark.'
         />
         <WebMetrics
           color={TTFBColor}
-          series={(webMetrics.TTFB / 10) * 100}
-          formatted={(val) => `${((val / 100) * 10).toFixed(2)} ms`}
+          series={webMetrics.TTFB ? [webMetrics.TTFB / 30 < 100 ? webMetrics.TTFB / 30 : 100] : 0}
+          formatted={(_) => typeof webMetrics.TTFB !== 'number' ? '- ms' : `${(webMetrics.TTFB).toFixed(2)} ms`}
           label='Time To First Byte'
           name='Time to First Byte'
           description='Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms.'
         />
         <WebMetrics
           color={CLSColor}
-          series={webMetrics.CLS * 10}
-          formatted={(val) => `CLS Score: ${(Number.isNaN(val) ? 'N/A' : `${val / 10 < 0.01 ? 0 : (val / 10).toFixed(2)}`)}`}
+          series={webMetrics.CLS ? [webMetrics.CLS * 200 < 100 ? webMetrics.CLS * 200 : 100] : 0}
+          formatted={(_) => `CLS Score: ${typeof webMetrics.CLS !== 'number' ? 'N/A' : `${webMetrics.CLS < .01 ? '~0' : (webMetrics.CLS).toFixed(2)}`}`}
           label='Cumulative Layout Shift'
           name='Cumulative Layout Shift'
           description={`Quantifies the visual stability of a web page by measuring layout shifts during the application's loading and interaction.`}
         />
         <WebMetrics
           color={INPColor}
-          series={(webMetrics.INP / 10) * 100}
-          formatted={(val) => `INP Value: ${(Number.isNaN(val) ? 'N/A' : `${val / 10}`)}`}
+          series={webMetrics.INP ? [webMetrics.INP / 7 < 100 ? webMetrics.INP / 7 : 100] : 0}
+          formatted={(_) => typeof webMetrics.INP !== 'number' ? '- ms' : `${(webMetrics.INP).toFixed(2)} ms`}
           label='Interaction to Next Paint'
           name='Interaction to Next Paint'
           description={`Assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page`}

src/app/components/WebMetrics.tsx

@@ -78,7 +78,8 @@ const radialGraph = (props) => {
           shade: 'dark',
           type: 'horizontal',
           shadeIntensity: 0.1,
-          gradientToColors: [props.color],
+          gradientToColors: props.color,
+          // gradientToColors: ['#fc2000', '#000000'],
           inverseColors: false,
           opacityFrom: 1,
           opacityTo: 1,