Added metric ranges to popup for web metrics

Author: Christopher Stamper

src/app/components/StateRoute/StateRoute.tsx

@@ -127,6 +127,7 @@ const StateRoute = (props: StateRouteProps) => {
           formatted={(_) =>
             typeof webMetrics.LCP !== 'number' ? '- ms' : `${webMetrics.LCP.toFixed(2)} ms`
           }
+          score={['2500 ms', '4000 ms']}
           label='Largest Contentful Paint'
           name='Largest Contentful Paint'
           description='Measures loading performance. The benchmark is less than 2500 ms.'
@@ -137,6 +138,7 @@ const StateRoute = (props: StateRouteProps) => {
           formatted={(_) =>
             typeof webMetrics.FID !== 'number' ? '- ms' : `${webMetrics.FID.toFixed(2)} ms`
           }
+          score={['100 ms', '300 ms']}
           label='First Input Delay'
           name='First Input Delay'
           description='Measures interactivity. The benchmark is less than 100 ms.'
@@ -147,6 +149,7 @@ const StateRoute = (props: StateRouteProps) => {
           formatted={(_) =>
             typeof webMetrics.FCP !== 'number' ? '- ms' : `${webMetrics.FCP.toFixed(2)} ms`
           }
+          score={['1800 ms', '3000 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.'
@@ -157,6 +160,7 @@ const StateRoute = (props: StateRouteProps) => {
           formatted={(_) =>
             typeof webMetrics.TTFB !== 'number' ? '- ms' : `${webMetrics.TTFB.toFixed(2)} ms`
           }
+          score={['800 ms', '1800 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.'
@@ -171,6 +175,7 @@ const StateRoute = (props: StateRouteProps) => {
                 : `${webMetrics.CLS < 0.01 ? '~0' : webMetrics.CLS.toFixed(2)}`
             }`
           }
+          score={['0.1', '0.25']}
           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.`}
@@ -181,6 +186,7 @@ const StateRoute = (props: StateRouteProps) => {
           formatted={(_) =>
             typeof webMetrics.INP !== 'number' ? '- ms' : `${webMetrics.INP.toFixed(2)} ms`
           }
+          score={['200 ms', '500 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

@@ -121,6 +121,18 @@ const radialGraph = (props) => {
               <strong>{props.name}</strong>
             </p>
             <p>{props.description}</p>
+            <p>
+              <span style={{ color: '#0bce6b' }}>Good: </span>
+              {`< ${props.score[0]}`}
+            </p>
+            <p>
+              <span style={{ color: '#fc5a03' }}>Needs Improvement: </span>
+              {`< ${props.score[1]}`}
+            </p>
+            <p>
+              <span style={{ color: '#fc2000' }}>Poor: </span>
+              {`> ${props.score[1]}`}
+            </p>
           </div>
         </Hover>
       </ReactHover>

src/app/styles/layout/_stateContainer.scss

@@ -39,7 +39,7 @@
   margin: 6px;
 }
 
-.state-container .componentMapContainer{
+.state-container .componentMapContainer {
   height: 95% !important;
 }
 
@@ -206,7 +206,7 @@
 }
 
 #hover-box {
-  max-width: 150px;
+  max-width: 230px;
   background-color: #51565e;
   border-radius: 5px;
   color: white;
@@ -218,17 +218,17 @@
 
 // tool tip styles
 
-.visx-tooltip{
+.visx-tooltip {
   overflow-y: auto;
   overflow-wrap: break-word;
-  pointer-events:all !important;
+  pointer-events: all !important;
 }
 
 .tooltipKey {
   margin-bottom: -1px;
 }
 
-.historyToolTip{
+.historyToolTip {
   z-index: 2;
 }
 
@@ -253,14 +253,13 @@
   padding: 0px;
   overflow-y: auto;
   max-height: 30vh;
-  scrollbar-color:#919499 #51565e;
+  scrollbar-color: #919499 #51565e;
 }
 
 .tooltipData-JSONTree::-webkit-scrollbar-thumb {
-  background:#919499;
-
+  background: #919499;
 }
 
-.tooltipData-JSONTree::-webkit-scrollbar-track{
-  background:#51565e;
+.tooltipData-JSONTree::-webkit-scrollbar-track {
+  background: #51565e;
 }