@spatika/react 1.0.0 → 1.2.0

package/dist/composites/cartesian-charts.js

@@ -0,0 +1,401 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { areaPath, bandScale, boxPlotStats, chartColor, extent, formatChartNumber, linePath, linearScale, niceTicks, pointScale, rangeAreaPath, roundedRectPath, stackSeries, waterfallBars, } from "../lib/charts";
+import { CartesianGrid, CategoryAxis, ChartFrame, ValueAxis, categoryLabels, formatSeriesValue, seriesMeta, useChartHover, useHiddenSeries, } from "./chart-ui";
+import { ChartContainer } from "./chart-composition";
+import { ScatterWebGLLayer } from "./ScatterWebGL";
+import { nearestScatterHit, shouldUseWebGL, svgPointerPosition, } from "../lib/webgl-scatter";
+function box(width, height, m) {
+    return {
+        left: m.left,
+        right: width - m.right,
+        top: m.top,
+        bottom: height - m.bottom,
+        iw: Math.max(1, width - m.left - m.right),
+        ih: Math.max(1, height - m.top - m.bottom),
+    };
+}
+function numericDomain(series, stacked, axis) {
+    if (axis?.min != null && axis?.max != null)
+        return [axis.min, axis.max];
+    const values = [];
+    if (stacked) {
+        const stacks = stackSeries(series.map((item) => (item.data ?? []).map((v) => v ?? 0)));
+        for (const segs of stacks)
+            for (const seg of segs)
+                values.push(seg.start, seg.end);
+    }
+    else {
+        for (const item of series)
+            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 CartesianShell({ slot, ariaLabel, series, colors, hideLegend, hideGrid, xAxis, yAxis, width, height, margin, className, domain, categories, categoryMode = "band", children, }) {
+    const meta = seriesMeta(series, colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    const ticks = niceTicks(domain[0], domain[1], 5);
+    const xConfig = xAxis?.[0];
+    return (_jsx(ChartFrame, { slot: slot, className: className, width: width, height: height, margin: margin, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": ariaLabel, children: ({ width: w, height: h, m }) => {
+            const plot = box(w, h, m);
+            const yAt = linearScale(domain, [plot.bottom, plot.top]);
+            let xAt = (index) => plot.left + plot.iw * (categories.length <= 1 ? 0.5 : index / (categories.length - 1));
+            let bandwidth = 0;
+            if (categoryMode === "band") {
+                const scale = bandScale(categories.map(String), [plot.left, plot.right], 0.24);
+                xAt = (index) => scale(String(categories[index]));
+                bandwidth = scale.bandwidth;
+            }
+            else if (categoryMode === "point") {
+                const scale = pointScale(categories.map(String), [plot.left, plot.right]);
+                xAt = (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]);
+                xAt = (index) => scale(xs[index] ?? min);
+            }
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [hideGrid ? null : (_jsx(CartesianGrid, { ticks: ticks, scale: yAt, left: plot.left, right: plot.right, top: plot.top, bottom: plot.bottom })), yAxis?.[0]?.hide ? null : _jsx(ValueAxis, { ticks: ticks, scale: yAt, left: plot.left }), xAxis?.[0]?.hide ? null : (_jsx(CategoryAxis, { labels: categories, position: xAt, y: plot.bottom })), children({ plot, xAt, yAt, bandwidth, ticks, hidden, meta, setHover, clear })] }));
+        } }));
+}
+export function BarChart({ xAxis, yAxis, series, dataset, height, width, layout = "vertical", stacked = false, borderRadius = 6, colors, hideLegend, hideGrid, margin, className, barGapRatio = 0.15, zoom, onZoomChange, showToolbar, highlightScope, animated, locale, }) {
+    const meta = seriesMeta(series, colors);
+    if (layout === "horizontal") {
+        return (_jsx(HorizontalBarChart, { xAxis: xAxis, yAxis: yAxis, series: series, height: height, width: width, stacked: stacked, borderRadius: borderRadius, colors: colors, hideLegend: hideLegend, hideGrid: hideGrid, margin: margin, className: className, barGapRatio: barGapRatio }));
+    }
+    return (_jsx(ChartContainer, { slot: "bar-chart", "aria-label": `Bar chart of ${meta.map((s) => s.label).join(", ")}`, className: className, width: width, height: height, margin: margin, dataset: dataset, xAxis: xAxis, yAxis: yAxis, series: series.map((item) => ({ ...item, type: "bar" })), colors: colors, hideLegend: hideLegend, hideGrid: hideGrid, stacked: stacked, barGapRatio: barGapRatio, borderRadius: borderRadius, zoom: zoom, onZoomChange: onZoomChange, showToolbar: showToolbar, highlightScope: highlightScope, animated: animated, locale: locale }));
+}
+function HorizontalBarChart({ xAxis, yAxis, series, height, width, stacked, borderRadius = 6, colors, hideLegend, hideGrid, margin, className, barGapRatio = 0.15, }) {
+    const categories = categoryLabels(xAxis?.[0], series[0]?.data?.length ?? 0);
+    const domain = numericDomain(series, Boolean(stacked), yAxis?.[0]);
+    const meta = seriesMeta(series, colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    const ticks = niceTicks(domain[0], domain[1], 5);
+    const stacks = stacked ? stackSeries(series.map((item) => (item.data ?? []).map((v) => v ?? 0))) : null;
+    return (_jsx(ChartFrame, { slot: "bar-chart", className: className, width: width, height: height, margin: margin ?? { top: 16, right: 16, bottom: 28, left: 72 }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": `Bar chart of ${meta.map((s) => s.label).join(", ")}`, children: ({ width: w, height: h, m }) => {
+            const plot = box(w, h, m);
+            const xAt = linearScale(domain, [plot.left, plot.right]);
+            const yScale = bandScale(categories.map(String), [plot.top, plot.bottom], 0.24);
+            const visible = meta.filter((item) => !hidden.has(item.id));
+            const n = stacked ? 1 : Math.max(visible.length, 1);
+            const gap = n > 1 ? yScale.bandwidth * barGapRatio : 0;
+            const barH = (yScale.bandwidth - gap * (n - 1)) / n;
+            const zero = xAt(0);
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [hideGrid
+                        ? null
+                        : ticks.map((tick) => (_jsx("line", { className: "spk-chart-grid", x1: xAt(tick), x2: xAt(tick), y1: plot.top, y2: plot.bottom }, tick))), ticks.map((tick) => (_jsx("text", { className: "spk-chart-tick", x: xAt(tick), y: plot.bottom + 16, textAnchor: "middle", children: formatChartNumber(tick) }, `t-${tick}`))), categories.map((label, i) => (_jsx("text", { className: "spk-chart-tick", x: plot.left - 8, y: yScale(String(label)) + yScale.bandwidth / 2, textAnchor: "end", dominantBaseline: "middle", children: String(label) }, String(label)))), series.map((item, s) => {
+                        const info = meta[s];
+                        if (hidden.has(info.id))
+                            return null;
+                        const visIndex = visible.findIndex((v) => v.id === info.id);
+                        return (item.data ?? []).map((value, i) => {
+                            if (value == null)
+                                return null;
+                            const catY = yScale(String(categories[i]));
+                            let y = catY;
+                            let x1;
+                            let x2;
+                            if (stacks) {
+                                const seg = stacks[s][i];
+                                x1 = xAt(seg.start);
+                                x2 = xAt(seg.end);
+                            }
+                            else {
+                                y = catY + visIndex * (barH + gap);
+                                x1 = zero;
+                                x2 = xAt(value);
+                            }
+                            const x = Math.min(x1, x2);
+                            const barW = Math.max(1, Math.abs(x2 - x1));
+                            return (_jsx("path", { className: "spk-chart-mark", d: roundedRectPath(x, y, barW, stacked ? yScale.bandwidth : barH, borderRadius), fill: info.color, onMouseEnter: (event) => setHover({
+                                    x: event.nativeEvent.offsetX,
+                                    y: event.nativeEvent.offsetY,
+                                    title: String(categories[i]),
+                                    items: [{ color: info.color, label: info.label, value: formatSeriesValue(value) }],
+                                }), onMouseLeave: clear }, `${info.id}-${i}`));
+                        });
+                    })] }));
+        } }));
+}
+export function LineChart({ xAxis, yAxis, series, dataset, height, width, colors, hideLegend, hideGrid, margin, className, curve = "monotone", area = false, showMark = true, stacked = false, zoom, onZoomChange, showToolbar, highlightScope, animated, locale, }) {
+    const meta = seriesMeta(series, colors);
+    const stackedAreas = stacked && (area || series.some((item) => item.area || item.type === "area"));
+    return (_jsx(ChartContainer, { slot: area ? "area-chart" : "line-chart", "aria-label": `${area ? "Area" : "Line"} chart of ${meta.map((s) => s.label).join(", ")}`, className: className, width: width, height: height, margin: margin, dataset: dataset, xAxis: xAxis, yAxis: yAxis, series: series.map((item) => ({
+            ...item,
+            type: area || item.area ? "area" : "line",
+            curve: item.curve ?? curve,
+            showMark: item.showMark ?? (stackedAreas ? false : showMark),
+        })), colors: colors, hideLegend: hideLegend, hideGrid: hideGrid, stacked: stacked, zoom: zoom, onZoomChange: onZoomChange, showToolbar: showToolbar, highlightScope: highlightScope, animated: animated, locale: locale }));
+}
+export function AreaChart(props) {
+    return _jsx(LineChart, { ...props, area: true });
+}
+export function SparkLineChart({ data, height = 48, width, color = "var(--chart-1)", area = true, curve = "monotone", className, showHighlight = true, plotType = "line", }) {
+    const [min, max] = extent(data, 0.08);
+    return (_jsx(ChartFrame, { slot: "sparkline", className: className, width: width, height: height, margin: { top: 4, right: 4, bottom: 4, left: 4 }, "aria-label": "Sparkline", children: ({ width: w, height: h, m }) => {
+            const plot = box(w, h, m);
+            const yAt = linearScale([min, max], [plot.bottom, plot.top]);
+            if (plotType === "bar") {
+                const n = Math.max(data.length, 1);
+                const gap = 1;
+                const barW = Math.max(1, plot.iw / n - gap);
+                return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: data.map((value, i) => {
+                        const x = plot.left + (i / n) * plot.iw + gap / 2;
+                        const y = yAt(value);
+                        return (_jsx("rect", { x: x, y: y, width: barW, height: Math.max(1, plot.bottom - y), fill: color, rx: 1 }, i));
+                    }) }));
+            }
+            const xAt = (i) => plot.left + (data.length <= 1 ? plot.iw / 2 : (i / (data.length - 1)) * plot.iw);
+            const pts = data.map((value, i) => ({ x: xAt(i), y: yAt(value) }));
+            const last = pts[pts.length - 1];
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [area ? _jsx("path", { d: areaPath(pts, plot.bottom, curve), fill: color, opacity: 0.2 }) : null, _jsx("path", { d: linePath(pts, curve), fill: "none", stroke: color, strokeWidth: 1.75, strokeLinejoin: "round", strokeLinecap: "round" }), showHighlight && last ? _jsx("circle", { cx: last.x, cy: last.y, r: 3, fill: color }) : null] }));
+        } }));
+}
+export function ScatterChart({ series, xAxis, yAxis, height, width, colors, hideLegend, hideGrid, margin, className, bubble = false, renderer = "svg", }) {
+    const meta = seriesMeta(series, colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    const [glFailed, setGlFailed] = useState(false);
+    const onGlUnavailable = useCallback(() => setGlFailed(true), []);
+    const pointCount = series.reduce((n, item) => n + item.data.length, 0);
+    const useGL = shouldUseWebGL(renderer, pointCount) && !glFailed;
+    const xs = series.flatMap((item) => item.data.map((p) => p.x));
+    const ys = series.flatMap((item) => item.data.map((p) => p.y));
+    const zs = series.flatMap((item) => item.data.map((p) => p.z ?? 1));
+    const xDomain = [xAxis?.[0]?.min ?? extent(xs, 0.08)[0], xAxis?.[0]?.max ?? extent(xs, 0.08)[1]];
+    const yDomain = [yAxis?.[0]?.min ?? extent(ys, 0.08)[0], yAxis?.[0]?.max ?? extent(ys, 0.08)[1]];
+    const zDomain = extent(zs);
+    const ticks = niceTicks(yDomain[0], yDomain[1], 5);
+    const xTicks = niceTicks(xDomain[0], xDomain[1], 5);
+    return (_jsx(ChartFrame, { slot: bubble ? "bubble-chart" : "scatter-chart", className: className, width: width, height: height, margin: margin, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": bubble ? "Bubble chart" : "Scatter chart", children: ({ width: w, height: h, m }) => {
+            const plot = box(w, h, m);
+            const xAt = linearScale(xDomain, [plot.left, plot.right]);
+            const yAt = linearScale(yDomain, [plot.bottom, plot.top]);
+            const zAt = (z) => 5 + ((z - zDomain[0]) / (zDomain[1] - zDomain[0] || 1)) * 18;
+            const hoverPoint = (event, svg) => {
+                if (!svg)
+                    return;
+                const pos = svgPointerPosition(svg, event.clientX, event.clientY, w, h);
+                const candidates = series.flatMap((item, s) => {
+                    const info = meta[s];
+                    if (hidden.has(info.id))
+                        return [];
+                    return item.data.map((point, i) => ({
+                        x: xAt(point.x),
+                        y: yAt(point.y),
+                        r: bubble ? zAt(point.z ?? 1) : 4.5,
+                        seriesIndex: s,
+                        pointIndex: i,
+                    }));
+                });
+                const hit = nearestScatterHit(candidates, pos.x, pos.y);
+                if (!hit) {
+                    clear();
+                    return;
+                }
+                const item = series[hit.seriesIndex];
+                const info = meta[hit.seriesIndex];
+                const point = item.data[hit.pointIndex];
+                setHover({
+                    x: pos.x,
+                    y: pos.y,
+                    title: point.label ?? info.label,
+                    items: [
+                        { color: info.color, label: "x", value: formatChartNumber(point.x) },
+                        { color: info.color, label: "y", value: formatChartNumber(point.y) },
+                        ...(point.z != null
+                            ? [{ color: info.color, label: "size", value: formatChartNumber(point.z) }]
+                            : []),
+                    ],
+                });
+            };
+            return (_jsxs(_Fragment, { children: [useGL ? (_jsx(ScatterWebGLLayer, { width: w, height: h, series: series, meta: meta, hidden: hidden, xAt: xAt, yAt: yAt, sizeAt: zAt, bubble: bubble, onUnavailable: onGlUnavailable })) : null, _jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [hideGrid ? null : (_jsx(CartesianGrid, { ticks: ticks, scale: yAt, left: plot.left, right: plot.right, top: plot.top, bottom: plot.bottom })), _jsx(ValueAxis, { ticks: ticks, scale: yAt, left: plot.left }), xTicks.map((tick) => (_jsx("text", { className: "spk-chart-tick", x: xAt(tick), y: plot.bottom + 16, textAnchor: "middle", children: formatChartNumber(tick) }, tick))), useGL ? (_jsx("rect", { x: plot.left, y: plot.top, width: plot.iw, height: plot.ih, fill: "transparent", onMouseMove: (event) => hoverPoint(event, event.currentTarget.ownerSVGElement), onMouseLeave: clear })) : (series.map((item, s) => {
+                                const info = meta[s];
+                                if (hidden.has(info.id))
+                                    return null;
+                                return item.data.map((point, i) => (_jsx("circle", { cx: xAt(point.x), cy: yAt(point.y), r: bubble ? zAt(point.z ?? 1) : 4.5, fill: info.color, fillOpacity: bubble ? 0.45 : 0.85, stroke: info.color, strokeWidth: bubble ? 1.25 : 0, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                        x: event.nativeEvent.offsetX,
+                                        y: event.nativeEvent.offsetY,
+                                        title: point.label ?? info.label,
+                                        items: [
+                                            { color: info.color, label: "x", value: formatChartNumber(point.x) },
+                                            { color: info.color, label: "y", value: formatChartNumber(point.y) },
+                                            ...(point.z != null
+                                                ? [{ color: info.color, label: "size", value: formatChartNumber(point.z) }]
+                                                : []),
+                                        ],
+                                    }), onMouseLeave: clear }, `${info.id}-${point.id ?? i}`)));
+                            }))] })] }));
+        } }));
+}
+export function BubbleChart(props) {
+    return _jsx(ScatterChart, { ...props, bubble: true });
+}
+export function RangeBarChart({ xAxis, yAxis, series, height, width, colors, hideLegend, hideGrid, margin, className, }) {
+    const categories = categoryLabels(xAxis?.[0], series[0]?.data?.length ?? 0);
+    const values = series.flatMap((item) => item.data.flatMap((pair) => (pair ? pair : [])));
+    const domain = [
+        yAxis?.[0]?.min ?? extent(values, 0.04)[0],
+        yAxis?.[0]?.max ?? extent(values, 0.04)[1],
+    ];
+    const meta = seriesMeta(series, colors);
+    return (_jsx(CartesianShell, { slot: "range-bar-chart", ariaLabel: "Range bar chart", series: series, colors: colors, hideLegend: hideLegend, hideGrid: hideGrid, xAxis: xAxis, yAxis: yAxis, width: width, height: height, margin: margin, className: className, domain: domain, categories: categories, categoryMode: "band", children: ({ xAt, yAt, bandwidth, hidden, meta: items, setHover, clear }) => (_jsx("g", { children: series.map((item, s) => {
+                const info = items[s];
+                if (hidden.has(info.id))
+                    return null;
+                const barW = bandwidth / Math.max(series.length, 1);
+                return item.data.map((pair, i) => {
+                    if (!pair)
+                        return null;
+                    const [lo, hi] = pair;
+                    const y1 = yAt(hi);
+                    const y2 = yAt(lo);
+                    const y = Math.min(y1, y2);
+                    const h = Math.max(1, Math.abs(y2 - y1));
+                    const x = xAt(i) + s * barW;
+                    return (_jsx("rect", { x: x, y: y, width: barW * 0.86, height: h, rx: 5, fill: info.color, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: String(categories[i]),
+                            items: [{ color: info.color, label: info.label, value: formatSeriesValue(pair) }],
+                        }), onMouseLeave: clear }, `${info.id}-${i}`));
+                });
+            }) })) }));
+}
+export function RangeAreaChart({ xAxis, yAxis, series, height, width, colors, hideLegend, hideGrid, margin, className, curve = "monotone", }) {
+    const categories = categoryLabels(xAxis?.[0], series[0]?.data?.length ?? 0);
+    const values = series.flatMap((item) => item.data.flatMap((pair) => (pair ? pair : [])));
+    const domain = [
+        yAxis?.[0]?.min ?? extent(values, 0.06)[0],
+        yAxis?.[0]?.max ?? extent(values, 0.06)[1],
+    ];
+    return (_jsx(CartesianShell, { slot: "range-area-chart", ariaLabel: "Range area chart", series: series, colors: colors, hideLegend: hideLegend, hideGrid: hideGrid, xAxis: xAxis, yAxis: yAxis, width: width, height: height, margin: margin, className: className, domain: domain, categories: categories, categoryMode: "point", children: ({ xAt, yAt, hidden, meta, setHover, clear }) => (_jsx("g", { children: series.map((item, s) => {
+                const info = meta[s];
+                if (hidden.has(info.id))
+                    return null;
+                const high = item.data.map((pair, i) => ({ x: xAt(i), y: yAt(pair ? pair[1] : 0) }));
+                const low = item.data.map((pair, i) => ({ x: xAt(i), y: yAt(pair ? pair[0] : 0) }));
+                return (_jsxs("g", { children: [_jsx("path", { d: rangeAreaPath(high, low, curve), fill: info.color, opacity: 0.22, className: "spk-chart-mark" }), _jsx("path", { d: linePath(high, curve), fill: "none", stroke: info.color, strokeWidth: 2 }), _jsx("path", { d: linePath(low, curve), fill: "none", stroke: info.color, strokeWidth: 2 }), high.map((pt, i) => (_jsx("circle", { cx: pt.x, cy: pt.y, r: 3, fill: info.color, onMouseEnter: () => setHover({
+                                x: pt.x,
+                                y: pt.y,
+                                title: String(categories[i]),
+                                items: [{ color: info.color, label: info.label, value: formatSeriesValue(item.data[i] ?? undefined) }],
+                            }), onMouseLeave: clear }, i)))] }, info.id));
+            }) })) }));
+}
+export function WaterfallChart({ xAxis, yAxis, series, height, width, colors, hideLegend = true, hideGrid, margin, className, }) {
+    const item = series[0];
+    const categories = categoryLabels(xAxis?.[0], item?.data?.length ?? 0);
+    const bars = waterfallBars(item?.data ?? []);
+    const values = bars.flatMap((bar) => [bar.start, bar.end]);
+    const domain = [
+        yAxis?.[0]?.min ?? Math.min(0, ...values),
+        yAxis?.[0]?.max ?? extent(values, 0.06)[1],
+    ];
+    const color = item?.color ?? chartColor(0, colors);
+    return (_jsx(CartesianShell, { slot: "waterfall-chart", ariaLabel: "Waterfall chart", series: series, colors: colors, hideLegend: hideLegend, hideGrid: hideGrid, xAxis: xAxis, yAxis: yAxis, width: width, height: height, margin: margin, className: className, domain: domain, categories: categories, categoryMode: "band", children: ({ xAt, yAt, bandwidth, setHover, clear }) => (_jsx("g", { children: bars.map((bar, i) => {
+                const y1 = yAt(bar.end);
+                const y2 = yAt(bar.start);
+                const y = Math.min(y1, y2);
+                const h = Math.max(1, Math.abs(y2 - y1));
+                const fill = bar.total
+                    ? "var(--chart-2)"
+                    : bar.value >= 0
+                        ? color
+                        : "var(--chart-4)";
+                const next = bars[i + 1];
+                return (_jsxs("g", { children: [next && !next.total ? (_jsx("line", { x1: xAt(i) + bandwidth, x2: xAt(i + 1), y1: yAt(bar.end), y2: yAt(bar.end), className: "spk-chart-grid" })) : null, _jsx("rect", { x: xAt(i), y: y, width: bandwidth, height: h, rx: 5, fill: fill, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                x: event.nativeEvent.offsetX,
+                                y: event.nativeEvent.offsetY,
+                                title: String(categories[i]),
+                                items: [
+                                    {
+                                        color: fill,
+                                        label: bar.total ? "Total" : bar.value >= 0 ? "Increase" : "Decrease",
+                                        value: formatChartNumber(bar.value),
+                                    },
+                                ],
+                            }), onMouseLeave: clear })] }, bar.index));
+            }) })) }));
+}
+export function BoxPlotChart({ xAxis, yAxis, series, height, width, colors, hideLegend, hideGrid, margin, className, }) {
+    const stats = series.map((item) => item.data.map((entry) => (Array.isArray(entry) ? boxPlotStats(entry) : entry)));
+    const categories = categoryLabels(xAxis?.[0], stats[0]?.length ?? 0);
+    const values = stats.flatMap((row) => row.flatMap((box) => (box ? [box.min, box.max, ...(box.outliers ?? [])] : [])));
+    const domain = [
+        yAxis?.[0]?.min ?? extent(values, 0.06)[0],
+        yAxis?.[0]?.max ?? extent(values, 0.06)[1],
+    ];
+    return (_jsx(CartesianShell, { slot: "boxplot-chart", ariaLabel: "Box plot", series: series, colors: colors, hideLegend: hideLegend, hideGrid: hideGrid, xAxis: xAxis, yAxis: yAxis, width: width, height: height, margin: margin, className: className, domain: domain, categories: categories, categoryMode: "band", children: ({ xAt, yAt, bandwidth, hidden, meta, setHover, clear }) => (_jsx("g", { children: series.map((item, s) => {
+                const info = meta[s];
+                if (hidden.has(info.id))
+                    return null;
+                const boxW = Math.min(36, bandwidth * 0.55);
+                return stats[s].map((boxStat, i) => {
+                    if (!boxStat)
+                        return null;
+                    const cx = xAt(i) + bandwidth / 2;
+                    const x = cx - boxW / 2;
+                    return (_jsxs("g", { onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: String(categories[i]),
+                            items: [
+                                { color: info.color, label: "min", value: formatChartNumber(boxStat.min) },
+                                { color: info.color, label: "q1", value: formatChartNumber(boxStat.q1) },
+                                { color: info.color, label: "median", value: formatChartNumber(boxStat.median) },
+                                { color: info.color, label: "q3", value: formatChartNumber(boxStat.q3) },
+                                { color: info.color, label: "max", value: formatChartNumber(boxStat.max) },
+                            ],
+                        }), onMouseLeave: clear, children: [_jsx("line", { x1: cx, x2: cx, y1: yAt(boxStat.min), y2: yAt(boxStat.max), stroke: info.color, strokeWidth: 1.5 }), _jsx("line", { x1: x, x2: x + boxW, y1: yAt(boxStat.min), y2: yAt(boxStat.min), stroke: info.color }), _jsx("line", { x1: x, x2: x + boxW, y1: yAt(boxStat.max), y2: yAt(boxStat.max), stroke: info.color }), _jsx("rect", { x: x, y: yAt(boxStat.q3), width: boxW, height: Math.max(1, yAt(boxStat.q1) - yAt(boxStat.q3)), fill: info.color, fillOpacity: 0.22, stroke: info.color, rx: 3 }), _jsx("line", { x1: x, x2: x + boxW, y1: yAt(boxStat.median), y2: yAt(boxStat.median), stroke: info.color, strokeWidth: 2 }), boxStat.outliers.map((value, oi) => (_jsx("circle", { cx: cx, cy: yAt(value), r: 2.4, fill: info.color }, oi)))] }, `${info.id}-${i}`));
+                });
+            }) })) }));
+}
+export function CandlestickChart({ xAxis, yAxis, series, height, width, colors, hideLegend = true, hideGrid, margin, className, variant = "candle", }) {
+    const item = series[0];
+    const categories = categoryLabels(xAxis?.[0], item?.data?.length ?? 0);
+    const values = (item?.data ?? []).flatMap((candle) => (candle ? [candle.high, candle.low] : []));
+    const domain = [
+        yAxis?.[0]?.min ?? extent(values, 0.06)[0],
+        yAxis?.[0]?.max ?? extent(values, 0.06)[1],
+    ];
+    return (_jsx(CartesianShell, { slot: variant === "ohlc" ? "ohlc-chart" : "candlestick-chart", ariaLabel: variant === "ohlc" ? "OHLC chart" : "Candlestick chart", series: series, colors: colors, hideLegend: hideLegend, hideGrid: hideGrid, xAxis: xAxis, yAxis: yAxis, width: width, height: height, margin: margin, className: className, domain: domain, categories: categories, categoryMode: "band", children: ({ xAt, yAt, bandwidth, setHover, clear }) => (_jsx("g", { children: (item?.data ?? []).map((candle, i) => {
+                if (!candle)
+                    return null;
+                const up = candle.close >= candle.open;
+                const color = up ? "var(--chart-3)" : "var(--chart-4)";
+                const cx = xAt(i) + bandwidth / 2;
+                const bodyTop = yAt(Math.max(candle.open, candle.close));
+                const bodyBot = yAt(Math.min(candle.open, candle.close));
+                const bodyH = Math.max(1, bodyBot - bodyTop);
+                const wickW = Math.max(1.2, bandwidth * 0.08);
+                const bodyW = Math.min(18, bandwidth * 0.55);
+                return (_jsxs("g", { onMouseEnter: (event) => setHover({
+                        x: event.nativeEvent.offsetX,
+                        y: event.nativeEvent.offsetY,
+                        title: String(categories[i]),
+                        items: [
+                            { color, label: "open", value: formatChartNumber(candle.open) },
+                            { color, label: "high", value: formatChartNumber(candle.high) },
+                            { color, label: "low", value: formatChartNumber(candle.low) },
+                            { color, label: "close", value: formatChartNumber(candle.close) },
+                        ],
+                    }), onMouseLeave: clear, children: [_jsx("line", { x1: cx, x2: cx, y1: yAt(candle.high), y2: yAt(candle.low), stroke: color, strokeWidth: wickW }), variant === "ohlc" ? (_jsxs(_Fragment, { children: [_jsx("line", { x1: cx - bodyW / 2, x2: cx, y1: yAt(candle.open), y2: yAt(candle.open), stroke: color, strokeWidth: 2 }), _jsx("line", { x1: cx, x2: cx + bodyW / 2, y1: yAt(candle.close), y2: yAt(candle.close), stroke: color, strokeWidth: 2 })] })) : (_jsx("rect", { x: cx - bodyW / 2, y: bodyTop, width: bodyW, height: bodyH, fill: color, rx: 2 }))] }, i));
+            }) })) }));
+}
+export function OhlcChart(props) {
+    return _jsx(CandlestickChart, { ...props, variant: "ohlc" });
+}

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