@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/charts/SankeyDiagram.js

@@ -0,0 +1,174 @@
+import { Chart } from '../Chart.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * SankeyDiagram — flow diagram where the width of each link is proportional
+ * to the value it carries.
+ *
+ * Data:
+ *   {
+ *     nodes?: Array<{id: string, label?: string, color?: string}>,
+ *     links: Array<{source: string, target: string, value: number}>
+ *   }
+ * If nodes are omitted, they are inferred from link source/target IDs.
+ *
+ * Options:
+ *   - title
+ *   - nodeWidth
+ *   - nodePadding
+ *   - linkOpacity
+ *   - colors
+ */
+export class SankeyDiagram extends Chart {
+    static chartType = 'sankey';
+
+    _render() {
+        const data = this.data || {};
+        const options = this.options || {};
+        const w = this.renderer?.width ?? 800;
+        const h = this.renderer?.height ?? 400;
+
+        const {
+            x = 40, y = 40,
+            width = w - x - 40,
+            height = h - y - 60,
+            title,
+            nodeWidth = 16,
+            nodePadding = 16,
+            linkOpacity = 0.45,
+            colors,
+        } = options;
+
+        const links = (data.links || []).filter(l => l.value > 0);
+        if (links.length === 0) return;
+
+        // Infer nodes if not provided.
+        const nodeMap = new Map();
+        const ensureNode = (id) => {
+            if (!nodeMap.has(id)) nodeMap.set(id, { id, label: id, in: [], out: [], value: 0 });
+            return nodeMap.get(id);
+        };
+        (data.nodes || []).forEach(n => {
+            const node = ensureNode(n.id);
+            if (n.label != null) node.label = n.label;
+            if (n.color != null) node.color = n.color;
+        });
+        links.forEach(l => {
+            ensureNode(l.source);
+            ensureNode(l.target);
+        });
+        links.forEach(l => {
+            const s = nodeMap.get(l.source);
+            const t = nodeMap.get(l.target);
+            s.out.push({ target: t, value: l.value });
+            t.in.push({ source: s, value: l.value });
+            s.value += l.value;
+            t.value += l.value;
+        });
+
+        const nodes = [...nodeMap.values()];
+        this._assignLevels(nodes);
+        const levels = this._levels(nodes);
+        const maxLevel = Math.max(...nodes.map(n => n.level));
+        const levelWidth = (width - nodeWidth) / Math.max(1, maxLevel);
+
+        // Scale node heights so the tallest column fits.
+        const levelMaxValues = levels.map(levelNodes => Math.max(...levelNodes.map(n => n.value), 1));
+        const globalMax = Math.max(...levelMaxValues);
+        const scale = (height - (Math.max(...levels.map(l => l.length)) - 1) * nodePadding) / globalMax;
+
+        // Position nodes within each level.
+        levels.forEach(levelNodes => {
+            const totalH = levelNodes.reduce((sum, n) => sum + n.value * scale + nodePadding, 0) - nodePadding;
+            let cy = y + (height - totalH) / 2;
+            levelNodes.forEach(n => {
+                n.x = x + n.level * levelWidth;
+                n.y = cy;
+                n.h = n.value * scale;
+                cy += n.h + nodePadding;
+            });
+        });
+
+        const palette = new ColorPalette(colors);
+        levels.forEach((levelNodes, li) => {
+            levelNodes.forEach((n, i) => {
+                n.color = n.color || palette.colorAt(li * 3 + i);
+            });
+        });
+
+        if (title) {
+            this.renderer.text(title, x + width / 2, y - 16, {
+                textAnchor: 'middle', fontSize: '18px', fill: '#333',
+            });
+        }
+
+        // Draw links first so nodes sit on top.
+        nodes.forEach(n => {
+            let outY = n.y;
+            n.out.forEach(l => {
+                const t = l.target;
+                const inIndex = t.in.findIndex(inL => inL.source === n);
+                let inY = t.y;
+                for (let k = 0; k < inIndex; k++) inY += t.in[k].value * scale;
+                const linkH = l.value * scale;
+                const path = this._linkPath(n.x + nodeWidth, outY + linkH / 2, t.x, inY + linkH / 2, linkH);
+                const { r, g, b: bl } = palette.hexToRgb(n.color);
+                this.renderer.path(path, `rgba(${r},${g},${bl},${linkOpacity})`, null, {
+                    tooltip: `${n.label} → ${t.label}: ${l.value}`,
+                });
+                outY += linkH;
+            });
+        });
+
+        // Draw nodes.
+        nodes.forEach(n => {
+            this.renderer.rect(n.x, n.y, nodeWidth, Math.max(1, n.h), n.color, null, {
+                tooltip: `${n.label}: ${n.value}`,
+            });
+            this.renderer.text(n.label, n.x + nodeWidth / 2, n.y - 6, {
+                textAnchor: 'middle', fontSize: '10px', fill: '#333',
+            });
+        });
+    }
+
+    _assignLevels(nodes) {
+        // Sources (no incoming) are level 0; do a BFS forward.
+        nodes.forEach(n => { n.level = -1; });
+        let changed = true;
+        while (changed) {
+            changed = false;
+            nodes.forEach(n => {
+                if (n.level === -1 && n.in.length === 0) {
+                    n.level = 0;
+                    changed = true;
+                }
+                n.in.forEach(l => {
+                    if (l.source.level >= 0 && (n.level === -1 || l.source.level + 1 > n.level)) {
+                        n.level = l.source.level + 1;
+                        changed = true;
+                    }
+                });
+            });
+        }
+        // Any remaining unresolved nodes (cycles) get level 0.
+        nodes.forEach(n => { if (n.level < 0) n.level = 0; });
+    }
+
+    _levels(nodes) {
+        const maxLevel = Math.max(...nodes.map(n => n.level), 0);
+        const levels = [];
+        for (let i = 0; i <= maxLevel; i++) levels.push([]);
+        nodes.forEach(n => levels[n.level].push(n));
+        // Sort by value descending for a cleaner layout.
+        levels.forEach(level => level.sort((a, b) => b.value - a.value));
+        return levels;
+    }
+
+    _linkPath(x0, y0, x1, y1, h) {
+        const c0x = x0 + (x1 - x0) / 2;
+        const c1x = x1 - (x1 - x0) / 2;
+        const half = h / 2;
+        return `M${x0},${y0 - half} C${c0x},${y0 - half} ${c1x},${y1 - half} ${x1},${y1 - half} `
+             + `L${x1},${y1 + half} C${c1x},${y1 + half} ${c0x},${y0 + half} ${x0},${y0 + half} Z`;
+    }
+}

