Title case browser names in chart legends on stats page

This addresses this feedback #1162 (comment)

It uses the existing BROWSER_ID_TO_LABEL variable that we use on the feature detail page.

Author: jcscottiii

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

@@ -140,28 +140,28 @@ describe('WebstatusStatsGlobalFeatureCountChartPanel', () => {
 
     const expectedMap = new Map([
       [
-        'chrome',
+        'Chrome',
         [
           {timestamp: '2024-01-01', count: 10},
           {timestamp: '2024-01-02', count: 12},
         ],
       ],
       [
-        'edge',
+        'Edge',
         [
           {timestamp: '2024-01-01', count: 8},
           {timestamp: '2024-01-02', count: 11},
         ],
       ],
       [
-        'firefox',
+        'Firefox',
         [
           {timestamp: '2024-01-01', count: 9},
           {timestamp: '2024-01-02', count: 10},
         ],
       ],
       [
-        'safari',
+        'Safari',
         [
           {timestamp: '2024-01-01', count: 7},
           {timestamp: '2024-01-02', count: 13},

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

@@ -112,9 +112,9 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
     });
 
     const expectedMap = new Map([
-      ['chromium', [{timestamp: '2024-01-01', count: 10}]],
-      ['firefox', [{timestamp: '2024-01-01', count: 9}]],
-      ['safari', [{timestamp: '2024-01-01', count: 7}]],
+      ['Chromium', [{timestamp: '2024-01-01', count: 10}]],
+      ['Firefox', [{timestamp: '2024-01-01', count: 9}]],
+      ['Safari', [{timestamp: '2024-01-01', count: 7}]],
     ]);
     expect(browserToDataMap).to.deep.equal(expectedMap);
   });

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

@@ -27,6 +27,7 @@ import {
   ALL_BROWSERS,
   BrowsersParameter,
   BROWSER_ID_TO_COLOR,
+  BROWSER_ID_TO_LABEL,
 } from '../api/client.js';
 import {customElement, state} from 'lit/decorators.js';
 
@@ -73,9 +74,12 @@ export class WebstatusStatsGlobalFeatureCountChartPanel extends WebstatusLineCha
     if (typeof apiClient !== 'object') return;
 
     const browserMetricData: Array<
-      LineChartMetricData<BrowserReleaseFeatureMetric>
+      LineChartMetricData<BrowserReleaseFeatureMetric> & {
+        browser: BrowsersParameter;
+      }
     > = ALL_BROWSERS.map(browser => ({
-      label: browser,
+      label: BROWSER_ID_TO_LABEL[browser],
+      browser: browser,
       data: [],
       getTimestamp: (dataPoint: BrowserReleaseFeatureMetric) =>
         new Date(dataPoint.timestamp),
@@ -93,7 +97,7 @@ export class WebstatusStatsGlobalFeatureCountChartPanel extends WebstatusLineCha
     const allMetricData = [...browserMetricData, maxMetricData];
     const browserPromises = ALL_BROWSERS.map(async browser => {
       const browserData = browserMetricData.find(
-        data => data.label === browser,
+        data => data.browser === browser,
       );
       if (!browserData) return;
 

e2e/tests/stats-page.spec.ts-snapshots/matches-the-screenshot-with-missing-one-implementation-chart-1-chromium-linux.png

@@ -25,6 +25,7 @@ import {
   type APIClient,
   BrowsersParameter,
   BROWSER_ID_TO_COLOR,
+  BROWSER_ID_TO_LABEL,
 } from '../api/client.js';
 import {customElement, state} from 'lit/decorators.js';
 
@@ -85,7 +86,7 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
         browser: BrowsersParameter;
       }
     > = this.supportedBrowsers.map(browser => ({
-      label: browser === 'chrome' ? 'chromium' : browser, // Special case for Chrome
+      label: browser === 'chrome' ? 'Chromium' : BROWSER_ID_TO_LABEL[browser], // Special case for Chrome
       browser: browser,
       data: [],
       getTimestamp: (dataPoint: BrowserReleaseFeatureMetric) =>