banhaten 0.3.0 → 0.5.0

package/registry/components/chart-block-data.ts

@@ -0,0 +1,177 @@
+import type { ChartDatum, ChartSpec } from "./chart-options"
+
+export type ChartBlockDefinition = {
+  title: string
+  description: string
+  spec: ChartSpec
+  periods?: { label: string; count: number }[]
+}
+
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+const monthly = (keys: string[], values: number[][]): ChartDatum[] => values.map((row, index) => ({
+  name: months[index % 12] + (values.length > 12 ? ` '${24 + Math.floor(index / 12)}` : ""),
+  ...Object.fromEntries(keys.map((key, column) => [key, row[column]])),
+}))
+const monthPeriods = [{ label: "3 months", count: 3 }, { label: "6 months", count: 6 }, { label: "All", count: Infinity }]
+const series = (key: string, label: string, colorIndex: number) => ({ key, label, colorIndex })
+
+// Illustrative source datasets, adapted from EvilCharts' MIT-licensed ECharts blocks.
+// All visual decisions live in the shared token-aware option builders and block CSS.
+export const chartBlockDefinitions = {
+  latency: {
+    title: "Latency Percentiles",
+    description: "Request latency by percentile, in milliseconds.",
+    periods: [{ label: "5 minutes", count: 5 }, { label: "15 minutes", count: 15 }, { label: "All", count: Infinity }],
+    spec: {
+      family: "area", curve: "linear", variant: "gradient", hoverHighlight: true,
+      series: [series("p99", "P99 (ms)", 3), series("p95", "P95 (ms)", 2), series("p75", "P75 (ms)", 4), series("p50", "P50 (ms)", 0)],
+      data: [
+        [188, 92, 44, 20], [196, 95, 46, 21], [181, 89, 43, 20], [192, 94, 47, 22],
+        [205, 99, 45, 21], [187, 91, 44, 20], [179, 88, 42, 19], [198, 96, 46, 21],
+        [210, 101, 48, 22], [194, 93, 45, 21], [202, 97, 47, 22], [215, 104, 49, 23],
+        [231, 112, 52, 23], [278, 131, 57, 24], [306, 142, 61, 25], [289, 135, 58, 24],
+        [247, 118, 53, 23], [216, 105, 49, 22], [201, 97, 46, 21], [193, 94, 45, 21],
+        [186, 90, 44, 20], [199, 96, 46, 21], [207, 100, 47, 22], [191, 92, 45, 20],
+        [184, 89, 43, 20], [196, 95, 46, 21], [209, 101, 48, 22], [198, 96, 46, 21], [204, 98, 46, 21],
+      ].map(([p99, p95, p75, p50], index) => ({ name: `13:${String(index + 6).padStart(2, "0")}`, p99, p95, p75, p50 })),
+    },
+  },
+  portfolio: {
+    title: "Portfolio Comparison", description: "Compare the change in two example portfolios, in USD.",
+    periods: [{ label: "7 days", count: 7 }, { label: "14 days", count: 14 }, { label: "All", count: Infinity }],
+    spec: {
+      family: "area", curve: "step", variant: "dotted", hoverReveal: true,
+      series: [series("portfolioA", "Portfolio A (USD)", 0), series("portfolioB", "Portfolio B (USD)", 1)],
+      data: [
+        [53916, 53670], [54380, 53080], [54760, 52460], [54480, 51880], [54060, 51340],
+        [53820, 50900], [53520, 50520], [53240, 50200], [53080, 49960], [52840, 49760],
+        [52700, 49640], [52520, 49600], [52420, 49720], [52340, 49980], [52240, 50360],
+        [52140, 50820], [52080, 51340], [52020, 51900], [51960, 52440], [51900, 52960],
+        [51860, 53420], [51800, 53780], [51740, 54040], [51700, 54200], [51640, 54300],
+        [51580, 54320], [51538, 54287],
+      ].map(([portfolioA, portfolioB], index) => ({ name: index < 10 ? `Dec ${index + 22}` : `Jan ${index - 9}`, portfolioA, portfolioB })),
+    },
+  },
+  benchmark: {
+    title: "Growth Benchmark", description: "Weekly signups compared with the target.",
+    periods: [{ label: "Recent 4", count: 4 }, { label: "Recent 12", count: 12 }, { label: "All", count: Infinity }],
+    spec: {
+      family: "area", curve: "step", legend: true,
+      series: [{ ...series("actual", "Actual", 0), variant: "hatched" }, { ...series("target", "Target", 4), type: "line", stroke: "dashed" }],
+      data: [
+        ["Jan 1", 240, 125], ["Jan 8", 240, 125], ["Jan 15", 175, 200], ["Jan 22", 175, 200],
+        ["Feb 1", 175, 200], ["Feb 8", 260, 125], ["Feb 15", 260, 125], ["Feb 22", 260, 125],
+        ["Mar 1", 260, 190], ["Mar 8", 335, 190], ["Mar 15", 335, 190], ["Mar 22", 335, 390],
+        ["Apr 1", 335, 390], ["Apr 8", 335, 390], ["Apr 15", 190, 390], ["Apr 22", 215, 305],
+        ["May 1", 215, 305], ["May 8", 215, 175], ["May 15", 215, 175], ["May 22", 275, 175], ["Jun 1", 275, 245],
+      ].map(([name, actual, target]) => ({ name, actual, target })),
+    },
+  },
+  audience: {
+    title: "Audience Growth", description: "Monthly listeners across every show and episode.", periods: monthPeriods,
+    spec: { family: "area", curve: "monotone", variant: "gradient", series: [{ key: "listeners", label: "Listeners", colorIndices: [1, 4, 5] }],
+      data: monthly(["listeners"], [[2980], [3120], [3460], [3380], [3720], [4180], [4560]]) },
+  },
+  payouts: {
+    title: "Payout Trend", description: "Paid and pending amounts by month, in USD.", periods: monthPeriods,
+    spec: { family: "line", curve: "monotone", legend: true,
+      series: [{ key: "payouts", label: "Paid (USD)", colorIndices: [2, 7] }, { key: "pending", label: "Pending (USD)", colorIndices: [4, 5] }],
+      data: monthly(["payouts", "pending"], [[312, 548], [388, 502], [342, 561], [455, 470], [521, 398], [486, 441], [573, 372], [640, 316], [598, 358], [662, 284], [617, 331], [690, 262]]) },
+  },
+  shipments: {
+    title: "Shipments", description: "Orders shipped in corresponding slots this week and last week.",
+    periods: [{ label: "2 days", count: 8 }, { label: "4 days", count: 16 }, { label: "All", count: Infinity }],
+    spec: { family: "line", curve: "linear", legend: true,
+      series: [series("current", "This week", 0), { ...series("previous", "Last week", 4), stroke: "dashed" }],
+      data: [[14, 34], [9, 41], [18, 37], [26, 29], [31, 24], [27, 33], [19, 45], [12, 52], [16, 47], [22, 39], [15, 44], [11, 50], [17, 43], [24, 31], [20, 26], [13, 22], [21, 28], [29, 36], [34, 42], [28, 55], [23, 49], [30, 40], [36, 35], [32, 44]]
+        .map(([current, previous], index) => ({ name: `${["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][Math.floor(index / 4)]} ${index % 4 + 1}`, current, previous })) },
+  },
+  peak: {
+    title: "Peak Week", description: "Organic and paid signups, with the best week highlighted.",
+    periods: [{ label: "4 weeks", count: 4 }, { label: "8 weeks", count: 8 }, { label: "All", count: Infinity }],
+    spec: { family: "bar", stack: "stacked", highlightMax: true, legend: true,
+      series: [series("organic", "Organic", 0), series("paid", "Paid", 4)],
+      data: [[128, 74], [164, 91], [142, 66], [199, 108], [176, 84], [231, 167], [208, 96], [287, 158], [244, 112], [196, 88], [221, 103], [173, 79]]
+        .map(([organic, paid], index) => ({ name: `W${String(index + 1).padStart(2, "0")}`, organic, paid })) },
+  },
+  grid: {
+    title: "Grid Bar Chart", description: "Hourly sessions shown as columns of cells.",
+    periods: [{ label: "6 hours", count: 6 }, { label: "12 hours", count: 12 }, { label: "All", count: Infinity }],
+    spec: { family: "bar", variant: "blocks", series: [series("sessions", "Sessions", 0)],
+      data: [42, 28, 19, 14, 12, 18, 34, 66, 98, 124, 147, 163, 158, 171, 186, 174, 152, 138, 119, 96, 84, 71, 58, 47]
+        .map((sessions, index) => ({ name: `${String(index).padStart(2, "0")}:00`, sessions })) },
+  },
+  monospace: {
+    title: "Monospace Bar Chart", description: "Monthly sales with bars that expand on hover.", periods: monthPeriods,
+    spec: { family: "bar", variant: "expandable", series: [series("sales", "Sales (USD)", 0)],
+      data: monthly(["sales"], [342, 876, 512, 629, 458, 781, 394, 925, 647, 532, 803, 271, 388, 912, 564, 671, 499, 838, 427, 968, 702, 585, 861, 314].map((value) => [value])) },
+  },
+  "market-share": {
+    title: "Market Share", description: "Illustrative ecosystem value by company, in billions of USD.",
+    spec: { family: "pie", variant: "padded", series: [series("value", "Value (USD billions)", 0)],
+      data: [{ name: "Skyline", value: 27 }, { name: "Datawell", value: 21 }, { name: "Cloudpeak", value: 13 }, { name: "Taskbridge", value: 21 }, { name: "Insightloop", value: 6 }, { name: "Streamforge", value: 12 }] },
+  },
+  "progress-rings": {
+    title: "Progress Rings", description: "Where the workday leaks: illustrative findings from 1,240 survey responses.",
+    spec: { family: "pie", series: [series("value", "Respondents (%)", 0)], data: [
+      { name: "Additional support requests", value: 48 }, { name: "Inaccurate forecasts", value: 67 },
+    ] },
+  },
+  "revenue-mix": {
+    title: "Revenue Mix", description: "Revenue by sales channel, in USD.",
+    spec: { family: "pie", variant: "padded", series: [series("value", "Revenue (USD)", 0)], data: [
+      { name: "Direct", value: 52400 }, { name: "Marketplace", value: 38900 }, { name: "Wholesale", value: 24150 }, { name: "Affiliate", value: 16300 },
+    ] },
+  },
+  "reliability-score": {
+    title: "Reliability Score", description: "Delivery reliability: 842 out of 1,000, in the excellent band.",
+    spec: { family: "pie", variant: "padded", data: [
+      { name: "At risk", from: 0, value: 450 }, { name: "Fair", from: 450, value: 200 }, { name: "Good", from: 650, value: 170 }, { name: "Excellent", from: 820, value: 180 },
+    ], series: [series("value", "Band width", 0)] },
+  },
+  budget: {
+    title: "Monthly Budget", description: "The share and amount allocated to each monthly budget category.",
+    spec: { family: "radial", max: 100, series: [series("value", "Share (%)", 0)], data: [
+      { name: "Payroll", value: 46, amount: 920000 }, { name: "Infrastructure", value: 21, amount: 420000 }, { name: "Marketing", value: 14, amount: 280000 }, { name: "Tooling", value: 10, amount: 200000 }, { name: "Support", value: 9, amount: 180000 },
+    ] },
+  },
+  ride: {
+    title: "Ride Summary", description: "Distance, elevation, energy and cadence against their goals.",
+    spec: { family: "radial", data: [
+      { name: "Distance", value: 18.4, goal: 25, unit: "km" }, { name: "Elevation", value: 312, goal: 450, unit: "m" },
+      { name: "Energy", value: 684, goal: 1200, unit: "kJ" }, { name: "Cadence", value: 82, goal: 95, unit: "rpm" },
+    ] },
+  },
+  "cache-tiers": {
+    title: "Cache Tiers", description: "Request routing across four cache tiers, from a sample of 1,000 requests.",
+    spec: { family: "radial", variant: "semi", max: 100, series: [series("value", "Share (%)", 0)], data: [
+      { name: "L1 Memory", value: 61, count: 610 }, { name: "L2 Regional", value: 24, count: 240 },
+      { name: "Edge Overflow", value: 10, count: 100 }, { name: "Origin Fetch", value: 5, count: 50 },
+    ] },
+  },
+  allocation: {
+    title: "Fund Allocation", description: "Where the fund flows, in thousands of USD.",
+    spec: { family: "sankey", variant: "gradient", labels: "inside", data: [],
+      nodes: ["Inflow", "Equities", "Bonds", "Cash", "Growth", "Income", "Reserve"].map((name) => ({ name })),
+      links: [[0, 1, 78], [0, 2, 46], [0, 3, 24], [1, 4, 52], [1, 5, 26], [2, 5, 19], [2, 6, 27], [3, 4, 9], [3, 6, 15]]
+        .map(([source, target, value]) => ({ source, target, value })) },
+  },
+  pipeline: {
+    title: "Revenue Pipeline", description: "Four revenue sources flow into four operating allocations, in USD.",
+    spec: { family: "sankey", variant: "gradient", labels: "outside", data: [],
+      nodes: ["Retail", "Wholesale", "Licensing", "Services", "Pipeline", "Expansion", "Tooling", "Support", "Reserve"].map((name) => ({ name })),
+      links: [[0, 4, 31480], [1, 4, 46220], [2, 4, 14960], [3, 4, 28340], [4, 5, 52640], [4, 6, 9180], [4, 7, 12470], [4, 8, 46710]]
+        .map(([source, target, value]) => ({ source, target, value })) },
+  },
+} satisfies Record<string, ChartBlockDefinition>
+
+export type ChartBlockId = keyof typeof chartBlockDefinitions
+
+export const chartBlocks = (Object.entries(chartBlockDefinitions) as [ChartBlockId, ChartBlockDefinition][])
+  .map(([id, definition]) => ({ id, title: definition.title, description: definition.description, family: definition.spec.family }))
+
+export function getChartBlockSpec(block: ChartBlockId, period = "All"): ChartSpec {
+  const definition: ChartBlockDefinition = chartBlockDefinitions[block]
+  const count = definition.periods?.find((entry) => entry.label === period)?.count ?? Infinity
+  return { ...definition.spec, data: definition.spec.data.slice(-count) }
+}

