juxscript 1.1.404 → 1.1.408

package/dist/components/charts/barChart.js

@@ -0,0 +1,644 @@
+import { pageState } from '../../state/pageState.js';
+import generateId from '../../utils/idgen.js';
+import { showTooltip, moveTooltip, hideTooltip, formatTooltipRow } from '../../utils/tooltip.js';
+import { computeTrend } from '../../utils/trend.js';
+// --- Design tokens ---
+const FONT_FAMILY = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`;
+const TOKENS = {
+    muted: 'hsl(215, 16%, 47%)',
+    border: 'hsl(220, 13%, 91%)',
+    grid: 'hsl(220, 13%, 93%)',
+    bg: '#ffffff',
+    title: 'hsl(222, 47%, 11%)',
+    hoverBg: 'rgba(0,0,0,0.04)',
+    activeBg: 'rgba(0,0,0,0.08)',
+    linkColor: 'hsl(217, 91%, 60%)',
+};
+const RATIOS = {
+    '16:9': 16 / 9,
+    '4:3': 4 / 3,
+    '3:2': 3 / 2,
+    '1:1': 1,
+    '2:1': 2,
+    '21:9': 21 / 9,
+};
+// --- Bar animation styles (injected once) ---
+let animInjected = false;
+function injectBarAnimations() {
+    if (animInjected)
+        return;
+    animInjected = true;
+    const el = document.createElement('style');
+    el.id = 'jux-bar-anims';
+    el.textContent = `
+        @keyframes jux-bar-grow-h {
+            from { transform: scaleX(0); opacity: 0; }
+            to { transform: scaleX(1); opacity: 0.85; }
+        }
+        @keyframes jux-bar-grow-v {
+            from { transform: scaleY(0); opacity: 0; }
+            to { transform: scaleY(1); opacity: 0.85; }
+        }
+        @keyframes jux-bar-fade-in {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .jux-bar-h {
+            transform-origin: left center;
+            animation: jux-bar-grow-h 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+        }
+        .jux-bar-v {
+            transform-origin: center bottom;
+            animation: jux-bar-grow-v 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+        }
+        .jux-bar-label {
+            animation: jux-bar-fade-in 0.3s ease-out both;
+        }
+        .jux-bar-clickable {
+            cursor: pointer;
+            transition: background-color 0.15s ease, transform 0.1s ease;
+        }
+        .jux-bar-clickable:hover {
+            background-color: rgba(0,0,0,0.04);
+        }
+        .jux-bar-clickable:active {
+            background-color: rgba(0,0,0,0.08);
+            transform: scale(0.98);
+        }
+        .jux-bar-selected {
+            outline: 2px solid hsl(217, 91%, 60%);
+            outline-offset: 2px;
+        }
+    `;
+    document.head.appendChild(el);
+}
+function resolvePalette(colors) {
+    if (Array.isArray(colors))
+        return colors;
+    // Fallback palettes
+    const palettes = {
+        green: ['hsl(142, 71%, 45%)', 'hsl(142, 71%, 35%)', 'hsl(142, 71%, 55%)', 'hsl(142, 71%, 25%)', 'hsl(142, 71%, 65%)', 'hsl(142, 71%, 40%)'],
+        blue: ['hsl(217, 91%, 60%)', 'hsl(217, 91%, 50%)', 'hsl(217, 91%, 70%)', 'hsl(217, 91%, 40%)', 'hsl(217, 91%, 75%)', 'hsl(217, 91%, 55%)'],
+        warm: ['hsl(25, 95%, 53%)', 'hsl(15, 95%, 53%)', 'hsl(35, 95%, 53%)', 'hsl(5, 95%, 53%)', 'hsl(45, 95%, 53%)', 'hsl(20, 95%, 53%)'],
+        cool: ['hsl(199, 89%, 48%)', 'hsl(210, 89%, 48%)', 'hsl(188, 89%, 48%)', 'hsl(220, 89%, 48%)', 'hsl(195, 89%, 48%)', 'hsl(205, 89%, 48%)'],
+    };
+    return palettes[colors] || palettes['green'];
+}
+function computeLayout(values, opts) {
+    const { orientation, width, aspectRatio, labelWidth: labelWidthOverride, barThickness: barThicknessOverride } = opts;
+    const rows = values.length;
+    const maxVal = Math.max(...values.map(v => v.x));
+    const ratio = typeof aspectRatio === 'string' ? (RATIOS[aspectRatio] || 16 / 9) : (aspectRatio || 16 / 9);
+    const scale = width / 500;
+    const padding = Math.round(20 * scale);
+    const gap = Math.max(2, Math.round(6 * scale));
+    const barRadius = Math.max(3, Math.round(6 * scale));
+    const titleSize = Math.max(14, Math.round(18 * scale));
+    const subtitleSize = Math.max(11, Math.round(13 * scale));
+    const labelSize = Math.max(9, Math.round(12 * scale));
+    const tickSize = Math.max(8, Math.round(10 * scale));
+    let cardWidth, cardHeight, barThickness, labelWidth, maxBarLength, yAxisWidth;
+    const headerEstimate = padding + Math.round(titleSize * 1.4) + Math.round(subtitleSize * 1.4);
+    if (orientation === 'vertical') {
+        cardWidth = width;
+        barThickness = barThicknessOverride || Math.max(16, Math.round(28 * scale));
+        yAxisWidth = Math.round(36 * scale);
+        labelWidth = 0;
+        const labelRowHeight = Math.round(labelSize * 2) + Math.round(6 * scale);
+        const ratioHeight = Math.round(width / ratio);
+        maxBarLength = Math.max(ratioHeight - headerEstimate - labelRowHeight - padding * 2, 100);
+        cardHeight = headerEstimate + maxBarLength + labelRowHeight + padding * 2;
+        const barsNeeded = rows * (barThickness + gap);
+        if (barsNeeded + yAxisWidth + padding * 2 > cardWidth) {
+            barThickness = Math.max(8, Math.floor((cardWidth - yAxisWidth - padding * 2) / rows - gap));
+        }
+    }
+    else {
+        cardWidth = width;
+        barThickness = barThicknessOverride || Math.max(16, Math.round(28 * scale));
+        labelWidth = labelWidthOverride || Math.max(40, Math.round(70 * scale));
+        yAxisWidth = 0;
+        maxBarLength = cardWidth - labelWidth - padding * 3;
+        const rowHeight = barThickness + gap + gap + 1;
+        const tickRowHeight = Math.round(tickSize * 2);
+        const minContentHeight = headerEstimate + rows * rowHeight + tickRowHeight + padding * 2;
+        const ratioHeight = Math.round(width / ratio);
+        cardHeight = Math.max(ratioHeight, minContentHeight);
+    }
+    return { rows, maxVal, cardWidth, cardHeight, barThickness, labelWidth, maxBarLength, yAxisWidth, padding, gap, barRadius, titleSize, subtitleSize, labelSize, tickSize, scale };
+}
+function formatTick(val) {
+    if (val >= 1000)
+        return `${(val / 1000).toFixed(1)}k`;
+    return String(Math.round(val));
+}
+function mkDiv(id, css, className) {
+    const el = document.createElement('div');
+    el.id = id;
+    if (css)
+        el.setAttribute('style', css);
+    if (className)
+        el.className = className;
+    return el;
+}
+class BarChart {
+    constructor(id, values, options = {}) {
+        this._listeners = { click: [], select: [], drill: [] };
+        this._selectedIndex = -1;
+        this._lastClickDetail = null;
+        this._resizeObserver = null;
+        this._onChange = null;
+        this.id = id || generateId('bar');
+        this._values = values;
+        this._opts = {
+            orientation: options.orientation || 'horizontal',
+            colors: options.colors || 'green',
+            title: options.title || '',
+            subtitle: options.subtitle || '',
+            aspectRatio: options.aspectRatio || '16:9',
+            showValues: options.showValues ?? false,
+            showLegend: options.showLegend ?? undefined,
+            ticks: options.ticks ?? 4,
+            animate: options.animate ?? true,
+            stagger: options.stagger ?? 80,
+            responsive: options.responsive ?? true,
+            maintainAspectRatio: options.maintainAspectRatio ?? true,
+            selectable: options.selectable ?? false,
+            ...options,
+        };
+        this._seriesKeys = detectSeriesKeys(values, options.series);
+        if (this._opts.showLegend === undefined) {
+            this._opts.showLegend = this._seriesKeys.length > 1;
+        }
+        if (this._opts.animate)
+            injectBarAnimations();
+        this._palette = this._seriesKeys.length > 1
+            ? this._seriesKeys.map((s, i) => s.color || DEFAULT_SERIES_COLORS[i % DEFAULT_SERIES_COLORS.length])
+            : resolvePalette(this._opts.colors || 'green');
+        this._isInteractive = true; // always interactive — tooltips on all charts
+        this._wrapperEl = mkDiv(`${id}-wrapper`, `width: 100%; position: relative; box-sizing: border-box;`);
+        this._stateEl = document.createElement('button');
+        this._stateEl.id = id;
+        this._stateEl.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;';
+        this._wrapperEl.appendChild(this._stateEl);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._lastClickDetail; }
+    setValue(val) { return this; }
+    getElement() { return this._stateEl; }
+    getSelectedIndex() { return this._selectedIndex; }
+    getOrientation() { return this._opts.orientation; }
+    getTitle() { return this._opts.title; }
+    getSubtitle() { return this._opts.subtitle; }
+    getSelectable() { return this._opts.selectable; }
+    setSelectedIndex(idx) { return this.select(idx); }
+    setTitle(val) { this._opts.title = val; return this; }
+    setSubtitle(val) { this._opts.subtitle = val; return this; }
+    setContent(val) { this._opts.title = val; return this; }
+    title(val) { this._opts.title = val; return this; }
+    subtitle(val) { this._opts.subtitle = val; return this; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    get state() { return pageState[this.id]; }
+    get element() { return this._wrapperEl; }
+    // ═══════════════════════════════════════════════════════════
+    // CLICK HANDLING
+    // ═══════════════════════════════════════════════════════════
+    _makeClickEvent(i, seriesIdx = 0) {
+        const v = this._values[i];
+        const sk = this._seriesKeys[seriesIdx];
+        return {
+            chartId: this.id, index: i, seriesKey: sk.key,
+            label: v.label || `#${i + 1}`, value: v[sk.key] ?? v.x ?? 0,
+            drillKey: v.drill || null, href: v.href || null,
+            item: v, orientation: this._opts.orientation,
+        };
+    }
+    _handleBarClick(i, seriesIdx = 0) {
+        const detail = this._makeClickEvent(i, seriesIdx);
+        if (this._opts.selectable) {
+            const prev = this._selectedIndex;
+            this._selectedIndex = (this._selectedIndex === i) ? -1 : i;
+            this._updateSelection(prev, this._selectedIndex);
+            detail.selected = this._selectedIndex === i;
+            this._emit('select', detail);
+        }
+        this._lastClickDetail = detail;
+        if (this._opts.onClick)
+            this._opts.onClick(detail);
+        if (this._onChange)
+            this._onChange(detail);
+        this._emit('click', detail);
+        if (this._opts.stateKey) {
+            pageState[this.id][this._opts.stateKey] = detail;
+            this._emit('drill', detail);
+        }
+        this._stateEl.click();
+        if (detail.href) {
+            this._wrapperEl.dispatchEvent(new CustomEvent('jux:navigate', { bubbles: true, detail }));
+        }
+        this._wrapperEl.dispatchEvent(new CustomEvent('jux:bar-click', { bubbles: true, detail }));
+    }
+    _emit(type, detail) {
+        (this._listeners[type] || []).forEach(fn => fn(detail));
+    }
+    _updateSelection(prevIdx, newIdx) {
+        if (prevIdx >= 0) {
+            const prevEl = document.getElementById(`${this.id}-bar-${prevIdx}`);
+            if (prevEl)
+                prevEl.classList.remove('jux-bar-selected');
+        }
+        if (newIdx >= 0) {
+            const newEl = document.getElementById(`${this.id}-bar-${newIdx}`);
+            if (newEl)
+                newEl.classList.add('jux-bar-selected');
+        }
+    }
+    _wireInteractivity(containerEl, barEl, index, seriesIdx = 0) {
+        containerEl.classList.add('jux-bar-clickable');
+        containerEl.setAttribute('role', 'button');
+        containerEl.setAttribute('tabindex', '0');
+        const sk = this._seriesKeys[seriesIdx];
+        const v = this._values[index];
+        const label = v.label || `Item ${index + 1}`;
+        const val = v[sk.key] ?? v.x ?? 0;
+        containerEl.setAttribute('aria-label', `${label}: ${val}`);
+        containerEl.addEventListener('click', () => this._handleBarClick(index, seriesIdx));
+        containerEl.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._handleBarClick(index, seriesIdx);
+            }
+        });
+        const color = this._palette[seriesIdx % this._palette.length];
+        containerEl.addEventListener('mouseenter', (e) => {
+            barEl.style.opacity = '1';
+            let html = `<div style="font-weight:600;margin-bottom:2px;">${label}</div>`;
+            if (this._seriesKeys.length > 1) {
+                this._seriesKeys.forEach((s, si) => {
+                    const c = this._palette[si % this._palette.length];
+                    html += formatTooltipRow(s.label || s.key, v[s.key] ?? 0, c);
+                });
+            }
+            else {
+                html += formatTooltipRow('Value', val, color);
+            }
+            showTooltip(e, html);
+        });
+        containerEl.addEventListener('mousemove', (e) => moveTooltip(e));
+        containerEl.addEventListener('mouseleave', () => {
+            if (this._selectedIndex !== index)
+                barEl.style.opacity = '0.85';
+            hideTooltip();
+        });
+    }
+    _buildVertical(cardEl, L, id, values, palette, ticks, animate, stagger, showValues, numSeries, seriesKeys) {
+        const areaEl = mkDiv(`${id}-area`, `display: flex; flex-direction: row; align-items: flex-end; height: ${L.maxBarLength}px;`);
+        cardEl.appendChild(areaEl);
+        const yaxisEl = mkDiv(`${id}-yaxis`, `width: ${L.yAxisWidth}px; height: ${L.maxBarLength}px; position: relative; flex-shrink: 0;`);
+        areaEl.appendChild(yaxisEl);
+        for (let t = 0; t <= ticks; t++) {
+            const val = Math.round((L.maxVal / ticks) * t);
+            const bottom = Math.round((val / L.maxVal) * L.maxBarLength);
+            const tickEl = mkDiv(`${id}-ytick-${t}`, `position: absolute; bottom: ${bottom}px; right: 4px; font-size: ${L.tickSize}px; color: ${TOKENS.muted}; line-height: 1; transform: translateY(50%);`);
+            tickEl.textContent = formatTick(val);
+            yaxisEl.appendChild(tickEl);
+        }
+        const barsEl = mkDiv(`${id}-bars`, `display: flex; flex-direction: row; align-items: flex-end; gap: ${L.gap}px; flex: 1; height: ${L.maxBarLength}px; border-bottom: 1px solid ${TOKENS.grid}; border-left: 1px solid ${TOKENS.grid}; padding: 0 ${L.gap}px; position: relative;`);
+        areaEl.appendChild(barsEl);
+        for (let t = 1; t <= ticks; t++) {
+            const val = Math.round((L.maxVal / ticks) * t);
+            const bottom = Math.round((val / L.maxVal) * L.maxBarLength);
+            barsEl.appendChild(mkDiv(`${id}-hgrid-${t}`, `position: absolute; left: 0; right: 0; bottom: ${bottom}px; height: 1px; background: ${TOKENS.grid};`));
+        }
+        const subBarWidth = numSeries > 1 ? Math.max(6, Math.floor(L.barThickness / numSeries)) : L.barThickness;
+        values.forEach((v, i) => {
+            const colEl = mkDiv(`${id}-col-${i}`, `display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; height: 100%; border-radius: 4px; padding: 2px;`);
+            barsEl.appendChild(colEl);
+            const groupEl = mkDiv(`${id}-grp-${i}`, `display:flex;flex-direction:row;align-items:flex-end;gap:1px;`);
+            colEl.appendChild(groupEl);
+            seriesKeys.forEach((sk, si) => {
+                const val = v[sk.key] ?? 0;
+                const color = palette[si % palette.length];
+                const barHeight = Math.max(2, Math.round((val / L.maxVal) * L.maxBarLength));
+                const delay = animate ? `animation-delay: ${(i * numSeries + si) * (stagger / numSeries)}ms;` : '';
+                const barClass = animate ? 'jux-bar-v' : '';
+                const barEl = mkDiv(`${id}-bar-${i}-${si}`, `width: ${subBarWidth}px; height: ${barHeight}px; background-color: ${color}; border-radius: ${L.barRadius}px ${L.barRadius}px 0 0; opacity: 0.85; transition: opacity 0.15s ease; ${delay}`, barClass);
+                groupEl.appendChild(barEl);
+                if (this._isInteractive)
+                    this._wireInteractivity(barEl, barEl, i, si);
+            });
+            if (showValues && numSeries === 1) {
+                const valDelay = animate ? `animation-delay: ${i * stagger + 200}ms;` : '';
+                const valClass = animate ? 'jux-bar-label' : '';
+                const valEl = mkDiv(`${id}-val-${i}`, `font-size: ${L.tickSize}px; color: ${TOKENS.muted}; margin-bottom: 2px; text-align: center; ${valDelay}`, valClass);
+                valEl.textContent = String(v[seriesKeys[0].key] ?? 0);
+                colEl.insertBefore(valEl, groupEl);
+            }
+        });
+        const xlabelsEl = mkDiv(`${id}-xlabels`, `display: flex; flex-direction: row; gap: ${L.gap}px; padding-left: ${L.yAxisWidth}px; padding-top: ${Math.round(6 * L.scale)}px;`);
+        cardEl.appendChild(xlabelsEl);
+        values.forEach((v, i) => {
+            const label = v.label || `#${i + 1}`;
+            const lblDelay = animate ? `animation-delay: ${i * stagger}ms;` : '';
+            const lblClass = animate ? 'jux-bar-label' : '';
+            const lblEl = mkDiv(`${id}-lbl-${i}`, `flex: 1; text-align: center; font-size: ${L.tickSize}px; color: ${TOKENS.muted}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; ${lblDelay}`, lblClass);
+            lblEl.textContent = label;
+            xlabelsEl.appendChild(lblEl);
+        });
+    }
+    _buildHorizontal(cardEl, L, id, values, palette, ticks, animate, stagger, showValues, numSeries, seriesKeys) {
+        const areaEl = mkDiv(`${id}-area`, `display: flex; flex-direction: column; gap: 0; width: 100%;`);
+        cardEl.appendChild(areaEl);
+        const subBarHeight = numSeries > 1 ? Math.max(6, Math.floor(L.barThickness / numSeries)) : L.barThickness;
+        const rowHeight = numSeries > 1 ? subBarHeight * numSeries + (numSeries - 1) : L.barThickness;
+        values.forEach((v, i) => {
+            const label = v.label || `#${i + 1}`;
+            const rowEl = mkDiv(`${id}-row-${i}`, `display: flex; flex-direction: row; align-items: center; min-height: ${rowHeight}px; margin-bottom: ${L.gap}px; border-bottom: 1px solid ${TOKENS.grid}; padding-bottom: ${L.gap}px; border-radius: 4px; padding: 2px;`);
+            areaEl.appendChild(rowEl);
+            const lblDelay = animate ? `animation-delay: ${i * stagger}ms;` : '';
+            const lblClass = animate ? 'jux-bar-label' : '';
+            const lblEl = mkDiv(`${id}-lbl-${i}`, `width: ${L.labelWidth}px; flex-shrink: 0; text-align: right; padding-right: ${Math.round(10 * L.scale)}px; font-size: ${L.labelSize}px; color: ${TOKENS.muted}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; ${lblDelay}`, lblClass);
+            lblEl.textContent = label;
+            rowEl.appendChild(lblEl);
+            const barsCol = mkDiv(`${id}-bcol-${i}`, `display:flex;flex-direction:column;gap:1px;flex:1;`);
+            rowEl.appendChild(barsCol);
+            seriesKeys.forEach((sk, si) => {
+                const val = v[sk.key] ?? 0;
+                const barWidth = Math.max(2, Math.round((val / L.maxVal) * L.maxBarLength));
+                const color = palette[si % palette.length];
+                const delay = animate ? `animation-delay: ${(i * numSeries + si) * (stagger / numSeries)}ms;` : '';
+                const barClass = animate ? 'jux-bar-h' : '';
+                const barEl = mkDiv(`${id}-bar-${i}-${si}`, `width: ${barWidth}px; height: ${subBarHeight}px; background-color: ${color}; border-radius: ${L.barRadius}px; opacity: 0.85; transition: opacity 0.15s ease; ${delay}`, barClass);
+                barsCol.appendChild(barEl);
+                if (this._isInteractive)
+                    this._wireInteractivity(barEl, barEl, i, si);
+            });
+            if (showValues && numSeries === 1) {
+                const valDelay = animate ? `animation-delay: ${i * stagger + 200}ms;` : '';
+                const valClass = animate ? 'jux-bar-label' : '';
+                const valEl = mkDiv(`${id}-val-${i}`, `font-size: ${L.tickSize}px; color: ${TOKENS.muted}; margin-left: ${Math.round(6 * L.scale)}px; ${valDelay}`, valClass);
+                valEl.textContent = String(v[seriesKeys[0].key] ?? 0);
+                rowEl.appendChild(valEl);
+            }
+        });
+        const xaxisEl = mkDiv(`${id}-xaxis`, `display: flex; flex-direction: row; justify-content: space-between; padding-left: ${L.labelWidth}px; padding-top: ${Math.round(4 * L.scale)}px;`);
+        cardEl.appendChild(xaxisEl);
+        for (let t = 0; t <= ticks; t++) {
+            const val = Math.round((L.maxVal / ticks) * t);
+            const tickEl = mkDiv(`${id}-xtick-${t}`, `font-size: ${L.tickSize}px; color: ${TOKENS.muted};`);
+            tickEl.textContent = formatTick(val);
+            xaxisEl.appendChild(tickEl);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════
+    // BUILD CHART
+    // ═══════════════════════════════════════════════════════════
+    _hasTrend() {
+        const { trendTitle, trendSubtitle, autoTrend } = this._opts;
+        return !!(trendTitle || trendSubtitle || autoTrend);
+    }
+    _buildChart(resolvedWidth) {
+        this._wrapperEl.innerHTML = '';
+        this._wrapperEl.appendChild(this._stateEl);
+        const { orientation, aspectRatio, title, subtitle, showValues, showLegend, ticks, animate, stagger, maintainAspectRatio, labelWidth: labelWidthOverride, barThickness: barThicknessOverride } = this._opts;
+        const values = this._values;
+        const palette = this._palette;
+        const seriesKeys = this._seriesKeys;
+        const numSeries = seriesKeys.length;
+        const id = this.id;
+        // Compute global max across all series
+        let globalMax = 0;
+        for (const sk of seriesKeys) {
+            for (const v of values) {
+                const val = v[sk.key] ?? 0;
+                if (val > globalMax)
+                    globalMax = val;
+            }
+        }
+        if (globalMax === 0)
+            globalMax = 1;
+        const ratio = typeof aspectRatio === 'string' ? (RATIOS[aspectRatio] || 16 / 9) : (aspectRatio || 16 / 9);
+        const effectiveWidth = resolvedWidth;
+        const prelimL = computeLayout(values, { orientation, width: effectiveWidth, aspectRatio, labelWidth: labelWidthOverride, barThickness: barThicknessOverride });
+        const ratioHeight = Math.round(effectiveWidth / ratio);
+        const scale = prelimL.scale;
+        const labelSize = Math.max(9, Math.round(11 * scale));
+        const legendH = showLegend ? Math.round(labelSize * 2) + prelimL.padding : 0;
+        const trendH = this._hasTrend() ? Math.round(56 * prelimL.scale) : 0;
+        let minContentHeight;
+        const headerEstimate = prelimL.padding + Math.round(prelimL.titleSize * 1.4) + Math.round(prelimL.subtitleSize * 1.4);
+        if (orientation === 'vertical') {
+            const labelRowHeight = Math.round(prelimL.labelSize * 2) + Math.round(6 * prelimL.scale);
+            const minBarArea = Math.max(100, values.length * 20);
+            minContentHeight = headerEstimate + minBarArea + labelRowHeight + prelimL.padding * 2 + legendH + trendH;
+        }
+        else {
+            const rowHeight = prelimL.barThickness + prelimL.gap + prelimL.gap + 1;
+            const tickRowHeight = Math.round(prelimL.tickSize * 2);
+            minContentHeight = headerEstimate + values.length * rowHeight + tickRowHeight + prelimL.padding * 2 + legendH + trendH;
+        }
+        const effectiveHeight = maintainAspectRatio
+            ? Math.max(ratioHeight + trendH, minContentHeight)
+            : Math.max(this._wrapperEl.clientHeight || ratioHeight + trendH, minContentHeight);
+        this._wrapperEl.style.height = `${effectiveHeight}px`;
+        const L = computeLayout(values, { orientation, width: effectiveWidth, aspectRatio, labelWidth: labelWidthOverride, barThickness: barThicknessOverride });
+        L.cardWidth = effectiveWidth;
+        L.cardHeight = effectiveHeight;
+        L.maxVal = globalMax;
+        const finalHeaderEstimate = L.padding + Math.round(L.titleSize * 1.4) + Math.round(L.subtitleSize * 1.4);
+        if (orientation === 'vertical') {
+            const labelRowHeight = Math.round(L.labelSize * 2) + Math.round(6 * L.scale);
+            L.maxBarLength = Math.max(100, effectiveHeight - finalHeaderEstimate - labelRowHeight - L.padding * 2 - legendH - trendH);
+        }
+        else {
+            L.maxBarLength = effectiveWidth - L.labelWidth - L.padding * 3;
+        }
+        const cardEl = mkDiv(`${id}-card`, `background: ${TOKENS.bg}; border: 1px solid ${TOKENS.border}; border-radius: ${Math.round(12 * L.scale)}px; padding: ${L.padding}px; font-family: ${FONT_FAMILY}; box-shadow: 0 1px 3px rgba(0,0,0,0.04); width: 100%; height: 100%; box-sizing: border-box;`);
+        this._wrapperEl.appendChild(cardEl);
+        if (title) {
+            const titleEl = mkDiv(`${id}-title`, `font-size: ${L.titleSize}px; font-weight: 600; color: ${TOKENS.title}; letter-spacing: -0.025em; margin-bottom: 2px; line-height: 1.3;`);
+            titleEl.textContent = title;
+            cardEl.appendChild(titleEl);
+        }
+        if (subtitle) {
+            const subEl = mkDiv(`${id}-sub`, `font-size: ${L.subtitleSize}px; color: ${TOKENS.muted}; margin-bottom: ${L.padding}px; line-height: 1.3;`);
+            subEl.textContent = subtitle;
+            cardEl.appendChild(subEl);
+        }
+        if (orientation === 'vertical') {
+            this._buildVertical(cardEl, L, id, values, palette, ticks, animate, stagger, showValues, numSeries, seriesKeys);
+        }
+        else {
+            this._buildHorizontal(cardEl, L, id, values, palette, ticks, animate, stagger, showValues, numSeries, seriesKeys);
+        }
+        // Legend
+        if (showLegend && numSeries > 1) {
+            const legendDiv = document.createElement('div');
+            legendDiv.style.cssText = `display:flex;flex-wrap:wrap;gap:${Math.round(8 * L.scale)}px ${Math.round(16 * L.scale)}px;padding-top:${Math.round(8 * L.scale)}px;justify-content:center;`;
+            seriesKeys.forEach((sk, i) => {
+                const item = document.createElement('div');
+                item.style.cssText = `display:flex;align-items:center;gap:4px;font-size:${labelSize}px;color:${TOKENS.muted};`;
+                const dot = document.createElement('span');
+                dot.style.cssText = `width:${Math.round(10 * L.scale)}px;height:${Math.round(10 * L.scale)}px;border-radius:2px;background:${palette[i % palette.length]};flex-shrink:0;`;
+                item.appendChild(dot);
+                const lbl = document.createElement('span');
+                lbl.textContent = sk.label || sk.key;
+                item.appendChild(lbl);
+                legendDiv.appendChild(item);
+            });
+            cardEl.appendChild(legendDiv);
+        }
+        // Trend footer
+        this._renderTrend(cardEl, L.scale, L.padding);
+    }
+    _renderTrend(card, scale, padding) {
+        const { trendTitle, trendSubtitle, trendIcon, autoTrend } = this._opts;
+        let title = trendTitle;
+        let subtitle = trendSubtitle;
+        let icon = trendIcon;
+        if (autoTrend && !title) {
+            const sk = this._seriesKeys[0];
+            const vals = this._values.map(v => v[sk.key] ?? 0);
+            const labels = this._values.map(v => v.label || '');
+            const trend = computeTrend(vals, labels);
+            title = trend.title;
+            subtitle = subtitle || trend.subtitle;
+            icon = icon || trend.icon;
+        }
+        if (!title && !subtitle)
+            return;
+        const fontSize = Math.max(11, Math.round(13 * scale));
+        const subFontSize = Math.max(10, Math.round(11 * scale));
+        const footer = document.createElement('div');
+        footer.style.cssText = `padding-top:${Math.round(8 * scale)}px;border-top:1px solid hsl(220,13%,93%);margin-top:${Math.round(8 * scale)}px;`;
+        if (title) {
+            const titleEl = document.createElement('div');
+            titleEl.style.cssText = `font-size:${fontSize}px;font-weight:500;color:hsl(222,47%,11%);line-height:1.4;`;
+            titleEl.textContent = `${title}${icon ? '  ' + icon : ''}`;
+            footer.appendChild(titleEl);
+        }
+        if (subtitle) {
+            const subEl = document.createElement('div');
+            subEl.style.cssText = `font-size:${subFontSize}px;color:hsl(215,16%,47%);line-height:1.4;margin-top:1px;`;
+            subEl.textContent = subtitle;
+            footer.appendChild(subEl);
+        }
+        card.appendChild(footer);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PUBLIC API
+    // ═══════════════════════════════════════════════════════════
+    render(target) {
+        let parent = null;
+        if (target && typeof target === 'object' && 'element' in target) {
+            parent = target.element;
+        }
+        else if (target instanceof HTMLElement) {
+            parent = target;
+        }
+        else if (typeof target === 'string') {
+            parent = document.getElementById(target) || document.querySelector(target);
+        }
+        else {
+            parent = document.getElementById('app');
+        }
+        if (!parent)
+            return this;
+        parent.appendChild(this._wrapperEl);
+        const containerWidth = this._opts.responsive
+            ? (this._wrapperEl.clientWidth || parent.clientWidth || this._opts.width || 500)
+            : (this._opts.width || 500);
+        this._buildChart(containerWidth);
+        if (this._opts.responsive && typeof ResizeObserver !== 'undefined') {
+            let resizeTimer;
+            let skipCount = 2;
+            const ro = new ResizeObserver(() => {
+                if (skipCount > 0) {
+                    skipCount--;
+                    return;
+                }
+                clearTimeout(resizeTimer);
+                resizeTimer = setTimeout(() => {
+                    const newWidth = this._wrapperEl.clientWidth;
+                    if (newWidth > 0)
+                        this._buildChart(newWidth);
+                }, 200);
+            });
+            ro.observe(this._wrapperEl);
+            this._resizeObserver = ro;
+        }
+        return this;
+    }
+    into(target) { return this.render(target); }
+    on(event, fn) {
+        if (!this._listeners[event])
+            this._listeners[event] = [];
+        this._listeners[event].push(fn);
+        return this;
+    }
+    off(event, fn) {
+        if (this._listeners[event])
+            this._listeners[event] = this._listeners[event].filter(f => f !== fn);
+        return this;
+    }
+    select(index) {
+        if (!this._opts.selectable)
+            return this;
+        const prev = this._selectedIndex;
+        this._selectedIndex = index;
+        this._updateSelection(prev, index);
+        return this;
+    }
+    clearSelection() {
+        const prev = this._selectedIndex;
+        this._selectedIndex = -1;
+        this._updateSelection(prev, -1);
+        return this;
+    }
+    destroy() {
+        if (this._resizeObserver)
+            this._resizeObserver.disconnect();
+        pageState.__unregister(this.id);
+        this._wrapperEl.remove();
+    }
+}
+// ═══════════════════════════════════════════════════════════
+// FACTORY
+// ═══════════════════════════════════════════════════════════
+export function barChart(id, values, options = {}) {
+    const chart = new BarChart(id, values, options);
+    pageState.__register(chart);
+    return chart;
+}
+export { BarChart, RATIOS, TOKENS };
+export default barChart;
+function detectSeriesKeys(values, series) {
+    if (series && series.length > 0) {
+        return series;
+    }
+    if (values.length === 0) {
+        return [{ key: 'x', label: 'Value' }];
+    }
+    const firstItem = values[0];
+    const numericKeys = Object.keys(firstItem).filter(key => key !== 'label' && key !== 'drill' && key !== 'href' && typeof firstItem[key] === 'number');
+    if (numericKeys.length === 0) {
+        return [{ key: 'x', label: 'Value' }];
+    }
+    return numericKeys.map(key => ({
+        key,
+        label: key.charAt(0).toUpperCase() + key.slice(1),
+    }));
+}
+const DEFAULT_SERIES_COLORS = [
+    'hsl(217, 91%, 60%)',
+    'hsl(142, 71%, 45%)',
+    'hsl(25, 95%, 53%)',
+    'hsl(271, 81%, 56%)',
+    'hsl(48, 96%, 53%)',
+];
+//# sourceMappingURL=barChart.js.map