@peter.prib/renderengine 0.14.0 → 0.15.0

package/src/charting/charts/GroupedDistributionChart.js

@@ -10,11 +10,16 @@ import { ColorPalette } from '../ColorPalette.js';
  * x-axis label drawing. Subclasses implement `_renderGlyph(cx, slotWidth, i, d)`.
  */
 export class GroupedDistributionChart extends Chart {
+    _isHorizontal() {
+        return this.options.orientation === 'horizontal';
+    }
+
     _setup() {
         const box = ChartBox.fromRenderer(this.renderer);
         const options = this.options;
+        const leftExtra = this._isHorizontal() && options.x == null ? 40 : 0;
         const {
-            x = box.x, y = box.y, width = box.width, height = box.height,
+            x = box.x + leftExtra, y = box.y, width = box.width - leftExtra, height = box.height,
             colors, title, xAxisLabel, yAxisLabel,
         } = options;
         this._plotBox = { x, y, width, height };
@@ -36,10 +41,19 @@ export class GroupedDistributionChart extends Chart {
         return y + height - ((v - this._domain.vMin) / this._domain.range) * height;
     }
 
+    _toX(v) {
+        const { x, width } = this._plotBox;
+        return x + ((v - this._domain.vMin) / this._domain.range) * width;
+    }
+
     _slotWidth() {
         return this._plotBox.width / this.data.length;
     }
 
+    _slotHeight() {
+        return this._plotBox.height / this.data.length;
+    }
+
     _drawBaseAxis() {
         const { x, y, width, height } = this._plotBox;
         this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
@@ -54,6 +68,17 @@ export class GroupedDistributionChart extends Chart {
         this._setup();
         this._domain = this._computeDomain();
         this._drawBaseAxis();
+        if (this._isHorizontal()) {
+            const slotHeight = this._slotHeight();
+            this.data.forEach((d, i) => {
+                const cy = this._plotBox.y + i * slotHeight + slotHeight / 2;
+                this._renderGlyph(cy, slotHeight, i, d);
+                this.renderer.text(d.label, this._plotBox.x - 8, cy, {
+                    textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#333',
+                });
+            });
+            return;
+        }
         const slotWidth = this._slotWidth();
         const data = this.data;
         data.forEach((d, i) => {

package/src/charting/charts/HeatmapChart.js

@@ -17,7 +17,7 @@ export class HeatmapChart extends Chart {
         const {
             x = box.x, y = box.y, width = box.width, height = box.height,
             xLabels, yLabels, colorScale = ['#f7fbff', '#4292c6', '#08306b'],
-            showValues = false, title,
+            showValues = false, midValue, title,
         } = options;
 
         // Grid cost is xCats.length * yCats.length, NOT data.length — a row
@@ -51,7 +51,7 @@ export class HeatmapChart extends Chart {
                 const v = cellByKey.get(`${xc}|${yc}`);
                 const cellX = x + xi * cellW;
                 const cellY = y + yi * cellH;
-                const color = v == null ? '#eee' : ColorPalette.scaleColor(colorScale, vMin, vMax, v);
+                const color = v == null ? '#eee' : ColorPalette.scaleColor(colorScale, vMin, vMax, v, midValue);
                 const cellRect = this.renderer.rect(cellX, cellY, Math.max(1, cellW - 1), Math.max(1, cellH - 1), color, null, {
                     tooltip: `${xc} / ${yc}: ${v ?? 'n/a'}`,
                 });

package/src/charting/charts/HexbinChart.js

@@ -0,0 +1,137 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * HexbinChart — 2D hexagonal binning and density plot for dense (x, y) point clouds.
+ *
+ * Partitions the continuous 2D space into regular hexagon cells and shades each
+ * hexagon by observation count (or aggregated value), eliminating overplotting.
+ */
+export class HexbinChart extends Chart {
+    static chartType = 'hexbin';
+
+    /**
+     * Compute regular hexagon vertices centered at (cx, cy) with radius r (pointy-topped).
+     */
+    static hexagonPath(cx, cy, r) {
+        const pts = [];
+        for (let i = 0; i < 6; i++) {
+            const angle = (Math.PI / 3) * i - Math.PI / 6;
+            const px = cx + r * Math.cos(angle);
+            const py = cy + r * Math.sin(angle);
+            pts.push(`${px.toFixed(2)},${py.toFixed(2)}`);
+        }
+        return 'M' + pts.join(' L') + ' Z';
+    }
+
+    /**
+     * Bin 2D points into pointy-topped hexagons of radius r in screen coordinates.
+     * @returns {Map<string, {cx: number, cy: number, count: number, points: Array}>}
+     */
+    static binPoints(points, r) {
+        const dx = r * Math.sqrt(3);
+        const dy = r * 1.5;
+        const bins = new Map();
+
+        for (const pt of points) {
+            const px = pt.px;
+            const py = pt.py;
+            // Pointy-top hex grid coordinate estimation
+            const q = (Math.sqrt(3) / 3 * px - 1 / 3 * py) / r;
+            const s = (2 / 3 * py) / r;
+            // Cube round
+            let rx = Math.round(q);
+            let rz = Math.round(s);
+            let ry = Math.round(-q - s);
+            const xDiff = Math.abs(rx - q);
+            const yDiff = Math.abs(ry - (-q - s));
+            const zDiff = Math.abs(rz - s);
+            if (xDiff > yDiff && xDiff > zDiff) {
+                rx = -ry - rz;
+            } else if (yDiff > zDiff) {
+                ry = -rx - rz;
+            } else {
+                rz = -rx - ry;
+            }
+
+            // Hex center from cube coordinates
+            const cx = r * (Math.sqrt(3) * rx + Math.sqrt(3) / 2 * rz);
+            const cy = r * (3 / 2 * rz);
+            const key = `${rx},${rz}`;
+            let b = bins.get(key);
+            if (!b) {
+                b = { cx, cy, count: 0, sum: 0, points: [] };
+                bins.set(key, b);
+            }
+            b.count += 1;
+            b.sum += Number(pt.value ?? 1) || 1;
+            b.points.push(pt);
+        }
+        return bins;
+    }
+
+    _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, xAxisLabel, yAxisLabel,
+            radius = 14,
+            minCount = 1,
+            colorScale = ['#e0f3f8', '#67a9cf', '#02818a', '#bd0026'],
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+
+        const pts = data.map((d, i) => {
+            const rawX = Array.isArray(d) ? d[0] : (d.x ?? i);
+            const rawY = Array.isArray(d) ? d[1] : (d.y ?? d.value ?? 0);
+            return { rawX: Number(rawX) || 0, rawY: Number(rawY) || 0, label: d.label, value: d.value };
+        });
+
+        const xMin = Math.min(...pts.map(p => p.rawX));
+        const xMax = Math.max(...pts.map(p => p.rawX));
+        const yMin = Math.min(...pts.map(p => p.rawY));
+        const yMax = Math.max(...pts.map(p => p.rawY));
+        const xRange = (xMax - xMin) || 1;
+        const yRange = (yMax - yMin) || 1;
+
+        // Draw axes
+        new Axis().drawYRange(this.renderer, plotBox, yMin, yMax);
+        new Axis().drawXRange(this.renderer, plotBox, xMin, xMax);
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        const mapped = pts.map(p => ({
+            ...p,
+            px: x + ((p.rawX - xMin) / xRange) * width,
+            py: y + height - ((p.rawY - yMin) / yRange) * height,
+        }));
+
+        const bins = HexbinChart.binPoints(mapped, radius);
+        const binList = Array.from(bins.values()).filter(b => b.count >= minCount);
+        if (!binList.length) return;
+
+        const maxCount = Math.max(...binList.map(b => b.count));
+        const palette = new ColorPalette();
+
+        binList.forEach(b => {
+            // Clip to plot box bounds with a small margin
+            if (b.cx < x - radius || b.cx > x + width + radius || b.cy < y - radius || b.cy > y + height + radius) return;
+            const t = b.count / maxCount;
+            const color = ColorPalette.scaleColor(colorScale, 0, maxCount, b.count);
+            const hexD = HexbinChart.hexagonPath(b.cx, b.cy, radius * 0.96);
+            const tooltip = `Count: ${b.count} points (peak: ${maxCount})`;
+
+            const hexEl = this._datum(this.renderer.path(hexD, color, { color: '#ffffff', width: 0.8 }, {
+                tooltip,
+            }), { count: b.count, value: b.count });
+            this._wireHoverTransform([hexEl], { dx: 0, dy: -2 });
+        });
+    }
+}

package/src/charting/charts/HierarchyChart.js

@@ -7,9 +7,82 @@ import { Hierarchy } from '../Hierarchy.js';
  * HierarchyChart — abstract base for charts that render a hierarchy of nodes.
  *
  * Owns top-level palette assignment, per-depth color lightening, text-color
- * contrast, and value formatting so subclasses stay focused on layout/rendering.
+ * contrast, value formatting, and interactive drill-down / breadcrumbs.
  */
 export class HierarchyChart extends Chart {
+    constructor(renderer, data, options = {}) {
+        super(renderer, data, options);
+        this._drillStack = [];
+    }
+
+    _activeData() {
+        if (this._drillStack.length > 0) {
+            const currentRoot = this._drillStack[this._drillStack.length - 1];
+            return currentRoot.children || [currentRoot];
+        }
+        return this.data;
+    }
+
+    drillTo(node) {
+        if (!node || !node.children?.length) return;
+        this._drillStack.push(node);
+        this._topLevelColorMap = null;
+        this.render();
+    }
+
+    drillUp() {
+        if (!this._drillStack.length) return;
+        this._drillStack.pop();
+        this._topLevelColorMap = null;
+        this.render();
+    }
+
+    drillToCrumb(index) {
+        if (index < 0) {
+            this._drillStack = [];
+        } else {
+            this._drillStack = this._drillStack.slice(0, index + 1);
+        }
+        this._topLevelColorMap = null;
+        this.render();
+    }
+
+    _drawBreadcrumbs(renderer, { x, y, width }) {
+        if (this._drillStack.length === 0) return 0;
+        const crumbH = 24;
+        const crumbs = [{ label: 'Root', index: -1 }, ...this._drillStack.map((n, i) => ({ label: n.label, index: i }))];
+
+        let curX = x;
+        crumbs.forEach((c, i) => {
+            if (i > 0) {
+                renderer.text('/', curX + 4, y + crumbH / 2, {
+                    verticalAlign: 'middle', fontSize: '11px', fill: '#999',
+                });
+                curX += 14;
+            }
+            const isLast = i === crumbs.length - 1;
+            const textW = c.label.length * 6 + 10;
+            const bgRect = renderer.rect(curX, y + 2, textW, crumbH - 4, isLast ? '#e0f2fe' : '#f1f5f9', { color: isLast ? '#0284c7' : '#cbd5e1', width: 1 }, {
+                cursor: isLast ? 'default' : 'pointer',
+                rx: 3, ry: 3,
+            });
+            renderer.text(c.label, curX + textW / 2, y + crumbH / 2, {
+                textAnchor: 'middle', verticalAlign: 'middle', fontSize: '10px',
+                fill: isLast ? '#0369a1' : '#334155', fontWeight: isLast ? 'bold' : 'normal',
+                'pointer-events': 'none',
+            });
+            if (!isLast && typeof bgRect?.addEventListener === 'function') {
+                bgRect.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.drillToCrumb(c.index);
+                });
+            }
+            curX += textW + 4;
+        });
+
+        return crumbH + 6;
+    }
+
     _palette() {
         if (!this._paletteInstance) {
             this._paletteInstance = new ColorPalette(this.options.colors);
@@ -19,7 +92,8 @@ export class HierarchyChart extends Chart {
 
     _topLevelColor() {
         if (!this._topLevelColorMap) {
-            this._topLevelColorMap = new Map(this.data.map((n, i) => [n, this._palette().colorAt(i)]));
+            const active = this._activeData();
+            this._topLevelColorMap = new Map(active.map((n, i) => [n, this._palette().colorAt(i)]));
         }
         return this._topLevelColorMap;
     }
@@ -30,7 +104,7 @@ export class HierarchyChart extends Chart {
     }
 
     _textColorForNode(topAncestor, depth) {
-        return this._palette().isDark(this._colorForNode(topAncestor, depth)) ? '#fff' : '#222';
+        return ColorPalette.isDark(this._colorForNode(topAncestor, depth)) ? '#fff' : '#222';
     }
 
     _formatNodeValue(node) {

package/src/charting/charts/HorizonChart.js

@@ -0,0 +1,105 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * HorizonChart — 2-band to 4-band layered area chart folding positive and
+ * negative magnitude bands into compact horizontal strips.
+ *
+ * Allows comparing many time series in a single viewport by folding higher
+ * amplitude values onto lower layers with progressive color intensity.
+ */
+export class HorizonChart extends Chart {
+    static chartType = 'horizon';
+
+    _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, bands = 3,
+            posColors = ['#bdd7e7', '#6baed6', '#2171b5'],
+            negColors = ['#fcae91', '#fb6a4a', '#cb181d'],
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title }).draw(this.renderer, plotBox);
+
+        // Normalize data into series: Array<{label: string, values: number[]}>
+        const series = data.map((d, i) => {
+            const label = d.label ?? d.name ?? `Series ${i + 1}`;
+            const values = Array.isArray(d.values)
+                ? d.values.map(v => typeof v === 'object' && v !== null ? v.value : Number(v) || 0)
+                : (Array.isArray(d) ? d : [Number(d.value) || 0]);
+            return { label, values };
+        });
+
+        const numSeries = series.length;
+        const rowHeight = height / numSeries;
+        const leftLabelW = 90;
+        const stripX = x + leftLabelW;
+        const stripW = width - leftLabelW;
+
+        // Global max absolute amplitude across all series to anchor band step
+        const allVals = series.flatMap(s => s.values);
+        const maxAbs = Math.max(...allVals.map(Math.abs), 1);
+        const bandStep = maxAbs / bands;
+
+        series.forEach((s, sIdx) => {
+            const rowY = y + sIdx * rowHeight;
+            const values = s.values;
+            const N = values.length;
+            if (N < 2) return;
+            const stepX = stripW / (N - 1);
+
+            // Strip background & baseline
+            this.renderer.rect(stripX, rowY, stripW, rowHeight, 'rgba(0,0,0,0.015)', { color: '#e8e8e8', width: 0.8 });
+            this.renderer.text(s.label, stripX - 8, rowY + rowHeight / 2, {
+                textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fontWeight: '600', fill: '#333',
+            });
+
+            // Draw positive and negative bands
+            for (let b = 0; b < bands; b++) {
+                const bFloor = b * bandStep;
+                const bCeil = (b + 1) * bandStep;
+                const posColor = posColors[b % posColors.length];
+                const negColor = negColors[b % negColors.length];
+
+                // Positive band path
+                const posPts = values.map((v, i) => {
+                    const clamped = Math.max(0, Math.min(bandStep, v - bFloor));
+                    const py = rowY + rowHeight - (clamped / bandStep) * rowHeight;
+                    return { px: stripX + i * stepX, py };
+                });
+                const posD = `M${stripX},${rowY + rowHeight} L`
+                    + posPts.map(p => `${p.px.toFixed(1)},${p.py.toFixed(1)}`).join(' L')
+                    + ` L${stripX + stripW},${rowY + rowHeight} Z`;
+
+                this.renderer.path(posD, posColor, null, {
+                    'fill-opacity': 0.85,
+                    tooltip: `${s.label} +Band ${b + 1}: max ${Axis.formatValue(bCeil)}`,
+                });
+
+                // Negative band path (reflected upward)
+                const negPts = values.map((v, i) => {
+                    const negVal = Math.max(0, -v);
+                    const clamped = Math.max(0, Math.min(bandStep, negVal - bFloor));
+                    const py = rowY + rowHeight - (clamped / bandStep) * rowHeight;
+                    return { px: stripX + i * stepX, py };
+                });
+                const negD = `M${stripX},${rowY + rowHeight} L`
+                    + negPts.map(p => `${p.px.toFixed(1)},${p.py.toFixed(1)}`).join(' L')
+                    + ` L${stripX + stripW},${rowY + rowHeight} Z`;
+
+                this.renderer.path(negD, negColor, null, {
+                    'fill-opacity': 0.85,
+                    tooltip: `${s.label} -Band ${b + 1}: -${Axis.formatValue(bCeil)}`,
+                });
+            }
+        });
+    }
+}

package/src/charting/charts/KagiChart.js

@@ -0,0 +1,167 @@
+import { Axis } from '../Axis.js';
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+
+/**
+ * KagiChart — Japanese price-action chart independent of time.
+ *
+ * Tracks price movements with vertical lines connected by short horizontal inflection steps.
+ * Switches between Yang (thick, bullish) and Yin (thin, bearish) lines when breaking
+ * previous peaks or troughs.
+ */
+export class KagiChart extends Chart {
+    static chartType = 'kagi';
+
+    /**
+     * Compute Kagi line segments and inflection points from prices.
+     * @param {Array<number|object>} data - Price sequence
+     * @param {number|string} [reversal=0.04] - Reversal amount or percentage (e.g. 4, '4%', 0.04)
+     * @returns {Array<object>}
+     */
+    static computeKagi(data, reversal = 0.04) {
+        if (!Array.isArray(data) || data.length === 0) return { segments: [], inflections: [] };
+
+        const prices = data.map((d, i) => {
+            const val = typeof d === 'number' ? d : Number(d.close ?? d.value ?? d.y ?? 0);
+            const label = typeof d === 'object' && d !== null ? (d.label ?? d.date ?? `#${i + 1}`) : `#${i + 1}`;
+            return { price: val, label };
+        }).filter(p => Number.isFinite(p.price));
+
+        if (prices.length < 2) return { segments: [], inflections: [] };
+
+        const p0 = prices[0].price;
+        let revAmount = typeof reversal === 'string' && reversal.endsWith('%')
+            ? p0 * (parseFloat(reversal) / 100)
+            : (typeof reversal === 'number' && reversal < 1 ? p0 * reversal : Number(reversal) || (p0 * 0.04));
+
+        if (revAmount <= 0) revAmount = 1;
+
+        let dir = prices[1].price >= p0 ? 1 : -1;
+        let curStart = p0;
+        let curEnd = prices[1].price;
+        let prevPeak = dir === 1 ? curEnd : p0;
+        let prevTrough = dir === -1 ? curEnd : p0;
+        let isYang = dir === 1;
+
+        const kagiColumns = [];
+        kagiColumns.push({
+            start: curStart,
+            end: curEnd,
+            dir,
+            isYang,
+            label: prices[1].label,
+        });
+
+        for (let i = 2; i < prices.length; i++) {
+            const p = prices[i].price;
+            const curCol = kagiColumns[kagiColumns.length - 1];
+
+            if (curCol.dir === 1) {
+                // Rising
+                if (p > curCol.end) {
+                    curCol.end = p;
+                    curCol.label = prices[i].label;
+                    if (p > prevPeak) curCol.isYang = true;
+                } else if (curCol.end - p >= revAmount) {
+                    // Reverse downward
+                    prevPeak = Math.max(prevPeak, curCol.end);
+                    const newYang = curCol.isYang && p >= prevTrough;
+                    kagiColumns.push({
+                        start: curCol.end,
+                        end: p,
+                        dir: -1,
+                        isYang: newYang,
+                        label: prices[i].label,
+                    });
+                }
+            } else {
+                // Falling
+                if (p < curCol.end) {
+                    curCol.end = p;
+                    curCol.label = prices[i].label;
+                    if (p < prevTrough) curCol.isYang = false;
+                } else if (p - curCol.end >= revAmount) {
+                    // Reverse upward
+                    prevTrough = Math.min(prevTrough, curCol.end);
+                    const newYang = curCol.isYang || p > prevPeak;
+                    kagiColumns.push({
+                        start: curCol.end,
+                        end: p,
+                        dir: 1,
+                        isYang: newYang,
+                        label: prices[i].label,
+                    });
+                }
+            }
+        }
+
+        return { columns: kagiColumns, prevPeak, prevTrough, revAmount };
+    }
+
+    _render() {
+        const data = this.data;
+        const options = this.options || {};
+        const { columns } = KagiChart.computeKagi(data, options.reversal ?? 0.04);
+        if (!columns.length) return;
+
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            yangColor = '#26a69a', yinColor = '#ef5350',
+            yangWidth = 3, yinWidth = 1.2,
+            title, xAxisLabel, yAxisLabel,
+        } = options;
+
+        const allPrices = columns.flatMap(c => [c.start, c.end]);
+        const vMax = Math.max(...allPrices);
+        const vMin = Math.min(...allPrices);
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+        const yDomain = new Axis().drawYRange(this.renderer, plotBox, vMin, vMax);
+
+        const colCount = columns.length;
+        const colWidth = width / Math.max(1, colCount);
+        const toY = (val) => y + height - ((val - yDomain.min) / ((yDomain.max - yDomain.min) || 1)) * height;
+
+        // Draw baseline axis
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        columns.forEach((col, i) => {
+            const cx = x + i * colWidth + colWidth / 2;
+            const y1 = toY(col.start);
+            const y2 = toY(col.end);
+            const color = col.isYang ? yangColor : yinColor;
+            const strokeWidth = col.isYang ? yangWidth : yinWidth;
+
+            // Horizontal inflection line from previous column
+            if (i > 0) {
+                const prevCx = x + (i - 1) * colWidth + colWidth / 2;
+                this.renderer.path(`M${prevCx},${y1} L${cx},${y1}`, 'none', { color, width: strokeWidth });
+            }
+
+            // Vertical segment
+            const pathEl = this.renderer.path(`M${cx},${y1} L${cx},${y2}`, 'none', { color, width: strokeWidth }, {
+                tooltip: `Kagi ${col.dir === 1 ? 'Up' : 'Down'} (${col.isYang ? 'Yang' : 'Yin'}): ${Axis.formatValue(col.start)} → ${Axis.formatValue(col.end)}`,
+            });
+
+            this._datum(pathEl, {
+                label: col.label,
+                start: col.start,
+                end: col.end,
+                type: col.isYang ? 'Yang' : 'Yin',
+            });
+
+            // Inflection point markers
+            this.renderer.circle(cx, y2, 3, color, { color: '#ffffff', width: 1 });
+
+            // Periodic category/turn labels
+            const step = Math.max(1, Math.floor(colCount / 8));
+            if (i % step === 0) {
+                this.renderer.text(col.label, cx, y + height + 18, {
+                    textAnchor: this.renderer.centerTextAnchor, fontSize: '9px', fill: '#555',
+                });
+            }
+        });
+    }
+}