package/registry/components/chart-block.css

@@ -0,0 +1,171 @@
+.bh-chart-block {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  inline-size: 100%;
+  overflow: hidden;
+  border: var(--bh-border-width-default) solid var(--bh-border-subtle);
+  border-radius: var(--bh-radius-3xl-16);
+  background: var(--bh-bg-raised);
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-text-body-xs-regular-font-weight);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+  letter-spacing: var(--bh-text-body-xs-regular-letter-spacing);
+  text-align: start;
+}
+
+.bh-chart-block-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--bh-space-3xl-16);
+  padding: var(--bh-space-5xl-24);
+  border-block-end: var(--bh-border-width-default) solid var(--bh-border-subtle);
+}
+
+.bh-chart-block-header > div:first-child { flex: 1 1 var(--bh-space-15xl-224); }
+.bh-chart-block-header h3 {
+  margin: 0;
+  font-size: var(--bh-text-heading-xs-semibold-font-size);
+  font-weight: var(--bh-text-heading-xs-semibold-font-weight);
+  line-height: var(--bh-text-heading-xs-semibold-line-height);
+  letter-spacing: var(--bh-text-heading-xs-semibold-letter-spacing);
+}
+.bh-chart-block-header p { margin: var(--bh-space-xs-4) 0 0; color: var(--bh-content-subtle); }
+.bh-chart-block-periods { display: flex; flex-wrap: wrap; gap: var(--bh-space-xxs-2); }
+.bh-chart-block-body { display: flex; flex-direction: column; gap: var(--bh-space-5xl-24); padding: var(--bh-space-5xl-24); }
+.bh-chart-block-chart { height: var(--bh-space-17xl-288); }
+
+.bh-chart-block-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bh-space-4xl-20); }
+.bh-chart-block-stats[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.bh-chart-block-stats[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.bh-chart-block-stat { display: flex; flex-direction: column; gap: var(--bh-space-sm-6); min-inline-size: 0; }
+.bh-chart-block-stat-label { display: flex; align-items: center; gap: var(--bh-space-sm-6); color: var(--bh-content-subtle); }
+.bh-chart-block-value {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--bh-space-xs-4);
+  font-size: var(--bh-text-heading-lg-semibold-font-size);
+  font-weight: var(--bh-text-heading-lg-semibold-font-weight);
+  line-height: var(--bh-text-heading-lg-semibold-line-height);
+  letter-spacing: var(--bh-text-heading-lg-semibold-letter-spacing);
+  font-variant-numeric: tabular-nums;
+}
+.bh-chart-block-value small {
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+.bh-chart-block-detail { color: var(--bh-content-subtle); }
+.bh-chart-block-swatch { display: inline-block; inline-size: var(--bh-space-md-8); block-size: var(--bh-space-md-8); border-radius: var(--bh-radius-xs-2); flex: none; }
+
+.bh-chart-block-stat-button, button.bh-chart-block-list-row {
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  outline: none;
+}
+.bh-chart-block-stat-button { padding: var(--bh-space-md-8); border-radius: var(--bh-radius-lg-8); }
+.bh-chart-block-stat-button:hover, button.bh-chart-block-list-row:hover { background: var(--bh-interactive-ghost-hover); }
+.bh-chart-block-stat-button[aria-pressed="true"] { background: var(--bh-bg-neutral-subtle); }
+.bh-chart-block [data-muted="true"] { opacity: var(--bh-opacity-muted); }
+.bh-chart-block-stat-button:focus-visible, button.bh-chart-block-list-row:focus-visible,
+.bh-chart-block-data summary:focus-visible, .bh-chart-block-table-scroll:focus-visible, .bh-chart-block-flow-viewport:focus-visible {
+  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.bh-chart-block-list { display: grid; min-inline-size: 0; gap: var(--bh-space-xs-4); }
+.bh-chart-block-list[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bh-space-5xl-24); }
+.bh-chart-block-list-row { display: flex; align-items: center; gap: var(--bh-space-md-8); min-inline-size: 0; padding: var(--bh-space-lg-10) var(--bh-space-md-8); border-radius: var(--bh-radius-md-6); }
+.bh-chart-block-list-row > span:not(.bh-chart-block-swatch) { min-inline-size: 0; overflow-wrap: anywhere; color: var(--bh-content-subtle); }
+.bh-chart-block-list-row strong { margin-inline-start: auto; font-weight: var(--bh-text-body-xs-medium-font-weight); font-variant-numeric: tabular-nums; text-align: end; }
+.bh-chart-block[data-block="budget"] .bh-chart-block-list-row:nth-child(odd) { background: var(--bh-bg-neutral-subtle); }
+.bh-chart-block-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--bh-space-5xl-24); }
+.bh-chart-block-donut-layout { display: flex; flex-direction: column; gap: var(--bh-space-3xl-16); }
+.bh-chart-block-donut-layout > .bh-chart-block-list { padding-block-start: var(--bh-space-3xl-16); border-block-start: var(--bh-border-width-default) solid var(--bh-border-subtle); }
+.bh-chart-block-donut { position: relative; min-inline-size: 0; }
+.bh-chart-block-donut .bh-chart-block-chart { height: var(--bh-space-17xl-288); }
+.bh-chart-block-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bh-space-xs-4); padding-inline: 23%; pointer-events: none; text-align: center; }
+.bh-chart-block-ring-center strong {
+  font-size: var(--bh-text-heading-md-semibold-font-size);
+  font-weight: var(--bh-text-heading-md-semibold-font-weight);
+  line-height: var(--bh-text-heading-md-semibold-line-height);
+  letter-spacing: var(--bh-text-heading-md-semibold-letter-spacing);
+  font-variant-numeric: tabular-nums;
+}
+.bh-chart-block-ring-center span { color: var(--bh-content-subtle); font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-ring { position: relative; min-inline-size: 0; inline-size: 100%; aspect-ratio: 1; }
+.bh-chart-block-ring > .bh-echart { height: 100%; }
+.bh-chart-block-research-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bh-space-5xl-24); }
+.bh-chart-block-research-rings > div { inline-size: 100%; max-inline-size: var(--bh-space-17xl-288); justify-self: center; }
+.bh-chart-block-research-rings .bh-chart-block-ring-center strong { font-size: var(--bh-text-heading-lg-semibold-font-size); line-height: var(--bh-text-heading-lg-semibold-line-height); }
+.bh-chart-block-budget-rings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--bh-space-md-8); }
+.bh-chart-block-budget-rings > div { display: flex; flex-direction: column; align-items: center; min-inline-size: 0; gap: var(--bh-space-xs-4); text-align: center; }
+.bh-chart-block-budget-rings .bh-chart-block-ring { max-inline-size: var(--bh-space-11xl-96); }
+.bh-chart-block-budget-rings .bh-chart-block-ring-center { padding: 0; }
+.bh-chart-block-budget-rings strong { font-size: var(--bh-text-body-sm-medium-font-size); line-height: var(--bh-text-body-sm-medium-line-height); }
+.bh-chart-block-budget-rings > div > span { color: var(--bh-content-subtle); overflow-wrap: anywhere; font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-score { position: relative; inline-size: 100%; max-inline-size: var(--bh-space-17xl-288); align-self: center; }
+.bh-chart-block-score-caption { margin: calc(-1 * var(--bh-space-6xl-32)) 0 0; text-align: center; }
+.bh-chart-block-range { display: flex; gap: var(--bh-space-xs-4); color: var(--bh-content-subtle); font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-range > div { display: flex; flex-direction: column; gap: var(--bh-space-xs-4); min-inline-size: 0; flex-basis: 0; }
+.bh-chart-block-range i { block-size: var(--bh-space-sm-6); border-radius: var(--bh-radius-full); }
+.bh-chart-block-range > div > span:last-child { overflow-wrap: anywhere; }
+
+.bh-chart-block-ride { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--bh-space-5xl-24); }
+.bh-chart-block-ride-main { display: flex; flex-direction: column; gap: var(--bh-space-3xl-16); }
+.bh-chart-block-ride-distance { display: flex; align-items: center; gap: var(--bh-space-3xl-16); }
+.bh-chart-block-ride-distance > svg { inline-size: var(--bh-space-6xl-32); block-size: var(--bh-space-6xl-32); color: var(--bh-content-brand-default); flex: none; }
+.bh-chart-block-metric-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bh-space-md-8); }
+.bh-chart-block-metric-rings > div { display: flex; flex-direction: column; align-items: center; gap: var(--bh-space-xs-4); text-align: center; }
+.bh-chart-block-metric-rings .bh-chart-block-ring { max-inline-size: var(--bh-space-12xl-128); }
+.bh-chart-block-metric-rings svg { inline-size: var(--bh-space-5xl-24); block-size: var(--bh-space-5xl-24); stroke-width: var(--bh-icon-stroke-200); }
+.bh-chart-block-metric-rings strong { font-weight: var(--bh-text-body-xs-medium-font-weight); }
+.bh-chart-block-metric-rings > div > span, .bh-chart-block-metric-rings small { color: var(--bh-content-subtle); font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-ride-splits { display: flex; flex-direction: column; justify-content: space-around; gap: var(--bh-space-3xl-16); border-inline-start: var(--bh-border-width-default) solid var(--bh-border-subtle); padding-inline-start: var(--bh-space-5xl-24); }
+.bh-chart-block-flow-viewport { min-inline-size: 0; overflow-x: auto; }
+.bh-chart-block-flow-canvas { min-inline-size: calc(var(--bh-space-19xl-384) + var(--bh-space-9xl-64)); }
+.bh-chart-block-pipeline { position: relative; }
+.bh-chart-block-flow-total { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); padding: var(--bh-space-md-8); border-radius: var(--bh-radius-lg-8); background: var(--bh-bg-raised); text-align: center; pointer-events: none; }
+.bh-chart-block:dir(rtl) .bh-chart-block-flow-total { transform: translate(50%, -50%); }
+.bh-chart-block-flow-total .bh-chart-block-stat { align-items: center; }
+.bh-chart-block[data-block="grid"] .bh-chart-block-stats, .bh-chart-block[data-block="monospace"] .bh-chart-block-stats { padding-block-end: var(--bh-space-4xl-20); border-block-end: var(--bh-border-width-default) dashed var(--bh-border-default); font-family: var(--bh-font-family-mono); }
+
+.bh-chart-block-footer { padding: var(--bh-space-3xl-16) var(--bh-space-5xl-24); border-block-start: var(--bh-border-width-default) solid var(--bh-border-subtle); color: var(--bh-content-subtle); }
+.bh-chart-block-footer > span { display: block; margin-block-end: var(--bh-space-md-8); font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-data summary { inline-size: fit-content; cursor: pointer; border-radius: var(--bh-radius-xs-2); color: var(--bh-content-default); }
+.bh-chart-block-table-scroll { max-block-size: var(--bh-space-17xl-288); overflow: auto; margin-block-start: var(--bh-space-3xl-16); }
+.bh-chart-block-data table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+.bh-chart-block-data caption { padding-block-end: var(--bh-space-xl-12); text-align: start; }
+.bh-chart-block-data th, .bh-chart-block-data td { padding: var(--bh-space-md-8) var(--bh-space-xl-12); border-block-end: var(--bh-border-width-default) solid var(--bh-border-subtle); text-align: start; white-space: nowrap; }
+.bh-chart-block-data th { font-weight: var(--bh-text-body-xs-medium-font-weight); color: var(--bh-content-default); }
+.bh-chart-block-data thead { background: var(--bh-bg-neutral-subtle); }
+
+@container (max-width: 560px) {
+  .bh-chart-block-header, .bh-chart-block-body { padding: var(--bh-space-3xl-16); }
+  .bh-chart-block-stats[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .bh-chart-block-split { grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-3xl-16); }
+  .bh-chart-block-split .bh-chart-block-donut { max-inline-size: var(--bh-space-17xl-288); inline-size: 100%; justify-self: center; }
+  .bh-chart-block-list[data-columns="2"] { grid-template-columns: minmax(0, 1fr); }
+  .bh-chart-block-value { font-size: var(--bh-text-heading-md-semibold-font-size); line-height: var(--bh-text-heading-md-semibold-line-height); }
+  .bh-chart-block-ride { grid-template-columns: minmax(0, 1fr); }
+  .bh-chart-block-ride-splits { flex-direction: row; justify-content: flex-start; border-inline-start: 0; border-block-start: var(--bh-border-width-default) solid var(--bh-border-subtle); padding-inline-start: 0; padding-block-start: var(--bh-space-3xl-16); }
+  .bh-chart-block-ride-splits > div { flex: 1; }
+  .bh-chart-block-budget-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--bh-space-3xl-16); }
+  .bh-chart-block-research-rings { gap: var(--bh-space-md-8); }
+  .bh-chart-block-research-rings .bh-chart-block-ring-center span { font-size: var(--bh-text-body-3xs-regular-font-size); line-height: var(--bh-text-body-3xs-regular-line-height); }
+  .bh-chart-block[data-block="cache-tiers"] .bh-chart-block-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .bh-chart-block-footer { padding: var(--bh-space-3xl-16); }
+}

