juxscript 1.1.397 → 1.1.398

package/dist/components/barChart.d.ts

@@ -19,6 +19,7 @@ interface BarDataItem {
 interface BarClickDetail {
     chartId: string;
     index: number;
+    seriesKey: string;
     label: string;
     value: number;
     drillKey: string | null;
@@ -27,14 +28,21 @@ interface BarClickDetail {
     orientation: string;
     selected?: boolean;
 }
+interface SeriesConfig {
+    key: string;
+    label?: string;
+    color?: string;
+}
 interface BarChartOptions {
     orientation?: 'horizontal' | 'vertical';
     colors?: string | string[];
     title?: string;
     subtitle?: string;
     width?: number;
+    height?: number;
     aspectRatio?: string | number;
     showValues?: boolean;
+    showLegend?: boolean;
     ticks?: number;
     labelWidth?: number;
     barThickness?: number;
@@ -45,6 +53,11 @@ interface BarChartOptions {
     onClick?: (event: BarClickDetail) => void;
     selectable?: boolean;
     stateKey?: string;
+    series?: SeriesConfig[];
+    trendTitle?: string;
+    trendSubtitle?: string;
+    trendIcon?: string;
+    autoTrend?: boolean;
 }
 declare class BarChart {
     id: string;
@@ -59,6 +72,7 @@ declare class BarChart {
     private _resizeObserver;
     private _isInteractive;
     private _onChange;
+    private _seriesKeys;
     constructor(id: string, values: BarDataItem[], options?: BarChartOptions);
     getValue(): BarClickDetail | null;
     setValue(val: any): this;
@@ -82,9 +96,11 @@ declare class BarChart {
     private _emit;
     private _updateSelection;
     private _wireInteractivity;
-    private _buildChart;
     private _buildVertical;
     private _buildHorizontal;
+    private _hasTrend;
+    private _buildChart;
+    private _renderTrend;
     render(target?: string | HTMLElement | {
         element: HTMLElement;
     }): this;
@@ -98,6 +114,6 @@ declare class BarChart {
     destroy(): void;
 }
 export declare function barChart(id: string, values: BarDataItem[], options?: BarChartOptions): BarChart;
-export { BarChart, BarChartOptions, BarDataItem, BarClickDetail, RATIOS, TOKENS };
+export { BarChart, BarChartOptions, BarDataItem, BarClickDetail, SeriesConfig, RATIOS, TOKENS };
 export default barChart;
 //# sourceMappingURL=barChart.d.ts.map

package/dist/components/barChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"barChart.d.ts","sourceRoot":"","sources":["../../lib/components/barChart.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"barChart.d.ts","sourceRoot":"","sources":["../../lib/components/barChart.ts"],"names":[],"mappings":"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"}

package/dist/components/barChart.js

@@ -1,5 +1,7 @@
 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 = {
@@ -155,6 +157,7 @@ class BarChart {
             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,
@@ -163,15 +166,17 @@ class BarChart {
             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 = resolvePalette(this._opts.colors || 'green');
-        this._isInteractive = !!(this._opts.onClick ||
-            this._opts.stateKey ||
-            values.some(v => v.drill || v.href) ||
-            this._opts.selectable);
+        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;`);
-        // Hidden button element for pageState click detection
         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;';
@@ -181,7 +186,7 @@ class BarChart {
     // PAGESTATE INTEGRATION
     // ═══════════════════════════════════════════════════════════
     getValue() { return this._lastClickDetail; }
-    setValue(val) { /* no-op for charts */ return this; }
+    setValue(val) { return this; }
     getElement() { return this._stateEl; }
     getSelectedIndex() { return this._selectedIndex; }
     getOrientation() { return this._opts.orientation; }
@@ -198,30 +203,23 @@ class BarChart {
         this._onChange = fn;
         return this;
     }
-    get state() {
-        return pageState[this.id];
-    }
-    get element() {
-        return this._wrapperEl;
-    }
+    get state() { return pageState[this.id]; }
+    get element() { return this._wrapperEl; }
     // ═══════════════════════════════════════════════════════════
     // CLICK HANDLING
     // ═══════════════════════════════════════════════════════════
-    _makeClickEvent(i) {
+    _makeClickEvent(i, seriesIdx = 0) {
         const v = this._values[i];
+        const sk = this._seriesKeys[seriesIdx];
         return {
-            chartId: this.id,
-            index: i,
-            label: v.label || `#${i + 1}`,
-            value: v.x,
-            drillKey: v.drill || null,
-            href: v.href || null,
-            item: v,
-            orientation: this._opts.orientation,
+            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) {
-        const detail = this._makeClickEvent(i);
+    _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;
@@ -239,18 +237,11 @@ class BarChart {
             pageState[this.id][this._opts.stateKey] = detail;
             this._emit('drill', detail);
         }
-        // Trigger click on hidden state element so pageState proxy detects it
         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,
-        }));
+            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));
@@ -267,67 +258,118 @@ class BarChart {
                 newEl.classList.add('jux-bar-selected');
         }
     }
-    _wireInteractivity(containerEl, barEl, index) {
+    _wireInteractivity(containerEl, barEl, index, seriesIdx = 0) {
         containerEl.classList.add('jux-bar-clickable');
         containerEl.setAttribute('role', 'button');
         containerEl.setAttribute('tabindex', '0');
-        containerEl.setAttribute('aria-label', `${this._values[index].label || `Item ${index + 1}`}: ${this._values[index].x}`);
-        containerEl.addEventListener('click', () => this._handleBarClick(index));
+        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);
+                this._handleBarClick(index, seriesIdx);
             }
         });
-        containerEl.addEventListener('mouseenter', () => { barEl.style.opacity = '1'; });
+        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) {
+        // Vertical bar chart implementation
+        const barsContainer = mkDiv(`${id}-bars`, `display:flex;flex-direction:column;justify-content:flex-end;height:${L.maxBarLength}px;gap:${L.gap}px;`);
+        cardEl.appendChild(barsContainer);
+    }
+    _buildHorizontal(cardEl, L, id, values, palette, ticks, animate, stagger, showValues, numSeries, seriesKeys) {
+        // Horizontal bar chart implementation
+        const barsContainer = mkDiv(`${id}-bars`, `display:flex;flex-direction:column;gap:${L.gap}px;`);
+        cardEl.appendChild(barsContainer);
+    }
     // ═══════════════════════════════════════════════════════════
     // BUILD CHART
     // ═══════════════════════════════════════════════════════════
+    _hasTrend() {
+        const { trendTitle, trendSubtitle, autoTrend } = this._opts;
+        return !!(trendTitle || trendSubtitle || autoTrend);
+    }
     _buildChart(resolvedWidth) {
-        // Preserve stateEl
         this._wrapperEl.innerHTML = '';
         this._wrapperEl.appendChild(this._stateEl);
-        const { orientation, aspectRatio, title, subtitle, showValues, ticks, animate, stagger, maintainAspectRatio, labelWidth: labelWidthOverride, barThickness: barThicknessOverride } = this._opts;
+        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;
+            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;
+            minContentHeight = headerEstimate + values.length * rowHeight + tickRowHeight + prelimL.padding * 2 + legendH + trendH;
         }
         const effectiveHeight = maintainAspectRatio
-            ? Math.max(ratioHeight, minContentHeight)
-            : Math.max(this._wrapperEl.clientHeight || ratioHeight, minContentHeight);
+            ? 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);
+            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; overflow: hidden;`);
+        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;`);
@@ -340,98 +382,64 @@ class BarChart {
             cardEl.appendChild(subEl);
         }
         if (orientation === 'vertical') {
-            this._buildVertical(cardEl, L, id, values, palette, ticks, animate, stagger, showValues);
+            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);
+            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);
     }
