@peter.prib/renderengine 0.14.0 → 0.15.0

package/src/charting/charts/BeeswarmChart.js

@@ -0,0 +1,164 @@
+import { Axis } from '../Axis.js';
+import { Statistics } from '../Statistics.js';
+import { GroupedDistributionChart } from './GroupedDistributionChart.js';
+
+/**
+ * BeeswarmChart — individual sample points deterministically force/circle-packed
+ * along each group's vertical slot (`Array<{label, values: number[]}>`) so every
+ * observation is visible without random jitter.
+ *
+ * When `raincloud: true` (default `true` unless disabled via `raincloud: false`),
+ * combines:
+ *   1. A right-half Gaussian KDE "cloud" silhouette,
+ *   2. A compact median + IQR mini-boxplot on the slot axis, and
+ *   3. The packed beeswarm "rain" dots on the left.
+ */
+export class BeeswarmChart extends GroupedDistributionChart {
+    static chartType = 'beeswarm';
+
+    /**
+     * Deterministic 1D circle-packing horizontal offsets for `values` mapped
+     * through `toY(v)` with dot radius `r`, bounded to `[-maxOffset, +maxOffset]`.
+     * @returns {Array<{value: number, py: number, dx: number}>}
+     */
+    static packOffsets(values, toY, r = 4, maxOffset = 28) {
+        const indexed = values.map((v, idx) => ({ value: v, py: toY(v), idx, dx: 0 }));
+        indexed.sort((a, b) => a.py - b.py);
+        const minDist = r * 2.05;
+        const minDistSq = minDist * minDist;
+        const placed = [];
+
+        for (const item of indexed) {
+            // Find candidate dx with minimal |dx| that does not collide with nearby placed dots
+            let bestDx = 0;
+            const nearby = placed.filter(p => Math.abs(p.py - item.py) < minDist);
+            if (nearby.length > 0) {
+                const step = Math.max(1.5, r * 0.65);
+                for (let mag = 0; mag <= maxOffset; mag += step) {
+                    const candidates = mag === 0 ? [0] : (placed.length % 2 === 0 ? [mag, -mag] : [-mag, mag]);
+                    let found = false;
+                    for (const cand of candidates) {
+                        const collides = nearby.some(p => {
+                            const dy = p.py - item.py;
+                            const ddx = p.dx - cand;
+                            return ddx * ddx + dy * dy < minDistSq;
+                        });
+                        if (!collides) {
+                            bestDx = cand;
+                            found = true;
+                            break;
+                        }
+                    }
+                    if (found) break;
+                    bestDx = (placed.length % 2 === 0 ? 1 : -1) * Math.min(maxOffset, mag);
+                }
+            }
+            item.dx = bestDx;
+            placed.push(item);
+        }
+        return placed;
+    }
+
+    _render() {
+        if (!Array.isArray(this.data) || !this.data.length) return;
+        this._setup();
+        this._domain = this._computeDomain();
+        this._drawBaseAxis();
+
+        // Draw Y-axis ticks for readability
+        const { x, y, width, height } = this._plotBox;
+        const { vMin, vMax, range } = this._domain;
+        const ticks = Axis.niceTicks(range, 5).map(t => vMin + t).filter(t => t <= vMax + 1e-6);
+        for (const tick of ticks) {
+            const ty = this._toY(tick);
+            this.renderer.path(`M${x},${ty} L${x + width},${ty}`, 'none', { color: '#eee', width: 1, dasharray: '3,3' });
+            this.renderer.text(Axis.formatValue(tick), x - 6, ty, {
+                textAnchor: 'end', verticalAlign: 'middle', fontSize: '10px', fill: '#666',
+            });
+        }
+
+        const slotWidth = this._slotWidth();
+        this.data.forEach((d, i) => {
+            const cx = this._plotBox.x + i * slotWidth + slotWidth / 2;
+            this._renderGlyph(cx, slotWidth, i, d);
+            this._drawXAxisLabel(cx, d.label);
+        });
+    }
+
+    _renderGlyph(cx, slotWidth, i, d) {
+        const values = Array.isArray(d.values) ? d.values : [];
+        if (!values.length) return;
+
+        const color = this._palette.colorAt(i);
+        const darkColor = this._palette.darken(color, 0.25);
+        const {
+            raincloud = true,
+            dotRadius = 4,
+        } = this.options;
+
+        const sorted = [...values].sort((a, b) => a - b);
+        const q1 = Statistics.quantile(sorted, 0.25);
+        const median = Statistics.quantile(sorted, 0.5);
+        const q3 = Statistics.quantile(sorted, 0.75);
+        const halfSlot = slotWidth * 0.42;
+
+        if (raincloud) {
+            // 1. Right-half KDE density "cloud"
+            const curve = Statistics.kernelDensityEstimate(values, { min: this._domain.vMin, max: this._domain.vMax });
+            const maxDensity = Math.max(...curve.map(p => p.density)) || 1;
+            const cloudWidth = halfSlot * 0.85;
+            const axisX = cx + 2;
+            const rightPts = curve.map(p => ({
+                px: axisX + (p.density / maxDensity) * cloudWidth,
+                py: this._toY(p.x),
+            }));
+            const cloudPath = `M${axisX},${rightPts[0].py} L`
+                + rightPts.map(p => `${p.px},${p.py}`).join(' L')
+                + ` L${axisX},${rightPts[rightPts.length - 1].py} Z`;
+            const cloudEl = this._datum(this.renderer.path(cloudPath, color, { color: darkColor, width: 1.2 }, {
+                'fill-opacity': 0.55,
+                tooltip: `${d.label}: n=${values.length}, median=${Axis.formatValue(median)} (IQR ${Axis.formatValue(q1)}–${Axis.formatValue(q3)})`,
+            }), { label: d.label, series: d.label, value: median });
+            this._wireHoverTransform([cloudEl], { dx: 2, dy: -2 });
+
+            // 2. Compact IQR mini-box + median dot at cx
+            const yQ1 = this._toY(q1);
+            const yQ3 = this._toY(q3);
+            const yMed = this._toY(median);
+            this.renderer.rect(cx - 3, Math.min(yQ1, yQ3), 6, Math.max(2, Math.abs(yQ1 - yQ3)), darkColor, null, {
+                rx: 2, ry: 2,
+            });
+            this.renderer.circle(cx, yMed, 2.5, '#ffffff', { color: darkColor, width: 1 });
+
+            // 3. Packed beeswarm "rain" dots on the left of cx
+            const maxRainSpan = Math.max(8, halfSlot * 0.75);
+            const packed = BeeswarmChart.packOffsets(values, v => this._toY(v), dotRadius, maxRainSpan * 0.5);
+            const swarmCenterX = cx - halfSlot * 0.45;
+            for (const pt of packed) {
+                const dotX = swarmCenterX + pt.dx;
+                const dotEl = this._datum(this.renderer.circle(dotX, pt.py, dotRadius, color, {
+                    color: '#ffffff', width: 1,
+                }, {
+                    tooltip: `${d.label}: ${Axis.formatValue(pt.value)}`,
+                }), { label: d.label, series: d.label, value: pt.value });
+                this._wireHoverTransform([dotEl], { dx: 0, dy: -2 });
+            }
+        } else {
+            // Pure symmetrical Beeswarm around cx + median crossbar
+            const maxSpan = Math.max(10, halfSlot * 0.85);
+            const packed = BeeswarmChart.packOffsets(values, v => this._toY(v), dotRadius, maxSpan);
+            const yMed = this._toY(median);
+            this.renderer.path(`M${cx - maxSpan * 0.7},${yMed} L${cx + maxSpan * 0.7},${yMed}`, 'none', {
+                color: darkColor, width: 2, dasharray: '4,2',
+            });
+            for (const pt of packed) {
+                const dotEl = this._datum(this.renderer.circle(cx + pt.dx, pt.py, dotRadius, color, {
+                    color: '#ffffff', width: 1,
+                }, {
+                    tooltip: `${d.label}: ${Axis.formatValue(pt.value)}`,
+                }), { label: d.label, series: d.label, value: pt.value });
+                this._wireHoverTransform([dotEl], { dx: 0, dy: -2 });
+            }
+        }
+    }
+}