package/src/charting/charts/ScatterChart.js

@@ -0,0 +1,104 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { ChartData } from '../ChartData.js';
+import { ErrorBars } from '../ErrorBars.js';
+
+/**
+ * ScatterChart — x/y point scatter plot with optional categorical coloring.
+ */
+export class ScatterChart extends Chart {
+    static chartType = 'scatter';
+
+    constructor(renderer, data, options = {}) {
+        super(renderer, data, options);
+    }
+
+    _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,
+            pointColor = 'rgba(100, 150, 240, 0.7)', pointRadius = 5,
+            colorCol, colors, title, xAxisLabel, yAxisLabel, referenceLine,
+        } = options;
+        const plotBox = { x, y, width, height };
+        const xValues = data.map(d => d.x);
+        const yValues = data.map(d => d.y);
+        const xMin = Math.min(...xValues), xMax = Math.max(...xValues);
+        const yMin = Math.min(...yValues), yMax = Math.max(...yValues);
+        const xRange = (xMax - xMin) || 1;
+        const yRange = (yMax - yMin) || 1;
+        const toX = (v) => x + ((v - xMin) / xRange) * width;
+        const toY = (v) => y + height - ((v - yMin) / yRange) * height;
+
+        // Same optional per-point categorical coloring as bubbleChart — see
+        // its own comment for why colorCol/category/group fall back this way.
+        // `colorCol` may be a plain field name or a `{formula, params}`
+        // compiled expression — see `_readColorCol`.
+        const catField = colorCol
+            ?? (data.some(d => d.category != null) ? 'category'
+              : data.some(d => d.group != null) ? 'group' : null);
+        const palette = new ColorPalette(colors);
+        const catColors = new Map();
+        if (catField) {
+            for (const d of data) {
+                const cat = ChartData.readColorCol(d, catField);
+                if (cat != null && !catColors.has(cat)) catColors.set(cat, palette.colorAt(catColors.size));
+            }
+        }
+        const colorFor = d => {
+            if (!catField) return pointColor;
+            const cat = ChartData.readColorCol(d, catField);
+            return cat != null ? catColors.get(cat) : pointColor;
+        };
+
+        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 });
+
+        if (referenceLine) {
+            let from, to;
+            if (referenceLine === true) {
+                const lo = Math.max(xMin, yMin), hi = Math.min(xMax, yMax);
+                if (hi > lo) { from = { x: lo, y: lo }; to = { x: hi, y: hi }; }
+            } else {
+                ({ from, to } = referenceLine);
+            }
+            if (from && to) {
+                const line = this.renderer.path(`M${toX(from.x)},${toY(from.y)} L${toX(to.x)},${toY(to.y)}`, 'none', { color: '#999', width: 1 });
+                line.setAttribute('stroke-dasharray', '4 3');
+            }
+        }
+
+        data.forEach(d => {
+            const cx = toX(d.x);
+            const cy = toY(d.y);
+            const tooltip = d.label ? `${d.label}: (${d.x}, ${d.y})` : `(${d.x}, ${d.y})`;
+            this.renderer.circle(cx, cy, pointRadius, colorFor(d), { color: 'rgba(0,0,0,0.2)', width: 1 }, { tooltip });
+
+            const xLow = d.errorXMinus != null ? toX(d.x - d.errorXMinus)
+                : d.errorX != null ? toX(d.x - d.errorX) : null;
+            const xHigh = d.errorXPlus != null ? toX(d.x + d.errorXPlus)
+                : d.errorX != null ? toX(d.x + d.errorX) : null;
+            const yLow = d.errorYMinus != null ? toY(d.y - d.errorYMinus)
+                : d.errorY != null ? toY(d.y - d.errorY) : null;
+            const yHigh = d.errorYPlus != null ? toY(d.y + d.errorYPlus)
+                : d.errorY != null ? toY(d.y + d.errorY) : null;
+            ErrorBars.draw(this.renderer, cx, cy, xLow, xHigh, yLow, yHigh);
+        });
+
+        // Category color legend — same inline pattern as bubbleChart (not the
+        // generic showLegend mechanism other 2D charts use).
+        if (catField && catColors.size > 0) {
+            let legY = y + 10;
+            const legX = x + width + 20;
+            for (const [cat, color] of catColors) {
+                this.renderer.circle(legX + 5, legY, 5, color, null, {});
+                this.renderer.text(String(cat), legX + 16, legY + 4, { textAnchor: 'start', fontSize: '11px', fill: '#374151' });
+                legY += 18;
+            }
+        }
+    }
+}

