fix(frontend): Correctly display small usage percentages

The feature usage chart panel was rounding very small percentages
(e.g., 0.01%) down to "0.0%", which was inaccurate and hid
information from the user.

This change adjusts the formatting logic in the tooltip to:
- Display percentages between 0.01% and 0.1% with two decimal places.
- Display percentages smaller than 0.01% with their full precision
  to avoid rounding them to zero.

This ensures that the tooltip provides the most accurate information
available, especially for features with very low usage.

Unit tests for the component have been updated to verify the new
formatting behavior.

Author: jcscottiii

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;
   });

frontend/src/static/js/components/webstatus-feature-usage-chart-panel.ts

@@ -43,14 +43,26 @@ export class WebstatusFeatureUsageChartPanel extends WebstatusLineChartPanel<Bro
     if (percentage >= 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;
   }
 
   private formatPercentageForDisplay(percentage: number): string {
     if (percentage === 100) {
       return '100';
     }
+    // For very small values, show the raw value.
+    if (percentage > 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);
   }