Fix page weight and console bugs (#1109)

* Fix page weight bug

* Add checks to prevent console errors

Author: tunetheweb

config/techreport.json

@@ -580,35 +580,35 @@
           "cards": [
             {
               "endpoint": "pageWeight",
-              "category": "images",
+              "category": "total",
               "metric": "median_bytes_formatted",
-              "label": "Image Weight",
-              "url": "?weight-over-time=image#page-weight",
+              "label": "Total Page Weight",
+              "url": "?weight-over-time=total#page-weight",
               "change": "true",
               "changeMeaning": "inverted"
             },
             {
               "endpoint": "pageWeight",
-              "category": "js",
+              "category": "images",
               "metric": "median_bytes_formatted",
-              "label": "JavaScript Size",
-              "url": "?weight-over-time=js#page-weight",
+              "label": "Image Weight",
+              "url": "?weight-over-time=image#page-weight",
               "change": "true",
               "changeMeaning": "inverted"
             },
             {
               "endpoint": "pageWeight",
-              "category": "total",
+              "category": "js",
               "metric": "median_bytes_formatted",
-              "label": "Total Page Weight",
-              "url": "?weight-over-time=total#page-weight",
+              "label": "JavaScript Size",
+              "url": "?weight-over-time=js#page-weight",
               "change": "true",
               "changeMeaning": "inverted"
             }
           ]
         },
         "weight_timeseries": {
-          "title": "Weight over time",
+          "title": "Median page weight over time",
           "description": "",
           "id": "weight_timeseries",
           "summary": true,
@@ -666,8 +666,8 @@
           "viz": {
             "base": "median_bytes_",
             "param": "weight-over-time",
-            "default": "images",
-            "title": "Image weight over time",
+            "default": "total",
+            "title": "Weight over time",
             "metric": "median_bytes",
             "suffix": "bytes",
             "metric_summary": "median_bytes_formatted",
@@ -1026,7 +1026,7 @@
           }
         },
         "weight_timeseries": {
-          "title": "Page weight over time",
+          "title": "Total page weight",
           "description": "",
           "id": "weight_timeseries",
           "endpoint": "pageWeight",

src/js/techreport/index.js

@@ -406,7 +406,7 @@ class TechReport {
   // Update drilldown page components
   updateDrilldownComponents(data) {
     const app = this.filters.app[0];
-    const icon = data[app].at(-1).icon;
+    const icon = data[app]?.at(-1)?.icon;
     DrilldownHeader.update(this.filters);
     DrilldownHeader.setIcon(`${encodeURI(icon)}`);
 

src/js/techreport/timeseries.js

@@ -164,7 +164,7 @@ class Timeseries {
         } else {
           /* Add the value to the wrapper */
           const valueLabel = document.createElement('p');
-          valueLabel.textContent = `${latestValue.toLocaleString()}${breakdown.suffix || ''}`;
+          valueLabel.textContent = `${latestValue?.toLocaleString()}${breakdown.suffix || ''}`;
           valueLabel.classList.add('breakdown-value');
           itemWrapper.appendChild(valueLabel);
         }

templates/techreport/drilldown.html

@@ -118,7 +118,7 @@ <h3>{{ tech_report_page.config.weight_summary.title }}</h3>
 
         <div class="card">
           {% set timeseries = tech_report_page.config.weight_timeseries %}
-          {% set selected_subcategory = request.args.get('weight-over-time', '') or tech_report_page.config.weight_timeseries.viz.default or 'performance' %}
+          {% set selected_subcategory = request.args.get('weight-over-time', '') or tech_report_page.config.weight_timeseries.viz.default or 'total' %}
           {% include "techreport/components/timeseries.html" %}
         </div>
       </div>