@peter.prib/renderengine 0.14.0 → 0.15.0

package/src/charting/Annotations.js

@@ -0,0 +1,169 @@
+/**
+ * Annotations — shared reference lines, threshold bands, and regression trendlines
+ * across 2D cartesian charts (Line, Area, Bar, Scatter, Bubble).
+ */
+export class Annotations {
+    /**
+     * Compute least-squares linear regression: y = slope * x + intercept.
+     * @param {Array<{x: number, y: number}>} points
+     * @returns {{slope: number, intercept: number, r2: number} | null}
+     */
+    static linearRegression(points) {
+        const n = points.length;
+        if (n < 2) return null;
+
+        let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0, sumYY = 0;
+        for (let i = 0; i < n; i++) {
+            const { x, y } = points[i];
+            sumX += x;
+            sumY += y;
+            sumXY += x * y;
+            sumXX += x * x;
+            sumYY += y * y;
+        }
+
+        const denom = (n * sumXX - sumX * sumX);
+        if (denom === 0) return null;
+
+        const slope = (n * sumXY - sumX * sumY) / denom;
+        const intercept = (sumY - slope * sumX) / n;
+
+        // Coefficient of determination (R^2)
+        const totalVar = n * sumYY - sumY * sumY;
+        const r2 = totalVar !== 0 ? Math.pow((n * sumXY - sumX * sumY), 2) / (denom * totalVar) : 1;
+
+        return { slope, intercept, r2 };
+    }
+
+    /**
+     * Draw threshold bands (e.g. target, warning, critical zones) across the horizontal span of the plot.
+     * @param {*} renderer
+     * @param {{x: number, y: number, width: number, height: number}} plotBox
+     * @param {Array<{from: number, to: number, color?: string, label?: string}>} bands
+     * @param {{toY: (v: number) => number}} scales
+     */
+    static drawThresholdBands(renderer, plotBox, bands, { toY }) {
+        if (!Array.isArray(bands) || !bands.length || typeof toY !== 'function') return;
+
+        bands.forEach(band => {
+            const y1 = toY(band.from);
+            const y2 = toY(band.to);
+            const top = Math.min(y1, y2);
+            const bandHeight = Math.abs(y1 - y2);
+            const color = band.color ?? 'rgba(46, 204, 113, 0.12)';
+
+            renderer.rect(plotBox.x, top, plotBox.width, bandHeight, color, null);
+
+            if (band.label) {
+                renderer.text(band.label, plotBox.x + plotBox.width - 6, top + 12, {
+                    textAnchor: 'end', fontSize: '10px', fill: '#666', fontStyle: 'italic',
+                });
+            }
+        });
+    }
+
+    /**
+     * Draw reference lines (horizontal target lines, vertical markers, or diagonal thresholds).
+     * @param {*} renderer
+     * @param {{x: number, y: number, width: number, height: number}} plotBox
+     * @param {Array<object> | object} referenceLines
+     * @param {{toX?: (v: number) => number, toY?: (v: number) => number}} scales
+     */
+    static drawReferenceLines(renderer, plotBox, referenceLines, { toX, toY }) {
+        if (!referenceLines) return;
+        const lines = Array.isArray(referenceLines) ? referenceLines : [referenceLines];
+
+        lines.forEach(line => {
+            const color = line.color ?? '#e74c3c';
+            const width = line.width ?? 1.5;
+            const strokeDash = line.dash ?? '4,3';
+
+            // 1. Horizontal Reference Line: { y: number, label?: string }
+            if (line.y != null && typeof toY === 'function') {
+                const py = toY(line.y);
+                const pathEl = renderer.path(`M${plotBox.x},${py} L${plotBox.x + plotBox.width},${py}`, 'none', {
+                    color, width, 'stroke-dasharray': strokeDash,
+                });
+                pathEl?.setAttribute?.('stroke-dasharray', strokeDash.replace(',', ' '));
+
+                if (line.label) {
+                    const lx = line.labelPosition === 'start' ? plotBox.x + 6 : plotBox.x + plotBox.width - 6;
+                    const anchor = line.labelPosition === 'start' ? 'start' : 'end';
+                    renderer.text(line.label, lx, py - 4, {
+                        textAnchor: anchor, fontSize: '10px', fontWeight: 'bold', fill: color,
+                    });
+                }
+            }
+            // 2. Vertical Reference Line: { x: number, label?: string }
+            else if (line.x != null && typeof toX === 'function') {
+                const px = toX(line.x);
+                const pathEl = renderer.path(`M${px},${plotBox.y} L${px},${plotBox.y + plotBox.height}`, 'none', {
+                    color, width, 'stroke-dasharray': strokeDash,
+                });
+                pathEl?.setAttribute?.('stroke-dasharray', strokeDash.replace(',', ' '));
+
+                if (line.label) {
+                    renderer.text(line.label, px + 4, plotBox.y + 12, {
+                        textAnchor: 'start', fontSize: '10px', fontWeight: 'bold', fill: color,
+                    });
+                }
+            }
+            // 3. Diagonal / From-To Reference Line: { from: {x,y}, to: {x,y} }
+            else if (line.from && line.to && typeof toX === 'function' && typeof toY === 'function') {
+                const x1 = toX(line.from.x), y1 = toY(line.from.y);
+                const x2 = toX(line.to.x), y2 = toY(line.to.y);
+                const pathEl = renderer.path(`M${x1},${y1} L${x2},${y2}`, 'none', {
+                    color, width, 'stroke-dasharray': strokeDash,
+                });
+                pathEl?.setAttribute?.('stroke-dasharray', strokeDash.replace(',', ' '));
+
+                if (line.label) {
+                    renderer.text(line.label, x2 - 4, y2 - 4, {
+                        textAnchor: 'end', fontSize: '10px', fill: color,
+                    });
+                }
+            }
+        });
+    }
+
+    /**
+     * Draw linear regression or moving-average trendline.
+     * @param {*} renderer
+     * @param {{x: number, y: number, width: number, height: number}} plotBox
+     * @param {Array<{x: number, y: number}>} points
+     * @param {string | object} trendlineOpt e.g. 'linear', or { type: 'linear', color, label }
+     * @param {{toX: (v: number) => number, toY: (v: number) => number, xMin?: number, xMax?: number}} scales
+     */
+    static drawTrendline(renderer, plotBox, points, trendlineOpt, { toX, toY, xMin, xMax }) {
+        if (!trendlineOpt || !Array.isArray(points) || points.length < 2) return;
+        const opt = typeof trendlineOpt === 'object' ? trendlineOpt : { type: trendlineOpt };
+        const color = opt.color ?? '#2980b9';
+        const width = opt.width ?? 2;
+        const dash = opt.dash ?? '3,3';
+
+        if (opt.type === 'linear' || trendlineOpt === true || trendlineOpt === 'linear') {
+            const reg = Annotations.linearRegression(points);
+            if (!reg) return;
+
+            const minX = xMin ?? Math.min(...points.map(p => p.x));
+            const maxX = xMax ?? Math.max(...points.map(p => p.x));
+            const yStart = reg.slope * minX + reg.intercept;
+            const yEnd = reg.slope * maxX + reg.intercept;
+
+            const sx1 = toX(minX), sy1 = toY(yStart);
+            const sx2 = toX(maxX), sy2 = toY(yEnd);
+
+            const pathEl = renderer.path(`M${sx1},${sy1} L${sx2},${sy2}`, 'none', {
+                color, width, 'stroke-dasharray': dash,
+            });
+            pathEl?.setAttribute?.('stroke-dasharray', dash.replace(',', ' '));
+
+            if (opt.showEquation || opt.label) {
+                const label = opt.label ?? `y = ${reg.slope.toFixed(2)}x ${reg.slope >= 0 ? '+' : '-'} ${Math.abs(reg.intercept).toFixed(1)} (R²=${reg.r2.toFixed(2)})`;
+                renderer.text(label, sx2 - 6, sy2 - 6, {
+                    textAnchor: 'end', fontSize: '10px', fill: color, fontStyle: 'italic',
+                });
+            }
+        }
+    }
+}

