Bugfixes and minor improvements

config/techreport.json

@@ -115,11 +115,10 @@
             "url": "#lighthouse&median-lighthouse-over-time=accessibility"
           },
           {
-            "endpoint": "lighthouse",
-            "category": "seo",
-            "metric": "median_score_pct",
+            "endpoint": "pageWeight",
+            "category": "total",
+            "metric": "median_bytes_formatted",
             "label": "Page weight",
-            "suffix": "kB",
             "description": "Median total bytes per page for across tested origins.",
             "url": "#page-weight"
           }
@@ -525,26 +524,23 @@
             {
               "endpoint": "pageWeight",
               "category": "images",
-              "metric": "median_bytes",
+              "metric": "median_bytes_formatted",
               "label": "Image Weight",
-              "url": "?weight-over-time=image#page-weight",
-              "suffix": " kB"
+              "url": "?weight-over-time=image#page-weight"
             },
             {
               "endpoint": "pageWeight",
               "category": "js",
-              "metric": "median_bytes",
+              "metric": "median_bytes_formatted",
               "label": "JavaScript Size",
-              "url": "?weight-over-time=js#page-weight",
-              "suffix": " kB"
+              "url": "?weight-over-time=js#page-weight"
             },
             {
               "endpoint": "pageWeight",
               "category": "total",
-              "metric": "median_bytes",
+              "metric": "median_bytes_formatted",
               "label": "Total Page Weight",
-              "url": "?weight-over-time=total#page-weight",
-              "suffix": " kB"
+              "url": "?weight-over-time=total#page-weight"
             }
           ]
         },
@@ -586,8 +582,7 @@
               },
               {
                 "name": "Median Bytes",
-                "key": "median_bytes",
-                "suffix": "kB",
+                "key": "median_bytes_formatted",
                 "className": "main-cell"
               },
               {
@@ -603,19 +598,21 @@
             "default": "images",
             "title": "Image weight over time",
             "metric": "median_bytes",
+            "suffix": "bytes",
+            "metric_summary": "median_bytes_formatted",
             "height": 600,
             "series": {
               "breakdown": "client",
               "values": [
                 {
                   "name": "desktop",
                   "color": "#669E8E",
-                  "suffix": " kB"
+                  "suffix": " bytes"
                 },
                 {
                   "name": "mobile",
                   "color": "#BD6EBE",
-                  "suffix": " kB"
+                  "suffix": " bytes"
                 }
               ],
               "defaults": [
@@ -648,7 +645,7 @@
               ]
             },
             "yAxis": {
-              "title": "Weight in kB"
+              "title": "Weight in bytes"
             }
           }
         }
@@ -978,8 +975,7 @@
               },
               {
                 "name": "Median Bytes",
-                "key": "median_bytes",
-                "suffix": "kB",
+                "key": "median_bytes_formatted",
                 "className": "main-cell",
                 "breakdown": "app"
               },
@@ -997,17 +993,20 @@
             "param": "median-weight-over-time",
             "default": "total",
             "metric": "median_bytes",
+            "metric_summary": "median_bytes_formatted",
             "series": {
               "breakdown": "app",
-              "suffix": " kB",
+              "suffix": " bytes",
               "defaults": [
                 {
                   "name": "App",
-                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0],
+                  "suffix": " bytes"
                 },
                 {
                   "name": "App",
-                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0],
+                  "suffix": " bytes"
                 }
               ]
             },
@@ -1030,7 +1029,7 @@
               ]
             },
             "yAxis": {
-              "title": "Weight in kB"
+              "title": "Weight in bytes"
             }
           }
         },

server/csp.py

@@ -12,6 +12,7 @@
         "lux.speedcurve.com",
         "'unsafe-inline'",
         "dev-gw-2vzgiib6.ue.gateway.dev",
