Added Filter to Charts

packages/docs/src/components/BuildOutputSizeChart.astro

@@ -10,6 +10,7 @@ const validEntries = starterStats.filter(
 const data = validEntries.map((f) => ({
   name: f.name,
   value: f.buildOutputSize / BYTES_PER_MB,
+  focused: f.isFocused,
 }))
 ---
 

packages/docs/src/components/BuildSizeChart.astro

@@ -9,6 +9,7 @@ const validEntries = starterStats.filter(
 const data = validEntries.map((f) => ({
   name: f.name,
   value: f.coldBuildTime.avgMs / 1000,
+  focused: f.isFocused,
 }))
 ---
 

packages/docs/src/components/BuildSizeProdChart.astro

@@ -9,6 +9,7 @@ const validEntries = starterStats.filter(
 const data = validEntries.map((f) => ({
   name: f.name,
   value: f.warmBuildTime.avgMs / 1000,
+  focused: f.isFocused,
 }))
 ---
 

packages/docs/src/components/ComparisonBarChart.astro

@@ -345,12 +345,20 @@ const chartPayload = JSON.stringify({ data, valueFormat })
     const rawData = payload.data
     if (!rawData?.length) return
 
+    const toggle = document.getElementById(
+      'focused-toggle',
+    ) as HTMLInputElement | null
+    const focusedOnly = toggle ? toggle.checked : false
+
     const sortMode = container?.dataset.sortMode ?? 'default'
     const data: ChartDatum[] = getSortedData(
-      rawData.map((d) => ({
-        name: String(d?.name ?? ''),
-        value: Math.max(0, Number(d.value) || 0),
-      })),
+      rawData
+        .filter((d) => !focusedOnly || d.focused !== false)
+        .map((d) => ({
+          name: String(d?.name ?? ''),
+          value: Math.max(0, Number(d.value) || 0),
+          focused: d.focused,
+        })),
       sortMode,
     )
 
@@ -570,6 +578,11 @@ const chartPayload = JSON.stringify({ data, valueFormat })
       initComparisonChart(el as HTMLElement)
     })
     initSortControls()
+    window.addEventListener('focused-toggle', () => {
+      document.querySelectorAll('.comparison-chart-wrapper').forEach((el) => {
+        initComparisonChart(el as HTMLElement)
+      })
+    })
   }
 
   if (document.readyState === 'loading') {

packages/docs/src/components/DepsChart.astro

@@ -9,6 +9,7 @@ const validEntries = starterStats.filter(
 const data = validEntries.map((f) => ({
   name: f.name,
   value: f.devDependencies,
+  focused: f.isFocused,
 }))
 ---
 

packages/docs/src/components/FocusedToggle.astro

@@ -101,6 +101,11 @@
       toggle.addEventListener('change', (e) => {
         const target = e.target as HTMLInputElement
         updateVisibility(target.checked)
+        window.dispatchEvent(
+          new CustomEvent('focused-toggle', {
+            detail: { focusedOnly: target.checked },
+          }),
+        )
       })
     }
   })

packages/docs/src/components/NodeModulesSizeChart.astro

@@ -10,6 +10,7 @@ const validEntries = starterStats.filter(
 const data = validEntries.map((f) => ({
   name: f.name,
   value: f.nodeModulesSize / BYTES_PER_MB,
+  focused: f.isFocused,
 }))
 ---
 

packages/docs/src/components/NodeModulesSizeProdChart.astro

@@ -10,6 +10,7 @@ const validEntries = starterStats.filter(
 const data = validEntries.map((f) => ({
   name: f.name,
   value: f.nodeModulesSizeProdOnly / BYTES_PER_MB,
+  focused: f.isFocused,
 }))
 ---
 

packages/docs/src/components/ProdDepsChart.astro

@@ -9,6 +9,7 @@ const validEntries = starterStats.filter(
 const data = validEntries.map((f) => ({
   name: f.name,
   value: f.prodDependencies,
+  focused: f.isFocused,
 }))
 ---
 

packages/docs/src/components/SSRBodySizeChart.astro

@@ -4,7 +4,7 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 
 const data = ssrStats
   .filter((f) => f?.name != null && Number.isFinite(f.ssrBodySizeKb))
-  .map((f) => ({ name: f.name, value: f.ssrBodySizeKb }))
+  .map((f) => ({ name: f.name, value: f.ssrBodySizeKb, focused: f.isFocused }))
 ---
 
 <ComparisonBarChart title="Body Size" data={data} valueFormat="kb" />

packages/docs/src/components/SSRLatencyChart.astro

@@ -4,7 +4,11 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 
 const data = ssrStats
   .filter((f) => f?.name != null && Number.isFinite(f.ssrAvgLatencyMs))
-  .map((f) => ({ name: f.name, value: f.ssrAvgLatencyMs }))
+  .map((f) => ({
+    name: f.name,
+    value: f.ssrAvgLatencyMs,
+    focused: f.isFocused,
+  }))
 ---
 
 <ComparisonBarChart title="Avg Latency" data={data} valueFormat="ms" />

packages/docs/src/components/SSROpsChart.astro

@@ -4,7 +4,7 @@ import ComparisonBarChart from './ComparisonBarChart.astro'
 
 const data = ssrStats
   .filter((f) => f?.name != null && Number.isFinite(f.ssrOpsPerSec))
-  .map((f) => ({ name: f.name, value: f.ssrOpsPerSec }))
+  .map((f) => ({ name: f.name, value: f.ssrOpsPerSec, focused: f.isFocused }))
 ---
 
 <ComparisonBarChart title="Ops/sec" data={data} valueFormat="count" />

packages/docs/src/lib/types.ts

@@ -1,6 +1,7 @@
 export interface ChartDatum {
   name: string
   value: number
+  focused?: boolean
 }
 
 export interface ComparisonChartPayload {