Add Core Web Vitals distribution histogram to tech report (#1241)

* Add Core Web Vitals distribution histogram to tech report drilldown

Adds a collapsible histogram chart to the CWV section showing how origins
are distributed across performance buckets for LCP, CLS, INP, FCP, and TTFB.

Features:
- Column chart with bars color-coded green/orange/red by CWV thresholds
- Dashed plotlines marking good/needs-improvement boundaries
- Tail buckets aggregated into an overflow "X+" bar so all origins are shown
- Metric selector in the collapsed summary bar for quick switching
- Loading spinner while the API call is in progress
- Error message when data is unavailable
- Light and dark mode support with theme-aware colors
- Anchor link (#section-cwv_distribution) with auto-expand on direct navigation
- URL hash updates when the section is expanded

Fetches data from /v1/cwv-distribution (HTTPArchive/tech-report-apis#105)
with technology, date, rank, and geo parameters.

Also scopes the global .highcharts-point CSS rule to line/spline series only,
so column chart bar colors are not overridden.

Closes #1147

* Address PR review feedback

- Rename title/description per suggestion ("Core Web Vitals histograms")
- Restructure button bar so all 3 buttons appear first in DOM order,
  followed by content wrappers (fixes tab order)
- Remove per-component metric selectors; the pass-rate timeseries
  selector now drives the geo breakdown and histogram via a shared
  cwv-metric-change event
- Deep-linking works via ?good-cwv-over-time=CLS
- Histogram resolves "overall" to LCP (has no combined view)
- Titles update dynamically ("LCP histogram", "INP geographic breakdown")
- Rename "Show distribution" button to "Show histogram"

* Security errors

* More fixes

* Move config to JSON

* Keep CodeQL happy

* Hide hash

---------

Co-authored-by: Barry Pollard <barrypollard@google.com>

Author: alonkochba

config/last_updated.json

@@ -51,8 +51,8 @@
   },
   "/static/css/techreport/techreport.css": {
     "date_published": "2023-10-09T00:00:00.000Z",
-    "date_modified": "2026-03-24T00:00:00.000Z",
-    "hash": "fed0915210b6a05bb8430623fe296586"
+    "date_modified": "2026-04-14T00:00:00.000Z",
+    "hash": "5a211ca184de3cd5731dfedaa1af929d"
   },
   "/static/js/accessibility.js": {
     "date_published": "2023-10-09T00:00:00.000Z",
@@ -166,18 +166,23 @@
   },
   "/static/js/techreport.js": {
     "date_published": "2023-10-09T00:00:00.000Z",
-    "date_modified": "2026-03-10T00:00:00.000Z",
+    "date_modified": "2026-04-14T00:00:00.000Z",
     "hash": "dfcef45ae09e7c2fcd3ab825e9503729"
   },
+  "/static/js/techreport/cwvDistribution.js": {
+    "date_published": "2026-04-07T00:00:00.000Z",
+    "date_modified": "2026-04-14T00:00:00.000Z",
+    "hash": "a9e884b2786b23670ac13e2c8a121183"
+  },
   "/static/js/techreport/geoBreakdown.js": {
     "date_published": "2026-03-24T00:00:00.000Z",
-    "date_modified": "2026-03-24T00:00:00.000Z",
-    "hash": "030573b2da410620601352f9f6df8695"
+    "date_modified": "2026-04-14T00:00:00.000Z",
+    "hash": "2eab1a9b9c47001e8f5f757d041f4897"
   },
   "/static/js/techreport/section.js": {
     "date_published": "2023-10-09T00:00:00.000Z",
-    "date_modified": "2026-03-24T00:00:00.000Z",
-    "hash": "376404acd77a2e5adeab188a9b5ccb94"
+    "date_modified": "2026-04-07T00:00:00.000Z",
+    "hash": "c813fe60fb1bcd338221f72b64739701"
   },
   "/static/js/techreport/timeseries.js": {
     "date_published": "2023-10-09T00:00:00.000Z",
@@ -191,8 +196,8 @@
   },
   "/static/js/web-vitals.js": {
     "date_published": "2022-01-03T00:00:00.000Z",
-    "date_modified": "2025-08-18T00:00:00.000Z",
-    "hash": "e7b8ecda99703fdc7c6a33b6a3d07cc6"
+    "date_modified": "2026-04-07T00:00:00.000Z",
+    "hash": "1b30cb4e8907aa62bc9045690570a4eb"
   },
   "about.html": {
     "date_published": "2018-05-08T00:00:00.000Z",

config/techreport.json

@@ -15,6 +15,13 @@
       "INP",
       "TTFB"
     ],
+    "cwv_thresholds": {
+      "LCP":  [{ "value": 2500, "label": "Good" }, { "value": 4000, "label": "Needs improvement" }],
+      "FCP":  [{ "value": 1800, "label": "Good" }, { "value": 3000, "label": "Needs improvement" }],
+      "TTFB": [{ "value": 800,  "label": "Good" }, { "value": 1800, "label": "Needs improvement" }],
+      "INP":  [{ "value": 200,  "label": "Good" }, { "value": 500,  "label": "Needs improvement" }],
+      "CLS":  [{ "value": 0.1,  "label": "Good" }, { "value": 0.25, "label": "Needs improvement" }]
+    },
     "lighthouse_subcategories": [
       "accessibility",
       "best_practices",
@@ -726,14 +733,76 @@
           "id": "geo_breakdown",
           "title": "Core Web Vitals geographic breakdown",
           "description": "Top geographies by number of origins, showing the percentage with good Core Web Vitals and individual metrics.",
-          "metric_options": [
-            { "label": "Good Core Web Vitals", "value": "overall" },
-            { "label": "Good LCP", "value": "LCP" },
-            { "label": "Good INP", "value": "INP" },
-            { "label": "Good CLS", "value": "CLS" },
-            { "label": "Good FCP", "value": "FCP" },
-            { "label": "Good TTFB", "value": "TTFB" }
-          ]
+          "metric_labels": {
+            "overall": "Good Core Web Vitals",
+            "LCP": "Good LCP",
+            "INP": "Good INP",
+            "CLS": "Good CLS",
+            "FCP": "Good FCP",
+            "TTFB": "Good TTFB"
+          }
+        },
+        "cwv_distribution": {
+          "id": "cwv_distribution",
+          "title": "Core Web Vitals histograms",
+          "description": "How origins are distributed for individual Core Web Vitals metrics. Green, orange, and red zones indicate good, needs improvement, and poor thresholds respectively.",
+          "metric_config": {
+            "LCP":  {
+              "label": "LCP",
+              "bucketField": "loading_bucket",
+              "originsField": "lcp_origins",
+              "unit": "ms",
+              "axis_label": "LCP (ms)",
+              "step": 100
+            },
+            "FCP":  {
+              "label": "FCP",
+              "bucketField": "loading_bucket",
+              "originsField": "fcp_origins",
+              "unit": "ms",
+              "axis_label": "FCP (ms)",
+              "step": 100
+            },
+            "TTFB": {
+              "label": "TTFB",
+              "bucketField": "loading_bucket",
+              "originsField": "ttfb_origins",
+              "unit": "ms",
+              "axis_label": "TTFB (ms)",
+              "step": 100 },
+            "INP":  {
+              "label": "INP",
+              "bucketField": "inp_bucket",
+              "originsField": "inp_origins",
+              "unit": "ms",
+              "axis_label": "INP (ms)",
+              "step": 25
+            },
+            "CLS":  {
+              "label": "CLS",
+              "bucketField": "cls_bucket",
+              "originsField": "cls_origins",
+              "unit": "",
+              "axis_label": "CLS",
+              "step": 0.05
+            }
+          },
+          "zone_colors": {
+            "light": {
+              "good": "#0CCE6B",
+              "needsImprovement": "#FFA400",
+              "poor": "#FF4E42",
+              "text": "#444",
+              "gridLine": "#e6e6e6"
+            },
+            "dark": {
+              "good": "#0CCE6B",
+              "needsImprovement": "#FBBC04",
+              "poor": "#FF6659",
+              "text": "#ccc",
+              "gridLine": "#444"
+            }
+          }
         }
       }
     },