banhaten 0.3.0 → 0.5.0

package/registry/components/chart-interactions.ts

@@ -0,0 +1,123 @@
+import { graphic, type ECharts } from "echarts/core"
+import type { EChartsOption, SeriesOption } from "echarts"
+import type { EChartTheme } from "./echart-theme"
+import { createChartOption } from "./chart-options"
+import { barPaint, chartAlpha, expandablePaint, seriesColors } from "./chart-options.paint"
+import { chartSeries, type ChartSpec } from "./chart-options.types"
+
+/** Attach optional interaction behavior. Every listener and animation has a cleanup. */
+export function attachChartInteractions(chart: ECharts, theme: EChartTheme, spec: ChartSpec): () => void {
+  const entries = chartSeries(spec)
+  const animated = entries.filter((entry) => entry.stroke === "animated-dashed")
+  const expanding = entries.filter((entry) => (entry.variant ?? spec.variant) === "expandable")
+  const stripped = entries.filter((entry) => (entry.variant ?? spec.variant) === "stripped")
+  const reveal = Boolean(spec.hoverReveal && (spec.family === "line" || spec.family === "area"))
+  if (!animated.length && !expanding.length && !stripped.length && !reveal) return () => {}
+  const original = createChartOption(theme, spec)
+  const series = (Array.isArray(original.series) ? original.series : [original.series]).filter((item): item is SeriesOption => Boolean(item))
+  let frame: number | undefined
+  let hovered: number | null = null
+  let disposed = false
+  let dirty = false
+  const started = performance.now()
+  let capSignature = ""
+
+  // Keep the colored cap a token-sized strip after data changes, zoom, and resize.
+  const updateCaps = () => {
+    if (disposed || chart.isDisposed()) return
+    const ratios: number[] = []
+    const patches = stripped.flatMap((entry) => {
+      const originalSeries = series.find((item) => item.id === entry.key)
+      if (originalSeries?.type !== "bar") return []
+      const colors = seriesColors(theme, entry, entries.indexOf(entry))
+      const data = originalSeries.data?.map((datum, index) => {
+        if (!datum || typeof datum !== "object" || Array.isArray(datum) || !("value" in datum) || typeof datum.value !== "number") return datum
+        const point = chart.convertToPixel({ gridIndex: 0 }, spec.horizontal ? [datum.value, index] : [index, datum.value])
+        const origin = chart.convertToPixel({ gridIndex: 0 }, spec.horizontal ? [0, index] : [index, 0])
+        const axis = spec.horizontal ? 0 : 1
+        const span = Array.isArray(point) && Array.isArray(origin) ? Math.abs(point[axis] - origin[axis]) : 0
+        const ratio = span > 0 ? Math.min(1, theme.space.xs / span) : 0
+        ratios.push(ratio)
+        return { ...datum, itemStyle: { ...datum.itemStyle, color: barPaint(theme, colors, "stripped", Boolean(spec.horizontal), ratio) } }
+      })
+      return [{ id: entry.key, type: "bar" as const, data }]
+    })
+    const signature = ratios.join(",")
+    if (signature === capSignature) return
+    capSignature = signature
+    chart.setOption({ series: patches }, { silent: true, lazyUpdate: true })
+  }
+
+  const paint = (time: number) => {
+    frame = undefined
+    if (disposed || chart.isDisposed()) return
+    const patches: SeriesOption[] = []
+    entries.forEach((entry, seriesIndex) => {
+      const originalSeries = series.find((item) => item.id === entry.key)
+      if (!originalSeries) return
+      const colors = seriesColors(theme, entry, seriesIndex)
+      const patch: Record<string, unknown> = { id: entry.key }
+      let changed = false
+      if (entry.stroke === "animated-dashed" && !theme.reducedMotion) {
+        patch.lineStyle = { dashOffset: -((time - started) / Math.max(theme.duration, 1)) * theme.space.xl }
+        changed = true
+      }
+      if (reveal && dirty && originalSeries.type === "line") {
+        const cutoff = hovered === null ? 1 : hovered / Math.max(1, spec.data.length - 1)
+        const gradient = new graphic.LinearGradient(0, 0, 1, 0, [
+          { offset: 0, color: colors[0] }, { offset: cutoff, color: colors.at(-1)! },
+          { offset: cutoff, color: hovered === null ? colors.at(-1)! : theme.neutral },
+          { offset: 1, color: hovered === null ? colors.at(-1)! : theme.neutral },
+        ])
+        patch.lineStyle = { ...originalSeries.lineStyle, ...patch.lineStyle as object, color: gradient }
+        if (spec.family === "area") {
+          patch.areaStyle = hovered === null ? originalSeries.areaStyle : {
+            color: new graphic.LinearGradient(0, 0, 1, 0, gradient.colorStops.map((stop) => ({ ...stop, color: chartAlpha(stop.color, theme.opacity.area) }))),
+          }
+        }
+        changed = true
+      }
+      if ((entry.variant ?? spec.variant) === "expandable" && dirty && originalSeries.type === "bar") {
+        patch.data = originalSeries.data?.map((datum, index) => ({
+          ...(typeof datum === "object" && datum !== null && !Array.isArray(datum) ? datum : { value: datum }),
+          itemStyle: { color: expandablePaint(colors[0], hovered === index ? 1 : theme.opacity.soft, Boolean(spec.horizontal)) },
+        }))
+        changed = true
+      }
+      if (changed) patches.push(patch as SeriesOption)
+    })
+    if (patches.length) chart.setOption({ series: patches } satisfies EChartsOption, { silent: true, lazyUpdate: true })
+    dirty = false
+    if (animated.length && !theme.reducedMotion) frame = requestAnimationFrame(paint)
+  }
+  const schedule = () => { if (frame === undefined) frame = requestAnimationFrame(paint) }
+  const move = (event: { offsetX: number; offsetY: number }) => {
+    const point = [event.offsetX, event.offsetY]
+    const converted = chart.containPixel({ gridIndex: 0 }, point) ? chart.convertFromPixel({ gridIndex: 0 }, point) : null
+    const value = Array.isArray(converted) ? converted[spec.horizontal ? 1 : 0] : null
+    const next = typeof value === "number" ? Math.max(0, Math.min(spec.data.length - 1, Math.round(value))) : null
+    if (next === hovered) return
+    hovered = next
+    dirty = true
+    schedule()
+  }
+  const leave = () => {
+    hovered = null
+    dirty = true
+    schedule()
+  }
+  const renderer = chart.getZr()
+  if (expanding.length || reveal) {
+    renderer.on("mousemove", move)
+    renderer.on("globalout", leave)
+  }
+  if (animated.length && !theme.reducedMotion) schedule()
+  if (stripped.length) { updateCaps(); chart.on("finished", updateCaps) }
+  return () => {
+    disposed = true
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    renderer.off("mousemove", move)
+    renderer.off("globalout", leave)
+    if (stripped.length) chart.off("finished", updateCaps)
+  }
+}

