@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/charts/HeatmapChart.js

@@ -0,0 +1,80 @@
+import { Chart } from '../Chart.js';
+import { ChartBox } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { Axis } from '../Axis.js';
+
+/**
+ * HeatmapChart — a grid of cells, one per (x, y) category pair, shaded by
+ * `value` along a low→high color scale.
+ */
+export class HeatmapChart extends Chart {
+    static chartType = 'heatmap';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            xLabels, yLabels, colorScale = ['#f7fbff', '#4292c6', '#08306b'],
+            showValues = false, title,
+        } = options;
+
+        // Grid cost is xCats.length * yCats.length, NOT data.length — a row
+        // count that's perfectly reasonable elsewhere (say, 100) can still
+        // blow this up if x/y happen to be high-cardinality columns (an ID,
+        // a timestamp): up to 100*100 = 10,000 rect()+text() calls in one
+        // uninterrupted double loop, a genuine multi-second synchronous
+        // freeze confirmed in practice. Capped independently of any
+        // caller-side row limit, since THIS is what actually scales.
+        const MAX_HEATMAP_CATS = 50;
+        const xCatsAll = xLabels || [...new Set(data.map(d => d.x))];
+        const yCatsAll = yLabels || [...new Set(data.map(d => d.y))];
+        const xCats = xCatsAll.slice(0, MAX_HEATMAP_CATS);
+        const yCats = yCatsAll.slice(0, MAX_HEATMAP_CATS);
+        const catsTruncated = xCats.length < xCatsAll.length || yCats.length < yCatsAll.length;
+        const xCatSet = catsTruncated ? new Set(xCats) : null;
+        const yCatSet = catsTruncated ? new Set(yCats) : null;
+        const values = (catsTruncated ? data.filter(d => xCatSet.has(d.x) && yCatSet.has(d.y)) : data)
+            .map(d => d.value);
+        const vMin = Math.min(...values);
+        const vMax = Math.max(...values);
+        const cellW = width / xCats.length;
+        const cellH = height / yCats.length;
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        if (title) this.renderer.text(title, x + width / 2, y - 30, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+
+        const cellByKey = new Map(data.map(d => [`${d.x}|${d.y}`, d.value]));
+        yCats.forEach((yc, yi) => {
+            xCats.forEach((xc, xi) => {
+                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);
+                this.renderer.rect(cellX, cellY, Math.max(1, cellW - 1), Math.max(1, cellH - 1), color, null, {
+                    tooltip: `${xc} / ${yc}: ${v ?? 'n/a'}`,
+                });
+                if (showValues && v != null) {
+                    this.renderer.text(Axis.formatValue(v), cellX + cellW / 2, cellY + cellH / 2, {
+                        textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: ColorPalette.isDark(color) ? '#fff' : '#333',
+                    });
+                }
+            });
+        });
+
+        xCats.forEach((xc, xi) => {
+            this.renderer.text(xc, x + xi * cellW + cellW / 2, y + height + 16, { textAnchor, fontSize: '10px' });
+        });
+        yCats.forEach((yc, yi) => {
+            this.renderer.text(yc, x - 8, y + yi * cellH + cellH / 2, { textAnchor: 'end', verticalAlign: 'middle', fontSize: '10px' });
+        });
+
+        if (catsTruncated) {
+            this.renderer.text(
+                `Showing ${xCats.length}×${yCats.length} of ${xCatsAll.length}×${yCatsAll.length} categories — pick lower-cardinality X/Y fields to see the rest`,
+                x + width / 2, y + height + 32, { textAnchor: 'middle', fontSize: '10px', fill: '#c0392b' },
+            );
+        }
+    }
+}

package/src/charting/charts/HierarchyChart.js

