@spatika/react 1.1.0 → 1.2.0

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

@@ -0,0 +1,139 @@
+import { type ReactNode, type RefObject } from "react";
+import { type ChartAxisConfig, type ChartCurve, type ChartDataset, type ChartInteraction, type ChartMargin, type ChartZoom, type HighlightScope, type PlotBox } from "../lib/charts";
+import { 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>;
+};
+declare const ChartContext: import("react").Context<ChartContextValue | null>;
+export declare function useChartContext(): ChartContextValue;
+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;
+};
+export declare function ChartContainer({ slot, className, width, height, margin, dataset, xAxis, yAxis, series, colors, hideLegend, hideGrid, stacked, barGapRatio, borderRadius, zoom, defaultZoom, onZoomChange, showToolbar, highlightScope, selected, animated, locale, children, "aria-label": ariaLabel, }: ChartContainerProps): import("react").JSX.Element;
+export declare function ChartSurface({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function ChartsGrid(): import("react").JSX.Element | null;
+export declare function ChartsXAxis(): import("react").JSX.Element | null;
+export declare function ChartsYAxis({ position }: {
+    position?: "left" | "right";
+}): import("react").JSX.Element | null;
+export declare function BarPlot(): import("react").JSX.Element | null;
+export declare function LinePlot(): import("react").JSX.Element;
+export declare function AreaPlot(): import("react").JSX.Element;
+export declare function ScatterPlot(): import("react").JSX.Element | null;
+export declare function ChartsBrush(): import("react").JSX.Element | null;
+export declare function ChartsLegend(): import("react").JSX.Element;
+export declare function ChartsToolbar({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;
+export { ChartContext };
+//# sourceMappingURL=chart-composition.d.ts.map

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

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

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 };