package/registry/components/chart-options.cartesian.ts

@@ -0,0 +1,162 @@
+import type { BarSeriesOption, LineSeriesOption, PictorialBarSeriesOption } from "echarts/charts"
+import type { EChartsOption } from "echarts"
+import type { EChartTheme } from "./echart-theme"
+import { areaPaint, barPaint, chartDecal, chartGradient, seriesColors } from "./chart-options.paint"
+import { chartNumber, chartSeries, type ChartCurve, type ChartSeries, type ChartSpec } from "./chart-options.types"
+import { cartesianTooltip, dotItemStyle } from "./chart-options.parts"
+
+function curveOption(curve: ChartCurve | undefined): Pick<LineSeriesOption, "smooth" | "smoothMonotone" | "step"> {
+  if (curve === "step") return { step: "middle" }
+  if (!curve || curve === "linear") return { smooth: false }
+  return { smooth: curve === "bump" ? 0.5 : true, smoothMonotone: curve === "monotoneY" ? "y" : "x" }
+}
+
+function valuesFor(spec: ChartSpec, series: ChartSeries, all: ChartSeries[]) {
+  const percent = spec.stack === "percent" || spec.stack === "expanded"
+  return spec.data.map((row) => {
+    const value = chartNumber(row[series.key])
+    if (value === null || !percent) return value
+    const sum = all.reduce((total, entry) => total + Math.max(0, chartNumber(row[entry.key]) ?? 0), 0)
+    return sum === 0 ? 0 : Math.max(0, value) / sum * 100
+  })
+}
+
+function isBarSeries(spec: ChartSpec, entry: ChartSeries) {
+  return entry.type === "bar" || (spec.family === "bar" && !entry.type)
+}
+
+function barEndRadius(theme: EChartTheme, spec: ChartSpec, all: ChartSeries[], index: number, point: number, value: number | null): number | number[] {
+  if (!value) return 0
+  // Positive and negative stacks have independent exposed ends; missing values leave no join.
+  if (spec.stack && spec.stack !== "default" && all.slice(index + 1).some((entry) => {
+    const next = chartNumber(spec.data[point][entry.key])
+    return isBarSeries(spec, entry) && next !== null && next * value > 0
+  })) return 0
+  const radius = theme.markRadius
+  if (spec.horizontal) return (value > 0) !== theme.rtl ? [0, radius, radius, 0] : [radius, 0, 0, radius]
+  return value > 0 ? [radius, radius, 0, 0] : [0, 0, radius, radius]
+}
+
+function lineSeries(theme: EChartTheme, spec: ChartSpec, entry: ChartSeries, index: number, all: ChartSeries[]): LineSeriesOption[] {
+  const values = valuesFor(spec, entry, all)
+  const colors = seriesColors(theme, entry, index)
+  const isArea = entry.type === "area" || spec.family === "area"
+  // Forecast tails must not enter a stack as a duplicate series and change totals.
+  const hasBuffer = entry.buffer && values.length > 1 && (!spec.stack || spec.stack === "default")
+  const base: LineSeriesOption = {
+    id: entry.key,
+    name: entry.label ?? entry.key,
+    type: "line",
+    ...curveOption(entry.curve ?? spec.curve),
+    data: hasBuffer ? values.map((value, point) => point === values.length - 1 ? null : value) : values,
+    stack: spec.stack && spec.stack !== "default" ? "total" : undefined,
+    connectNulls: false,
+    showSymbol: entry.dots ?? Boolean(entry.dotStyle),
+    symbol: "circle",
+    symbolSize: entry.dotStyle === "border" ? theme.space.md : theme.space.sm,
+    lineStyle: { color: chartGradient(colors), width: theme.lineWidth, type: entry.stroke === "solid" || !entry.stroke ? "solid" : "dashed", cap: "round" },
+    itemStyle: dotItemStyle(theme, colors[0], entry.dotStyle),
+    areaStyle: isArea ? { color: areaPaint(theme, colors, entry.variant ?? spec.variant ?? "gradient"), opacity: 1 } : undefined,
+    emphasis: { focus: spec.hoverHighlight ? "series" : "none", scale: true, lineStyle: { width: theme.lineWidth }, itemStyle: dotItemStyle(theme, colors[0], entry.activeDotStyle ?? entry.dotStyle) },
+    blur: { lineStyle: { opacity: theme.opacity.muted }, areaStyle: { opacity: theme.opacity.muted }, itemStyle: { opacity: theme.opacity.muted } },
+    selectedMode: "single",
+    select: { itemStyle: { color: colors[0] } },
+  }
+  if (!hasBuffer) return [base]
+  return [base, {
+    ...base, id: `${entry.key}-buffer`,
+    data: values.map((value, point) => point >= values.length - 2 ? value : null),
+    stack: undefined, silent: true,
+    lineStyle: { ...base.lineStyle, type: "dashed" },
+  }]
+}
+
+function barSeries(theme: EChartTheme, spec: ChartSpec, entry: ChartSeries, index: number, all: ChartSeries[]): (BarSeriesOption | PictorialBarSeriesOption)[] {
+  const values = valuesFor(spec, entry, all)
+  const colors = seriesColors(theme, entry, index)
+  const variant = entry.variant ?? spec.variant ?? "default"
+  const totals = spec.data.map((row) => all.reduce((total, series) => total + (chartNumber(row[series.key]) ?? 0), 0))
+  const maximumIndex = totals.indexOf(Math.max(...totals))
+  const fill = barPaint(theme, colors, variant, Boolean(spec.horizontal))
+  const data = values.map((value, point) => ({
+    value,
+    itemStyle: {
+      color: spec.highlightMax && point !== maximumIndex ? theme.neutral : fill,
+      decal: chartDecal(theme, colors[0], entry.buffer && point === values.length - 1 ? "hatched" : variant),
+      borderWidth: entry.buffer && point === values.length - 1 ? theme.borderWidth : 0,
+      borderColor: colors[0],
+      borderRadius: variant === "blocks" || variant === "expandable" ? 0 : barEndRadius(theme, spec, all, index, point, value),
+    },
+  }))
+  const base: BarSeriesOption = {
+    id: entry.key, name: entry.label ?? entry.key, type: "bar", data,
+    stack: spec.stack && spec.stack !== "default" ? "total" : undefined,
+    barMaxWidth: theme.space.xxl,
+    barCategoryGap: "35%",
+    itemStyle: { color: fill, borderRadius: 0 },
+    emphasis: { focus: spec.hoverHighlight ? "series" : "none", itemStyle: { color: colors[0] }, label: { show: variant === "expandable", position: spec.horizontal ? "right" : "top", color: theme.foreground, fontFamily: theme.fontFamily, fontSize: theme.fontSize, fontWeight: theme.mediumWeight } },
+    blur: { itemStyle: { opacity: theme.opacity.muted } },
+    selectedMode: "single",
+    select: { itemStyle: { color: colors[0] } },
+  }
+  if (variant !== "blocks") return [base]
+  const max = spec.max ?? Math.max(1, ...values.map((value) => value ?? 0))
+  const blocks: PictorialBarSeriesOption = {
+    id: entry.key, name: base.name, type: "pictorialBar", data,
+    symbol: "rect", symbolRepeat: true, symbolClip: true,
+    symbolSize: spec.horizontal ? [theme.space.sm, theme.space.lg] : [theme.space.lg, theme.space.sm],
+    symbolMargin: theme.borderWidth, symbolBoundingData: max,
+    itemStyle: { color: colors[0] }, z: 2,
+    emphasis: { itemStyle: { color: colors[0] } },
+  }
+  const background: PictorialBarSeriesOption = {
+    ...blocks, id: `${entry.key}-track`, name: "", data: values.map(() => max),
+    symbolClip: false, silent: true, tooltip: { show: false },
+    itemStyle: { color: theme.neutral }, z: 0,
+  }
+  return [background, blocks]
+}
+
+export function cartesianOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  const all = chartSeries(spec)
+  const percent = spec.stack === "percent" || spec.stack === "expanded"
+  const category = {
+    type: "category" as const,
+    data: spec.data.map((row) => String(row[spec.categoryKey ?? "name"] ?? "")),
+    boundaryGap: spec.family === "bar" || spec.family === "composed",
+    inverse: spec.horizontal ? true : theme.rtl,
+    position: spec.horizontal && theme.rtl ? "right" as const : undefined,
+    axisTick: { show: false }, axisLine: { show: false },
+    axisLabel: { color: theme.muted, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize, margin: theme.space.md },
+  }
+  const value = {
+    type: "value" as const,
+    inverse: Boolean(spec.horizontal && theme.rtl),
+    position: !spec.horizontal && theme.rtl ? "right" as const : undefined,
+    max: percent ? 100 : spec.max,
+    axisLine: { show: false }, axisTick: { show: false },
+    axisLabel: { color: theme.muted, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize, formatter: percent ? "{value}%" : undefined },
+    splitLine: { lineStyle: { color: theme.border, width: theme.borderWidth, type: "dashed" as const } },
+  }
+  const series = all.flatMap<LineSeriesOption | BarSeriesOption | PictorialBarSeriesOption>((entry, index) => isBarSeries(spec, entry)
+    ? barSeries(theme, spec, entry, index, all)
+    : lineSeries(theme, spec, entry, index, all))
+  return {
+    grid: { left: theme.rtl ? theme.space.lg : theme.space.axis, right: theme.rtl ? theme.space.axis : theme.space.lg, top: spec.legend === false ? theme.space.lg : theme.space.axis, bottom: spec.brush ? theme.space.axis * 2 : theme.space.axis },
+    xAxis: spec.horizontal ? value : category,
+    yAxis: spec.horizontal ? category : value,
+    legend: { show: spec.legend !== false, data: all.map((entry) => entry.label ?? entry.key), top: 0, right: 0 },
+    tooltip: { trigger: "axis", formatter: cartesianTooltip(theme, spec), axisPointer: { type: "line", lineStyle: { color: theme.border, width: theme.borderWidth } } },
+    dataZoom: spec.brush ? [{
+      type: "slider", xAxisIndex: spec.horizontal ? undefined : 0, yAxisIndex: spec.horizontal ? 0 : undefined,
+      bottom: theme.space.xs, height: theme.space.xxl, start: 0, end: 100,
+      borderColor: theme.border, backgroundColor: theme.surface, fillerColor: theme.neutral,
+      handleStyle: { color: theme.surface, borderColor: theme.border },
+      moveHandleStyle: { color: theme.border },
+      textStyle: { color: theme.muted, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize },
+      dataBackground: { lineStyle: { color: theme.muted }, areaStyle: { color: theme.neutral } },
+      selectedDataBackground: { lineStyle: { color: theme.palette[0] }, areaStyle: { color: theme.neutral } },
+    }] : [],
+    series,
+  }
+}

