@spatika/react 1.0.0 → 1.2.0

package/dist/composites/chart-composition.js

@@ -0,0 +1,486 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } 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, } from "../lib/charts";
+import { IconButton } from "../primitives/IconButton";
+import { CartesianGrid, CategoryAxis, ChartLegend, ChartTooltip, ValueAxis, categoryLabels, formatSeriesValue, resolveMargin, seriesMeta, } from "./chart-ui";
+const ChartContext = createContext(null);
+export function useChartContext() {
+    const value = useContext(ChartContext);
+    if (!value)
+        throw new Error("Chart composition components must be used inside ChartContainer");
+    return value;
+}
+function useOptionalChartContext() {
+    return useContext(ChartContext);
+}
+function useElementSize(ref, fallbackWidth, fallbackHeight) {
+    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, dataset, colors) {
+    return series.map((item, index) => {
+        const data = item.data ??
+            (dataset && item.dataKey ? seriesDataFromDataset(dataset, item.dataKey) : []);
+        const type = 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, stacked, axis) {
+    if (axis?.min != null && axis?.max != null)
+        return [axis.min, axis.max];
+    const values = [];
+    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"]) {
+            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) {
+    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, }) {
+    const surfaceRef = useRef(null);
+    const svgRef = useRef(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(new Set());
+    const toggleSeries = (id) => {
+        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(defaultZoom ?? DEFAULT_ZOOM);
+    const currentZoom = clampZoom(controlledZoom ?? innerZoom);
+    const setZoom = (next) => {
+        const clamped = clampZoom(next);
+        if (!controlledZoom)
+            setInnerZoom(clamped);
+        onZoomChange?.(clamped);
+    };
+    const resetZoom = () => setZoom(DEFAULT_ZOOM);
+    const [interaction, setInteraction] = useState("none");
+    const [highlighted, setHighlighted] = useState(null);
+    const [hover, setHover] = useState(null);
+    const [brush, setBrush] = useState(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) => 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) => 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, yAxisId) => {
+        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) => {
+        await exportChart(svgRef.current, format);
+    }, []);
+    const ctx = {
+        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 (_jsx(ChartContext.Provider, { value: ctx, children: _jsxs("div", { "data-slot": slot, className: cn("spk-chart", animated && "spk-chart--animated", className), role: "img", "aria-label": label, children: [showToolbar ? _jsx(ChartsToolbar, {}) : null, hideLegend ? null : (_jsx(ChartLegend, { items: legend, hiddenIds: hidden, onToggle: toggleSeries })), _jsxs("div", { ref: surfaceRef, className: "spk-chart-surface", style: { height }, children: [plotWidth > 0 ? children ?? _jsx(DefaultChartSurface, {}) : null, _jsx(ChartTooltip, { hover: hover, boundsWidth: plotWidth })] }), _jsx(ChartA11yTable, {})] }) }));
+}
+function DefaultChartSurface() {
+    const { rightAxis } = useChartContext();
+    return (_jsxs(ChartSurface, { children: [_jsx(ChartsGrid, {}), _jsx(BarPlot, {}), _jsx(AreaPlot, {}), _jsx(LinePlot, {}), _jsx(ScatterPlot, {}), _jsx(ChartsXAxis, {}), _jsx(ChartsYAxis, {}), rightAxis ? _jsx(ChartsYAxis, { position: "right" }) : null, _jsx(ChartsBrush, {})] }));
+}
+export function ChartSurface({ children, className }) {
+    const ctx = useChartContext();
+    const drag = useRef(null);
+    const { plot, zoomEnabled, interaction, setZoom, zoom, setBrush, setHover, setHighlighted, svgRef } = ctx;
+    useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg || !zoomEnabled)
+            return;
+        const onWheelNative = (event) => {
+            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) => {
+        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) => {
+        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 (_jsxs("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);
+        }, children: [_jsx("defs", { children: _jsx("clipPath", { id: ctx.clipPathId, children: _jsx("rect", { x: plot.left, y: plot.top, width: plot.iw, height: plot.ih }) }) }), children] }));
+}
+function clamp01(value) {
+    return Math.min(1, Math.max(0, value));
+}
+export function ChartsGrid() {
+    const { hideGrid, ticksLeft, yAt, plot } = useChartContext();
+    if (hideGrid)
+        return null;
+    return (_jsx(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 _jsx(CategoryAxis, { labels: categories, position: xAt, y: plot.bottom });
+}
+export function ChartsYAxis({ position = "left" }) {
+    const { ticksLeft, ticksRight, yAt, plot, leftAxis, rightAxis, locale } = useChartContext();
+    if (position === "right") {
+        if (!rightAxis || rightAxis.hide)
+            return null;
+        return (_jsx("g", { "data-slot": "chart-y-axis-right", children: ticksRight.map((tick) => (_jsx("text", { className: "spk-chart-tick", x: plot.right + 8, y: yAt(tick, rightAxis.id), dominantBaseline: "middle", children: formatChartNumber(tick, locale) }, tick))) }));
+    }
+    if (leftAxis?.hide)
+        return null;
+    return _jsx(ValueAxis, { ticks: ticksLeft, scale: (value) => yAt(value, leftAxis?.id), left: plot.left });
+}
+function PlotClip({ children, slot }) {
+    const { clipPathId } = useChartContext();
+    return (_jsx("g", { "data-slot": slot, clipPath: `url(#${clipPathId})`, children: children }));
+}
+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 (_jsx(PlotClip, { slot: "bar-plot", children: bars.map((item, s) => item.data.map((value, i) => {
+            if (value == null)
+                return null;
+            let x = ctx.xAt(i);
+            let y1;
+            let y2;
+            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 (_jsx("path", { 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);
+                } }, `${item.id}-${i}`));
+        })) }));
+}
+function LineLikePlot({ types, slot }) {
+    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 (_jsx(PlotClip, { slot: slot, children: 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 != 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 (_jsxs("g", { opacity: opacity, children: [fill ? (_jsx("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, _jsx("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) => (_jsx("circle", { 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);
+                            } }, pt.i)))
+                        : null] }, item.id));
+        }) }));
+}
+export function LinePlot() {
+    return _jsx(LineLikePlot, { types: ["line"], slot: "line-plot" });
+}
+export function AreaPlot() {
+    return _jsx(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 (_jsx(PlotClip, { slot: "scatter-plot", children: items.map((item) => {
+            const points = item.scatter ??
+                item.data
+                    .map((value, i) => (value == null ? null : { x: i, y: value, id: i }))
+                    .filter((p) => 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 (_jsx("circle", { 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);
+                    } }, `${item.id}-${point.id ?? i}`));
+            });
+        }) }));
+}
+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 (_jsx("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 (_jsx(ChartLegend, { items: series.map((item) => ({ id: item.id, label: item.label, color: item.color })), hiddenIds: hidden, onToggle: toggleSeries }));
+}
+export function ChartsToolbar({ className }) {
+    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 (_jsxs("div", { className: cn("spk-chart-toolbar", className), role: "toolbar", "aria-label": "Chart tools", children: [_jsx(IconButton, { size: "sm", "aria-label": "Zoom in", onClick: zoomIn, children: _jsx(ZoomIn, {}) }), _jsx(IconButton, { size: "sm", "aria-label": "Zoom out", onClick: zoomOut, children: _jsx(ZoomOut, {}) }), _jsx(IconButton, { size: "sm", "aria-label": "Reset zoom", onClick: ctx.resetZoom, children: _jsx(Maximize2, {}) }), _jsx(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"), children: _jsx(Move, {}) }), _jsx(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"), children: _jsx(SquareDashedMousePointer, {}) }), _jsx(IconButton, { size: "sm", "aria-label": "Export SVG", onClick: () => void ctx.exportChart("svg"), children: _jsx(Download, {}) }), _jsx(IconButton, { size: "sm", "aria-label": "Export PNG", onClick: () => void ctx.exportChart("png"), children: _jsx("span", { className: "spk-chart-toolbar-png", children: "PNG" }) })] }));
+}
+function ChartA11yTable() {
+    const { series, categories, slot } = useChartContext();
+    return (_jsxs("table", { className: "spk-chart-a11y", children: [_jsxs("caption", { children: [slot, " data"] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Category" }), series.map((item) => (_jsx("th", { children: item.label }, item.id)))] }) }), _jsx("tbody", { children: categories.map((category, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: formatAxisValue(category) }), series.map((item) => (_jsx("td", { children: item.data[i] == null ? "—" : formatChartNumber(item.data[i]) }, item.id)))] }, `${i}-${String(category)}`))) })] }));
+}
+export { ChartContext };

package/dist/composites/chart-ui.d.ts

@@ -0,0 +1,83 @@
+import { type ReactNode } from "react";
+import { type ChartAxisConfig, type ChartMargin } from "../lib/charts";
+export type ChartTooltipItem = {
+    color: string;
+    label: string;
+    value: string;
+};
+export type ChartLegendItem = {
+    id: string;
+    label: string;
+    color: string;
+};
+export type ChartHover = {
+    x: number;
+    y: number;
+    title?: string;
+    items: ChartTooltipItem[];
+} | null;
+export type ChartFrameProps = {
+    slot: string;
+    className?: string;
+    width?: number;
+    height?: number;
+    margin?: ChartMargin;
+    legend?: ChartLegendItem[];
+    hiddenIds?: Set<string>;
+    onToggleSeries?: (id: string) => void;
+    hover?: ChartHover;
+    "aria-label"?: string;
+    children: (plot: {
+        width: number;
+        height: number;
+        m: Required<ChartMargin>;
+    }) => ReactNode;
+};
+export declare function resolveMargin(margin?: ChartMargin): Required<ChartMargin>;
+export declare function ChartFrame({ slot, className, width, height, margin, legend, hiddenIds, onToggleSeries, hover, "aria-label": ariaLabel, children, }: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartLegend({ items, hiddenIds, onToggle, }: {
+    items: ChartLegendItem[];
+    hiddenIds?: Set<string>;
+    onToggle?: (id: string) => void;
+}): import("react").JSX.Element;
+export declare function ChartTooltip({ hover, boundsWidth, }: {
+    hover: ChartHover;
+    boundsWidth: number;
+}): import("react").JSX.Element | null;
+export declare function CartesianGrid({ ticks, scale, left, right, top, bottom, }: {
+    ticks: number[];
+    scale: (value: number) => number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}): import("react").JSX.Element;
+export declare function ValueAxis({ ticks, scale, left, width, }: {
+    ticks: number[];
+    scale: (value: number) => number;
+    left: number;
+    width?: number;
+}): import("react").JSX.Element;
+export declare function CategoryAxis({ labels, position, y, }: {
+    labels: Array<string | number | Date>;
+    position: (index: number) => number;
+    y: number;
+}): import("react").JSX.Element;
+export declare function useHiddenSeries(ids: string[]): {
+    hidden: Set<string>;
+    toggle: (id: string) => void;
+    visible: string[];
+};
+export declare function seriesMeta(series: Array<{
+    id?: string;
+    label?: string;
+    color?: string;
+}>, colors?: string[]): ChartLegendItem[];
+export declare function useChartHover(): {
+    hover: ChartHover;
+    setHover: import("react").Dispatch<import("react").SetStateAction<ChartHover>>;
+    clear: () => void;
+};
+export declare function categoryLabels(axis?: ChartAxisConfig, length?: number): Array<string | number | Date>;
+export declare function formatSeriesValue(value: number | [number, number] | undefined): string;
+//# sourceMappingURL=chart-ui.d.ts.map

package/dist/composites/chart-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-ui.d.ts","sourceRoot":"","sources":["../../src/composites/chart-ui.tsx"],"names":[],"mappings":"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"}