@@ -0,0 +1,39 @@
+import { Chart } from '../Chart.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { Axis } from '../Axis.js';
+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.
+ */
+export class HierarchyChart extends Chart {
+    _palette() {
+        if (!this._paletteInstance) {
+            this._paletteInstance = new ColorPalette(this.options.colors);
+        }
+        return this._paletteInstance;
+    }
+
+    _topLevelColor() {
+        if (!this._topLevelColorMap) {
+            this._topLevelColorMap = new Map(this.data.map((n, i) => [n, this._palette().colorAt(i)]));
+        }
+        return this._topLevelColorMap;
+    }
+
+    _colorForNode(topAncestor, depth) {
+        const baseColor = this._topLevelColor().get(topAncestor) ?? this._palette().colorAt(0);
+        return this._palette().lighten(baseColor, depth * 0.12);
+    }
+
+    _textColorForNode(topAncestor, depth) {
+        return this._palette().isDark(this._colorForNode(topAncestor, depth)) ? '#fff' : '#222';
+    }
+
+    _formatNodeValue(node) {
+        return Axis.formatValue(Hierarchy.value(node));
+    }
+}

package/src/charting/charts/HistogramChart.js

@@ -0,0 +1,45 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Axis } from '../Axis.js';
+import { Statistics } from '../Statistics.js';
+
+/**
+ * HistogramChart — frequency distribution of a raw numeric sample, binned
+ * into `binCount` evenly-spaced buckets (default: a Sturges'-rule estimate,
+ * ⌈log2(n)+1⌉, clamped to a sane 5-20 range).
+ */
+export class HistogramChart extends Chart {
+    static chartType = 'histogram';
+
+    _render() {
+        const values = this.data;
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            barColor = 'steelblue', title, xAxisLabel, yAxisLabel,
+            binCount = Math.min(20, Math.max(5, Math.ceil(Math.log2(values.length) + 1))),
+        } = options;
+        const bins = Statistics.histogramBins(values, binCount);
+        const maxCount = Math.max(...bins.map(b => b.count)) || 1;
+        const barWidth = width / bins.length;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        bins.forEach((bin, i) => {
+            const barHeight = (bin.count / maxCount) * height;
+            const barX = x + i * barWidth;
+            const barY = y + height - barHeight;
+            // No gap between bars (unlike barChart's categorical gaps) — bins
+            // are contiguous numeric ranges, not independent categories.
+            this.renderer.rect(barX, barY, Math.max(1, barWidth - 1), barHeight, barColor, null, {
+                tooltip: `${Axis.formatValue(bin.from)}–${Axis.formatValue(bin.to)}: ${bin.count}`,
+            });
+            if (i % Math.ceil(bins.length / 10 || 1) === 0) {
+                this.renderer.text(Axis.formatValue(bin.from), barX, y + height + 16, { textAnchor: 'start', fontSize: '9px' });
+            }
+        });
+    }
+}

package/src/charting/charts/KpiTile.js

