Added warning to graphs and removed benchmarks from popup

Author: Christopher Stamper

src/app/components/StateRoute/StateRoute.tsx

@@ -128,9 +128,10 @@ const StateRoute = (props: StateRouteProps) => {
             typeof webMetrics.LCP !== 'number' ? '- ms' : `${webMetrics.LCP.toFixed(2)} ms`
           }
           score={['2500 ms', '4000 ms']}
+          overLimit={webMetrics.LCP > 7000}
           label='Largest Contentful Paint'
           name='Largest Contentful Paint'
-          description='Measures loading performance. The benchmark is less than 2500 ms.'
+          description='Measures loading performance.'
         />
         <WebMetrics
           color={FIDColor}
@@ -139,9 +140,10 @@ const StateRoute = (props: StateRouteProps) => {
             typeof webMetrics.FID !== 'number' ? '- ms' : `${webMetrics.FID.toFixed(2)} ms`
           }
           score={['100 ms', '300 ms']}
+          overLimit={webMetrics.FID > 500}
           label='First Input Delay'
           name='First Input Delay'
-          description='Measures interactivity. The benchmark is less than 100 ms.'
+          description='Measures interactivity.'
         />
         <WebMetrics
           color={FCPColor}
@@ -150,9 +152,10 @@ const StateRoute = (props: StateRouteProps) => {
             typeof webMetrics.FCP !== 'number' ? '- ms' : `${webMetrics.FCP.toFixed(2)} ms`
           }
           score={['1800 ms', '3000 ms']}
+          overLimit={webMetrics.FCP > 5000}
           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.'
+          description='Measures the time it takes the browser to render the first piece of DOM content.'
         />
         <WebMetrics
           color={TTFBColor}
@@ -161,9 +164,10 @@ const StateRoute = (props: StateRouteProps) => {
             typeof webMetrics.TTFB !== 'number' ? '- ms' : `${webMetrics.TTFB.toFixed(2)} ms`
           }
           score={['800 ms', '1800 ms']}
+          overLimit={webMetrics.TTFB > 3000}
           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.'
+          description='Measures the time it takes for a browser to receive the first byte of page content.'
         />
         <WebMetrics
           color={CLSColor}
@@ -176,6 +180,7 @@ const StateRoute = (props: StateRouteProps) => {
             }`
           }
           score={['0.1', '0.25']}
+          overLimit={webMetrics.CLS > 0.5}
           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.`}
@@ -187,6 +192,7 @@ const StateRoute = (props: StateRouteProps) => {
             typeof webMetrics.INP !== 'number' ? '- ms' : `${webMetrics.INP.toFixed(2)} ms`
           }
           score={['200 ms', '500 ms']}
+          overLimit={webMetrics.LCP > 700}
           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

@@ -29,10 +29,16 @@ const radialGraph = (props) => {
           hollow: {
             margin: 0,
             size: '75%',
-            background: '#242529',
-            image: undefined,
+            background: 'transparent',
+            // background: '#242529',
+            image: props.overLimit
+              ? 'https://static.vecteezy.com/system/resources/thumbnails/012/042/301/small/warning-sign-icon-transparent-background-free-png.png'
+              : undefined,
+            imageWidth: 32,
+            imageHeight: 32,
             imageOffsetX: 0,
-            imageOffsetY: 0,
+            imageOffsetY: -64,
+            imageClipped: false,
             position: 'front',
             dropShadow: {
               enabled: false,