[WIP] Category dashboard with collapsible filters

config/techreport.json

@@ -3,6 +3,11 @@
   "name": "Technology Report",
   "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.",
   "config": {
+    "default_apps": {
+      "drilldown": [ "ALL" ],
+      "comparison": [ "ALL", "WordPress", "Wix", "Next.js" ]
+    },
+    "default_category": "CMS",
     "cwv_subcategories": [
       "CLS",
       "LCP",
@@ -39,7 +44,7 @@
       "id": "landing",
       "title": "Technology Report",
       "subtitle": "Report",
-      "description": "This is placeholder text about how the report works",
+      "description": "",
       "data": {},
       "filters": {
         "technologies": ["WordPress", "Squarespace", "Drupal"]
@@ -263,7 +268,7 @@
         },
         "good_cwv_timeseries": {
           "title": "Good Core Web Vitals over time",
-          "description": "Placeholder - combination of several metrics",
+          "description": "The percentage of origins passing all three Core Web Vitals (LCP, INP, CLS) with a good experience. Note that if an origin is missing INP data, it's assessed based on the performance of the remaining metrics.",
           "id": "good_cwv_timeseries",
           "endpoint": "vitals",
           "metric": "good_pct",
@@ -425,7 +430,7 @@
         },
         "lighthouse_timeseries": {
           "title": "Lighthouse over time",
-          "description": "Placeholder text",
+          "description": "",
           "id": "lighthouse_timeseries",
           "endpoint": "lighthouse",
           "metric": "median_score_pct",
@@ -557,7 +562,7 @@
         },
         "weight_timeseries": {
           "title": "Weight over time",
-          "description": "Placeholder text",
+          "description": "",
           "id": "weight_timeseries",
           "summary": true,
           "endpoint": "pageWeight",
@@ -695,7 +700,8 @@
             "#E24070"
           ],
           "overrides": {
-            "WordPress": "#fff000"
+            "WordPress": "#3858e9",
+            "ALL": "#69797e"
           }
         },
         "default": {
@@ -857,7 +863,7 @@
         },
         "lighthouse_timeseries": {
           "title": "Lighthouse over time",
-          "description": "Placeholder text",
+          "description": "",
           "id": "lighthouse_timeseries",
           "endpoint": "lighthouse",
           "metric": "median_score_pct",
@@ -952,7 +958,7 @@
         },
         "weight_timeseries": {
           "title": "Page weight over time",
-          "description": "Placeholder text",
+          "description": "",
           "id": "weight_timeseries",
           "endpoint": "pageWeight",
           "metric": "median_bytes",
@@ -1047,7 +1053,7 @@
         },
         "adoption_timeseries": {
           "title": "Origins over time",
-          "description": "Placeholder text",
+          "description": "",
           "id": "adoption_timeseries",
           "endpoint": "adoption",
           "metric": "origins",
@@ -1118,6 +1124,89 @@
         }
       },
       "description": "Comparison placeholder"
+    },
+    "category": {
+      "id": "category",
+      "title": "Categories",
+      "subtitle": "Technology Report",
+      "config": {
+        "default": {
+          "category": "CMS",
+          "app": ["ALL", "WordPress", "Drupal"],
+          "series": {
+            "breakdown": "app"
+          }
+        },
+        "tech_comparison_summary": {
+          "id": "tech_comparison_summary",
+          "table": {
+            "caption": "Summary",
+            "columns": [
+              {
+                "key": "selectTech",
+                "name": "Select technology",
+                "hiddenName": true,
+                "type": "checkbox"
+              },
+              {
+                "key": "technology",
+                "name": "Tech",
+                "type": "heading"
+              },
+              {
+                "key": "origins",
+                "name": "Origins",
+                "breakdown": "subcategory",
+                "subcategory": "adoption",
+                "endpoint": "adoption",
+                "metric": "origins"
+              },
+              {
+                "key": "good_pct",
+                "name": "Good CWV",
+                "breakdown": "subcategory",
+                "subcategory": "overall",
+                "suffix": "%",
+                "className": "main-cell pct-value",
+                "endpoint": "vitals",
+                "metric": "good_pct"
+              },
+              {
+                "key": "good_pct",
+                "name": "LCP",
+                "breakdown": "subcategory",
+                "subcategory": "LCP",
+                "suffix": "%",
+                "endpoint": "vitals",
+                "metric": "good_pct"
+              },
+              {
+                "key": "good_pct",
+                "name": "INP",
+                "breakdown": "subcategory",
+                "subcategory": "INP",
+                "suffix": "%",
+                "endpoint": "vitals",
+                "metric": "good_pct"
+              },
+              {
+                "key": "good_pct",
+                "name": "CLS",
+                "breakdown": "subcategory",
+                "subcategory": "CLS",
+                "suffix": "%",
+                "endpoint": "vitals",
+                "metric": "good_pct"
+              },
+              {
+                "key": "client",
+                "name": "Client",
+                "className": "client"
+              }
+            ]
+          }
+        }
+      }
     }
   },
 