package/src/charting/charts/StackedAreaChart.js

@@ -0,0 +1,15 @@
+import { AreaChart } from './AreaChart.js';
+
+/**
+ * StackedAreaChart — convenience subclass that forces `stacked: true`.
+ *
+ * Data shape is the same as AreaChart/LineChart multi-series:
+ *   Array<{name: string, values: Array<{label: string, value: number}>}>
+ */
+export class StackedAreaChart extends AreaChart {
+    static chartType = 'stackedArea';
+
+    constructor(renderer, data, options = {}) {
+        super(renderer, data, { ...options, stacked: true });
+    }
+}

package/src/charting/charts/StackedBarChart.js

@@ -0,0 +1,33 @@
+import { BarChartBase } from './BarChartBase.js';
+
+/**
+ * StackedBarChart — vertical stacked bar chart.
+ */
+export class StackedBarChart extends BarChartBase {
+    static chartType = 'stackedBar';
+
+    _computeMaxValue() {
+        const data = this.data;
+        return Math.max(...data.map(d => d.values.reduce((sum, val) => sum + val, 0)));
+    }
+
+    _renderBars(maxStackValue) {
+        const data = this.data;
+        const { x, y, height } = this._plotBox;
+        const { bandWidth, margin } = this._bandScale(data.length);
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        data.forEach((d, i) => {
+            let currentY = y + height;
+            const barX = x + i * (bandWidth + margin);
+            d.values.forEach((value, j) => {
+                const barHeight = (value / maxStackValue) * height;
+                currentY -= barHeight;
+                this.renderer.rect(barX, currentY, bandWidth, barHeight, this._palette.colorAt(j), null, {
+                    tooltip: `${d.label} - Series ${j + 1}: ${value}`,
+                });
+            });
+            this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
+        });
+    }
+}

