@spatika/react 1.1.0 → 1.3.0

package/src/composites/chart-composition.tsx

@@ -0,0 +1,898 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { Download, Maximize2, Move, SquareDashedMousePointer, ZoomIn, ZoomOut } from "lucide-react";
+import { cn } from "../lib/cn";
+import { exportChart } from "../lib/chart-export";
+import {
+  DEFAULT_CHART_MARGIN,
+  DEFAULT_ZOOM,
+  applyZoom,
+  areaPath,
+  axisDataFromDataset,
+  bandScale,
+  chartColor,
+  clampZoom,
+  extent,
+  formatAxisValue,
+  formatChartNumber,
+  inferScaleType,
+  linePath,
+  linearScale,
+  markOpacity,
+  niceTicks,
+  panZoom,
+  plotBox,
+  pointScale,
+  rangeAreaPath,
+  roundedRectPath,
+  seriesDataFromDataset,
+  stackSeries,
+  wheelZoom,
+  zoomFromBrush,
+  type ChartAxisConfig,
+  type ChartCurve,
+  type ChartDataset,
+  type ChartInteraction,
+  type ChartMargin,
+  type ChartZoom,
+  type HighlightScope,
+  type PlotBox,
+} from "../lib/charts";
+import { IconButton } from "../primitives/IconButton";
+import {
+  CartesianGrid,
+  CategoryAxis,
+  ChartLegend,
+  ChartTooltip,
+  ValueAxis,
+  categoryLabels,
+  formatSeriesValue,
+  resolveMargin,
+  seriesMeta,
+  type ChartHover,
+} from "./chart-ui";
+
+export type ComposedSeriesType = "bar" | "line" | "area" | "scatter";
+
+export type ComposedSeries = {
+  id?: string;
+  type?: ComposedSeriesType;
+  label?: string;
+  color?: string;
+  data?: Array<number | null>;
+  dataKey?: string;
+  stack?: string;
+  yAxisId?: string;
+  curve?: ChartCurve;
+  showMark?: boolean;
+  area?: boolean;
+  scatter?: Array<{ x: number; y: number; id?: string | number }>;
+};
+
+type ResolvedSeries = {
+  id: string;
+  type: ComposedSeriesType;
+  label: string;
+  color: string;
+  data: Array<number | null>;
+  stack?: string;
+  yAxisId?: string;
+  curve: ChartCurve;
+  showMark: boolean;
+  scatter?: Array<{ x: number; y: number; id?: string | number }>;
+};
+
+export type HighlightedItem = { seriesId: string; dataIndex: number } | null;
+
+type ChartContextValue = {
+  slot: string;
+  width: number;
+  height: number;
+  margin: Required<ChartMargin>;
+  plot: PlotBox;
+  categories: Array<string | number | Date>;
+  series: ResolvedSeries[];
+  hidden: Set<string>;
+  toggleSeries: (id: string) => void;
+  xAt: (index: number) => number;
+  yAt: (value: number, yAxisId?: string) => number;
+  bandwidth: number;
+  ticksLeft: number[];
+  ticksRight: number[];
+  rightAxis: ChartAxisConfig | undefined;
+  leftAxis: ChartAxisConfig | undefined;
+  xAxis?: ChartAxisConfig;
+  hideGrid?: boolean;
+  stacked: boolean;
+  barGapRatio: number;
+  borderRadius: number;
+  zoom: ChartZoom;
+  setZoom: (zoom: ChartZoom) => void;
+  resetZoom: () => void;
+  zoomEnabled: boolean;
+  interaction: ChartInteraction;
+  setInteraction: (next: ChartInteraction) => void;
+  highlightScope: HighlightScope;
+  highlighted: HighlightedItem;
+  setHighlighted: (item: HighlightedItem) => void;
+  hover: ChartHover;
+  setHover: (hover: ChartHover) => void;
+  svgRef: RefObject<SVGSVGElement | null>;
+  clipPathId: string;
+  locale?: string;
+  animated: boolean;
+  brush: { x0: number; x1: number } | null;
+  setBrush: (brush: { x0: number; x1: number } | null) => void;
+  exportChart: (format: "svg" | "png") => Promise<void>;
+};
+
+const ChartContext = createContext<ChartContextValue | null>(null);
+
+export function useChartContext(): ChartContextValue {
+  const value = useContext(ChartContext);
+  if (!value) throw new Error("Chart composition components must be used inside ChartContainer");
+  return value;
+}
+
+function useOptionalChartContext() {
+  return useContext(ChartContext);
+}
+
+export type ChartContainerProps = {
+  slot?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  margin?: ChartMargin;
+  dataset?: ChartDataset;
+  xAxis?: ChartAxisConfig[];
+  yAxis?: ChartAxisConfig[];
+  series: ComposedSeries[];
+  colors?: string[];
+  hideLegend?: boolean;
+  hideGrid?: boolean;
+  stacked?: boolean;
+  barGapRatio?: number;
+  borderRadius?: number;
+  zoom?: boolean | ChartZoom;
+  defaultZoom?: ChartZoom;
+  onZoomChange?: (zoom: ChartZoom) => void;
+  showToolbar?: boolean;
+  highlightScope?: HighlightScope;
+  selected?: HighlightedItem;
+  animated?: boolean;
+  locale?: string;
+  children?: ReactNode;
+  "aria-label"?: string;
+};
+
+function useElementSize(ref: RefObject<HTMLElement | null>, fallbackWidth: number, fallbackHeight: number) {
+  const [size, setSize] = useState({ width: fallbackWidth, height: fallbackHeight });
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const apply = () =>
+      setSize({
+        width: el.clientWidth || fallbackWidth,
+        height: el.clientHeight || fallbackHeight,
+      });
+    apply();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(apply);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fallbackHeight, fallbackWidth, ref]);
+  return size;
+}
+
+function resolveSeries(series: ComposedSeries[], dataset: ChartDataset | undefined, colors?: string[]): ResolvedSeries[] {
+  return series.map((item, index) => {
+    const data =
+      item.data ??
+      (dataset && item.dataKey ? seriesDataFromDataset(dataset, item.dataKey) : []);
+    const type: ComposedSeriesType = item.type ?? (item.area ? "area" : "bar");
+    return {
+      id: item.id ?? item.label ?? item.dataKey ?? `series-${index}`,
+      type,
+      label: item.label ?? item.dataKey ?? item.id ?? `Series ${index + 1}`,
+      color: item.color ?? chartColor(index, colors),
+      data,
+      stack: item.stack,
+      yAxisId: item.yAxisId,
+      curve: item.curve ?? "monotone",
+      showMark: item.showMark ?? type !== "bar",
+      scatter: item.scatter,
+    };
+  });
+}
+
+function numericDomain(series: ResolvedSeries[], stacked: boolean, axis?: ChartAxisConfig): [number, number] {
+  if (axis?.min != null && axis?.max != null) return [axis.min, axis.max];
+  const values: number[] = [];
+  const subset = series.filter((item) => (item.yAxisId ?? "left") === (axis?.id ?? item.yAxisId ?? "left") || !axis?.id);
+  const relevant = axis?.id ? series.filter((item) => (item.yAxisId ?? leftId(axis)) === axis.id) : series;
+  const used = relevant.length ? relevant : subset;
+  if (stacked) {
+    for (const kind of ["bar", "area"] as const) {
+      const group = used.filter((item) => item.type === kind);
+      if (!group.length) continue;
+      const stacks = stackSeries(group.map((item) => item.data.map((v) => v ?? 0)));
+      for (const segs of stacks) for (const seg of segs) values.push(seg.start, seg.end);
+    }
+    for (const item of used) {
+      if (item.type === "bar" || item.type === "area") continue;
+      if (item.scatter) for (const p of item.scatter) values.push(p.y);
+      else for (const value of item.data) if (value != null) values.push(value);
+    }
+  } else {
+    for (const item of used) {
+      if (item.scatter) for (const p of item.scatter) values.push(p.y);
+      else for (const value of item.data) if (value != null) values.push(value);
+    }
+  }
+  if (!values.length) values.push(0, 1);
+  if (Math.min(...values) > 0) values.push(0);
+  const [min, max] = extent(values, 0.04);
+  return [axis?.min ?? min, axis?.max ?? max];
+}
+
+function leftId(axis?: ChartAxisConfig) {
+  return axis?.id ?? "left";
+}
+
+export function ChartContainer({
+  slot = "chart-container",
+  className,
+  width,
+  height = 280,
+  margin,
+  dataset,
+  xAxis,
+  yAxis,
+  series,
+  colors,
+  hideLegend,
+  hideGrid,
+  stacked = false,
+  barGapRatio = 0.15,
+  borderRadius = 6,
+  zoom,
+  defaultZoom,
+  onZoomChange,
+  showToolbar,
+  highlightScope = "item",
+  selected,
+  animated = true,
+  locale,
+  children,
+  "aria-label": ariaLabel,
+}: ChartContainerProps) {
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+  const clipPathId = `spk-chart-clip-${useId().replace(/:/g, "")}`;
+  const measured = useElementSize(surfaceRef, width ?? 320, height);
+  const plotWidth = width ?? measured.width;
+  const hasRight = yAxis?.some((axis) => axis.position === "right");
+  const m = resolveMargin(
+    margin ?? (hasRight ? { ...DEFAULT_CHART_MARGIN, right: 48 } : undefined),
+  );
+  const resolved = useMemo(() => resolveSeries(series, dataset, colors), [series, dataset, colors]);
+  const xConfig = xAxis?.[0];
+  const categories = useMemo(() => {
+    if (dataset && xConfig?.dataKey) return axisDataFromDataset(dataset, xConfig.dataKey);
+    return categoryLabels(xConfig, resolved[0]?.data.length ?? resolved[0]?.scatter?.length ?? 0);
+  }, [dataset, xConfig, resolved]);
+  const leftAxis = yAxis?.find((axis) => (axis.position ?? "left") === "left") ?? yAxis?.[0];
+  const rightAxis = yAxis?.find((axis) => axis.position === "right");
+  const [hidden, setHidden] = useState<Set<string>>(new Set());
+  const toggleSeries = (id: string) => {
+    setHidden((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const zoomEnabled = zoom === true || typeof zoom === "object";
+  const controlledZoom = typeof zoom === "object" ? zoom : undefined;
+  const [innerZoom, setInnerZoom] = useState<ChartZoom>(defaultZoom ?? DEFAULT_ZOOM);
+  const currentZoom = clampZoom(controlledZoom ?? innerZoom);
+  const setZoom = (next: ChartZoom) => {
+    const clamped = clampZoom(next);
+    if (!controlledZoom) setInnerZoom(clamped);
+    onZoomChange?.(clamped);
+  };
+  const resetZoom = () => setZoom(DEFAULT_ZOOM);
+  const [interaction, setInteraction] = useState<ChartInteraction>("none");
+  const [highlighted, setHighlighted] = useState<HighlightedItem>(null);
+  const [hover, setHover] = useState<ChartHover>(null);
+  const [brush, setBrush] = useState<{ x0: number; x1: number } | null>(null);
+  const activeHighlight = selected ?? highlighted;
+
+  const plot = plotBox(plotWidth, height, m);
+  const visible = resolved.filter((item) => !hidden.has(item.id));
+  const leftSeries = visible.filter((item) => !item.yAxisId || item.yAxisId === (leftAxis?.id ?? item.yAxisId));
+  const rightSeries = visible.filter((item) => rightAxis && item.yAxisId === rightAxis.id);
+  const leftDomain = numericDomain(leftSeries.length ? leftSeries : visible, stacked, leftAxis);
+  const rightDomain = rightAxis ? numericDomain(rightSeries.length ? rightSeries : visible, false, rightAxis) : leftDomain;
+  const ticksLeft = niceTicks(leftDomain[0], leftDomain[1], 5);
+  const ticksRight = niceTicks(rightDomain[0], rightDomain[1], 5);
+  const scaleType = xConfig?.scaleType ?? inferScaleType(xConfig?.data ?? categories);
+  const yLeft = linearScale(leftDomain, [plot.bottom, plot.top]);
+  const yRight = linearScale(rightDomain, [plot.bottom, plot.top]);
+
+  const { xAt, bandwidth } = useMemo(() => {
+    let xAtInner = (index: number) =>
+      plot.left + plot.iw * (categories.length <= 1 ? 0.5 : index / (categories.length - 1));
+    let bw = 0;
+    if (scaleType === "band" || scaleType === undefined) {
+      const scale = bandScale(categories.map(String), [plot.left, plot.right], 0.24);
+      xAtInner = (index) => scale(String(categories[index]));
+      bw = scale.bandwidth;
+    } else if (scaleType === "point") {
+      const scale = pointScale(categories.map(String), [plot.left, plot.right]);
+      xAtInner = (index) => scale(String(categories[index]));
+    } else if (xConfig?.data?.every((v) => typeof v === "number" || v instanceof Date)) {
+      const xs = xConfig.data.map((v) => (v instanceof Date ? v.getTime() : Number(v)));
+      const [min, max] = extent(xs);
+      const scale = linearScale([min, max], [plot.left, plot.right]);
+      xAtInner = (index) => scale(xs[index] ?? min);
+    }
+    const zoomX = (index: number) => applyZoom(xAtInner(index), plot.left, plot.iw, currentZoom.x);
+    return { xAt: zoomX, bandwidth: bw / (currentZoom.x[1] - currentZoom.x[0] || 1) };
+  }, [categories, currentZoom.x, plot.iw, plot.left, plot.right, scaleType, xConfig?.data]);
+
+  const yAt = useCallback(
+    (value: number, yAxisId?: string) => {
+      const raw = yAxisId && rightAxis && yAxisId === rightAxis.id ? yRight(value) : yLeft(value);
+      if (!currentZoom.y) return raw;
+      return applyZoom(raw, plot.top, plot.ih, currentZoom.y);
+    },
+    [currentZoom.y, plot.ih, plot.top, rightAxis, yLeft, yRight],
+  );
+
+  const doExport = useCallback(
+    async (format: "svg" | "png") => {
+      await exportChart(svgRef.current, format);
+    },
+    [],
+  );
+
+  const ctx: ChartContextValue = {
+    slot,
+    width: plotWidth,
+    height,
+    margin: m,
+    plot,
+    categories,
+    series: resolved,
+    hidden,
+    toggleSeries,
+    xAt,
+    yAt,
+    bandwidth,
+    ticksLeft,
+    ticksRight,
+    rightAxis,
+    leftAxis,
+    xAxis: xConfig,
+    hideGrid,
+    stacked,
+    barGapRatio,
+    borderRadius,
+    zoom: currentZoom,
+    setZoom,
+    resetZoom,
+    zoomEnabled,
+    interaction,
+    setInteraction,
+    highlightScope,
+    highlighted: activeHighlight,
+    setHighlighted,
+    hover,
+    setHover,
+    svgRef,
+    clipPathId,
+    locale,
+    animated,
+    brush,
+    setBrush,
+    exportChart: doExport,
+  };
+
+  const legend = seriesMeta(resolved, colors);
+  const label =
+    ariaLabel ??
+    `Chart of ${resolved.map((item) => item.label).join(", ")}`;
+
+  return (
+    <ChartContext.Provider value={ctx}>
+      <div
+        data-slot={slot}
+        className={cn("spk-chart", animated && "spk-chart--animated", className)}
+        role="img"
+        aria-label={label}
+      >
+        {showToolbar ? <ChartsToolbar /> : null}
+        {hideLegend ? null : (
+          <ChartLegend items={legend} hiddenIds={hidden} onToggle={toggleSeries} />
+        )}
+        <div ref={surfaceRef} className="spk-chart-surface" style={{ height }}>
+          {plotWidth > 0 ? children ?? <DefaultChartSurface /> : null}
+          <ChartTooltip hover={hover} boundsWidth={plotWidth} />
+        </div>
+        <ChartA11yTable />
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+function DefaultChartSurface() {
+  const { rightAxis } = useChartContext();
+  return (
+    <ChartSurface>
+      <ChartsGrid />
+      <BarPlot />
+      <AreaPlot />
+      <LinePlot />
+      <ScatterPlot />
+      <ChartsXAxis />
+      <ChartsYAxis />
+      {rightAxis ? <ChartsYAxis position="right" /> : null}
+      <ChartsBrush />
+    </ChartSurface>
+  );
+}
+
+export function ChartSurface({ children, className }: { children?: ReactNode; className?: string }) {
+  const ctx = useChartContext();
+  const drag = useRef<{ x: number; y: number; zoom: ChartZoom } | null>(null);
+  const { plot, zoomEnabled, interaction, setZoom, zoom, setBrush, setHover, setHighlighted, svgRef } = ctx;
+
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg || !zoomEnabled) return;
+    const onWheelNative = (event: WheelEvent) => {
+      event.preventDefault();
+      const bounds = svg.getBoundingClientRect();
+      const x = event.clientX - bounds.left;
+      const anchor = (x - plot.left) / plot.iw;
+      const factor = event.deltaY > 0 ? 1.12 : 1 / 1.12;
+      setZoom(wheelZoom(zoom, clamp01(anchor), factor));
+    };
+    svg.addEventListener("wheel", onWheelNative, { passive: false });
+    return () => svg.removeEventListener("wheel", onWheelNative);
+  }, [plot.iw, plot.left, setZoom, svgRef, zoom, zoomEnabled]);
+
+  const onPointerDown = (event: ReactPointerEvent<SVGSVGElement>) => {
+    if (!zoomEnabled) return;
+    const svg = event.currentTarget;
+    const bounds = svg.getBoundingClientRect();
+    const x = event.clientX - bounds.left;
+    const y = event.clientY - bounds.top;
+    if (x < plot.left || x > plot.right || y < plot.top || y > plot.bottom) return;
+    svg.setPointerCapture(event.pointerId);
+    if (interaction === "brush") {
+      setBrush({ x0: x, x1: x });
+      return;
+    }
+    if (interaction === "pan" || event.shiftKey) {
+      drag.current = { x, y, zoom };
+    }
+  };
+
+  const onPointerMove = (event: ReactPointerEvent<SVGSVGElement>) => {
+    const svg = event.currentTarget;
+    const bounds = svg.getBoundingClientRect();
+    const x = event.clientX - bounds.left;
+    if (ctx.brush) {
+      setBrush({ x0: ctx.brush.x0, x1: x });
+      return;
+    }
+    if (!drag.current) return;
+    const dx = (x - drag.current.x) / plot.iw;
+    setZoom(panZoom(drag.current.zoom, dx));
+  };
+
+  const onPointerUp = () => {
+    if (ctx.brush) {
+      const next = zoomFromBrush(ctx.brush.x0, ctx.brush.x1, plot.left, plot.iw, zoom);
+      setZoom(next);
+      setBrush(null);
+    }
+    drag.current = null;
+  };
+
+  return (
+    <svg
+      ref={ctx.svgRef}
+      className={className}
+      width={ctx.width}
+      height={ctx.height}
+      viewBox={`0 0 ${ctx.width} ${ctx.height}`}
+      data-slot="chart-surface"
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onMouseLeave={() => {
+        setHover(null);
+        setHighlighted(null);
+      }}
+    >
+      <defs>
+        <clipPath id={ctx.clipPathId}>
+          <rect x={plot.left} y={plot.top} width={plot.iw} height={plot.ih} />
+        </clipPath>
+      </defs>
+      {children}
+    </svg>
+  );
+}
+
+function clamp01(value: number) {
+  return Math.min(1, Math.max(0, value));
+}
+
+export function ChartsGrid() {
+  const { hideGrid, ticksLeft, yAt, plot } = useChartContext();
+  if (hideGrid) return null;
+  return (
+    <CartesianGrid
+      ticks={ticksLeft}
+      scale={(value) => yAt(value)}
+      left={plot.left}
+      right={plot.right}
+      top={plot.top}
+      bottom={plot.bottom}
+    />
+  );
+}
+
+export function ChartsXAxis() {
+  const { xAxis, categories, xAt, plot } = useChartContext();
+  if (xAxis?.hide) return null;
+  return <CategoryAxis labels={categories} position={xAt} y={plot.bottom} />;
+}
+
+export function ChartsYAxis({ position = "left" }: { position?: "left" | "right" }) {
+  const { ticksLeft, ticksRight, yAt, plot, leftAxis, rightAxis, locale } = useChartContext();
+  if (position === "right") {
+    if (!rightAxis || rightAxis.hide) return null;
+    return (
+      <g data-slot="chart-y-axis-right">
+        {ticksRight.map((tick) => (
+          <text
+            key={tick}
+            className="spk-chart-tick"
+            x={plot.right + 8}
+            y={yAt(tick, rightAxis.id)}
+            dominantBaseline="middle"
+          >
+            {formatChartNumber(tick, locale)}
+          </text>
+        ))}
+      </g>
+    );
+  }
+  if (leftAxis?.hide) return null;
+  return <ValueAxis ticks={ticksLeft} scale={(value) => yAt(value, leftAxis?.id)} left={plot.left} />;
+}
+
+function PlotClip({ children, slot }: { children: ReactNode; slot: string }) {
+  const { clipPathId } = useChartContext();
+  return (
+    <g data-slot={slot} clipPath={`url(#${clipPathId})`}>
+      {children}
+    </g>
+  );
+}
+
+export function BarPlot() {
+  const ctx = useChartContext();
+  const bars = ctx.series.filter((item) => item.type === "bar" && !ctx.hidden.has(item.id));
+  if (!bars.length) return null;
+  const stacks = ctx.stacked ? stackSeries(bars.map((item) => item.data.map((v) => v ?? 0))) : null;
+  const n = ctx.stacked ? 1 : Math.max(bars.length, 1);
+  const gap = n > 1 ? ctx.bandwidth * ctx.barGapRatio : 0;
+  const barW = (ctx.bandwidth - gap * (n - 1)) / n;
+  const zero = ctx.yAt(0);
+  return (
+    <PlotClip slot="bar-plot">
+      {bars.map((item, s) =>
+        item.data.map((value, i) => {
+          if (value == null) return null;
+          let x = ctx.xAt(i);
+          let y1: number;
+          let y2: number;
+          if (stacks) {
+            const seg = stacks[s]![i]!;
+            y1 = ctx.yAt(seg.end, item.yAxisId);
+            y2 = ctx.yAt(seg.start, item.yAxisId);
+          } else {
+            x = ctx.xAt(i) + s * (barW + gap);
+            y1 = ctx.yAt(value, item.yAxisId);
+            y2 = zero;
+          }
+          const y = Math.min(y1, y2);
+          const h = Math.max(1, Math.abs(y2 - y1));
+          const opacity = markOpacity(ctx.highlightScope, ctx.highlighted, item.id, i);
+          return (
+            <path
+              key={`${item.id}-${i}`}
+              className="spk-chart-mark"
+              d={roundedRectPath(x, y, ctx.stacked ? ctx.bandwidth : barW, h, ctx.borderRadius)}
+              fill={item.color}
+              opacity={opacity}
+              onMouseEnter={(event) => {
+                ctx.setHighlighted({ seriesId: item.id, dataIndex: i });
+                ctx.setHover({
+                  x: event.nativeEvent.offsetX,
+                  y: event.nativeEvent.offsetY,
+                  title: String(ctx.categories[i]),
+                  items: [{ color: item.color, label: item.label, value: formatSeriesValue(value) }],
+                });
+              }}
+              onMouseLeave={() => {
+                ctx.setHighlighted(null);
+                ctx.setHover(null);
+              }}
+            />
+          );
+        }),
+      )}
+    </PlotClip>
+  );
+}
+
+function LineLikePlot({ types, slot }: { types: ComposedSeriesType[]; slot: string }) {
+  const ctx = useChartContext();
+  const items = ctx.series.filter((item) => types.includes(item.type) && !ctx.hidden.has(item.id));
+  if (!items.length) return null;
+  const stackAreas = ctx.stacked && types.includes("area") && items.every((item) => item.type === "area");
+  const stacks = stackAreas ? stackSeries(items.map((item) => item.data.map((v) => v ?? 0))) : null;
+  return (
+    <PlotClip slot={slot}>
+      {items.map((item, s) => {
+        const fill = item.type === "area";
+        const stackedSegs = stacks?.[s];
+        const pts = item.data
+          .map((value, i) => {
+            if (value == null) return null;
+            const yValue = stackedSegs ? stackedSegs[i]!.end : value;
+            return { x: ctx.xAt(i), y: ctx.yAt(yValue, item.yAxisId), value, i };
+          })
+          .filter((p): p is { x: number; y: number; value: number; i: number } => p != null);
+        const baseline = stackedSegs
+          ? pts.map((pt) => ({
+              x: pt.x,
+              y: ctx.yAt(stackedSegs[pt.i]!.start, item.yAxisId),
+            }))
+          : null;
+        const opacity = markOpacity(ctx.highlightScope, ctx.highlighted, item.id);
+        return (
+          <g key={item.id} opacity={opacity}>
+            {fill ? (
+              <path
+                d={
+                  baseline
+                    ? rangeAreaPath(pts, baseline, item.curve)
+                    : areaPath(pts, ctx.plot.bottom, item.curve)
+                }
+                fill={item.color}
+                opacity={baseline ? 0.88 : 0.18}
+                className="spk-chart-mark"
+              />
+            ) : null}
+            <path
+              d={linePath(pts, item.curve)}
+              fill="none"
+              stroke={item.color}
+              strokeWidth={2.25}
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              className="spk-chart-mark"
+            />
+            {item.showMark
+              ? pts.map((pt) => (
+                  <circle
+                    key={pt.i}
+                    cx={pt.x}
+                    cy={pt.y}
+                    r={3.4}
+                    fill={item.color}
+                    className="spk-chart-mark"
+                    onMouseEnter={() => {
+                      ctx.setHighlighted({ seriesId: item.id, dataIndex: pt.i });
+                      ctx.setHover({
+                        x: pt.x,
+                        y: pt.y,
+                        title: String(ctx.categories[pt.i]),
+                        items: [{ color: item.color, label: item.label, value: formatSeriesValue(pt.value) }],
+                      });
+                    }}
+                    onMouseLeave={() => {
+                      ctx.setHighlighted(null);
+                      ctx.setHover(null);
+                    }}
+                  />
+                ))
+              : null}
+          </g>
+        );
+      })}
+    </PlotClip>
+  );
+}
+
+export function LinePlot() {
+  return <LineLikePlot types={["line"]} slot="line-plot" />;
+}
+
+export function AreaPlot() {
+  return <LineLikePlot types={["area"]} slot="area-plot" />;
+}
+
+export function ScatterPlot() {
+  const ctx = useChartContext();
+  const items = ctx.series.filter((item) => item.type === "scatter" && !ctx.hidden.has(item.id));
+  if (!items.length) return null;
+  return (
+    <PlotClip slot="scatter-plot">
+      {items.map((item) => {
+        const points =
+          item.scatter ??
+          item.data
+            .map((value, i) => (value == null ? null : { x: i, y: value, id: i }))
+            .filter((p): p is { x: number; y: number; id: number } => p != null);
+        const xs = points.map((p) => p.x);
+        const xDomain = extent(xs, 0.04);
+        const xScale = linearScale(xDomain, [ctx.plot.left, ctx.plot.right]);
+        return points.map((point, i) => {
+          const cx = applyZoom(xScale(point.x), ctx.plot.left, ctx.plot.iw, ctx.zoom.x);
+          const cy = ctx.yAt(point.y, item.yAxisId);
+          const opacity = markOpacity(ctx.highlightScope, ctx.highlighted, item.id, i);
+          return (
+            <circle
+              key={`${item.id}-${point.id ?? i}`}
+              cx={cx}
+              cy={cy}
+              r={4.5}
+              fill={item.color}
+              opacity={opacity}
+              className="spk-chart-mark"
+              onMouseEnter={(event) => {
+                ctx.setHighlighted({ seriesId: item.id, dataIndex: i });
+                ctx.setHover({
+                  x: event.nativeEvent.offsetX,
+                  y: event.nativeEvent.offsetY,
+                  title: item.label,
+                  items: [
+                    { color: item.color, label: "x", value: formatChartNumber(point.x, ctx.locale) },
+                    { color: item.color, label: "y", value: formatChartNumber(point.y, ctx.locale) },
+                  ],
+                });
+              }}
+              onMouseLeave={() => {
+                ctx.setHighlighted(null);
+                ctx.setHover(null);
+              }}
+            />
+          );
+        });
+      })}
+    </PlotClip>
+  );
+}
+
+export function ChartsBrush() {
+  const { brush, plot } = useChartContext();
+  if (!brush) return null;
+  const x = Math.min(brush.x0, brush.x1);
+  const width = Math.abs(brush.x1 - brush.x0);
+  return (
+    <rect
+      data-slot="chart-brush"
+      className="spk-chart-brush"
+      x={x}
+      y={plot.top}
+      width={width}
+      height={plot.ih}
+    />
+  );
+}
+
+export function ChartsLegend() {
+  const { series, hidden, toggleSeries } = useChartContext();
+  return (
+    <ChartLegend
+      items={series.map((item) => ({ id: item.id, label: item.label, color: item.color }))}
+      hiddenIds={hidden}
+      onToggle={toggleSeries}
+    />
+  );
+}
+
+export function ChartsToolbar({ className }: { className?: string }) {
+  const ctx = useOptionalChartContext();
+  if (!ctx) return null;
+  const zoomIn = () => ctx.setZoom(wheelZoom(ctx.zoom, 0.5, 1 / 1.25));
+  const zoomOut = () => ctx.setZoom(wheelZoom(ctx.zoom, 0.5, 1.25));
+  return (
+    <div className={cn("spk-chart-toolbar", className)} role="toolbar" aria-label="Chart tools">
+      <IconButton size="sm" aria-label="Zoom in" onClick={zoomIn}>
+        <ZoomIn />
+      </IconButton>
+      <IconButton size="sm" aria-label="Zoom out" onClick={zoomOut}>
+        <ZoomOut />
+      </IconButton>
+      <IconButton size="sm" aria-label="Reset zoom" onClick={ctx.resetZoom}>
+        <Maximize2 />
+      </IconButton>
+      <IconButton
+        size="sm"
+        aria-label="Pan"
+        aria-pressed={ctx.interaction === "pan"}
+        data-active={ctx.interaction === "pan" ? "true" : undefined}
+        onClick={() => ctx.setInteraction(ctx.interaction === "pan" ? "none" : "pan")}
+      >
+        <Move />
+      </IconButton>
+      <IconButton
+        size="sm"
+        aria-label="Brush zoom"
+        aria-pressed={ctx.interaction === "brush"}
+        data-active={ctx.interaction === "brush" ? "true" : undefined}
+        onClick={() => ctx.setInteraction(ctx.interaction === "brush" ? "none" : "brush")}
+      >
+        <SquareDashedMousePointer />
+      </IconButton>
+      <IconButton size="sm" aria-label="Export SVG" onClick={() => void ctx.exportChart("svg")}>
+        <Download />
+      </IconButton>
+      <IconButton size="sm" aria-label="Export PNG" onClick={() => void ctx.exportChart("png")}>
+        <span className="spk-chart-toolbar-png">PNG</span>
+      </IconButton>
+    </div>
+  );
+}
+
+function ChartA11yTable() {
+  const { series, categories, slot } = useChartContext();
+  return (
+    <table className="spk-chart-a11y">
+      <caption>{slot} data</caption>
+      <thead>
+        <tr>
+          <th>Category</th>
+          {series.map((item) => (
+            <th key={item.id}>{item.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {categories.map((category, i) => (
+          <tr key={`${i}-${String(category)}`}>
+            <th scope="row">{formatAxisValue(category)}</th>
+            {series.map((item) => (
+              <td key={item.id}>{item.data[i] == null ? "—" : formatChartNumber(item.data[i] as number)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export { ChartContext };