docs: show units on comparison charts

packages/docs/src/components/ComparisonBarChart.astro

@@ -5,15 +5,32 @@ interface Props {
   title: string
   data: ChartDatum[]
   valueFormat: 'count' | 'mb' | 'kb' | 'ms' | 's'
+  unitLabel?: string
 }
 
-const { title, data, valueFormat } = Astro.props
-const chartPayload = JSON.stringify({ data, valueFormat })
+const defaultUnitLabels = {
+  count: 'count',
+  mb: 'MB',
+  kb: 'KB',
+  ms: 'ms',
+  s: 'seconds',
+} as const
+
+const {
+  title,
+  data,
+  valueFormat,
+  unitLabel = defaultUnitLabels[valueFormat],
+} = Astro.props
+const chartPayload = JSON.stringify({ data, valueFormat, unitLabel })
 ---
 
 <div class="comparison-chart-container">
   <div class="comparison-chart-header">
-    <h3 class="comparison-chart-title">{title}</h3>
+    <div class="comparison-chart-title-group">
+      <h3 class="comparison-chart-title">{title}</h3>
+      <span class="comparison-chart-unit">Unit: {unitLabel}</span>
+    </div>
     <details class="sort-dropdown">
       <summary class="sort-trigger">
         <svg
@@ -88,6 +105,19 @@ const chartPayload = JSON.stringify({ data, valueFormat })
     margin: 0;
   }
 
+  .comparison-chart-title-group {
+    display: flex;
+    align-items: baseline;
+    gap: 0.6em;
+    flex-wrap: wrap;
+  }
+
+  .comparison-chart-unit {
+    color: var(--ft-muted);
+    font-size: 12px;
+    font-weight: 500;
+  }
+
   .sort-dropdown {
     position: relative;
   }
@@ -266,6 +296,12 @@ const chartPayload = JSON.stringify({ data, valueFormat })
     font-size: 12px;
   }
 
+  .comparison-chart-wrapper :global(.comparison-y-axis-unit) {
+    fill: var(--ft-muted);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
   .comparison-chart-wrapper :global(.comparison-axis-domain) {
     stroke: var(--ft-border);
   }
@@ -341,7 +377,7 @@ const chartPayload = JSON.stringify({ data, valueFormat })
       return
     }
 
-    const { valueFormat } = payload
+    const { valueFormat, unitLabel } = payload
     const rawData = payload.data
     if (!rawData?.length) return
 
@@ -382,7 +418,7 @@ const chartPayload = JSON.stringify({ data, valueFormat })
     d3.select(svg)
       .append('desc')
       .text(
-        `Bar chart comparing each framework by ${chartTitle}. See table for exact values.`,
+        `Bar chart comparing each framework by ${chartTitle}. Values are shown in ${unitLabel}. See table for exact values.`,
       )
 
     const gradientId = `comparisonBarGradient-${crypto.randomUUID()}`
@@ -449,6 +485,13 @@ const chartPayload = JSON.stringify({ data, valueFormat })
         sel.selectAll('text').attr('class', 'comparison-y-axis-text'),
       )
 
+    g.append('text')
+      .attr('class', 'comparison-y-axis-unit')
+      .attr('x', 0)
+      .attr('y', -8)
+      .attr('text-anchor', 'start')
+      .text(unitLabel)
+
     g.append('g')
       .attr('class', 'comparison-grid')
       .call(

packages/docs/src/components/DepsChart.astro

@@ -13,4 +13,9 @@ const data = validEntries.map((f) => ({
 }))
 ---
 
-<ComparisonBarChart title="Deps" data={data} valueFormat="count" />
+<ComparisonBarChart
+  title="Deps"
+  data={data}
+  valueFormat="count"
+  unitLabel="dependencies"
+/>

packages/docs/src/components/DuplicateDependencyChart.astro

@@ -7,4 +7,5 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
   title="Duplicate Dependencies"
   data={chartDuplicateDependencyData}
   valueFormat="count"
+  unitLabel="duplicate dependencies"
 />

packages/docs/src/components/MPAFCPChart.astro

@@ -4,7 +4,7 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 ---
 
 <ComparisonBarChart
-  title="First Contentful Paint (ms)"
+  title="First Contentful Paint"
   data={chartMPAFCPData}
   valueFormat="ms"
 />

packages/docs/src/components/MPAFPChart.astro

@@ -4,7 +4,7 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 ---
 
 <ComparisonBarChart
-  title="First Paint (ms)"
+  title="First Paint"
   data={chartMPAFPData}
   valueFormat="ms"
 />

packages/docs/src/components/MPAINPChart.astro

@@ -4,7 +4,7 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 ---
 
 <ComparisonBarChart
-  title="Interaction to Next Paint (ms)"
+  title="Interaction to Next Paint"
   data={chartMPAINPData}
   valueFormat="ms"
 />

packages/docs/src/components/ProdDepsChart.astro

@@ -13,4 +13,9 @@ const data = validEntries.map((f) => ({
 }))
 ---
 
-<ComparisonBarChart title="Prod Deps" data={data} valueFormat="count" />
+<ComparisonBarChart
+  title="Prod Deps"
+  data={data}
+  valueFormat="count"
+  unitLabel="dependencies"
+/>

packages/docs/src/components/SPAFCPChart.astro

@@ -4,7 +4,7 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 ---
 
 <ComparisonBarChart
-  title="First Contentful Paint (ms)"
+  title="First Contentful Paint"
   data={chartSPAFCPData}
   valueFormat="ms"
 />

packages/docs/src/components/SPAFPChart.astro

@@ -4,7 +4,7 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 ---
 
 <ComparisonBarChart
-  title="First Paint (ms)"
+  title="First Paint"
   data={chartSPAFPData}
   valueFormat="ms"
 />

packages/docs/src/components/SPAINPChart.astro

@@ -4,7 +4,7 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 ---
 
 <ComparisonBarChart
-  title="Interaction to Next Paint (ms)"
+  title="Interaction to Next Paint"
   data={chartSPAINPData}
   valueFormat="ms"
 />

packages/docs/src/components/SSROpsChart.astro

@@ -7,4 +7,9 @@ const data = ssrStats
   .map((f) => ({ name: f.name, value: f.ssrOpsPerSec, focused: f.isFocused }))
 ---
 
-<ComparisonBarChart title="Ops/sec" data={data} valueFormat="count" />
+<ComparisonBarChart
+  title="SSR throughput"
+  data={data}
+  valueFormat="count"
+  unitLabel="ops/sec"
+/>

packages/docs/src/lib/types.ts

@@ -7,4 +7,5 @@ export interface ChartDatum {
 export interface ComparisonChartPayload {
   data: ChartDatum[]
   valueFormat: 'count' | 'mb' | 'kb' | 'ms' | 's'
+  unitLabel: string
 }