Prepare cwv-distribution to use live API with fallback to bundled data

Fetches from /v1/cwv-distribution (tech-report-apis#105) when the endpoint
is available. Falls back to bundled sample data on fetch failure until the
API is deployed.

Author: alonkochba

src/js/techreport/cwvDistribution.js

@@ -1,7 +1,8 @@
 /* global Highcharts */
 
-// Hardcoded distribution data — will be replaced by API fetch when the endpoint is finalized
-import distributionData from './cwvDistributionData.json';
+import { Constants } from './utils/constants';
+// Fallback data used until the API endpoint is deployed (see tech-report-apis#105)
+import fallbackData from './cwvDistributionData.json';
 
 const METRIC_CONFIG = {
   LCP:  { bucketField: 'loading_bucket', originsField: 'lcp_origins',  unit: 'ms', label: 'LCP (ms)' },
@@ -26,11 +27,12 @@ const ZONE_COLORS = {
 };
 
 class CwvDistribution {
-  // pageConfig, config, filters, data are accepted to satisfy the Section component contract
+  // pageConfig, config are accepted to satisfy the Section component contract
   constructor(id, pageConfig, config, filters, data) {
     this.id = id;
     this.pageFilters = filters;
     this.data = data;
+    this.distributionData = null;
     this.selectedMetric = 'LCP';
     this.chart = null;
     this.root = document.querySelector(`[data-id="${this.id}"]`);
@@ -46,16 +48,16 @@ class CwvDistribution {
     root.querySelectorAll('.cwv-distribution-metric-selector').forEach(dropdown => {
       dropdown.addEventListener('change', event => {
         this.selectedMetric = event.target.value;
-        this.renderChart();
+        if (this.distributionData) this.renderChart();
       });
     });
 
-    // Lazy render on <details> toggle
+    // Lazy fetch + render on <details> toggle
     const details = root.closest('details');
     if (details) {
       details.addEventListener('toggle', () => {
-        if (details.open && !this.chart) {
-          this.renderChart();
+        if (details.open && !this.distributionData) {
+          this.fetchData();
         } else if (details.open && this.chart) {
           this.chart.reflow();
         }
@@ -64,7 +66,34 @@ class CwvDistribution {
   }
 
   updateContent() {
-    if (this.chart) this.renderChart();
+    if (this.distributionData) this.renderChart();
+  }
+
+  fetchData() {
+    const technology = this.pageFilters.app.map(encodeURIComponent).join(',');
+    const rank = encodeURIComponent(this.pageFilters.rank || 'ALL');
+    const date = this.root?.dataset?.latestDate || '';
+
+    let url = `${Constants.apiBase}/cwv-distribution?technology=${technology}&rank=${rank}`;
+    if (date) {
+      url += `&date=${encodeURIComponent(date)}`;
+    }
+
+    fetch(url)
+      .then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then(rows => {
+        if (!Array.isArray(rows) || rows.length === 0) throw new Error('Empty response');
+        this.distributionData = rows;
+        this.renderChart();
+      })
+      .catch(() => {
+        // Fall back to bundled sample data until the API is deployed
+        this.distributionData = fallbackData;
+        this.renderChart();
+      });
   }
 
   trimWithOverflow(rows, originsField, percentile) {
@@ -88,15 +117,15 @@ class CwvDistribution {
   }
 
   renderChart() {
-    if (!distributionData || distributionData.length === 0) return;
+    if (!this.distributionData || this.distributionData.length === 0) return;
     if (!this.root) return;
 
     const client = this.root.dataset.client || 'mobile';
     const metricCfg = METRIC_CONFIG[this.selectedMetric];
     const thresholds = THRESHOLDS[this.selectedMetric] || [];
 
     // Filter by client and sort by bucket
-    const clientRows = distributionData
+    const clientRows = this.distributionData
       .filter(row => row.client === client)
       .sort((a, b) => a[metricCfg.bucketField] - b[metricCfg.bucketField]);
 
@@ -210,7 +239,6 @@ class CwvDistribution {
       }],
       credits: { enabled: false },
     });
-
   }
 }
 

templates/techreport/components/cwv_distribution.html

@@ -10,6 +10,7 @@ <h3>{{ cwv_distribution_config.title }}</h3>
     data-id="{{ cwv_distribution_config.id }}"
     data-component="cwvDistribution"
     data-client="{{ request.args.get('client', '') or 'mobile' }}"
+    data-latest-date="{{ all_dates[0].value if all_dates else '' }}"
   >
     <div class="component-heading-wrapper">
       <div class="component-heading">