From a689e96fe0a41476ce4aca7a472ffc5fe0369520 Mon Sep 17 00:00:00 2001
From: Alexander Karan <tech@alexanderkaran.com>
Date: Sun, 8 Mar 2026 13:11:34 +0800
Subject: [PATCH] Added Filter to Charts

---
 .../src/components/BuildOutputSizeChart.astro |  1 +
 .../docs/src/components/BuildSizeChart.astro  |  1 +
 .../src/components/BuildSizeProdChart.astro   |  1 +
 .../src/components/ComparisonBarChart.astro   | 21 +++++++++++++++----
 packages/docs/src/components/DepsChart.astro  |  1 +
 .../docs/src/components/FocusedToggle.astro   |  5 +++++
 .../src/components/NodeModulesSizeChart.astro |  1 +
 .../components/NodeModulesSizeProdChart.astro |  1 +
 .../docs/src/components/ProdDepsChart.astro   |  1 +
 .../src/components/SSRBodySizeChart.astro     |  2 +-
 .../docs/src/components/SSRLatencyChart.astro |  6 +++++-
 .../docs/src/components/SSROpsChart.astro     |  2 +-
 packages/docs/src/lib/types.ts                |  1 +
 13 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/packages/docs/src/components/BuildOutputSizeChart.astro b/packages/docs/src/components/BuildOutputSizeChart.astro
index 5512274..1aed6ec 100644
--- a/packages/docs/src/components/BuildOutputSizeChart.astro
+++ b/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,
 }))
 ---
 
diff --git a/packages/docs/src/components/BuildSizeChart.astro b/packages/docs/src/components/BuildSizeChart.astro
index de3e832..688ac13 100644
--- a/packages/docs/src/components/BuildSizeChart.astro
+++ b/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,
 }))
 ---
 
diff --git a/packages/docs/src/components/BuildSizeProdChart.astro b/packages/docs/src/components/BuildSizeProdChart.astro
index 030fa0f..e9a886a 100644
--- a/packages/docs/src/components/BuildSizeProdChart.astro
+++ b/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,
 }))
 ---
 
diff --git a/packages/docs/src/components/ComparisonBarChart.astro b/packages/docs/src/components/ComparisonBarChart.astro
index ba2cc61..6a1765e 100644
--- a/packages/docs/src/components/ComparisonBarChart.astro
+++ b/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') {
diff --git a/packages/docs/src/components/DepsChart.astro b/packages/docs/src/components/DepsChart.astro
index da66eae..8a0d6db 100644
--- a/packages/docs/src/components/DepsChart.astro
+++ b/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,
 }))
 ---
 
diff --git a/packages/docs/src/components/FocusedToggle.astro b/packages/docs/src/components/FocusedToggle.astro
index 3fd7cd5..f6f5139 100644
--- a/packages/docs/src/components/FocusedToggle.astro
+++ b/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 },
+          }),
+        )
       })
     }
   })
diff --git a/packages/docs/src/components/NodeModulesSizeChart.astro b/packages/docs/src/components/NodeModulesSizeChart.astro
index 2e00b44..e4d49ea 100644
--- a/packages/docs/src/components/NodeModulesSizeChart.astro
+++ b/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,
 }))
 ---
 
diff --git a/packages/docs/src/components/NodeModulesSizeProdChart.astro b/packages/docs/src/components/NodeModulesSizeProdChart.astro
index 7010576..61c59bb 100644
--- a/packages/docs/src/components/NodeModulesSizeProdChart.astro
+++ b/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,
 }))
 ---
 
diff --git a/packages/docs/src/components/ProdDepsChart.astro b/packages/docs/src/components/ProdDepsChart.astro
index 2500e9e..0ba327a 100644
--- a/packages/docs/src/components/ProdDepsChart.astro
+++ b/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,
 }))
 ---
 
diff --git a/packages/docs/src/components/SSRBodySizeChart.astro b/packages/docs/src/components/SSRBodySizeChart.astro
index 2db0349..5d222b2 100644
--- a/packages/docs/src/components/SSRBodySizeChart.astro
+++ b/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" />
diff --git a/packages/docs/src/components/SSRLatencyChart.astro b/packages/docs/src/components/SSRLatencyChart.astro
index e0af9e6..c6255a7 100644
--- a/packages/docs/src/components/SSRLatencyChart.astro
+++ b/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" />
diff --git a/packages/docs/src/components/SSROpsChart.astro b/packages/docs/src/components/SSROpsChart.astro
index b0930a6..611e535 100644
--- a/packages/docs/src/components/SSROpsChart.astro
+++ b/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" />
diff --git a/packages/docs/src/lib/types.ts b/packages/docs/src/lib/types.ts
index 530a84c..c25ec64 100644
--- a/packages/docs/src/lib/types.ts
+++ b/packages/docs/src/lib/types.ts
@@ -1,6 +1,7 @@
 export interface ChartDatum {
   name: string
   value: number
+  focused?: boolean
 }
 
 export interface ComparisonChartPayload {