Fix distribution date (#1251)

Author: tunetheweb

src/js/techreport/cwvDistribution.js

@@ -16,9 +16,33 @@ class CwvDistribution {
     this.date = this.pageFilters.end || this.root?.dataset?.latestDate || '';
     this.selectedMetric = this.resolveMetric(new URLSearchParams(window.location.search).get('good-cwv-over-time'));
 
-    // Populate "Latest data" timestamp immediately
-    const tsSlot = this.root?.querySelector('[data-slot="cwv-distribution-timestamp"]');
-    if (tsSlot && this.date) tsSlot.textContent = UIUtils.printMonthYear(this.date);
+    const updateDateFromTimeseries = (newDate) => {
+      this.date = newDate;
+      const tsSlot = this.root?.querySelector('[data-slot="cwv-distribution-timestamp"]');
+      if (tsSlot && this.date) tsSlot.textContent = UIUtils.printMonthYear(this.date);
+      if (!this.distributionData) {
+        this.fetchData();
+      }
+    };
+
+    if (!this.date) {
+      // If we don't have a date, see if we can get it from the timeseries component
+      // If not wait for the event to emit when the date is available
+      const cwvChartDate = document.querySelector('#section-good_cwv_timeseries [data-slot=timestamp]');
+      if (cwvChartDate && cwvChartDate.dataset.date) {
+        updateDateFromTimeseries(cwvChartDate.dataset.date);
+      } else {
+        document.addEventListener('timeseries-date-updated', (event) => {
+          if (event.detail.id === 'good_cwv_timeseries') {
+            updateDateFromTimeseries(event.detail.date);
+          }
+        });
+      }
+    } else {
+      // Populate "Latest data" timestamp immediately
+      const tsSlot = this.root?.querySelector('[data-slot="cwv-distribution-timestamp"]');
+      if (tsSlot && this.date) tsSlot.textContent = UIUtils.printMonthYear(this.date);
+    }
 
     this.updateTitle();
     this.bindEventListeners();
@@ -66,7 +90,11 @@ class CwvDistribution {
     if (show) {
       this.root.classList.remove('hidden');
       if (btn) btn.textContent = 'Hide histogram';
-      if (!this.distributionData) {
+      if (!this.date) {
+        const cwvChartDate = document.querySelector('#section-good_cwv_timeseries [data-slot=timestamp]');
+        this.date = cwvChartDate.dataset.date;
+      }
+      if (!this.distributionData && this.date) {
         this.fetchData();
       } else if (this.chart) {
         this.chart.reflow();

src/js/techreport/timeseries.js

@@ -137,7 +137,14 @@ class Timeseries {
       container.innerHTML = '';
 
       /* Update the date to the most recent timestamp in the dataset */
-      viz.querySelector('[data-slot="timestamp"]').innerHTML = UIUtils.printMonthYear(sorted?.[0]?.date);
+      const timestamp = viz.querySelector('[data-slot="timestamp"]');
+      timestamp.textContent = UIUtils.printMonthYear(sorted?.[0]?.date);
+      timestamp.setAttribute('data-date', sorted?.[0]?.date);
+
+      /* Broadcast that the date has been updated */
+      document.dispatchEvent(new CustomEvent('timeseries-date-updated', {
+        detail: { id: this.id, date: sorted?.[0]?.date }
+      }));
 
       /* For each of the breakdowns, add a component with the latest data */
       config.series.values.forEach(breakdown => {
@@ -246,6 +253,12 @@ class Timeseries {
           value.textContent = 'No data';
         }
         timestamp.textContent = UIUtils.printMonthYear(latest.date);
+        timestamp.setAttribute('data-date', latest.date);
+
+        /* Broadcast that the date has been updated */
+        document.dispatchEvent(new CustomEvent('timeseries-date-updated', {
+          detail: { id: this.id, date: latest.date }
+        }));
         const techColor = UIUtils.getAppColor(app, this.pageFilters.app, this.pageConfig.colors);
         const fallback = this.pageConfig.colors.app[index];
         card.style.setProperty('--breakdown-color', techColor || fallback);

templates/techreport/components/cwv_distribution.html

@@ -6,7 +6,7 @@
   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 '' }}"
+  data-latest-date=""
 >
   <div class="cwv-distribution-header">
     <h3><a href="#section-{{ cwv_distribution_config.id }}" class="anchor"><span data-slot="cwv-distribution-title-metric">Core Web Vitals</span> histogram</a></h3>