@aurum-grid/charts 0.0.0-stage → 0.2.0

package/dist/chart.js

@@ -0,0 +1,1158 @@
+import { toNumber, niceTicks, compactNumber, histogramBins, stack, waterfall, treemap, linearRegression, holtForecast, nextLabels, extremes, } from './transform.js';
+export const CHART_TYPES = [
+    { value: 'column', label: 'Column' }, { value: 'stackedColumn', label: 'Stacked column' }, { value: 'normalizedColumn', label: '100% stacked column' },
+    { value: 'bar', label: 'Bar' }, { value: 'stackedBar', label: 'Stacked bar' }, { value: 'normalizedBar', label: '100% stacked bar' },
+    { value: 'pie', label: 'Pie' }, { value: 'donut', label: 'Donut' }, { value: 'nightingale', label: 'Nightingale rose' },
+    { value: 'line', label: 'Line' }, { value: 'area', label: 'Area' }, { value: 'stackedArea', label: 'Stacked area' }, { value: 'normalizedArea', label: '100% stacked area' },
+    { value: 'scatter', label: 'Scatter' }, { value: 'bubble', label: 'Bubble' },
+    { value: 'radar', label: 'Radar line' }, { value: 'radarArea', label: 'Radar area' }, { value: 'radialBar', label: 'Radial bar' },
+    { value: 'histogram', label: 'Histogram' }, { value: 'boxPlot', label: 'Box plot' }, { value: 'rangeBar', label: 'Range bar' },
+    { value: 'treemap', label: 'Treemap' }, { value: 'sunburst', label: 'Sunburst' },
+    { value: 'heatmap', label: 'Heatmap' }, { value: 'waterfall', label: 'Waterfall' }, { value: 'gauge', label: 'Gauge' },
+    { value: 'funnel', label: 'Funnel' }, { value: 'pyramid', label: 'Pyramid' },
+    { value: 'combo', label: 'Combo (column + line)' },
+];
+/** Chart types grouped the way the chart gallery shows them. */
+export const CHART_GROUPS = [
+    { group: 'Column', types: ['column', 'stackedColumn', 'normalizedColumn'] },
+    { group: 'Bar', types: ['bar', 'stackedBar', 'normalizedBar'] },
+    { group: 'Pie', types: ['pie', 'donut', 'nightingale'] },
+    { group: 'Line & area', types: ['line', 'area', 'stackedArea', 'normalizedArea'] },
+    { group: 'X Y', types: ['scatter', 'bubble'] },
+    { group: 'Polar', types: ['radar', 'radarArea', 'radialBar'] },
+    { group: 'Statistical', types: ['histogram', 'boxPlot', 'rangeBar'] },
+    { group: 'Hierarchical', types: ['treemap', 'sunburst'] },
+    { group: 'Specialized', types: ['heatmap', 'waterfall', 'gauge'] },
+    { group: 'Funnel', types: ['funnel', 'pyramid'] },
+    { group: 'Combination', types: ['combo'] },
+];
+export const PALETTES = {
+    theme: null,
+    ocean: ['#1f5fa8', '#3aa5c9', '#6cc3a0', '#a7d36f', '#2b3f8c', '#7fa6d9', '#4c8c7b', '#c2d9e8'],
+    vivid: ['#e4572e', '#29335c', '#f3a712', '#669bbc', '#a8c686', '#b05b9c', '#3d9970', '#ff7f50'],
+    mono: ['#3b3b3b', '#5a5a5a', '#787878', '#969696', '#b4b4b4', '#2a2a2a', '#d2d2d2', '#4a4a4a'],
+};
+const NS = 'http://www.w3.org/2000/svg';
+function svg(tag, attrs = {}, parent) {
+    const el = document.createElementNS(NS, tag);
+    for (const [k, v] of Object.entries(attrs))
+        if (v !== undefined)
+            el.setAttribute(k, String(v));
+    parent?.append(el);
+    return el;
+}
+function div(cls, text) {
+    const d = document.createElement('div');
+    d.className = cls;
+    if (text != null)
+        d.textContent = text;
+    return d;
+}
+export const paletteVar = (i) => `var(--agc-${(i % 8) + 1})`;
+const TIME_RE = /^(\d{4}(-\d{2}(-\d{2})?)?|Q[1-4]\s*\d{4}|(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)[a-z]*\s*\d{0,4})$/i;
+export function looksLikeTime(labels) {
+    return labels.length >= 3 && labels.filter((l) => TIME_RE.test(l.trim())).length / labels.length > 0.8;
+}
+export class Chart {
+    container;
+    root;
+    plot;
+    svgEl;
+    legendEl;
+    tooltip;
+    titleEl;
+    tableEl;
+    emptyEl;
+    hidden = new Set();
+    ro = null;
+    lastSize = '';
+    destroyed = false;
+    options;
+    constructor(container, options) {
+        this.container = container;
+        this.options = { ...options };
+        this.root = div('agc-root');
+        this.root.setAttribute('role', 'figure');
+        this.titleEl = div('agc-title');
+        this.plot = div('agc-plot');
+        this.svgEl = svg('svg', { class: 'agc-svg', role: 'img' });
+        this.plot.append(this.svgEl);
+        this.legendEl = div('agc-legend');
+        this.tooltip = div('agc-tooltip');
+        this.tooltip.setAttribute('role', 'tooltip');
+        this.tooltip.hidden = true;
+        this.emptyEl = div('agc-empty');
+        this.tableEl = document.createElement('table');
+        this.tableEl.className = 'agc-sr-only';
+        this.root.append(this.titleEl, this.plot, this.emptyEl, this.legendEl, this.tooltip, this.tableEl);
+        container.append(this.root);
+        if (typeof ResizeObserver === 'function') {
+            this.ro = new ResizeObserver(() => {
+                const sig = `${this.plot.clientWidth}x${this.options.height === 'fill' ? this.plot.clientHeight : ''}`;
+                if (this.plot.clientWidth && sig !== this.lastSize)
+                    this.render();
+            });
+            this.ro.observe(this.plot);
+        }
+        this.render();
+    }
+    update(patch) {
+        Object.assign(this.options, patch);
+        if (patch.series)
+            for (const k of [...this.hidden])
+                if (!patch.series.some((s) => s.key === k))
+                    this.hidden.delete(k);
+        this.render();
+    }
+    setType(type) {
+        this.update({ type });
+    }
+    getSvg() {
+        return this.svgEl;
+    }
+    /** Standalone SVG with computed colours and fonts inlined, so it renders identically elsewhere. */
+    toSvgString() {
+        const clone = this.svgEl.cloneNode(true);
+        clone.setAttribute('xmlns', NS);
+        const src = [this.svgEl, ...this.svgEl.querySelectorAll('*')];
+        const dst = [clone, ...clone.querySelectorAll('*')];
+        const props = ['fill', 'stroke', 'stroke-width', 'stroke-dasharray', 'opacity', 'fill-opacity', 'font-size', 'font-weight', 'font-family'];
+        src.forEach((el, i) => {
+            const cs = getComputedStyle(el);
+            const target = dst[i];
+            for (const p of props) {
+                const v = cs.getPropertyValue(p);
+                if ((v && v !== 'none') || p === 'fill' || p === 'stroke')
+                    target.setAttribute(p, v || 'none');
+            }
+            target.removeAttribute('class');
+            target.removeAttribute('style');
+            target.removeAttribute('tabindex');
+        });
+        const vb = this.viewSize();
+        const bg = getComputedStyle(this.root).getPropertyValue('--agr-bg').trim() || '#ffffff';
+        const rect = svg('rect', { x: 0, y: 0, width: vb.w, height: vb.h, fill: bg });
+        clone.insertBefore(rect, clone.firstChild);
+        return new XMLSerializer().serializeToString(clone);
+    }
+    /** Rasterise the chart to PNG (2× by default). */
+    async toPngBlob(scale = 2) {
+        const svgText = this.toSvgString();
+        const vb = this.viewSize();
+        const w = Math.round(vb.w * scale);
+        const hgt = Math.round(vb.h * scale);
+        const url = URL.createObjectURL(new Blob([svgText], { type: 'image/svg+xml' }));
+        try {
+            const img = new Image();
+            img.width = w;
+            img.height = hgt;
+            await new Promise((res, rej) => {
+                img.onload = () => res();
+                img.onerror = () => rej(new Error('Could not render chart image'));
+                img.src = url;
+            });
+            const canvas = document.createElement('canvas');
+            canvas.width = w;
+            canvas.height = hgt;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                throw new Error('Canvas is not available');
+            ctx.drawImage(img, 0, 0, w, hgt);
+            return await new Promise((res, rej) => canvas.toBlob((b) => (b ? res(b) : rej(new Error('PNG encoding failed'))), 'image/png'));
+        }
+        finally {
+            URL.revokeObjectURL(url);
+        }
+    }
+    viewSize() {
+        const parts = (this.svgEl.getAttribute('viewBox') ?? '').split(/\s+/).map(Number);
+        return { w: parts[2] || 600, h: parts[3] || 300 };
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        this.ro?.disconnect();
+        this.root.remove();
+    }
+    fmt = (v) => (this.options.valueFormat ? this.options.valueFormat(v) : compactNumber(v));
+    visibleSeries() {
+        return this.options.series.filter((s) => !this.hidden.has(s.key));
+    }
+    color(s, fallbackIndex = 0) {
+        if (!s)
+            return paletteVar(fallbackIndex);
+        if (s.color)
+            return s.color;
+        const i = this.options.series.indexOf(s);
+        const pal = this.options.palette;
+        return pal && pal.length ? pal[i % pal.length] : paletteVar(i);
+    }
+    catColor(i) {
+        const pal = this.options.palette;
+        return pal && pal.length ? pal[i % pal.length] : paletteVar(i);
+    }
+    render() {
+        if (this.destroyed)
+            return;
+        const o = this.options;
+        const fill = o.height === 'fill';
+        this.root.classList.toggle('agc-fill', fill);
+        this.titleEl.textContent = o.title ?? '';
+        this.titleEl.hidden = !o.title;
+        this.root.setAttribute('aria-label', o.ariaLabel ?? o.title ?? 'Chart');
+        const hasData = o.data.length > 0 && o.series.length > 0;
+        this.emptyEl.textContent = hasData ? '' : o.emptyText ?? 'No data to display';
+        this.emptyEl.hidden = hasData;
+        this.plot.hidden = !hasData;
+        this.renderLegend();
+        this.renderTable();
+        this.svgEl.replaceChildren();
+        this.tooltip.hidden = true;
+        if (!hasData)
+            return;
+        const width = o.width ?? (this.plot.clientWidth || this.container.clientWidth || 600);
+        const height = fill ? Math.max(120, this.plot.clientHeight || 240) : o.height ?? 300;
+        this.lastSize = `${this.plot.clientWidth}x${fill ? this.plot.clientHeight : ''}`;
+        if (!fill)
+            this.plot.style.height = `${height}px`;
+        else
+            this.plot.style.removeProperty('height');
+        this.svgEl.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        this.svgEl.setAttribute('width', String(width));
+        this.svgEl.setAttribute('height', String(height));
+        this.svgEl.setAttribute('aria-label', this.summary());
+        const box = { w: width, h: height };
+        switch (o.type) {
+            case 'pie':
+            case 'donut':
+                return this.renderPie(box, o.type === 'donut');
+            case 'nightingale':
+                return this.renderNightingale(box);
+            case 'radialBar':
+                return this.renderRadialBar(box);
+            case 'sunburst':
+                return this.renderSunburst(box);
+            case 'pyramid':
+                return this.renderPyramid(box);
+            case 'boxPlot':
+            case 'rangeBar':
+                return this.renderStat(box, o.type);
+            case 'funnel':
+                return this.renderFunnel(box);
+            case 'treemap':
+                return this.renderTreemap(box);
+            case 'heatmap':
+                return this.renderHeatmap(box);
+            case 'gauge':
+                return this.renderGauge(box);
+            case 'radar':
+            case 'radarArea':
+                return this.renderRadar(box, o.type === 'radarArea');
+            case 'scatter':
+            case 'bubble':
+                return this.renderScatter(box, o.type === 'bubble');
+            default:
+                return this.renderCartesian(box);
+        }
+    }
+    summary() {
+        const o = this.options;
+        const label = CHART_TYPES.find((t) => t.value === o.type)?.label ?? o.type;
+        return `${o.title ?? 'Chart'}: ${label} chart with ${o.data.length} categories and ${o.series.length} series`;
+    }
+    renderLegend() {
+        const o = this.options;
+        const show = o.legend !== false && !['gauge', 'heatmap', 'histogram', 'waterfall', 'treemap', 'funnel', 'pyramid', 'scatter', 'bubble', 'boxPlot', 'rangeBar'].includes(o.type);
+        this.legendEl.replaceChildren();
+        this.legendEl.hidden = !show;
+        if (!show)
+            return;
+        const cats = [...new Set(o.data.map((d) => String(d[o.categoryKey])))];
+        const items = ['pie', 'donut', 'nightingale', 'radialBar', 'sunburst'].includes(o.type)
+            ? cats.slice(0, 24).map((c, i) => ({ key: c, name: c, color: this.catColor(i), toggle: false, dash: false }))
+            : o.series.map((s) => ({ key: s.key, name: s.name ?? s.key, color: this.color(s), toggle: o.series.length > 1, dash: false }));
+        if (o.forecast && ['line', 'area', 'column', 'combo'].includes(o.type))
+            items.push({ key: '__fc', name: 'Forecast', color: this.color(o.series[0]), toggle: false, dash: true });
+        if (o.trendline && ['line', 'area', 'column', 'combo', 'bar'].includes(o.type))
+            items.push({ key: '__tr', name: 'Trend', color: 'var(--agr-muted, #777)', toggle: false, dash: true });
+        for (const it of items) {
+            const b = document.createElement(it.toggle ? 'button' : 'span');
+            b.className = 'agc-legend-item';
+            if (it.toggle) {
+                b.type = 'button';
+                b.setAttribute('aria-pressed', String(!this.hidden.has(it.key)));
+                b.title = `Show or hide ${it.name}`;
+                b.addEventListener('click', () => {
+                    if (this.hidden.has(it.key))
+                        this.hidden.delete(it.key);
+                    else if (this.visibleSeries().length > 1)
+                        this.hidden.add(it.key);
+                    this.render();
+                });
+            }
+            const sw = document.createElement('span');
+            sw.className = it.dash ? 'agc-swatch agc-swatch-dash' : 'agc-swatch';
+            sw.style.background = it.dash ? 'none' : it.color;
+            if (it.dash)
+                sw.style.borderColor = it.color;
+            const t = document.createElement('span');
+            t.textContent = it.name;
+            b.append(sw, t);
+            if (this.hidden.has(it.key))
+                b.classList.add('agc-legend-off');
+            this.legendEl.append(b);
+        }
+    }
+    renderTable() {
+        const o = this.options;
+        this.tableEl.replaceChildren();
+        const cap = document.createElement('caption');
+        cap.textContent = o.title ?? 'Chart data';
+        const thead = document.createElement('thead');
+        const head = document.createElement('tr');
+        for (const name of [o.categoryKey, ...o.series.map((s) => s.name ?? s.key)]) {
+            const th = document.createElement('th');
+            th.scope = 'col';
+            th.textContent = name;
+            head.append(th);
+        }
+        thead.append(head);
+        const tb = document.createElement('tbody');
+        for (const d of o.data.slice(0, 500)) {
+            const tr = document.createElement('tr');
+            for (const v of [d[o.categoryKey], ...o.series.map((s) => d[s.key])]) {
+                const td = document.createElement('td');
+                td.textContent = typeof v === 'number' ? this.fmt(v) : String(v ?? '');
+                tr.append(td);
+            }
+            tb.append(tr);
+        }
+        this.tableEl.append(cap, thead, tb);
+    }
+    /** The data table (for a visible "Show data" view). */
+    getDataTable() {
+        const t = this.tableEl.cloneNode(true);
+        t.className = 'agc-data-table';
+        return t;
+    }
+    /* ---------- interaction ---------- */
+    bindMark(el, p, label) {
+        const o = this.options;
+        el.classList.add('agc-mark');
+        if (o.selectedCategory != null && o.selectedCategory !== p.category)
+            el.classList.add('agc-dim');
+        if (o.selectedCategory != null && o.selectedCategory === p.category)
+            el.classList.add('agc-selected');
+        const show = (x, y) => {
+            this.tooltip.textContent = label;
+            this.tooltip.hidden = false;
+            const rb = this.root.getBoundingClientRect();
+            const tw = this.tooltip.offsetWidth || 120;
+            this.tooltip.style.left = `${Math.min(Math.max(4, x - rb.left + 12), rb.width - tw - 4)}px`;
+            this.tooltip.style.top = `${Math.max(4, y - rb.top - 36)}px`;
+        };
+        el.addEventListener('mousemove', (e) => show(e.clientX, e.clientY));
+        el.addEventListener('mouseleave', () => (this.tooltip.hidden = true));
+        if (o.onPointClick) {
+            el.setAttribute('tabindex', '0');
+            el.setAttribute('role', 'button');
+            el.setAttribute('aria-label', label);
+            el.style.cursor = 'pointer';
+            el.addEventListener('click', () => o.onPointClick?.(p));
+            el.addEventListener('keydown', (e) => {
+                const k = e.key;
+                if (k === 'Enter' || k === ' ') {
+                    e.preventDefault();
+                    o.onPointClick?.(p);
+                }
+            });
+            el.addEventListener('focus', () => {
+                const r = el.getBoundingClientRect();
+                show(r.left + r.width / 2, r.top);
+            });
+            el.addEventListener('blur', () => (this.tooltip.hidden = true));
+        }
+        else {
+            const t = svg('title', {}, el);
+            t.textContent = label;
+        }
+    }
+    text(parent, x, y, s, attrs = {}) {
+        const t = svg('text', { x, y, class: 'agc-text', ...attrs }, parent);
+        t.textContent = s;
+        return t;
+    }
+    /** Text with a background "pill" so annotations stay legible over marks. */
+    callout(parent, x, y, s, cls, anchor = 'middle') {
+        const g = svg('g', { class: `agc-callout ${cls}` }, parent);
+        const w = s.length * 6.4 + 10;
+        const left = anchor === 'middle' ? x - w / 2 : anchor === 'end' ? x - w : x;
+        svg('rect', { x: left, y: y - 12, width: w, height: 17, rx: 8.5, class: 'agc-callout-bg' }, g);
+        this.text(g, left + w / 2, y + 1, s, { 'text-anchor': 'middle', class: 'agc-callout-text' });
+    }
+    /* ---------- cartesian ---------- */
+    renderCartesian(box) {
+        const o = this.options;
+        let categories = o.data.map((d) => String(d[o.categoryKey] ?? ''));
+        let series = this.visibleSeries();
+        let values = series.map((s) => o.data.map((d) => toNumber(d[s.key])));
+        let type = o.type;
+        let wf = null;
+        if (type === 'histogram') {
+            const bins = histogramBins(o.data.map((d) => toNumber(d[series[0]?.key ?? ''])), o.bins ?? 10);
+            categories = bins.map((b) => b.label);
+            series = [{ key: 'count', name: 'Count', color: this.color(o.series[0]) }];
+            values = [bins.map((b) => b.count)];
+            type = 'column';
+        }
+        if (type === 'waterfall') {
+            wf = waterfall(categories, values[0] ?? []);
+            categories = wf.map((s) => s.label);
+        }
+        const normalized = type === 'normalizedColumn' || type === 'normalizedBar' || type === 'normalizedArea';
+        if (normalized) {
+            const totals = categories.map((_, c) => values.reduce((s, v) => s + Math.max(0, v[c]), 0) || 1);
+            values = values.map((v) => v.map((x, c) => (Math.max(0, x) / totals[c]) * 100));
+        }
+        const horizontal = type === 'bar' || type === 'stackedBar' || type === 'normalizedBar';
+        const stacked = type === 'stackedColumn' || type === 'stackedBar' || type === 'stackedArea' || normalized;
+        const secondaryKeys = new Set(type === 'combo' || type === 'line' || type === 'column' ? o.secondaryAxis ?? [] : []);
+        const primaryIdx = series.map((s, i) => (secondaryKeys.has(s.key) ? -1 : i)).filter((i) => i >= 0);
+        const secondaryIdx = series.map((s, i) => (secondaryKeys.has(s.key) ? i : -1)).filter((i) => i >= 0);
+        const stacks = stacked ? stack(values) : null;
+        const canProject = !horizontal && !stacked && !wf && ['line', 'area', 'column', 'combo'].includes(type);
+        const nActual = categories.length;
+        // smart overlays
+        const fcPeriods = canProject && o.forecast ? Math.max(0, Math.min(24, Math.round(o.forecast))) : 0;
+        const fc = fcPeriods && values[0] ? holtForecast(values[0], fcPeriods) : [];
+        if (fc.length)
+            categories = [...categories, ...nextLabels(categories, fc.length)];
+        const regs = canProject || type === 'bar' ? values.map((v) => linearRegression(v)) : [];
+        let lo = 0;
+        let hi = 0;
+        if (wf) {
+            for (const s of wf) {
+                lo = Math.min(lo, s.start, s.end);
+                hi = Math.max(hi, s.start, s.end);
+            }
+        }
+        else if (stacks) {
+            for (const s of stacks)
+                for (const [a, b] of s) {
+                    lo = Math.min(lo, a);
+                    hi = Math.max(hi, b);
+                }
+        }
+        else {
+            const all = primaryIdx.flatMap((i) => values[i]);
+            lo = all.length ? Math.min(...all) : 0;
+            hi = all.length ? Math.max(...all) : 1;
+            for (const p of fc) {
+                lo = Math.min(lo, p.low);
+                hi = Math.max(hi, p.high);
+            }
+            if (o.trendline)
+                for (const i of primaryIdx) {
+                    lo = Math.min(lo, regs[i]?.at(0) ?? lo, regs[i]?.at(categories.length - 1) ?? lo);
+                    hi = Math.max(hi, regs[i]?.at(0) ?? hi, regs[i]?.at(categories.length - 1) ?? hi);
+                }
+            if (type !== 'line') {
+                lo = Math.min(0, lo);
+                hi = Math.max(0, hi);
+            }
+        }
+        for (const r of o.referenceLines ?? []) {
+            lo = Math.min(lo, r.value);
+            hi = Math.max(hi, r.value);
+        }
+        if (normalized) {
+            lo = 0;
+            hi = 100;
+        }
+        const ticks = niceTicks(lo, hi, 5);
+        const vMin = ticks[0];
+        const vMax = ticks[ticks.length - 1];
+        const fmtTick = normalized ? (v) => `${v}%` : this.fmt;
+        const tickLabels = ticks.map((t) => fmtTick(t));
+        // secondary axis
+        let sTicks = [];
+        if (secondaryIdx.length) {
+            const all = secondaryIdx.flatMap((i) => values[i]);
+            sTicks = niceTicks(Math.min(0, ...all), Math.max(0, ...all), 5);
+        }
+        const sMin = sTicks[0] ?? 0;
+        const sMax = sTicks[sTicks.length - 1] ?? 1;
+        const maxCatLen = Math.max(...categories.map((c) => c.length), 1);
+        const valLabelW = Math.max(...tickLabels.map((t) => t.length)) * 7 + 14;
+        const sLabelW = sTicks.length ? Math.max(...sTicks.map((t) => this.fmt(t).length)) * 7 + 14 : 16;
+        const m = { top: o.highlights ? 24 : 14, right: secondaryIdx.length ? sLabelW : 16, bottom: 30, left: horizontal ? Math.min(160, maxCatLen * 7 + 16) : valLabelW + (o.axisLabel ? 14 : 0) };
+        const plotW = Math.max(20, box.w - m.left - m.right);
+        const band0 = (horizontal ? box.h - m.top - m.bottom : plotW) / Math.max(1, categories.length);
+        const rotate = !horizontal && maxCatLen * 6.5 > band0;
+        if (rotate)
+            m.bottom = Math.min(90, 18 + Math.min(maxCatLen, 16) * 5);
+        if (horizontal)
+            m.bottom = 26;
+        const plotH = Math.max(20, box.h - m.top - m.bottom);
+        const g = svg('g', { transform: `translate(${m.left},${m.top})` }, this.svgEl);
+        const vScale = (v) => (horizontal ? ((v - vMin) / (vMax - vMin || 1)) * plotW : plotH - ((v - vMin) / (vMax - vMin || 1)) * plotH);
+        const sScale = (v) => plotH - ((v - sMin) / (sMax - sMin || 1)) * plotH;
+        const bandLen = (horizontal ? plotH : plotW) / Math.max(1, categories.length);
+        const catPos = (i) => i * bandLen;
+        const mid = (i) => catPos(i) + bandLen / 2;
+        if (o.axisLabel && !horizontal) {
+            this.text(g, -m.left + 10, plotH / 2, o.axisLabel, { 'text-anchor': 'middle', class: 'agc-axis-title', transform: `rotate(-90 ${-m.left + 10} ${plotH / 2})` });
+        }
+        // forecast zone shading
+        if (fc.length) {
+            const x0 = catPos(nActual);
+            svg('rect', { x: x0, y: 0, width: plotW - x0, height: plotH, class: 'agc-forecast-zone' }, g);
+            this.text(g, x0 + 4, 11, 'Forecast', { class: 'agc-axis-text' });
+        }
+        // grid + value axis
+        for (let i = 0; i < ticks.length; i++) {
+            const p = vScale(ticks[i]);
+            if (horizontal) {
+                svg('line', { x1: p, x2: p, y1: 0, y2: plotH, class: ticks[i] === 0 ? 'agc-zero' : 'agc-grid' }, g);
+                this.text(g, p, plotH + 16, tickLabels[i], { 'text-anchor': 'middle', class: 'agc-axis-text' });
+            }
+            else {
+                svg('line', { x1: 0, x2: plotW, y1: p, y2: p, class: ticks[i] === 0 ? 'agc-zero' : 'agc-grid' }, g);
+                this.text(g, -8, p + 4, tickLabels[i], { 'text-anchor': 'end', class: 'agc-axis-text' });
+            }
+        }
+        for (const t of sTicks)
+            this.text(g, plotW + 8, sScale(t) + 4, this.fmt(t), { 'text-anchor': 'start', class: 'agc-axis-text agc-axis-secondary' });
+        // category axis
+        const every = Math.max(1, Math.ceil(categories.length / Math.max(1, Math.floor((horizontal ? plotH : plotW) / (horizontal ? 15 : rotate ? 16 : 54)))));
+        categories.forEach((c, i) => {
+            if (i % every)
+                return;
+            const label = c.length > 18 ? c.slice(0, 17) + '…' : c;
+            const cls = i >= nActual ? 'agc-axis-text agc-axis-future' : 'agc-axis-text';
+            if (horizontal)
+                this.text(g, -8, mid(i) + 4, label, { 'text-anchor': 'end', class: cls });
+            else if (rotate)
+                this.text(g, mid(i), plotH + 12, label, { 'text-anchor': 'end', class: cls, transform: `rotate(-38 ${mid(i)} ${plotH + 12})` });
+            else
+                this.text(g, mid(i), plotH + 18, label, { 'text-anchor': 'middle', class: cls });
+        });
+        const pad = Math.min(14, bandLen * 0.18);
+        if (wf) {
+            wf.forEach((s, i) => {
+                const a = vScale(s.start);
+                const b = vScale(s.end);
+                const fillC = s.kind === 'total' ? 'var(--agr-accent)' : s.kind === 'up' ? 'var(--agr-success)' : 'var(--agr-danger)';
+                const r = svg('rect', { x: catPos(i) + pad, y: Math.min(a, b), width: Math.max(1, bandLen - pad * 2), height: Math.max(1, Math.abs(a - b)), rx: 2 }, g);
+                r.style.fill = fillC;
+                this.bindMark(r, { category: s.label, seriesKey: o.series[0].key, value: s.value, datum: o.data[i] ?? null }, `${s.label}: ${s.value >= 0 && s.kind !== 'total' ? '+' : ''}${this.fmt(s.value)}`);
+                if (o.dataLabels)
+                    this.text(g, catPos(i) + bandLen / 2, Math.min(a, b) - 4, this.fmt(s.value), { 'text-anchor': 'middle', class: 'agc-data-label' });
+            });
+            this.drawReferenceLines(g, vScale, plotW, horizontal);
+            return;
+        }
+        const isLineType = type === 'line' || type === 'area' || type === 'stackedArea' || type === 'normalizedArea';
+        const isAreaType = type === 'area' || type === 'stackedArea' || type === 'normalizedArea';
+        const barSeries = type === 'combo' ? primaryIdx.slice(0, 1).map((i) => series[i]) : isLineType ? [] : primaryIdx.map((i) => series[i]);
+        const lineSeries = type === 'combo'
+            ? series.filter((s) => !barSeries.includes(s))
+            : isLineType ? series : secondaryIdx.map((i) => series[i]);
+        const nb = stacked ? 1 : Math.max(1, barSeries.length);
+        const inner = Math.max(1, bandLen - pad * 2);
+        const bw = inner / nb;
+        barSeries.forEach((s, si) => {
+            const idx = series.indexOf(s);
+            values[idx].forEach((v, ci) => {
+                const c = categories[ci];
+                let a;
+                let b;
+                if (stacks) {
+                    a = vScale(stacks[idx][ci][0]);
+                    b = vScale(stacks[idx][ci][1]);
+                }
+                else {
+                    a = vScale(0 < vMin ? vMin : 0);
+                    b = vScale(v);
+                }
+                const off = catPos(ci) + pad + (stacked ? 0 : si * bw);
+                const thickness = Math.max(1, (stacked ? inner : bw) - (nb > 1 && !stacked ? 2 : 0));
+                const rect = horizontal
+                    ? svg('rect', { x: Math.min(a, b), y: off, width: Math.max(1, Math.abs(b - a)), height: thickness, rx: 2 }, g)
+                    : svg('rect', { x: off, y: Math.min(a, b), width: thickness, height: Math.max(1, Math.abs(a - b)), rx: 2 }, g);
+                rect.style.fill = this.color(s);
+                const shown = normalized ? `${v.toFixed(1)}%` : this.fmt(v);
+                this.bindMark(rect, { category: c, seriesKey: s.key, value: v, datum: o.data[ci] ?? null }, `${c} · ${s.name ?? s.key}: ${shown}`);
+                if (o.dataLabels && !stacked) {
+                    if (horizontal)
+                        this.text(g, Math.max(a, b) + 4, off + thickness / 2 + 4, shown, { class: 'agc-data-label' });
+                    else
+                        this.text(g, off + thickness / 2, (v >= 0 ? Math.min(a, b) - 4 : Math.max(a, b) + 12), shown, { 'text-anchor': 'middle', class: 'agc-data-label' });
+                }
+            });
+        });
+        const lineSeriesPts = [];
+        lineSeries.forEach((s) => {
+            const idx = series.indexOf(s);
+            const onSecondary = secondaryKeys.has(s.key);
+            const scale = onSecondary ? sScale : vScale;
+            const stackTop = stacks && isAreaType ? stacks[idx] : null;
+            const pts = values[idx].map((v, ci) => [mid(ci), stackTop ? vScale(stackTop[ci][1]) : scale(v)]);
+            lineSeriesPts.push({ s, pts });
+            const d = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join('');
+            if (isAreaType && !onSecondary) {
+                let closing;
+                if (stackTop) {
+                    closing = pts.map((p, i) => [p[0], vScale(stackTop[i][0])]).reverse().map((p) => `L${p[0].toFixed(1)},${p[1].toFixed(1)}`).join('') + 'Z';
+                }
+                else {
+                    const base = vScale(Math.max(vMin, 0));
+                    closing = `L${pts[pts.length - 1][0]},${base}L${pts[0][0]},${base}Z`;
+                }
+                const area = svg('path', { d: `${d}${closing}`, class: `agc-area ${stackTop ? 'agc-area-stacked' : ''}` }, g);
+                area.style.fill = this.color(s);
+            }
+            const path = svg('path', { d, class: `agc-line ${onSecondary ? 'agc-line-secondary' : ''}` }, g);
+            path.style.stroke = this.color(s);
+            pts.forEach((p, ci) => {
+                const dot = svg('circle', { cx: p[0], cy: p[1], r: pts.length > 60 ? 2 : 3.5, class: 'agc-dot' }, g);
+                dot.style.fill = this.color(s);
+                const v = values[idx][ci];
+                this.bindMark(dot, { category: categories[ci], seriesKey: s.key, value: v, datum: o.data[ci] ?? null }, `${categories[ci]} · ${s.name ?? s.key}: ${normalized ? `${v.toFixed(1)}%` : this.fmt(v)}`);
+                if (o.dataLabels && pts.length <= 24)
+                    this.text(g, p[0], p[1] - 8, this.fmt(v), { 'text-anchor': 'middle', class: 'agc-data-label' });
+            });
+        });
+        // trend lines (primary series)
+        if (o.trendline && !stacked) {
+            for (const i of primaryIdx) {
+                const reg = regs[i];
+                if (!reg || values[i].length < 2)
+                    continue;
+                const end = categories.length - 1;
+                if (horizontal) {
+                    const t = svg('line', { x1: vScale(reg.at(0)), y1: mid(0), x2: vScale(reg.at(end)), y2: mid(end), class: 'agc-trend' }, g);
+                    t.setAttribute('aria-hidden', 'true');
+                }
+                else {
+                    svg('line', { x1: mid(0), y1: vScale(reg.at(0)), x2: mid(end), y2: vScale(reg.at(end)), class: 'agc-trend' }, g);
+                }
+            }
+        }
+        // forecast (first series)
+        if (fc.length && values[0]?.length) {
+            const sc = (v) => vScale(v);
+            const lastX = mid(nActual - 1);
+            const lastY = sc(values[0][nActual - 1]);
+            const upper = fc.map((p, k) => `${mid(nActual + k).toFixed(1)},${sc(p.high).toFixed(1)}`);
+            const lower = fc.map((p, k) => `${mid(nActual + k).toFixed(1)},${sc(p.low).toFixed(1)}`).reverse();
+            const band = svg('polygon', { points: [`${lastX},${lastY}`, ...upper, ...lower].join(' '), class: 'agc-forecast-band' }, g);
+            band.style.fill = this.color(series[0]);
+            const d = `M${lastX},${lastY}` + fc.map((p, k) => `L${mid(nActual + k).toFixed(1)},${sc(p.value).toFixed(1)}`).join('');
+            const fl = svg('path', { d, class: 'agc-forecast-line' }, g);
+            fl.style.stroke = this.color(series[0]);
+            fc.forEach((p, k) => {
+                const dot = svg('circle', { cx: mid(nActual + k), cy: sc(p.value), r: 3.5, class: 'agc-dot agc-dot-forecast' }, g);
+                dot.style.stroke = this.color(series[0]);
+                this.bindMark(dot, { category: categories[nActual + k], seriesKey: series[0].key, value: p.value, datum: null }, `${categories[nActual + k]} forecast: ${this.fmt(p.value)} (range ${this.fmt(p.low)} to ${this.fmt(p.high)})`);
+            });
+        }
+        this.drawReferenceLines(g, vScale, plotW, horizontal);
+        // highlights on first series
+        if (o.highlights && values[0]?.length > 1 && !stacked && !horizontal) {
+            const { maxIndex, minIndex } = extremes(values[0].slice(0, nActual));
+            const isLine = lineSeries.includes(series[0]);
+            const yOf = (i) => vScale(values[0][i]);
+            for (const [i, kind] of [[maxIndex, 'High'], [minIndex, 'Low']]) {
+                if (i < 0)
+                    continue;
+                const x = mid(i);
+                const y = isLine ? yOf(i) : Math.min(yOf(i), vScale(0));
+                svg('circle', { cx: x, cy: isLine ? y : yOf(i), r: 7, class: `agc-highlight agc-highlight-${kind.toLowerCase()}` }, g);
+                const above = kind === 'High' || values[0][i] >= 0;
+                const ly = above ? Math.max(12, y - 14) : Math.min(plotH - 4, y + 22);
+                const anchor = x < 50 ? 'start' : x > plotW - 50 ? 'end' : 'middle';
+                this.callout(g, anchor === 'start' ? x - 6 : anchor === 'end' ? x + 6 : x, ly, `${kind} ${this.fmt(values[0][i])}`, `agc-callout-${kind.toLowerCase()}`, anchor);
+            }
+        }
+    }
+    drawReferenceLines(g, vScale, plotW, horizontal) {
+        for (const r of this.options.referenceLines ?? []) {
+            const p = vScale(r.value);
+            if (horizontal) {
+                svg('line', { x1: p, x2: p, y1: 0, y2: '100%', class: 'agc-reference' }, g);
+            }
+            else {
+                svg('line', { x1: 0, x2: plotW, y1: p, y2: p, class: 'agc-reference' }, g);
+                if (r.label)
+                    this.text(g, plotW - 4, p - 5, r.label, { 'text-anchor': 'end', class: 'agc-reference-label' });
+            }
+        }
+    }
+    /* ---------- pie / donut ---------- */
+    renderPie(box, donut) {
+        const o = this.options;
+        const s = o.series[0];
+        const vals = o.data.map((d) => Math.max(0, toNumber(d[s.key])));
+        const total = vals.reduce((a, b) => a + b, 0) || 1;
+        const cx = box.w / 2;
+        const cy = box.h / 2;
+        const r = Math.max(10, Math.min(box.w * 0.32, box.h / 2 - 18));
+        const ir = donut ? r * 0.58 : 0;
+        let a0 = -Math.PI / 2;
+        const g = svg('g', {}, this.svgEl);
+        o.data.forEach((d, i) => {
+            const frac = vals[i] / total;
+            const a1 = a0 + frac * Math.PI * 2;
+            const large = a1 - a0 > Math.PI ? 1 : 0;
+            const p = (rad, a) => `${cx + rad * Math.cos(a)},${cy + rad * Math.sin(a)}`;
+            const path = frac >= 0.9999
+                ? `M${cx - r},${cy}a${r},${r} 0 1,0 ${r * 2},0a${r},${r} 0 1,0 ${-r * 2},0` + (ir ? `M${cx - ir},${cy}a${ir},${ir} 0 1,1 ${ir * 2},0a${ir},${ir} 0 1,1 ${-ir * 2},0` : '')
+                : ir
+                    ? `M${p(r, a0)}A${r},${r} 0 ${large} 1 ${p(r, a1)}L${p(ir, a1)}A${ir},${ir} 0 ${large} 0 ${p(ir, a0)}Z`
+                    : `M${cx},${cy}L${p(r, a0)}A${r},${r} 0 ${large} 1 ${p(r, a1)}Z`;
+            const el = svg('path', { d: path, class: 'agc-slice', 'fill-rule': 'evenodd' }, g);
+            el.style.fill = this.catColor(i);
+            const cat = String(d[o.categoryKey]);
+            this.bindMark(el, { category: cat, seriesKey: s.key, value: vals[i], datum: d }, `${cat}: ${this.fmt(vals[i])} (${(frac * 100).toFixed(1)}%)`);
+            if (frac > 0.06) {
+                const midA = (a0 + a1) / 2;
+                const lr = r + 14;
+                const x = cx + lr * Math.cos(midA);
+                const pct = `${(frac * 100).toFixed(0)}%`;
+                this.text(g, x, cy + lr * Math.sin(midA) + 4, o.dataLabels ? `${cat} ${pct}` : pct, { 'text-anchor': x < cx - 2 ? 'end' : x > cx + 2 ? 'start' : 'middle', class: 'agc-axis-text' });
+            }
+            a0 = a1;
+        });
+        if (donut) {
+            this.text(g, cx, cy - 2, this.fmt(total), { 'text-anchor': 'middle', class: 'agc-big' });
+            this.text(g, cx, cy + 16, s.name ?? s.key, { 'text-anchor': 'middle', class: 'agc-axis-text' });
+        }
+    }
+    renderFunnel(box) {
+        const o = this.options;
+        const s = o.series[0];
+        const rows = o.data.map((d) => ({ d, c: String(d[o.categoryKey]), v: Math.max(0, toNumber(d[s.key])) }));
+        const max = Math.max(...rows.map((r) => r.v), 1);
+        const first = rows[0]?.v || 1;
+        const rowH = Math.min(46, (box.h - 10) / rows.length);
+        const labelW = Math.min(140, Math.max(...rows.map((r) => r.c.length)) * 7 + 12);
+        const valueW = 110;
+        const maxW = Math.max(40, box.w - labelW - valueW - 20);
+        const g = svg('g', { transform: 'translate(0,5)' }, this.svgEl);
+        rows.forEach((r, i) => {
+            const w = Math.max(4, (r.v / max) * maxW);
+            const x = labelW + 10 + (maxW - w) / 2;
+            const rect = svg('rect', { x, y: i * rowH + 2, width: w, height: rowH - 4, rx: 3 }, g);
+            rect.style.fill = this.catColor(i);
+            const conv = i === 0 ? '' : ` · ${((r.v / first) * 100).toFixed(0)}% of ${rows[0].c}`;
+            const step = i === 0 ? '' : ` (${((r.v / (rows[i - 1].v || 1)) * 100).toFixed(0)}% from ${rows[i - 1].c})`;
+            this.bindMark(rect, { category: r.c, seriesKey: s.key, value: r.v, datum: r.d }, `${r.c}: ${this.fmt(r.v)}${conv}${step}`);
+            this.text(g, labelW, i * rowH + rowH / 2 + 4, r.c, { 'text-anchor': 'end', class: 'agc-axis-text' });
+            this.text(g, labelW + 20 + maxW, i * rowH + rowH / 2 + 4, `${this.fmt(r.v)}${i ? ` · ${((r.v / first) * 100).toFixed(0)}%` : ''}`, { class: 'agc-axis-text' });
+        });
+    }
+    renderTreemap(box) {
+        const o = this.options;
+        const s = o.series[0];
+        const vals = o.data.map((d) => toNumber(d[s.key]));
+        const total = vals.reduce((a, b) => a + Math.max(0, b), 0) || 1;
+        const rects = treemap(vals, { x: 2, y: 2, w: box.w - 4, h: box.h - 4 });
+        const g = svg('g', {}, this.svgEl);
+        rects.forEach((r, i) => {
+            if (!r.w || !r.h)
+                return;
+            const el = svg('rect', { x: r.x + 1, y: r.y + 1, width: Math.max(0, r.w - 2), height: Math.max(0, r.h - 2), rx: 3 }, g);
+            el.style.fill = this.catColor(i);
+            const cat = String(o.data[i][o.categoryKey]);
+            this.bindMark(el, { category: cat, seriesKey: s.key, value: vals[i], datum: o.data[i] }, `${cat}: ${this.fmt(vals[i])} (${((Math.max(0, vals[i]) / total) * 100).toFixed(1)}%)`);
+            if (r.w > 60 && r.h > 30) {
+                this.text(g, r.x + 8, r.y + 18, cat.length * 7 > r.w - 12 ? cat.slice(0, Math.max(1, Math.floor((r.w - 16) / 7))) + '…' : cat, { class: 'agc-on-mark' });
+                if (r.h > 44)
+                    this.text(g, r.x + 8, r.y + 34, this.fmt(vals[i]), { class: 'agc-on-mark agc-on-mark-sub' });
+            }
+        });
+    }
+    renderHeatmap(box) {
+        const o = this.options;
+        const series = this.visibleSeries();
+        const cats = o.data.map((d) => String(d[o.categoryKey]));
+        const vals = o.data.map((d) => series.map((s) => toNumber(d[s.key])));
+        const flat = vals.flat();
+        const lo = Math.min(...flat);
+        const hi = Math.max(...flat);
+        const m = { top: 26, left: Math.min(150, Math.max(...cats.map((c) => c.length)) * 7 + 14), right: 8, bottom: 6 };
+        const cw = (box.w - m.left - m.right) / Math.max(1, series.length);
+        const ch = (box.h - m.top - m.bottom) / Math.max(1, cats.length);
+        const g = svg('g', { transform: `translate(${m.left},${m.top})` }, this.svgEl);
+        series.forEach((s, si) => this.text(g, si * cw + cw / 2, -9, s.name ?? s.key, { 'text-anchor': 'middle', class: 'agc-axis-text' }));
+        cats.forEach((c, ci) => {
+            this.text(g, -8, ci * ch + ch / 2 + 4, c, { 'text-anchor': 'end', class: 'agc-axis-text' });
+            series.forEach((s, si) => {
+                const v = vals[ci][si];
+                const t = hi === lo ? 0.6 : (v - lo) / (hi - lo);
+                const rect = svg('rect', { x: si * cw + 1, y: ci * ch + 1, width: Math.max(0, cw - 2), height: Math.max(0, ch - 2), rx: 2 }, g);
+                rect.style.fill = `color-mix(in srgb, var(--agr-accent) ${Math.round(12 + t * 88)}%, var(--agr-bg))`;
+                this.bindMark(rect, { category: c, seriesKey: s.key, value: v, datum: o.data[ci] }, `${c} · ${s.name ?? s.key}: ${this.fmt(v)}`);
+                if (cw > 44 && ch > 18)
+                    this.text(g, si * cw + cw / 2, ci * ch + ch / 2 + 4, this.fmt(v), { 'text-anchor': 'middle', class: t > 0.55 ? 'agc-on-accent' : 'agc-axis-text' });
+            });
+        });
+    }
+    renderGauge(box) {
+        const o = this.options;
+        const s = o.series[0];
+        const v = toNumber(o.data[0]?.[s.key]);
+        const max = o.max ?? niceTicks(0, Math.max(v, o.target ?? 0, 1), 4).pop();
+        const frac = Math.max(0, Math.min(1, v / (max || 1)));
+        const cx = box.w / 2;
+        const r = Math.max(30, Math.min(box.w / 2 - 34, box.h * 0.62));
+        const cy = Math.min(box.h - 34, 18 + r);
+        const pt = (f, rad = r) => {
+            const a = Math.PI * (1 + f);
+            return [cx + rad * Math.cos(a), cy + rad * Math.sin(a)];
+        };
+        const arc = (f0, f1, rad = r) => {
+            const [x0, y0] = pt(f0, rad);
+            const [x1, y1] = pt(f1, rad);
+            return `M${x0},${y0}A${rad},${rad} 0 0 1 ${x1},${y1}`;
+        };
+        svg('path', { d: arc(0, 1), class: 'agc-gauge-track' }, this.svgEl);
+        for (const b of o.thresholds ?? []) {
+            const f0 = Math.max(0, Math.min(1, b.from / max));
+            const f1 = Math.max(0, Math.min(1, b.to / max));
+            if (f1 <= f0)
+                continue;
+            const band = svg('path', { d: arc(f0, f1, r + 15), class: `agc-gauge-band agc-band-${b.tone}` }, this.svgEl);
+            const t = svg('title', {}, band);
+            t.textContent = `${b.label ?? b.tone}: ${this.fmt(b.from)} – ${this.fmt(b.to)}`;
+        }
+        const val = svg('path', { d: arc(0, Math.max(0.001, frac)), class: 'agc-gauge-value' }, this.svgEl);
+        val.style.stroke = this.color(s);
+        this.bindMark(val, { category: String(o.data[0]?.[o.categoryKey] ?? ''), seriesKey: s.key, value: v, datum: o.data[0] ?? null }, `${s.name ?? s.key}: ${this.fmt(v)} of ${this.fmt(max)}${o.target != null ? `, target ${this.fmt(o.target)}` : ''}`);
+        if (o.target != null) {
+            const tf = Math.max(0, Math.min(1, o.target / max));
+            const [x0, y0] = pt(tf, r - 14);
+            const [x1, y1] = pt(tf, r + 20);
+            svg('line', { x1: x0, y1: y0, x2: x1, y2: y1, class: 'agc-gauge-target' }, this.svgEl);
+            const [lx, ly] = pt(tf, r + 30);
+            this.text(this.svgEl, lx, ly, `Target ${this.fmt(o.target)}`, { 'text-anchor': tf < 0.4 ? 'end' : tf > 0.6 ? 'start' : 'middle', class: 'agc-axis-text agc-target-label' });
+        }
+        const status = o.target == null ? '' : v >= o.target ? ' · on target' : ` · ${this.fmt(o.target - v)} below target`;
+        this.text(this.svgEl, cx, cy - 10, this.fmt(v), { 'text-anchor': 'middle', class: 'agc-big' });
+        this.text(this.svgEl, cx, cy + 12, `${s.name ?? s.key}${status}`, { 'text-anchor': 'middle', class: 'agc-axis-text' });
+        this.text(this.svgEl, cx - r, cy + 18, this.fmt(0), { 'text-anchor': 'middle', class: 'agc-axis-text' });
+        this.text(this.svgEl, cx + r, cy + 18, this.fmt(max), { 'text-anchor': 'middle', class: 'agc-axis-text' });
+    }
+    renderRadar(box, filled = true) {
+        const o = this.options;
+        const series = this.visibleSeries();
+        const cats = o.data.map((d) => String(d[o.categoryKey]));
+        const raw = o.data.map((d) => series.map((s) => toNumber(d[s.key])));
+        const vals = o.normalize
+            ? raw.map((row) => {
+                const mx = Math.max(...row.map(Math.abs), 1e-9);
+                return row.map((v) => (Math.max(0, v) / mx) * 100);
+            })
+            : raw;
+        const max = o.normalize ? 100 : niceTicks(0, Math.max(...vals.flat(), 1), 4).pop();
+        const cx = box.w / 2;
+        const cy = box.h / 2;
+        const r = Math.min(box.w, box.h) / 2 - 36;
+        const n = Math.max(3, cats.length);
+        const pt = (i, f) => [cx + r * f * Math.cos(-Math.PI / 2 + (i * 2 * Math.PI) / n), cy + r * f * Math.sin(-Math.PI / 2 + (i * 2 * Math.PI) / n)];
+        for (const f of [0.25, 0.5, 0.75, 1]) {
+            svg('polygon', { points: cats.map((_, i) => pt(i, f).join(',')).join(' '), class: 'agc-grid agc-radar-ring' }, this.svgEl);
+        }
+        if (o.normalize)
+            this.text(this.svgEl, cx + 4, cy - r - 4, '100', { class: 'agc-axis-text' });
+        cats.forEach((c, i) => {
+            const [x, y] = pt(i, 1);
+            svg('line', { x1: cx, y1: cy, x2: x, y2: y, class: 'agc-grid' }, this.svgEl);
+            const [lx, ly] = pt(i, 1.13);
+            this.text(this.svgEl, lx, ly + 4, c, { 'text-anchor': lx < cx - 4 ? 'end' : lx > cx + 4 ? 'start' : 'middle', class: 'agc-axis-text' });
+        });
+        series.forEach((s, si) => {
+            const pts = vals.map((row, i) => pt(i, row[si] / max));
+            const poly = svg('polygon', { points: pts.map((p) => p.join(',')).join(' '), class: filled ? 'agc-radar-area' : 'agc-radar-line' }, this.svgEl);
+            poly.style.fill = filled ? this.color(s) : 'none';
+            poly.style.stroke = this.color(s);
+            pts.forEach((p, i) => {
+                const dot = svg('circle', { cx: p[0], cy: p[1], r: 3.5, class: 'agc-dot' }, this.svgEl);
+                dot.style.fill = this.color(s);
+                const shown = o.normalize ? `${vals[i][si].toFixed(0)} / 100 (actual ${this.fmt(raw[i][si])})` : this.fmt(raw[i][si]);
+                this.bindMark(dot, { category: cats[i], seriesKey: s.key, value: raw[i][si], datum: o.data[i] }, `${cats[i]} · ${s.name ?? s.key}: ${shown}`);
+            });
+        });
+    }
+    /* ---------- polar, hierarchical, statistical, pyramid ---------- */
+    arcPath(cx, cy, r0, r1, a0, a1) {
+        const p = (rad, a) => `${(cx + rad * Math.cos(a)).toFixed(2)},${(cy + rad * Math.sin(a)).toFixed(2)}`;
+        const large = a1 - a0 > Math.PI ? 1 : 0;
+        if (a1 - a0 >= Math.PI * 2 - 1e-6)
+            a1 = a0 + Math.PI * 2 - 1e-4;
+        return r0 > 0
+            ? `M${p(r1, a0)}A${r1},${r1} 0 ${large} 1 ${p(r1, a1)}L${p(r0, a1)}A${r0},${r0} 0 ${large} 0 ${p(r0, a0)}Z`
+            : `M${cx},${cy}L${p(r1, a0)}A${r1},${r1} 0 ${large} 1 ${p(r1, a1)}Z`;
+    }
+    /** Nightingale rose: equal angles, radius ∝ √value so area stays proportional. */
+    renderNightingale(box) {
+        const o = this.options;
+        const s = o.series[0];
+        const vals = o.data.map((d) => Math.max(0, toNumber(d[s.key])));
+        const max = Math.max(...vals, 1e-9);
+        const cx = box.w / 2;
+        const cy = box.h / 2;
+        const R = Math.max(10, Math.min(box.w * 0.34, box.h / 2 - 22));
+        const step = (Math.PI * 2) / Math.max(1, vals.length);
+        const g = svg('g', {}, this.svgEl);
+        for (const f of [0.25, 0.5, 0.75, 1])
+            svg('circle', { cx, cy, r: R * Math.sqrt(f), class: 'agc-grid', fill: 'none' }, g);
+        o.data.forEach((d, i) => {
+            const a0 = -Math.PI / 2 + i * step + 0.01;
+            const a1 = a0 + step - 0.02;
+            const r = R * Math.sqrt(vals[i] / max);
+            const el = svg('path', { d: this.arcPath(cx, cy, 0, Math.max(1, r), a0, a1), class: 'agc-slice' }, g);
+            el.style.fill = this.catColor(i);
+            const cat = String(d[o.categoryKey]);
+            this.bindMark(el, { category: cat, seriesKey: s.key, value: vals[i], datum: d }, `${cat}: ${this.fmt(vals[i])}`);
+            const midA = (a0 + a1) / 2;
+            const lr = Math.max(r, R * 0.35) + 12;
+            const x = cx + lr * Math.cos(midA);
+            if (vals.length <= 16)
+                this.text(g, x, cy + lr * Math.sin(midA) + 4, cat, { 'text-anchor': x < cx - 2 ? 'end' : x > cx + 2 ? 'start' : 'middle', class: 'agc-axis-text' });
+        });
+    }
+    /** Radial bar: one ring per category, arc length ∝ value. */
+    renderRadialBar(box) {
+        const o = this.options;
+        const s = o.series[0];
+        const vals = o.data.map((d) => Math.max(0, toNumber(d[s.key])));
+        const max = niceTicks(0, Math.max(...vals, 1), 4).pop();
+        const cx = box.w / 2;
+        const cy = box.h / 2;
+        const R = Math.max(20, Math.min(box.w / 2 - 20, box.h / 2 - 12));
+        const inner = R * 0.28;
+        const n = Math.max(1, vals.length);
+        const ring = (R - inner) / n;
+        const g = svg('g', {}, this.svgEl);
+        o.data.forEach((d, i) => {
+            const r1 = R - i * ring - 1;
+            const r0 = Math.max(inner, r1 - ring + 3);
+            svg('path', { d: this.arcPath(cx, cy, r0, r1, -Math.PI / 2, Math.PI * 1.5 - 0.001), class: 'agc-gauge-track-fill' }, g);
+            const a1 = -Math.PI / 2 + Math.max(0.002, vals[i] / max) * Math.PI * 1.5;
+            const el = svg('path', { d: this.arcPath(cx, cy, r0, r1, -Math.PI / 2, a1), class: 'agc-slice' }, g);
+            el.style.fill = this.catColor(i);
+            const cat = String(d[o.categoryKey]);
+            this.bindMark(el, { category: cat, seriesKey: s.key, value: vals[i], datum: d }, `${cat}: ${this.fmt(vals[i])}`);
+            if (ring >= 11)
+                this.text(g, cx - 6, cy - (r0 + r1) / 2 + 4, `${cat.length > 14 ? cat.slice(0, 13) + '…' : cat}  ${this.fmt(vals[i])}`, { 'text-anchor': 'end', class: 'agc-axis-text' });
+        });
+    }
+    /**
+     * Sunburst: inner ring = categories, outer ring = each category split by series
+     * (or by `subCategoryKey` when the data is not pre-aggregated).
+     */
+    renderSunburst(box) {
+        const o = this.options;
+        const series = this.visibleSeries();
+        const sub = o.subCategoryKey;
+        const nodes = [];
+        if (sub) {
+            const map = new Map();
+            for (const d of o.data) {
+                const c = String(d[o.categoryKey]);
+                const k = String(d[sub]);
+                const m = map.get(c) ?? new Map();
+                m.set(k, (m.get(k) ?? 0) + Math.max(0, toNumber(d[series[0].key])));
+                map.set(c, m);
+            }
+            for (const [c, m] of map)
+                nodes.push({ name: c, value: [...m.values()].reduce((a, b) => a + b, 0), children: [...m].map(([k, v]) => ({ name: k, value: v, key: series[0].key })) });
+        }
+        else {
+            for (const d of o.data) {
+                const children = series.map((s) => ({ name: s.name ?? s.key, value: Math.max(0, toNumber(d[s.key])), key: s.key }));
+                nodes.push({ name: String(d[o.categoryKey]), value: children.reduce((a, c) => a + c.value, 0), children });
+            }
+        }
+        const total = nodes.reduce((a, n) => a + n.value, 0) || 1;
+        const cx = box.w / 2;
+        const cy = box.h / 2;
+        const R = Math.max(20, Math.min(box.w * 0.36, box.h / 2 - 8));
+        const r0 = R * 0.22;
+        const r1 = R * 0.6;
+        const g = svg('g', {}, this.svgEl);
+        let a = -Math.PI / 2;
+        nodes.forEach((n, i) => {
+            const span = (n.value / total) * Math.PI * 2;
+            if (span <= 0)
+                return;
+            const el = svg('path', { d: this.arcPath(cx, cy, r0, r1, a, a + span), class: 'agc-slice agc-sun-inner' }, g);
+            el.style.fill = this.catColor(i);
+            this.bindMark(el, { category: n.name, seriesKey: series[0]?.key ?? '', value: n.value, datum: null }, `${n.name}: ${this.fmt(n.value)} (${((n.value / total) * 100).toFixed(1)}%)`);
+            if (span > 0.35) {
+                const m = a + span / 2;
+                this.text(g, cx + ((r0 + r1) / 2) * Math.cos(m), cy + ((r0 + r1) / 2) * Math.sin(m) + 4, n.name.length > 10 ? n.name.slice(0, 9) + '…' : n.name, { 'text-anchor': 'middle', class: 'agc-on-mark' });
+            }
+            let b = a;
+            const nt = n.value || 1;
+            n.children.forEach((c, k) => {
+                const cs = (c.value / nt) * span;
+                if (cs <= 0)
+                    return;
+                const ce = svg('path', { d: this.arcPath(cx, cy, r1 + 2, R, b, b + cs), class: 'agc-slice agc-sun-outer' }, g);
+                ce.style.fill = `color-mix(in srgb, ${this.catColor(i)} ${Math.max(35, 85 - k * 14)}%, var(--agr-bg, #fff))`;
+                this.bindMark(ce, { category: n.name, seriesKey: c.key, value: c.value, datum: null }, `${n.name} › ${c.name}: ${this.fmt(c.value)}`);
+                b += cs;
+            });
+            a += span;
+        });
+        this.text(g, cx, cy + 4, this.fmt(total), { 'text-anchor': 'middle', class: 'agc-axis-text agc-sun-total' });
+    }
+    /** Pyramid: segments stacked into a triangle, height ∝ value. */
+    renderPyramid(box) {
+        const o = this.options;
+        const s = o.series[0];
+        const rows = o.data.map((d) => ({ d, c: String(d[o.categoryKey]), v: Math.max(0, toNumber(d[s.key])) })).sort((a, b) => a.v - b.v);
+        const total = rows.reduce((a, r) => a + r.v, 0) || 1;
+        const labelW = 150;
+        const H = box.h - 10;
+        const W = Math.max(60, Math.min(box.w - labelW - 20, H * 1.3));
+        const x0 = (box.w - labelW - W) / 2;
+        const cx = x0 + W / 2;
+        const g = svg('g', { transform: 'translate(0,5)' }, this.svgEl);
+        let y = 0;
+        rows.forEach((r, i) => {
+            const h = (r.v / total) * H;
+            const wTop = (y / H) * W;
+            const wBot = ((y + h) / H) * W;
+            const pts = [[cx - wTop / 2, y], [cx + wTop / 2, y], [cx + wBot / 2, y + h - 1], [cx - wBot / 2, y + h - 1]];
+            const el = svg('polygon', { points: pts.map((p) => p.join(',')).join(' ') }, g);
+            el.style.fill = this.catColor(i);
+            this.bindMark(el, { category: r.c, seriesKey: s.key, value: r.v, datum: r.d }, `${r.c}: ${this.fmt(r.v)} (${((r.v / total) * 100).toFixed(1)}%)`);
+            if (h >= 12)
+                this.text(g, cx + W / 2 + 14, y + h / 2 + 4, `${r.c} · ${this.fmt(r.v)}`, { class: 'agc-axis-text' });
+            y += h;
+        });
+    }
+    /**
+     * Box plot (quartiles) and range bar (min–max with mean) per category, computed from raw rows:
+     * every row is one observation of series[0] in its category.
+     */
+    renderStat(box, kind) {
+        const o = this.options;
+        const s = o.series[0];
+        const groups = new Map();
+        for (const d of o.data) {
+            const v = toNumber(d[s.key]);
+            if (!Number.isFinite(v))
+                continue;
+            const c = String(d[o.categoryKey]);
+            (groups.get(c) ?? groups.set(c, []).get(c)).push(v);
+        }
+        const q = (sorted, p) => {
+            const i = (sorted.length - 1) * p;
+            const lo = Math.floor(i);
+            return sorted[lo] + (sorted[Math.min(lo + 1, sorted.length - 1)] - sorted[lo]) * (i - lo);
+        };
+        const stats = [...groups].map(([c, vs]) => {
+            const v = [...vs].sort((a, b) => a - b);
+            return { c, min: v[0], q1: q(v, 0.25), med: q(v, 0.5), q3: q(v, 0.75), max: v[v.length - 1], mean: v.reduce((a, b) => a + b, 0) / v.length, n: v.length };
+        });
+        if (!stats.length)
+            return;
+        const ticks = niceTicks(Math.min(...stats.map((x) => x.min)), Math.max(...stats.map((x) => x.max)), 5);
+        const lo = ticks[0];
+        const hi = ticks[ticks.length - 1];
+        const horizontal = kind === 'rangeBar';
+        const catW = Math.min(150, Math.max(...stats.map((x) => x.c.length)) * 7 + 16);
+        const valW = Math.max(...ticks.map((t) => this.fmt(t).length)) * 7 + 14;
+        const m = { top: 12, right: 16, bottom: 28, left: horizontal ? catW : valW };
+        const pw = box.w - m.left - m.right;
+        const ph = box.h - m.top - m.bottom;
+        const g = svg('g', { transform: `translate(${m.left},${m.top})` }, this.svgEl);
+        const vs = (v) => (horizontal ? ((v - lo) / (hi - lo || 1)) * pw : ph - ((v - lo) / (hi - lo || 1)) * ph);
+        const band = (horizontal ? ph : pw) / stats.length;
+        for (const t of ticks) {
+            const p = vs(t);
+            if (horizontal) {
+                svg('line', { x1: p, x2: p, y1: 0, y2: ph, class: 'agc-grid' }, g);
+                this.text(g, p, ph + 16, this.fmt(t), { 'text-anchor': 'middle', class: 'agc-axis-text' });
+            }
+            else {
+                svg('line', { x1: 0, x2: pw, y1: p, y2: p, class: 'agc-grid' }, g);
+                this.text(g, -8, p + 4, this.fmt(t), { 'text-anchor': 'end', class: 'agc-axis-text' });
+            }
+        }
+        stats.forEach((st, i) => {
+            const c0 = i * band;
+            const midP = c0 + band / 2;
+            const thick = Math.max(4, Math.min(40, band * 0.5));
+            const color = this.catColor(i);
+            const label = st.c.length > 16 ? st.c.slice(0, 15) + '…' : st.c;
+            if (horizontal) {
+                this.text(g, -8, midP + 4, label, { 'text-anchor': 'end', class: 'agc-axis-text' });
+                const r = svg('rect', { x: vs(st.min), y: midP - thick / 2, width: Math.max(2, vs(st.max) - vs(st.min)), height: thick, rx: thick / 2 }, g);
+                r.style.fill = color;
+                svg('line', { x1: vs(st.mean), x2: vs(st.mean), y1: midP - thick / 2 - 3, y2: midP + thick / 2 + 3, class: 'agc-stat-mean' }, g);
+                this.bindMark(r, { category: st.c, seriesKey: s.key, value: st.mean, datum: null }, `${st.c}: ${this.fmt(st.min)} – ${this.fmt(st.max)}, mean ${this.fmt(st.mean)} (${st.n} rows)`);
+            }
+            else {
+                this.text(g, midP, ph + 18, label, { 'text-anchor': 'middle', class: 'agc-axis-text' });
+                svg('line', { x1: midP, x2: midP, y1: vs(st.max), y2: vs(st.q3), class: 'agc-stat-whisker' }, g);
+                svg('line', { x1: midP, x2: midP, y1: vs(st.q1), y2: vs(st.min), class: 'agc-stat-whisker' }, g);
+                for (const v of [st.min, st.max])
+                    svg('line', { x1: midP - thick / 4, x2: midP + thick / 4, y1: vs(v), y2: vs(v), class: 'agc-stat-whisker' }, g);
+                const r = svg('rect', { x: midP - thick / 2, y: vs(st.q3), width: thick, height: Math.max(1, vs(st.q1) - vs(st.q3)), rx: 2, class: 'agc-stat-box' }, g);
+                r.style.fill = color;
+                svg('line', { x1: midP - thick / 2, x2: midP + thick / 2, y1: vs(st.med), y2: vs(st.med), class: 'agc-stat-median' }, g);
+                this.bindMark(r, { category: st.c, seriesKey: s.key, value: st.med, datum: null }, `${st.c}: median ${this.fmt(st.med)}, Q1 ${this.fmt(st.q1)}, Q3 ${this.fmt(st.q3)}, range ${this.fmt(st.min)} – ${this.fmt(st.max)} (${st.n} rows)`);
+            }
+        });
+    }
+    renderScatter(box, bubble) {
+        const o = this.options;
+        const xKey = o.xKey ?? o.series[0]?.key;
+        const yKey = o.yKey ?? o.series[1]?.key ?? o.series[0]?.key;
+        const sKey = o.sizeKey ?? o.series[2]?.key;
+        const xs = o.data.map((d) => toNumber(d[xKey]));
+        const ys = o.data.map((d) => toNumber(d[yKey]));
+        const ss = o.data.map((d) => (sKey ? Math.abs(toNumber(d[sKey])) : 1));
+        const xt = niceTicks(Math.min(...xs), Math.max(...xs), 5);
+        const yt = niceTicks(Math.min(...ys), Math.max(...ys), 5);
+        const m = { top: 14, right: 18, bottom: 40, left: Math.max(...yt.map((t) => this.fmt(t).length)) * 7 + 16 };
+        const pw = box.w - m.left - m.right;
+        const ph = box.h - m.top - m.bottom;
+        const g = svg('g', { transform: `translate(${m.left},${m.top})` }, this.svgEl);
+        const sx = (v) => ((v - xt[0]) / (xt[xt.length - 1] - xt[0] || 1)) * pw;
+        const sy = (v) => ph - ((v - yt[0]) / (yt[yt.length - 1] - yt[0] || 1)) * ph;
+        for (const t of yt) {
+            svg('line', { x1: 0, x2: pw, y1: sy(t), y2: sy(t), class: 'agc-grid' }, g);
+            this.text(g, -8, sy(t) + 4, this.fmt(t), { 'text-anchor': 'end', class: 'agc-axis-text' });
+        }
+        for (const t of xt) {
+            svg('line', { x1: sx(t), x2: sx(t), y1: 0, y2: ph, class: 'agc-grid' }, g);
+            this.text(g, sx(t), ph + 16, this.fmt(t), { 'text-anchor': 'middle', class: 'agc-axis-text' });
+        }
+        const name = (k) => o.series.find((s) => s.key === k)?.name ?? k;
+        this.text(g, pw / 2, ph + 34, name(xKey), { 'text-anchor': 'middle', class: 'agc-axis-title' });
+        const smax = Math.max(...ss, 1);
+        o.data.forEach((d, i) => {
+            const r = bubble ? 4 + Math.sqrt(ss[i] / smax) * 18 : 4.5;
+            const c = svg('circle', { cx: sx(xs[i]), cy: sy(ys[i]), r, class: 'agc-scatter-dot' }, g);
+            c.style.fill = this.color(o.series[0]);
+            const cat = String(d[o.categoryKey] ?? '');
+            this.bindMark(c, { category: cat, seriesKey: yKey, value: ys[i], datum: d }, `${cat}: ${name(xKey)} ${this.fmt(xs[i])}, ${name(yKey)} ${this.fmt(ys[i])}${bubble && sKey ? `, ${name(sKey)} ${this.fmt(ss[i])}` : ''}`);
+        });
+        if (o.trendline && xs.length > 2) {
+            const reg = linearRegression(ys, xs);
+            svg('line', { x1: sx(xt[0]), y1: sy(reg.at(xt[0])), x2: sx(xt[xt.length - 1]), y2: sy(reg.at(xt[xt.length - 1])), class: 'agc-trend' }, g);
+        }
+    }
+}
+export function createChart(container, options) {
+    return new Chart(container, options);
+}
+//# sourceMappingURL=chart.js.map