diff --git a/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-chromium-linux.png b/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-chromium-linux.png index 6fcccdf5d..11e9070a6 100644 Binary files a/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-chromium-linux.png and b/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-chromium-linux.png differ diff --git a/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-firefox-linux.png b/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-firefox-linux.png index bdbab38cc..2126e22d8 100644 Binary files a/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-firefox-linux.png and b/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-firefox-linux.png differ diff --git a/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-webkit-linux.png b/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-webkit-linux.png index cf51dd40b..87265c079 100644 Binary files a/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-webkit-linux.png and b/e2e/tests/feature-page.spec.ts-snapshots/matches-the-screenshot-1-webkit-linux.png differ diff --git a/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-chromium-linux.png b/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-chromium-linux.png index 6528bd90b..8b34dc243 100644 Binary files a/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-chromium-linux.png and b/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-chromium-linux.png differ diff --git a/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-firefox-linux.png b/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-firefox-linux.png index 6e23db509..72dd01a47 100644 Binary files a/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-firefox-linux.png and b/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-firefox-linux.png differ diff --git a/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-webkit-linux.png b/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-webkit-linux.png index 98af8f6bf..2a0ab98c1 100644 Binary files a/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-webkit-linux.png and b/e2e/tests/feature-page.spec.ts-snapshots/mobile-chart-displays-on-click-and-matches-screenshot-1-webkit-linux.png differ diff --git a/frontend/src/static/js/components/test/webstatus-feature-usage-chart-panel.test.ts b/frontend/src/static/js/components/test/webstatus-feature-usage-chart-panel.test.ts index b97d3e04a..777a71d7d 100644 --- a/frontend/src/static/js/components/test/webstatus-feature-usage-chart-panel.test.ts +++ b/frontend/src/static/js/components/test/webstatus-feature-usage-chart-panel.test.ts @@ -122,6 +122,36 @@ describe('WebstatusFeatureUsageChartPanel', () => { 'Chrome: 0.0%', ); + // Test value between 0.01% and 0.1% + const chromeTestDataPoint5: ChromeUsageStat = { + timestamp: '2024-01-01', + usage: 0.0009, // 0.09% + }; + expect(chromeConfig.valueExtractor(chromeTestDataPoint5)).to.equal(0.09); + expect(chromeConfig.tooltipExtractor!(chromeTestDataPoint5)).to.equal( + 'Chrome: 0.09%', + ); + + // Test value of 0.01% + const chromeTestDataPoint6: ChromeUsageStat = { + timestamp: '2024-01-01', + usage: 0.0001, // 0.01% + }; + expect(chromeConfig.valueExtractor(chromeTestDataPoint6)).to.equal(0.01); + expect(chromeConfig.tooltipExtractor!(chromeTestDataPoint6)).to.equal( + 'Chrome: 0.01%', + ); + + // Test value less than 0.01% + const chromeTestDataPoint7: ChromeUsageStat = { + timestamp: '2024-01-01', + usage: 0.00005, // 0.005% + }; + expect(chromeConfig.valueExtractor(chromeTestDataPoint7)).to.equal(0.005); + expect(chromeConfig.tooltipExtractor!(chromeTestDataPoint7)).to.equal( + 'Chrome: 0.005%', + ); + // Assert that there are no additional series configurations expect(additionalSeriesConfigs).to.be.undefined; }); diff --git a/frontend/src/static/js/components/webstatus-feature-usage-chart-panel.ts b/frontend/src/static/js/components/webstatus-feature-usage-chart-panel.ts index aa6ff1420..ac0380dde 100644 --- a/frontend/src/static/js/components/webstatus-feature-usage-chart-panel.ts +++ b/frontend/src/static/js/components/webstatus-feature-usage-chart-panel.ts @@ -43,7 +43,11 @@ export class WebstatusFeatureUsageChartPanel extends WebstatusLineChartPanel= 100) { return 100; } - // Round to one decimal place. + // If percentage is very small, pass it through without rounding. + if (percentage > 0 && percentage < 0.1) { + return percentage; + } + // Otherwise, round to one decimal place. return Math.round(percentage * 10) / 10; } @@ -51,6 +55,14 @@ export class WebstatusFeatureUsageChartPanel extends WebstatusLineChartPanel 0 && percentage < 0.01) { + return String(percentage); + } + // For other small values, show 2 decimal places. + if (percentage > 0 && percentage < 0.1) { + return percentage.toFixed(2); + } return percentage.toFixed(1); }