Add frontend code to call ListBaselineStatusCounts

Changes:
- Add the api client code to call ListBaselineStatusCounts.
- Use the new api call on the stats page to display on the features chart

Author: jcscottiii

e2e/tests/stats-page.spec.ts-snapshots/matches-the-screenshot-1-chromium-linux.png

@@ -47,7 +47,8 @@ export type BrowsersParameter = components['parameters']['browserPathParam'];
 type PageablePath =
   | '/v1/features'
   | '/v1/features/{feature_id}/stats/wpt/browsers/{browser}/channels/{channel}/{metric_view}'
-  | '/v1/stats/features/browsers/{browser}/feature_counts';
+  | '/v1/stats/features/browsers/{browser}/feature_counts'
+  | '/v1/stats/baseline_status/low_date_feature_counts';
 
 type SuccessResponsePageableData<
   T,
@@ -127,6 +128,10 @@ export type BrowserReleaseFeatureMetric =
   components['schemas']['BrowserReleaseFeatureMetric'];
 export type BrowserReleaseFeatureMetricsPage =
   components['schemas']['BrowserReleaseFeatureMetricsPage'];
+export type BaselineStatusMetricsPage =
+  components['schemas']['BaselineStatusMetricsPage'];
+export type BaselineStatusMetric =
+  components['schemas']['BaselineStatusMetric'];
 
 // TODO. Remove once not behind UbP
 const temporaryFetchOptions: FetchOptions<unknown> = {
@@ -427,6 +432,37 @@ export class APIClient {
     } while (nextPageToken !== undefined);
   }
 
