@spatika/react 1.0.0 → 1.2.0

package/dist/composites/chart-ui.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { cn } from "../lib/cn";
+import { DEFAULT_CHART_MARGIN, chartColor, formatAxisValue, formatChartNumber, } from "../lib/charts";
+export function resolveMargin(margin) {
+    return {
+        top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
+        right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
+        bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
+        left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
+    };
+}
+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();
+    }, [fallbackWidth, fallbackHeight, ref]);
+    return size;
+}
+export function ChartFrame({ slot, className, width, height = 280, margin, legend, hiddenIds, onToggleSeries, hover, "aria-label": ariaLabel, children, }) {
+    const surfaceRef = useRef(null);
+    const measured = useElementSize(surfaceRef, width ?? 320, height);
+    const plotWidth = width ?? measured.width;
+    const plotHeight = height;
+    const m = resolveMargin(margin);
+    return (_jsxs("div", { "data-slot": slot, className: cn("spk-chart", className), role: "img", "aria-label": ariaLabel, children: [legend?.length ? (_jsx(ChartLegend, { items: legend, hiddenIds: hiddenIds, onToggle: onToggleSeries })) : null, _jsxs("div", { ref: surfaceRef, className: "spk-chart-surface", style: { height: plotHeight }, children: [plotWidth > 0 ? children({ width: plotWidth, height: plotHeight, m }) : null, _jsx(ChartTooltip, { hover: hover ?? null, boundsWidth: plotWidth })] })] }));
+}
+export function ChartLegend({ items, hiddenIds, onToggle, }) {
+    return (_jsx("div", { className: "spk-chart-legend", children: items.map((item) => (_jsxs("button", { type: "button", className: "spk-chart-legend-item", "data-hidden": hiddenIds?.has(item.id) ? "true" : undefined, onClick: () => onToggle?.(item.id), children: [_jsx("span", { className: "spk-chart-swatch", style: { background: item.color } }), item.label] }, item.id))) }));
+}
+export function ChartTooltip({ hover, boundsWidth, }) {
+    if (!hover || !hover.items.length)
+        return null;
+    const left = clampTooltip(hover.x, boundsWidth);
+    return (_jsxs("div", { className: "spk-chart-tooltip", style: { left, top: hover.y }, role: "tooltip", children: [hover.title ? _jsx("p", { className: "spk-chart-tooltip-title", children: hover.title }) : null, _jsx("ul", { children: hover.items.map((item) => (_jsxs("li", { children: [_jsx("span", { className: "spk-chart-swatch", style: { background: item.color } }), _jsx("span", { children: item.label }), _jsx("strong", { children: item.value })] }, item.label))) })] }));
+}
+function clampTooltip(x, width) {
+    return clampNum(x, 72, Math.max(72, width - 72));
+}
+function clampNum(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+export function CartesianGrid({ ticks, scale, left, right, top, bottom, }) {
+    return (_jsxs("g", { "data-slot": "chart-grid", children: [ticks.map((tick) => (_jsx("line", { className: "spk-chart-grid", x1: left, x2: right, y1: scale(tick), y2: scale(tick) }, tick))), _jsx("line", { className: "spk-chart-axis", x1: left, x2: right, y1: bottom, y2: bottom }), _jsx("line", { className: "spk-chart-axis", x1: left, x2: left, y1: top, y2: bottom })] }));
+}
+export function ValueAxis({ ticks, scale, left, width, }) {
+    return (_jsxs("g", { "data-slot": "chart-y-axis", children: [ticks.map((tick) => (_jsx("text", { className: "spk-chart-tick", x: left - 8, y: scale(tick), textAnchor: "end", dominantBaseline: "middle", children: formatChartNumber(tick) }, tick))), width ? (_jsx("text", { className: "spk-chart-axis-label", x: 12, y: width / 2, transform: `rotate(-90 12 ${width / 2})`, textAnchor: "middle" })) : null] }));
+}
+export function CategoryAxis({ labels, position, y, }) {
+    const maxLabels = labels.length > 12 ? Math.ceil(labels.length / 8) : 1;
+    return (_jsx("g", { "data-slot": "chart-x-axis", children: labels.map((label, index) => {
+            if (index % maxLabels !== 0)
+                return null;
+            return (_jsx("text", { className: "spk-chart-tick", x: position(index), y: y + 16, textAnchor: "middle", children: formatAxisValue(label) }, `${index}-${String(label)}`));
+        }) }));
+}
+export function useHiddenSeries(ids) {
+    const [hidden, setHidden] = useState(new Set());
+    const toggle = (id) => {
+        setHidden((current) => {
+            const next = new Set(current);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const visible = ids.filter((id) => !hidden.has(id));
+    return { hidden, toggle, visible };
+}
+export function seriesMeta(series, colors) {
+    return series.map((item, index) => ({
+        id: item.id ?? item.label ?? `series-${index}`,
+        label: item.label ?? item.id ?? `Series ${index + 1}`,
+        color: item.color ?? chartColor(index, colors),
+    }));
+}
+export function useChartHover() {
+    const [hover, setHover] = useState(null);
+    return { hover, setHover, clear: () => setHover(null) };
+}
+export function categoryLabels(axis, length = 0) {
+    if (axis?.data?.length)
+        return axis.data;
+    return Array.from({ length }, (_, i) => i + 1);
+}
+export function formatSeriesValue(value) {
+    if (value == null)
+        return "—";
+    if (Array.isArray(value))
+        return `${formatChartNumber(value[0])} – ${formatChartNumber(value[1])}`;
+    return formatChartNumber(value);
+}

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

@@ -0,0 +1,37 @@
+import { type ChartAxisConfig, type ChartMargin } from "../lib/charts";
+import type { NumericSeries } from "./cartesian-charts";
+export type BarChart3DProps = {
+    series: NumericSeries[];
+    xAxis?: ChartAxisConfig[];
+    yAxis?: ChartAxisConfig[];
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    hideGrid?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+    depth?: number;
+};
+export declare function BarChart3D({ series, xAxis, yAxis, height, width, colors, hideLegend, hideGrid, margin, className, depth, }: BarChart3DProps): import("react").JSX.Element;
+export type PieChart3DProps = {
+    series: Array<{
+        data: Array<{
+            id?: string | number;
+            value: number;
+            label?: string;
+            color?: string;
+        }>;
+        innerRadius?: number;
+        paddingAngle?: number;
+    }>;
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+    thickness?: number;
+};
+export declare function PieChart3D({ series, height, width, colors, hideLegend, margin, className, thickness, }: PieChart3DProps): import("react").JSX.Element;
+//# sourceMappingURL=charts-3d.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"charts-3d.d.ts","sourceRoot":"","sources":["../../src/composites/charts-3d.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAWvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAaxD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAU,GACX,EAAE,eAAe,+BAiHjB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,KAAK,CAAC;YAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACrF,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC,CAAC;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,SAAc,GACf,EAAE,eAAe,+BAoHjB"}

package/dist/composites/charts-3d.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extent, formatChartNumber, niceTicks, pieSlices, } from "../lib/charts";
+import { ellipseSlicePath, ellipseWallPath, isoBoxFaces, isoPoint } from "../lib/iso";
+import { CartesianGrid, ChartFrame, categoryLabels, formatSeriesValue, seriesMeta, useChartHover, useHiddenSeries, } from "./chart-ui";
+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),
+    };
+}
+export function BarChart3D({ series, xAxis, yAxis, height = 280, width, colors, hideLegend, hideGrid, margin, className, depth = 14, }) {
+    const meta = seriesMeta(series, colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    const categories = categoryLabels(xAxis?.[0], series[0]?.data?.length ?? 0);
+    const values = series.flatMap((item) => (item.data ?? []).map((v) => v ?? 0));
+    const domain = [
+        yAxis?.[0]?.min ?? Math.min(0, extent(values, 0.08)[0]),
+        yAxis?.[0]?.max ?? extent(values, 0.08)[1],
+    ];
+    const ticks = niceTicks(domain[0], domain[1], 4);
+    return (_jsx(ChartFrame, { slot: "bar-chart-3d", className: className, width: width, height: height, margin: margin ?? { top: 24, right: 28, bottom: 40, left: 48 }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": "3D bar chart", children: ({ width: w, height: h, m }) => {
+            const plot = box(w, h, m);
+            const originX = plot.left + plot.iw * 0.16;
+            const originY = plot.bottom - 6;
+            const visible = series
+                .map((item, s) => ({ item, info: meta[s], s }))
+                .filter(({ info }) => !hidden.has(info.id));
+            const n = Math.max(categories.length, 1);
+            const groupW = Math.max(18, (plot.iw * 0.72) / n);
+            const barW = Math.max(8, (groupW * 0.78) / Math.max(visible.length, 1));
+            const gap = Math.max(2, (groupW - barW * visible.length) / Math.max(visible.length + 1, 1));
+            const maxH = plot.ih * 0.78;
+            const yScale = (value) => ((value - domain[0]) / (domain[1] - domain[0] || 1)) * maxH;
+            const yAt = (value) => originY - yScale(value);
+            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 })), ticks.map((tick) => (_jsx("text", { className: "spk-chart-tick", x: plot.left - 8, y: yAt(tick), textAnchor: "end", children: formatChartNumber(tick) }, tick))), categories.map((label, i) => {
+                        const x0 = i * groupW;
+                        const foot = isoPoint(x0 + groupW / 2, 0, depth, originX, originY);
+                        return (_jsx("text", { className: "spk-chart-tick", x: foot.x, y: plot.bottom + 16, textAnchor: "middle", children: String(label) }, String(label)));
+                    }), categories.flatMap((_, i) => visible.map(({ item, info }, s) => {
+                        const value = item.data?.[i] ?? 0;
+                        const barH = Math.max(2, yScale(value));
+                        const x = i * groupW + gap + s * (barW + gap * 0.2);
+                        const faces = isoBoxFaces(x, 0, 0, barW, barH, depth, originX, originY);
+                        const color = info.color;
+                        return (_jsxs("g", { className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                x: event.nativeEvent.offsetX,
+                                y: event.nativeEvent.offsetY,
+                                title: String(categories[i]),
+                                items: [
+                                    {
+                                        color,
+                                        label: info.label,
+                                        value: formatSeriesValue(value),
+                                    },
+                                ],
+                            }), onMouseLeave: clear, children: [_jsx("path", { d: faces.side, fill: `color-mix(in srgb, ${color} 78%, black)` }), _jsx("path", { d: faces.top, fill: `color-mix(in srgb, ${color} 72%, white)` }), _jsx("path", { d: faces.front, fill: color })] }, `${info.id}-${i}`));
+                    }))] }));
+        } }));
+}
+export function PieChart3D({ series, height = 280, width, colors, hideLegend, margin, className, thickness = 18, }) {
+    const first = series[0] ?? { data: [] };
+    const meta = seriesMeta(first.data.map((item, i) => ({
+        id: String(item.id ?? item.label ?? i),
+        label: item.label ?? `Slice ${i + 1}`,
+        color: item.color,
+    })), colors);
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const { hover, setHover, clear } = useChartHover();
+    return (_jsx(ChartFrame, { slot: "pie-chart-3d", className: className, width: width, height: height, margin: margin ?? { top: 12, right: 12, bottom: 20, left: 12 }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": "3D pie chart", children: ({ width: w, height: h, m }) => {
+            const cx = w / 2;
+            const cy = (h - thickness) / 2;
+            const rx = Math.min(w - m.left - m.right, (h - m.top - m.bottom - thickness) * 1.7) / 2;
+            const ry = rx * 0.42;
+            const visible = first.data.map((item, i) => (hidden.has(meta[i].id) ? 0 : item.value));
+            const slices = pieSlices(visible, {
+                cx,
+                cy,
+                innerRadius: 0,
+                outerRadius: rx,
+                paddingAngle: first.paddingAngle,
+            });
+            const ordered = slices
+                .map((slice, i) => ({ slice, info: meta[i], item: first.data[i] }))
+                .filter(({ info, slice }) => !hidden.has(info.id) && slice.path)
+                .sort((a, b) => ellipsePointY(cx, cy, rx, ry, a.slice.midAngle) - ellipsePointY(cx, cy, rx, ry, b.slice.midAngle));
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [ordered.map(({ slice, info, item }) => (_jsx("g", { className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: info.label,
+                            items: [
+                                {
+                                    color: info.color,
+                                    label: info.label,
+                                    value: `${formatChartNumber(item.value)} (${Math.round(slice.percent * 100)}%)`,
+                                },
+                            ],
+                        }), onMouseLeave: clear, children: _jsx("path", { d: ellipseWallPath(cx, cy, rx, ry, slice.startAngle, slice.endAngle, thickness), fill: `color-mix(in srgb, ${info.color} 70%, black)` }) }, `${info.id}-wall`))), ordered.map(({ slice, info, item }) => (_jsxs("g", { className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: info.label,
+                            items: [
+                                {
+                                    color: info.color,
+                                    label: info.label,
+                                    value: `${formatChartNumber(item.value)} (${Math.round(slice.percent * 100)}%)`,
+                                },
+                            ],
+                        }), onMouseLeave: clear, children: [_jsx("path", { d: ellipseSlicePath(cx, cy, rx, ry, slice.startAngle, slice.endAngle), fill: info.color }), slice.percent > 0.08 ? (_jsxs("text", { className: "spk-chart-label", x: cx + Math.cos(((slice.midAngle - 90) * Math.PI) / 180) * rx * 0.55, y: cy + Math.sin(((slice.midAngle - 90) * Math.PI) / 180) * ry * 0.55, textAnchor: "middle", dominantBaseline: "middle", fill: "var(--primary-foreground)", children: [Math.round(slice.percent * 100), "%"] })) : null] }, info.id)))] }));
+        } }));
+}
+function ellipsePointY(cx, cy, rx, ry, angleDeg) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return cy + ry * Math.sin(rad);
+}

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