-    _buildVertical(cardEl, L, id, values, palette, ticks, animate, stagger, showValues) {
-        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};`));
-        }
-        values.forEach((v, i) => {
-            const color = palette[i % palette.length];
-            const barHeight = Math.max(2, Math.round((v.x / L.maxVal) * L.maxBarLength));
-            const delay = animate ? `animation-delay: ${i * stagger}ms;` : '';
-            const barClass = animate ? 'jux-bar-v' : '';
-            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);
-            if (showValues) {
-                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.x);
-                colEl.appendChild(valEl);
-            }
-            const barEl = mkDiv(`${id}-bar-${i}`, `width: 100%; max-width: ${L.barThickness}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);
-            colEl.appendChild(barEl);
-            if (this._isInteractive)
-                this._wireInteractivity(colEl, barEl, i);
-        });
-        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) {
-        const areaEl = mkDiv(`${id}-area`, `display: flex; flex-direction: column; gap: 0; width: 100%;`);
-        cardEl.appendChild(areaEl);
-        values.forEach((v, i) => {
-            const label = v.label || `#${i + 1}`;
-            const barWidth = Math.max(2, Math.round((v.x / L.maxVal) * L.maxBarLength));
-            const color = palette[i % palette.length];
-            const delay = animate ? `animation-delay: ${i * stagger}ms;` : '';
-            const barClass = animate ? 'jux-bar-h' : '';
-            const rowEl = mkDiv(`${id}-row-${i}`, `display: flex; flex-direction: row; align-items: center; height: ${L.barThickness}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 isLink = v.drill || v.href;
-            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 barEl = mkDiv(`${id}-bar-${i}`, `width: ${barWidth}px; height: ${L.barThickness}px; background-color: ${color}; border-radius: ${L.barRadius}px; opacity: 0.85; transition: opacity 0.15s ease; ${delay}`, barClass);
-            rowEl.appendChild(barEl);
-            if (showValues) {
-                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.x);
-                rowEl.appendChild(valEl);
-            }
-            if (this._isInteractive)
-                this._wireInteractivity(rowEl, barEl, i);
-        });
-        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);
+    _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
@@ -459,22 +467,25 @@ class BarChart {
         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);
-                }, 100);
+                }, 200);
             });
             ro.observe(this._wrapperEl);
             this._resizeObserver = ro;
         }
         return this;
     }
-    into(target) {
-        return this.render(target);
-    }
+    into(target) { return this.render(target); }
     on(event, fn) {
         if (!this._listeners[event])
             this._listeners[event] = [];
@@ -482,9 +493,8 @@ class BarChart {
         return this;
     }
     off(event, fn) {
-        if (this._listeners[event]) {
+        if (this._listeners[event])
             this._listeners[event] = this._listeners[event].filter(f => f !== fn);
-        }
         return this;
     }
     select(index) {
@@ -504,6 +514,7 @@ class BarChart {
     destroy() {
         if (this._resizeObserver)
             this._resizeObserver.disconnect();
+        pageState.__unregister(this.id);
         this._wrapperEl.remove();
     }
 }
@@ -517,4 +528,28 @@ export function barChart(id, values, options = {}) {
 }
 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