package/src/charting/charts/StackedBarChart3DOrbit.js

@@ -0,0 +1,58 @@
+import { ColorPalette } from '../ColorPalette.js';
+import { Chart3D } from '../Chart3D.js';
+
+/**
+ * StackedBarChart3DOrbit — stacked-segment version of BarChart3DOrbit.
+ */
+export class StackedBarChart3DOrbit extends Chart3D {
+    static chartType = 'stackedBar3dOrbit';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const { colors, title } = options;
+        const { cx, cy, toScreen, box } = this._viewport();
+        const { x: bx, y: by, width, height } = box;
+
+        const { xLabels, zLabels, xIndex, zIndex } = this.bucketGrid(data);
+        const stackMax = Math.max(...data.map(d => d.values.reduce((s, v) => s + v, 0))) || 1;
+        const palette = new ColorPalette(colors);
+
+        const cellW = 2 / Math.max(1, xLabels.length);
+        const cellD = 2 / Math.max(1, zLabels.length);
+        const barFrac = 0.7;
+
+        if (title) {
+            this.renderer.text(title, cx, by - 20, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+
+        const bars = data.map(d => {
+            const xi = xIndex.get(d.x), zi = zIndex.get(d.z);
+            const xCenter = -1 + cellW * (xi + 0.5);
+            const zCenter = -1 + cellD * (zi + 0.5);
+            const hw = cellW * barFrac / 2, hd = cellD * barFrac / 2;
+            const stackTotal = d.values.reduce((s, v) => s + v, 0) / stackMax;
+            const { depth } = this.project(xCenter, stackTotal / 2, zCenter);
+            return { d, x0: xCenter - hw, x1: xCenter + hw, z0: zCenter - hd, z1: zCenter + hd, depth };
+        }).sort((a, b) => b.depth - a.depth);
+
+        for (const bar of bars) {
+            let yCursor = 0;
+            for (let j = 0; j < bar.d.values.length; j++) {
+                const segHeight = bar.d.values[j] / stackMax;
+                const y0 = yCursor, y1 = yCursor + segHeight;
+                yCursor = y1;
+                this.drawBox(this.renderer, bar.x0, bar.x1, y0, y1, bar.z0, bar.z1, palette.colorAt(j), toScreen);
+            }
+        }
+
+        const maxSegments = Math.max(...data.map(d => d.values.length));
+        let legY = by + 10;
+        const legX = bx + width - 100;
+        for (let j = 0; j < maxSegments; j++) {
+            this.renderer.circle(legX + 5, legY, 5, palette.colorAt(j), null, {});
+            this.renderer.text(`Series ${j + 1}`, legX + 16, legY + 4, { textAnchor: 'start', fontSize: '11px', fill: '#374151' });
+            legY += 18;
+        }
+    }
+}

package/src/charting/charts/StreamGraphChart.js

@@ -0,0 +1,131 @@
+import { Chart } from '../Chart.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { Legend } from '../Legend.js';
+
+/**
+ * StreamGraphChart — a stacked area chart with a centered (silhouette) baseline,
+ * producing the flowing, river-like shape commonly called a stream graph.
+ *
+ * Data: Array<{name: string, values: Array<{label: string, value: number}>}>
+ * Options:
+ *   - title, xAxisLabel, yAxisLabel
+ *   - colors: string[] palette
+ *   - legend: boolean (default true)
+ *   - smooth: boolean (default true) — cubic-bezier smoothing between points
+ *   - tension: number (default 0.5)
+ */
+export class StreamGraphChart extends Chart {
+    static chartType = 'streamGraph';
+
+    /** Build a smooth closed area path from top points then bottom points (reversed). */
+    static areaPath(topPts, bottomPts, smooth = true, tension = 0.5) {
+        if (topPts.length === 0) return '';
+        if (!smooth || topPts.length < 3) {
+            return 'M' + topPts.map(p => `${p.x},${p.y}`).join(' L')
+                + ' L' + [...bottomPts].reverse().map(p => `${p.x},${p.y}`).join(' L') + ' Z';
+        }
+
+        const line = (pts) => {
+            let d = `M${pts[0].x},${pts[0].y}`;
+            for (let i = 0; i < pts.length - 1; i++) {
+                const p0 = pts[Math.max(0, i - 1)];
+                const p1 = pts[i];
+                const p2 = pts[i + 1];
+                const p3 = pts[Math.min(pts.length - 1, i + 2)];
+                const cp1x = p1.x + (p2.x - p0.x) * (tension / 6);
+                const cp1y = p1.y + (p2.y - p0.y) * (tension / 6);
+                const cp2x = p2.x - (p3.x - p1.x) * (tension / 6);
+                const cp2y = p2.y - (p3.y - p1.y) * (tension / 6);
+                d += ` C${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
+            }
+            return d;
+        };
+
+        return line(topPts) + ' L' + [...bottomPts].reverse().map(p => `${p.x},${p.y}`).join(' L') + ' Z';
+    }
+
+    _render() {
+        const data = this.data || [];
+        const options = this.options || {};
+        const box = this.renderer?.width
+            ? { x: 60, y: 40, width: this.renderer.width - 100, height: this.renderer.height - 100 }
+            : { x: 60, y: 40, width: 700, height: 300 };
+
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            colors, title, xAxisLabel, yAxisLabel, legend: showLegend = true,
+            smooth = true, tension = 0.5,
+        } = options;
+
+        const isMultiline = Array.isArray(data[0]?.values);
+        const series = isMultiline ? data : [{ name: 'default', values: data }];
+        const pointCount = series[0]?.values?.length ?? 0;
+        if (pointCount === 0) return;
+
+        const pointMargin = pointCount > 1 ? width / (pointCount - 1) : width;
+        const palette = new ColorPalette(colors);
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        // Compute totals per point and max extent for scaling.
+        const totals = new Array(pointCount).fill(0);
+        series.forEach(s => {
+            s.values.forEach((d, i) => { totals[i] += d.value; });
+        });
+        const maxExtent = Math.max(...totals.map(v => Math.abs(v))) || 1;
+
+        // Centered (silhouette) baseline: each layer floats so the stack is
+        // vertically centered at every x-position.
+        const bands = series.map(() => new Array(pointCount));
+        for (let i = 0; i < pointCount; i++) {
+            const total = totals[i];
+            let y0 = -total / 2;
+            series.forEach((s, si) => {
+                const v = s.values[i].value;
+                bands[si][i] = { y0, y1: y0 + v };
+                y0 += v;
+            });
+        }
+
+        // Title / labels.
+        if (title) {
+            this.renderer.text(title, x + width / 2, y - 16, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+        if (xAxisLabel) {
+            this.renderer.text(xAxisLabel, x + width / 2, y + height + 36, { textAnchor: 'middle', fontSize: '12px', fill: '#666' });
+        }
+        if (yAxisLabel) {
+            this.renderer.text(yAxisLabel, y + height / 2, x - 45, { textAnchor: 'middle', fontSize: '12px', fill: '#666', transform: 'rotate(-90,' + (x - 45) + ',' + (y + height / 2) + ')' });
+        }
+
+        const toY = (v) => y + height / 2 - (v / maxExtent) * (height / 2);
+
+        // Draw layers bottom-up so overlaps look correct.
+        series.forEach((s, si) => {
+            const color = palette.colorAt(si);
+            const topPts = bands[si].map((b, i) => ({ x: x + i * pointMargin, y: toY(b.y1) }));
+            const bottomPts = bands[si].map((b, i) => ({ x: x + i * pointMargin, y: toY(b.y0) }));
+            const path = StreamGraphChart.areaPath(topPts, bottomPts, smooth, tension);
+            const { r, g, b: bl } = palette.hexToRgb(color);
+            this.renderer.path(path, `rgba(${r},${g},${bl},0.75)`, { color: color, width: 1 }, { tooltip: s.name });
+        });
+
+        // X-axis labels.
+        series[0].values.forEach((d, i) => {
+            this.renderer.text(d.label, x + i * pointMargin, y + height + 16, { textAnchor, fontSize: '10px', fill: '#666' });
+        });
+
+        // Center zero line.
+        this.renderer.path(`M${x},${y + height / 2} L${x + width},${y + height / 2}`, 'none', { color: '#ccc', width: 1, dasharray: '4 3' });
+
+        // Baseline axes.
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: '#999', width: 1 });
+
+        if (isMultiline && showLegend) {
+            const legendItems = series.map((s, i) => ({ label: 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/SunburstChart.js

@@ -0,0 +1,57 @@
+import { ShapePaths } from '../ShapePaths.js';
+import { Hierarchy } from '../Hierarchy.js';
+import { HierarchyChart } from './HierarchyChart.js';
+
+/**
+ * SunburstChart — the same hierarchical composition a treemap shows as nested
+ * rectangles, drawn instead as nested rings (one ring per depth), each ring's
+ * arcs sized by value like a pie chart.
+ */
+export class SunburstChart extends HierarchyChart {
+    static chartType = 'sunburst';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const w = this.renderer?.width ?? 640;
+        const h = this.renderer?.height ?? 400;
+        const {
+            cx = w / 2, cy = h / 2 + 10,
+            radius = Math.min(w, h) / 2 - 60,
+            innerRadiusRatio = 0,
+            title,
+        } = options;
+
+        if (title) {
+            this.renderer.text(title, cx, cy - radius - 20, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+
+        const maxDepth = Math.max(1, ...data.map(n => Hierarchy.depth(n)));
+        const innerHole = radius * innerRadiusRatio;
+        const ringWidth = (radius - innerHole) / maxDepth;
+        const layout = Hierarchy.sunburstLayout(data, cx, cy, innerHole, ringWidth, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2);
+
+        layout.forEach(entry => {
+            const { node, cx: ecx, cy: ecy, rInner, rOuter, startAngle, endAngle, depth, topAncestor } = entry;
+            const color = this._colorForNode(topAncestor, depth);
+            const textColor = this._textColorForNode(topAncestor, depth);
+
+            const path = ShapePaths.donutSlicePath(ecx, ecy, rOuter, rInner, startAngle, endAngle);
+            this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+                tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
+            });
+
+            if (endAngle - startAngle > 0.35) {
+                const midAngle = (startAngle + endAngle) / 2;
+                const midR = (rInner + rOuter) / 2;
+                const labelX = ecx + midR * Math.cos(midAngle);
+                const labelY = ecy + midR * Math.sin(midAngle);
+                const upright = Math.cos(midAngle) >= 0;
+                const rotation = upright ? midAngle : midAngle + Math.PI;
+                this.renderer.text(node.label, labelX, labelY, {
+                    textAnchor: 'middle', verticalAlign: 'middle', fontSize: '9px', fill: textColor, rotation, 'pointer-events': 'none',
+                });
+            }
+        });
+    }
+}

package/src/charting/charts/ThermometerGauge.js

@@ -0,0 +1,43 @@
+import { GaugeChart } from './GaugeChart.js';
+import { VerticalTrack } from '../gauges/VerticalTrack.js';
+
+/**
+ * ThermometerGauge — a tube filled from a bulb at its foot up to the value.
+ *
+ * Options: x, y, width, height (the tube: 40, 20, 18, 200), bulb (its radius:
+ * 16), and every GaugeChart option (min, max, units, bands, target, ticks,
+ * segments, ...). The value's label sits under the bulb.
+ */
+export class ThermometerGauge extends GaugeChart {
+    static chartType = 'thermometerGauge';
+    static LAYOUT = { x: 40, y: 20, width: 18, height: 200, bulb: 16 };
+    static defaultColor = '#ff4757';
+
+    track() {
+        const { x, y, width, height } = this.layout;
+        return new VerticalTrack({ x, y, length: height, thickness: width, radius: width / 2 });
+    }
+
+    /** The bulb's centre: under the tube, overlapping its foot so the two join. */
+    bulbCenter(track) {
+        const { bulb } = this.layout;
+        const foot = track.point(0);
+        return { x: foot.x, y: foot.y + bulb * 0.75 };
+    }
+
+    _render() {
+        const { title } = this.options;
+        const { bulb } = this.layout;
+        const track = this.track();
+        const centre = this.bulbCenter(track);
+        this._renderTitle(title, centre.x, track.y - 10, { textAnchor: 'middle', fontSize: '12px', fill: '#747d8c' });
+        this.drawBackground(track);
+        this.drawValue(track);
+        // The bulb is always full: the value's colour, round a lighter ring.
+        this.renderer.circle(centre.x, centre.y, bulb, this.constructor.trackColor);
+        this.renderer.circle(centre.x, centre.y, bulb - 3, this.valueColor());
+        this.drawTarget(track);
+        this.drawTicks(track);
+        this._renderValueLabel(centre.x, centre.y + bulb + 14, { fontWeight: 'bold', fill: '#2f3542' });
+    }
+}

package/src/charting/charts/TreemapChart.js

@@ -0,0 +1,54 @@
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Hierarchy } from '../Hierarchy.js';
+import { HierarchyChart } from './HierarchyChart.js';
+
+/**
+ * TreemapChart — rectangles nested/sized proportional to value (squarified
+ * layout), the standard chart for "composition of a whole across a hierarchy".
+ */
+export class TreemapChart extends HierarchyChart {
+    static chartType = 'treemap';
+
+    _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, title } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title }).draw(this.renderer, plotBox);
+
+        const layout = Hierarchy.treemapLayout(data, x, y, width, height, 0, null, TreemapChart.HEADER_H);
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        layout.forEach(entry => {
+            const { node, x: rx, y: ry, width: rw, height: rh, depth, isLeaf, topAncestor } = entry;
+            const color = this._colorForNode(topAncestor, depth);
+            const textColor = this._textColorForNode(topAncestor, depth);
+
+            if (isLeaf) {
+                this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
+                    tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
+                });
+                if (rw > 30 && rh > 14) {
+                    this.renderer.text(node.label, rx + rw / 2, ry + rh / 2, {
+                        textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: textColor, 'pointer-events': 'none',
+                    });
+                }
+            } else {
+                const headerH = Math.min(rh, TreemapChart.HEADER_H);
+                this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), 'rgba(0,0,0,0.03)', { color: '#ddd', width: 1 });
+                this.renderer.rect(rx, ry, Math.max(0, rw), headerH, color, null, {
+                    tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
+                });
+                if (rw > 30) {
+                    this.renderer.text(node.label, rx + 4, ry + headerH / 2, {
+                        textAnchor: 'start', verticalAlign: 'middle', fontSize: '9px', fontWeight: 'bold', fill: textColor, 'pointer-events': 'none',
+                    });
+                }
+            }
+        });
+    }
+}
+
+TreemapChart.HEADER_H = 16;