Enhance Charts landing page

scripts/charts-landing/bundle-size-chart.ts

@@ -0,0 +1,86 @@
+import { scaleBand } from '@tanstack/charts/scales/band'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
+import { barX, defineChart, text } from '@tanstack/charts'
+
+export const bundleSizeSnapshot = [
+  { library: 'TanStack Charts', size: 40 },
+  { library: 'uPlot', size: 22 },
+  { library: 'Chart.js', size: 46 },
+  { library: 'visx', size: 49 },
+  { library: 'Lightweight Charts', size: 60 },
+  { library: 'Observable Plot', size: 85 },
+  { library: 'Vega-Lite', size: 87 },
+  { library: 'D3', size: 90 },
+  { library: 'Recharts', size: 97 },
+  { library: 'Highcharts', size: 100 },
+  { library: 'Victory', size: 105 },
+  { library: 'Nivo', size: 143 },
+  { library: 'Apache ECharts', size: 157 },
+  { library: 'ApexCharts', size: 164 },
+  { library: 'Plotly.js partial', size: 250 },
+  { library: 'AG Charts', size: 367 },
+] as const
+
+const libraryNames = bundleSizeSnapshot.map((row) => row.library)
+
+export function bundleSizeChart(compact = false) {
+  return defineChart({
+    marks: [
+      barX(bundleSizeSnapshot, {
+        id: 'bundle-bars',
+        x: 'size',
+        y: 'library',
+        key: 'library',
+        fill: (row) =>
+          row.library === 'TanStack Charts' ? '#61e8ff' : '#315464',
+        inset: compact ? 3 : 4,
+        maxThickness: compact ? 25 : 28,
+        radius: 6,
+      }),
+      text(bundleSizeSnapshot, {
+        id: 'bundle-values',
+        x: 'size',
+        y: 'library',
+        text: (row) => `${row.size} kB`,
+        key: 'library',
+        fill: (row) =>
+          row.library === 'TanStack Charts' ? '#f7ffcc' : '#d6e6eb',
+        fontSize: compact ? 15 : 14,
+        fontWeight: 700,
+        anchor: 'start',
+        dx: compact ? 8 : 10,
+      }),
+    ],
+    scales: {
+      x: {
+        scale: scaleLinear().domain([0, 425]),
+        axis: {
+          label: 'Minified + gzip (kB)',
+          ticks: { count: compact ? 3 : 5 },
+          tickLabels: { fontSize: compact ? 13 : 12 },
+        },
+        grid: true,
+      },
+      y: {
+        scale: scaleBand<string>().domain(libraryNames).padding(0.12),
+        axis: {
+          line: false,
+          ticks: { padding: compact ? 8 : 12, size: 0 },
+          tickLabels: {
+            fontSize: compact ? 15 : 14,
+            fontWeight: ({ value }) =>
+              value === 'TanStack Charts' ? 800 : 500,
+            opacity: ({ value }) => (value === 'TanStack Charts' ? 1 : 0.76),
+          },
+        },
+      },
+    },
+    theme: {
+      background: 'transparent',
+      foreground: '#eef8f7',
+      grid: '#24404c',
+      muted: '#91aab3',
+      palette: ['#61e8ff'],
+    },
+  })
+}

scripts/generate-charts-landing-svg.ts

@@ -14,6 +14,10 @@ import {
   renderChartSvg,
 } from '@tanstack/charts'
 import { activationChart } from './charts-landing/activation-chart'
+import {
+  bundleSizeChart,
+  bundleSizeSnapshot,
+} from './charts-landing/bundle-size-chart'
 import { kineticBarChart } from './charts-landing/kinetic-bar-chart'
 import { kineticDonutChart } from './charts-landing/kinetic-donut-chart'
 import { kineticHeatmapChart } from './charts-landing/kinetic-heatmap-chart'
@@ -33,11 +37,18 @@ const kineticOutputFile = resolve(
   process.cwd(),
   'src/components/landing/chartsKineticSvg.ts',
 )
+const bundleSizeOutputFile = resolve(
+  process.cwd(),
+  'src/components/landing/chartsBundleSizeSvg.ts',
+)
 const checkOnly = process.argv.includes('--check')
 const activationAriaLabel =
   'Weekly activation rate with expected range, 70 percent goal, and two product release events'
 const activationAriaDescription =
   'Illustrative weekly activation data from January through May 2026. The actual rate rises from 48 to 78 percent, compared with an expected range and a 70 percent goal. Onboarding v2 and Invite flow are marked as release events.'
+const bundleSizeAriaDescription = `A static August 2026 snapshot of minified and gzip-compressed browser bundle sizes. ${bundleSizeSnapshot
+  .map((row) => `${row.library}: ${row.size} kilobytes`)
+  .join('; ')}.`
 
 const themeBaseline = 40
 const themeDomain: [number, number] = [40, 105]
@@ -258,6 +269,25 @@ const activationCharts = {
   ),
 }
 
+const bundleSizeCharts = {
+  chartsBundleSizeSvg: render(
+    bundleSizeChart(),
+    'Bundle size comparison across 16 charting libraries',
+    1200,
+    820,
+    bundleSizeAriaDescription,
+    -1,
+  ),
+  chartsBundleSizeCompactSvg: render(
+    bundleSizeChart(true),
+    'Bundle size comparison across 16 charting libraries',
+    520,
+    820,
+    bundleSizeAriaDescription,
+    -1,
+  ),
+}
+
 const kineticCharts = {
   chartsKineticBarSvg: render(
     kineticBarChart,
@@ -322,6 +352,13 @@ const generatedModules = [
       'scripts/charts-landing/kinetic-*-chart.ts',
     ),
   },
+  {
+    file: bundleSizeOutputFile,
+    source: createGeneratedModule(
+      bundleSizeCharts,
+      'scripts/charts-landing/bundle-size-chart.ts',
+    ),
+  },
 ]
 
 if (checkOnly) {

src/components/landing/ChartsCatalogGallery.tsx

@@ -9,9 +9,9 @@ type ChartsLandingCatalog = Awaited<ReturnType<typeof getChartsCatalogLanding>>
 type CatalogCase = ChartsLandingCatalog['cases'][number]
 
 export const chartsLandingHeroCaseIds = [
-  '03-temperature-range-band',
-  'bar-grouped',
-  'scatter-bubble',
+  '70-composed-chart',
+  '101-sunburst',
+  '127-shadcn-dashboard',
 ] as const
 
 export function CatalogChartsHero({
@@ -122,6 +122,10 @@ export function ChartsCatalogGallery({
   )
 }
 
+function compareCatalogCases(left: CatalogCase, right: CatalogCase) {
+  return left.order - right.order
+}
+
 function CatalogChartCard({
   catalogCase,
   revision,
@@ -159,7 +163,3 @@ function CatalogChartCard({
     </div>
   )
 }
-
-function compareCatalogCases(left: CatalogCase, right: CatalogCase) {
-  return left.order - right.order
-}