@@ -1145,6 +1234,9 @@
         }
       },
       "vitals": {
+        "general": {
+          "description": "Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. A good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices."
+        },
         "overall": {
           "label": "Overall Core Web Vitals",
           "title": "Passes Core Web Vitals",
@@ -1178,23 +1270,29 @@
         }
       },
       "pageWeight": {
+        "general": {
+          "description": ""
+        },
         "images": {
           "title": "Image Weight",
-          "description": "todo"
+          "description": ""
         },
         "js": {
           "title": "JavaScript Transfer Size",
-          "description": "todo"
+          "description": ""
         },
         "total": {
           "title": "Total Page Weight",
-          "description": "todo"
+          "description": ""
         }
       },
       "adoption": {
+        "general": {
+          "description": ""
+        },
         "adoption": {
           "title": "Adoption",
-          "description": "Todo"
+          "description": "The amount of origins using this technology over time."
         }
       }
     },

server/routes.py

@@ -68,7 +68,7 @@ def reports():
 
 
 @app.route("/reports/techreport/<page_id>", strict_slashes=False)
-def techreport(page_id):
+def techreportlanding(page_id):
     # Needed for the header dropdown
     all_reports = report_util.get_reports()
 
@@ -91,10 +91,12 @@ def techreport(page_id):
     # Get the filters
     requested_geo = request.args.get("geo") or "ALL"
     requested_rank = request.args.get("rank") or "ALL"
+    requested_category = request.args.get("category") or "ALL"
     filters = {
         "geo": requested_geo,
         "rank": requested_rank,
         "app": requested_technologies,
+        "category": requested_category,
     }
 
     active_tech_report["filters"] = filters
@@ -105,6 +107,63 @@ def techreport(page_id):
         tech_report_labels=tech_report.get("labels"),
         tech_report_config=tech_report.get("config"),
         tech_report_page=active_tech_report,
+        custom_navigation=True,
+        reports=all_reports,
+    )
+
+
+@app.route("/reports/techreport/tech", strict_slashes=False)
+def techreport():
+    # Needed for the header dropdown
+    all_reports = report_util.get_reports()
+
+    # Get the configuration for the tech report
+    tech_report = tech_report_util.get_report()
+
+    # Get the current page_id
+    requested_technologies = ["ALL"]
+    if request.args.get("tech"):
+        requested_technologies = request.args.get("tech").split(",")
+
+    if len(requested_technologies) > 1:
+        page_id = "comparison"
+    else:
+        page_id = "drilldown"
+
+    # Get the settings for the current page
+    active_tech_report = tech_report.get("pages").get(page_id)
+
+    # Add the technologies requested in the URL to the filters
+    # Use the default configured techs as fallback
+    # Use ["ALL"] if there is nothing configured
+    requested_technologies = active_tech_report.get("config").get("default").get(
+        "app"
+    ) or ["ALL"]
+
+    if request.args.get("tech"):
+        requested_technologies = request.args.get("tech").split(",")
+
+    # Get the filters
+    requested_geo = request.args.get("geo") or "ALL"
+    requested_rank = request.args.get("rank") or "ALL"
+    requested_category = request.args.get("category") or "ALL"
+    filters = {
+        "geo": requested_geo,
+        "rank": requested_rank,
+        "app": requested_technologies,
+        "category": requested_category,
+    }
+
+    active_tech_report["filters"] = filters
+
+    return render_template(
+        "techreport/%s.html" % page_id,
+        active_page=page_id,
+        requested_page="technology",
+        tech_report_labels=tech_report.get("labels"),
+        tech_report_config=tech_report.get("config"),
+        tech_report_page=active_tech_report,
+        custom_navigation=True,
         reports=all_reports,
     )
 

src/js/components/drilldownHeader.js

@@ -1,7 +1,7 @@
 import { DataUtils } from "../techreport/utils/data";
 
 function setTitle(title) {
-  const mainTitle = document.querySelector('h2 span.main-title');
+  const mainTitle = document.querySelector('h1 span.main-title');
   mainTitle.textContent = title;
 }