@@ -0,0 +1,89 @@
+import { type ChartAxisConfig, type ChartMargin, type SankeyLink, type SankeyNode, type TreeNode } from "../lib/charts";
+export type HeatDatum = {
+    x: number;
+    y: number;
+    value: number;
+};
+export type HeatmapProps = {
+    xAxis?: ChartAxisConfig[];
+    yAxis?: ChartAxisConfig[];
+    series: Array<{
+        data: HeatDatum[];
+    }>;
+    height?: number;
+    width?: number;
+    hideLegend?: boolean;
+    showColorScale?: boolean;
+    margin?: ChartMargin;
+    className?: string;
+};
+export declare function Heatmap({ xAxis, yAxis, series, height, width, hideLegend, showColorScale, margin, className, }: HeatmapProps): import("react").JSX.Element;
+export type FunnelDatum = {
+    id?: string;
+    label: string;
+    value: number;
+    color?: string;
+};
+export type FunnelSeries = {
+    id?: string;
+    label?: string;
+    data: FunnelDatum[];
+};
+export type FunnelLabelPosition = "inside" | "outside" | "both";
+export type FunnelChartProps = {
+    series: FunnelSeries[];
+    height?: number;
+    width?: number;
+    colors?: string[];
+    hideLegend?: boolean;
+    className?: string;
+    variant?: "funnel" | "pyramid";
+    gap?: number;
+    labelPosition?: FunnelLabelPosition;
+    valueFormatter?: (value: number, percent: number) => string;
+};
+export declare function FunnelChart({ series, height, width, colors, hideLegend, className, variant, gap, labelPosition, valueFormatter, }: FunnelChartProps): import("react").JSX.Element;
+export declare function PyramidChart(props: FunnelChartProps): import("react").JSX.Element;
+export type SankeyChartProps = {
+    series: {
+        data: SankeyNode[];
+        links: SankeyLink[];
+    };
+    height?: number;
+    width?: number;
+    colors?: string[];
+    className?: string;
+};
+export declare function SankeyChart({ series, height, width, colors, className }: SankeyChartProps): import("react").JSX.Element;
+export type TreemapProps = {
+    series: Array<{
+        data: TreeNode[];
+    }>;
+    height?: number;
+    width?: number;
+    colors?: string[];
+    className?: string;
+};
+export declare function Treemap({ series, height, width, colors, className }: TreemapProps): import("react").JSX.Element;
+export type SunburstChartProps = {
+    series: Array<{
+        data: TreeNode[];
+    }>;
+    height?: number;
+    width?: number;
+    colors?: string[];
+    className?: string;
+};
+export declare function SunburstChart({ series, height, width, colors, className }: SunburstChartProps): import("react").JSX.Element;
+export type ChordChartProps = {
+    series: {
+        data: string[];
+        matrix: number[][];
+    };
+    height?: number;
+    width?: number;
+    colors?: string[];
+    className?: string;
+};
+export declare function ChordChart({ series, height, width, colors, className }: ChordChartProps): import("react").JSX.Element;
+//# sourceMappingURL=flow-charts.d.ts.map

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

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