+  // Returns the count of features supported that have reached baseline
+  // via "/v1/stats/baseline_status/low_date_feature_counts"
+  public async *listAggregatedBaselineStatusCounts(
+    startAtDate: Date,
+    endAtDate: Date,
+  ): AsyncIterable<BaselineStatusMetric[]> {
+    const startAt: string = startAtDate.toISOString().substring(0, 10);
+    const endAt: string = endAtDate.toISOString().substring(0, 10);
+
+    let nextPageToken;
+    do {
+      const response = await this.client.GET(
+        '/v1/stats/baseline_status/low_date_feature_counts',
+        {
+          ...temporaryFetchOptions,
+          params: {
+            query: {startAt, endAt, page_token: nextPageToken},
+          },
+        },
+      );
+      const error = response.error;
+      if (error !== undefined) {
+        throw createAPIError(error);
+      }
+      const page: BaselineStatusMetricsPage =
+        response.data as BaselineStatusMetricsPage;
+      nextPageToken = page?.metadata?.next_page_token;
+      yield page.data; // Yield the entire page
+    } while (nextPageToken !== undefined);
+  }
+
   // Fetches feature counts for a browser in a date range
   // via "/v1/stats/features/browsers/{browser}/feature_counts"
   public async *getMissingOneImplementationCountsForBrowser(

e2e/tests/stats-page.spec.ts-snapshots/matches-the-screenshot-1-firefox-linux.png

@@ -26,6 +26,7 @@ import {
   type APIClient,
   type BrowsersParameter,
   type BrowserReleaseFeatureMetric,
+  BaselineStatusMetric,
 } from '../api/client.js';
 import {apiClientContext} from '../contexts/api-client-context.js';
 import {getFeaturesLaggingFlag} from '../utils/urls.js';
@@ -58,6 +59,9 @@ export class StatsPage extends BaseChartsPage {
   @state()
   globalFeatureSupport = new Map<string, Array<BrowserReleaseFeatureMetric>>();
 
+  @state()
+  globalFeatureSupportMax = Array<BaselineStatusMetric>();
+
   @state()
   globalFeatureSupportChartOptions = {};
 
@@ -143,7 +147,7 @@ export class StatsPage extends BaseChartsPage {
     endDate: Date,
   ) {
     if (typeof apiClient !== 'object') return;
-    const promises = ALL_BROWSERS.map(async browser => {
+    const browserPromises = ALL_BROWSERS.map(async browser => {
       for await (const page of apiClient.getFeatureCountsForBrowser(
         browser,
         startDate,
@@ -159,9 +163,30 @@ export class StatsPage extends BaseChartsPage {
       }
       this.globalFeatureSupportChartDataObj = this.createDisplayDataFromMap(
         this.globalFeatureSupport,
+        {
+          label: 'Total number of Baseline features',
+          data: this.globalFeatureSupportMax,
+        },
       );
     });
-    await Promise.all(promises); // Wait for all browsers to finish
+
+    const maxPromise = (async () => {
+      for await (const page of apiClient.listAggregatedBaselineStatusCounts(
+        startDate,
+        endDate,
+      )) {
+        const existingMaxData = this.globalFeatureSupportMax || [];
+        this.globalFeatureSupportMax = [...existingMaxData, ...page];
+        this.globalFeatureSupportChartDataObj = this.createDisplayDataFromMap(
+          this.globalFeatureSupport,
+          {
+            label: 'Total number of Baseline features',
+            data: this.globalFeatureSupportMax,
+          },
+        );
+      }
+    })();
+    await Promise.all([...browserPromises, maxPromise]); // Wait for all promises to finish
   }
 
   async _fetchMissingOneImplemenationCounts(
@@ -251,6 +276,7 @@ export class StatsPage extends BaseChartsPage {
   // and stats page, https://github.com/GoogleChrome/webstatus.dev/issues/964.
   createDisplayDataFromMap(
     targetMap: Map<string, Array<BrowserReleaseFeatureMetric>>,
+    maxData?: {label: string; data: Array<BaselineStatusMetric>},
   ): WebStatusDataObj {
     // Get the list of supported browsers.
     const browsers = this.supportedBrowsers;
@@ -260,9 +286,21 @@ export class StatsPage extends BaseChartsPage {
     for (const browser of browsers) {
       dataObj.cols.push({type: 'number', label: browser, role: 'data'});
     }
+    if (maxData) {
+      dataObj.cols.push({type: 'number', label: maxData.label, role: 'data'});
+    }
 
     // Map from date to an object with counts for each browser
-    const dateToBrowserDataMap = new Map<number, {[key: string]: number}>();
+    const dateToBrowserDataMap = new Map<
+      number,
+      {[key: string]: number | null}
+    >();
+
+    // Create a template object with all browsers initialized to null
+    const browserNullTemplate: {[key: string]: number | null} = {};
+    for (const browser of browsers) {
+      browserNullTemplate[browser] = null;
+    }
 
     // Merge data across all browsers into one array of rows.
     for (const browser of browsers) {
@@ -279,6 +317,26 @@ export class StatsPage extends BaseChartsPage {
         browserCounts[browser] = featureCount;
       }
     }
+
+    // Process the maxArray (overall max data)
+    if (maxData) {
+      maxData.data.sort(
+        (a, b) =>
+          new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
+      ); // Sort maxArray if not already sorted
+      for (const maxEntry of maxData.data) {
+        const dateSeconds = new Date(maxEntry.timestamp).getTime();
+        const maxCount = maxEntry.count!;
+
+        // If this date hasn't been encountered before, initialize it with the null template
+        if (!dateToBrowserDataMap.has(dateSeconds)) {
+          dateToBrowserDataMap.set(dateSeconds, {...browserNullTemplate}); // Use spread to create a copy
+        }
+        const browserCounts = dateToBrowserDataMap.get(dateSeconds)!;
+        browserCounts[maxData.label] = maxCount; // Add the max count
+      }
+    }
+
     // Create array of dateToBrowserDataMap entries and sort by dateSeconds
     const data = Array.from(dateToBrowserDataMap.entries()).sort(
       ([d1], [d2]) => d1 - d2,
@@ -289,13 +347,20 @@ export class StatsPage extends BaseChartsPage {
       const dateSeconds = datum[0];
       const date = new Date(dateSeconds);
       const browserCounts = datum[1];
+
+      const row: [Date, ...Array<number | string | null>] = [date]; // Start the row with the date
+
       // Make an array of browser counts, in the order of browsers.
       // If the browser is not in the browserCounts, add null.
-      const browserCountArray = browsers.map(
-        browser => browserCounts[browser] || null,
-      );
+      browsers.forEach(browser => {
+        row.push(browserCounts[browser] || null);
+      });
+
+      if (maxData) {
+        row.push(browserCounts[maxData.label] || null); // Add max count (or null if missing)
+      }
 
-      dataObj.rows.push([date, ...browserCountArray]);
+      dataObj.rows.push(row);
     }
     return dataObj;
   }