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 }))
---
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,
+ }))
---
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 }))
---
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 {