Merge pull request #11 from zer0kool/crux-five

FID and network buckets deprecated
zer0kool · Sep 12, 2024 · 21fcb50 · 21fcb50
2 parents 983dd64 + 71c0185
commit 21fcb50
Show file tree

Hide file tree

Showing 7 changed files with 5 additions and 40 deletions.
diff --git a/css/init.css b/css/init.css
@@ -370,7 +370,7 @@ span.close:hover {
 #cardBody {
   margin: 0;
   width: 100%;
-  min-height: 650px;
+  min-height: 600px;
 }
 .git.circle {
     background-color: #161818;
@@ -382,7 +382,7 @@ span.close:hover {
     background-clip: border-box;
 }
 .metrics {
-  height: 550px;
+  height: 480px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

diff --git a/img/CruxTool-old.png b/img/CruxTool-old.png
diff --git a/img/CruxTool.png b/img/CruxTool.png
diff --git a/js/charts/batch.js b/js/charts/batch.js
@@ -13,7 +13,7 @@ CrUXApiService.query = function (url) {
     const requestBody = {
         url: url,
         formFactor: 'PHONE',
-        metrics: ['first_contentful_paint', 'largest_contentful_paint', 'first_input_delay', 'cumulative_layout_shift', 'interaction_to_next_paint', 'experimental_time_to_first_byte'],
+        metrics: ['first_contentful_paint', 'largest_contentful_paint', 'cumulative_layout_shift', 'interaction_to_next_paint', 'experimental_time_to_first_byte'],
     };
 
     return fetch(CrUXApiService.API_ENDPOINT, {
@@ -177,14 +177,12 @@ function renderData(crux) {
                 <ul id="chartPageTabs${index}" class="tabs">
                     <li class="tab col s3"><a href="#LCP${index}">LCP</a></li>
                     <li class="tab col s3"><a href="#CLS${index}">CLS</a></li>
-                    <li class="tab col s3"><a href="#FID${index}">FID</a></li>
                     <li class="tab col s3"><a href="#FCP${index}">FCP</a></li>
                     <li class="tab col s3"><a href="#INP${index}">INP</a></li>
                     <li class="tab col s3"><a href="#TTFB${index}">TTFB</a></li>
                 </ul>
                 <div id="LCP${index}" class="col s12"></div>
                 <div id="CLS${index}" class="col s12"></div>
-                <div id="FID${index}" class="col s12"></div>
                 <div id="FCP${index}" class="col s12"></div>
                 <div id="INP${index}" class="col s12"></div>
                 <div id="TTFB${index}" class="col s12"></div>

diff --git a/js/charts/chart.js b/js/charts/chart.js
@@ -156,27 +156,6 @@ function buildObjectData(entries, historyOrigin) {
                             "p75": item.record.metrics.first_contentful_paint.percentilesTimeseries.p75s[i]
                         }
                     },
-                    "first_input_delay": {
-                        "histogram": [
-                            {
-                                "start": 0,
-                                "end": 100,
-                                "density": item.record.metrics.first_input_delay.histogramTimeseries[0].densities[i]
-                            },
-                            {
-                                "start": 100,
-                                "end": 300,
-                                "density": item.record.metrics.first_input_delay.histogramTimeseries[1].densities[i]
-                            },
-                            {
-                                "start": 300,
-                                "density": item.record.metrics.first_input_delay.histogramTimeseries[2].densities[i]
-                            }
-                        ],
-                        "percentiles": {
-                            "p75": item.record.metrics.first_input_delay.percentilesTimeseries.p75s[i]
-                        }
-                    },
                     "largest_contentful_paint": {
                         "histogram": [
                             {
@@ -420,15 +399,13 @@ function labelMetricDatax(metrics, key, index) {
     const nameToFullNameMap = {
         first_contentful_paint: 'First Contentful Paint (FCP)',
         largest_contentful_paint: 'Largest Contentful Paint (LCP)',
-        first_input_delay: 'First Input Delay (FID)',
         cumulative_layout_shift: 'Cumulative Layout Shift (CLS)',
         interaction_to_next_paint: 'experimental Interaction to Next Paint (INP)',
         experimental_time_to_first_byte: 'experimental Time to First Byte (TTFB)',
     };
     const nameToAcronymMap = {
         first_contentful_paint: 'FCP',
         largest_contentful_paint: 'LCP',
-        first_input_delay: 'FID',
         cumulative_layout_shift: 'CLS',
         interaction_to_next_paint: 'INP',
         experimental_time_to_first_byte: 'TTFB',
@@ -471,10 +448,6 @@ function formChartData(apiResponse) {
                     "metric": "first_contentful_paint",
                     "data": []
                 },
-                {
-                    "metric": "first_input_delay",
-                    "data": []
-                },
                 {
                     "metric": "largest_contentful_paint",
                     "data": []

diff --git a/js/charts/histo.js b/js/charts/histo.js
@@ -42,7 +42,6 @@ async function retrieveHistoricalData(historyOrigin) {
 
 let pageMetricData = {};
 pageMetricData.CLS = {};
-pageMetricData.FID = {};
 pageMetricData.TTFB = {};
 pageMetricData.FCP = {};
 pageMetricData.INP = {};
@@ -96,7 +95,6 @@ function processHistoricalData(data) {
 
     createStackedAreaChart(pageMetricData.LCP, pageMetricData.id, pageMetricData.index);
     createStackedAreaChart(pageMetricData.CLS, pageMetricData.id, pageMetricData.index);
-    createStackedAreaChart(pageMetricData.FID, pageMetricData.id, pageMetricData.index);
     createStackedAreaChart(pageMetricData.FCP, pageMetricData.id, pageMetricData.index);
     createStackedAreaChart(pageMetricData.INP, pageMetricData.id, pageMetricData.index);
     createStackedAreaChart(pageMetricData.TTFB, pageMetricData.id, pageMetricData.index);
@@ -105,7 +103,6 @@ function processHistoricalData(data) {
 
     createSimpleColumnChart(pageMetricData.LCP, pageMetricData.id, pageMetricData.index);
     createSimpleColumnChart(pageMetricData.CLS, pageMetricData.id, pageMetricData.index);
-    createSimpleColumnChart(pageMetricData.FID, pageMetricData.id, pageMetricData.index);
     createSimpleColumnChart(pageMetricData.FCP, pageMetricData.id, pageMetricData.index);
     createSimpleColumnChart(pageMetricData.INP, pageMetricData.id, pageMetricData.index);
     createSimpleColumnChart(pageMetricData.TTFB, pageMetricData.id, pageMetricData.index);
@@ -117,7 +114,6 @@ function labelMetricsWithWeeks(metrics, weeks) {
     const requestedMetrics = [
         'first_contentful_paint',
         'largest_contentful_paint',
-        'first_input_delay',
         'cumulative_layout_shift',
         'interaction_to_next_paint',
         'experimental_time_to_first_byte',
@@ -127,7 +123,6 @@ function labelMetricsWithWeeks(metrics, weeks) {
     const metricLabels = {
         first_contentful_paint: 'First Contentful Paint (FCP)',
         largest_contentful_paint: 'Largest Contentful Paint (LCP)',
-        first_input_delay: 'First Input Delay (FID)',
         cumulative_layout_shift: 'Cumulative Layout Shift (CLS)',
         interaction_to_next_paint: 'Interaction to Next Paint (INP)',
         experimental_time_to_first_byte: 'Experimental Time to First Byte (TTFB)',
@@ -137,7 +132,6 @@ function labelMetricsWithWeeks(metrics, weeks) {
     const nameToAcronymMap = {
         first_contentful_paint: 'FCP',
         largest_contentful_paint: 'LCP',
-        first_input_delay: 'FID',
         cumulative_layout_shift: 'CLS',
         interaction_to_next_paint: 'INP',
         experimental_time_to_first_byte: 'TTFB',

diff --git a/js/crux/fetchOrigin.js b/js/crux/fetchOrigin.js
@@ -118,7 +118,7 @@ function buildCard(labeledMetrics, origin, network, dates) {
 	labeledMetrics.forEach(formFactor => { buildData(formFactor, siteName, network); });
 	initializeTabs(siteName);
 	handleNoDataMetrics(siteName);
-	setupNetworkSettings(siteName, origin);
+	// setupNetworkSettings(siteName, origin);
 	buildModal(origin);
 
 	// Add event listener for the historical data button
@@ -186,7 +186,7 @@ function createDefaultCard(cardTitle, favicon, siteName, sumId, phoneId, desktop
 				<span class="close">Remove this card</span>
 				<span class="card-title grey-text text-darken-4">CRUX Settings<i class="material-icons right">close</i></span>
 				<p>When the effective connection type is unspecified, aggregated data from all connection types will be displayed for a comprehensive overview.</p>
-				${createNetworkFilters()}
+
 				<div class="history">
 					<p>Explore the historical core web vitals trends for ${origin} from the last 6 months. This data is updated weekly and reflects the overall performance across all connection types.</p>
 					<div class="center container">