@peter.prib/renderengine 0.13.0 → 0.15.0

package/src/charting/charts/DumbbellChart.js

@@ -0,0 +1,217 @@
+import { Chart } from '../Chart.js';
+import { Axis } from '../Axis.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { Legend } from '../Legend.js';
+
+/**
+ * DumbbellChart — connected pair of dots (`{label, start, end}` or two numeric
+ * series) per category showing before/after or target/actual change across
+ * categories.
+ *
+ * Supports both horizontal (categories along Y, values along X — default) and
+ * vertical (`orientation: 'vertical'`) layouts, optional delta callout badges
+ * (`showDelta: true`), directional coloring (`colorByDelta: true`), and hover
+ * group elevation.
+ */
+export class DumbbellChart extends Chart {
+    static chartType = 'dumbbell';
+
+    /**
+     * Normalize either:
+     *   1. `Array<{label, start, end}>` (also accepts `from`/`to` or `before`/`after` or `values: [start, end]`)
+     *   2. Multi-series `Array<{name, values: Array<{label, value}|number>}>` (uses first two series)
+     * into `{ items: Array<{label: string, start: number, end: number, delta: number}>, startLabel: string, endLabel: string }`.
+     */
+    static normalizeData(data, options = {}) {
+        let startLabel = options.startLabel ?? 'Start';
+        let endLabel = options.endLabel ?? 'End';
+        if (!Array.isArray(data) || !data.length) {
+            return { items: [], startLabel, endLabel };
+        }
+
+        const first = data[0];
+        // Multi-series shape: [{ name: '2025', values: [{label, value}, ...] }, { name: '2026', values: [...] }]
+        if (first && typeof first === 'object' && Array.isArray(first.values) && ('name' in first || data.length >= 2 && !('start' in first))) {
+            if ( data.length >= 2 && ('name' in first || typeof first.values[0] === 'object') ) {
+                const s0 = data[0];
+                const s1 = data[1];
+                startLabel = options.startLabel ?? s0.name ?? 'Series 1';
+                endLabel = options.endLabel ?? s1.name ?? 'Series 2';
+                const len = Math.max(s0.values?.length ?? 0, s1.values?.length ?? 0);
+                const items = [];
+                for (let i = 0; i < len; i++) {
+                    const v0 = s0.values?.[i];
+                    const v1 = s1.values?.[i];
+                    const label = (typeof v0 === 'object' && v0 !== null ? v0.label : null)
+                        ?? (typeof v1 === 'object' && v1 !== null ? v1.label : null)
+                        ?? `#${i + 1}`;
+                    const start = Number(typeof v0 === 'object' && v0 !== null ? v0.value : v0) || 0;
+                    const end = Number(typeof v1 === 'object' && v1 !== null ? v1.value : v1) || 0;
+                    items.push({ label: String(label), start, end, delta: end - start });
+                }
+                return { items, startLabel, endLabel };
+            }
+        }
+
+        const items = data.map((d, i) => {
+            const label = String(d?.label ?? d?.name ?? `#${i + 1}`);
+            const start = Number(
+                d?.start ?? d?.from ?? d?.before ?? (Array.isArray(d?.values) ? d.values[0] : d?.value ?? 0)
+            ) || 0;
+            const end = Number(
+                d?.end ?? d?.to ?? d?.after ?? (Array.isArray(d?.values) ? (d.values[1] ?? d.values[0]) : d?.value ?? 0)
+            ) || 0;
+            return { label, start, end, delta: end - start };
+        });
+        return { items, startLabel, endLabel };
+    }
+
+    _render() {
+        const { items, startLabel, endLabel } = DumbbellChart.normalizeData(this.data, this.options);
+        if (!items.length) return;
+
+        const box = ChartBox.fromRenderer(this.renderer);
+        const options = this.options;
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            title, xAxisLabel, yAxisLabel, colors,
+            orientation = 'horizontal',
+            colorByDelta = true,
+            showDelta = true,
+            dotRadius = 6,
+            legend = true,
+        } = options;
+
+        const palette = new ColorPalette(colors);
+        const startColor = options.startColor ?? palette.colorAt(0);
+        const endColor = options.endColor ?? palette.colorAt(1);
+        const upColor = options.upColor ?? '#2ecc71';
+        const downColor = options.downColor ?? '#e74c3c';
+        const neutralColor = options.neutralColor ?? '#8892b0';
+
+        const isHorizontal = orientation !== 'vertical';
+        const leftPad = isHorizontal ? 38 : 0;
+        const plotBox = {
+            x: x + leftPad,
+            y,
+            width: Math.max(40, width - leftPad - (legend ? 20 : 0)),
+            height,
+        };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+
+        const allVals = items.flatMap(it => [it.start, it.end]);
+        const rawMin = Math.min(...allVals);
+        const rawMax = Math.max(...allVals);
+        const pad = ((rawMax - rawMin) || Math.abs(rawMax) || 1) * 0.08;
+        const vMin = rawMin >= 0 && rawMin - pad < 0 ? 0 : rawMin - pad;
+        const vMax = rawMax + pad;
+        const vRange = (vMax - vMin) || 1;
+        const ticks = Axis.niceTicks(vMax - vMin, 5).map(t => vMin + t).filter(t => t <= vMax + 1e-6);
+
+        if (isHorizontal) {
+            const toX = v => plotBox.x + ((v - vMin) / vRange) * plotBox.width;
+            const slotH = plotBox.height / items.length;
+
+            // Vertical gridlines & bottom X ticks
+            this.renderer.path(`M${plotBox.x},${plotBox.y} L${plotBox.x},${plotBox.y + plotBox.height} L${plotBox.x + plotBox.width},${plotBox.y + plotBox.height}`, 'none', { color: 'black', width: 1 });
+            for (const tick of ticks) {
+                const tx = toX(tick);
+                this.renderer.path(`M${tx},${plotBox.y} L${tx},${plotBox.y + plotBox.height}`, 'none', { color: '#eee', width: 1, dasharray: '3,3' });
+                this.renderer.text(Axis.formatValue(tick), tx, plotBox.y + plotBox.height + 16, {
+                    textAnchor: this.renderer.centerTextAnchor, fontSize: '10px', fill: '#666',
+                });
+            }
+
+            items.forEach((item, i) => {
+                const cy = plotBox.y + i * slotH + slotH / 2;
+                const x1 = toX(item.start);
+                const x2 = toX(item.end);
+                const rodColor = colorByDelta
+                    ? (item.delta > 0 ? upColor : item.delta < 0 ? downColor : neutralColor)
+                    : neutralColor;
+                const sign = item.delta > 0 ? '+' : '';
+                const tooltip = `${item.label}: ${startLabel} ${Axis.formatValue(item.start)} → ${endLabel} ${Axis.formatValue(item.end)} (${sign}${Axis.formatValue(item.delta)})`;
+
+                // Subtle horizontal guide
+                this.renderer.path(`M${plotBox.x},${cy} L${plotBox.x + plotBox.width},${cy}`, 'none', { color: '#f3f3f3', width: 1 });
+
+                // Category label on left
+                this.renderer.text(item.label, plotBox.x - 8, cy, {
+                    textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#333',
+                });
+
+                const rod = this.renderer.path(`M${x1},${cy} L${x2},${cy}`, 'none', {
+                    color: rodColor, width: 3.5, 'stroke-linecap': 'round',
+                }, { tooltip });
+                const startDot = this._datum(this.renderer.circle(x1, cy, dotRadius, '#ffffff', {
+                    color: startColor, width: 2.5,
+                }, { tooltip }), { label: item.label, series: startLabel, value: item.start });
+                const endDot = this._datum(this.renderer.circle(x2, cy, dotRadius + 0.5, endColor, {
+                    color: '#ffffff', width: 1.5,
+                }, { tooltip }), { label: item.label, series: endLabel, value: item.end });
+
+                const groupEls = [rod, startDot, endDot];
+                if (showDelta) {
+                    const midX = (x1 + x2) / 2;
+                    const deltaLbl = this.renderer.text(`${sign}${Axis.formatValue(item.delta)}`, midX, cy - dotRadius - 5, {
+                        textAnchor: this.renderer.centerTextAnchor, fontSize: '9px', fontWeight: 'bold',
+                        fill: rodColor, 'pointer-events': 'none',
+                    });
+                    groupEls.push(deltaLbl);
+                }
+                this._wireHoverTransform(groupEls, { dx: 0, dy: -2 });
+            });
+        } else {
+            const toY = v => plotBox.y + plotBox.height - ((v - vMin) / vRange) * plotBox.height;
+            const slotW = plotBox.width / items.length;
+
+            this.renderer.path(`M${plotBox.x},${plotBox.y} L${plotBox.x},${plotBox.y + plotBox.height} L${plotBox.x + plotBox.width},${plotBox.y + plotBox.height}`, 'none', { color: 'black', width: 1 });
+            for (const tick of ticks) {
+                const ty = toY(tick);
+                this.renderer.path(`M${plotBox.x},${ty} L${plotBox.x + plotBox.width},${ty}`, 'none', { color: '#eee', width: 1, dasharray: '3,3' });
+                this.renderer.text(Axis.formatValue(tick), plotBox.x - 8, ty, {
+                    textAnchor: 'end', verticalAlign: 'middle', fontSize: '10px', fill: '#666',
+                });
+            }
+
+            items.forEach((item, i) => {
+                const cx = plotBox.x + i * slotW + slotW / 2;
+                const y1 = toY(item.start);
+                const y2 = toY(item.end);
+                const rodColor = colorByDelta
+                    ? (item.delta > 0 ? upColor : item.delta < 0 ? downColor : neutralColor)
+                    : neutralColor;
+                const sign = item.delta > 0 ? '+' : '';
+                const tooltip = `${item.label}: ${startLabel} ${Axis.formatValue(item.start)} → ${endLabel} ${Axis.formatValue(item.end)} (${sign}${Axis.formatValue(item.delta)})`;
+
+                this.renderer.text(item.label, cx, plotBox.y + plotBox.height + 18, {
+                    textAnchor: this.renderer.centerTextAnchor, fontSize: '10px', fill: '#333',
+                });
+
+                const rod = this.renderer.path(`M${cx},${y1} L${cx},${y2}`, 'none', {
+                    color: rodColor, width: 3.5, 'stroke-linecap': 'round',
+                }, { tooltip });
+                const startDot = this._datum(this.renderer.circle(cx, y1, dotRadius, '#ffffff', {
+                    color: startColor, width: 2.5,
+                }, { tooltip }), { label: item.label, series: startLabel, value: item.start });
+                const endDot = this._datum(this.renderer.circle(cx, y2, dotRadius + 0.5, endColor, {
+                    color: '#ffffff', width: 1.5,
+                }, { tooltip }), { label: item.label, series: endLabel, value: item.end });
+
+                this._wireHoverTransform([rod, startDot, endDot], { dx: 0, dy: -2.5 });
+            });
+        }
+
+        if (legend) {
+            Legend.beside(plotBox, this.renderer.width, {
+                items: [
+                    { label: startLabel, color: startColor },
+                    { label: endLabel, color: endColor },
+                ],
+                marker: 'circle',
+            }).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/EcdfChart.js

@@ -0,0 +1,150 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Legend } from '../Legend.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { Statistics } from '../Statistics.js';
+
+/**
+ * EcdfChart — Empirical Cumulative Distribution Function (step plot) for raw
+ * numeric samples.
+ *
+ * Plots the empirical probability P(X <= x) from 0 to 1 across sorted observations,
+ * supporting multiple comparison series and Kolmogorov–Smirnov distance calculation.
+ */
+export class EcdfChart extends Chart {
+    static chartType = 'ecdf';
+
+    /**
+     * Compute empirical CDF step points from raw numeric values.
+     * @returns {Array<{x: number, y: number}>}
+     */
+    static computeEcdf(values) {
+        if (!Array.isArray(values) || !values.length) return [];
+        const sorted = [...values].filter(v => Number.isFinite(v)).sort((a, b) => a - b);
+        const n = sorted.length;
+        if (!n) return [];
+        const pts = [];
+        for (let i = 0; i < n; i++) {
+            pts.push({ x: sorted[i], y: (i + 1) / n });
+        }
+        return pts;
+    }
+
+    /**
+     * Kolmogorov–Smirnov test statistic D = sup |F1(x) - F2(x)| between two samples.
+     */
+    static ksDistance(s1, s2) {
+        const e1 = EcdfChart.computeEcdf(s1);
+        const e2 = EcdfChart.computeEcdf(s2);
+        if (!e1.length || !e2.length) return 0;
+        const allX = [...new Set([...e1.map(p => p.x), ...e2.map(p => p.x)])].sort((a, b) => a - b);
+        let maxD = 0;
+        let p1 = 0, p2 = 0;
+        for (const x of allX) {
+            const v1 = (e1.filter(p => p.x <= x).pop()?.y) ?? 0;
+            const v2 = (e2.filter(p => p.x <= x).pop()?.y) ?? 0;
+            const diff = Math.abs(v1 - v2);
+            if (diff > maxD) maxD = diff;
+        }
+        return maxD;
+    }
+
+    _render() {
+        const data = this.data;
+        if (!data) return;
+
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width: optWidth, height = box.height,
+            title, xAxisLabel, yAxisLabel = 'Probability P(X ≤ x)',
+            colors, legend: showLegend = true, showMedian = true,
+        } = options;
+
+        const isGrouped = Array.isArray(data) && typeof data[0] === 'object' && Array.isArray(data[0].values);
+        const groups = isGrouped
+            ? data.map(d => ({ label: d.label ?? d.name ?? 'Series', values: d.values }))
+            : [{ label: 'Sample', values: Array.isArray(data) ? data : [] }];
+
+        const palette = new ColorPalette(colors);
+        const legendItems = groups.map((g, i) => ({ label: g.label, color: palette.colorAt(i) }));
+        const width = optWidth ?? (showLegend && groups.length > 1
+            ? Legend.plotWidthBeside({ x, width: box.width }, this.renderer.width, { items: legendItems })
+            : box.width);
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+
+        const allVals = groups.flatMap(g => g.values).filter(Number.isFinite);
+        if (!allVals.length) return;
+        const xMin = Math.min(...allVals);
+        const xMax = Math.max(...allVals);
+        const xRange = (xMax - xMin) || 1;
+
+        // X-axis and Y-axis (0..1)
+        new Axis().drawXRange(this.renderer, plotBox, xMin, xMax);
+        const yTicks = [0, 0.25, 0.5, 0.75, 1.0];
+        for (const yt of yTicks) {
+            const py = y + height - yt * height;
+            this.renderer.path(`M${x - 5},${py} L${x + width},${py}`, 'none', {
+                color: yt === 0.5 ? '#bbb' : '#eee', width: 1, dasharray: yt === 0.5 ? '4,4' : '2,2',
+            });
+            this.renderer.text((yt * 100).toFixed(0) + '%', x - 8, py, {
+                textAnchor: 'end', verticalAlign: 'middle', fontSize: '10px', fill: '#666',
+            });
+        }
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        // Draw step lines
+        const toX = v => x + ((v - xMin) / xRange) * width;
+        const toY = p => y + height - p * height;
+
+        groups.forEach((g, gIdx) => {
+            const ecdf = EcdfChart.computeEcdf(g.values);
+            if (!ecdf.length) return;
+            const color = palette.colorAt(gIdx);
+
+            // Step path
+            let d = `M${toX(ecdf[0].x)},${toY(0)}`;
+            let prevX = toX(ecdf[0].x);
+            let prevY = toY(0);
+
+            for (const pt of ecdf) {
+                const px = toX(pt.x);
+                const py = toY(pt.y);
+                d += ` H${px} V${py}`;
+                prevX = px;
+                prevY = py;
+            }
+            d += ` H${x + width}`;
+
+            const lineEl = this._datum(this.renderer.path(d, 'none', {
+                color, width: 2.2,
+            }, {
+                tooltip: `${g.label}: n=${g.values.length}, min=${Axis.formatValue(xMin)}, max=${Axis.formatValue(xMax)}`,
+            }), { label: g.label, series: g.label });
+
+            // Median mark
+            if (showMedian) {
+                const median = Statistics.quantile([...g.values].sort((a, b) => a - b), 0.5);
+                const mx = toX(median);
+                this.renderer.circle(mx, toY(0.5), 3.5, color, { color: '#ffffff', width: 1.5 }, {
+                    tooltip: `${g.label} Median: ${Axis.formatValue(median)}`,
+                });
+            }
+        });
+
+        // KS distance badge if exactly 2 groups
+        if (groups.length === 2 && groups[0].values.length && groups[1].values.length) {
+            const ks = EcdfChart.ksDistance(groups[0].values, groups[1].values);
+            this.renderer.text(`Kolmogorov-Smirnov D = ${ks.toFixed(3)}`, x + width - 10, y + 16, {
+                textAnchor: 'end', fontSize: '11px', fontWeight: 'bold', fill: '#444',
+            });
+        }
+
+        if (showLegend && groups.length > 1) {
+            Legend.beside({ x, y, width }, this.renderer.width, { items: legendItems }).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/FunnelChart.js

@@ -38,8 +38,11 @@ export class FunnelChart extends Chart {
             const bottomRight = bottomLeft + bottomWidth;
 
             const path = `M${topLeft},${top} L${topRight},${top} L${bottomRight},${bottom} L${bottomLeft},${bottom} Z`;
-            this.renderer.path(path, palette.colorAt(i), { color: '#fff', width: 1 }, { tooltip: `${d.label}: ${d.value}` });
-            this.renderer.text(`${d.label} (${d.value})`, x + width / 2, top + stageHeight / 2, {
+            this._datum(this.renderer.path(path, palette.colorAt(i), { color: '#fff', width: 1 }, { tooltip: `${d.label}: ${d.value}` }), { label: d.label });
+            const showVals = options.showValues !== false;
+            const valText = typeof options.format === 'function' ? options.format(d.value) : d.value;
+            const stageLabel = showVals ? `${d.label} (${valText})` : d.label;
+            this.renderer.text(stageLabel, x + width / 2, top + stageHeight / 2, {
                 textAnchor, verticalAlign: 'middle', fontSize: '12px', fill: '#fff', fontWeight: 'bold',
             });
         });

package/src/charting/charts/GeoMapChart.js

@@ -29,6 +29,69 @@ export class GeoMapChart extends Chart {
 
     static DEFAULT_COLOR_SCALE = ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'];
 
+    static PROJECTIONS = ['equirectangular', 'mercator', 'albers', 'orthographic'];
+
+    constructor(renderer, data, options = {}) {
+        super(renderer, data, options);
+        this._zoom = 1;
+        this._pan = { x: 0, y: 0 };
+    }
+
+    _projectPoint(lon, lat, projection, cx, cy, scale, centerLon, centerLat) {
+        const rad = Math.PI / 180;
+        const dLon = lon - centerLon;
+        const dLat = lat - centerLat;
+
+        switch (projection) {
+            case 'mercator': {
+                const clampedLat = Math.max(-85, Math.min(85, lat));
+                const phi = clampedLat * rad;
+                const lam = dLon * rad;
+                const yMerc = Math.log(Math.tan(Math.PI / 4 + phi / 2));
+                const phi0 = Math.max(-85, Math.min(85, centerLat)) * rad;
+                const y0 = Math.log(Math.tan(Math.PI / 4 + phi0 / 2));
+                return {
+                    x: cx + lam * scale * (180 / Math.PI),
+                    y: cy - (yMerc - y0) * scale * (180 / Math.PI),
+                    visible: true,
+                };
+            }
+            case 'albers': {
+                const phi1 = 29.5 * rad;
+                const phi2 = 45.5 * rad;
+                const n = 0.5 * (Math.sin(phi1) + Math.sin(phi2));
+                const c = Math.cos(phi1) ** 2 + 2 * n * Math.sin(phi1);
+                const rho0 = Math.sqrt(Math.max(0, c - 2 * n * Math.sin(centerLat * rad))) / n;
+                const theta = n * dLon * rad;
+                const rho = Math.sqrt(Math.max(0, c - 2 * n * Math.sin(lat * rad))) / n;
+                return {
+                    x: cx + rho * Math.sin(theta) * scale * (180 / Math.PI),
+                    y: cy - (rho0 - rho * Math.cos(theta)) * scale * (180 / Math.PI),
+                    visible: true,
+                };
+            }
+            case 'orthographic': {
+                const lam = dLon * rad;
+                const phi = lat * rad;
+                const phi0 = centerLat * rad;
+                const cosC = Math.sin(phi0) * Math.sin(phi) + Math.cos(phi0) * Math.cos(phi) * Math.cos(lam);
+                const R = scale * 50;
+                return {
+                    x: cx + R * Math.cos(phi) * Math.sin(lam),
+                    y: cy - R * (Math.cos(phi0) * Math.sin(phi) - Math.sin(phi0) * Math.cos(phi) * Math.cos(lam)),
+                    visible: cosC >= -0.05,
+                };
+            }
+            case 'equirectangular':
+            default:
+                return {
+                    x: cx + dLon * scale,
+                    y: cy - dLat * scale,
+                    visible: true,
+                };
+        }
+    }
+
     _render() {
         const data = this.data || {};
         const options = this.options || {};
@@ -38,6 +101,7 @@ export class GeoMapChart extends Chart {
             title,
             center: [centerLon = 0, centerLat = 20] = [],
             scale: explicitScale,
+            projection = 'equirectangular',
             colorScale = GeoMapChart.DEFAULT_COLOR_SCALE,
             bubbleMaxRadius = 20,
             bubbleColor = '#e74c3c',
@@ -47,13 +111,18 @@ export class GeoMapChart extends Chart {
 
         new ChartLabels({ title }).draw(this.renderer, { x, y, width, height });
 
-        const scale = explicitScale || this._fitScale(features, width, height, centerLon, centerLat);
-        const cx = x + width / 2;
-        const cy = y + height / 2;
-        const project = (lon, lat) => ({
-            x: cx + (lon - centerLon) * scale,
-            y: cy - (lat - centerLat) * scale,
-        });
+        const baseScale = explicitScale || this._fitScale(features, width, height, centerLon, centerLat);
+        const scale = baseScale * this._zoom;
+        const cx = x + width / 2 + this._pan.x;
+        const cy = y + height / 2 + this._pan.y;
+
+        const project = (lon, lat) => this._projectPoint(lon, lat, projection, cx, cy, scale, centerLon, centerLat);
+
+        // Draw orthographic globe sphere outline
+        if (projection === 'orthographic') {
+            const globeR = scale * 50;
+            this.renderer.circle(cx, cy, globeR, '#f0f6ff', { color: '#9bb8dc', width: 1.5 });
+        }
 
         const valueRange = this._valueRange(features);
         const palette = new ColorPalette(colorScale);
@@ -70,14 +139,60 @@ export class GeoMapChart extends Chart {
         if (bubbles.length) {
             const bubbleValues = bubbles.map(b => b.value).filter(v => v != null && !Number.isNaN(v));
             const maxBubbleValue = bubbleValues.length ? Math.max(...bubbleValues) : 1;
+            const zoomRadiusScale = Math.sqrt(this._zoom);
             bubbles.forEach(b => {
                 const p = project(b.lon, b.lat);
-                const r = b.radius || (b.value != null ? Math.max(3, (b.value / maxBubbleValue) * bubbleMaxRadius) : 5);
+                if (!p.visible) return;
+                const baseR = b.radius || (b.value != null ? Math.max(3, (b.value / maxBubbleValue) * bubbleMaxRadius) : 5);
+                const r = baseR * zoomRadiusScale;
                 this.renderer.circle(p.x, p.y, r, b.color || bubbleColor, { color: '#fff', width: 1 }, {
                     tooltip: b.label ? `${b.label}: ${b.value ?? ''}` : String(b.value ?? ''),
                 });
             });
         }
+
+        this._wireZoomPan();
+    }
+
+    _wireZoomPan() {
+        if (this._zoomWired || this.options.zoomable === false || !this.renderer?.supportsSceneGraph) return;
+        const container = this.renderer.container;
+        if (!container?.addEventListener) return;
+        this._zoomWired = true;
+
+        container.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            const factor = e.deltaY < 0 ? 1.15 : 0.87;
+            this._zoom = Math.max(0.4, Math.min(25, this._zoom * factor));
+            this.render();
+        }, { passive: false });
+
+        let isDragging = false;
+        let lastX = 0;
+        let lastY = 0;
+
+        container.addEventListener('pointerdown', (e) => {
+            if (e.button !== 0) return;
+            isDragging = true;
+            lastX = e.clientX;
+            lastY = e.clientY;
+            container.setPointerCapture?.(e.pointerId);
+        });
+
+        container.addEventListener('pointermove', (e) => {
+            if (!isDragging) return;
+            const dx = e.clientX - lastX;
+            const dy = e.clientY - lastY;
+            lastX = e.clientX;
+            lastY = e.clientY;
+            this._pan.x += dx;
+            this._pan.y += dy;
+            this.render();
+        });
+
+        const stopDrag = () => { isDragging = false; };
+        container.addEventListener('pointerup', stopDrag);
+        container.addEventListener('pointercancel', stopDrag);
     }
 
     _featurePath(geometry, project) {
@@ -92,11 +207,17 @@ export class GeoMapChart extends Chart {
         let d = '';
         rings.forEach(polygon => {
             polygon.forEach(ring => {
-                ring.forEach(([lon, lat], i) => {
+                let segmentStarted = false;
+                ring.forEach(([lon, lat]) => {
                     const p = project(lon, lat);
-                    d += `${i === 0 ? 'M' : 'L'}${p.x},${p.y} `;
+                    if (p.visible !== false) {
+                        d += `${segmentStarted ? 'L' : 'M'}${p.x.toFixed(1)},${p.y.toFixed(1)} `;
+                        segmentStarted = true;
+                    } else {
+                        segmentStarted = false;
+                    }
                 });
-                d += 'Z ';
+                if (segmentStarted) d += 'Z ';
             });
         });
         return d.trim();

package/src/charting/charts/GroupedBarChart.js

@@ -17,10 +17,14 @@ export class GroupedBarChart extends BarChartBase {
     static chartType = 'groupedBar';
 
     _computeMaxValue() {
-        const series = this.data;
+        const activeSeries = this.data.filter((_, i) => !this._dataFilter.has(i));
+        const series = activeSeries.length ? activeSeries : this.data;
         const values = series.flatMap(s => s.values.map(v => v.value).filter(v => v != null));
         const rawMax = Math.max(...values, 1);
-        return this._drawYAxis(rawMax, Math.min(0, ...values));
+        const rawMin = Math.min(0, ...values);
+        return this._isHorizontal()
+            ? this._drawXAxis(rawMax, rawMin)
+            : this._drawYAxis(rawMax, rawMin);
     }
 
     _renderBars(maxValue) {
@@ -41,6 +45,37 @@ export class GroupedBarChart extends BarChartBase {
             return map;
         });
 
+        if (this._isHorizontal()) {
+            const clusterHeight = height / categoryCount;
+            const groupGap = clusterHeight * groupPadding;
+            const availableHeight = clusterHeight - groupGap;
+            const barHeight = availableHeight / seriesCount;
+            const barGap = barHeight * barPadding;
+            const finalBarHeight = barHeight - barGap;
+
+            labels.forEach((label, categoryIndex) => {
+                const clusterY = y + categoryIndex * clusterHeight + groupGap / 2;
+
+                series.forEach((seriesData, seriesIndex) => {
+                    if (this._dataFilter.has(seriesIndex)) return;
+                    const value = valueBySeriesLabel[seriesIndex].get(label);
+                    if (value == null) return;
+                    const bar = this._barSpan(value);
+                    const barY = clusterY + seriesIndex * barHeight + barGap / 2;
+                    const color = this._palette.colorAt(seriesIndex);
+
+                    this._datum(this.renderer.rect(bar.top, barY, bar.height, finalBarHeight, color, null, {
+                        tooltip: `${seriesData.name} — ${label}: ${value}`,
+                    }), { label, series: seriesData.name });
+                });
+
+                this.renderer.text(label, x - 8, clusterY + availableHeight / 2, {
+                    textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#333',
+                });
+            });
+            return;
+        }
+
         const clusterWidth = width / categoryCount;
         const groupGap = clusterWidth * groupPadding;
         const availableWidth = clusterWidth - groupGap;
@@ -60,6 +95,7 @@ export class GroupedBarChart extends BarChartBase {
             const clusterX = x + categoryIndex * clusterWidth + groupGap / 2;
 
             series.forEach((seriesData, seriesIndex) => {
+                if (this._dataFilter.has(seriesIndex)) return;
                 const value = valueBySeriesLabel[seriesIndex].get(label);
                 if (value == null) return;
                 const bar = this._barSpan(value);
@@ -87,7 +123,12 @@ export class GroupedBarChart extends BarChartBase {
 
     _legendOptions() {
         return {
-            items: this.data.map((s, i) => ({ label: s.name, color: this._palette.colorAt(i), dataIndex: i })),
+            items: this.data.map((s, i) => ({
+                label: s.name,
+                color: this._palette.colorAt(i),
+                hidden: this._dataFilter.has(i),
+                dataIndex: i,
+            })),
             itemHeight: 20, markerSize: 10,
         };
     }