package/registry/components/chart-block.tsx

@@ -0,0 +1,260 @@
+"use client"
+
+import * as React from "react"
+import type { EChartsOption, PieSeriesOption } from "echarts"
+import { Bike, Gauge, Mountain, Zap } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "./button"
+import { Progress } from "./progress"
+import { EChart, type EChartTheme } from "./echart"
+import { createChartOption, type ChartDatum, type ChartSpec } from "./chart-options"
+import { attachChartInteractions } from "./chart-interactions"
+import { chartBlockDefinitions, getChartBlockSpec, type ChartBlockDefinition, type ChartBlockId } from "./chart-block-data"
+import "./chart-block.css"
+
+export { chartBlocks, type ChartBlockId } from "./chart-block-data"
+export type ChartBlockProps = React.ComponentProps<"article"> & { block: ChartBlockId }
+
+const number = (value: number) => value.toLocaleString("en-US", { maximumFractionDigits: 1 })
+const money = (value: number) => `$${number(value)}`
+const numeric = (row: ChartDatum, key: string) => Number(row[key] ?? 0)
+const total = (rows: ChartDatum[], key: string) => rows.reduce((sum, row) => sum + numeric(row, key), 0)
+const delta = (current: number, previous: number) => previous ? (current - previous) / previous * 100 : 0
+const signed = (value: number) => `${value >= 0 ? "+" : ""}${number(value)}%`
+const colorTokens = [
+  "--bh-chart-categorical-brand", "--bh-chart-categorical-success", "--bh-chart-categorical-warning",
+  "--bh-chart-categorical-danger", "--bh-chart-categorical-information", "--bh-chart-categorical-purple",
+  "--bh-chart-categorical-aqua", "--bh-chart-categorical-fuchsia",
+]
+
+function Swatch({ index }: { index: number }) {
+  return <span className="bh-chart-block-swatch" aria-hidden="true" style={{ backgroundColor: `var(${colorTokens[index % colorTokens.length]})` }} />
+}
+
+function Stat({ label, value, detail, colorIndex }: { label: React.ReactNode; value: React.ReactNode; detail?: React.ReactNode; colorIndex?: number }) {
+  return <div className="bh-chart-block-stat">
+    <span className="bh-chart-block-stat-label">{colorIndex !== undefined && <Swatch index={colorIndex} />}{label}</span>
+    <strong className="bh-chart-block-value">{value}</strong>
+    {detail && <span className="bh-chart-block-detail">{detail}</span>}
+  </div>
+}
+
+function BlockChart({ block, spec, selected, onSelect, className }: { block: ChartBlockId; spec: ChartSpec; selected?: string | null; onSelect?: (key: string) => void; className?: string }) {
+  const option = React.useCallback((theme: EChartTheme): EChartsOption => {
+    const visible = block === "latency" && selected ? { ...spec, series: spec.series?.filter((item) => item.key === selected) } : spec
+    const result = createChartOption(theme, { ...visible, legend: visible.legend ?? false })
+    if (block === "market-share") {
+      const pie = (result.series as PieSeriesOption[])[0]
+      result.series = [{ ...pie, selectedMode: "single", data: spec.data.map((row, index) => ({
+        name: String(row.name), value: numeric(row, "value"), selected: row.name === selected,
+        itemStyle: { color: theme.palette[index % theme.palette.length], opacity: !selected || row.name === selected ? 1 : theme.opacity.muted },
+      })) }]
+    }
+    return result
+  }, [block, selected, spec])
+  const onReady = React.useCallback<NonNullable<React.ComponentProps<typeof EChart>["onReady"]>>((chart, theme) => {
+    const cleanup = attachChartInteractions(chart, theme, spec)
+    const click = (event: { name?: string; seriesId?: string }) => {
+      const key = block === "latency" ? event.seriesId : event.name
+      if (key) onSelect?.(key)
+    }
+    if (onSelect) chart.on("click", click)
+    return () => { cleanup(); if (onSelect) chart.off("click", click) }
+  }, [block, onSelect, spec])
+  return <EChart className={cn("bh-chart-block-chart", className)} label={chartBlockDefinitions[block].title} option={option} onReady={onReady} />
+}
+
+function TimeSeriesBlock({ block, spec, selected, onSelect }: {
+  block: ChartBlockId; spec: ChartSpec; selected: string | null; onSelect: (key: string) => void
+}) {
+  const data = spec.data
+  const latest = data.at(-1)!
+  let statistics: React.ReactNode
+  if (block === "latency") {
+    statistics = <div className="bh-chart-block-stats" data-columns="4">{spec.series?.map((item) => <button
+      key={item.key} className="bh-chart-block-stat-button" type="button" aria-pressed={selected === item.key}
+      data-muted={selected !== null && selected !== item.key} onClick={() => onSelect(item.key)}
+    ><Stat label={item.label?.replace(" (ms)", "")} value={<>{number(numeric(latest, item.key))}<small>ms</small></>} colorIndex={item.colorIndex} detail="Latest sample" /></button>)}</div>
+  } else if (block === "portfolio") {
+    statistics = <div className="bh-chart-block-stats">{spec.series?.map((item) => {
+      const first = numeric(data[0], item.key)
+      const last = numeric(latest, item.key)
+      return <Stat key={item.key} label={item.label?.replace(" (USD)", "")} colorIndex={item.colorIndex}
+        value={signed(delta(last, first))} detail={`${last >= first ? "+" : "−"}${money(Math.abs(last - first))} over selected period`} />
+    })}</div>
+  } else if (block === "benchmark") {
+    statistics = <Stat label="Latest weekly signups" value={number(numeric(latest, "actual"))}
+      detail={`${signed(delta(numeric(latest, "actual"), numeric(latest, "target")))} vs target of ${number(numeric(latest, "target"))}`} />
+  } else if (block === "audience") {
+    statistics = <div className="bh-chart-block-stats"><Stat label="Total listener-months" value={number(total(data, "listeners"))} detail="Sum across the selected months" />
+      <Stat label="Latest month" value={number(numeric(latest, "listeners"))} detail={`${signed(delta(numeric(latest, "listeners"), numeric(data[0], "listeners")))} over selected period`} /></div>
+  } else if (block === "payouts") {
+    statistics = <div className="bh-chart-block-stats"><Stat label="Paid" colorIndex={2} value={money(total(data, "payouts"))} detail="Selected period" />
+      <Stat label="Pending" colorIndex={4} value={money(total(data, "pending"))} detail="Selected period" /></div>
+  } else if (block === "shipments") {
+    statistics = <Stat label="Orders shipped" value={number(total(data, "current"))}
+      detail={`${signed(delta(total(data, "current"), total(data, "previous")))} vs the same slots last week`} />
+  } else if (block === "peak") {
+    const peak = data.reduce((best, row) => numeric(row, "organic") + numeric(row, "paid") > numeric(best, "organic") + numeric(best, "paid") ? row : best)
+    statistics = <Stat label="Best week" value={number(numeric(peak, "organic") + numeric(peak, "paid"))} detail={`Signups in ${peak.name}`} />
+  } else {
+    const key = block === "grid" ? "sessions" : "sales"
+    const peak = data.reduce((best, row) => numeric(row, key) > numeric(best, key) ? row : best)
+    statistics = <div className="bh-chart-block-stats"><Stat label={block === "grid" ? "Total sessions" : "Total sales"}
+      value={block === "grid" ? number(total(data, key)) : money(total(data, key))} />
+      <Stat label={block === "grid" ? "Peak hour" : "Top month"} value={String(peak.name)} detail={`${number(numeric(peak, key))} ${key}`} /></div>
+  }
+  const chart = <BlockChart block={block} spec={spec} selected={selected} onSelect={block === "latency" ? onSelect : undefined} />
+  return <>{block === "payouts" ? <>{chart}{statistics}</> : <>{statistics}{chart}</>}</>
+}
+
+function ValueList({ data, format, columns = false, selected, onSelect }: {
+  data: ChartDatum[]; format: (row: ChartDatum) => string; columns?: boolean; selected?: string | null; onSelect?: (key: string) => void
+}) {
+  return <div className="bh-chart-block-list" data-columns={columns ? "2" : undefined}>{data.map((row, index) => {
+    const content = <><Swatch index={index} /><span>{String(row.name)}</span><strong>{format(row)}</strong></>
+    return onSelect ? <button key={String(row.name)} className="bh-chart-block-list-row" type="button" aria-pressed={selected === row.name}
+      data-muted={Boolean(selected && selected !== row.name)} onClick={() => onSelect(String(row.name))}>{content}</button>
+      : <div key={String(row.name)} className="bh-chart-block-list-row">{content}</div>
+  })}</div>
+}
+
+function Ring({ label, value, max = 100, index, dotted = false, children }: {
+  label: string; value: number; max?: number; index: number; dotted?: boolean; children?: React.ReactNode
+}) {
+  const option = React.useCallback((theme: EChartTheme): EChartsOption => {
+    const result = createChartOption(theme, { family: "radial", data: [{ name: label, value }], max, legend: false, series: [{ key: "value", colorIndex: index }] })
+    if (!dotted) return { ...result, polar: (Array.isArray(result.polar) ? result.polar : [result.polar]).map((polar) => ({ ...polar, radius: ["65%", "87%"], center: ["50%", "50%"] })) }
+    const filled = Math.round(value / max * 40)
+    return { ...result, tooltip: { show: false }, series: [{
+      type: "pie", radius: ["83%", "91%"], center: ["50%", "50%"], silent: true, animation: false,
+      label: { show: false }, labelLine: { show: false }, emphasis: { disabled: true },
+      data: Array.from({ length: 80 }, (_, position) => ({ value: 1, itemStyle: {
+        color: position % 2 ? "transparent" : position / 2 < filled ? theme.palette[index] : theme.neutral,
+        borderWidth: 0, borderRadius: theme.markRadius, shadowBlur: 0,
+      } })),
+    }] }
+  }, [dotted, index, label, max, value])
+  return <div className="bh-chart-block-ring"><EChart option={option} label={`${label}: ${number(value)} of ${number(max)}`} />
+    <div className="bh-chart-block-ring-center">{children ?? <strong>{number(value)}%</strong>}</div></div>
+}
+
+function PieBlock({ block, spec, selected, onSelect }: { block: ChartBlockId; spec: ChartSpec; selected: string | null; onSelect: (key: string) => void }) {
+  if (block === "progress-rings") return <div className="bh-chart-block-research-rings">{spec.data.map((row, index) => <div key={String(row.name)}>
+    <Ring label={String(row.name)} value={numeric(row, "value")} index={index} dotted><strong>{row.value}%</strong><span>{row.name}</span></Ring>
+  </div>)}</div>
+  const revenue = block === "revenue-mix"
+  const amount = total(spec.data, "value")
+  return <div className={revenue ? "bh-chart-block-split" : "bh-chart-block-donut-layout"}>
+    <div className="bh-chart-block-donut"><BlockChart block={block} spec={spec} selected={selected} onSelect={revenue ? undefined : onSelect} />
+      <div className="bh-chart-block-ring-center"><strong>{revenue ? money(amount / 1000) + "k" : money(amount) + "B"}</strong><span>{revenue ? "Total revenue" : "Ecosystem value"}</span></div>
+    </div>
+    <ValueList data={spec.data} columns={!revenue} selected={selected} onSelect={revenue ? undefined : onSelect}
+      format={(row) => revenue ? money(numeric(row, "value")) : `${money(numeric(row, "value"))}B · ${number(numeric(row, "value") / amount * 100)}%`} />
+  </div>
+}
+
+function ReliabilityBlock({ spec }: { spec: ChartSpec }) {
+  const bandColors = [3, 2, 4, 1]
+  const option = React.useCallback((theme: EChartTheme): EChartsOption => ({
+    ...createChartOption(theme, { ...spec, legend: false }), tooltip: { show: false }, series: [{
+      type: "pie", radius: ["69%", "87%"], startAngle: 210, endAngle: -30, clockwise: true,
+      padAngle: 4, silent: true, label: { show: false }, labelLine: { show: false },
+      itemStyle: { borderRadius: theme.markRadius, shadowBlur: 0 },
+      data: spec.data.map((row, index) => ({ name: String(row.name), value: numeric(row, "value"), itemStyle: { color: theme.palette[bandColors[index]] } })),
+    }],
+  }), [spec])
+  return <><div className="bh-chart-block-score"><EChart option={option} label="Reliability score 842 of 1000, excellent" />
+    <div className="bh-chart-block-ring-center"><strong>842</strong><span>out of 1,000</span></div></div>
+    <p className="bh-chart-block-score-caption">Reliability is <strong>excellent</strong></p>
+    <div className="bh-chart-block-range">{spec.data.map((row, index) => <div key={String(row.name)} style={{ flexGrow: numeric(row, "value") }}>
+      <span>{row.from}</span><i style={{ backgroundColor: `var(${colorTokens[bandColors[index]]})` }} /><span>{row.name}</span>
+    </div>)}<span>1,000</span></div>
+  </>
+}
+
+function BudgetBlock({ spec }: { spec: ChartSpec }) {
+  return <><Stat label="Monthly allocation" value={money(total(spec.data, "amount"))} />
+    <div className="bh-chart-block-budget-rings">{spec.data.map((row, index) => <div key={String(row.name)}>
+      <Ring label={String(row.name)} value={numeric(row, "value")} index={index} /><span>{row.name}</span>
+    </div>)}</div><ValueList data={spec.data} format={(row) => `${row.value}% · ${money(numeric(row, "amount"))}`} /></>
+}
+
+function RideBlock({ spec }: { spec: ChartSpec }) {
+  const [distance, ...metrics] = spec.data
+  const icons = [Mountain, Zap, Gauge]
+  return <div className="bh-chart-block-ride"><div className="bh-chart-block-ride-main">
+    <div className="bh-chart-block-ride-distance"><Bike aria-hidden="true" /><Stat label="Distance ridden" value={<>{distance.value}<small>km</small></>} detail={`Goal: ${distance.goal} km`} /></div>
+    <Progress aria-label="Distance goal" value={numeric(distance, "value")} max={numeric(distance, "goal")} labelPosition="none" showIndicator={false} />
+    <div className="bh-chart-block-metric-rings">{metrics.map((row, index) => {
+      const Icon = icons[index]
+      return <div key={String(row.name)}><Ring label={String(row.name)} value={numeric(row, "value")} max={numeric(row, "goal")} index={index + 1}><Icon aria-hidden="true" /></Ring>
+        <strong>{row.value} <span>{row.unit}</span></strong><span>{row.name}</span><small>Goal {row.goal} {row.unit}</small></div>
+    })}</div>
+  </div><div className="bh-chart-block-ride-splits"><Stat label="Sprints" value="7" detail="efforts" /><Stat label="Recovery" value="46" detail="minutes" /></div></div>
+}
+
+function CacheBlock({ spec }: { spec: ChartSpec }) {
+  return <><div className="bh-chart-block-split"><BlockChart block="cache-tiers" spec={spec} />
+    <div className="bh-chart-block-stats" data-columns="2"><Stat label="Served warm" value="9,150" /><Stat label="Revalidated" value="1,280" /><Stat label="Evictions" value="412" /><Stat label="Purges" value="96" /></div>
+  </div><ValueList data={spec.data} columns format={(row) => `${number(numeric(row, "count"))}/1,000 · ${row.value}%`} /></>
+}
+
+function FlowBlock({ block, spec }: { block: "allocation" | "pipeline"; spec: ChartSpec }) {
+  const amount = spec.links!.filter((link) => block === "pipeline" ? link.target === 4 : link.source === 0).reduce((sum, link) => sum + link.value, 0)
+  return <><div className="bh-chart-block-flow-viewport" tabIndex={0} role="region" aria-label={`${chartBlockDefinitions[block].title} flow diagram`}>
+    <div className={cn("bh-chart-block-flow-canvas", block === "pipeline" && "bh-chart-block-pipeline")}>
+    <BlockChart block={block} spec={spec} />
+    {block === "pipeline" && <div className="bh-chart-block-flow-total"><Stat label="Total booked" value={money(amount)} detail="4 sources · 4 routes" /></div>}
+    </div></div>
+    {block === "allocation" && <div className="bh-chart-block-stats" data-columns="3"><Stat label="Total inflow" value={money(amount) + "k"} />
+      <Stat label="Asset classes" value="3" /><Stat label="Destinations" value="3" /></div>}
+  </>
+}
+
+function BlockDataTable({ block, spec, period }: { block: ChartBlockId; spec: ChartSpec; period: string }) {
+  const rows: ChartDatum[] = spec.family === "sankey" ? spec.links!.map((link) => ({
+    source: typeof link.source === "number" ? spec.nodes![link.source].name : link.source,
+    target: typeof link.target === "number" ? spec.nodes![link.target].name : link.target,
+    value: link.value,
+  })) : spec.data
+  const keys = Object.keys(rows[0] ?? {})
+  const labels: Record<string, string> = { name: "Category / time", value: "Value", goal: "Goal", unit: "Unit", from: "Band starts at", amount: "Amount (USD)", count: "Requests", source: "Source", target: "Target" }
+  spec.series?.forEach((item) => { labels[item.key] = item.label ?? item.key })
+  if (spec.family === "sankey") labels.value = block === "allocation" ? "Amount (USD thousands)" : "Amount (USD)"
+  return <details className="bh-chart-block-data"><summary>View data table</summary><div className="bh-chart-block-table-scroll" tabIndex={0} role="region" aria-label={`${chartBlockDefinitions[block].title} data`}>
+    <table><caption>{chartBlockDefinitions[block].title} · {period === "All" ? "All available samples" : period} · Illustrative data</caption>
+      <thead><tr>{keys.map((key) => <th key={key} scope="col">{labels[key] ?? key}</th>)}</tr></thead>
+      <tbody>{rows.map((row, index) => <tr key={index}>{keys.map((key, column) => column === 0 ? <th scope="row" key={key}>{row[key]}</th> : <td key={key}>{typeof row[key] === "number" ? number(row[key]) : row[key]}</td>)}</tr>)}</tbody>
+    </table>
+  </div></details>
+}
+
+/** Ready-made examples: shared chart behavior, Banhaten tokens, and inspectable data. */
+export function ChartBlock({ block, className, ...props }: ChartBlockProps) {
+  const definition: ChartBlockDefinition = chartBlockDefinitions[block]
+  const [period, setPeriod] = React.useState("All")
+  const [selection, setSelection] = React.useState<{ block: ChartBlockId; key: string } | null>(null)
+  const selected = selection?.block === block ? selection.key : null
+  const effectivePeriod = definition.periods?.some((entry) => entry.label === period) ? period : "All"
+  const spec = React.useMemo(() => getChartBlockSpec(block, effectivePeriod), [block, effectivePeriod])
+  const titleId = React.useId()
+  const select = (key: string) => setSelection(selected === key ? null : { block, key })
+  let content: React.ReactNode
+  if (definition.periods) content = <TimeSeriesBlock block={block} spec={spec} selected={selected} onSelect={select} />
+  else if (block === "reliability-score") content = <ReliabilityBlock spec={spec} />
+  else if (spec.family === "pie") content = <PieBlock block={block} spec={spec} selected={selected} onSelect={select} />
+  else if (block === "budget") content = <BudgetBlock spec={spec} />
+  else if (block === "ride") content = <RideBlock spec={spec} />
+  else if (block === "cache-tiers") content = <CacheBlock spec={spec} />
+  else if (block === "allocation" || block === "pipeline") content = <FlowBlock block={block} spec={spec} />
+  return <article className={cn("bh-chart-block", className)} data-slot="chart-block" data-block={block} aria-labelledby={titleId} {...props}>
+    <header className="bh-chart-block-header"><div><h3 id={titleId}>{definition.title}</h3><p>{definition.description}</p></div>
+      {definition.periods && <div className="bh-chart-block-periods" role="group" aria-label={`${definition.title} period`}>{definition.periods.map((entry) =>
+        <Button key={entry.label} type="button" size="xs" variant={effectivePeriod === entry.label ? "soft" : "ghost"} aria-pressed={effectivePeriod === entry.label} onClick={() => setPeriod(entry.label)}>{entry.label}</Button>)}</div>}
+    </header>
+    <div className="bh-chart-block-body">{content}</div>
+    <footer className="bh-chart-block-footer"><span>Illustrative data</span><BlockDataTable block={block} spec={spec} period={effectivePeriod} /></footer>
+  </article>
+}