package/registry/components/chart-options.paint.ts

@@ -0,0 +1,99 @@
+import { color, graphic } from "echarts/core"
+import type { EChartTheme } from "./echart-theme"
+import { chartColor, type ChartSeries, type ChartVariant } from "./chart-options.types"
+
+export function chartAlpha(paint: string, opacity: number): string {
+  return color.modifyAlpha(paint, opacity) ?? paint
+}
+
+export function seriesColors(theme: EChartTheme, series: ChartSeries, index: number): string[] {
+  return (series.colorIndices?.length ? series.colorIndices : [series.colorIndex ?? index]).map((slot) => chartColor(theme, slot))
+}
+
+export function chartGradient(colors: string[], vertical = false) {
+  if (colors.length === 1) return colors[0]
+  return new graphic.LinearGradient(0, 0, vertical ? 0 : 1, vertical ? 1 : 0,
+    colors.map((paint, index) => ({ offset: index / (colors.length - 1), color: paint })))
+}
+
+export function areaPaint(theme: EChartTheme, colors: string[], variant: ChartVariant) {
+  if (["dotted", "lines", "hatched"].includes(variant) && typeof document !== "undefined") {
+    const tile = document.createElement("canvas")
+    tile.width = Math.max(1, Math.round(theme.space.md))
+    tile.height = tile.width
+    const context = tile.getContext("2d")
+    if (context) {
+      context.fillStyle = chartAlpha(colors[0], theme.opacity.soft)
+      context.fillRect(0, 0, tile.width, tile.height)
+      context.fillStyle = chartAlpha(colors[0], theme.opacity.area)
+      context.strokeStyle = context.fillStyle
+      context.lineWidth = theme.borderWidth
+      if (variant === "dotted") {
+        context.beginPath()
+        context.arc(tile.width / 2, tile.height / 2, theme.borderWidth, 0, Math.PI * 2)
+        context.fill()
+      } else if (variant === "lines") {
+        context.fillRect(0, 0, tile.width, theme.borderWidth)
+      } else {
+        for (const offset of [-tile.width, 0, tile.width]) {
+          context.beginPath()
+          context.moveTo(offset, tile.height)
+          context.lineTo(offset + tile.width, 0)
+          context.stroke()
+        }
+      }
+      return { image: tile, repeat: "repeat" as const }
+    }
+  }
+  if (variant === "gradient" || variant === "gradient-reverse") {
+    const reverse = variant === "gradient-reverse"
+    return new graphic.LinearGradient(0, 0, 0, 1, [
+      { offset: 0, color: chartAlpha(colors[0], reverse ? 0 : theme.opacity.area) },
+      { offset: 1, color: chartAlpha(colors.at(-1)!, reverse ? theme.opacity.area : 0) },
+    ])
+  }
+  return chartGradient(colors.map((paint) => chartAlpha(paint, theme.opacity.area)))
+}
+
+export function chartDecal(theme: EChartTheme, paint: string, variant: ChartVariant) {
+  if (!["hatched", "lines", "dotted"].includes(variant)) return undefined
+  return {
+    symbol: variant === "dotted" ? "circle" : "rect",
+    symbolSize: variant === "dotted" ? theme.opacity.area : 1,
+    color: paint,
+    backgroundColor: chartAlpha(paint, theme.opacity.soft),
+    dashArrayX: variant === "dotted" ? [theme.space.xs, theme.space.xs] : [1, 0],
+    dashArrayY: [theme.borderWidth, theme.space.xs],
+    rotation: variant === "hatched" ? -Math.PI / 4 : 0,
+  }
+}
+
+export function expandablePaint(paint: string, fraction: number, horizontal: boolean) {
+  const low = (1 - fraction) / 2
+  const high = 1 - low
+  const clear = chartAlpha(paint, 0)
+  return new graphic.LinearGradient(0, 0, horizontal ? 0 : 1, horizontal ? 1 : 0, [
+    { offset: 0, color: clear }, { offset: low, color: clear },
+    { offset: low, color: paint }, { offset: high, color: paint },
+    { offset: high, color: clear }, { offset: 1, color: clear },
+  ])
+}
+
+export function barPaint(theme: EChartTheme, colors: string[], variant: ChartVariant, horizontal: boolean, capFraction = theme.space.xs / theme.space.axis) {
+  if (variant === "expandable") return expandablePaint(colors[0], theme.opacity.soft, horizontal)
+  if (variant === "gradient") return new graphic.LinearGradient(0, 0, horizontal ? 1 : 0, horizontal ? 0 : 1, [
+    { offset: 0, color: colors[0] }, { offset: 1, color: chartAlpha(colors.at(-1)!, theme.opacity.soft) },
+  ])
+  if (variant === "duotone" || variant === "duotone-reverse" || variant === "stripped") {
+    const muted = chartAlpha(colors[0], theme.opacity.area)
+    const reverse = variant === "duotone-reverse" || (variant === "stripped" && horizontal)
+    const first = reverse ? muted : colors[0]
+    const second = reverse ? colors[0] : muted
+    const split = variant === "stripped" ? horizontal ? 1 - capFraction : capFraction : 0.5
+    return new graphic.LinearGradient(0, 0, horizontal ? 1 : 0, horizontal ? 0 : 1, [
+      { offset: 0, color: first }, { offset: split, color: first },
+      { offset: split, color: second }, { offset: 1, color: second },
+    ])
+  }
+  return chartGradient(colors, !horizontal)
+}

