@squadbase/vantage 0.6.2-dev1.9d91dda → 0.6.2-dev1.ac99e02

package/registry/ui/area-chart.tsx

@@ -0,0 +1,1015 @@
+// Copied by `vantage add ui area-chart`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/area-chart.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * AreaChart — a typed area chart over `EChart`: pass rows, the x-axis key
+ * (`index`) and the series keys (`categories`) instead of an ECharts option.
+ * Colours default to the `--chart-1..5` tokens and follow light/dark. Reach
+ * for `EChart` itself only when the option needs something this API lacks.
+ */
+import { forwardRef, useMemo } from "react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { EChart } from "@squadbase/vantage/components"
+import { useEffect, useState } from "react"
+import type { ChartColor, ValueFormatter } from "@squadbase/vantage/components"
+import { useRef } from "react"
+import type { EChartsOption } from "@squadbase/vantage/components"
+import type { ChartEventPayload } from "@squadbase/vantage/components"
+
+/* ---------- inlined from src/components/chart-theme.ts (internal to @squadbase/vantage) ---------- */
+
+/** Series palette, in order. Missing tokens are skipped, not defaulted. */
+const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
+
+interface ChartTokens {
+  /** Resolved `--chart-1..5`, in order. */
+  series: string[]
+  /** Body text: titles and the default `textStyle`. */
+  foreground: string | null
+  /** Secondary text: axis labels, legend, subtitles. */
+  mutedForeground: string | null
+  /** Axis lines, ticks, split lines, tooltip border. */
+  border: string | null
+  /** Tooltip surface. */
+  popover: string | null
+  /** Tooltip text. */
+  popoverForeground: string | null
+}
+
+let normalizeContext: CanvasRenderingContext2D | null | undefined
+
+/** The forms `fillStyle` serializes legacy colours to, and zrender can parse. */
+const ZRENDER_COLOR_RE = /^(?:#[0-9a-f]{6}|rgba?\()/i
+
+/**
+ * Serialize a CSS colour into a canvas-safe form, or `null` if the browser
+ * rejects it. Assigning an invalid value to `fillStyle` is a no-op, so the same
+ * input is written over two different known colours: agreeing results mean the
+ * value parsed, differing ones mean it was dropped.
+ */
+function toCanvasColor(value: string): string | null {
+  const raw = value.trim()
+  if (!raw) return null
+  if (normalizeContext === undefined) {
+    const canvas = document.createElement("canvas")
+    canvas.width = 1
+    canvas.height = 1
+    normalizeContext = canvas.getContext("2d", { willReadFrequently: true })
+  }
+  const ctx = normalizeContext
+  if (!ctx) return raw
+  ctx.fillStyle = "#000000"
+  ctx.fillStyle = raw
+  const onBlack = ctx.fillStyle
+  ctx.fillStyle = "#ffffff"
+  ctx.fillStyle = raw
+  if (onBlack !== ctx.fillStyle || typeof onBlack !== "string") return null
+  if (ZRENDER_COLOR_RE.test(onBlack)) return onBlack
+  // Still `oklch()` / `lab()` / `color(...)`: paint it and read the pixel back.
+  // Wide-gamut colours clip to sRGB, which is all zrender can express anyway.
+  ctx.clearRect(0, 0, 1, 1)
+  ctx.fillRect(0, 0, 1, 1)
+  const [r = 0, g = 0, b = 0, a = 0] = ctx.getImageData(0, 0, 1, 1).data
+  return a === 255
+    ? `rgb(${r}, ${g}, ${b})`
+    : `rgba(${r}, ${g}, ${b}, ${Math.round((a / 255) * 1000) / 1000})`
+}
+
+/**
+ * Read the chart tokens off `el` (the document root by default — tokens live on
+ * `:root` and inherit). Returns `null` outside the browser so callers fall back
+ * to plain ECharts defaults.
+ */
+function readChartTokens(el?: Element | null): ChartTokens | null {
+  if (typeof document === "undefined") return null
+  const target = el ?? document.documentElement
+  if (!target) return null
+  const styles = getComputedStyle(target)
+  const read = (name: string) => toCanvasColor(styles.getPropertyValue(name))
+  const series: string[] = []
+  for (const token of SERIES_TOKENS) {
+    const color = read(token)
+    if (color) series.push(color)
+  }
+  return {
+    series,
+    foreground: read("--foreground"),
+    mutedForeground: read("--muted-foreground"),
+    border: read("--border"),
+    popover: read("--popover"),
+    popoverForeground: read("--popover-foreground"),
+  }
+}
+
+/** Structural equality, so a theme toggle that changes nothing doesn't re-init. */
+function sameChartTokens(a: ChartTokens | null, b: ChartTokens | null): boolean {
+  if (a === b) return true
+  if (!a || !b) return false
+  return (
+    a.series.length === b.series.length &&
+    a.series.every((color, i) => color === b.series[i]) &&
+    a.foreground === b.foreground &&
+    a.mutedForeground === b.mutedForeground &&
+    a.border === b.border &&
+    a.popover === b.popover &&
+    a.popoverForeground === b.popoverForeground
+  )
+}
+
+/**
+ * Watch everything that can change the resolved tokens and call `onChange` when
+ * something might have. It only ever says "re-read" — the caller compares with
+ * `sameChartTokens` and decides whether anything actually moved. Returns a
+ * disposer.
+ *
+ * Two sources, not one:
+ *  - light/dark flips, which land as `class` / `data-theme` (or an inline
+ *    `style`) on `<html>`/`<body>`, or as an OS preference change
+ *  - stylesheet changes. In dev, editing `styles.css` rewrites the injected
+ *    `<style>` in `<head>` and touches nothing else, so watching the theme
+ *    attributes alone leaves the chart painted in the previous palette until a
+ *    reload — the tokens in the DOM are new, the canvas is not.
+ */
+function watchChartTokens(onChange: () => void): () => void {
+  if (typeof document === "undefined") return () => {}
+  // Style edits arrive as bursts of mutations; coalesce them into one read, and
+  // take it after the next frame so a swapped stylesheet has been applied.
+  let frame = 0
+  const schedule = () => {
+    if (frame) return
+    frame = requestAnimationFrame(() => {
+      frame = 0
+      onChange()
+    })
+  }
+
+  const themeObserver = new MutationObserver(schedule)
+  const attributeFilter = ["class", "style", "data-theme"]
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter })
+  if (document.body) themeObserver.observe(document.body, { attributes: true, attributeFilter })
+
+  const styleObserver = new MutationObserver(schedule)
+  if (document.head) {
+    styleObserver.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["href", "media", "disabled"],
+    })
+  }
+
+  // A swapped `<link>` only applies once the sheet has loaded, after its mutation.
+  const onLoad = (event: Event) => {
+    if (event.target instanceof HTMLLinkElement) schedule()
+  }
+  document.addEventListener("load", onLoad, true)
+
+  const media = window.matchMedia("(prefers-color-scheme: dark)")
+  media.addEventListener("change", schedule)
+
+  return () => {
+    if (frame) cancelAnimationFrame(frame)
+    themeObserver.disconnect()
+    styleObserver.disconnect()
+    document.removeEventListener("load", onLoad, true)
+    media.removeEventListener("change", schedule)
+  }
+}
+
+/** Shared shape for the four axis types ECharts themes address separately. */
+function axisTheme(tokens: ChartTokens, splitLine: boolean) {
+  const line = tokens.border ?? undefined
+  return {
+    axisLine: { show: true, lineStyle: { color: line } },
+    axisTick: { show: true, lineStyle: { color: line } },
+    axisLabel: { show: true, color: tokens.mutedForeground ?? undefined },
+    splitLine: { show: splitLine, lineStyle: { color: line ? [line] : undefined } },
+    splitArea: { show: false },
+  }
+}
+
+/**
+ * Build the ECharts theme. `option.color` still wins over `theme.color`, so an
+ * app that sets its own palette keeps it.
+ */
+function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
+  const text = tokens.foreground ?? undefined
+  const muted = tokens.mutedForeground ?? undefined
+  const line = tokens.border ?? undefined
+  return {
+    // Let the page background show through: charts sit on cards, not on a canvas.
+    backgroundColor: "transparent",
+    ...(tokens.series.length > 0 ? { color: tokens.series } : {}),
+    textStyle: { color: text },
+    title: { textStyle: { color: text }, subtextStyle: { color: muted } },
+    legend: { textStyle: { color: muted } },
+    categoryAxis: axisTheme(tokens, false),
+    valueAxis: axisTheme(tokens, true),
+    logAxis: axisTheme(tokens, true),
+    timeAxis: axisTheme(tokens, true),
+    tooltip: {
+      backgroundColor: tokens.popover ?? undefined,
+      borderColor: line,
+      borderWidth: 1,
+      textStyle: { color: tokens.popoverForeground ?? undefined },
+      axisPointer: { lineStyle: { color: line }, crossStyle: { color: line } },
+    },
+  }
+}
+
+/**
+ * The resolved tokens, kept current: re-read whenever `watchChartTokens` says
+ * they may have moved, and only replaced when a value actually changed. For
+ * components that build an ECharts option from token colours themselves (the
+ * typed charts), so their palette follows light/dark like `EChart`'s theme.
+ */
+function useChartTokens(): ChartTokens | null {
+  const [tokens, setTokens] = useState<ChartTokens | null>(() => readChartTokens())
+  useEffect(() => {
+    const sync = () => {
+      setTokens((prev) => {
+        const next = readChartTokens()
+        return sameChartTokens(prev, next) ? prev : next
+      })
+    }
+    sync()
+    return watchChartTokens(sync)
+  }, [])
+  return tokens
+}
+
+const SERIES_TOKEN_NAME_RE = /^chart-([1-5])$/
+const CSS_VAR_RE = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/
+
+/**
+ * Turn chart colours into canvas-safe strings. `"chart-1"`〜`"chart-5"` come from
+ * the resolved series tokens; `var(--token)` is read off the document root; any
+ * other CSS colour is normalized like the tokens are. A colour that can't be
+ * resolved comes back as `""`, which ECharts treats as "use the palette".
+ */
+function resolveChartColors(colors: readonly string[], tokens: ChartTokens | null): string[] {
+  return colors.map((color) => {
+    const token = SERIES_TOKEN_NAME_RE.exec(color.trim())
+    if (token) return tokens?.series[Number(token[1]) - 1] ?? ""
+    if (typeof document === "undefined") return color
+    let value = color.trim()
+    const cssVar = CSS_VAR_RE.exec(value)
+    if (cssVar) {
+      const styles = getComputedStyle(document.documentElement)
+      value = styles.getPropertyValue(cssVar[1]!).trim() || (cssVar[2] ?? "").trim()
+    }
+    return toCanvasColor(value) ?? ""
+  })
+}
+
+/* ---------- inlined from src/components/chart-utils.ts (internal to @squadbase/vantage) ---------- */
+
+/** The series tokens, in palette order — the default `colors` of every typed chart. */
+const DEFAULT_CHART_COLORS: readonly ChartColor[] = [
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+]
+
+const TOKEN_NAME_RE = /^chart-[1-5]$/
+
+/**
+ * A chart colour as a CSS value: `"chart-2"` → `var(--chart-2)` (so it follows
+ * light/dark on its own), anything else passes through unchanged.
+ */
+function chartColorToCss(color: ChartColor): string {
+  const value = color.trim()
+  return TOKEN_NAME_RE.test(value) ? `var(--${value})` : value
+}
+
+/** The `i`-th colour, cycling through `colors` (the token palette when empty). */
+function chartColorAt(colors: readonly ChartColor[] | undefined, i: number): ChartColor {
+  const palette = colors && colors.length > 0 ? colors : DEFAULT_CHART_COLORS
+  return palette[i % palette.length]!
+}
+
+/** `colors` extended (by cycling) to exactly `count` entries. */
+function chartColorsFor(colors: readonly ChartColor[] | undefined, count: number): ChartColor[] {
+  return Array.from({ length: count }, (_, i) => chartColorAt(colors, i))
+}
+
+/** A translucent version of a CSS colour (works for `var(--…)` too). */
+function tintCss(cssColor: string, percent: number): string {
+  return `color-mix(in oklab, ${cssColor} ${percent}%, transparent)`
+}
+
+const numberFormat = new Intl.NumberFormat("ja-JP", { maximumFractionDigits: 2 })
+
+/** Default `valueFormatter`: grouped digits, up to two decimals (`1,234.5`). */
+const defaultValueFormatter: ValueFormatter = (value) => numberFormat.format(value)
+
+/**
+ * A data cell as a number, or `null` for a gap. Numeric strings count — SQL
+ * `DECIMAL` / `BIGINT` columns usually arrive as strings.
+ */
+function toChartNumber(value: unknown): number | null {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null
+  if (typeof value === "bigint") return Number(value)
+  if (typeof value === "string" && value.trim() !== "") {
+    const n = Number(value)
+    return Number.isFinite(n) ? n : null
+  }
+  return null
+}
+
+/** Clamp `value` into `[min, max]`. */
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value))
+}
+
+/* ---------------------------------------------------------------- BarList */
+
+type BarListSortOrder = "ascending" | "descending" | "none"
+
+/** Sort a copy of the rows by value; `"none"` keeps the given order. */
+function sortBarListData<T extends { value: number }>(data: readonly T[], sortOrder: BarListSortOrder): T[] {
+  const rows = [...data]
+  if (sortOrder === "ascending") rows.sort((a, b) => a.value - b.value)
+  else if (sortOrder === "descending") rows.sort((a, b) => b.value - a.value)
+  return rows
+}
+
+/** Bar widths in percent of the largest value (at least a sliver for non-zero values). */
+function barListWidths(values: readonly number[]): number[] {
+  const max = Math.max(0, ...values)
+  if (max === 0) return values.map(() => 0)
+  return values.map((v) => (v <= 0 ? 0 : Math.max(1, (v / max) * 100)))
+}
+
+/* ------------------------------------------------------------ CategoryBar */
+
+interface CategoryBarSegment {
+  /** Width in percent of the whole bar. */
+  width: number
+  /** Where the segment starts, in percent. */
+  start: number
+  /** The running total at the segment's end — what its right-hand label shows. */
+  end: number
+}
+
+/** Lay the values side by side; negative values count as zero. */
+function categoryBarSegments(values: readonly number[]): CategoryBarSegment[] {
+  const clean = values.map((v) => (Number.isFinite(v) && v > 0 ? v : 0))
+  const total = clean.reduce((sum, v) => sum + v, 0)
+  let running = 0
+  return clean.map((v) => {
+    const start = total === 0 ? 0 : (running / total) * 100
+    running += v
+    return { width: total === 0 ? 0 : (v / total) * 100, start, end: running }
+  })
+}
+
+interface CategoryBarLabel {
+  /** Position in percent of the bar. */
+  position: number
+  /** The running total printed there. */
+  value: number
+}
+
+/**
+ * Tick labels under the bar: `0` at the start, then the running total at each
+ * segment's end. A label closer than `minGap` percent to the one before is
+ * dropped so narrow segments don't print on top of each other — except the
+ * last one (the total), which replaces its neighbour instead.
+ */
+function categoryBarLabels(values: readonly number[], minGap = 8): CategoryBarLabel[] {
+  const segments = categoryBarSegments(values).filter((s) => s.width > 0)
+  if (segments.length === 0) return []
+  const labels: CategoryBarLabel[] = [{ position: 0, value: 0 }]
+  segments.forEach((s, i) => {
+    const label = { position: s.start + s.width, value: s.end }
+    const prev = labels[labels.length - 1]!
+    if (label.position - prev.position >= minGap) labels.push(label)
+    else if (i === segments.length - 1 && labels.length > 1) labels[labels.length - 1] = label
+  })
+  return labels
+}
+
+/** Marker position in percent of the bar, clamped to its ends. */
+function categoryBarMarkerPosition(value: number, values: readonly number[]): number {
+  const total = values.reduce((sum, v) => sum + (Number.isFinite(v) && v > 0 ? v : 0), 0)
+  if (total === 0) return 0
+  return clamp((value / total) * 100, 0, 100)
+}
+
+/** Index of the segment the marker sits on (the last one for a value past the end). */
+function categoryBarMarkerSegment(value: number, values: readonly number[]): number {
+  const segments = categoryBarSegments(values)
+  const index = segments.findIndex((s) => s.width > 0 && value <= s.end)
+  if (index !== -1) return index
+  for (let i = segments.length - 1; i >= 0; i--) if (segments[i]!.width > 0) return i
+  return 0
+}
+
+/* --------------------------------------------------------- ProgressCircle */
+
+interface ProgressCircleGeometry {
+  /** SVG width/height. */
+  size: number
+  /** Radius of the stroke's centre line. */
+  normalizedRadius: number
+  circumference: number
+  /** `stroke-dashoffset` for the value arc. */
+  offset: number
+  /** The value as a fraction of `max`, clamped to `[0, 1]`. */
+  ratio: number
+}
+
+function progressCircleGeometry(
+  value: number,
+  max: number,
+  radius: number,
+  strokeWidth: number,
+): ProgressCircleGeometry {
+  const ratio = max > 0 && Number.isFinite(value) ? clamp(value / max, 0, 1) : 0
+  const normalizedRadius = Math.max(0, radius - strokeWidth / 2)
+  const circumference = 2 * Math.PI * normalizedRadius
+  return { size: radius * 2, normalizedRadius, circumference, offset: circumference * (1 - ratio), ratio }
+}
+
+/* ---------- inlined from src/components/chart-options.ts (internal to @squadbase/vantage) ---------- */
+
+type CartesianChartKind = "area" | "bar" | "line"
+type CartesianStackType = "default" | "stacked" | "percent"
+type CartesianCurveType = "linear" | "smooth" | "step"
+type AreaFill = "gradient" | "solid" | "none"
+type BarLayout = "horizontal" | "vertical"
+
+/** Props every cartesian typed chart (Area / Bar / Line) shares. */
+interface CartesianChartBaseProps {
+  /** 行の配列。1 行 = x 軸の 1 点。数値の列は number か数値文字列(SQL の DECIMAL など)。 */
+  data: Record<string, unknown>[]
+  /** x 軸(カテゴリ軸)に使う列名。 */
+  index: string
+  /** 系列として描く列名。並び順が凡例と配色の順になる。 */
+  categories: string[]
+  /** 系列色。`"chart-1"`〜`"chart-5"` か CSS カラー。省略時はテーマのトークン順。足りなければ繰り返す。 */
+  colors?: ChartColor[]
+  /** 軸目盛りとツールチップの数値の書式。 */
+  valueFormatter?: ValueFormatter
+  /** 凡例を出す。既定 `true`。 */
+  showLegend?: boolean
+  /** ホバー時のツールチップを出す。既定 `true`。 */
+  showTooltip?: boolean
+  /** 値軸の目盛り線を出す。既定 `true`。 */
+  showGridLines?: boolean
+  showXAxis?: boolean
+  showYAxis?: boolean
+  /** x 軸のラベルを最初と最後だけにする。 */
+  startEndOnly?: boolean
+  /** y 軸ラベルの幅(px)。並べた複数グラフのプロット領域を揃えたいときに固定する。 */
+  yAxisWidth?: number
+  minValue?: number
+  maxValue?: number
+  /** 値軸を 0 からではなくデータの範囲に合わせる。 */
+  autoMinValue?: boolean
+  /** `false` で値軸の目盛りを整数に限る。 */
+  allowDecimals?: boolean
+  xAxisLabel?: string
+  yAxisLabel?: string
+  /**
+   * 点(棒)のクリックで呼ばれる。クリックした行に `eventType` / `categoryClicked` を
+   * 足して渡し、同じ点をもう一度クリックすると `null`。渡すと選択以外が薄くなる。
+   */
+  onValueChange?: (value: ChartEventPayload) => void
+  /** 高さ。数値は px。省略時は `h-80`(320px)で、`className` の高さクラスが勝つ。 */
+  height?: string | number
+  loading?: boolean
+  ariaLabel?: string
+  className?: string
+}
+
+/** The point a user clicked, used to dim everything else. */
+interface ChartActivePoint {
+  category: string
+  index: number
+}
+
+interface CartesianChartConfig {
+  kind: CartesianChartKind
+  data: readonly Record<string, unknown>[]
+  index: string
+  categories: readonly string[]
+  /** Resolved series colours, by category position. `""`/missing → theme palette. */
+  palette: readonly string[]
+  valueFormatter: (value: number) => string
+  type?: CartesianStackType
+  /** Bar only. `"vertical"` lays the categories down the y axis (horizontal bars). */
+  layout?: BarLayout
+  curveType?: CartesianCurveType
+  fill?: AreaFill
+  connectNulls?: boolean
+  showLegend?: boolean
+  showTooltip?: boolean
+  showGridLines?: boolean
+  showXAxis?: boolean
+  showYAxis?: boolean
+  startEndOnly?: boolean
+  yAxisWidth?: number
+  minValue?: number
+  maxValue?: number
+  autoMinValue?: boolean
+  allowDecimals?: boolean
+  xAxisLabel?: string
+  yAxisLabel?: string
+  barCategoryGap?: string | number
+  /** Always draw the line/area points (needed to click them). */
+  showDots?: boolean
+  active?: ChartActivePoint | null
+}
+
+/** Same coercion as `toChartNumber` in chart-utils (kept local: inlined modules can't import each other). */
+function cellNumber(value: unknown): number | null {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null
+  if (typeof value === "bigint") return Number(value)
+  if (typeof value === "string" && value.trim() !== "") {
+    const n = Number(value)
+    return Number.isFinite(n) ? n : null
+  }
+  return null
+}
+
+/**
+ * Series values per category. `"percent"` turns each row into shares of that
+ * row's total (0–100); a row whose total is 0 stays at 0.
+ */
+function cartesianSeriesValues(
+  data: readonly Record<string, unknown>[],
+  categories: readonly string[],
+  type: CartesianStackType = "default",
+): (number | null)[][] {
+  const raw = categories.map((category) => data.map((row) => cellNumber(row[category])))
+  if (type !== "percent") return raw
+  return raw.map((values) =>
+    values.map((value, i) => {
+      if (value === null) return null
+      const total = categories.reduce((sum, _, k) => sum + Math.abs(raw[k]![i] ?? 0), 0)
+      return total === 0 ? 0 : (Math.abs(value) / total) * 100
+    }),
+  )
+}
+
+/** A colour with alpha, for gradient stops. Understands `#rgb`, `#rrggbb`, `rgb()`/`rgba()`. */
+function withAlpha(color: string, alpha: number): string {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim())
+  if (hex) {
+    const h = hex[1]!
+    const full = h.length === 3 ? h.replace(/./g, (c) => c + c) : h
+    const n = Number.parseInt(full, 16)
+    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(color.trim())
+  if (rgb) return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`
+  return color
+}
+
+const HTML_ESCAPES: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }
+
+function escapeHtml(value: string): string {
+  return value.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c]!)
+}
+
+interface TooltipRow {
+  name: string
+  color: string
+  value: number | null
+}
+
+/** The tooltip body: a title, then one `● name  value` row per series. */
+function tooltipHtml(title: string, rows: readonly TooltipRow[], valueFormatter: (value: number) => string): string {
+  const lines = rows.map(
+    (row) =>
+      `<div style="display:flex;align-items:center;gap:8px;line-height:20px">` +
+      `<span style="display:inline-block;width:8px;height:8px;border-radius:9999px;background:${escapeHtml(row.color)}"></span>` +
+      `<span style="flex:1;opacity:.8">${escapeHtml(row.name)}</span>` +
+      `<span style="font-weight:500;font-variant-numeric:tabular-nums;margin-left:12px">${
+        row.value === null ? "–" : escapeHtml(valueFormatter(row.value))
+      }</span></div>`,
+  )
+  return `<div style="font-weight:500;margin-bottom:4px">${escapeHtml(title)}</div>${lines.join("")}`
+}
+
+interface AxisTooltipParam {
+  seriesName?: string
+  dataIndex?: number
+  color?: unknown
+}
+
+const DIMMED = 0.3
+
+function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
+  const {
+    kind,
+    data,
+    index,
+    categories,
+    palette,
+    valueFormatter,
+    type = "default",
+    layout = "horizontal",
+    curveType = "linear",
+    fill = "gradient",
+    connectNulls = false,
+    showLegend = true,
+    showTooltip = true,
+    showGridLines = true,
+    showXAxis = true,
+    showYAxis = true,
+    startEndOnly = false,
+    yAxisWidth,
+    minValue,
+    maxValue,
+    autoMinValue = false,
+    allowDecimals = true,
+    xAxisLabel,
+    yAxisLabel,
+    barCategoryGap,
+    showDots = false,
+    active = null,
+  } = cfg
+
+  const labels = data.map((row) => String(row[index] ?? ""))
+  const values = cartesianSeriesValues(data, categories, kind === "line" ? "default" : type)
+  const stacked = kind !== "line" && type !== "default"
+  const percent = kind !== "line" && type === "percent"
+  const horizontalBars = kind === "bar" && layout === "vertical"
+  const last = labels.length - 1
+
+  const series = categories.map((category, c) => {
+    const color = palette[c] || undefined
+    const dimSeries = active !== null && active.category !== category
+    if (kind === "bar") {
+      const radius = stacked ? 0 : horizontalBars ? [0, 3, 3, 0] : [3, 3, 0, 0]
+      return {
+        type: "bar" as const,
+        name: category,
+        stack: stacked ? "total" : undefined,
+        barCategoryGap,
+        itemStyle: { color, borderRadius: radius },
+        emphasis: { focus: "series" as const },
+        data: values[c]!.map((value, i) =>
+          active !== null && !(active.category === category && active.index === i)
+            ? { value, itemStyle: { opacity: DIMMED } }
+            : value,
+        ),
+      }
+    }
+    const areaStyle =
+      kind !== "area" || fill === "none"
+        ? undefined
+        : fill === "solid" || !color
+          ? { opacity: fill === "solid" ? 0.3 : 0.2 }
+          : {
+              color: {
+                type: "linear" as const,
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: withAlpha(color, 0.35) },
+                  { offset: 1, color: withAlpha(color, 0) },
+                ],
+              },
+            }
+    return {
+      type: "line" as const,
+      name: category,
+      stack: stacked ? "total" : undefined,
+      smooth: curveType === "smooth",
+      step: curveType === "step" ? ("middle" as const) : undefined,
+      connectNulls,
+      symbol: "circle",
+      symbolSize: 6,
+      showSymbol: showDots || labels.length === 1,
+      lineStyle: { width: 2, color, opacity: dimSeries ? DIMMED : 1 },
+      itemStyle: { color, opacity: dimSeries ? DIMMED : 1 },
+      areaStyle: areaStyle && dimSeries ? { ...areaStyle, opacity: DIMMED * 0.3 } : areaStyle,
+      emphasis: { focus: "series" as const },
+      data: values[c]!,
+    }
+  })
+
+  const categoryAxis = {
+    type: "category" as const,
+    data: labels,
+    show: horizontalBars ? showYAxis : showXAxis,
+    boundaryGap: kind === "bar",
+    inverse: horizontalBars,
+    axisTick: { show: false },
+    axisLabel: {
+      hideOverlap: true,
+      interval: startEndOnly ? (i: number) => i === 0 || i === last : ("auto" as const),
+      ...(horizontalBars && yAxisWidth != null ? { width: yAxisWidth, overflow: "truncate" as const } : {}),
+    },
+    name: horizontalBars ? yAxisLabel : xAxisLabel,
+    nameLocation: "middle" as const,
+    nameGap: horizontalBars ? (yAxisWidth ?? 48) + 8 : 28,
+  }
+  const valueAxis = {
+    type: "value" as const,
+    show: horizontalBars ? showXAxis : showYAxis,
+    min: percent ? 0 : minValue,
+    max: percent ? 100 : maxValue,
+    scale: autoMinValue && minValue == null,
+    minInterval: allowDecimals ? undefined : 1,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: showGridLines },
+    axisLabel: {
+      formatter: percent ? (v: number) => `${v}%` : (v: number) => valueFormatter(v),
+      ...(!horizontalBars && yAxisWidth != null ? { width: yAxisWidth, overflow: "truncate" as const } : {}),
+    },
+    name: horizontalBars ? xAxisLabel : yAxisLabel,
+    nameLocation: "middle" as const,
+    nameGap: horizontalBars ? 28 : (yAxisWidth ?? 48) + 8,
+  }
+
+  return {
+    animationDuration: 400,
+    legend: {
+      show: showLegend,
+      top: 0,
+      right: 0,
+      type: "scroll",
+      icon: "circle",
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 16,
+    },
+    grid: {
+      top: showLegend ? 36 : 12,
+      // Lines start and end on the outermost ticks, so the last label hangs past the plot.
+      right: kind === "bar" ? 12 : 24,
+      bottom: xAxisLabel ? 24 : 4,
+      left: yAxisLabel ? 24 : 4,
+      containLabel: true,
+    },
+    tooltip: {
+      show: showTooltip,
+      trigger: "axis",
+      axisPointer: { type: kind === "bar" ? "shadow" : "line" },
+      formatter: (params: unknown) => {
+        const list = (Array.isArray(params) ? params : [params]) as AxisTooltipParam[]
+        const i = list[0]?.dataIndex ?? 0
+        const row = data[i] ?? {}
+        return tooltipHtml(
+          String(row[index] ?? ""),
+          list.map((p) => ({
+            name: p.seriesName ?? "",
+            color: typeof p.color === "string" ? p.color : "currentColor",
+            value: cellNumber(row[p.seriesName ?? ""]),
+          })),
+          valueFormatter,
+        )
+      },
+    },
+    xAxis: horizontalBars ? valueAxis : categoryAxis,
+    yAxis: horizontalBars ? categoryAxis : valueAxis,
+    series,
+  } as EChartsOption
+}
+
+/* ------------------------------------------------------------------ donut */
+
+type DonutVariant = "donut" | "pie"
+
+interface DonutChartConfig {
+  data: readonly Record<string, unknown>[]
+  category: string
+  value: string
+  /** Resolved slice colours, by row position. `""`/missing → theme palette. */
+  palette: readonly string[]
+  valueFormatter: (value: number) => string
+  variant?: DonutVariant
+  showTooltip?: boolean
+  active?: string | null
+}
+
+/** Sum of the `value` column, ignoring gaps and negative cells. */
+function donutTotal(data: readonly Record<string, unknown>[], value: string): number {
+  return data.reduce((sum, row) => {
+    const n = cellNumber(row[value])
+    return n !== null && n > 0 ? sum + n : sum
+  }, 0)
+}
+
+interface ItemTooltipParam {
+  name?: string
+  value?: unknown
+  percent?: number
+  color?: unknown
+}
+
+function buildDonutOption(cfg: DonutChartConfig): EChartsOption {
+  const { data, category, value, palette, valueFormatter, variant = "donut", showTooltip = true, active = null } = cfg
+  return {
+    animationDuration: 400,
+    tooltip: {
+      show: showTooltip,
+      trigger: "item",
+      formatter: (params: unknown) => {
+        const p = params as ItemTooltipParam
+        const n = cellNumber(p.value)
+        const share = typeof p.percent === "number" ? ` (${p.percent.toFixed(1)}%)` : ""
+        return tooltipHtml(
+          `${p.name ?? ""}${share}`,
+          [{ name: value, color: typeof p.color === "string" ? p.color : "currentColor", value: n }],
+          valueFormatter,
+        )
+      },
+    },
+    series: [
+      {
+        type: "pie",
+        radius: variant === "donut" ? ["72%", "100%"] : [0, "100%"],
+        center: ["50%", "50%"],
+        avoidLabelOverlap: true,
+        label: { show: false },
+        labelLine: { show: false },
+        // A hairline gap between slices instead of a border — no background colour to match.
+        padAngle: data.length > 1 ? 1 : 0,
+        itemStyle: { borderRadius: variant === "donut" ? 2 : 0 },
+        emphasis: { scale: true, scaleSize: 4 },
+        data: data.map((row, i) => {
+          const name = String(row[category] ?? "")
+          const color = palette[i] || undefined
+          const n = cellNumber(row[value])
+          return {
+            name,
+            value: n !== null && n > 0 ? n : 0,
+            itemStyle: { color, opacity: active !== null && active !== name ? DIMMED : 1 },
+          }
+        }),
+      },
+    ],
+  } as EChartsOption
+}
+
+/* -------------------------------------------------------------- selection */
+
+/** Toggle: clicking the active point again clears the selection. */
+function nextChartSelection(
+  current: ChartActivePoint | null,
+  category: string,
+  index: number,
+): ChartActivePoint | null {
+  return current && current.category === category && current.index === index ? null : { category, index }
+}
+
+/** What `onValueChange` receives: the clicked row plus what was clicked (ours win over row keys). */
+function chartSelectionPayload(
+  selection: ChartActivePoint | null,
+  data: readonly Record<string, unknown>[],
+  eventType: NonNullable<ChartEventPayload>["eventType"],
+): ChartEventPayload {
+  if (!selection) return null
+  return { ...data[selection.index], eventType, categoryClicked: selection.category }
+}
+
+interface ChartClickParams {
+  componentType?: string
+  seriesName?: string
+  name?: string
+  dataIndex?: number
+}
+
+/**
+ * Click-to-select for the typed charts: the `onEvents` to hand `EChart`, and
+ * the active point to dim the rest with. Inert (no handler, nothing active)
+ * without `onValueChange`.
+ */
+function useChartSelection(
+  data: readonly Record<string, unknown>[],
+  onValueChange: ((value: ChartEventPayload) => void) | undefined,
+  eventType: NonNullable<ChartEventPayload>["eventType"],
+): { active: ChartActivePoint | null; onEvents: Record<string, (params: unknown) => void> | undefined } {
+  const [active, setActive] = useState<ChartActivePoint | null>(null)
+  // Handlers read the latest props without re-subscribing on every render.
+  const latest = useRef({ data, onValueChange, active })
+  latest.current = { data, onValueChange, active }
+  const interactive = onValueChange !== undefined
+  const onEvents = useMemo(() => {
+    if (!interactive) return undefined
+    return {
+      click: (raw: unknown) => {
+        const p = raw as ChartClickParams
+        if (p.componentType !== "series" || typeof p.dataIndex !== "number") return
+        const category = eventType === "slice" ? (p.name ?? "") : (p.seriesName ?? "")
+        const next = nextChartSelection(latest.current.active, category, p.dataIndex)
+        latest.current.active = next
+        setActive(next)
+        latest.current.onValueChange?.(chartSelectionPayload(next, latest.current.data, eventType))
+      },
+    }
+  }, [interactive, eventType])
+  return { active: interactive ? active : null, onEvents }
+}
+
+/* ---------- end of inlined code ---------- */
+
+export interface AreaChartProps extends CartesianChartBaseProps {
+  /** `"stacked"` は積み上げ、`"percent"` は各点の合計を 100% にした積み上げ。既定 `"default"`。 */
+  type?: CartesianStackType
+  /** 線の形。既定 `"linear"`。 */
+  curveType?: CartesianCurveType
+  /** 面の塗り。既定 `"gradient"`。 */
+  fill?: AreaFill
+  /** 値の欠けた点(`null` など)をまたいで線をつなぐ。既定 `false`。 */
+  connectNulls?: boolean
+}
+
+export const AreaChart = forwardRef<HTMLDivElement, AreaChartProps>(function AreaChart(
+  {
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter = defaultValueFormatter,
+    type = "default",
+    curveType = "linear",
+    fill = "gradient",
+    connectNulls = false,
+    showLegend = true,
+    showTooltip = true,
+    showGridLines = true,
+    showXAxis = true,
+    showYAxis = true,
+    startEndOnly = false,
+    yAxisWidth,
+    minValue,
+    maxValue,
+    autoMinValue = false,
+    allowDecimals = true,
+    xAxisLabel,
+    yAxisLabel,
+    onValueChange,
+    height,
+    loading,
+    ariaLabel,
+    className,
+  },
+  ref,
+) {
+  const tokens = useChartTokens()
+  const palette = useMemo(
+    () => resolveChartColors(chartColorsFor(colors, categories.length), tokens),
+    [colors, categories.length, tokens],
+  )
+  const { active, onEvents } = useChartSelection(data, onValueChange, "dot")
+  const option = useMemo(
+    () =>
+      buildCartesianOption({
+        kind: "area",
+        data,
+        index,
+        categories,
+        palette,
+        valueFormatter,
+        type,
+        curveType,
+        fill,
+        connectNulls,
+        showLegend,
+        showTooltip,
+        showGridLines,
+        showXAxis,
+        showYAxis,
+        startEndOnly,
+        yAxisWidth,
+        minValue,
+        maxValue,
+        autoMinValue,
+        allowDecimals,
+        xAxisLabel,
+        yAxisLabel,
+        showDots: onValueChange !== undefined,
+        active,
+      }),
+    [
+      data, index, categories, palette, valueFormatter, type, curveType, fill, connectNulls,
+      showLegend, showTooltip, showGridLines, showXAxis, showYAxis, startEndOnly, yAxisWidth,
+      minValue, maxValue, autoMinValue, allowDecimals, xAxisLabel, yAxisLabel, onValueChange, active,
+    ],
+  )
+  return (
+    <EChart
+      ref={ref}
+      option={option}
+      onEvents={onEvents}
+      height={height}
+      loading={loading}
+      ariaLabel={ariaLabel ?? `${categories.join("・")}の面グラフ`}
+      className={cn("h-80", className)}
+    />
+  )
+})
+AreaChart.displayName = "AreaChart"