@@ -0,0 +1,72 @@
+import { GaugeChart } from './GaugeChart.js';
+import { Sparkline } from '../gauges/Sparkline.js';
+
+/**
+ * KpiTile — a key figure on a card: its title, its value large, the change
+ * since the previous value (▲ / ▼, coloured good or bad), and a sparkline of
+ * its history.
+ *
+ * Data: a number, or `{ value, previous?, history?, target? }` (`history` ends
+ * with the current value; without `previous` the one before it is used).
+ * Options: x, y, width, height (10, 10, 220, 120), format and units (a
+ * number with thousands grouped by default), change ('percent', or 'value'
+ * for the difference), upIsGood (true: up is green; false for costs, errors,
+ * ...), bands (the value takes its band's colour), sparkColor, background,
+ * and title.
+ */
+export class KpiTile extends GaugeChart {
+    static chartType = 'kpiTile';
+    static LAYOUT = { x: 10, y: 10, width: 220, height: 120 };
+    static GOOD = '#2e9e5b';
+    static BAD = '#d64545';
+
+    /** A figure reads as it is, its thousands grouped ("12,345"). */
+    defaultFormat() { return { grouping: true }; }
+
+    /** The value as it is: a tile has no range to hold it to. */
+    get value() { return this.gaugeValue.value; }
+
+    /** The value's colour: its band's when there are bands, else the text colour. */
+    valueColor(value = this.value) {
+        if (this.options.color != null || this.bands.length) return super.valueColor(value);
+        return '#2f3542';
+    }
+
+    /** The change line: "▲ 10.0%" or "▼ 3", and whether it is good; null without a previous value. */
+    get changeText() {
+        const { change, changeRatio } = this.gaugeValue;
+        if (change == null) return null;
+        const { change: as = 'percent', upIsGood = true } = this.options;
+        const arrow = change > 0 ? '▲' : change < 0 ? '▼' : '■';
+        const amount = as === 'value' || changeRatio == null
+            ? this.scale.label(Math.abs(change))
+            : `${(Math.abs(changeRatio) * 100).toFixed(1)}%`;
+        const good = change === 0 ? null : (change > 0) === upIsGood;
+        return { text: `${arrow} ${amount}`, good };
+    }
+
+    _render() {
+        const { x, y, width, height } = this.layout;
+        const { title, background = '#ffffff', sparkColor = '#5352ed' } = this.options;
+        const pad = 12;
+        this.renderer.rect(x, y, width, height, background, { color: '#e1e4e8', width: 1 }, { rx: 8, ry: 8 });
+        if (title) {
+            this.renderer.text(title, x + pad, y + pad + 6, { textAnchor: 'start', verticalAlign: 'middle', fontSize: '12px', fill: '#747d8c' });
+        }
+        const valueSize = Math.max(14, Math.round(height * 0.26));
+        const valueY = y + pad + 18 + valueSize / 2;
+        this.renderer.text(this.scale.label(this.value), x + pad, valueY, {
+            textAnchor: 'start', verticalAlign: 'middle', fontSize: `${valueSize}px`, fontWeight: 'bold', fill: this.valueColor(),
+        });
+        const change = this.changeText;
+        if (change) {
+            const color = change.good == null ? '#747d8c' : change.good ? KpiTile.GOOD : KpiTile.BAD;
+            this.renderer.text(change.text, x + width - pad, valueY, { textAnchor: 'end', verticalAlign: 'middle', fontSize: '12px', fontWeight: 'bold', fill: color });
+        }
+        const sparkTop = valueY + valueSize / 2 + 8;
+        const sparkHeight = y + height - pad - sparkTop;
+        if (sparkHeight > 4) {
+            new Sparkline(this.gaugeValue.history, { x: x + pad, y: sparkTop, width: width - 2 * pad, height: sparkHeight }).draw(this.renderer, { color: sparkColor });
+        }
+    }
+}

package/src/charting/charts/LagPlotChart.js

@@ -0,0 +1,41 @@
+import { ScatterChart } from './ScatterChart.js';
+import { Statistics } from '../Statistics.js';
+
+/**
+ * LagPlotChart — value[t] against value[t-lag] (default lag=1), the standard
+ * visual autocorrelation check. Rendering delegates entirely to ScatterChart.
+ */
+export class LagPlotChart extends ScatterChart {
+    static chartType = 'lagPlot';
+
+    constructor(renderer, data, options = {}) {
+        super(renderer, data, options);
+    }
+
+    _render() {
+        const options = this.options;
+        const lag = options.lag ?? 1;
+        const pairs = Statistics.lagPairs(this.data, lag);
+        if (!pairs.length) return;
+
+        const originalData = this.data;
+        const originalTitle = options.title;
+        const originalXAxisLabel = options.xAxisLabel;
+        const originalYAxisLabel = options.yAxisLabel;
+        const originalReferenceLine = options.referenceLine;
+
+        this.data = pairs.map((p, i) => ({ label: `t=${i + lag}`, x: p.x, y: p.y }));
+        options.title = originalTitle ?? 'Lag Plot';
+        options.xAxisLabel = originalXAxisLabel ?? `Value[t-${lag}]`;
+        options.yAxisLabel = originalYAxisLabel ?? 'Value[t]';
+        options.referenceLine = true;
+
+        super._render();
+
+        this.data = originalData;
+        options.title = originalTitle;
+        options.xAxisLabel = originalXAxisLabel;
+        options.yAxisLabel = originalYAxisLabel;
+        options.referenceLine = originalReferenceLine;
+    }
+}

package/src/charting/charts/LineChart.js