package/registry/components/chart-options.parts.ts

@@ -0,0 +1,72 @@
+import type { EChartsOption, LegendComponentOption, TooltipComponentOption } from "echarts"
+import type { EChartTheme } from "./echart-theme"
+import { chartAlpha } from "./chart-options.paint"
+import { chartColor, chartNumber, chartSeries, type ChartDotStyle, type ChartSpec } from "./chart-options.types"
+
+export function dotItemStyle(theme: EChartTheme, paint: string, style: ChartDotStyle = "default") {
+  return {
+    color: style === "colored-border" ? theme.surface : paint,
+    borderColor: style === "border" ? theme.surface : paint,
+    borderWidth: style === "border" ? theme.lineWidth : style === "colored-border" ? theme.borderWidth : 0,
+  }
+}
+
+function escapeHtml(value: string) {
+  return value.replace(/[&<>"']/g, (character) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[character]!)
+}
+
+/** Read the original row so split forecast series don't duplicate or hide tooltip values. */
+export function cartesianTooltip(theme: EChartTheme, spec: ChartSpec): NonNullable<TooltipComponentOption["formatter"]> {
+  const entries = chartSeries(spec)
+  return (params) => {
+    const point = Array.isArray(params) ? params[0] : params
+    const row = spec.data[point.dataIndex]
+    if (!row) return ""
+    const title = escapeHtml(String(row[spec.categoryKey ?? "name"] ?? ""))
+    const rows = entries.map((entry) => {
+      const value = chartNumber(row[entry.key])
+      return `<div>${escapeHtml(entry.label ?? entry.key)}: <span style="font-weight:${theme.mediumWeight}">${value === null ? "—" : value.toLocaleString()}</span></div>`
+    })
+    return `<div>${title}</div>${rows.join("")}`
+  }
+}
+
+function styleLegend(theme: EChartTheme, spec: ChartSpec, legend: LegendComponentOption): LegendComponentOption {
+  const variant = spec.legendIndicator ?? "rounded-square"
+  const all = chartSeries(spec)
+  const data = legend.data ?? (spec.family === "pie" || spec.family === "radial"
+    ? spec.data.map((row) => String(row[spec.categoryKey ?? "name"] ?? ""))
+    : all.map((series) => series.label ?? series.key))
+  const outlined = variant.endsWith("outline")
+  const icon = variant.startsWith("circle") ? "circle" : variant.startsWith("rounded") ? "roundRect" : "rect"
+  return {
+    ...legend, icon, align: theme.rtl ? "right" : "left",
+    itemWidth: variant === "vertical-bar" ? theme.space.xs : variant === "horizontal-bar" ? theme.space.lg : theme.space.md,
+    itemHeight: variant === "horizontal-bar" ? theme.space.xs : variant === "vertical-bar" ? theme.space.lg : theme.space.md,
+    data: data.map((item, index) => {
+      const paint = chartColor(theme, all[index]?.colorIndex ?? index)
+      return { ...(typeof item === "string" ? { name: item } : item), icon, itemStyle: { color: outlined ? theme.surface : paint, borderColor: paint, borderWidth: outlined ? theme.borderWidth : 0 } }
+    }),
+  }
+}
+
+export function styleChartParts(theme: EChartTheme, spec: ChartSpec, option: EChartsOption): EChartsOption {
+  const originalTooltip = !Array.isArray(option.tooltip) ? option.tooltip ?? {} : {}
+  const tooltip: TooltipComponentOption = {
+    ...originalTooltip,
+    backgroundColor: spec.tooltipSurface === "translucent" ? chartAlpha(theme.surface, theme.translucentOpacity ?? theme.opacity.muted) : theme.surface,
+    borderColor: theme.border, borderWidth: theme.borderWidth,
+    borderRadius: theme.radii?.[spec.tooltipRadius ?? "lg"] ?? theme.radius,
+    textStyle: { color: theme.foreground, fontFamily: theme.fontFamily, fontSize: theme.fontSize, fontWeight: theme.fontWeight, lineHeight: theme.lineHeight },
+    axisPointer: { ...originalTooltip.axisPointer, show: spec.tooltipCursor !== false },
+  }
+  if (spec.tooltipPosition === "fixed") {
+    tooltip.position = (point, _params, _element, _rect, size) => [Math.max(0, Math.min(point[0] - size.contentSize[0] / 2, size.viewSize[0] - size.contentSize[0])), theme.space.lg]
+  }
+  return {
+    ...option, tooltip,
+    legend: Array.isArray(option.legend)
+      ? option.legend.map((legend) => styleLegend(theme, spec, legend))
+      : option.legend ? styleLegend(theme, spec, option.legend) : undefined,
+  }
+}

package/registry/components/chart-options.radial.ts

@@ -0,0 +1,109 @@
+import type { EChartsOption } from "echarts"
+import type { BarSeriesOption, PieSeriesOption, RadarSeriesOption } from "echarts/charts"
+import type { EChartTheme } from "./echart-theme"
+import { chartAlpha, chartGradient, seriesColors } from "./chart-options.paint"
+import { chartColor, chartNumber, chartSeries, type ChartSpec } from "./chart-options.types"
+import { dotItemStyle } from "./chart-options.parts"
+
+function labelStyle(theme: EChartTheme) {
+  return { color: theme.foreground, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize, fontWeight: theme.mediumWeight, lineHeight: theme.lineHeight }
+}
+
+export function pieOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  const entry = chartSeries(spec)[0]
+  const category = spec.categoryKey ?? "name"
+  const donut = ["donut", "padded", "petal"].includes(spec.variant ?? "")
+  const data = spec.data.flatMap((row, index) => {
+    const value = chartNumber(row[entry.key])
+    if (value === null || value < 0) return []
+    const colors = entry.colorIndices?.length
+      ? [chartColor(theme, index), chartColor(theme, index + 1)]
+      : [chartColor(theme, index + (entry.colorIndex ?? 0))]
+    return [{ name: String(row[category] ?? ""), value, itemStyle: { color: chartGradient(colors) } }]
+  })
+  const series: PieSeriesOption = {
+    id: entry.key, type: "pie", data,
+    radius: [donut ? "48%" : "0%", spec.labels === "outside" ? "58%" : "74%"],
+    center: ["50%", "50%"],
+    padAngle: spec.variant === "padded" ? theme.borderWidth * 2 : 0,
+    itemStyle: {
+      borderRadius: spec.variant === "petal" || spec.variant === "padded" ? theme.markRadius : 0,
+      borderColor: theme.surface,
+      borderWidth: spec.variant === "petal" ? theme.space.xs : spec.variant === "padded" ? theme.borderWidth : 0,
+    },
+    selectedMode: "single", selectedOffset: theme.space.md,
+    emphasis: { scale: true, scaleSize: theme.space.xs, label: labelStyle(theme) },
+    label: { ...labelStyle(theme), show: spec.labels === "inside" || spec.labels === "outside", position: spec.labels === "inside" ? "inside" : "outside", formatter: spec.labels === "inside" ? "{d}%" : "{b}", backgroundColor: spec.labels === "inside" ? theme.surface : undefined, padding: spec.labels === "inside" ? theme.space.xs : 0, borderRadius: theme.radius },
+    labelLine: { show: spec.labels === "outside", lineStyle: { color: theme.border, width: theme.borderWidth }, length: theme.space.md, length2: theme.space.md },
+  }
+  return { legend: { show: spec.legend !== false, bottom: 0 }, tooltip: { trigger: "item" }, series: [series] }
+}
+
+export function radialOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  const entry = chartSeries(spec)[0]
+  const rows = spec.data.filter((row) => chartNumber(row[entry.key]) !== null && Number(row[entry.key]) >= 0)
+  const categories = rows.map((row) => String(row[spec.categoryKey ?? "name"] ?? ""))
+  const max = spec.max && spec.max > 0 ? spec.max : Math.max(1, ...rows.map((row) => Number(row[entry.key])))
+  const semi = spec.variant === "semi"
+  const series: BarSeriesOption[] = rows.map((row, index) => ({
+    id: `${entry.key}-${index}`, name: categories[index], type: "bar", coordinateSystem: "polar", polarIndex: 0,
+    data: [{ name: categories[index], value: [Number(row[entry.key]), index] }],
+    encode: { angle: 0, radius: 1 },
+    // Every series occupies a different category. Sharing the stack keeps ECharts
+    // from allocating a progressively smaller grouped bar band to each ring.
+    stack: "rings", barWidth: theme.space.lg, roundCap: true,
+    showBackground: false, z: 3,
+    itemStyle: { color: chartGradient(entry.colorIndices?.length ? [chartColor(theme, index), chartColor(theme, index + 1)] : [chartColor(theme, index + (entry.colorIndex ?? 0))]) },
+    emphasis: { focus: "series" },
+    selectedMode: "single",
+    label: { ...labelStyle(theme), show: spec.labels === "inside", position: "middle", backgroundColor: theme.surface, padding: theme.space.xs, borderRadius: theme.radius },
+  }))
+  // Native polar backgrounds always draw 360 degrees. A second identical polar
+  // gives the explicit track its own bar band and respects the semi-circle sweep.
+  series.push({
+    id: "ring-tracks", type: "bar", coordinateSystem: "polar", polarIndex: 1,
+    data: rows.map((_row, index) => ({ value: [max, index] })), encode: { angle: 0, radius: 1 },
+    barWidth: theme.space.lg, roundCap: true, silent: true, animation: false,
+    itemStyle: { color: theme.neutral }, emphasis: { disabled: true },
+    tooltip: { show: false }, z: 1,
+  })
+  return {
+    polar: [0, 1].map(() => ({ radius: ["28%", "78%"], center: ["50%", semi ? "68%" : "46%"] })),
+    angleAxis: [0, 1].map((polarIndex) => ({ polarIndex, type: "value", min: 0, max, startAngle: semi ? 180 : 90, endAngle: semi ? 0 : -270, clockwise: true, show: false })),
+    radiusAxis: [0, 1].map((polarIndex) => ({ polarIndex, type: "category", data: categories, inverse: true, show: false })),
+    legend: { show: spec.legend !== false, bottom: 0, data: categories },
+    tooltip: { trigger: "item", valueFormatter: (value) => String(Array.isArray(value) ? value[0] : value) },
+    series,
+  }
+}
+
+export function radarOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  const all = chartSeries(spec)
+  const max = spec.max && spec.max > 0 ? spec.max : Math.max(1, ...spec.data.flatMap((row) => all.map((entry) => chartNumber(row[entry.key]) ?? 0)))
+  const series: RadarSeriesOption[] = all.flatMap((entry, index) => {
+    const values = spec.data.map((row) => chartNumber(row[entry.key]))
+    if (values.some((value) => value === null)) return []
+    const colors = seriesColors(theme, entry, index)
+    return [{
+      id: entry.key, name: entry.label ?? entry.key, type: "radar",
+      data: [{ name: entry.label ?? entry.key, value: values as number[] }],
+      lineStyle: { color: chartGradient(colors), width: theme.lineWidth },
+      areaStyle: entry.variant === "lines" || spec.variant === "lines" ? { opacity: 0 } : { color: chartGradient(colors.map((paint) => chartAlpha(paint, theme.opacity.area))), opacity: 1 },
+      symbol: entry.dots || entry.dotStyle ? "circle" : "none", symbolSize: entry.dotStyle === "border" ? theme.space.md : theme.space.sm,
+      itemStyle: dotItemStyle(theme, colors[0], entry.dotStyle),
+      emphasis: { focus: "self", itemStyle: dotItemStyle(theme, colors[0], entry.activeDotStyle ?? entry.dotStyle) },
+    }]
+  })
+  return {
+    radar: {
+      indicator: spec.data.map((row) => ({ name: String(row[spec.categoryKey ?? "name"] ?? ""), max })),
+      shape: spec.grid === "circle" ? "circle" : "polygon", radius: "65%",
+      axisName: { color: theme.muted, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize },
+      axisLine: { lineStyle: { color: theme.border, width: theme.borderWidth } },
+      splitLine: { lineStyle: { color: theme.border, width: theme.borderWidth } },
+      splitArea: { show: false },
+    },
+    legend: { show: spec.legend !== false, bottom: 0, data: all.map((entry) => entry.label ?? entry.key) },
+    tooltip: { trigger: "item" }, series,
+  }
+}