package/src/charting/charts/BoxPlotChart.js

@@ -23,9 +23,31 @@ export class BoxPlotChart extends GroupedDistributionChart {
 
     _renderGlyph(cx, slotWidth, i, d) {
         const s = Statistics.boxPlotStats(d.values);
-        const boxWidth = slotWidth * 0.5;
         const boxColor = this.options.boxColor ?? this._palette.colorAt(0);
 
+        if (this._isHorizontal()) {
+            const cy = cx;
+            const slotHeight = slotWidth;
+            const boxHeight = slotHeight * 0.5;
+            const xMin = this._toX(s.min), xMax = this._toX(s.max);
+            const xQ1 = this._toX(s.q1), xQ3 = this._toX(s.q3);
+            const xMed = this._toX(s.median);
+
+            this.renderer.path(`M${xMin},${cy} L${xMax},${cy}`, 'none', { color: '#555', width: 1 });
+            this.renderer.path(`M${xMin},${cy - boxHeight / 4} L${xMin},${cy + boxHeight / 4}`, 'none', { color: '#555', width: 1 });
+            this.renderer.path(`M${xMax},${cy - boxHeight / 4} L${xMax},${cy + boxHeight / 4}`, 'none', { color: '#555', width: 1 });
+            this._datum(this.renderer.rect(Math.min(xQ1, xQ3), cy - boxHeight / 2, Math.max(1, Math.abs(xQ3 - xQ1)), boxHeight, boxColor, { color: '#333', width: 1 }, {
+                tooltip: `${d.label}: median ${Axis.formatValue(s.median)}, Q1 ${Axis.formatValue(s.q1)}, Q3 ${Axis.formatValue(s.q3)}`,
+            }), { label: d.label, series: d.label });
+            this.renderer.path(`M${xMed},${cy - boxHeight / 2} L${xMed},${cy + boxHeight / 2}`, 'none', { color: '#fff', width: 2 });
+            s.outliers.forEach(v => {
+                this.renderer.circle(this._toX(v), cy, 3, 'none', { color: boxColor, width: 1.5 }, { tooltip: `${d.label} outlier: ${Axis.formatValue(v)}` });
+            });
+            return;
+        }
+
+        const boxWidth = slotWidth * 0.5;
+
         this.renderer.path(`M${cx},${this._toY(s.min)} L${cx},${this._toY(s.max)}`, 'none', { color: '#555', width: 1 });
         this.renderer.path(`M${cx - boxWidth / 4},${this._toY(s.min)} L${cx + boxWidth / 4},${this._toY(s.min)}`, 'none', { color: '#555', width: 1 });
         this.renderer.path(`M${cx - boxWidth / 4},${this._toY(s.max)} L${cx + boxWidth / 4},${this._toY(s.max)}`, 'none', { color: '#555', width: 1 });

package/src/charting/charts/CalendarHeatmapChart.js

@@ -72,6 +72,7 @@ export class CalendarHeatmapChart extends Chart {
             cellSize,
             cellGap = 2,
             showValues = false,
+            midValue,
             title,
             monthLabels = true,
             weekdayLabels = true,
@@ -179,7 +180,7 @@ export class CalendarHeatmapChart extends Chart {
             const cx = gridX + week * step;
             const cy = gridY + day * step;
             const color = hasValue
-                ? ColorPalette.scaleColor(colorScale, vMin, vMax, value)
+                ? ColorPalette.scaleColor(colorScale, vMin, vMax, value, midValue)
                 : emptyColor;
 
             this.renderer.rect(cx, cy, size, size, color, null, {

package/src/charting/charts/CandlestickChart.js

@@ -5,32 +5,140 @@ import { ChartBox, ChartLabels } from '../ChartBox.js';
 /**
  * CandlestickChart — OHLC financial chart. Each entry draws a vertical wick
  * from low to high and a rectangular body from open to close.
+ *
+ * Supported options:
+ *   - volume: boolean (shows volume sub-pane if data has .volume, or if volume: true)
+ *   - sma: number | number[] | Array<{period: number, color?: string}>
+ *   - ema: number | number[] | Array<{period: number, color?: string}>
+ *   - bollinger: boolean | { period?: number, stdDev?: number, color?: string, bandColor?: string }
  */
 export class CandlestickChart extends Chart {
     static chartType = 'candlestick';
 
+    static computeSMA(data, period) {
+        const result = new Array(data.length).fill(null);
+        let sum = 0;
+        for (let i = 0; i < data.length; i++) {
+            sum += data[i].close;
+            if (i >= period) {
+                sum -= data[i - period].close;
+            }
+            if (i >= period - 1) {
+                result[i] = sum / period;
+            }
+        }
+        return result;
+    }
+
+    static computeEMA(data, period) {
+        const result = new Array(data.length).fill(null);
+        if (data.length < period) return result;
+        const k = 2 / (period + 1);
+        let sum = 0;
+        for (let i = 0; i < period; i++) sum += data[i].close;
+        let prevEma = sum / period;
+        result[period - 1] = prevEma;
+        for (let i = period; i < data.length; i++) {
+            prevEma = data[i].close * k + prevEma * (1 - k);
+            result[i] = prevEma;
+        }
+        return result;
+    }
+
+    static computeBollinger(data, period = 20, stdDev = 2) {
+        const sma = CandlestickChart.computeSMA(data, period);
+        const upper = new Array(data.length).fill(null);
+        const lower = new Array(data.length).fill(null);
+        for (let i = period - 1; i < data.length; i++) {
+            const mean = sma[i];
+            let sqDiffSum = 0;
+            for (let j = i - period + 1; j <= i; j++) {
+                sqDiffSum += Math.pow(data[j].close - mean, 2);
+            }
+            const sd = Math.sqrt(sqDiffSum / period);
+            upper[i] = mean + stdDev * sd;
+            lower[i] = mean - stdDev * sd;
+        }
+        return { middle: sma, upper, lower };
+    }
+
     _render() {
         const data = this.data;
-        const options = this.options;
+        const options = this.options || {};
         const box = ChartBox.fromRenderer(this.renderer);
         const {
             x = box.x, y = box.y, width = box.width, height = box.height,
             upColor = '#26a69a', downColor = '#ef5350', title, xAxisLabel, yAxisLabel,
             markers = [],
+            volume = (data.some(d => d.volume != null) && options.volume !== false),
+            sma, ema, bollinger,
         } = options;
 
+        if (!data || !data.length) return;
+
+        const hasVolume = Boolean(volume && data.some(d => d.volume != null));
+        const priceHeight = hasVolume ? height * 0.72 : height;
+        const volGap = hasVolume ? height * 0.06 : 0;
+        const volHeight = hasVolume ? height - priceHeight - volGap : 0;
+        const volY = y + priceHeight + volGap;
+
         const vMax = Math.max(...data.map(d => d.high));
         const vMin = Math.min(...data.map(d => d.low));
         const range = (vMax - vMin) || 1;
         const slotWidth = width / data.length;
         const labelStep = Axis.categoryLabelStep(data.map(d => d.label), width, { fontSize: 10 });
         const bodyWidth = slotWidth * 0.6;
-        const toY = (v) => y + height - ((v - vMin) / range) * height;
+        const toY = (v) => y + priceHeight - ((v - vMin) / range) * priceHeight;
         const textAnchor = this.renderer.centerTextAnchor;
 
         new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, { x, y, width, height });
-        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
 
+        // Axes boundaries
+        this.renderer.path(`M${x},${y} L${x},${y + priceHeight} L${x + width},${y + priceHeight}`, 'none', { color: 'black', width: 1 });
+
+        // 1. Technical indicator: Bollinger Bands background
+        if (bollinger) {
+            const bOpts = typeof bollinger === 'object' ? bollinger : {};
+            const { period = 20, stdDev = 2, bandColor = 'rgba(33, 150, 243, 0.12)', strokeColor = '#2196f3' } = bOpts;
+            const bb = CandlestickChart.computeBollinger(data, period, stdDev);
+
+            let bandPath = '';
+            const validIndices = [];
+            for (let i = 0; i < data.length; i++) {
+                if (bb.upper[i] != null && bb.lower[i] != null) validIndices.push(i);
+            }
+
+            if (validIndices.length > 1) {
+                // Top curve
+                validIndices.forEach((idx, i) => {
+                    const cx = x + idx * slotWidth + slotWidth / 2;
+                    const cy = toY(bb.upper[idx]);
+                    bandPath += (i === 0 ? `M${cx},${cy} ` : `L${cx},${cy} `);
+                });
+                // Bottom curve back
+                for (let i = validIndices.length - 1; i >= 0; i--) {
+                    const idx = validIndices[i];
+                    const cx = x + idx * slotWidth + slotWidth / 2;
+                    const cy = toY(bb.lower[idx]);
+                    bandPath += `L${cx},${cy} `;
+                }
+                bandPath += 'Z';
+                this.renderer.path(bandPath, bandColor, { color: 'none' });
+
+                // Bollinger middle line
+                let midPoints = [];
+                validIndices.forEach(idx => {
+                    const cx = x + idx * slotWidth + slotWidth / 2;
+                    midPoints.push([cx, toY(bb.middle[idx])]);
+                });
+                if (midPoints.length > 1) {
+                    const lineData = midPoints.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]},${p[1]}`).join(' ');
+                    this.renderer.path(lineData, 'none', { color: strokeColor, width: 1, strokeDasharray: '3 3' });
+                }
+            }
+        }
+
+        // 2. Candlestick wicks & bodies
         data.forEach((d, i) => {
             const cx = x + i * slotWidth + slotWidth / 2;
             const isUp = d.close >= d.open;
@@ -39,13 +147,73 @@ export class CandlestickChart extends Chart {
             const bodyTop = toY(Math.max(d.open, d.close));
             const bodyBottom = toY(Math.min(d.open, d.close));
             this.renderer.rect(cx - bodyWidth / 2, bodyTop, bodyWidth, Math.max(1, bodyBottom - bodyTop), color, null, {
-                tooltip: `${d.label}: O ${d.open} H ${d.high} L ${d.low} C ${d.close}`,
+                tooltip: `${d.label}: O ${d.open} H ${d.high} L ${d.low} C ${d.close}${d.volume ? ` Vol ${d.volume}` : ''}`,
             });
             if (i % labelStep === 0) {
                 this.renderer.text(d.label, cx, y + height + 20, { textAnchor, fontSize: '10px' });
             }
         });
 
+        // 3. Technical indicators: SMA & EMA overlays
+        const drawIndicatorLine = (values, lineColor) => {
+            let path = '';
+            let started = false;
+            values.forEach((v, idx) => {
+                if (v == null) return;
+                const cx = x + idx * slotWidth + slotWidth / 2;
+                const cy = toY(v);
+                path += (!started ? `M${cx},${cy} ` : `L${cx},${cy} `);
+                started = true;
+            });
+            if (path) this.renderer.path(path.trim(), 'none', { color: lineColor, width: 1.5 });
+        };
+
+        if (sma) {
+            const smaList = Array.isArray(sma) ? sma : [sma];
+            const smaColors = ['#e67e22', '#9b59b6', '#3498db'];
+            smaList.forEach((spec, sIdx) => {
+                const period = typeof spec === 'object' ? spec.period : spec;
+                const color = (typeof spec === 'object' && spec.color) ? spec.color : smaColors[sIdx % smaColors.length];
+                const vals = CandlestickChart.computeSMA(data, period);
+                drawIndicatorLine(vals, color);
+            });
+        }
+
+        if (ema) {
+            const emaList = Array.isArray(ema) ? ema : [ema];
+            const emaColors = ['#1abc9c', '#f1c40f', '#e91e63'];
+            emaList.forEach((spec, eIdx) => {
+                const period = typeof spec === 'object' ? spec.period : spec;
+                const color = (typeof spec === 'object' && spec.color) ? spec.color : emaColors[eIdx % emaColors.length];
+                const vals = CandlestickChart.computeEMA(data, period);
+                drawIndicatorLine(vals, color);
+            });
+        }
+
+        // 4. Volume sub-pane
+        if (hasVolume) {
+            this.renderer.path(`M${x},${volY} L${x},${volY + volHeight} L${x + width},${volY + volHeight}`, 'none', { color: '#aaa', width: 1 });
+            const maxVol = Math.max(...data.map(d => d.volume || 0)) || 1;
+
+            data.forEach((d, i) => {
+                if (!d.volume) return;
+                const cx = x + i * slotWidth + slotWidth / 2;
+                const barH = (d.volume / maxVol) * volHeight;
+                const barTop = volY + volHeight - barH;
+                const isUp = d.close >= d.open;
+                const barColor = isUp ? upColor : downColor;
+                this.renderer.rect(cx - bodyWidth / 2, barTop, bodyWidth, Math.max(1, barH), barColor, null, {
+                    opacity: 0.7,
+                    tooltip: `${d.label} Volume: ${Axis.formatValue(d.volume)}`,
+                });
+            });
+
+            // Volume axis label
+            this.renderer.text('Vol', x - 6, volY + 10, { textAnchor: 'end', fontSize: '9px', fill: '#666' });
+            this.renderer.text(Axis.formatValue(maxVol), x - 6, volY + volHeight, { textAnchor: 'end', fontSize: '9px', fill: '#888' });
+        }
+
+        // 5. Markers
         markers.forEach((m) => {
             const idx = data.findIndex(d => d.label === m.label);
             if (idx < 0) return;

package/src/charting/charts/ChordDiagram.js

@@ -80,6 +80,7 @@ export class ChordDiagram extends Chart {
         // Draw chords first so they sit under the node rim.
         const maxLink = Math.max(...links.map(l => l.value));
         const maxStroke = radius * 0.08;
+        const chordRecords = [];
         links.forEach(l => {
             const s = nodeMap.get(l.source);
             const t = nodeMap.get(l.target);
@@ -92,17 +93,20 @@ export class ChordDiagram extends Chart {
             const c2x = cx + (innerRadius * 0.2) * Math.cos(t.mid);
             const c2y = cy + (innerRadius * 0.2) * Math.sin(t.mid);
             const width = Math.max(1, (l.value / maxLink) * maxStroke);
-            this._datum(this.renderer.path(`M${sx},${sy} C${c1x},${c1y} ${c2x},${c2y} ${tx},${ty}`, 'none', {
+            const el = this._datum(this.renderer.path(`M${sx},${sy} C${c1x},${c1y} ${c2x},${c2y} ${tx},${ty}`, 'none', {
                 color: s.color, width,
             }, {
                 tooltip: `${s.label} ↔ ${t.label}: ${l.value}`,
             }), { label: s.label, series: t.label });
+            if (el?.style) el.style.opacity = '0.72';
+            chordRecords.push({ el, source: s, target: t });
         });
 
         // Draw node arcs.
+        const arcRecords = [];
         nodes.forEach(n => {
             const path = this._arcPath(cx, cy, radius, innerRadius, n.start, n.end);
-            this._datum(this.renderer.path(path, n.color, { color: '#fff', width: 1 }, {
+            const arcEl = this._datum(this.renderer.path(path, n.color, { color: '#fff', width: 1 }, {
                 tooltip: `${n.label}: ${n.value}`,
             }), { label: n.label });
 
@@ -115,7 +119,106 @@ export class ChordDiagram extends Chart {
                 textAnchor: 'middle', fontSize: '10px', fill: '#333',
                 transform: `rotate(${rotate - 90},${lx},${ly})`,
             });
+            arcRecords.push({ el: arcEl, node: n });
         });
+
+        this._wireChordHover(arcRecords, chordRecords, { cx, cy });
+    }
+
+    _wireChordHover(arcRecords, chordRecords, center = {}) {
+        const { cx = 0, cy = 0 } = center;
+        if (this.renderer?.supportsSceneGraph !== true || this.options?.hoverEffect === false) return;
+        const resetAll = () => {
+            for (const c of chordRecords) {
+                if (c.el?.style) {
+                    c.el.style.opacity = '0.72';
+                    c.el.style.filter = '';
+                }
+            }
+            for (const a of arcRecords) {
+                if (a.el?.style) {
+                    a.el.style.opacity = '1';
+                    a.el.style.transform = 'translate(0px, 0px)';
+                    a.el.style.filter = '';
+                }
+            }
+        };
+
+        for (const aRec of arcRecords) {
+            if (typeof aRec.el?.addEventListener !== 'function') continue;
+            aRec.el._hoverWired = true;
+            const dx = (Math.cos(aRec.node.mid) * 8).toFixed(2);
+            const dy = (Math.sin(aRec.node.mid) * 8).toFixed(2);
+            if (aRec.el.style) {
+                aRec.el.style.transition = 'transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, filter 0.2s ease';
+                aRec.el.style.cursor = 'pointer';
+            }
+
+            if (this.options?.draggable !== false) {
+                aRec.el.addEventListener('pointerdown', (e) => {
+                    if (e.button !== 0) return;
+                    e.preventDefault();
+                    const onMove = (me) => {
+                        const rect = this.renderer.container?.getBoundingClientRect?.() || { left: 0, top: 0 };
+                        const mx = me.clientX - rect.left;
+                        const my = me.clientY - rect.top;
+                        const angle = Math.atan2(my - cy, mx - cx);
+                        this.options?.onNodeDrag?.(aRec.node.id, angle);
+                    };
+                    const onUp = () => {
+                        window.removeEventListener('pointermove', onMove);
+                        window.removeEventListener('pointerup', onUp);
+                    };
+                    window.addEventListener('pointermove', onMove);
+                    window.addEventListener('pointerup', onUp);
+                });
+            }
+            aRec.el.addEventListener('mouseenter', () => {
+                const connected = new Set([aRec.node]);
+                for (const c of chordRecords) {
+                    const hit = c.source === aRec.node || c.target === aRec.node;
+                    if (hit) {
+                        connected.add(c.source);
+                        connected.add(c.target);
+                    }
+                    if (c.el?.style) {
+                        c.el.style.opacity = hit ? '0.96' : '0.12';
+                        c.el.style.filter = hit ? 'drop-shadow(0 2px 5px rgba(0,0,0,0.22))' : '';
+                    }
+                }
+                for (const other of arcRecords) {
+                    if (!other.el?.style) continue;
+                    other.el.style.opacity = connected.has(other.node) ? '1' : '0.4';
+                }
+                if (aRec.el.style) {
+                    aRec.el.style.transform = `translate(${dx}px, ${dy}px)`;
+                    aRec.el.style.filter = 'drop-shadow(0 4px 7px rgba(0,0,0,0.24))';
+                }
+            });
+            aRec.el.addEventListener('mouseleave', resetAll);
+        }
+
+        for (const cRec of chordRecords) {
+            if (typeof cRec.el?.addEventListener !== 'function') continue;
+            cRec.el._hoverWired = true;
+            if (cRec.el.style) {
+                cRec.el.style.transition = 'opacity 0.2s ease, filter 0.2s ease';
+                cRec.el.style.cursor = 'pointer';
+            }
+            cRec.el.addEventListener('mouseenter', () => {
+                for (const other of chordRecords) {
+                    if (!other.el?.style) continue;
+                    other.el.style.opacity = other === cRec ? '0.98' : '0.12';
+                    other.el.style.filter = other === cRec ? 'drop-shadow(0 2px 6px rgba(0,0,0,0.25))' : '';
+                }
+                for (const aRec of arcRecords) {
+                    if (!aRec.el?.style) continue;
+                    const hit = aRec.node === cRec.source || aRec.node === cRec.target;
+                    aRec.el.style.opacity = hit ? '1' : '0.4';
+                }
+            });
+            cRec.el.addEventListener('mouseleave', resetAll);
+        }
     }
 
     _arcPath(cx, cy, rOuter, rInner, a0, a1) {

package/src/charting/charts/CirclePackChart.js

@@ -0,0 +1,81 @@
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Hierarchy } from '../Hierarchy.js';
+import { HierarchyChart } from './HierarchyChart.js';
+
+/**
+ * CirclePackChart — nested tangent circles sized by value (`HierarchyChart`
+ * subclass over `Array<{label, value?, children?}>`).
+ *
+ * Branch circles render with a translucent tinted fill and crisp rim so child
+ * circles nested inside read clearly as a hierarchy, and hovering any circle
+ * elevates it with a drop shadow.
+ */
+export class CirclePackChart extends HierarchyChart {
+    static chartType = 'circlePack';
+
+    _render() {
+        const data = this.data;
+        if (!Array.isArray(data) || !data.length) return;
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            title, padding = 4, showValues = false,
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title }).draw(this.renderer, plotBox);
+
+        const cx = x + width / 2;
+        const cy = y + height / 2;
+        const radius = Math.max(10, Math.min(width, height) / 2 - 4);
+        const layout = Hierarchy.circlePackLayout(data, cx, cy, radius, 0, null, padding);
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        layout.forEach(entry => {
+            const { node, cx: nx, cy: ny, r, depth, isLeaf, topAncestor } = entry;
+            const color = this._colorForNode(topAncestor, depth);
+            const textColor = this._textColorForNode(topAncestor, depth);
+            const valStr = this._formatNodeValue(node);
+            const tooltip = `${node.label}: ${valStr}`;
+
+            if (isLeaf) {
+                const circle = this._datum(this.renderer.circle(nx, ny, r, color, { color: '#ffffff', width: 1.5 }, {
+                    tooltip,
+                }), { label: node.label, value: entry.value });
+                this._wireHoverTransform([circle], { dx: 0, dy: -2.5 });
+
+                if (r >= 16) {
+                    const labelText = node.label.length > Math.floor(r / 3.2)
+                        ? node.label.slice(0, Math.max(3, Math.floor(r / 3.2))) + '…'
+                        : node.label;
+                    this.renderer.text(labelText, nx, ny - (showValues && r >= 24 ? 5 : 0), {
+                        textAnchor, verticalAlign: 'middle',
+                        fontSize: r >= 28 ? '11px' : '9px', fontWeight: '600',
+                        fill: textColor, 'pointer-events': 'none',
+                    });
+                    if (showValues && r >= 24) {
+                        this.renderer.text(valStr, nx, ny + 8, {
+                            textAnchor, verticalAlign: 'middle',
+                            fontSize: '9px', fill: textColor, opacity: 0.85, 'pointer-events': 'none',
+                        });
+                    }
+                }
+            } else {
+                const branchFill = this._palette().lighten(color, 0.32);
+                const circle = this._datum(this.renderer.circle(nx, ny, r, branchFill, { color, width: 1.8 }, {
+                    tooltip, 'fill-opacity': 0.38,
+                }), { label: node.label, value: entry.value });
+                this._wireHoverTransform([circle], { dx: 0, dy: -1.5 });
+
+                if (r >= 26) {
+                    this.renderer.text(node.label, nx, ny - r + 11, {
+                        textAnchor, verticalAlign: 'middle',
+                        fontSize: '10px', fontWeight: 'bold',
+                        fill: '#333', 'pointer-events': 'none',
+                    });
+                }
+            }
+        });
+    }
+}