@skdx/angular-charts 0.1.0

package/fesm2022/skdx-angular-charts-internal.mjs

@@ -0,0 +1,1779 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, signal, Directive } from '@angular/core';
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/**
+ * Series colors, cycling through the `@skdx/tokens` scales so charts follow the
+ * active theme. Load `@skdx/tokens/css` (or any theme) for these to resolve.
+ */
+const SERIES_COLORS = [
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'neutral',
+]
+    .flatMap((scale) => [500, 700].map((shade) => `var(--skdx-color-${scale}-${shade})`))
+    // Interleave: every 500 first, then every 700.
+    .sort((a, b) => Number(a.endsWith('700)')) - Number(b.endsWith('700)')));
+const CHART_COLORS = {
+    axis: 'var(--skdx-color-border-strong)',
+    grid: 'var(--skdx-color-border-subtle)',
+    label: 'var(--skdx-color-text-muted)',
+    fontFamily: 'var(--skdx-font-family)',
+    fontSize: 'var(--skdx-font-size-xs)',
+};
+const seriesColor = (index, override) => override ?? SERIES_COLORS[index % SERIES_COLORS.length];
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** Maps `[d0, d1]` onto `[r0, r1]` linearly; a zero-width domain maps to `r0`. */
+function linearScale([d0, d1], [r0, r1]) {
+    const span = d1 - d0;
+    return (value) => (span === 0 ? r0 : r0 + ((value - d0) / span) * (r1 - r0));
+}
+/** Round tick values covering `[min, max]` with a 1/2/5 step, about `count` of them. */
+function niceTicks(min, max, count = 5) {
+    if (min === max)
+        return [min];
+    const raw = (max - min) / Math.max(1, count);
+    const magnitude = 10 ** Math.floor(Math.log10(raw));
+    const norm = raw / magnitude;
+    const step = (norm < 1.5 ? 1 : norm < 3.5 ? 2 : norm < 7.5 ? 5 : 10) * magnitude;
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const ticks = [];
+    for (let v = start; v <= end + step / 2; v += step)
+        ticks.push(round(v));
+    return ticks;
+}
+/** Evenly spaced slots for `count` categories across `[r0, r1]` with 20% gaps. */
+function bandScale(count, [r0, r1]) {
+    const step = count === 0 ? 0 : (r1 - r0) / count;
+    const bandwidth = step * 0.8;
+    return {
+        step,
+        bandwidth,
+        start: (i) => r0 + i * step + (step - bandwidth) / 2,
+        center: (i) => r0 + (i + 0.5) * step,
+    };
+}
+const round = (v) => Number(v.toPrecision(12));
+/** Pixel coordinates rounded to 2 decimals, so the markup stays readable. */
+const px = (n) => Number(n.toFixed(2));
+const formatValue = (v) => new Intl.NumberFormat().format(round(v));
+/** SVG path through the points: straight segments, or a monotone cubic (Fritsch–Carlson) that never overshoots. */
+function pathThrough(points, curve = 'linear') {
+    if (points.length === 0)
+        return '';
+    const first = points[0];
+    if (curve === 'linear' || points.length < 3)
+        return `M${points.map((p) => `${p.x} ${p.y}`).join('L')}`;
+    const n = points.length;
+    const dx = points.slice(1).map((p, i) => p.x - points[i].x);
+    const dy = points.slice(1).map((p, i) => p.y - points[i].y);
+    const slope = dx.map((d, i) => (d === 0 ? 0 : dy[i] / d));
+    const m = [slope[0]];
+    for (let i = 1; i < n - 1; i++) {
+        const a = slope[i - 1];
+        const b = slope[i];
+        m.push(a * b <= 0 ? 0 : (a + b) / 2);
+    }
+    m.push(slope[n - 2]);
+    for (let i = 0; i < n - 1; i++) {
+        const s = slope[i];
+        if (s === 0) {
+            m[i] = 0;
+            m[i + 1] = 0;
+            continue;
+        }
+        const a = m[i] / s;
+        const b = m[i + 1] / s;
+        const h = Math.hypot(a, b);
+        if (h > 3) {
+            m[i] = (3 * a * s) / h;
+            m[i + 1] = (3 * b * s) / h;
+        }
+    }
+    let d = `M${first.x} ${first.y}`;
+    for (let i = 0; i < n - 1; i++) {
+        const p0 = points[i];
+        const p1 = points[i + 1];
+        const h = dx[i] / 3;
+        d += `C${px(p0.x + h)} ${px(p0.y + h * m[i])} ${px(p1.x - h)} ${px(p1.y - h * m[i + 1])} ${p1.x} ${p1.y}`;
+    }
+    return d;
+}
+/** Ticks at powers of ten covering `[min, max]` (both > 0), with 2× and 5× steps when a decade or less. */
+function logTicks(min, max) {
+    const lo = Math.floor(Math.log10(min));
+    const hi = Math.ceil(Math.log10(max));
+    const steps = hi - lo <= 1 ? [1, 2, 5] : [1];
+    const ticks = [];
+    for (let k = lo; k <= hi; k++)
+        for (const s of steps)
+            ticks.push(round(s * 10 ** k));
+    return ticks.filter((t) => t >= min / 1.0001 && t <= max * 1.0001);
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const MARGIN$1 = { top: 16, right: 16, bottom: 32, left: 48 };
+function plotBox(width, height, margin = MARGIN$1) {
+    return {
+        x: margin.left,
+        y: margin.top,
+        width: Math.max(0, width - margin.left - margin.right),
+        height: Math.max(0, height - margin.top - margin.bottom),
+    };
+}
+const size = (input, w = 600, h = 300) => ({
+    width: input.width ?? w,
+    height: input.height ?? h,
+});
+const LEGEND_HEIGHT = 20;
+/** Vertical room the legend row takes, to shift the plot down by. */
+const legendTop = (input) => (input.legend ? LEGEND_HEIGHT : 0);
+const CHAR = 6.5;
+/** One row of swatches and names along the top edge, wrapping when it runs out of width. */
+function legendShapes(items, width) {
+    const shapes = [];
+    let x = 8;
+    let y = 10;
+    for (const item of items) {
+        const w = 18 + item.name.length * CHAR;
+        if (x + w > width - 8 && x > 8) {
+            x = 8;
+            y += LEGEND_HEIGHT;
+        }
+        shapes.push({ kind: 'rect', part: 'legend-swatch', x, y: y - 5, width: 10, height: 10, fill: item.color }, {
+            kind: 'text',
+            part: 'legend-label',
+            x: x + 14,
+            y,
+            text: item.name,
+            baseline: 'middle',
+            fill: CHART_COLORS.label,
+        });
+        x += w + 12;
+    }
+    return shapes;
+}
+/** The common tail of every layout: size, legend decorations and the tooltip switch. */
+function canvas(input, width, height, legend = []) {
+    return {
+        width,
+        height,
+        tooltip: input.tooltip ?? true,
+        shapes: input.legend ? legendShapes(legend, width) : [],
+    };
+}
+/** A tooltip box next to the pointer, kept inside the canvas. */
+function tooltipShapes(x, y, text, width, height) {
+    const w = text.length * CHAR + 12;
+    const h = 22;
+    const bx = Math.max(0, Math.min(width - w, x + 12));
+    const by = Math.max(0, Math.min(height - h, y - h - 6));
+    return [
+        {
+            kind: 'rect',
+            part: 'tooltip',
+            x: px(bx),
+            y: px(by),
+            width: px(w),
+            height: h,
+            fill: 'var(--skdx-color-surface-raised)',
+            stroke: CHART_COLORS.axis,
+        },
+        {
+            kind: 'text',
+            part: 'tooltip-label',
+            x: px(bx + 6),
+            y: px(by + h / 2),
+            text,
+            baseline: 'middle',
+            fill: 'var(--skdx-color-text-default)',
+        },
+    ];
+}
+/** `[min, max]` of the values, widened to include zero when asked; `[0, 0]` when empty. */
+function extent(values, includeZero) {
+    if (values.length === 0)
+        return [0, 0];
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    return includeZero ? [Math.min(0, min), Math.max(0, max)] : [min, max];
+}
+/** A nice-ticked linear axis over `[min, max]` mapped onto `range`. */
+function axis([min, max], range, log = false) {
+    if (log) {
+        const lo = Math.max(min, Number.EPSILON);
+        const ticks = logTicks(lo, Math.max(max, lo));
+        const domain = [Math.log10(lo), Math.log10(Math.max(max, lo))];
+        const lin = linearScale(domain, range);
+        const scale = (v) => lin(Math.log10(Math.max(v, Number.EPSILON)));
+        return {
+            scale,
+            domain,
+            ticks: ticks.map((v) => ({ pos: px(scale(v)), label: formatValue(v) })),
+            zero: px(range[0]),
+        };
+    }
+    const ticks = niceTicks(min, max);
+    const domain = [ticks[0], ticks[ticks.length - 1]];
+    const scale = linearScale(domain, range);
+    return {
+        scale,
+        domain,
+        ticks: ticks.map((v) => ({ pos: px(scale(v)), label: formatValue(v) })),
+        /** Pixel position of zero, clamped into the domain. */
+        zero: px(scale(Math.min(Math.max(0, domain[0]), domain[1]))),
+    };
+}
+/** Axes, ticks and scales shared by the category charts; `yExtent` is the y domain to cover. */
+function buildFrame(input, yExtent) {
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
+    const count = Math.max(input.categories?.length ?? 0, ...input.series.map((s) => s.data.length));
+    const categories = Array.from({ length: count }, (_, i) => input.categories?.[i] ?? String(i + 1));
+    const y = axis(yExtent, [plot.y + plot.height, plot.y]);
+    const x = bandScale(count, [plot.x, plot.x + plot.width]);
+    return {
+        frame: {
+            ...canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) }))),
+            plot,
+            xTicks: categories.map((label, i) => ({ pos: px(x.center(i)), label })),
+            yTicks: y.ticks,
+            baseline: y.zero,
+        },
+        x,
+        y: y.scale,
+        categories,
+    };
+}
+const values = (input) => input.series.flatMap((s) => s.data);
+/** Tooltip text for a value in a series: `Series, Category: 1,234`. */
+const markTitle = (series, category, value) => `${series}, ${category}: ${formatValue(value)}`;
+/**
+ * Tooltip shapes for the mark under the pointer, or none. Reads the mark's
+ * `<title>` and converts the pointer position into viewBox units.
+ */
+function hoverTooltip(target, svg, clientX, clientY, width, height) {
+    const mark = target?.closest?.('[data-skdx-part]');
+    const title = mark && Array.from(mark.children).find((c) => c.tagName.toLowerCase() === 'title')?.textContent;
+    if (!title)
+        return [];
+    const r = svg.getBoundingClientRect();
+    const x = r.width ? ((clientX - r.left) * width) / r.width : clientX;
+    const y = r.height ? ((clientY - r.top) * height) / r.height : clientY;
+    return tooltipShapes(x, y, title, width, height);
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** Grid, axis line and tick labels of an axis frame, as shapes. */
+function frameShapes(frame) {
+    const { plot, xTicks, yTicks, baseline } = frame;
+    const right = plot.x + plot.width;
+    return [
+        ...yTicks.map((t) => ({
+            kind: 'line',
+            part: 'grid',
+            x1: plot.x,
+            x2: right,
+            y1: t.pos,
+            y2: t.pos,
+            stroke: CHART_COLORS.grid,
+        })),
+        {
+            kind: 'line',
+            part: 'axis',
+            x1: plot.x,
+            x2: right,
+            y1: baseline,
+            y2: baseline,
+            stroke: CHART_COLORS.axis,
+        },
+        ...yTicks.map((t) => ({
+            kind: 'text',
+            part: 'y-label',
+            x: plot.x - 8,
+            y: t.pos,
+            text: t.label,
+            anchor: 'end',
+            baseline: 'middle',
+            fill: CHART_COLORS.label,
+        })),
+        ...xTicks.map((t) => ({
+            kind: 'text',
+            part: 'x-label',
+            x: t.pos,
+            y: plot.y + plot.height + 20,
+            text: t.label,
+            anchor: 'middle',
+            fill: CHART_COLORS.label,
+        })),
+    ];
+}
+const label = (x, y, text, extra = {}) => ({
+    kind: 'text',
+    part: 'label',
+    x,
+    y,
+    text,
+    fill: CHART_COLORS.label,
+    ...extra,
+});
+/** A dot with its native tooltip. */
+const point = (cx, cy, r, fill, title) => ({
+    kind: 'circle',
+    part: 'point',
+    cx,
+    cy,
+    r,
+    fill,
+    title,
+});
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+function layoutBarChart(input) {
+    const yExtent = input.stacked ? stackedExtent(input) : extent(values(input), true);
+    const { frame, x, y, categories } = buildFrame(input, yExtent);
+    const bars = [];
+    // Running stack tops per category, positives up and negatives down.
+    const up = new Array(categories.length).fill(0);
+    const down = new Array(categories.length).fill(0);
+    const groupWidth = input.stacked ? x.bandwidth : x.bandwidth / Math.max(1, input.series.length);
+    input.series.forEach((s, si) => {
+        const color = seriesColor(si, s.color);
+        categories.forEach((category, ci) => {
+            const value = s.data[ci];
+            if (value === undefined)
+                return;
+            let from = 0;
+            let to = value;
+            if (input.stacked) {
+                const stack = value >= 0 ? up : down;
+                from = stack[ci];
+                to = from + value;
+                stack[ci] = to;
+            }
+            const y0 = y(from);
+            const y1 = y(to);
+            bars.push({
+                kind: 'rect',
+                part: 'bar',
+                x: px(x.start(ci) + (input.stacked ? 0 : si * groupWidth)),
+                y: px(Math.min(y0, y1)),
+                width: px(groupWidth),
+                height: px(Math.abs(y1 - y0)),
+                fill: color,
+                title: markTitle(s.name, category, value),
+            });
+        });
+    });
+    return { ...frame, shapes: [...frameShapes(frame), ...bars, ...frame.shapes] };
+}
+function stackedExtent(input) {
+    let min = 0;
+    let max = 0;
+    const count = Math.max(0, ...input.series.map((s) => s.data.length));
+    for (let ci = 0; ci < count; ci++) {
+        let up = 0;
+        let down = 0;
+        for (const s of input.series) {
+            const v = s.data[ci] ?? 0;
+            if (v >= 0)
+                up += v;
+            else
+                down += v;
+        }
+        min = Math.min(min, down);
+        max = Math.max(max, up);
+    }
+    return [min, max];
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** A stroke per series and a dot per value; `close` turns a stroke into a filled area. */
+function polylines(input, { frame, x, y, categories }, area) {
+    const points = [];
+    const lines = [];
+    const areas = [];
+    input.series.forEach((s, si) => {
+        const color = seriesColor(si, s.color);
+        const coords = s.data.map((value, ci) => {
+            const p = { x: px(x.center(ci)), y: px(y(value)) };
+            points.push(point(p.x, p.y, 3, color, markTitle(s.name, categories[ci], value)));
+            return p;
+        });
+        const d = pathThrough(coords, input.curve);
+        lines.push({
+            kind: 'path',
+            part: 'line',
+            d,
+            stroke: color,
+            strokeWidth: 2,
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+        });
+        if (area) {
+            const first = coords[0];
+            const last = coords[coords.length - 1];
+            areas.push({
+                kind: 'path',
+                part: 'area',
+                d: d && first && last
+                    ? `${d}L${last.x} ${frame.baseline}L${first.x} ${frame.baseline}Z`
+                    : '',
+                fill: color,
+                fillOpacity: 0.25,
+            });
+        }
+    });
+    return {
+        ...frame,
+        shapes: [...frameShapes(frame), ...areas, ...lines, ...points, ...frame.shapes],
+    };
+}
+function layoutLineChart(input) {
+    return polylines(input, buildFrame(input, extent(values(input), false)), false);
+}
+function layoutAreaChart(input) {
+    return polylines(input, buildFrame(input, extent(values(input), true)), true);
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+function layoutScatterChart(input) {
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
+    const pairs = input.series.flatMap((s) => s.data);
+    const x = axis(extent(pairs.map((p) => p[0]), false), [plot.x, plot.x + plot.width]);
+    const y = axis(extent(pairs.map((p) => p[1]), false), [plot.y + plot.height, plot.y]);
+    const legend = input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) }));
+    const c = canvas(input, width, height, legend);
+    const points = input.series.flatMap((s, si) => {
+        const color = seriesColor(si, s.color);
+        return s.data.map(([vx, vy]) => point(px(x.scale(vx)), px(y.scale(vy)), 3, color, `${s.name}: ${formatValue(vx)}, ${formatValue(vy)}`));
+    });
+    const frame = { ...c, plot, xTicks: x.ticks, yTicks: y.ticks, baseline: y.zero };
+    return { ...c, shapes: [...frameShapes(frame), ...points, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const TAU$2 = 2 * Math.PI;
+/** Wedge (or ring segment when `r0 > 0`) from angle `a0` to `a1`, clockwise from 12 o'clock. */
+function arc(cx, cy, r, r0, a0, a1) {
+    const at = (radius, a) => `${px(cx + radius * Math.sin(a))} ${px(cy - radius * Math.cos(a))}`;
+    // A full circle has coincident endpoints, which an arc command cannot draw: split it in two.
+    if (a1 - a0 >= TAU$2 - 1e-9) {
+        const half = a0 + TAU$2 / 2;
+        return `${arc(cx, cy, r, r0, a0, half)}${arc(cx, cy, r, r0, half, a1)}`;
+    }
+    const large = a1 - a0 > Math.PI ? 1 : 0;
+    const outer = `M${at(r, a0)}A${r} ${r} 0 ${large} 1 ${at(r, a1)}`;
+    return r0 > 0
+        ? `${outer}L${at(r0, a1)}A${r0} ${r0} 0 ${large} 0 ${at(r0, a0)}Z`
+        : `${outer}L${px(cx)} ${px(cy)}Z`;
+}
+function layoutPieChart(input) {
+    const { width, height } = size(input, 300, 300);
+    const top = legendTop(input);
+    const cx = width / 2;
+    const cy = top + (height - top) / 2;
+    const r = Math.max(0, Math.min(width, height - top) / 2 - 8);
+    const r0 = r * Math.min(0.95, Math.max(0, input.innerRadius ?? 0));
+    const total = input.data.reduce((sum, d) => sum + Math.max(0, d.value), 0);
+    let angle = 0;
+    const labels = [];
+    const slices = input.data.map((d, i) => {
+        const percent = total > 0 ? Math.max(0, d.value) / total : 0;
+        const a0 = angle;
+        angle += percent * TAU$2;
+        if (input.labels && percent > 0.03) {
+            const mid = (a0 + angle) / 2;
+            const lr = (r + r0) / 2;
+            labels.push(label(px(cx + lr * Math.sin(mid)), px(cy - lr * Math.cos(mid)), `${d.name} ${Math.round(percent * 100)}%`, {
+                part: 'slice-label',
+                anchor: 'middle',
+                baseline: 'middle',
+                fill: 'var(--skdx-color-text-on-accent)',
+            }));
+        }
+        return {
+            kind: 'path',
+            part: 'slice',
+            d: percent > 0 ? arc(cx, cy, r, r0, a0, angle) : '',
+            fill: seriesColor(i, d.color),
+            title: `${d.name}: ${formatValue(d.value)} (${Math.round(percent * 100)}%)`,
+        };
+    });
+    const c = canvas(input, width, height, input.data.map((d, i) => ({ name: d.name, color: seriesColor(i, d.color) })));
+    return { ...c, shapes: [...slices, ...c.shapes, ...labels] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const PAD$3 = 2;
+function layoutSparkline(input) {
+    const { width, height } = size(input, 120, 32);
+    const n = input.data.length;
+    const y = linearScale(extent(input.data, false), [height - PAD$3, PAD$3]);
+    const x = (i) => (n < 2 ? width / 2 : PAD$3 + (i / (n - 1)) * (width - 2 * PAD$3));
+    const coords = input.data.map((v, i) => ({ x: px(x(i)), y: px(y(v)) }));
+    const line = pathThrough(coords, input.curve);
+    const last = coords[coords.length - 1];
+    const first = coords[0];
+    const color = seriesColor(0, input.color);
+    return {
+        width,
+        height,
+        tooltip: input.tooltip ?? true,
+        shapes: [
+            {
+                kind: 'path',
+                part: 'area',
+                d: line && first && last
+                    ? `${line}L${last.x} ${height - PAD$3}L${first.x} ${height - PAD$3}Z`
+                    : '',
+                fill: color,
+                fillOpacity: 0.15,
+            },
+            { kind: 'path', part: 'line', d: line, stroke: color, strokeWidth: 1.5 },
+            // The most recent point, drawn as a dot.
+            ...(last ? [point(last.x, last.y, 2, color)] : []),
+        ],
+    };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+function layoutRadarChart(input) {
+    const { width, height } = size(input, 300, 300);
+    const top = legendTop(input);
+    const cx = width / 2;
+    const cy = top + (height - top) / 2;
+    const radius = Math.max(0, Math.min(width, height - top) / 2 - 36);
+    const n = input.categories.length;
+    const angle = (i) => -Math.PI / 2 + (i * 2 * Math.PI) / Math.max(1, n);
+    // Normalized: every series is scaled to its own maximum and the rings read as percentages.
+    const ticks = input.normalize
+        ? [0, 25, 50, 75, 100]
+        : niceTicks(0, Math.max(0, ...input.series.flatMap((s) => s.data)), 4);
+    const max = ticks[ticks.length - 1];
+    const seriesMax = input.series.map((s) => Math.max(0, ...s.data));
+    const norm = (si, v) => input.normalize
+        ? seriesMax[si] > 0
+            ? (v / seriesMax[si]) * 100
+            : 0
+        : v;
+    const at = (i, value) => {
+        const r = max > 0 ? (value / max) * radius : 0;
+        return { x: px(cx + r * Math.cos(angle(i))), y: px(cy + r * Math.sin(angle(i))) };
+    };
+    const polygon = (value) => n === 0
+        ? ''
+        : `M${input.categories
+            .map((_, i) => {
+            const p = at(i, value(i));
+            return `${p.x} ${p.y}`;
+        })
+            .join('L')}Z`;
+    // Concentric grid polygons, one per tick, innermost first, then a spoke per category.
+    const rings = ticks.filter((t) => t > 0);
+    const grid = [
+        ...rings.map((t) => ({
+            kind: 'path',
+            part: 'grid',
+            d: polygon(() => t),
+            stroke: CHART_COLORS.grid,
+        })),
+        ...input.categories.map((_, i) => {
+            const p = at(i, max);
+            return {
+                kind: 'line',
+                part: 'grid',
+                x1: px(cx),
+                y1: px(cy),
+                x2: p.x,
+                y2: p.y,
+                stroke: CHART_COLORS.grid,
+            };
+        }),
+        ...rings.map((t) => label(px(cx + 4), at(0, t).y, input.normalize ? `${t}%` : formatValue(t), {
+            part: 'y-label',
+            baseline: 'middle',
+        })),
+        ...input.categories.map((text, i) => {
+            const cos = Math.cos(angle(i));
+            const r = radius + 14;
+            return label(px(cx + r * cos), px(cy + r * Math.sin(angle(i))), text, {
+                part: 'x-label',
+                anchor: cos > 0.1 ? 'start' : cos < -0.1 ? 'end' : 'middle',
+                baseline: 'middle',
+            });
+        }),
+    ];
+    const points = [];
+    const polygons = input.series.map((s, si) => {
+        const color = seriesColor(si, s.color);
+        input.categories.forEach((category, i) => {
+            const value = s.data[i] ?? 0;
+            const p = at(i, norm(si, value));
+            points.push(point(p.x, p.y, 3, color, markTitle(s.name, category, value)));
+        });
+        return {
+            kind: 'path',
+            part: 'area',
+            d: polygon((i) => norm(si, s.data[i] ?? 0)),
+            fill: color,
+            fillOpacity: 0.25,
+            stroke: color,
+            strokeWidth: 2,
+        };
+    });
+    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) })));
+    return { ...c, shapes: [...grid, ...polygons, ...points, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const MARGIN = { top: 24, right: 8, bottom: 8, left: 64 };
+function layoutHeatmap(input) {
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, MARGIN);
+    const cellW = plot.width / Math.max(1, input.columns.length);
+    const cellH = plot.height / Math.max(1, input.rows.length);
+    const all = input.data.flat();
+    const min = Math.min(...all);
+    const max = Math.max(...all);
+    const color = seriesColor(0, input.color);
+    const negative = input.negativeColor ?? 'var(--skdx-color-danger-500)';
+    const span = Math.max(Math.abs(min), Math.abs(max));
+    // Diverging: opacity is the distance from zero, color the sign.
+    // Otherwise 0.15..1, the value's place between the smallest and largest cell.
+    const opacity = (v) => input.diverging
+        ? span === 0
+            ? 1
+            : px(0.15 + (0.85 * Math.abs(v)) / span)
+        : max === min
+            ? 1
+            : px(0.15 + (0.85 * (v - min)) / (max - min));
+    const cells = [];
+    input.rows.forEach((row, ri) => {
+        input.columns.forEach((column, ci) => {
+            const value = input.data[ri]?.[ci];
+            if (value === undefined)
+                return;
+            cells.push({
+                kind: 'rect',
+                part: 'cell',
+                x: px(plot.x + ci * cellW),
+                y: px(plot.y + ri * cellH),
+                width: px(cellW),
+                height: px(cellH),
+                fill: input.diverging && value < 0 ? negative : color,
+                opacity: opacity(value),
+                title: `${row}, ${column}: ${formatValue(value)}`,
+            });
+        });
+    });
+    const c = canvas(input, width, height);
+    return {
+        ...c,
+        shapes: [
+            ...input.rows.map((text, i) => label(plot.x - 8, px(plot.y + (i + 0.5) * cellH), text, {
+                part: 'y-label',
+                anchor: 'end',
+                baseline: 'middle',
+            })),
+            ...input.columns.map((text, i) => label(px(plot.x + (i + 0.5) * cellW), plot.y - 8, text, {
+                part: 'x-label',
+                anchor: 'middle',
+            })),
+            ...cells,
+            ...c.shapes,
+        ],
+    };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const PAD$2 = 8;
+const GAP = 4;
+function layoutFunnelChart(input) {
+    const { width, height } = size(input, 400, 300);
+    const n = input.data.length;
+    const max = Math.max(0, ...input.data.map((d) => d.value));
+    const first = input.data[0]?.value ?? 0;
+    const full = Math.max(0, width - 2 * PAD$2);
+    const offset = legendTop(input);
+    const stageH = n === 0 ? 0 : (height - offset - 2 * PAD$2) / n;
+    const widthOf = (value) => (max > 0 ? (Math.max(0, value) / max) * full : 0);
+    const legend = input.data.map((d, i) => ({ name: d.name, color: seriesColor(i, d.color) }));
+    const stages = input.data.flatMap((d, i) => {
+        const top = widthOf(d.value);
+        const bottom = widthOf(input.data[i + 1]?.value ?? d.value);
+        const y0 = offset + PAD$2 + i * stageH;
+        const y1 = y0 + stageH - GAP;
+        const cx = width / 2;
+        const percent = first > 0 ? d.value / first : 0;
+        return [
+            {
+                kind: 'path',
+                part: 'stage',
+                d: `M${px(cx - top / 2)} ${px(y0)}L${px(cx + top / 2)} ${px(y0)}L${px(cx + bottom / 2)} ${px(y1)}L${px(cx - bottom / 2)} ${px(y1)}Z`,
+                fill: seriesColor(i, d.color),
+                title: `${d.name}: ${formatValue(d.value)} (${Math.round(percent * 100)}%)`,
+            },
+            label(px(cx), px((y0 + y1) / 2), `${d.name} · ${formatValue(d.value)}`, {
+                part: 'stage-label',
+                anchor: 'middle',
+                baseline: 'middle',
+                fill: 'var(--skdx-color-text-on-accent)',
+            }),
+        ];
+    });
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: [...stages, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const NODE_WIDTH = 16;
+const NODE_PAD = 8;
+function layoutSankey(input) {
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, { top: 8 + legendTop(input), right: 96, bottom: 8, left: 8 });
+    const nodes = new Map();
+    const node = (name) => {
+        let n = nodes.get(name);
+        if (!n) {
+            n = {
+                name,
+                depth: 0,
+                value: 0,
+                color: seriesColor(nodes.size),
+                x: 0,
+                y: 0,
+                height: 0,
+                outY: 0,
+                inY: 0,
+            };
+            nodes.set(name, n);
+        }
+        return n;
+    };
+    const links = dropBackEdges(input.links.filter((l) => l.value > 0 && l.source !== l.target));
+    for (const l of links) {
+        node(l.source);
+        node(l.target);
+    }
+    // Depth = longest path from a source; the graph is acyclic after dropBackEdges.
+    for (let pass = 0, changed = true; changed && pass <= nodes.size; pass++) {
+        changed = false;
+        for (const l of links) {
+            const d = node(l.source).depth + 1;
+            if (d > node(l.target).depth) {
+                node(l.target).depth = d;
+                changed = true;
+            }
+        }
+    }
+    const outSum = new Map();
+    const inSum = new Map();
+    for (const l of links) {
+        outSum.set(l.source, (outSum.get(l.source) ?? 0) + l.value);
+        inSum.set(l.target, (inSum.get(l.target) ?? 0) + l.value);
+    }
+    for (const n of nodes.values())
+        n.value = Math.max(outSum.get(n.name) ?? 0, inSum.get(n.name) ?? 0);
+    const columns = new Map();
+    for (const n of nodes.values())
+        columns.set(n.depth, [...(columns.get(n.depth) ?? []), n]);
+    const depths = Math.max(0, ...columns.keys());
+    const scale = Math.min(...[...columns.values()].map((col) => (plot.height - NODE_PAD * (col.length - 1)) / col.reduce((s, n) => s + n.value, 0)));
+    for (const [depth, col] of columns) {
+        let y = plot.y;
+        for (const n of col) {
+            n.x = plot.x + (depths === 0 ? 0 : (depth * (plot.width - NODE_WIDTH)) / depths);
+            n.y = y;
+            n.height = n.value * scale;
+            n.outY = n.inY = y;
+            y += n.height + NODE_PAD;
+        }
+    }
+    const shapes = [];
+    for (const l of links) {
+        const s = node(l.source);
+        const t = node(l.target);
+        const h = l.value * scale;
+        const x0 = s.x + NODE_WIDTH;
+        const x1 = t.x;
+        const mx = (x0 + x1) / 2;
+        const sy = s.outY;
+        const ty = t.inY;
+        s.outY += h;
+        t.inY += h;
+        shapes.push({
+            kind: 'path',
+            part: 'link',
+            d: `M${px(x0)} ${px(sy)}C${px(mx)} ${px(sy)} ${px(mx)} ${px(ty)} ${px(x1)} ${px(ty)}L${px(x1)} ${px(ty + h)}C${px(mx)} ${px(ty + h)} ${px(mx)} ${px(sy + h)} ${px(x0)} ${px(sy + h)}Z`,
+            fill: s.color,
+            opacity: 0.4,
+            title: `${l.source} → ${l.target}: ${formatValue(l.value)}`,
+        });
+    }
+    for (const n of nodes.values()) {
+        shapes.push({
+            kind: 'rect',
+            part: 'node',
+            x: px(n.x),
+            y: px(n.y),
+            width: NODE_WIDTH,
+            height: px(n.height),
+            fill: n.color,
+            title: `${n.name}: ${formatValue(n.value)}`,
+        });
+        const last = n.depth === depths;
+        shapes.push(label(px(last ? n.x - 6 : n.x + NODE_WIDTH + 6), px(n.y + n.height / 2), n.name, {
+            anchor: last ? 'end' : 'start',
+            baseline: 'middle',
+        }));
+    }
+    return { ...canvas(input, width, height), shapes };
+}
+/** Removes the links that close a cycle (depth-first back edges), so every remaining path terminates. */
+function dropBackEdges(links) {
+    const out = new Map();
+    for (const l of links)
+        out.set(l.source, [...(out.get(l.source) ?? []), l]);
+    const state = new Map();
+    const back = new Set();
+    const visit = (name) => {
+        state.set(name, 'active');
+        for (const l of out.get(name) ?? []) {
+            const s = state.get(l.target);
+            if (s === 'active')
+                back.add(l);
+            else if (s === undefined)
+                visit(l.target);
+        }
+        state.set(name, 'done');
+    };
+    for (const l of links)
+        if (!state.has(l.source))
+            visit(l.source);
+    return links.filter((l) => !back.has(l));
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const nodeValue$1 = (n) => n.value ?? (n.children ?? []).reduce((s, c) => s + nodeValue$1(c), 0);
+/** Squarified treemap (Bruls, Huizing, van Wijk): rows of tiles kept as close to square as possible. */
+function squarify(items, x, y, w, h, out) {
+    if (items.length === 0)
+        return;
+    const worst = (row, side) => {
+        const sum = row.reduce((s, t) => s + t.area, 0);
+        const max = Math.max(...row.map((t) => t.area));
+        const min = Math.min(...row.map((t) => t.area));
+        return Math.max((side * side * max) / (sum * sum), (sum * sum) / (side * side * min));
+    };
+    const side = Math.min(w, h);
+    let row = [];
+    let i = 0;
+    while (i < items.length) {
+        const next = [...row, items[i]];
+        if (row.length === 0 || worst(next, side) <= worst(row, side)) {
+            row = next;
+            i++;
+        }
+        else
+            break;
+    }
+    const sum = row.reduce((s, t) => s + t.area, 0);
+    if (w >= h) {
+        const rowW = sum / h;
+        let ry = y;
+        for (const t of row) {
+            const th = t.area / rowW;
+            out(t, [x, ry, rowW, th]);
+            ry += th;
+        }
+        squarify(items.slice(i), x + rowW, y, w - rowW, h, out);
+    }
+    else {
+        const rowH = sum / w;
+        let rx = x;
+        for (const t of row) {
+            const tw = t.area / rowH;
+            out(t, [rx, y, tw, rowH]);
+            rx += tw;
+        }
+        squarify(items.slice(i), x, y + rowH, w, h - rowH, out);
+    }
+}
+function layoutTreemap(input) {
+    const { width, height } = size(input);
+    const top = legendTop(input);
+    const shapes = [];
+    const legend = input.data.map((n, i) => ({ name: n.name, color: seriesColor(i, n.color) }));
+    // Branches are outlined and their children tiled inside a 2px inset; leaves are filled.
+    const tile = (nodes, x, y, w, h, inherited) => {
+        const total = nodes.reduce((s, n) => s + Math.max(0, nodeValue$1(n)), 0);
+        const tiles = nodes
+            .map((node, i) => ({
+            node,
+            value: nodeValue$1(node),
+            color: node.color ?? inherited ?? seriesColor(i),
+            area: total > 0 ? (Math.max(0, nodeValue$1(node)) / total) * w * h : 0,
+        }))
+            .filter((t) => t.area > 0)
+            .sort((a, b) => b.area - a.area);
+        squarify(tiles, x, y, w, h, (t, [tx, ty, tw, th]) => {
+            const title = `${t.node.name}: ${formatValue(t.value)}`;
+            const branch = (t.node.children?.length ?? 0) > 0;
+            shapes.push({
+                kind: 'rect',
+                part: branch ? 'branch' : 'tile',
+                x: px(tx),
+                y: px(ty),
+                width: px(tw),
+                height: px(th),
+                fill: t.color,
+                opacity: branch ? 0.15 : undefined,
+                stroke: 'var(--skdx-color-surface-default)',
+                title,
+            });
+            if (branch)
+                tile(t.node.children, tx + 2, ty + 2, Math.max(0, tw - 4), Math.max(0, th - 4), t.color);
+            else if (tw > 40 && th > 20)
+                shapes.push(label(px(tx + 6), px(ty + 6), t.node.name, {
+                    baseline: 'hanging',
+                    fill: 'var(--skdx-color-text-on-accent)',
+                }));
+        });
+    };
+    tile(input.data, 0, top, width, height - top, undefined);
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: [...shapes, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const UP$1 = 'var(--skdx-color-success-500)';
+const DOWN$1 = 'var(--skdx-color-danger-500)';
+function layoutCandlestick(input) {
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
+    const y = axis(extent(input.data.flatMap((c) => [c.low, c.high]), false), [plot.y + plot.height, plot.y], input.scale === 'log');
+    const x = bandScale(input.data.length, [plot.x, plot.x + plot.width]);
+    const legend = [
+        { name: 'Up', color: UP$1 },
+        { name: 'Down', color: DOWN$1 },
+    ];
+    const c = canvas(input, width, height, legend);
+    const frame = {
+        ...c,
+        plot,
+        xTicks: input.data.map((c, i) => ({ pos: px(x.center(i)), label: c.label })),
+        yTicks: y.ticks,
+        baseline: plot.y + plot.height,
+    };
+    const shapes = frameShapes(frame);
+    input.data.forEach((c, i) => {
+        const color = c.close >= c.open ? UP$1 : DOWN$1;
+        const title = `${c.label}: O ${formatValue(c.open)} H ${formatValue(c.high)} L ${formatValue(c.low)} C ${formatValue(c.close)}`;
+        const top = y.scale(Math.max(c.open, c.close));
+        const bottom = y.scale(Math.min(c.open, c.close));
+        shapes.push({
+            kind: 'line',
+            part: 'wick',
+            x1: px(x.center(i)),
+            x2: px(x.center(i)),
+            y1: px(y.scale(c.high)),
+            y2: px(y.scale(c.low)),
+            stroke: color,
+            title,
+        }, {
+            kind: 'rect',
+            part: 'candle',
+            x: px(x.start(i)),
+            y: px(top),
+            width: px(x.bandwidth),
+            height: px(Math.max(1, bottom - top)),
+            fill: color,
+            title,
+        });
+    });
+    return { ...c, shapes: [...shapes, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const UP = 'var(--skdx-color-success-500)';
+const DOWN = 'var(--skdx-color-danger-500)';
+function layoutWaterfall(input) {
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
+    const steps = [];
+    let running = 0;
+    for (const d of input.data) {
+        const from = running;
+        running += d.value;
+        steps.push({
+            name: d.name,
+            from,
+            to: running,
+            color: d.color ?? (d.value >= 0 ? UP : DOWN),
+            title: `${d.name}: ${d.value >= 0 ? '+' : ''}${formatValue(d.value)}`,
+        });
+    }
+    if (input.total !== undefined)
+        steps.push({
+            name: input.total,
+            from: 0,
+            to: running,
+            color: seriesColor(0),
+            title: `${input.total}: ${formatValue(running)}`,
+        });
+    const totals = steps.flatMap((s) => [s.from, s.to]);
+    const y = axis([Math.min(0, ...totals), Math.max(0, ...totals)], [plot.y + plot.height, plot.y]);
+    const x = bandScale(steps.length, [plot.x, plot.x + plot.width]);
+    const c = canvas(input, width, height, [
+        { name: 'Increase', color: UP },
+        { name: 'Decrease', color: DOWN },
+    ]);
+    const shapes = frameShapes({
+        ...c,
+        plot,
+        xTicks: steps.map((s, i) => ({ pos: px(x.center(i)), label: s.name })),
+        yTicks: y.ticks,
+        baseline: y.zero,
+    });
+    steps.forEach((s, i) => {
+        const y0 = y.scale(s.from);
+        const y1 = y.scale(s.to);
+        shapes.push({
+            kind: 'rect',
+            part: 'bar',
+            x: px(x.start(i)),
+            y: px(Math.min(y0, y1)),
+            width: px(x.bandwidth),
+            height: px(Math.max(1, Math.abs(y1 - y0))),
+            fill: s.color,
+            title: s.title,
+        });
+        const next = steps[i + 1];
+        if (next)
+            shapes.push({
+                kind: 'line',
+                part: 'connector',
+                x1: px(x.start(i) + x.bandwidth),
+                x2: px(x.start(i + 1)),
+                y1: px(y1),
+                y2: px(y.scale(next.from)),
+                stroke: CHART_COLORS.axis,
+                dash: '4 3',
+            });
+    });
+    return { ...c, shapes: [...shapes, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+function layoutGantt(input) {
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, {
+        top: 8 + legendTop(input),
+        right: 16,
+        bottom: 32,
+        left: 112,
+    });
+    const format = input.format ?? formatValue;
+    const times = input.tasks.flatMap((t) => [t.start, t.end]);
+    const x = axis(times.length ? [Math.min(...times), Math.max(...times)] : [0, 0], [
+        plot.x,
+        plot.x + plot.width,
+    ]);
+    const rows = bandScale(input.tasks.length, [plot.y, plot.y + plot.height]);
+    const shapes = [];
+    const ticks = x.ticks.map((t) => ({ ...t, label: format(Number(t.label.replace(/,/g, ''))) }));
+    for (const t of ticks) {
+        shapes.push({
+            kind: 'line',
+            part: 'grid',
+            x1: t.pos,
+            x2: t.pos,
+            y1: plot.y,
+            y2: plot.y + plot.height,
+            stroke: CHART_COLORS.grid,
+        });
+        shapes.push(label(t.pos, plot.y + plot.height + 20, t.label, { part: 'x-label', anchor: 'middle' }));
+    }
+    input.tasks.forEach((t, i) => {
+        const x0 = x.scale(Math.min(t.start, t.end));
+        const x1 = x.scale(Math.max(t.start, t.end));
+        shapes.push(label(plot.x - 8, px(rows.center(i)), t.name, {
+            part: 'y-label',
+            anchor: 'end',
+            baseline: 'middle',
+        }));
+        shapes.push({
+            kind: 'rect',
+            part: 'bar',
+            x: px(x0),
+            y: px(rows.start(i)),
+            width: px(Math.max(1, x1 - x0)),
+            height: px(rows.bandwidth),
+            fill: seriesColor(i, t.color),
+            title: `${t.name}: ${format(t.start)} – ${format(t.end)}`,
+        });
+    });
+    const c = canvas(input, width, height, input.tasks.map((t, i) => ({ name: t.name, color: seriesColor(i, t.color) })));
+    return { ...c, shapes: [...shapes, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** Linear-interpolated quantile of a sorted sample. */
+const quantile = (sorted, q) => {
+    if (sorted.length === 0)
+        return 0;
+    const pos = (sorted.length - 1) * q;
+    const lo = Math.floor(pos);
+    const hi = Math.ceil(pos);
+    const a = sorted[lo];
+    const b = sorted[hi];
+    return a + (b - a) * (pos - lo);
+};
+/** Five-number summary with Tukey fences: whiskers reach the last sample within 1.5 IQR. */
+function boxStats(data) {
+    const sorted = [...data].sort((a, b) => a - b);
+    const q1 = quantile(sorted, 0.25);
+    const median = quantile(sorted, 0.5);
+    const q3 = quantile(sorted, 0.75);
+    const iqr = q3 - q1;
+    const inside = sorted.filter((v) => v >= q1 - 1.5 * iqr && v <= q3 + 1.5 * iqr);
+    return {
+        q1,
+        median,
+        q3,
+        low: inside[0] ?? q1,
+        high: inside[inside.length - 1] ?? q3,
+        outliers: sorted.filter((v) => v < q1 - 1.5 * iqr || v > q3 + 1.5 * iqr),
+    };
+}
+function layoutBoxplot(input) {
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
+    const y = axis(extent(input.series.flatMap((s) => s.data), false), [plot.y + plot.height, plot.y]);
+    const x = bandScale(input.series.length, [plot.x, plot.x + plot.width]);
+    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) })));
+    const shapes = frameShapes({
+        ...c,
+        plot,
+        xTicks: input.series.map((s, i) => ({ pos: px(x.center(i)), label: s.name })),
+        yTicks: y.ticks,
+        baseline: plot.y + plot.height,
+    });
+    input.series.forEach((s, i) => {
+        const st = boxStats(s.data);
+        const color = seriesColor(i, s.color);
+        const cx = px(x.center(i));
+        const title = `${s.name}: min ${formatValue(st.low)} Q1 ${formatValue(st.q1)} median ${formatValue(st.median)} Q3 ${formatValue(st.q3)} max ${formatValue(st.high)}`;
+        const boxW = x.bandwidth * 0.6;
+        const bx = px(x.center(i) - boxW / 2);
+        shapes.push({
+            kind: 'line',
+            part: 'whisker',
+            x1: cx,
+            x2: cx,
+            y1: px(y.scale(st.high)),
+            y2: px(y.scale(st.low)),
+            stroke: color,
+            title,
+        }, {
+            kind: 'rect',
+            part: 'box',
+            x: bx,
+            y: px(y.scale(st.q3)),
+            width: px(boxW),
+            height: px(Math.max(1, y.scale(st.q1) - y.scale(st.q3))),
+            fill: color,
+            stroke: color,
+            opacity: 0.5,
+            title,
+        }, {
+            kind: 'line',
+            part: 'median',
+            x1: bx,
+            x2: px(bx + boxW),
+            y1: px(y.scale(st.median)),
+            y2: px(y.scale(st.median)),
+            stroke: color,
+            title,
+        }, ...st.outliers.map((v) => ({
+            kind: 'circle',
+            part: 'outlier',
+            cx,
+            cy: px(y.scale(v)),
+            r: 3,
+            fill: color,
+            title: `${s.name}: ${formatValue(v)}`,
+        })));
+    });
+    return { ...c, shapes: [...shapes, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const TAU$1 = 2 * Math.PI;
+const nodeValue = (n) => n.value ?? (n.children ?? []).reduce((s, c) => s + nodeValue(c), 0);
+const depthOf = (nodes) => nodes.length === 0 ? 0 : 1 + Math.max(...nodes.map((n) => depthOf(n.children ?? [])));
+function layoutSunburst(input) {
+    const { width, height } = size(input, 300, 300);
+    const top = legendTop(input);
+    const cx = width / 2;
+    const cy = top + (height - top) / 2;
+    const ringWidth = Math.max(0, Math.min(width, height - top) / 2 - 8) / Math.max(1, depthOf(input.data));
+    const shapes = [];
+    const walk = (nodes, depth, a0, span, color) => {
+        const total = nodes.reduce((s, n) => s + Math.max(0, nodeValue(n)), 0);
+        let angle = a0;
+        nodes.forEach((n, i) => {
+            const value = Math.max(0, nodeValue(n));
+            const sweep = total > 0 ? (value / total) * span : 0;
+            const fill = n.color ?? color ?? seriesColor(i);
+            if (sweep > 0) {
+                shapes.push({
+                    kind: 'path',
+                    part: 'arc',
+                    d: arc(cx, cy, ringWidth * (depth + 1), ringWidth * depth, angle, angle + sweep),
+                    fill,
+                    opacity: 1 - depth * 0.2,
+                    stroke: 'var(--skdx-color-surface-default)',
+                    title: `${n.name}: ${formatValue(value)}`,
+                });
+                walk(n.children ?? [], depth + 1, angle, sweep, fill);
+            }
+            angle += sweep;
+        });
+    };
+    walk(input.data, 0, 0, TAU$1, undefined);
+    const c = canvas(input, width, height, input.data.map((n, i) => ({ name: n.name, color: n.color ?? seriesColor(i) })));
+    return { ...c, shapes: [...shapes, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const TAU = 2 * Math.PI;
+const PAD$1 = 0.04;
+const RING = 12;
+function layoutChord(input) {
+    const { width, height } = size(input, 300, 300);
+    const top = legendTop(input);
+    const cx = width / 2;
+    const cy = top + (height - top) / 2;
+    const r = Math.max(0, Math.min(width, height - top) / 2 - 36);
+    const r0 = Math.max(0, r - RING);
+    const n = input.names.length;
+    const cell = (i, j) => Math.max(0, input.matrix[i]?.[j] ?? 0);
+    const rowSum = input.names.map((_, i) => input.names.reduce((s, _n, j) => s + cell(i, j), 0));
+    const total = rowSum.reduce((s, v) => s + v, 0);
+    const unit = total > 0 ? (TAU - PAD$1 * n) / total : 0;
+    const at = (a, radius) => `${px(cx + radius * Math.sin(a))} ${px(cy - radius * Math.cos(a))}`;
+    // Each group spans its row sum; inside it, subgroup j spans matrix[i][j].
+    const groups = [];
+    let angle = 0;
+    for (let i = 0; i < n; i++) {
+        const a0 = angle;
+        const sub = input.names.map((_, j) => {
+            const s0 = angle;
+            angle += cell(i, j) * unit;
+            return { a0: s0, a1: angle };
+        });
+        groups.push({ a0, a1: angle, sub });
+        angle += PAD$1;
+    }
+    const shapes = [];
+    for (let i = 0; i < n; i++) {
+        for (let j = i; j < n; j++) {
+            const out = cell(i, j);
+            const back = cell(j, i);
+            if (out + back === 0)
+                continue;
+            const a = groups[i].sub[j];
+            const b = groups[j].sub[i];
+            const large = (s) => (s.a1 - s.a0 > Math.PI ? 1 : 0);
+            const d = i === j
+                ? `M${at(a.a0, r0)}A${r0} ${r0} 0 ${large(a)} 1 ${at(a.a1, r0)}Q${px(cx)} ${px(cy)} ${at(a.a0, r0)}Z`
+                : `M${at(a.a0, r0)}A${r0} ${r0} 0 ${large(a)} 1 ${at(a.a1, r0)}Q${px(cx)} ${px(cy)} ${at(b.a0, r0)}A${r0} ${r0} 0 ${large(b)} 1 ${at(b.a1, r0)}Q${px(cx)} ${px(cy)} ${at(a.a0, r0)}Z`;
+            const from = out >= back ? i : j;
+            shapes.push({
+                kind: 'path',
+                part: 'chord',
+                d,
+                fill: seriesColor(from),
+                opacity: 0.5,
+                title: i === j
+                    ? `${input.names[i]}: ${formatValue(out)}`
+                    : `${input.names[i]} ↔ ${input.names[j]}: ${formatValue(out)} / ${formatValue(back)}`,
+            });
+        }
+    }
+    groups.forEach((g, i) => {
+        if (g.a1 <= g.a0)
+            return;
+        shapes.push({
+            kind: 'path',
+            part: 'group',
+            d: arc(cx, cy, r, r0, g.a0, g.a1),
+            fill: seriesColor(i),
+            title: `${input.names[i]}: ${formatValue(rowSum[i])}`,
+        });
+        const mid = (g.a0 + g.a1) / 2;
+        const sin = Math.sin(mid);
+        shapes.push(label(px(cx + (r + 8) * sin), px(cy - (r + 8) * Math.cos(mid)), input.names[i], {
+            anchor: sin > 0.1 ? 'start' : sin < -0.1 ? 'end' : 'middle',
+            baseline: 'middle',
+        }));
+    });
+    const c = canvas(input, width, height, input.names.map((name, i) => ({ name, color: seriesColor(i) })));
+    return { ...c, shapes: [...shapes, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const PAD = 8;
+const rings = (f) => f.geometry.type === 'Polygon' ? f.geometry.coordinates : f.geometry.coordinates.flat();
+/** Mercator latitude, clamped to ±85° so the poles stay finite. */
+const mercatorY = (lat) => Math.log(Math.tan(Math.PI / 4 + (Math.max(-85, Math.min(85, lat)) * Math.PI) / 360));
+/** Projection fitted to the features' bounds (equirectangular by default, or Mercator); opacity follows the value. */
+function layoutMap(input) {
+    const { width, height } = size(input);
+    const top = legendTop(input);
+    const toY = input.projection === 'mercator' ? mercatorY : (lat) => lat;
+    const points = input.features.flatMap((f) => rings(f).flat());
+    const lons = points.map((p) => p[0]);
+    const lats = points.map((p) => toY(p[1]));
+    const [minLon, maxLon, minLat, maxLat] = points.length
+        ? [Math.min(...lons), Math.max(...lons), Math.min(...lats), Math.max(...lats)]
+        : [0, 1, 0, 1];
+    const scale = Math.min((width - 2 * PAD) / Math.max(1e-9, maxLon - minLon), (height - top - 2 * PAD) / Math.max(1e-9, maxLat - minLat));
+    const ox = (width - (maxLon - minLon) * scale) / 2;
+    const oy = top + (height - top - (maxLat - minLat) * scale) / 2;
+    const project = ([lon, lat]) => `${px(ox + (lon - minLon) * scale)} ${px(oy + (maxLat - toY(lat)) * scale)}`;
+    const values = input.features.map((f) => f.value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const color = seriesColor(0, input.color);
+    const shapes = input.features.map((f) => ({
+        kind: 'path',
+        part: 'region',
+        d: rings(f)
+            .map((ring) => `M${ring.map(project).join('L')}Z`)
+            .join(''),
+        fill: color,
+        opacity: max === min ? 1 : px(0.15 + (0.85 * (f.value - min)) / (max - min)),
+        stroke: 'var(--skdx-color-surface-default)',
+        title: `${f.name}: ${formatValue(f.value)}`,
+    }));
+    return { ...canvas(input, width, height), shapes };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** Draws a core shape list back to front. */
+class SkdxChartShapesComponent {
+    constructor() {
+        this.shapes = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shapes" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartShapesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SkdxChartShapesComponent, isStandalone: true, selector: "g[skdxChartShapes]", inputs: { shapes: { classPropertyName: "shapes", publicName: "shapes", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @for (s of shapes(); track $index) {
+      @switch (s.kind) {
+        @case ('path') {
+          <svg:path
+            [attr.data-skdx-part]="s.part"
+            [attr.d]="s.d"
+            [attr.fill]="s.fill ?? 'none'"
+            [attr.stroke]="s.stroke"
+            [attr.stroke-width]="s.strokeWidth"
+            [attr.stroke-linecap]="s.strokeLinecap"
+            [attr.stroke-linejoin]="s.strokeLinejoin"
+            [attr.opacity]="s.opacity"
+            [attr.fill-opacity]="s.fillOpacity"
+          >
+            @if (s.title) {
+              <svg:title>{{ s.title }}</svg:title>
+            }
+          </svg:path>
+        }
+        @case ('rect') {
+          <svg:rect
+            [attr.data-skdx-part]="s.part"
+            [attr.x]="s.x"
+            [attr.y]="s.y"
+            [attr.width]="s.width"
+            [attr.height]="s.height"
+            [attr.fill]="s.fill"
+            [attr.stroke]="s.stroke"
+            [attr.fill-opacity]="s.opacity"
+          >
+            @if (s.title) {
+              <svg:title>{{ s.title }}</svg:title>
+            }
+          </svg:rect>
+        }
+        @case ('line') {
+          <svg:line
+            [attr.data-skdx-part]="s.part"
+            [attr.x1]="s.x1"
+            [attr.y1]="s.y1"
+            [attr.x2]="s.x2"
+            [attr.y2]="s.y2"
+            [attr.stroke]="s.stroke"
+            [attr.stroke-dasharray]="s.dash"
+          >
+            @if (s.title) {
+              <svg:title>{{ s.title }}</svg:title>
+            }
+          </svg:line>
+        }
+        @case ('circle') {
+          <svg:circle
+            [attr.data-skdx-part]="s.part"
+            [attr.cx]="s.cx"
+            [attr.cy]="s.cy"
+            [attr.r]="s.r"
+            [attr.fill]="s.fill"
+          >
+            @if (s.title) {
+              <svg:title>{{ s.title }}</svg:title>
+            }
+          </svg:circle>
+        }
+        @case ('text') {
+          <svg:text
+            [attr.data-skdx-part]="s.part"
+            [attr.x]="s.x"
+            [attr.y]="s.y"
+            [attr.text-anchor]="s.anchor"
+            [attr.dominant-baseline]="s.baseline"
+            [attr.fill]="s.fill"
+          >
+            {{ s.text }}
+          </svg:text>
+        }
+      }
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartShapesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'g[skdxChartShapes]',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @for (s of shapes(); track $index) {
+      @switch (s.kind) {
+        @case ('path') {
+          <svg:path
+            [attr.data-skdx-part]="s.part"
+            [attr.d]="s.d"
+            [attr.fill]="s.fill ?? 'none'"
+            [attr.stroke]="s.stroke"
+            [attr.stroke-width]="s.strokeWidth"
+            [attr.stroke-linecap]="s.strokeLinecap"
+            [attr.stroke-linejoin]="s.strokeLinejoin"
+            [attr.opacity]="s.opacity"
+            [attr.fill-opacity]="s.fillOpacity"
+          >
+            @if (s.title) {
+              <svg:title>{{ s.title }}</svg:title>
+            }
+          </svg:path>
+        }
+        @case ('rect') {
+          <svg:rect
+            [attr.data-skdx-part]="s.part"
+            [attr.x]="s.x"
+            [attr.y]="s.y"
+            [attr.width]="s.width"
+            [attr.height]="s.height"
+            [attr.fill]="s.fill"
+            [attr.stroke]="s.stroke"
+            [attr.fill-opacity]="s.opacity"
+          >
+            @if (s.title) {
+              <svg:title>{{ s.title }}</svg:title>
+            }
+          </svg:rect>
+        }
+        @case ('line') {
+          <svg:line
+            [attr.data-skdx-part]="s.part"
+            [attr.x1]="s.x1"
+            [attr.y1]="s.y1"
+            [attr.x2]="s.x2"
+            [attr.y2]="s.y2"
+            [attr.stroke]="s.stroke"
+            [attr.stroke-dasharray]="s.dash"
+          >
+            @if (s.title) {
+              <svg:title>{{ s.title }}</svg:title>
+            }
+          </svg:line>
+        }
+        @case ('circle') {
+          <svg:circle
+            [attr.data-skdx-part]="s.part"
+            [attr.cx]="s.cx"
+            [attr.cy]="s.cy"
+            [attr.r]="s.r"
+            [attr.fill]="s.fill"
+          >
+            @if (s.title) {
+              <svg:title>{{ s.title }}</svg:title>
+            }
+          </svg:circle>
+        }
+        @case ('text') {
+          <svg:text
+            [attr.data-skdx-part]="s.part"
+            [attr.x]="s.x"
+            [attr.y]="s.y"
+            [attr.text-anchor]="s.anchor"
+            [attr.dominant-baseline]="s.baseline"
+            [attr.fill]="s.fill"
+          >
+            {{ s.text }}
+          </svg:text>
+        }
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { shapes: [{ type: i0.Input, args: [{ isSignal: true, alias: "shapes", required: true }] }] } });
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** The accessible `<svg>` root every chart renders into: projected marks, then decorations, then the hover tooltip. */
+class SkdxChartRootComponent {
+    constructor() {
+        this.layout = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.kind = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.colors = CHART_COLORS;
+        this.tip = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tip" }] : /* istanbul ignore next */ []));
+    }
+    onPointerMove(e) {
+        if (!this.layout().tooltip)
+            return;
+        const { width, height } = this.layout();
+        const next = hoverTooltip(e.target, e.currentTarget, e.clientX, e.clientY, width, height);
+        if (next.length > 0 || this.tip().length > 0)
+            this.tip.set(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxChartRootComponent, isStandalone: true, selector: "skdx-chart-root", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: inline-block" }, ngImport: i0, template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      [attr.viewBox]="'0 0 ' + layout().width + ' ' + layout().height"
+      [attr.width]="layout().width"
+      [attr.height]="layout().height"
+      role="img"
+      [attr.aria-label]="label()"
+      [attr.data-skdx-chart]="kind()"
+      [attr.font-family]="colors.fontFamily"
+      [attr.font-size]="colors.fontSize"
+      style="max-width: 100%; height: auto"
+      (pointermove)="onPointerMove($event)"
+      (pointerleave)="tip.set([])"
+    >
+      <title>{{ label() }}</title>
+      <svg:g skdxChartShapes [shapes]="layout().shapes"></svg:g>
+      <svg:g skdxChartShapes [shapes]="tip()"></svg:g>
+    </svg>
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartShapesComponent, selector: "g[skdxChartShapes]", inputs: ["shapes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartRootComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'skdx-chart-root',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-block' },
+                    imports: [SkdxChartShapesComponent],
+                    template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      [attr.viewBox]="'0 0 ' + layout().width + ' ' + layout().height"
+      [attr.width]="layout().width"
+      [attr.height]="layout().height"
+      role="img"
+      [attr.aria-label]="label()"
+      [attr.data-skdx-chart]="kind()"
+      [attr.font-family]="colors.fontFamily"
+      [attr.font-size]="colors.fontSize"
+      style="max-width: 100%; height: auto"
+      (pointermove)="onPointerMove($event)"
+      (pointerleave)="tip.set([])"
+    >
+      <title>{{ label() }}</title>
+      <svg:g skdxChartShapes [shapes]="layout().shapes"></svg:g>
+      <svg:g skdxChartShapes [shapes]="tip()"></svg:g>
+    </svg>
+  `,
+                }]
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+/** The `<svg>` root, grid, axis and tick labels every axis chart shares; marks are projected. */
+class SkdxSizedBase {
+    constructor() {
+        this.width = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        this.height = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+        /** Accessible name of the chart; defaults to "<Kind> chart". */
+        this.label = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Draw a legend row above the plot. */
+        this.legend = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []));
+        /** Show a hover tooltip for the mark under the pointer. */
+        this.tooltip = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    }
+    sized() {
+        return {
+            width: this.width(),
+            height: this.height(),
+            legend: this.legend(),
+            tooltip: this.tooltip(),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxSizedBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: SkdxSizedBase, isStandalone: true, inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxSizedBase, decorators: [{
+            type: Directive
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
+/** Inputs the category charts take. */
+class SkdxChartBase extends SkdxSizedBase {
+    constructor() {
+        super(...arguments);
+        this.series = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+        this.categories = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "categories" }] : /* istanbul ignore next */ []));
+    }
+    input() {
+        return { ...this.sized(), series: this.series(), categories: this.categories() };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: SkdxChartBase, isStandalone: true, inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartBase, decorators: [{
+            type: Directive
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }] } });
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CHART_COLORS, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, hoverTooltip, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutCandlestick, layoutChord, layoutFunnelChart, layoutGantt, layoutHeatmap, layoutLineChart, layoutMap, layoutPieChart, layoutRadarChart, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutTreemap, layoutWaterfall };
+//# sourceMappingURL=skdx-angular-charts-internal.mjs.map