package/src/charting/ArchimateDiagramEditor.js

@@ -339,6 +339,16 @@ export class ArchimateDiagramEditor extends DiagramEditor {
         if (view) this._showView(view);
     }
 
+    /** Open a view by id or view instance, switching active tab and rendering. */
+    openView(viewId) {
+        const view = typeof viewId === 'string' ? (this.model.findView?.(viewId) || this.model.getView?.(viewId)) : viewId;
+        if (!view) return;
+        this.currentView = view;
+        this.diagrams?.switchTo?.(view);
+        this._showView(view);
+        this.render();
+    }
+
     /** Open (or focus) a view's tab and select it in the tree, which makes it current. @private */
     _showView(view) {
         this.diagrams.show(view, () => this.tree.select(view.id, 'view'));
@@ -396,6 +406,12 @@ export class ArchimateDiagramEditor extends DiagramEditor {
             ${diagram} svg [nodeId]:not(.filter-highlight) { opacity: 0.3; }
             /* ModelTree's own filter button: this editor has its own above the tree. */
             ${tree} > div > div:first-child button { display: none !important; }
+            @media print {
+                body * { visibility: hidden !important; }
+                ${diagram}, ${diagram} * { visibility: visible !important; }
+                ${diagram} { position: absolute !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; }
+                ${tree}, .diagram-toolbar, .menubar, .tabs-container { display: none !important; }
+            }
         `;
         this.document.head.appendChild(style);
     }
@@ -438,7 +454,8 @@ export class ArchimateDiagramEditor extends DiagramEditor {
         const file = modelFileMenuItems(this.fileFormats, {
             model: () => this.model,
             onImport: (model) => this.replaceModel(model),
-            enabled: (format, direction) => !!f[direction + format.featureName],
+            onMerge: (model) => this.mergeModel(model),
+            enabled: (format, direction) => direction === 'merge' ? (f.merge !== false && !!f['import' + format.featureName]) : !!f[direction + format.featureName],
             document: () => this.document,
         });
         // The current view as a picture (on unless features.exportImage is false).
@@ -757,6 +774,16 @@ export class ArchimateDiagramEditor extends DiagramEditor {
      * @param {RenderEngine} [engine]
      */
     editItemProperties(item, kind, engine = this.currentEngine) {
+        if (kind === 'node') {
+            const targetViewId = item.referencedModel || item.reference || item.viewRef || item.targetViewId || item.refViewId || item.viewId;
+            if (targetViewId) {
+                const targetView = this.model?.findView?.(targetViewId) || this.model?.getView?.(targetViewId) || (this.model?.views ? this.model.views.find(v => v.id === targetViewId || v.name === targetViewId) : null);
+                if (targetView) {
+                    this.openView(targetView);
+                    return;
+                }
+            }
+        }
         if (kind === 'node' && this.isFixed(item.id)) return this.tellLocked(`"${item.name || 'This'}"`, item.id);
         // The dialog calls an element's documentation its description.
         if (kind === 'node' && item.description === undefined && item.documentation !== undefined) item.description = item.documentation;
@@ -987,18 +1014,10 @@ export class ArchimateDiagramEditor extends DiagramEditor {
     render(options = {}) {
         if (!this.currentEngine || !this.currentView) return;
 
-        console.log(`[render] START - currentView id: ${this.currentView.id}, instances count: ${this.currentView.elementInstances.size}`);
-
         // Get elements and relationships to render
         let elementsToRender = this.currentView?.elements;
         let relationshipsToRender = this.currentView?.relationships || [];
 
-        // Log what we're about to render
-        const zIndices = Array.from(this.currentView.elementInstances.values()).map(i => `${i.id}:${i.zIndex}`).join(', ');
-        console.log(`[render] instances zIndex: ${zIndices}`);
-        const renderZIndexes = elementsToRender?.map(e => `${e.id}:${e.zIndex}`).join(', ');
-        console.log(`[render] elementsToRender zIndex: ${renderZIndexes}`);
-
         if (!Array.isArray(elementsToRender)) {
             console.warn('render: currentView.elements is not an array', {
                 viewName: this.currentView?.name,
@@ -1083,6 +1102,17 @@ export class ArchimateDiagramEditor extends DiagramEditor {
                 onEdgeAdd: (edge) => this._relationshipDrawn(edge),
                 onEdgeRemove: (edge) => this._relationshipUndrawn(edge),
                 contextMenuItems: [
+                    {
+                        label: '📂 Open Referenced View',
+                        visible: (node) => !!(node.referencedModel || node.reference || node.viewRef || node.targetViewId || node.refViewId),
+                        action: (node) => {
+                            const targetViewId = node.referencedModel || node.reference || node.viewRef || node.targetViewId || node.refViewId;
+                            if (targetViewId) {
+                                const targetView = this.model?.findView?.(targetViewId) || this.model?.getView?.(targetViewId) || (this.model?.views ? this.model.views.find(v => v.id === targetViewId || v.name === targetViewId) : null);
+                                if (targetView) this.openView(targetView);
+                            }
+                        },
+                    },
                     { label: 'Show/Edit Properties…', action: (node, engine) => this.editItemProperties(node, 'node', engine) },
                     { label: 'Add Missing Relationships…', action: (node, engine) => {
                         const instance = this.currentView?.getElementInstance(node.id);
@@ -1162,7 +1192,6 @@ export class ArchimateDiagramEditor extends DiagramEditor {
         // A canvas shows its hints.
         this.showHintFor();
 
-        console.log(`[render] END - render complete`);
         this._notifyRendered();
     }
 
@@ -1518,6 +1547,21 @@ export class ArchimateDiagramEditor extends DiagramEditor {
         if (this.currentView) this._showView(this.currentView);
     }
 
+    /**
+     * Merge an imported model into the current open model.
+     * @param {ArchimateModel|object} model - The model to merge in
+     * @returns {object} merge result details
+     */
+    mergeModel(model) {
+        if (!model) return null;
+        const result = this.model.merge(model);
+        this.filterSystem.model = this.model;
+        this._renderTreePanel();
+        if (this.currentView) this._showView(this.currentView);
+        this.render();
+        return result;
+    }
+
     /**
      * Drop or paste image files onto the diagram; each is handed to
      * `deps.onImageDrop(engine, point, dataURL)`.

package/src/charting/Axis.js

@@ -51,6 +51,96 @@ export class Axis {
         return ticks;
     }
 
+    /**
+     * Compute ticks along a base-10 logarithmic scale across [minVal, maxVal].
+     * @param {number} minVal
+     * @param {number} maxVal
+     * @returns {number[]}
+     */
+    static logTicks(minVal, maxVal) {
+        const min = Math.max(1e-9, minVal || 1);
+        const max = Math.max(min * 10, maxVal || 10);
+        const startDecade = Math.floor(Math.log10(min));
+        const endDecade = Math.ceil(Math.log10(max));
+        const decades = endDecade - startDecade;
+        const ticks = [];
+
+        // If span is 3 decades or fewer, include 1, 2, 5 multipliers
+        const multipliers = decades <= 3 ? [1, 2, 5] : [1];
+        for (let d = startDecade; d <= endDecade; d++) {
+            const base = Math.pow(10, d);
+            for (const m of multipliers) {
+                const val = parseFloat((m * base).toFixed(10));
+                if (val >= min * 0.999 && val <= max * 1.001) {
+                    ticks.push(val);
+                }
+            }
+        }
+        return ticks.length ? ticks : [min, max];
+    }
+
+    /**
+     * Compute ticks for square-root proportional scale.
+     * @param {number} minVal
+     * @param {number} maxVal
+     * @param {number} [count=4]
+     * @returns {number[]}
+     */
+    static sqrtTicks(minVal, maxVal, count = 4) {
+        const lo = Math.max(0, minVal || 0);
+        const hi = Math.max(lo + 1, maxVal || 1);
+        const sqrtTicks = Axis.niceTicks(Math.sqrt(hi), count);
+        return sqrtTicks.map(t => Math.round(t * t));
+    }
+
+    /**
+     * Compute evenly-spaced time interval ticks across [minTime, maxTime] (in ms).
+     * @param {number | Date} minTime
+     * @param {number | Date} maxTime
+     * @param {number} [count=5]
+     * @returns {Array<{time: number, label: string}>}
+     */
+    static timeTicks(minTime, maxTime, count = 5) {
+        const t0 = typeof minTime === 'number' ? minTime : new Date(minTime).getTime();
+        const t1 = typeof maxTime === 'number' ? maxTime : new Date(maxTime).getTime();
+        const span = Math.max(1000, t1 - t0);
+
+        // Standard time steps in milliseconds
+        const SECOND = 1000;
+        const MINUTE = 60 * SECOND;
+        const HOUR = 60 * MINUTE;
+        const DAY = 24 * HOUR;
+        const MONTH = 30 * DAY;
+        const YEAR = 365 * DAY;
+
+        const STEPS = [
+            1 * SECOND, 5 * SECOND, 15 * SECOND, 30 * SECOND,
+            1 * MINUTE, 5 * MINUTE, 15 * MINUTE, 30 * MINUTE,
+            1 * HOUR, 3 * HOUR, 6 * HOUR, 12 * HOUR,
+            1 * DAY, 2 * DAY, 7 * DAY,
+            15 * DAY, 1 * MONTH, 3 * MONTH, 6 * MONTH,
+            1 * YEAR, 2 * YEAR, 5 * YEAR,
+        ];
+
+        const targetStep = span / count;
+        const step = STEPS.find(s => s >= targetStep) ?? STEPS[STEPS.length - 1];
+
+        const first = Math.ceil(t0 / step) * step;
+        const ticks = [];
+        for (let t = first; t <= t1; t += step) {
+            const d = new Date(t);
+            let label;
+            if (step >= YEAR) label = String(d.getFullYear());
+            else if (step >= MONTH) label = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+            else if (step >= DAY) label = `${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+            else if (step >= MINUTE) label = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+            else label = `${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+
+            ticks.push({ time: t, label });
+        }
+        return ticks;
+    }
+
     /**
      * How often a category label fits along an axis `width` wide: 1 (every
      * label), 2 (every other), … — so a long series (a minute of samples, a
@@ -77,6 +167,13 @@ export class Axis {
      * @returns {string}
      */
     static formatValue(v) {
+        if (v == null || Number.isNaN(v)) return '';
+        if (typeof v === 'string') {
+            const num = Number(v);
+            if (isNaN(num) || v.trim() === '') return v;
+            v = num;
+        }
+        if (typeof v !== 'number' || !Number.isFinite(v)) return String(v ?? '');
         if (v === 0) return '0';
         if (Math.abs(v) >= 1e6) return (v / 1e6).toFixed(2) + 'M';
         if (Math.abs(v) >= 1e3) return (v / 1e3).toFixed(2) + 'k';
@@ -108,11 +205,31 @@ export class Axis {
      * @param {number} rawMax the raw data maximum
      * @returns {{min:number, max:number}} the nice domain the ticks actually span
      */
-    drawYRange(renderer, box, rawMin, rawMax) {
-        const ticks = Axis.niceRange(rawMin, rawMax);
-        const min = ticks[0];
-        const max = ticks.length > 1 ? ticks[ticks.length - 1] : 1;
-        const yOf = (v) => box.y + box.height - ((v - min) / (max - min)) * box.height;
+    drawYRange(renderer, box, rawMin, rawMax, options = {}) {
+        const scale = options.scale ?? 'linear';
+        let ticks, min, max, yOf;
+
+        if (scale === 'log') {
+            min = Math.max(1e-9, rawMin || 1);
+            max = Math.max(min * 10, rawMax || 10);
+            ticks = Axis.logTicks(min, max);
+            const logMin = Math.log10(min);
+            const logMax = Math.log10(max);
+            yOf = (v) => box.y + box.height - ((Math.log10(Math.max(1e-9, v)) - logMin) / (logMax - logMin)) * box.height;
+        } else if (scale === 'sqrt') {
+            min = Math.max(0, rawMin || 0);
+            max = Math.max(min + 1, rawMax || 1);
+            ticks = Axis.sqrtTicks(min, max);
+            const sqrtMin = Math.sqrt(min);
+            const sqrtMax = Math.sqrt(max);
+            yOf = (v) => box.y + box.height - ((Math.sqrt(Math.max(0, v)) - sqrtMin) / (sqrtMax - sqrtMin)) * box.height;
+        } else {
+            ticks = Axis.niceRange(rawMin, rawMax);
+            min = ticks[0];
+            max = ticks.length > 1 ? ticks[ticks.length - 1] : 1;
+            yOf = (v) => box.y + box.height - ((v - min) / (max - min)) * box.height;
+        }
+
         for (const t of ticks) {
             const ty = yOf(t);
             renderer.path(`M${box.x - 5},${ty} L${box.x},${ty}`, 'none', { color: '#999', width: 1 });
@@ -125,6 +242,101 @@ export class Axis {
                 textAnchor: 'end', verticalAlign: 'middle', fontSize: '10px', fill: '#666',
             });
         }
+        const result = { min, max };
+        Object.defineProperty(result, 'yOf', { value: yOf, writable: true, configurable: true, enumerable: false });
+        return result;
+    }
+
+    /**
+     * Draw an x-axis over a range that may go below zero (niceRange): ticks, labels, vertical gridlines,
+     * and a zero line when range goes below zero.
+     * @param {*} renderer a renderer implementing .path() and .text()
+     * @param {{x:number, y:number, width:number, height:number}} box plot-area box
+     * @param {number} rawMin the raw data minimum
+     * @param {number} rawMax the raw data maximum
+     * @param {object} [options]
+     * @returns {{min:number, max:number, xOf?: Function}} the nice domain the ticks actually span
+     */
+    drawXRange(renderer, box, rawMin, rawMax, options = {}) {
+        const scale = options.scale ?? 'linear';
+        let ticks, min, max, xOf;
+
+        if (scale === 'time') {
+            const timeItems = Axis.timeTicks(rawMin, rawMax);
+            min = rawMin;
+            max = rawMax;
+            xOf = (v) => box.x + ((v - min) / (max - min)) * box.width;
+            for (const item of timeItems) {
+                const tx = xOf(item.time);
+                renderer.path(`M${tx},${box.y + box.height} L${tx},${box.y + box.height + 5}`, 'none', { color: '#999', width: 1 });
+                renderer.path(`M${tx},${box.y} L${tx},${box.y + box.height}`, 'none', { color: '#eee', width: 1 });
+                renderer.text(item.label, tx, box.y + box.height + 16, {
+                    textAnchor: renderer.centerTextAnchor, verticalAlign: 'top', fontSize: '10px', fill: '#666',
+                });
+            }
+            const result = { min, max };
+        Object.defineProperty(result, 'xOf', { value: xOf, writable: true, configurable: true, enumerable: false });
+        return result;
+        } else if (scale === 'log') {
+            min = Math.max(1e-9, rawMin || 1);
+            max = Math.max(min * 10, rawMax || 10);
+            ticks = Axis.logTicks(min, max);
+            const logMin = Math.log10(min);
+            const logMax = Math.log10(max);
+            xOf = (v) => box.x + ((Math.log10(Math.max(1e-9, v)) - logMin) / (logMax - logMin)) * box.width;
+        } else if (scale === 'sqrt') {
+            min = Math.max(0, rawMin || 0);
+            max = Math.max(min + 1, rawMax || 1);
+            ticks = Axis.sqrtTicks(min, max);
+            const sqrtMin = Math.sqrt(min);
+            const sqrtMax = Math.sqrt(max);
+            xOf = (v) => box.x + ((Math.sqrt(Math.max(0, v)) - sqrtMin) / (sqrtMax - sqrtMin)) * box.width;
+        } else {
+            ticks = Axis.niceRange(rawMin, rawMax);
+            min = ticks[0];
+            max = ticks.length > 1 ? ticks[ticks.length - 1] : 1;
+            xOf = (v) => box.x + ((v - min) / (max - min)) * box.width;
+        }
+
+        for (const t of ticks) {
+            const tx = xOf(t);
+            renderer.path(`M${tx},${box.y + box.height} L${tx},${box.y + box.height + 5}`, 'none', { color: '#999', width: 1 });
+            if (t !== 0) {
+                renderer.path(`M${tx},${box.y} L${tx},${box.y + box.height}`, 'none', { color: '#eee', width: 1 });
+            } else if (min < 0) {
+                renderer.path(`M${tx},${box.y} L${tx},${box.y + box.height}`, 'none', { color: '#666', width: 1, zeroLine: true });
+            }
+            renderer.text(Axis.formatValue(t), tx, box.y + box.height + 16, {
+                textAnchor: renderer.centerTextAnchor, verticalAlign: 'top', fontSize: '10px', fill: '#666',
+            });
+        }
+        const result = { min, max };
+        Object.defineProperty(result, 'xOf', { value: xOf, writable: true, configurable: true, enumerable: false });
+        return result;
+    }
+
+    /**
+     * Draw a secondary (right-hand) y-axis: ticks, labels, and tick marks on the right side of the plot.
+     * @param {*} renderer
+     * @param {{x:number, y:number, width:number, height:number}} box
+     * @param {number} rawMin
+     * @param {number} rawMax
+     * @returns {{min:number, max:number}}
+     */
+    drawSecondaryYRange(renderer, box, rawMin, rawMax) {
+        const ticks = Axis.niceRange(rawMin, rawMax);
+        const min = ticks[0];
+        const max = ticks.length > 1 ? ticks[ticks.length - 1] : 1;
+        const yOf = (v) => box.y + box.height - ((v - min) / (max - min)) * box.height;
+        const rightX = box.x + box.width;
+        renderer.path(`M${rightX},${box.y} L${rightX},${box.y + box.height}`, 'none', { color: '#999', width: 1 });
+        for (const t of ticks) {
+            const ty = yOf(t);
+            renderer.path(`M${rightX},${ty} L${rightX + 5},${ty}`, 'none', { color: '#999', width: 1 });
+            renderer.text(Axis.formatValue(t), rightX + 8, ty, {
+                textAnchor: 'start', verticalAlign: 'middle', fontSize: '10px', fill: '#666',
+            });
+        }
         return { min, max };
     }
 }

package/src/charting/Chart.js

@@ -1,3 +1,5 @@
+import { DataFilter } from './DataFilter.js';
+
 /**
  * Chart — abstract base class for one chart type.
  *
@@ -22,6 +24,26 @@ export class Chart {
         this.options = options;
         /** The marks drawn for values, `{ shape, datum }`, as the last render() drew them. */
         this.datums = [];
+        this._dataFilter = options.dataFilter ?? new DataFilter();
+    }
+
+    /**
+     * Default click handler for interactive legend filtering.
+     * When a legend item is clicked, toggles its visibility in _dataFilter and re-renders.
+     */
+    onClick(event, hitShape) {
+        if (!hitShape) return;
+        if (hitShape.legendItem && hitShape.dataIndex !== undefined) {
+            this._dataFilter.toggle(hitShape.dataIndex);
+            this.render();
+            return;
+        }
+        if (typeof this.options?.onDatumClick === 'function') {
+            const entry = this.datums.find(d => d.shape === hitShape);
+            if (entry) {
+                this.options.onDatumClick(entry.datum, event);
+            }
+        }
     }
 
     /** Render the chart. Subclasses implement `_render()`. */
@@ -39,24 +61,92 @@ export class Chart {
         return shape;
     }
 
-    /** Gives each recorded mark the host's onDatumClick, where the renderer's shapes take clicks. */
+    /** Gives each recorded mark the host's onDatumClick and default hover elevation on SVG. */
     _wireDatums() {
+        if (this.renderer?.supportsSceneGraph !== true) return;
         const handler = this.options?.onDatumClick;
-        if (typeof handler !== 'function' || this.renderer.supportsSceneGraph !== true) return;
+        const hoverEffect = this.options?.hoverEffect !== false;
         for (const { shape, datum } of this.datums) {
             if (typeof shape?.addEventListener !== 'function') continue;
-            shape.addEventListener('click', (event) => { event.stopPropagation?.(); handler(datum, event); });
-            if (shape.style) shape.style.cursor = 'pointer';
+            if (typeof handler === 'function') {
+                shape.addEventListener('click', (event) => { event.stopPropagation?.(); handler(datum, event); });
+                if (shape.style) shape.style.cursor = 'pointer';
+            }
+            if (hoverEffect && !shape._hoverWired && shape.style) {
+                shape._hoverWired = true;
+                shape.style.transition = 'transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease, opacity 0.2s ease';
+                shape.addEventListener('mouseenter', () => {
+                    shape.style.filter = 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22)) brightness(1.06)';
+                });
+                shape.addEventListener('mouseleave', () => {
+                    shape.style.filter = '';
+                });
+            }
+        }
+    }
+
+    /**
+     * Wire a coordinated hover translation and drop-shadow across one or more SVG elements
+     * (e.g. all faces of a 3D bar or a radial wedge + its label).
+     */
+    _wireHoverTransform(elements, {
+        dx = 0,
+        dy = -5,
+        shadow = 'drop-shadow(0 5px 8px rgba(0, 0, 0, 0.22))',
+    } = {}) {
+        if (this.renderer?.supportsSceneGraph !== true) return;
+        if (this.options?.hoverEffect === false) return;
+        const validEls = (elements || []).filter(el => el && typeof el.addEventListener === 'function');
+        if (!validEls.length) return;
+
+        const tx = Number(dx).toFixed(2);
+        const ty = Number(dy).toFixed(2);
+        for (const el of validEls) {
+            el._hoverWired = true;
+            if (el.style) {
+                el.style.transition = 'transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s ease';
+                if (!el.style.cursor) el.style.cursor = 'pointer';
+            }
         }
+        const onEnter = () => {
+            for (const el of validEls) {
+                if (el.style) {
+                    el.style.transform = `translate(${tx}px, ${ty}px)`;
+                    if (shadow) el.style.filter = shadow;
+                }
+            }
+        };
+        const onLeave = () => {
+            for (const el of validEls) {
+                if (el.style) {
+                    el.style.transform = 'translate(0px, 0px)';
+                    el.style.filter = '';
+                }
+            }
+        };
+        for (const el of validEls) {
+            el.addEventListener('mouseenter', onEnter);
+            el.addEventListener('mouseleave', onLeave);
+        }
+    }
+
+    /**
+     * Wire smooth radial pull-out along `midAngle` on hover (used by Pie, Donut, 3D Pie/Donut,
+     * RadialBar, Sunburst, PolarArea, and Chord outer arcs).
+     */
+    _wireRadialHover(elements, midAngle, {
+        offset = 12,
+        ryRatio = 1,
+        shadow = 'drop-shadow(0 5px 8px rgba(0, 0, 0, 0.22))',
+    } = {}) {
+        if (!offset || offset <= 0) return;
+        const dx = Math.cos(midAngle) * offset;
+        const dy = Math.sin(midAngle) * offset * ryRatio;
+        this._wireHoverTransform(elements, { dx, dy, shadow });
     }
 
     /** Subclasses implement the actual drawing here. */
     _render() {
         throw new Error(`${this.constructor.name} must implement _render()`);
     }
-
-    /** Optional click handler; subclasses override to respond to hits. */
-    onClick(event, hitShape) {
-        // no-op by default
-    }
 }