Merge pull request #37 from oslabs-beta/jimmyTryWebMetric

Collaboration for adding our web metrics

Author: jimmally

package.json

@@ -240,7 +240,7 @@
     "redux-mock-store": "^1.5.4",
     "styled-components": "^6.0.4",
     "util": "^0.12.4",
-    "web-vitals": "^1.1.0",
+    "web-vitals": "^3.5.0",
     "yarn": "^1.22.19"
   }
 }

src/app/components/StateRoute/StateRoute.tsx

@@ -92,6 +92,7 @@ const StateRoute = (props: StateRouteProps) => {
     let FCPColor: String;
     let TTFBColor: String;
     let CLSColor: String;
+    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';
@@ -108,6 +109,11 @@ const StateRoute = (props: StateRouteProps) => {
     if (webMetrics.CLS <= 0.1) TTFBColor = '#0bce6b';
     if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) TTFBColor = '#E56543';
     if (webMetrics.CLS > 0.25) TTFBColor = '#fc2000';
+
+    //INP Stuff - Turns it red? change this to green
+    if (webMetrics.INP <= 200) INPColor = '#0bce6b';
+    if (webMetrics.INP <= 500) INPColor = '#E56543';
+    if (webMetrics.INP > 500) INPColor = '#fc2000';
     console.log('WEBMETRICS YOOO', webMetrics);
 
     return (
@@ -149,11 +155,19 @@ const StateRoute = (props: StateRouteProps) => {
         <WebMetrics
           color={CLSColor}
           series={webMetrics.CLS * 10}
-          formatted={(val) => (Number.isNaN(val) ? 'CLS Score: N/A' : `CLS Score: ${val / 10}`)}
+          formatted={(val) => `CLS Score: ${(Number.isNaN(val) ? 'N/A' : `${(val / 10).toFixed(3)}`)}`}
           label='Cumulative Layout Shift'
           name='Cumulative Layout Shift'
           description='Calculates the shifting of elements while the page is being downloaded and rendered.'
         />
+        <WebMetrics
+          color={INPColor}
+          series={(webMetrics.INP / 10) * 100}
+          formatted={(val) => `INP Value: ${(Number.isNaN(val) ? 'N/A' : `${val / 10}`)}`}
+          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`}
+        />
       </div>
     );
   };

src/app/styles/layout/_stateContainer.scss

@@ -191,7 +191,6 @@
 .web-metrics-container {
   display: grid;
   grid-template-columns: auto auto;
-  align-items: center;
   justify-content: center;
 }
 

src/extension/contentScript.ts

@@ -1,6 +1,6 @@
 // Web vital metrics calculated by 'web-vitals' npm package to be displayed
 // in Web Metrics tab of Reactime app.
-import { getTTFB, getLCP, getFID, getFCP, getCLS } from 'web-vitals';
+import { onTTFB, onLCP, onFID, onFCP, onCLS, onINP } from 'web-vitals';
 
 // Reactime application starts off with this file, and will send
 // first message to background.js for initial tabs object set up.
@@ -74,11 +74,13 @@ const gatherMetrics = ({ name, value }) => {
 };
 
 // Functions that calculate web metric values.
-getTTFB(gatherMetrics);
-getLCP(gatherMetrics);
-getFID(gatherMetrics);
-getFCP(gatherMetrics);
-getCLS(gatherMetrics);
+onTTFB(gatherMetrics);
+onLCP(gatherMetrics);
+onFID(gatherMetrics);
+onFCP(gatherMetrics);
+onCLS(gatherMetrics);
+onINP(gatherMetrics);
+
 
 // Send message to background.js for injecting the initial script
 // into the app's DOM.