Hide it under showFeaturesLagging

e2e/tests/stats-page.spec.ts

@@ -22,11 +22,26 @@ test.beforeEach(async ({page}) => {
 });
 
 test('matches the screenshot', async ({page}) => {
-  await page.goto('http://localhost:5555/stats');
+  await page.goto('http://localhost:5555/stats?');
 
-  // Wait for the chart container to exist
+  // Wait for the chart container to exist.
   await page.waitForSelector('#global-feature-support-chart-container');
 
   const pageContainer = page.locator('.page-container');
   await expect(pageContainer).toHaveScreenshot();
 });
+
+test('matches the screenshot with missing one implementation chart', async ({
+  page,
+}) => {
+  await page.goto('http://localhost:5555/stats?show_features_lagging=true');
+
+  // Wait for the global feature support chart container to exist.
+  await page.waitForSelector('#global-feature-support-chart-container');
+
+  // Wait for the missing one implementatoin chart container to exist.
+  await page.waitForSelector('#features-lagging');
+
+  const pageContainer = page.locator('.page-container');
+  await expect(pageContainer).toHaveScreenshot();
+});

frontend/src/static/js/components/webstatus-stats-page.ts

@@ -16,7 +16,14 @@
 
 import {consume} from '@lit/context';
 import {Task} from '@lit/task';
-import {LitElement, type TemplateResult, html, CSSResultGroup, css} from 'lit';
+import {
+  LitElement,
+  type TemplateResult,
+  html,
+  CSSResultGroup,
+  css,
+  nothing,
+} from 'lit';
 import {customElement, state} from 'lit/decorators.js';
 import {SHARED_STYLES} from '../css/shared-css.js';
 import {SlMenu, SlMenuItem} from '@shoelace-style/shoelace/dist/shoelace.js';
@@ -29,6 +36,7 @@ import {
   type BrowserReleaseFeatureMetric,
 } from '../api/client.js';
 import {apiClientContext} from '../contexts/api-client-context.js';
+import {getFeaturesLaggingFlag} from '../utils/urls.js';
 
 import './webstatus-gchart';
 import {WebStatusDataObj} from './webstatus-gchart.js';
@@ -528,7 +536,9 @@ export class StatsPage extends LitElement {
     return html`
       <div class="vbox">
         ${this.renderTitleAndControls()} ${this.renderGlobalFeatureSupport()}
-        ${this.renderFeaturesLagging()}
+        ${getFeaturesLaggingFlag(window.location)
+          ? this.renderFeaturesLagging()
+          : nothing}
         <div class="hbox">
           ${this.renderBaselineFeatures()} ${this.renderTimeToAvailability()}
         </div>

frontend/src/static/js/utils/urls.ts

@@ -43,6 +43,10 @@ export function getWPTMetricView(location: {search: string}): string {
   return getQueryParam(location.search, 'wpt_metric_view');
 }
 
+export function getFeaturesLaggingFlag(location: {search: string}): boolean {
+  return Boolean(getQueryParam(location.search, 'show_features_lagging'));
+}
+
 export interface DateRange {
   start?: Date;
   end?: Date;