@dodlhuat/basix 1.2.7 → 1.2.9

package/js/chart.ts

@@ -1,694 +0,0 @@
-import { escapeHtml } from './utils.js';
-
-// ─── Types ──────────────────────────────────────────────────────────────────
-
-export type ChartType  = 'line' | 'area' | 'column' | 'bar' | 'pie';
-export type ChartCurve = 'smooth' | 'linear' | 'step';
-
-export interface ChartDataPoint {
-    label: string;
-    value: number;
-}
-
-export interface ChartSeries {
-    name: string;
-    data: ChartDataPoint[];
-    color?: string;
-}
-
-export interface ChartOptions {
-    type: ChartType;
-    series: ChartSeries[];
-    title?: string;
-    subtitle?: string;
-    /** Inner chart height in px. Default: 280 */
-    height?: number;
-    showLegend?: boolean;
-    showGrid?: boolean;
-    animate?: boolean;
-    /** Line interpolation for line/area charts. Default: 'smooth' */
-    curve?: ChartCurve;
-    /** Fixed y-axis minimum. Default: 0 */
-    yMin?: number;
-    /** Fixed y-axis maximum. Default: auto (max value × 1.1) */
-    yMax?: number;
-    onPointClick?: (series: ChartSeries, point: ChartDataPoint, index: number) => void;
-}
-
-// ─── Internal ───────────────────────────────────────────────────────────────
-
-interface Point { x: number; y: number; }
-interface Margin { top: number; right: number; bottom: number; left: number; }
-
-const MARGIN_XY: Margin   = { top: 16, right: 24, bottom: 44, left: 52 };
-const MARGIN_BAR: Margin  = { top: 8,  right: 52, bottom: 24, left: 120 };
-const MARGIN_PIE: Margin  = { top: 8,  right: 8,  bottom: 8,  left: 8 };
-
-const FALLBACK_COLORS = [
-    '#3D63DD', '#2E8B57', '#C28A00', '#D64545',
-    '#8B5CF6', '#06B6D4', '#F97316', '#EC4899',
-];
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-
-// ─── Chart ──────────────────────────────────────────────────────────────────
-
-class Chart {
-    private container: HTMLElement;
-    private opts: Required<ChartOptions>;
-    private tooltip!: HTMLElement;
-    private colors: string[] = [];
-    private abortController = new AbortController();
-    private resizeTimer: ReturnType<typeof setTimeout> | null = null;
-    private resizeObserver: ResizeObserver | null = null;
-
-    constructor(selector: string | HTMLElement, options: ChartOptions) {
-        const el = typeof selector === 'string'
-            ? document.querySelector<HTMLElement>(selector)
-            : selector;
-        if (!el) throw new Error(`Chart: element not found for "${selector}"`);
-
-        this.container = el;
-        this.opts = {
-            type:         options.type,
-            series:       options.series,
-            title:        options.title        ?? '',
-            subtitle:     options.subtitle     ?? '',
-            height:       options.height       ?? 280,
-            showLegend:   options.showLegend   ?? true,
-            showGrid:     options.showGrid     ?? true,
-            animate:      options.animate      ?? true,
-            curve:        options.curve        ?? 'smooth',
-            yMin:         options.yMin         ?? 0,
-            yMax:         options.yMax         ?? 0,
-            onPointClick: options.onPointClick ?? (() => {}),
-        };
-
-        this.render();
-        this.attachResizeObserver();
-    }
-
-    // ── Render ──────────────────────────────────────────────────────────────
-
-    private render(): void {
-        this.abortController.abort();
-        this.abortController = new AbortController();
-
-        this.container.innerHTML = '';
-        this.container.classList.add('chart');
-        this.resolveColors();
-
-        if (this.opts.title || this.opts.subtitle) {
-            this.container.appendChild(this.buildHeader());
-        }
-
-        const canvas = this.div('chart-canvas');
-        this.container.appendChild(canvas);
-
-        this.tooltip = this.div('chart-tooltip');
-        this.container.appendChild(this.tooltip);
-
-        switch (this.opts.type) {
-            case 'line':   this.renderLineOrArea(canvas, false); break;
-            case 'area':   this.renderLineOrArea(canvas, true);  break;
-            case 'column': this.renderColumn(canvas);             break;
-            case 'bar':    this.renderBar(canvas);                break;
-            case 'pie':    this.renderPie(canvas);                break;
-        }
-
-        if (this.opts.showLegend && this.opts.type !== 'pie') {
-            this.container.appendChild(this.buildLegend());
-        }
-    }
-
-    // ── Line / Area ──────────────────────────────────────────────────────────
-
-    private renderLineOrArea(canvas: HTMLElement, isArea: boolean): void {
-        const { series, height, showGrid, animate, yMin } = this.opts;
-        if (!series.length || !series[0].data.length) return;
-
-        const m = MARGIN_XY;
-        const svgW = canvas.clientWidth || 600;
-        const svgH = height + m.top + m.bottom;
-        const w = svgW - m.left - m.right;
-        const h = height;
-
-        const allValues = series.flatMap(s => s.data.map(d => d.value));
-        const yMax = this.opts.yMax || Math.max(...allValues) * 1.1;
-        const labels = series[0].data.map(d => d.label);
-
-        const svg = this.createSVG(canvas, svgW, svgH);
-
-        if (showGrid) this.renderHGrid(svg, m, w, h, yMin, yMax);
-        this.renderXAxisLine(svg, m, w, h);
-        this.renderXLabels(svg, m, w, h, labels);
-        this.renderYLabels(svg, m, h, yMin, yMax);
-
-        series.forEach((s, si) => {
-            const color = this.colors[si];
-            const numPts = s.data.length;
-            const pts: Point[] = s.data.map((d, i) => ({
-                x: m.left + (numPts > 1 ? (i / (numPts - 1)) * w : w / 2),
-                y: m.top  + h - ((d.value - yMin) / (yMax - yMin)) * h,
-            }));
-
-            if (isArea) {
-                const areaD = `${this.buildPath(pts)} L ${pts[pts.length - 1].x} ${m.top + h} L ${pts[0].x} ${m.top + h} Z`;
-                svg.appendChild(this.svgEl('path', {
-                    d: areaD, fill: color,
-                    'fill-opacity': '0.12', stroke: 'none',
-                    class: 'chart-area',
-                }));
-            }
-
-            const linePath = this.svgEl('path', {
-                d: this.buildPath(pts), fill: 'none',
-                stroke: color, 'stroke-width': '2.5',
-                'stroke-linecap': 'round', 'stroke-linejoin': 'round',
-                class: 'chart-line',
-            }) as SVGPathElement;
-
-            if (animate) {
-                requestAnimationFrame(() => {
-                    const len = linePath.getTotalLength();
-                    linePath.style.setProperty('--path-length', String(Math.ceil(len)));
-                });
-            }
-            svg.appendChild(linePath);
-
-            // Data point markers
-            s.data.forEach((d, i) => {
-                const g = this.svgEl('g', {
-                    class: 'chart-point-group',
-                    style: animate ? `animation-delay: ${i * 40}ms` : '',
-                });
-                const { x, y } = pts[i];
-
-                g.appendChild(this.svgEl('circle', {
-                    cx: x, cy: y, r: 14,
-                    fill: 'transparent', class: 'chart-hit',
-                }));
-                g.appendChild(this.svgEl('circle', {
-                    cx: x, cy: y, r: 7,
-                    fill: 'none', stroke: color, 'stroke-width': '2',
-                    class: 'chart-point-ring',
-                }));
-                g.appendChild(this.svgEl('circle', {
-                    cx: x, cy: y, r: 4,
-                    fill: color, stroke: 'var(--background)', 'stroke-width': '2',
-                    class: 'chart-point-dot',
-                }));
-
-                this.onPoint(g, s, d, i);
-                svg.appendChild(g);
-            });
-        });
-    }
-
-    // ── Column ───────────────────────────────────────────────────────────────
-
-    private renderColumn(canvas: HTMLElement): void {
-        const { series, height, showGrid, animate, yMin } = this.opts;
-        if (!series.length || !series[0].data.length) return;
-
-        const m = MARGIN_XY;
-        const svgW = canvas.clientWidth || 600;
-        const svgH = height + m.top + m.bottom;
-        const w = svgW - m.left - m.right;
-        const h = height;
-
-        const allValues = series.flatMap(s => s.data.map(d => d.value));
-        const yMax = this.opts.yMax || Math.max(...allValues) * 1.1;
-        const labels = series[0].data.map(d => d.label);
-        const numPts = labels.length;
-        const numSeries = series.length;
-
-        const svg = this.createSVG(canvas, svgW, svgH);
-
-        if (showGrid) this.renderHGrid(svg, m, w, h, yMin, yMax);
-        this.renderXAxisLine(svg, m, w, h);
-        this.renderXLabels(svg, m, w, h, labels);
-        this.renderYLabels(svg, m, h, yMin, yMax);
-
-        const groupW = w / numPts;
-        const innerPad = groupW * 0.18;
-        const barW = Math.max(2, (groupW - innerPad) / numSeries - 2);
-
-        series.forEach((s, si) => {
-            const color = this.colors[si];
-            s.data.forEach((d, i) => {
-                const barH = Math.max(0, ((d.value - yMin) / (yMax - yMin)) * h);
-                const x = m.left + i * groupW + innerPad / 2 + si * (barW + 2);
-                const y = m.top + h - barH;
-
-                const rect = this.svgEl('rect', {
-                    x, y, width: barW, height: barH,
-                    fill: color, rx: 3,
-                    class: 'chart-bar chart-bar--vertical',
-                }) as SVGElement;
-
-                if (animate) {
-                    const delay = (i * numSeries + si) * 50;
-                    rect.style.setProperty('--animation-delay', `${delay}ms`);
-                    rect.style.animationDelay = `${delay}ms`;
-                }
-
-                this.onBar(rect, s, d, i);
-                svg.appendChild(rect);
-            });
-        });
-    }
-
-    // ── Bar (horizontal) ─────────────────────────────────────────────────────
-
-    private renderBar(canvas: HTMLElement): void {
-        const { series, height, animate } = this.opts;
-        if (!series.length || !series[0].data.length) return;
-
-        const m = MARGIN_BAR;
-        const svgW = canvas.clientWidth || 600;
-        const svgH = height + m.top + m.bottom;
-        const w = svgW - m.left - m.right;
-        const h = height;
-
-        const allValues = series.flatMap(s => s.data.map(d => d.value));
-        const xMax = this.opts.yMax || Math.max(...allValues) * 1.1;
-        const labels = series[0].data.map(d => d.label);
-        const numPts = labels.length;
-        const numSeries = series.length;
-
-        const svg = this.createSVG(canvas, svgW, svgH);
-
-        // Vertical grid lines
-        const numTicks = 5;
-        for (let t = 0; t <= numTicks; t++) {
-            const x = m.left + (t / numTicks) * w;
-            svg.appendChild(this.svgEl('line', {
-                x1: x, x2: x, y1: m.top, y2: m.top + h,
-                stroke: 'var(--divider)', 'stroke-width': '1',
-                'stroke-dasharray': t === 0 ? 'none' : '3 4',
-                class: 'chart-grid-line',
-            }));
-            const label = this.svgEl('text', {
-                x, y: m.top + h + 14,
-                'text-anchor': 'middle', class: 'chart-axis-label',
-            });
-            label.textContent = this.fmt(xMax * t / numTicks);
-            svg.appendChild(label);
-        }
-
-        // Category labels on Y axis
-        const groupH = h / numPts;
-        labels.forEach((label, i) => {
-            const y = m.top + i * groupH + groupH / 2;
-            const text = this.svgEl('text', {
-                x: m.left - 10, y,
-                'text-anchor': 'end', 'dominant-baseline': 'middle',
-                class: 'chart-axis-label',
-            });
-            text.textContent = label;
-            svg.appendChild(text);
-        });
-
-        // Bars
-        const innerPad = groupH * 0.18;
-        const barH = Math.max(2, (groupH - innerPad) / numSeries - 2);
-
-        series.forEach((s, si) => {
-            const color = this.colors[si];
-            s.data.forEach((d, i) => {
-                const barW = Math.max(0, (d.value / xMax) * w);
-                const x = m.left;
-                const y = m.top + i * groupH + innerPad / 2 + si * (barH + 2);
-
-                const rect = this.svgEl('rect', {
-                    x, y, width: barW, height: barH,
-                    fill: color, rx: 3,
-                    class: 'chart-bar chart-bar--horizontal',
-                }) as SVGElement;
-
-                if (animate) {
-                    const delay = (i * numSeries + si) * 50;
-                    rect.style.setProperty('--animation-delay', `${delay}ms`);
-                    rect.style.animationDelay = `${delay}ms`;
-                }
-
-                this.onBar(rect, s, d, i);
-                svg.appendChild(rect);
-            });
-        });
-    }
-
-    // ── Pie ──────────────────────────────────────────────────────────────────
-
-    private renderPie(canvas: HTMLElement): void {
-        const { series, height, animate, showLegend } = this.opts;
-        const s = series[0];
-        if (!s || !s.data.length) return;
-
-        const svgW = canvas.clientWidth || 400;
-        const m = MARGIN_PIE;
-        const svgH = height + m.top + m.bottom;
-        const cx = svgW / 2;
-        const cy = svgH / 2;
-        const r  = Math.min(svgW, svgH) / 2 - Math.max(m.top, m.left) - 8;
-
-        const total = s.data.reduce((sum, d) => sum + d.value, 0);
-        const svg = this.createSVG(canvas, svgW, svgH);
-
-        let startAngle = -90; // start at 12 o'clock
-
-        s.data.forEach((d, i) => {
-            const color = this.colors[i % this.colors.length];
-            const sweep = (d.value / total) * 360;
-            const endAngle = startAngle + sweep;
-            const midAngle = startAngle + sweep / 2;
-
-            const path = this.svgEl('path', {
-                d: this.arcPath(cx, cy, r, startAngle, endAngle),
-                fill: color,
-                stroke: 'var(--background)',
-                'stroke-width': '2',
-                class: 'chart-slice',
-            }) as SVGPathElement;
-
-            if (animate) {
-                const delay = i * 70;
-                path.style.animationDelay = `${delay}ms`;
-            }
-
-            // Hover: nudge slice outward
-            const { x: dx, y: dy } = this.polar(0, 0, 8, midAngle);
-            path.addEventListener('mouseenter', (e) => {
-                path.style.transform = `translate(${dx}px, ${dy}px)`;
-                this.showTooltip(e as MouseEvent,
-                    `<strong>${escapeHtml(d.label)}</strong>${this.fmt(d.value)} &nbsp;·&nbsp; ${((d.value / total) * 100).toFixed(1)}%`
-                );
-            }, { signal: this.abortController.signal });
-
-            path.addEventListener('mouseleave', () => {
-                path.style.transform = '';
-                this.hideTooltip();
-            }, { signal: this.abortController.signal });
-
-            path.addEventListener('click', () => {
-                this.opts.onPointClick(s, d, i);
-            }, { signal: this.abortController.signal });
-
-            svg.appendChild(path);
-            startAngle = endAngle;
-        });
-
-        if (showLegend) {
-            this.container.appendChild(this.buildPieLegend(s, total));
-        }
-    }
-
-    // ── Axis helpers ─────────────────────────────────────────────────────────
-
-    private renderHGrid(svg: SVGSVGElement, m: Margin, w: number, h: number, yMin: number, yMax: number): void {
-        const numTicks = 5;
-        for (let i = 0; i <= numTicks; i++) {
-            const y = m.top + h - (i / numTicks) * h;
-            svg.appendChild(this.svgEl('line', {
-                x1: m.left, x2: m.left + w, y1: y, y2: y,
-                class: i === 0 ? 'chart-axis-line' : 'chart-grid-line',
-            }));
-        }
-    }
-
-    private renderXAxisLine(svg: SVGSVGElement, m: Margin, w: number, h: number): void {
-        svg.appendChild(this.svgEl('line', {
-            x1: m.left, x2: m.left + w,
-            y1: m.top + h, y2: m.top + h,
-            class: 'chart-axis-line',
-        }));
-    }
-
-    private renderXLabels(svg: SVGSVGElement, m: Margin, w: number, h: number, labels: string[]): void {
-        const n = labels.length;
-        const step = n > 1 ? w / (n - 1) : w / 2;
-        labels.forEach((label, i) => {
-            const x = m.left + (n > 1 ? i * step : w / 2);
-            const text = this.svgEl('text', {
-                x, y: m.top + h + 18,
-                'text-anchor': 'middle', class: 'chart-axis-label',
-            });
-            text.textContent = label;
-            svg.appendChild(text);
-        });
-    }
-
-    private renderYLabels(svg: SVGSVGElement, m: Margin, h: number, yMin: number, yMax: number): void {
-        const numTicks = 5;
-        for (let i = 0; i <= numTicks; i++) {
-            const val = yMin + (yMax - yMin) * (i / numTicks);
-            const y = m.top + h - (i / numTicks) * h;
-            const text = this.svgEl('text', {
-                x: m.left - 8, y,
-                'text-anchor': 'end', 'dominant-baseline': 'middle',
-                class: 'chart-axis-label',
-            });
-            text.textContent = this.fmt(val);
-            svg.appendChild(text);
-        }
-    }
-
-    // ── Geometry helpers ─────────────────────────────────────────────────────
-
-    private buildPath(pts: Point[]): string {
-        switch (this.opts.curve) {
-            case 'linear': return this.linearPath(pts);
-            case 'step':   return this.stepPath(pts);
-            default:       return this.smoothPath(pts);
-        }
-    }
-
-    private linearPath(pts: Point[]): string {
-        if (pts.length === 0) return '';
-        return pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
-    }
-
-    private stepPath(pts: Point[]): string {
-        if (pts.length === 0) return '';
-        let d = `M ${pts[0].x} ${pts[0].y}`;
-        for (let i = 1; i < pts.length; i++) {
-            d += ` H ${pts[i].x} V ${pts[i].y}`;
-        }
-        return d;
-    }
-
-    /** Smooth cubic bezier path through points (Catmull-Rom → cubic bezier) */
-    private smoothPath(pts: Point[]): string {
-        if (pts.length === 0) return '';
-        if (pts.length === 1) return `M ${pts[0].x} ${pts[0].y}`;
-        if (pts.length === 2) return `M ${pts[0].x} ${pts[0].y} L ${pts[1].x} ${pts[1].y}`;
-
-        const t = 0.35;
-        let d = `M ${pts[0].x} ${pts[0].y}`;
-        for (let i = 0; i < pts.length - 1; i++) {
-            const p0 = pts[Math.max(0, i - 1)];
-            const p1 = pts[i];
-            const p2 = pts[i + 1];
-            const p3 = pts[Math.min(pts.length - 1, i + 2)];
-            const cp1x = p1.x + (p2.x - p0.x) * t;
-            const cp1y = p1.y + (p2.y - p0.y) * t;
-            const cp2x = p2.x - (p3.x - p1.x) * t;
-            const cp2y = p2.y - (p3.y - p1.y) * t;
-            d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${p2.x} ${p2.y}`;
-        }
-        return d;
-    }
-
-    private arcPath(cx: number, cy: number, r: number, startDeg: number, endDeg: number): string {
-        const start = this.polar(cx, cy, r, startDeg);
-        const end   = this.polar(cx, cy, r, endDeg);
-        const large = (endDeg - startDeg) > 180 ? 1 : 0;
-        return `M ${cx} ${cy} L ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)} Z`;
-    }
-
-    private polar(cx: number, cy: number, r: number, deg: number): Point {
-        const rad = deg * Math.PI / 180;
-        return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
-    }
-
-    // ── Legend builders ──────────────────────────────────────────────────────
-
-    private buildHeader(): HTMLElement {
-        const el = this.div('chart-header');
-        if (this.opts.title) {
-            const t = this.div('chart-title');
-            t.textContent = this.opts.title;
-            el.appendChild(t);
-        }
-        if (this.opts.subtitle) {
-            const s = this.div('chart-subtitle');
-            s.textContent = this.opts.subtitle;
-            el.appendChild(s);
-        }
-        return el;
-    }
-
-    private buildLegend(): HTMLElement {
-        const el = this.div('chart-legend');
-        this.opts.series.forEach((s, i) => {
-            const item = this.div('chart-legend-item');
-            const swatch = this.div('chart-legend-swatch');
-            swatch.style.background = this.colors[i];
-            const label = document.createElement('span');
-            label.textContent = s.name;
-            item.append(swatch, label);
-            el.appendChild(item);
-        });
-        return el;
-    }
-
-    private buildPieLegend(s: ChartSeries, total: number): HTMLElement {
-        const el = this.div('chart-pie-legend');
-        s.data.forEach((d, i) => {
-            const color = this.colors[i % this.colors.length];
-            const item = this.div('chart-pie-legend-item');
-            const swatch = this.div('chart-pie-legend-swatch');
-            swatch.style.background = color;
-            const label = document.createElement('span');
-            label.textContent = d.label;
-            const value = this.div('chart-pie-legend-value');
-            value.textContent = `${((d.value / total) * 100).toFixed(1)}%`;
-            item.append(swatch, label, value);
-            el.appendChild(item);
-        });
-        return el;
-    }
-
-    // ── Tooltip ──────────────────────────────────────────────────────────────
-
-    private showTooltip(e: MouseEvent, html: string): void {
-        this.tooltip.innerHTML = html;
-        this.tooltip.classList.add('is-visible');
-        this.moveTooltip(e);
-    }
-
-    private moveTooltip(e: MouseEvent): void {
-        const tt = this.tooltip;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        let x = e.clientX + 14;
-        let y = e.clientY - 36;
-        // Keep inside viewport
-        if (x + 200 > vw) x = e.clientX - 14 - tt.offsetWidth;
-        if (y < 0) y = e.clientY + 14;
-        if (y + tt.offsetHeight > vh) y = vh - tt.offsetHeight - 8;
-        tt.style.left = `${x}px`;
-        tt.style.top  = `${y}px`;
-    }
-
-    private hideTooltip(): void {
-        this.tooltip.classList.remove('is-visible');
-    }
-
-    // ── Event wiring ─────────────────────────────────────────────────────────
-
-    private onPoint(g: SVGElement, s: ChartSeries, d: ChartDataPoint, i: number): void {
-        const sig = { signal: this.abortController.signal };
-        g.addEventListener('mouseenter', (e) => {
-            this.showTooltip(e as MouseEvent, `<strong>${escapeHtml(d.label)}</strong>${escapeHtml(s.name)}: ${this.fmt(d.value)}`);
-        }, sig);
-        g.addEventListener('mousemove', (e) => this.moveTooltip(e as MouseEvent), sig);
-        g.addEventListener('mouseleave', () => this.hideTooltip(), sig);
-        g.addEventListener('click', () => this.opts.onPointClick(s, d, i), sig);
-    }
-
-    private onBar(rect: SVGElement, s: ChartSeries, d: ChartDataPoint, i: number): void {
-        const sig = { signal: this.abortController.signal };
-        rect.style.cursor = 'pointer';
-        rect.addEventListener('mouseenter', (e) => {
-            this.showTooltip(e as MouseEvent, `<strong>${escapeHtml(d.label)}</strong>${escapeHtml(s.name)}: ${this.fmt(d.value)}`);
-        }, sig);
-        rect.addEventListener('mousemove', (e) => this.moveTooltip(e as MouseEvent), sig);
-        rect.addEventListener('mouseleave', () => this.hideTooltip(), sig);
-        rect.addEventListener('click', () => this.opts.onPointClick(s, d, i), sig);
-    }
-
-    // ── Color resolution ─────────────────────────────────────────────────────
-
-    private resolveColors(): void {
-        const style = getComputedStyle(this.container);
-        this.colors = (this.opts.type === 'pie' ? this.opts.series[0]?.data ?? [] : this.opts.series)
-            .map((_, i) => {
-                const css = style.getPropertyValue(`--chart-color-${i + 1}`).trim();
-                return css || FALLBACK_COLORS[i % FALLBACK_COLORS.length];
-            });
-
-        // Allow per-series color override (not pie)
-        if (this.opts.type !== 'pie') {
-            this.opts.series.forEach((s, i) => {
-                if (s.color) this.colors[i] = s.color;
-            });
-        }
-    }
-
-    // ── DOM & SVG helpers ────────────────────────────────────────────────────
-
-    private div(className: string): HTMLElement {
-        const el = document.createElement('div');
-        el.className = className;
-        return el;
-    }
-
-    private createSVG(parent: HTMLElement, w: number, h: number): SVGSVGElement {
-        const svg = document.createElementNS(SVG_NS, 'svg') as SVGSVGElement;
-        svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
-        svg.setAttribute('height', String(h));
-        svg.setAttribute('preserveAspectRatio', 'none');
-        svg.classList.add('chart-svg');
-        parent.appendChild(svg);
-        return svg;
-    }
-
-    private svgEl<K extends keyof SVGElementTagNameMap>(
-        tag: K,
-        attrs: Record<string, string | number> = {}
-    ): SVGElementTagNameMap[K] {
-        const el = document.createElementNS(SVG_NS, tag);
-        for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
-        return el;
-    }
-
-    private fmt(v: number): string {
-        if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`;
-        if (v >= 1_000)     return `${(v / 1_000).toFixed(1)}K`;
-        return v % 1 === 0  ? String(Math.round(v)) : v.toFixed(1);
-    }
-
-    // ── Resize ───────────────────────────────────────────────────────────────
-
-    private attachResizeObserver(): void {
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.resizeTimer) clearTimeout(this.resizeTimer);
-            this.resizeTimer = setTimeout(() => this.render(), 100);
-        });
-        this.resizeObserver.observe(this.container);
-    }
-
-    // ── Public API ───────────────────────────────────────────────────────────
-
-    public update(series: ChartSeries[]): void {
-        this.opts.series = series;
-        this.render();
-    }
-
-    public setType(type: ChartType): void {
-        this.opts.type = type;
-        this.render();
-    }
-
-    public destroy(): void {
-        this.abortController.abort();
-        this.resizeObserver?.disconnect();
-        if (this.resizeTimer) clearTimeout(this.resizeTimer);
-        this.container.innerHTML = '';
-        this.container.classList.remove('chart');
-    }
-}
-
-export { Chart };