+        "prod-gw-2vzgiib6.ue.gateway.dev",
     ],
     "font-src": ["'self'"],
     "connect-src": [
@@ -26,6 +27,7 @@
         "*.analytics.google.com",
         "stats.g.doubleclick.net",
         "dev-gw-2vzgiib6.ue.gateway.dev",
+        "prod-gw-2vzgiib6.ue.gateway.dev",
     ],
     "img-src": ["'self'", "https:"],
     "frame-src": ["'none'"],

src/js/components/filters.js

@@ -63,6 +63,8 @@ class Filters {
     url.searchParams.delete('rank');
     url.searchParams.append('rank', rank);
 
+    /* Scroll to the report content */
+    url.hash = '#report-content';
 
     /* Update the url */
     location.href = url;
@@ -88,8 +90,12 @@ class Filters {
         techSelector.before(errorMsg);
       }
 
+      /* Get a list of technologies */
+      const techs = this.technologies;
+      techs.unshift({ technology: 'ALL' });
+
       /* Add one option per technology */
-      this.technologies.forEach((technology) => {
+      techs.forEach((technology) => {
         const optionTmpl = document.getElementById('filter-option').content.cloneNode(true);
         const option = optionTmpl.querySelector('option');
         const formattedTech = technology.technology;
@@ -150,7 +156,8 @@ class Filters {
         all.innerHTML = 'ALL';
         select.append(all);
 
-        this.categories.forEach((category) => {
+        const sortedCategories = this.categories.sort((a, b) => a.category !== b.category ? a.category < b.category ? -1 : 1 : 0);
+        sortedCategories.forEach((category) => {
           const option = document.createElement('option');
           option.value = category.category;
           option.innerHTML = category.category;
@@ -162,18 +169,23 @@ class Filters {
 
   /* Set the selected category */
   updateCategory(event) {
-    const selectedTechs = this.categories.find(category => category.category === event.target.value)?.technologies;
-    const selectedTechInfo = [];
-    selectedTechs.forEach(selectedTech => selectedTechInfo.push(this.technologies.find(tech => tech.technology === selectedTech)));
+    // Get the techs associated with the selected category
+    const selectedCategory = this.categories.find(category => category.category === event.target.value);
+    let selectedTechs = selectedCategory?.technologies || [];
+    if(event.target.value === 'ALL') {
+      selectedTechs = this.technologies.map(technology => technology.technology);
+    }
+
+    // Get the component with the selected tech
     const techSelector = document.getElementById(event.target.dataset.tech);
     techSelector.innerHTML = '';
 
-    selectedTechInfo.forEach((technology) => {
+    // Update the options
+    selectedTechs.forEach((technology) => {
       const option = document.createElement('option');
-      const formattedTech = technology.technology;
-      option.textContent = technology.technology;
-      option.value = formattedTech;
-      if(formattedTech === techSelector.getAttribute('data-selected')) {
+      option.textContent = technology;
+      option.value = technology;
+      if(technology === techSelector.getAttribute('data-selected')) {
         option.selected = true;
       }
       techSelector.append(option);

src/js/techreport/index.js

@@ -174,7 +174,7 @@ class TechReport {
       },
     ];
 
-    const base = 'https://dev-gw-2vzgiib6.ue.gateway.dev/v1';
+    const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1';
 
     const technology = technologies.join('%2C')
       .replaceAll(" ", "%20");
@@ -239,7 +239,7 @@ class TechReport {
   // Fetch the data for the filter dropdowns
   getFilterInfo() {
     const filterData = {};
-    const base = 'https://dev-gw-2vzgiib6.ue.gateway.dev/v1';
+    const base = 'https://prod-gw-2vzgiib6.ue.gateway.dev/v1';
 
     const filterApis = ['categories', 'technologies', 'ranks', 'geos'];
 

src/js/techreport/summaryCards.js

@@ -59,7 +59,6 @@ class SummaryCard {
           const scoreCategoryName = scoreCategory?.name;
           circle.setAttribute('style', `--offset: ${100 - latestValue};`);
           const chart = card.querySelector('svg.progress-chart');
-          console.log('chart', chart);
           chart.classList.add(scoreCategoryName);
         });