feat(server): add LCP, TBT and MPFID to distribution graphs (#694)

GoogleChrome · Sep 22, 2021 · f5c5ba5 · f5c5ba5
1 parent 372a47b
commit f5c5ba5
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/packages/server/src/ui/routes/project-dashboard/category-card.jsx b/packages/server/src/ui/routes/project-dashboard/category-card.jsx
@@ -129,17 +129,35 @@ const MetricDistributionGraphs = props => {
         scoreLevels={SCORE_LEVEL_METRIC_THRESHOLDS['first-contentful-paint']}
       />
       <MetricDistributionGraph
-        abbreviation={'SI'}
-        label={'Speed Index'}
-        statistics={stats('audit_speed-index_median')}
-        scoreLevels={SCORE_LEVEL_METRIC_THRESHOLDS['speed-index']}
+        abbreviation={'LCP'}
+        label={'Largest Contentful Paint'}
+        statistics={stats('audit_largest-contentful-paint_median')}
+        scoreLevels={SCORE_LEVEL_METRIC_THRESHOLDS['largest-contentful-paint']}
       />
       <MetricDistributionGraph
         abbreviation={'TTI'}
         label={'Time to Interactive'}
         statistics={stats('audit_interactive_median')}
         scoreLevels={SCORE_LEVEL_METRIC_THRESHOLDS['interactive']}
       />
+      <MetricDistributionGraph
+        abbreviation={'SI'}
+        label={'Speed Index'}
+        statistics={stats('audit_speed-index_median')}
+        scoreLevels={SCORE_LEVEL_METRIC_THRESHOLDS['speed-index']}
+      />
+      <MetricDistributionGraph
+        abbreviation={'TBT'}
+        label={'Total Blocking Time'}
+        statistics={stats('audit_total-blocking-time_median')}
+        scoreLevels={SCORE_LEVEL_METRIC_THRESHOLDS['total-blocking-time']}
+      />
+      <MetricDistributionGraph
+        abbreviation={'FID'}
+        label={'Max Potential FID'}
+        statistics={stats('audit_max-potential-fid_median')}
+        scoreLevels={SCORE_LEVEL_METRIC_THRESHOLDS['max-potential-fid']}
+      />
     </Fragment>
   );
 };