@spatika/react 1.1.0 → 1.3.0

package/dist/composites/cartesian-charts.d.ts

@@ -0,0 +1,138 @@
+import { type BoxPlotStats, type ChartAxisConfig, type ChartCurve, type ChartMargin } from "../lib/charts";
+import { type ScatterRenderer } from "../lib/webgl-scatter";
+export type { ScatterRenderer };
+export type NumericSeries = {
+    id?: string;
+    label?: string;
+    data?: Array<number | null>;
+    dataKey?: string;
+    color?: string;
+    stack?: string;
+    area?: boolean;
+    curve?: ChartCurve;
+    showMark?: boolean;
+    yAxisId?: string;
+    type?: "bar" | "line" | "area";
+};
+export type CartesianChartProps = {
+    xAxis?: ChartAxisConfig[];
+    yAxis?: ChartAxisConfig[];
+    series: NumericSeries[];
+    dataset?: import("../lib/charts").ChartDataset;
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    hideGrid?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+    zoom?: boolean | import("../lib/charts").ChartZoom;
+    onZoomChange?: (zoom: import("../lib/charts").ChartZoom) => void;
+    showToolbar?: boolean;
+    highlightScope?: import("../lib/charts").HighlightScope;
+    animated?: boolean;
+    locale?: string;
+};
+export type BarChartProps = CartesianChartProps & {
+    layout?: "vertical" | "horizontal";
+    stacked?: boolean;
+    borderRadius?: number;
+    categoryGapRatio?: number;
+    barGapRatio?: number;
+};
+export type LineChartProps = CartesianChartProps & {
+    curve?: ChartCurve;
+    area?: boolean;
+    showMark?: boolean;
+    stacked?: boolean;
+};
+export type ScatterPoint = {
+    id?: string | number;
+    x: number;
+    y: number;
+    z?: number;
+    label?: string;
+};
+export type ScatterSeries = {
+    id?: string;
+    label?: string;
+    color?: string;
+    data: ScatterPoint[];
+};
+export declare function BarChart({ xAxis, yAxis, series, dataset, height, width, layout, stacked, borderRadius, colors, hideLegend, hideGrid, margin, className, barGapRatio, zoom, onZoomChange, showToolbar, highlightScope, animated, locale, }: BarChartProps): import("react").JSX.Element;
+export declare function LineChart({ xAxis, yAxis, series, dataset, height, width, colors, hideLegend, hideGrid, margin, className, curve, area, showMark, stacked, zoom, onZoomChange, showToolbar, highlightScope, animated, locale, }: LineChartProps): import("react").JSX.Element;
+export declare function AreaChart(props: LineChartProps): import("react").JSX.Element;
+export type SparkLineChartProps = {
+    data: number[];
+    height?: number;
+    width?: number;
+    color?: string;
+    area?: boolean;
+    curve?: ChartCurve;
+    className?: string;
+    showHighlight?: boolean;
+    plotType?: "line" | "bar";
+};
+export declare function SparkLineChart({ data, height, width, color, area, curve, className, showHighlight, plotType, }: SparkLineChartProps): import("react").JSX.Element;
+export type ScatterChartProps = {
+    series: ScatterSeries[];
+    xAxis?: ChartAxisConfig[];
+    yAxis?: ChartAxisConfig[];
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    hideGrid?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+    bubble?: boolean;
+    renderer?: ScatterRenderer;
+};
+export declare function ScatterChart({ series, xAxis, yAxis, height, width, colors, hideLegend, hideGrid, margin, className, bubble, renderer, }: ScatterChartProps): import("react").JSX.Element;
+export declare function BubbleChart(props: ScatterChartProps): import("react").JSX.Element;
+export type RangeSeries = {
+    id?: string;
+    label?: string;
+    color?: string;
+    data: Array<[number, number] | null>;
+};
+export type RangeBarChartProps = Omit<CartesianChartProps, "series"> & {
+    series: RangeSeries[];
+    layout?: "vertical" | "horizontal";
+};
+export declare function RangeBarChart({ xAxis, yAxis, series, height, width, colors, hideLegend, hideGrid, margin, className, }: RangeBarChartProps): import("react").JSX.Element;
+export type RangeAreaChartProps = Omit<CartesianChartProps, "series"> & {
+    series: RangeSeries[];
+    curve?: ChartCurve;
+};
+export declare function RangeAreaChart({ xAxis, yAxis, series, height, width, colors, hideLegend, hideGrid, margin, className, curve, }: RangeAreaChartProps): import("react").JSX.Element;
+export type WaterfallChartProps = CartesianChartProps;
+export declare function WaterfallChart({ xAxis, yAxis, series, height, width, colors, hideLegend, hideGrid, margin, className, }: WaterfallChartProps): import("react").JSX.Element;
+export type BoxPlotSeries = {
+    id?: string;
+    label?: string;
+    color?: string;
+    data: Array<BoxPlotStats | number[] | null>;
+};
+export type BoxPlotChartProps = Omit<CartesianChartProps, "series"> & {
+    series: BoxPlotSeries[];
+};
+export declare function BoxPlotChart({ xAxis, yAxis, series, height, width, colors, hideLegend, hideGrid, margin, className, }: BoxPlotChartProps): import("react").JSX.Element;
+export type CandleDatum = {
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+};
+export type CandlestickChartProps = Omit<CartesianChartProps, "series"> & {
+    series: Array<{
+        id?: string;
+        label?: string;
+        color?: string;
+        data: Array<CandleDatum | null>;
+    }>;
+    variant?: "candle" | "ohlc";
+};
+export declare function CandlestickChart({ xAxis, yAxis, series, height, width, colors, hideLegend, hideGrid, margin, className, variant, }: CandlestickChartProps): import("react").JSX.Element;
+export declare function OhlcChart(props: CandlestickChartProps): import("react").JSX.Element;
+//# sourceMappingURL=cartesian-charts.d.ts.map

package/dist/composites/cartesian-charts.d.ts.map

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

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" });
+}