@dodlhuat/basix 1.1.1 → 1.2.1

package/js/chart.js

@@ -1,257 +1,573 @@
-class ChartConfig {
-    constructor() {
-        this.minVal = 19;
-        this.maxVal = 81;
-        this.gridLines = [19, 27, 34, 38, 41, 45, 47, 50, 53, 55, 59, 62, 66, 73, 81];
-        this.zoneBoundaries = [43, 55]; // Left < 43, 43 <= Mid <= 55, Right > 55
-        this.rowHeight = 40; // Must match CSS .chart-row height
-        this.headerHeight = 40; // Must match CSS #chart-container padding-top
-        this.infoColumnWidth = 350; // Must match CSS .row-info width
-        this.valueSpans = [
-            {min: 19, max: 23, text: "Bad"},
-            {min: 24, max: 38, text: "Better"},
-            {min: 39, max: 44, text: "Ok"},
-            {min: 45, max: 55, text: "Good"},
-            {min: 56, max: 81, text: "Excellent"}
-        ];
-    }
-}
-
-class Row {
-    constructor(data) {
-        this.id = data.id;
-        this.position = data.position;
-        this.name = data.name;
-        this.description = data.description || '';
-        this.value = data.value;
-    }
-
-    render() {
-        const div = document.createElement('div');
-        div.className = 'chart-row';
-        div.innerHTML = `
-            <div class="row-info">
-                <div class="row-name">${this.name}</div>
-                <div class="row-meta">${this.description ? this.description : ''}</div>
-            </div>
-        `;
-        return div;
-    }
-}
-
-class Chart {
-    constructor(containerId, data) {
-        this.container = document.getElementById(containerId);
-        this.data = data.map(d => new Row(d));
-        this.config = new ChartConfig();
-
-        // Sort data by position just in case
-        this.data.sort((a, b) => a.position - b.position);
-
-        // Create tooltip element
-        this.tooltip = document.createElement('div');
-        this.tooltip.className = 'chart-tooltip';
-        this.tooltip.style.display = 'none';
-        document.body.appendChild(this.tooltip);
-
-        // Handle resize
-        window.addEventListener('resize', () => {
-            this.render();
-        });
-    }
-
-    // Helper to map value to percentage width
-    // The chart area starts after the info column.
-    // But wait, the prompt implies the values 19-81 are the positions.
-    // If the grid lines are fixed at 19...81, then the X axis represents this range.
-    // So 19 is 0% (or left edge of graph area) and 81 is 100% (or right edge).
-    getPercentage(value) {
-        const range = this.config.maxVal - this.config.minVal;
-        // Clamp value
-        const clamped = Math.max(this.config.minVal, Math.min(this.config.maxVal, value));
-        return ((clamped - this.config.minVal) / range) * 100;
-    }
-
-    updateRowValue(id, newValue) {
-        const row = this.data.find(r => r.id === id);
-        if (row) {
-            row.value = Math.max(this.config.minVal, Math.min(this.config.maxVal, newValue));
-            this.render(); // Re-render to update line and dots
-        }
-    }
-
-    render() {
-        this.container.innerHTML = '';
-
-        // 1. Render Background Zones
-        this.renderBackgroundZones();
-
-        // 2. Render Grid Lines
-        this.renderGridLines();
-
-        // 3. Render Content Rows
-        const contentLayer = document.createElement('div');
-        contentLayer.className = 'chart-content';
-        this.data.forEach(row => {
-            contentLayer.appendChild(row.render());
-        });
-        this.container.appendChild(contentLayer);
-
-        // 4. Render Connecting Line (SVG)
-        this.renderLine();
-    }
-
-    renderBackgroundZones() {
-        const bgLayer = document.createElement('div');
-        bgLayer.className = 'chart-background';
-
-        // Calculate widths based on boundaries
-        // Range: 19 to 81.
-        // Zone 1: 19 to 43
-        // Zone 2: 43 to 55
-        // Zone 3: 55 to 81
-
-        const width1 = this.getPercentage(this.config.zoneBoundaries[0]);
-        const width2 = this.getPercentage(this.config.zoneBoundaries[1]) - width1;
-        const width3 = 100 - (width1 + width2);
-
-        // We need to account for the info column width which is not part of the graph area?
-        // Actually, usually in these charts, the grid is the background of the whole row or just the right side?
-        // Let's assume the graph area is to the right of the info column.
-        // We will use CSS calc or absolute positioning.
-        // To make it simple, let's make the background layer only cover the graph area.
-        // The graph area width is calc(100% - 200px).
-
-        bgLayer.style.left = `${this.config.infoColumnWidth}px`;
-        bgLayer.style.width = `calc(100% - ${this.config.infoColumnWidth}px)`;
-
-        const zone1 = document.createElement('div');
-        zone1.className = 'zone zone-left';
-        zone1.style.width = `${width1}%`;
-
-        const zone2 = document.createElement('div');
-        zone2.className = 'zone zone-mid';
-        zone2.style.width = `${width2}%`;
-
-        const zone3 = document.createElement('div');
-        zone3.className = 'zone zone-right';
-        zone3.style.width = `${width3}%`;
-
-        bgLayer.appendChild(zone1);
-        bgLayer.appendChild(zone2);
-        bgLayer.appendChild(zone3);
-
-        this.container.appendChild(bgLayer);
-    }
-
-    renderGridLines() {
-        const gridLayer = document.createElement('div');
-        gridLayer.className = 'grid-lines';
-        gridLayer.style.left = `${this.config.infoColumnWidth}px`;
-        gridLayer.style.width = `calc(100% - ${this.config.infoColumnWidth}px)`;
-
-        this.config.gridLines.forEach(val => {
-            const line = document.createElement('div');
-            line.className = 'grid-line';
-            line.style.left = `${this.getPercentage(val)}%`;
-
-            const label = document.createElement('div');
-            label.className = 'grid-label';
-            label.innerText = val;
-            label.style.left = `${this.getPercentage(val)}%`;
-
-            gridLayer.appendChild(line);
-            gridLayer.appendChild(label);
-        });
-
-        this.container.appendChild(gridLayer);
-    }
-
-    renderLine() {
-        const svgLayer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svgLayer.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        svgLayer.setAttribute('class', 'chart-svg-layer');
-        // The SVG covers the whole container, but we need to map points to the graph area.
-
-        const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
-        polyline.classList.add('chart-polyline');
-
-        const points = [];
-
-        // We need the actual width of the graph area to calculate X coordinates in pixels
-        // or we can use percentage coordinates if we set viewBox?
-        // Let's use getBoundingClientRect for simplicity to get pixels,
-        // but that requires the element to be in DOM. It is.
-
-        // Wait for layout? No, we can just calculate based on percentages if we use percentage in SVG?
-        // SVG doesn't support percentage points easily in polyline without viewBox.
-        // Let's use a resize observer or just calculate once.
-
-        const graphAreaWidth = this.container.clientWidth - this.config.infoColumnWidth;
-
-        this.data.forEach((row, index) => {
-            // X calculation
-            const pct = this.getPercentage(row.value);
-            const x = this.config.infoColumnWidth + (graphAreaWidth * (pct / 100));
-
-            // Y calculation: headerHeight + (index * rowHeight) + (rowHeight / 2)
-            const y = this.config.headerHeight + (index * this.config.rowHeight) + (this.config.rowHeight / 2);
-
-            points.push(`${x},${y}`);
-
-            // Draw circle for point
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.classList.add('chart-point');
-            circle.setAttribute('cx', x);
-            circle.setAttribute('cy', y);
-            circle.setAttribute('r', 10); // Increased radius
-            circle.setAttribute('fill', '#d32f2f'); // Direct fill color
-            circle.setAttribute('stroke', 'white');
-            circle.setAttribute('stroke-width', '2');
-            circle.style.pointerEvents = 'all'; // Enable pointer events for hover
-
-            // Add hover events
-            circle.addEventListener('mouseover', (e) => this.showTooltip(e, row.value));
-            circle.addEventListener('mouseout', () => this.hideTooltip());
-
-            // Add title for hover (native tooltip as backup)
-            const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
-            title.textContent = `Value: ${row.value}`;
-            circle.appendChild(title);
-
-            svgLayer.appendChild(circle);
-
-            // Draw text for value
-            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            text.setAttribute('x', x); // Centered horizontally
-            text.setAttribute('y', y + 4); // Centered vertically (approx)
-            text.textContent = row.value;
-            text.setAttribute('fill', 'white'); // White text
-            text.setAttribute('font-size', '10px');
-            text.setAttribute('font-family', 'sans-serif');
-            text.setAttribute('font-weight', 'bold');
-            text.setAttribute('text-anchor', 'middle'); // Center text
-            text.style.pointerEvents = 'none'; // Let clicks pass through to circle
-            svgLayer.appendChild(text);
-        });
-
-        polyline.setAttribute('points', points.join(' '));
-        svgLayer.prepend(polyline); // Put line behind points
-
-        this.container.appendChild(svgLayer);
-    }
-
-    showTooltip(e, value) {
-        const span = this.config.valueSpans.find(s => value >= s.min && value <= s.max);
-        if (span) {
-            this.tooltip.innerText = `${span.text} (${value})`;
-            this.tooltip.style.display = 'block';
-            this.tooltip.style.left = `${e.pageX + 10}px`;
-            this.tooltip.style.top = `${e.pageY + 10}px`;
-        }
-    }
-
-    hideTooltip() {
-        this.tooltip.style.display = 'none';
-    }
-}
+// ─── Types ──────────────────────────────────────────────────────────────────
+const MARGIN_XY = { top: 16, right: 24, bottom: 44, left: 52 };
+const MARGIN_BAR = { top: 8, right: 52, bottom: 24, left: 120 };
+const MARGIN_PIE = { 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 {
+    constructor(selector, options) {
+        this.colors = [];
+        this.abortController = new AbortController();
+        this.resizeTimer = null;
+        this.resizeObserver = null;
+        const el = typeof selector === 'string'
+            ? document.querySelector(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 ──────────────────────────────────────────────────────────────
+    render() {
+        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 ──────────────────────────────────────────────────────────
+    renderLineOrArea(canvas, isArea) {
+        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 = 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',
+            });
+            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 ───────────────────────────────────────────────────────────────
+    renderColumn(canvas) {
+        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',
+                });
+                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) ─────────────────────────────────────────────────────
+    renderBar(canvas) {
+        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',
+                });
+                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 ──────────────────────────────────────────────────────────────────
+    renderPie(canvas) {
+        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',
+            });
+            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, `<strong>${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 ─────────────────────────────────────────────────────────
+    renderHGrid(svg, m, w, h, yMin, yMax) {
+        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',
+            }));
+        }
+    }
+    renderXAxisLine(svg, m, w, h) {
+        svg.appendChild(this.svgEl('line', {
+            x1: m.left, x2: m.left + w,
+            y1: m.top + h, y2: m.top + h,
+            class: 'chart-axis-line',
+        }));
+    }
+    renderXLabels(svg, m, w, h, labels) {
+        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);
+        });
+    }
+    renderYLabels(svg, m, h, yMin, yMax) {
+        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 ─────────────────────────────────────────────────────
+    buildPath(pts) {
+        switch (this.opts.curve) {
+            case 'linear': return this.linearPath(pts);
+            case 'step': return this.stepPath(pts);
+            default: return this.smoothPath(pts);
+        }
+    }
+    linearPath(pts) {
+        if (pts.length === 0)
+            return '';
+        return pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+    }
+    stepPath(pts) {
+        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) */
+    smoothPath(pts) {
+        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;
+    }
+    arcPath(cx, cy, r, startDeg, endDeg) {
+        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`;
+    }
+    polar(cx, cy, r, deg) {
+        const rad = deg * Math.PI / 180;
+        return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+    }
+    // ── Legend builders ──────────────────────────────────────────────────────
+    buildHeader() {
+        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;
+    }
+    buildLegend() {
+        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;
+    }
+    buildPieLegend(s, total) {
+        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 ──────────────────────────────────────────────────────────────
+    showTooltip(e, html) {
+        this.tooltip.innerHTML = html;
+        this.tooltip.classList.add('is-visible');
+        this.moveTooltip(e);
+    }
+    moveTooltip(e) {
+        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`;
+    }
+    hideTooltip() {
+        this.tooltip.classList.remove('is-visible');
+    }
+    // ── Event wiring ─────────────────────────────────────────────────────────
+    onPoint(g, s, d, i) {
+        const sig = { signal: this.abortController.signal };
+        g.addEventListener('mouseenter', (e) => {
+            this.showTooltip(e, `<strong>${d.label}</strong>${s.name}: ${this.fmt(d.value)}`);
+        }, sig);
+        g.addEventListener('mousemove', (e) => this.moveTooltip(e), sig);
+        g.addEventListener('mouseleave', () => this.hideTooltip(), sig);
+        g.addEventListener('click', () => this.opts.onPointClick(s, d, i), sig);
+    }
+    onBar(rect, s, d, i) {
+        const sig = { signal: this.abortController.signal };
+        rect.style.cursor = 'pointer';
+        rect.addEventListener('mouseenter', (e) => {
+            this.showTooltip(e, `<strong>${d.label}</strong>${s.name}: ${this.fmt(d.value)}`);
+        }, sig);
+        rect.addEventListener('mousemove', (e) => this.moveTooltip(e), sig);
+        rect.addEventListener('mouseleave', () => this.hideTooltip(), sig);
+        rect.addEventListener('click', () => this.opts.onPointClick(s, d, i), sig);
+    }
+    // ── Color resolution ─────────────────────────────────────────────────────
+    resolveColors() {
+        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 ────────────────────────────────────────────────────
+    div(className) {
+        const el = document.createElement('div');
+        el.className = className;
+        return el;
+    }
+    createSVG(parent, w, h) {
+        const svg = document.createElementNS(SVG_NS, 'svg');
+        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;
+    }
+    svgEl(tag, attrs = {}) {
+        const el = document.createElementNS(SVG_NS, tag);
+        for (const [k, v] of Object.entries(attrs))
+            el.setAttribute(k, String(v));
+        return el;
+    }
+    fmt(v) {
+        if (v >= 1000000)
+            return `${(v / 1000000).toFixed(1)}M`;
+        if (v >= 1000)
+            return `${(v / 1000).toFixed(1)}K`;
+        return v % 1 === 0 ? String(Math.round(v)) : v.toFixed(1);
+    }
+    // ── Resize ───────────────────────────────────────────────────────────────
+    attachResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.resizeTimer)
+                clearTimeout(this.resizeTimer);
+            this.resizeTimer = setTimeout(() => this.render(), 100);
+        });
+        this.resizeObserver.observe(this.container);
+    }
+    // ── Public API ───────────────────────────────────────────────────────────
+    update(series) {
+        this.opts.series = series;
+        this.render();
+    }
+    setType(type) {
+        this.opts.type = type;
+        this.render();
+    }
+    destroy() {
+        this.abortController.abort();
+        this.resizeObserver?.disconnect();
+        if (this.resizeTimer)
+            clearTimeout(this.resizeTimer);
+        this.container.innerHTML = '';
+        this.container.classList.remove('chart');
+    }
+}
+export { Chart };