package/registry/components/chart-options.ts

@@ -0,0 +1,44 @@
+import type { EChartsOption } from "echarts"
+import type { EChartTheme } from "./echart-theme"
+import { cartesianOption } from "./chart-options.cartesian"
+import { pieOption, radarOption, radialOption } from "./chart-options.radial"
+import { chartColor, chartNumber, type ChartSpec } from "./chart-options.types"
+import { styleChartParts } from "./chart-options.parts"
+
+export type { ChartCurve, ChartDatum, ChartDotStyle, ChartFamily, ChartLegendIndicator, ChartSeries, ChartSpec, ChartStroke, ChartVariant } from "./chart-options.types"
+
+/** Build native ECharts options using only resolved Banhaten tokens. */
+export function createChartOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  return styleChartParts(theme, spec, createFamilyOption(theme, spec))
+}
+
+function createFamilyOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  if (["area", "line", "bar", "composed"].includes(spec.family)) return cartesianOption(theme, spec)
+  if (spec.family === "pie") return pieOption(theme, spec)
+  if (spec.family === "radial") return radialOption(theme, spec)
+  if (spec.family === "radar") return radarOption(theme, spec)
+  const nodes = spec.nodes ?? spec.data.map((row) => ({ name: String(row[spec.categoryKey ?? "name"] ?? "") }))
+  const names = new Set(nodes.map((node) => node.name))
+  const resolveName = (value: string | number) => typeof value === "number" ? nodes[value]?.name : value
+  const links = (spec.links ?? []).flatMap((link) => {
+    const source = resolveName(link.source)
+    const target = resolveName(link.target)
+    const value = chartNumber(link.value)
+    return source && target && names.has(source) && names.has(target) && value !== null && value > 0
+      ? [{ source, target, value }]
+      : []
+  })
+  return {
+    tooltip: { trigger: "item" },
+    series: [{
+      id: "flow", type: "sankey", orient: spec.horizontal === false ? "vertical" : "horizontal",
+      left: theme.space.lg, right: theme.space.axis * 2, top: theme.space.lg, bottom: theme.space.lg,
+      data: nodes.map((node, index) => ({ name: node.name, itemStyle: { color: chartColor(theme, "colorIndex" in node ? Number(node.colorIndex) : index), borderWidth: 0 } })),
+      links, nodeWidth: spec.labels === "inside" ? theme.space.axis * 2 : theme.space.lg,
+      nodeGap: theme.space.xl, draggable: false,
+      lineStyle: { color: spec.variant === "solid" ? theme.palette[0] : spec.variant === "target" ? "target" : spec.variant === "gradient" ? "gradient" : "source", opacity: theme.opacity.area, curveness: 0.5 },
+      emphasis: { focus: "adjacency", lineStyle: { opacity: theme.opacity.muted } },
+      label: { show: spec.labels !== "none", position: spec.labels === "inside" ? "inside" : "right", color: theme.foreground, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize, fontWeight: theme.fontWeight, distance: theme.space.sm, backgroundColor: spec.labels === "inside" ? theme.surface : undefined, padding: spec.labels === "inside" ? theme.space.xs : 0, borderRadius: theme.radius },
+    }],
+  }
+}