package/dist/composites/flow-charts.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { chartColor, chordLayout, formatChartNumber, funnelLayout, heatColor, pyramidLayout, sankeyLayout, squarify, sunburstLayout, } from "../lib/charts";
+import { ChartFrame, categoryLabels, seriesMeta, useChartHover, useHiddenSeries, } from "./chart-ui";
+export function Heatmap({ xAxis, yAxis, series, height = 280, width, hideLegend, showColorScale, margin, className, }) {
+    const cells = series[0]?.data ?? [];
+    const xs = categoryLabels(xAxis?.[0], Math.max(...cells.map((c) => c.x), 0) + 1);
+    const ys = categoryLabels(yAxis?.[0], Math.max(...cells.map((c) => c.y), 0) + 1);
+    const values = cells.map((c) => c.value);
+    const min = Math.min(...values, 0);
+    const max = Math.max(...values, 1);
+    const { hover, setHover, clear } = useChartHover();
+    const reactId = useId().replace(/:/g, "");
+    const scaleId = `spk-heat-scale-${reactId}`;
+    const colorScale = showColorScale ?? !hideLegend;
+    return (_jsx(ChartFrame, { slot: "heatmap", className: className, width: width, height: height, margin: margin ?? { top: colorScale ? 32 : 12, right: 12, bottom: 36, left: 72 }, hover: hover, "aria-label": "Heatmap", children: ({ width: w, height: h, m }) => {
+            const iw = Math.max(1, w - m.left - m.right);
+            const ih = Math.max(1, h - m.top - m.bottom);
+            const cw = iw / Math.max(xs.length, 1);
+            const ch = ih / Math.max(ys.length, 1);
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [colorScale ? (_jsxs("g", { className: "spk-chart-color-scale", "data-slot": "heatmap-color-scale", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: scaleId, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: heatColor(0) }), _jsx("stop", { offset: "50%", stopColor: heatColor(0.5) }), _jsx("stop", { offset: "100%", stopColor: heatColor(1) })] }) }), _jsx("text", { className: "spk-chart-muted", x: m.left, y: m.top - 16, children: formatChartNumber(min) }), _jsx("text", { className: "spk-chart-muted", x: m.left + iw, y: m.top - 16, textAnchor: "end", children: formatChartNumber(max) }), _jsx("rect", { x: m.left, y: m.top - 12, width: iw, height: 6, rx: 3, fill: `url(#${scaleId})` })] })) : null, ys.map((label, y) => (_jsx("text", { className: "spk-chart-tick", x: m.left - 8, y: m.top + y * ch + ch / 2, textAnchor: "end", dominantBaseline: "middle", children: String(label) }, `y-${String(label)}`))), xs.map((label, x) => (_jsx("text", { className: "spk-chart-tick", x: m.left + x * cw + cw / 2, y: h - m.bottom + 16, textAnchor: "middle", children: String(label) }, `x-${String(label)}`))), cells.map((cell, i) => {
+                        const t = (cell.value - min) / (max - min || 1);
+                        return (_jsx("rect", { x: m.left + cell.x * cw + 1.5, y: m.top + cell.y * ch + 1.5, width: Math.max(1, cw - 3), height: Math.max(1, ch - 3), rx: 4, fill: heatColor(t), className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                x: event.nativeEvent.offsetX,
+                                y: event.nativeEvent.offsetY,
+                                title: `${xs[cell.x]} · ${ys[cell.y]}`,
+                                items: [
+                                    {
+                                        color: heatColor(t),
+                                        label: "value",
+                                        value: formatChartNumber(cell.value),
+                                    },
+                                ],
+                            }), onMouseLeave: clear }, i));
+                    })] }));
+        } }));
+}
+export function FunnelChart({ series, height = 300, width, colors, hideLegend, className, variant = "funnel", gap = 6, labelPosition, valueFormatter, }) {
+    const stages = series[0]?.data ?? [];
+    const comparison = series.length > 1;
+    const position = labelPosition ?? (comparison ? "both" : "inside");
+    const formatValue = valueFormatter ?? ((value) => formatChartNumber(value));
+    const meta = seriesMeta(stages.map((item) => ({ id: item.id ?? item.label, label: item.label, color: item.color })), colors);
+    const { hover, setHover, clear } = useChartHover();
+    const ids = meta.map((item) => item.id);
+    const { hidden, toggle } = useHiddenSeries(ids);
+    const showInside = position === "inside" || position === "both";
+    const showOutside = position === "outside" || position === "both";
+    return (_jsx(ChartFrame, { slot: variant === "pyramid" ? "pyramid-chart" : "funnel-chart", className: className, width: width, height: height, margin: {
+            top: 8,
+            right: showOutside ? 56 : 8,
+            bottom: 8,
+            left: 8,
+        }, legend: hideLegend ? undefined : meta, hiddenIds: hidden, onToggleSeries: toggle, hover: hover, "aria-label": variant === "pyramid" ? "Pyramid chart" : "Funnel chart", children: ({ width: w, height: h, m }) => {
+            const visibleIndexes = stages
+                .map((_, i) => i)
+                .filter((i) => !hidden.has(meta[i].id));
+            const visibleSeries = series.map((item) => ({
+                ...item,
+                data: visibleIndexes.map((i) => item.data[i]).filter((row) => row != null),
+            }));
+            const maxValue = Math.max(...visibleSeries.flatMap((item) => item.data.map((row) => row.value)), 1);
+            const innerW = w - m.left - m.right;
+            const innerH = h - m.top - m.bottom;
+            const layouts = visibleSeries.map((item) => {
+                const rows = item.data.map((row, i) => ({
+                    ...row,
+                    color: meta[visibleIndexes[i] ?? i]?.color,
+                }));
+                return variant === "pyramid"
+                    ? pyramidLayout(rows, innerW, innerH)
+                    : funnelLayout(rows, innerW, innerH, gap, maxValue);
+            });
+            const drawOrder = layouts.map((_, i) => i).sort((a, b) => (a === 0 ? 1 : b === 0 ? -1 : a - b));
+            return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: drawOrder.flatMap((seriesIndex) => {
+                    const layout = layouts[seriesIndex] ?? [];
+                    const primary = seriesIndex === 0;
+                    return layout.map((row, i) => {
+                        const info = meta.find((item) => item.label === row.label) ?? meta[visibleIndexes[i] ?? i];
+                        const d = `M${m.left + row.topLeft} ${m.top + row.y} L${m.left + row.topRight} ${m.top + row.y} L${m.left + row.bottomRight} ${m.top + row.y + row.height} L${m.left + row.bottomLeft} ${m.top + row.y + row.height} Z`;
+                        const valueText = formatValue(row.value, row.percent);
+                        const inside = showInside &&
+                            primary &&
+                            (hideLegend && !comparison ? row.label : valueText);
+                        const outside = showOutside && !primary ? valueText : showOutside && !comparison ? valueText : null;
+                        return (_jsxs("g", { children: [_jsx("path", { d: d, fill: info.color, fillOpacity: primary ? 1 : 0.14, stroke: primary ? "none" : info.color, strokeWidth: primary ? 0 : 1.75, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                        x: event.nativeEvent.offsetX,
+                                        y: event.nativeEvent.offsetY,
+                                        title: row.label,
+                                        items: [
+                                            {
+                                                color: info.color,
+                                                label: visibleSeries[seriesIndex]?.label ?? row.label,
+                                                value: formatChartNumber(row.value),
+                                            },
+                                        ],
+                                    }), onMouseLeave: clear }), inside ? (_jsx("text", { className: "spk-chart-label", fill: "var(--primary-foreground)", x: w / 2, y: m.top + row.y + row.height / 2, textAnchor: "middle", dominantBaseline: "middle", children: inside })) : null, outside ? (_jsx("text", { className: "spk-chart-tick", x: m.left + Math.max(row.topRight, row.bottomRight) + 8, y: m.top + row.y + row.height / 2, dominantBaseline: "middle", children: outside })) : null] }, `${seriesIndex}-${row.label}`));
+                    });
+                }) }));
+        } }));
+}
+export function PyramidChart(props) {
+    return _jsx(FunnelChart, { ...props, variant: "pyramid" });
+}
+export function SankeyChart({ series, height = 300, width, colors, className }) {
+    const { hover, setHover, clear } = useChartHover();
+    return (_jsx(ChartFrame, { slot: "sankey-chart", className: className, width: width, height: height, margin: { top: 12, right: 88, bottom: 12, left: 12 }, hover: hover, "aria-label": "Sankey chart", children: ({ width: w, height: h, m }) => {
+            const layout = sankeyLayout(series.data, series.links, w - m.left - m.right, h - m.top - m.bottom);
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [layout.links.map((link, i) => (_jsx("path", { d: link.path, transform: `translate(${m.left} ${m.top})`, fill: chartColor(i, colors), fillOpacity: 0.28, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: `${link.source} → ${link.target}`,
+                            items: [
+                                {
+                                    color: chartColor(i, colors),
+                                    label: "flow",
+                                    value: formatChartNumber(link.value),
+                                },
+                            ],
+                        }), onMouseLeave: clear }, `${link.source}-${link.target}-${i}`))), layout.nodes.map((node, i) => (_jsxs("g", { transform: `translate(${m.left} ${m.top})`, children: [_jsx("rect", { x: node.x, y: node.y, width: node.width, height: node.height, rx: 4, fill: node.color ?? chartColor(i, colors) }), _jsx("text", { className: "spk-chart-tick", x: node.x + node.width + 6, y: node.y + node.height / 2, dominantBaseline: "middle", children: node.label })] }, node.id)))] }));
+        } }));
+}
+export function Treemap({ series, height = 280, width, colors, className }) {
+    const { hover, setHover, clear } = useChartHover();
+    const data = series[0]?.data ?? [];
+    return (_jsx(ChartFrame, { slot: "treemap", className: className, width: width, height: height, margin: { top: 4, right: 4, bottom: 4, left: 4 }, hover: hover, "aria-label": "Treemap", children: ({ width: w, height: h, m }) => {
+            const rects = squarify(data, 0, 0, w - m.left - m.right, h - m.top - m.bottom);
+            return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: rects.map((rect, i) => (_jsxs("g", { transform: `translate(${m.left} ${m.top})`, children: [_jsx("rect", { x: rect.x + 1.5, y: rect.y + 1.5, width: Math.max(0, rect.w - 3), height: Math.max(0, rect.h - 3), rx: 8, fill: rect.color ?? chartColor(i, colors), className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                                x: event.nativeEvent.offsetX,
+                                y: event.nativeEvent.offsetY,
+                                title: rect.label,
+                                items: [
+                                    {
+                                        color: rect.color ?? chartColor(i, colors),
+                                        label: rect.label,
+                                        value: formatChartNumber(rect.value),
+                                    },
+                                ],
+                            }), onMouseLeave: clear }), rect.w > 56 && rect.h > 28 ? (_jsx("text", { className: "spk-chart-label", x: rect.x + 10, y: rect.y + 20, children: rect.label })) : null] }, rect.id))) }));
+        } }));
+}
+export function SunburstChart({ series, height = 300, width, colors, className }) {
+    const { hover, setHover, clear } = useChartHover();
+    const data = series[0]?.data ?? [];
+    return (_jsx(ChartFrame, { slot: "sunburst-chart", className: className, width: width, height: height, margin: { top: 8, right: 8, bottom: 8, left: 8 }, hover: hover, "aria-label": "Sunburst chart", children: ({ width: w, height: h }) => {
+            const cx = w / 2;
+            const cy = h / 2;
+            const outer = Math.min(w, h) * 0.42;
+            const slices = sunburstLayout(data, cx, cy, outer * 0.22, outer);
+            return (_jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: slices.map((slice, i) => (_jsx("path", { d: slice.path, fill: slice.color ?? chartColor(slice.depth + i, colors), stroke: "var(--background)", strokeWidth: 1.5, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                        x: event.nativeEvent.offsetX,
+                        y: event.nativeEvent.offsetY,
+                        title: slice.label,
+                        items: [
+                            {
+                                color: slice.color ?? chartColor(i, colors),
+                                label: slice.label,
+                                value: formatChartNumber(slice.value),
+                            },
+                        ],
+                    }), onMouseLeave: clear }, `${slice.id}-${i}`))) }));
+        } }));
+}
+export function ChordChart({ series, height = 300, width, colors, className }) {
+    const { hover, setHover, clear } = useChartHover();
+    const meta = seriesMeta(series.data.map((label) => ({ id: label, label })), colors);
+    return (_jsx(ChartFrame, { slot: "chord-chart", className: className, width: width, height: height, margin: { top: 24, right: 24, bottom: 24, left: 24 }, legend: meta, hover: hover, "aria-label": "Chord chart", children: ({ width: w, height: h }) => {
+            const cx = w / 2;
+            const cy = h / 2;
+            const outer = Math.min(w, h) * 0.38;
+            const inner = outer * 0.9;
+            const layout = chordLayout(series.data, series.matrix, cx, cy, inner, outer);
+            return (_jsxs("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, children: [layout.ribbons.map((ribbon, i) => (_jsx("path", { d: ribbon.path, fill: chartColor(ribbon.source, colors), fillOpacity: 0.28, className: "spk-chart-mark", onMouseEnter: (event) => setHover({
+                            x: event.nativeEvent.offsetX,
+                            y: event.nativeEvent.offsetY,
+                            title: `${series.data[ribbon.source]} → ${series.data[ribbon.target]}`,
+                            items: [
+                                {
+                                    color: chartColor(ribbon.source, colors),
+                                    label: "flow",
+                                    value: formatChartNumber(ribbon.value),
+                                },
+                            ],
+                        }), onMouseLeave: clear }, `${ribbon.source}-${ribbon.target}-${i}`))), layout.groups.map((group) => (_jsx("path", { d: group.path, fill: chartColor(group.index, colors) }, group.label)))] }));
+        } }));
+}