Refactor: Introduce WebstatusFeatureUsageChartPanel and WebstatusFeatureWPTProgressChartPanel using WebstatusLineChartPanel

[jcscottiii]

Depends on #1175

This PR introduces two new custom elements, WebstatusFeatureUsageChartPanel and WebstatusFeatureWPTProgressChartPanel, for displaying feature usage and WPT progress charts, respectively. These components leverage the enhanced WebstatusLineChartPanel abstract class, promoting code reuse and consistency across different chart panels.

Key changes:

• WebstatusFeatureUsageChartPanel: This panel displays the usage statistics of a feature over time. It fetches data using the getChromiumDailyUsageStats API call and visualizes it using a line chart.
• WebstatusFeatureWPTProgressChartPanel: This panel displays the WPT (Web Platform Tests) progress of a feature across different browsers. It fetches data using the getFeatureStatsByBrowserAndChannel API call and visualizes it using a line chart with an additional "Total" series calculated using the calculateMax method.
• Simplified FeaturePage: By introducing these new components, the FeaturePage is significantly simplified. It no longer needs to handle the loading and displaying of individual charts, as these tasks are now delegated to the respective chart panel components.
• Leveraging data-fetch-complete event: The FeaturePage now listens for the data-fetch-complete event dispatched by the WebstatusFeatureWPTProgressChartPanel to calculate and display the percentage difference in WPT results, similar to the previous implementation.
• Behavior changes:
  • Loading state: Instead of a separate full page loading overlay, the components now use the built-in loading state of the WebstatusLineChartPanel abstract class. This aligns with the goal of issue Create component specific loading & error states #278 to move towards component-level loading states.
  • Chart display: The charts are now displayed only after all data is fetched, ensuring consistency with the stats page charts and simplifying the rendering logic.

This PR improves code organization and reusability by introducing dedicated chart panel components and leveraging the WebstatusLineChartPanel abstract class. It also simplifies the FeaturePage and provides a more consistent and streamlined user experience for viewing feature usage and WPT progress.

[jrobbins]

I assume that it is OK that some of the data points changed in the snapshots.

[jcscottiii]

@jrobbins That should be okay. I double checked my code against the actual live data. My charts looked mostly the same as the current ones in production. I say mostly because I did find one thing I am missing:

webstatus.dev/frontend/src/static/js/components/webstatus-feature-page.ts

Lines 311 to 322 in 9f983ba

	// We build a map from each time slot for which any browser has data.
	// to an array of data for all browsers (in dateToBrowserDataMap)
	// along with the total_tests_count for that time.
	// Since times may be slightly different for data associated with each browser,
	// we round times to the nearest 1 hour as a compromise.
	// The total ought to be the same for all browsers,
	// but this is not the case due to upstream problems.
	// As a workaround, we will instead use the max of all the
	// browser's totals for each time slot.
	// So effectively, for each unique time slot, we merge the data
	// for all the browsers while computing the max of the total value for
	// each of the browsers.

webstatus.dev/frontend/src/static/js/components/webstatus-feature-page.ts

Lines 337 to 340 in 9f983ba

	const timestampMs = new Date(dateString).getTime();
	// Round timestamp to the nearest hour.
	const msInHour = 1000 * 60 * 60 * 1;
	const roundedTimestamp = Math.round(timestampMs / msInHour) * msInHour;

This inconsistency is because of the data from WPT itself. So we try to create buckets for the WPT data to catch bad data. I am pushing up something now. It is simply using this same timestamp extractor in this new chart interface.