@@ -0,0 +1,124 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Legend } from '../Legend.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { ErrorBars } from '../ErrorBars.js';
+
+/**
+ * LineChart — single or multi-series line chart with optional 3D ribbon
+ * effect and legend.
+ */
+export class LineChart extends Chart {
+    static chartType = 'line';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            lineColor = 'steelblue', pointColor = '#fff', title, xAxisLabel, yAxisLabel,
+            colors, zAxis = false, legend: showLegend = false, depth: zDepth = 20,
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        // Check if data is multiline (array of series) or single line
+        const isMultiline = Array.isArray(data[0]?.values);
+        const series = isMultiline ? data : [{ name: 'default', values: data }];
+
+        // Determine max value across all series
+        const maxValue = Math.max(...series.flatMap(s =>
+            isMultiline ? s.values.map(d => d.value) : s.values.map(d => d.value)
+        )) || 1;
+
+        const pointMargin = (isMultiline ? series[0].values.length : data.length) > 1
+            ? width / ((isMultiline ? series[0].values.length : data.length) - 1)
+            : width;
+
+        const depth = zAxis ? zDepth : 0;
+        const lineColors = colors || ColorPalette.DEFAULT;
+        const palette = new ColorPalette(lineColors);
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+
+        // 3D Axes
+        const axisPath = zAxis
+            ? `M${x + depth},${y - depth} L${x},${y} L${x},${y + height} L${x + width},${y + height} L${x + width + depth},${y + height - depth} M${x},${y + height} L${x + depth},${y + height - depth}`
+            : `M${x},${y} L${x},${y + height} L${x + width},${y + height}`;
+
+        this.renderer.path(axisPath, 'none', { color: 'black', width: 1 });
+
+        // Draw each series
+        series.forEach((seriesData, seriesIndex) => {
+            const seriesValues = isMultiline ? seriesData.values : seriesData.values;
+            const seriesColor = palette.colorAt(seriesIndex);
+            const seriesDepth = zAxis ? (depth / series.length) * (series.length - 1 - seriesIndex) : 0;
+
+            // Draw line
+            if (zAxis) {
+                // 3D effect: draw a "ribbon"
+                const ribbonPath = seriesValues.map((d, i) => {
+                    const pY = y + height - (d.value / maxValue) * height;
+                    return `L${x + i * pointMargin + seriesDepth},${pY - seriesDepth}`;
+                }).join(' ').replace('L', 'M');
+                this.renderer.path(ribbonPath, palette.lighten(seriesColor, -0.2), null);
+            }
+            let pathData = '';
+            seriesValues.forEach((d, i) => {
+                const pointX = x + i * pointMargin + seriesDepth;
+                const pointY = y + height - (d.value / maxValue) * height - seriesDepth;
+                if (i === 0) {
+                    pathData += `M${pointX},${pointY}`;
+                } else {
+                    pathData += ` L${pointX},${pointY}`;
+                }
+            });
+            this.renderer.path(pathData, 'none', { color: seriesColor, width: 2 });
+
+            // Draw points + optional error bars
+            seriesValues.forEach((d, i) => {
+                const pointX = x + i * pointMargin + seriesDepth;
+                const pointY = y + height - (d.value / maxValue) * height - seriesDepth;
+                const textAnchor = this.renderer.centerTextAnchor;
+
+                this.renderer.circle(
+                    pointX, pointY,
+                    3,
+                    seriesColor,
+                    { color: pointColor, width: 1.5 },
+                    { tooltip: `${isMultiline ? seriesData.name + ': ' : ''}${d.label}: ${d.value}` }
+                );
+
+                const errMinus = d.errorMinus != null ? d.errorMinus : d.error != null ? d.error : null;
+                const errPlus = d.errorPlus != null ? d.errorPlus : d.error != null ? d.error : null;
+                if (errMinus != null || errPlus != null) {
+                    const yHighVal = d.value + (errPlus ?? 0);
+                    const yLowVal = d.value - (errMinus ?? 0);
+                    const yHigh = y + height - (yHighVal / maxValue) * height - seriesDepth;
+                    const yLow = y + height - (yLowVal / maxValue) * height - seriesDepth;
+                    ErrorBars.draw(this.renderer, pointX, pointY, null, null, yLow, yHigh, seriesColor);
+                }
+            });
+
+            // Draw labels only for first series to avoid clutter. Use this
+            // series' own seriesDepth (not the raw max `depth`) for the x-shift
+            // so labels line up under series 0's actual (depth-shifted) points.
+            if (seriesIndex === 0) {
+                seriesValues.forEach((d, i) => {
+                    const pointX = x + i * pointMargin + seriesDepth;
+                    const textAnchor = this.renderer.centerTextAnchor;
+                    this.renderer.text(d.label, pointX, y + height + 20, { textAnchor: textAnchor });
+                });
+            }
+        });
+
+        // Draw legend for multiline
+        if (isMultiline && showLegend) {
+            const legendItems = series.map((s, i) => ({ name: s.name, color: palette.colorAt(i) }));
+            new Legend({
+                items: legendItems, x: x + width + 20, y,
+                itemHeight: 20, markerSize: 12,
+            }).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/MultiRingGauge.js

@@ -0,0 +1,54 @@
+import { GaugeChart } from './GaugeChart.js';
+import { ArcTrack } from '../gauges/ArcTrack.js';
+import { GaugeScale } from '../gauges/GaugeScale.js';
+
+/**
+ * MultiRingGauge — several values as rings one inside the other ("activity
+ * rings"), each filled to its value on its own scale, with a legend.
+ *
+ * Data: `[{ value, label?, color?, min?, max? }]` (or plain numbers), outer
+ * ring first; each ring's min and max default to the options'.
+ * Options: cx, cy, r (the outer ring: 100, 100, 70), thickness (12), gap (4),
+ * startAngle (-90) and sweep (360), colors (a colour per ring without its
+ * own), legend (true: each ring's label and value to the right), and the
+ * GaugeChart options min, max, format, units.
+ */
+export class MultiRingGauge extends GaugeChart {
+    static chartType = 'multiRingGauge';
+    static LAYOUT = { cx: 100, cy: 100, r: 70, thickness: 12, gap: 4, startAngle: -90, sweep: 360 };
+    static COLORS = ['#5352ed', '#2ed573', '#ffa502', '#ff4757', '#1e90ff'];
+
+    /** One per value: its track, scale and colour. */
+    get rings() {
+        const { cx, cy, r, thickness, gap, startAngle, sweep } = this.layout;
+        const { min, max, format, units, colors = MultiRingGauge.COLORS } = this.options;
+        return this.gaugeValue.values.map((v, i) => ({
+            ...v,
+            track: new ArcTrack({ cx, cy, r: r - i * (thickness + gap), thickness, startAngle, sweep }),
+            scale: new GaugeScale({ min: v.min ?? min, max: v.max ?? max, format: format ?? null, units }),
+            color: v.color ?? colors[i % colors.length],
+        })).filter(ring => ring.track.r > ring.track.thickness / 2);
+    }
+
+    _render() {
+        const { title, legend = true } = this.options;
+        const { cx, cy, r, thickness } = this.layout;
+        const rings = this.rings;
+        for (const ring of rings) {
+            this.drawBackground(ring.track);
+            this.drawValue(ring.track, { value: ring.scale.clamp(ring.value), scale: ring.scale, color: ring.color, cap: 'round' });
+        }
+        if (legend) {
+            const x = cx + r + thickness / 2 + 16;
+            const top = cy - ((rings.length - 1) * 18) / 2;
+            rings.forEach((ring, i) => {
+                const y = top + i * 18;
+                this.renderer.circle(x + 4, y, 4, ring.color);
+                this.renderer.text(`${ring.label ?? `#${i + 1}`}  ${ring.scale.label(ring.scale.clamp(ring.value))}`, x + 14, y, {
+                    textAnchor: 'start', verticalAlign: 'middle', fontSize: '12px', fill: '#2f3542',
+                });
+            });
+        }
+        this._renderTitle(title, cx, cy + r + thickness / 2 + 18, { textAnchor: 'middle', fontSize: '12px', fill: '#747d8c' });
+    }
+}

package/src/charting/charts/OutlineChart.js

@@ -0,0 +1,95 @@
+import { Axis } from '../Axis.js';
+import { Hierarchy } from '../Hierarchy.js';
+import { HierarchyChart } from './HierarchyChart.js';
+
+/**
+ * OutlineChart — an indented, collapsible tree list (file-explorer shape) for
+ * the same hierarchical composition a treemap/sunburst show spatially.
+ */
+export class OutlineChart extends HierarchyChart {
+    static chartType = 'outline';
+
+    constructor(renderer, data, options = {}, collapsed = null, onToggle = null) {
+        super(renderer, data, options);
+        this.collapsed = collapsed;
+        this.onToggle = onToggle;
+    }
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const { title, onNodeClick, structuralKeys = OutlineChart.HIERARCHY_STRUCTURAL_KEYS } = options;
+        const ROW_H = OutlineChart.ROW_H;
+        const INDENT_W = OutlineChart.INDENT_W;
+        const width = this.renderer.width ?? 640;
+        const countX = Math.max(width - 50, 100);
+        const detailX = Math.max(width * 0.45, 260);
+
+        let y = 16;
+        if (title) { this.renderer.text(title, 12, 20, { fontSize: '16px', fill: '#333' }); y = 48; }
+
+        const rows = Hierarchy.outlineLayout(data, 0, this.collapsed || new Set());
+        rows.forEach(({ node, depth, hasChildren, topAncestor }) => {
+            const rowCenterY = y + ROW_H / 2;
+            const indentX = 12 + depth * INDENT_W;
+            const accentColor = this._colorForNode(topAncestor, depth);
+
+            const g = this.renderer.group();
+            g.appendChild(this.renderer.rect(indentX - 2, rowCenterY - 5, 10, 10, accentColor, null));
+
+            let labelX = indentX + 16;
+            if (hasChildren) {
+                const collapsedHere = this.collapsed ? this.collapsed.has(node) : false;
+                const badgeX = indentX + 26;
+                const badge = this.renderer.circle(badgeX, rowCenterY, 7, '#ffffff', { color: '#888', width: 1.2 });
+                g.appendChild(badge);
+                g.appendChild(this.renderer.text(collapsedHere ? '+' : '−', badgeX, rowCenterY, {
+                    textAnchor: 'middle', verticalAlign: 'middle', fontSize: '10px', fill: '#555', 'pointer-events': 'none',
+                }));
+                badge.style.cursor = 'pointer';
+                badge.addEventListener('click', (event) => {
+                    event.stopPropagation();
+                    if (this.collapsed) {
+                        this.collapsed.has(node) ? this.collapsed.delete(node) : this.collapsed.add(node);
+                    }
+                    if (this.onToggle) this.onToggle();
+                });
+                labelX = badgeX + 16;
+            }
+
+            g.appendChild(this.renderer.text(node.label, labelX, rowCenterY, {
+                textAnchor: 'start', verticalAlign: 'middle', fontSize: '12px', fill: '#222',
+            }));
+
+            if (hasChildren) {
+                g.appendChild(this.renderer.text(this._formatNodeValue(node), countX, rowCenterY, {
+                    textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
+                }));
+            } else if (Number.isFinite(node.value)) {
+                g.appendChild(this.renderer.text(Axis.formatValue(node.value), countX, rowCenterY, {
+                    textAnchor: 'end', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
+                }));
+            } else {
+                const extra = Hierarchy.outlineExtraText(node, structuralKeys);
+                if (extra) {
+                    g.appendChild(this.renderer.text(extra, detailX, rowCenterY, {
+                        textAnchor: 'start', verticalAlign: 'middle', fontSize: '11px', fill: '#888', 'pointer-events': 'none',
+                    }));
+                }
+            }
+
+            if (onNodeClick) g.addEventListener('click', () => onNodeClick(node));
+            y += ROW_H;
+        });
+
+        const totalHeight = y + 12;
+        if (this.renderer.svg && totalHeight > this.renderer.height) {
+            this.renderer.svg.setAttribute('viewBox', `0 0 ${width} ${totalHeight}`);
+            this.renderer.svg.setAttribute('preserveAspectRatio', 'xMinYMin meet');
+        }
+    }
+}
+
+OutlineChart.ROW_H = 22;
+OutlineChart.INDENT_W = 18;
+OutlineChart.HIERARCHY_STRUCTURAL_KEYS = new Set(['label', 'value', 'children']);