@peter.prib/renderengine 0.0.0-stage → 0.1.0

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/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/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']);

package/src/charting/charts/ParallelCoordinatesChart.js

@@ -0,0 +1,130 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Legend } from '../Legend.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * ParallelCoordinatesChart — each dimension gets its own vertical axis, and
+ * every data row becomes a polyline connecting its values across the axes.
+ *
+ * Data: Array<{label?, category?, [dim: number]}>
+ * Options:
+ *   - dimensions: string[] — which numeric fields to plot, in order. If
+ *     omitted, all numeric fields except 'label' and 'category' are used.
+ *   - colors: string[] — palette for categories (or all lines if no category).
+ *   - lineWidth, lineOpacity
+ *   - title, xAxisLabel, yAxisLabel
+ *   - showAxes (default true), showLegend (default true when categories exist)
+ */
+export class ParallelCoordinatesChart extends Chart {
+    static chartType = 'parallelCoordinates';
+
+    _render() {
+        const data = this.data || [];
+        const options = this.options || {};
+        const box = ChartBox.fromRenderer(this.renderer, { left: 60, top: 50, right: 100, bottom: 60 });
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            title, xAxisLabel, yAxisLabel,
+            dimensions: explicitDimensions,
+            colors, lineWidth = 1.5, lineOpacity = 0.6,
+            showAxes = true, showLegend,
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        const dimensions = explicitDimensions && explicitDimensions.length
+            ? explicitDimensions
+            : this._inferDimensions(data);
+        if (dimensions.length < 2) return;
+
+        const scales = this._computeScales(data, dimensions);
+        const hasCategories = data.some(d => d.category != null);
+        const legendVisible = showLegend != null ? showLegend : hasCategories;
+        const palette = new ColorPalette(colors);
+        const categories = hasCategories
+            ? [...new Set(data.map(d => d.category).filter(c => c != null))]
+            : [];
+        const categoryColor = (category) => palette.colorAt(categories.indexOf(category));
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+
+        const axisXs = dimensions.map((_, i) =>
+            dimensions.length === 1 ? x + width / 2 : x + (i * width) / (dimensions.length - 1)
+        );
+
+        if (showAxes) {
+            dimensions.forEach((dim, i) => {
+                const ax = axisXs[i];
+                this.renderer.path(`M${ax},${y} L${ax},${y + height}`, 'none', { color: '#ccc', width: 1 });
+                const { min, max } = scales[dim];
+                this.renderer.text(dim, ax, y + height + 25, { textAnchor: 'middle', fontSize: '12px', fill: '#333' });
+                this.renderer.text(this._fmt(min), ax, y + height + 10, { textAnchor: 'middle', fontSize: '10px', fill: '#666' });
+                this.renderer.text(this._fmt(max), ax, y - 6, { textAnchor: 'middle', fontSize: '10px', fill: '#666' });
+            });
+        }
+
+        data.forEach((row, rowIndex) => {
+            const pts = [];
+            let valid = true;
+            dimensions.forEach((dim, i) => {
+                const v = row[dim];
+                if (v == null || Number.isNaN(v)) {
+                    valid = false;
+                    return;
+                }
+                const { min, max } = scales[dim];
+                const t = max === min ? 0.5 : (v - min) / (max - min);
+                const py = y + height - t * height;
+                pts.push({ x: axisXs[i], y: py });
+            });
+            if (!valid || pts.length < 2) return;
+
+            const color = hasCategories ? categoryColor(row.category) : palette.colorAt(rowIndex);
+            let pathData = '';
+            pts.forEach((p, i) => {
+                pathData += `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`;
+            });
+            const label = row.label || (hasCategories ? row.category : null);
+            this.renderer.path(pathData, 'none', {
+                color, width: lineWidth,
+                opacity: lineOpacity,
+                tooltip: label ? `${label}: ${dimensions.map(d => `${d}=${this._fmt(row[d])}`).join(', ')}` : undefined,
+            });
+        });
+
+        if (legendVisible && hasCategories) {
+            const legendItems = categories.map((c, i) => ({ name: c, color: palette.colorAt(i) }));
+            new Legend({
+                items: legendItems, x: x + width + 20, y,
+                itemHeight: 20, markerSize: 12,
+            }).draw(this.renderer);
+        }
+    }
+
+    _inferDimensions(data) {
+        const dims = new Set();
+        data.forEach(row => {
+            Object.keys(row).forEach(key => {
+                if (key === 'label' || key === 'category') return;
+                if (typeof row[key] === 'number') dims.add(key);
+            });
+        });
+        return [...dims];
+    }
+
+    _computeScales(data, dimensions) {
+        const scales = {};
+        dimensions.forEach(dim => {
+            const values = data.map(d => d[dim]).filter(v => v != null && !Number.isNaN(v));
+            const min = values.length ? Math.min(...values) : 0;
+            const max = values.length ? Math.max(...values) : 1;
+            scales[dim] = { min, max };
+        });
+        return scales;
+    }
+
+    _fmt(v) {
+        if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(1)}k`;
+        return Number.isInteger(v) ? String(v) : v.toFixed(2);
+    }
+}

package/src/charting/charts/PieChart.js

@@ -0,0 +1,56 @@
+import { Chart } from '../Chart.js';
+import { Legend } from '../Legend.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { ShapePaths } from '../ShapePaths.js';
+
+/**
+ * PieChart — pie or doughnut chart with optional legend.
+ */
+export class PieChart extends Chart {
+    static chartType = 'pie';
+
+    _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,
+            colors, legend: showLegend = true, title,
+        } = options;
+        const palette = new ColorPalette(colors);
+        const total = data.reduce((s, d) => s + d.value, 0) || 1;
+        const rInner = radius * innerRadiusRatio;
+
+        if (title) {
+            this.renderer.text(title, cx, cy - radius - 20, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+
+        let angle = -Math.PI / 2; // start at 12 o'clock
+        data.forEach((d, i) => {
+            const slice = (d.value / total) * Math.PI * 2;
+            const color = palette.colorAt(i);
+            const path = ShapePaths.donutSlicePath(cx, cy, radius, rInner, angle, angle + slice);
+            this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+                tooltip: `${d.label}: ${d.value} (${(d.value / total * 100).toFixed(1)}%)`,
+            });
+            angle += slice;
+        });
+
+        if (showLegend) {
+            const legendItems = data.map((d, i) => ({
+                label: `${d.label} (${(d.value / total * 100).toFixed(0)}%)`,
+                color: palette.colorAt(i),
+            }));
+            new Legend({
+                items: legendItems,
+                x: cx + radius + 30,
+                y: cy - radius,
+                itemHeight: 20,
+                markerSize: 12,
+            }).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/PipeChart.js

@@ -0,0 +1,88 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * PipeChart — tapering ribbon / pipe chart with optional multi-series legend.
+ */
+export class PipeChart extends Chart {
+    static chartType = 'pipe';
+
+    _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,
+            metricCol = 'metric', minWidth = 4, maxWidth = 28,
+            colors, title, xAxisLabel, yAxisLabel, legend: showLegend = false,
+        } = options;
+
+        const plotBox = { x, y, width, height };
+        const isMultiline = Array.isArray(data[0]?.values);
+        const series = isMultiline ? data : [{ name: 'default', values: data }];
+        const allPoints = series.flatMap(s => s.values);
+        const maxValue = Math.max(...allPoints.map(d => d.value));
+        const maxMetric = Math.max(...allPoints.map(d => d[metricCol] ?? 0)) || 1;
+        const pointCount = series[0].values.length;
+        const pointMargin = pointCount > 1 ? width / (pointCount - 1) : width;
+
+        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 });
+
+        const palette = new ColorPalette(colors);
+
+        series.forEach((s, seriesIndex) => {
+            const color = palette.colorAt(seriesIndex);
+            const pts = s.values.map((d, i) => ({
+                x: x + i * pointMargin,
+                y: y + height - (d.value / maxValue) * height,
+                w: minWidth + ((d[metricCol] ?? 0) / maxMetric) * (maxWidth - minWidth),
+                d,
+            }));
+
+            // Local direction at each point = average of incoming/outgoing
+            // segment vectors (endpoints just use their one available
+            // segment) — simple smoothing so the ribbon doesn't kink where
+            // width changes between neighboring points.
+            const dirs = pts.map((p, i) => {
+                const prev = pts[i - 1], next = pts[i + 1];
+                const dx = (next ? next.x : p.x) - (prev ? prev.x : p.x);
+                const dy = (next ? next.y : p.y) - (prev ? prev.y : p.y);
+                const len = Math.sqrt(dx * dx + dy * dy) || 1;
+                return { nx: -dy / len, ny: dx / len };
+            });
+
+            const upper = pts.map((p, i) => ({ x: p.x + dirs[i].nx * p.w / 2, y: p.y + dirs[i].ny * p.w / 2 }));
+            const lower = pts.map((p, i) => ({ x: p.x - dirs[i].nx * p.w / 2, y: p.y - dirs[i].ny * p.w / 2 }));
+
+            const ribbonPath = 'M' + upper.map(p => `${p.x},${p.y}`).join(' L')
+                + ' L' + [...lower].reverse().map(p => `${p.x},${p.y}`).join(' L') + ' Z';
+            // Partial opacity so overlapping pipes in a multi-series chart stay legible.
+            const { r, g, b } = palette.hexToRgb(color);
+            this.renderer.path(ribbonPath, `rgba(${r},${g},${b},0.55)`, null);
+            // Thin centerline for readability, especially useful with a single pipe.
+            const centerline = 'M' + pts.map(p => `${p.x},${p.y}`).join(' L');
+            this.renderer.path(centerline, 'none', { color: palette.lighten(color, -0.25), width: 1 });
+
+            pts.forEach(p => {
+                this.renderer.circle(p.x, p.y, 2, '#fff', { color, width: 1.5 },
+                    { tooltip: `${isMultiline ? s.name + ': ' : ''}${p.d.label}: ${p.d.value} (${metricCol}: ${p.d[metricCol] ?? 0})` });
+            });
+
+            if (seriesIndex === 0) {
+                const textAnchor = this.renderer.centerTextAnchor;
+                pts.forEach(p => this.renderer.text(p.d.label, p.x, y + height + 20, { textAnchor }));
+            }
+        });
+
+        if (isMultiline && showLegend) {
+            series.forEach((s, i) => {
+                const legendX = x + width + 20;
+                const legendY = y + i * 20;
+                this.renderer.rect(legendX, legendY, 12, 12, palette.colorAt(i), null);
+                this.renderer.text(s.name, legendX + 20, legendY + 6, { fontSize: '12px', fill: '#333' });
+            });
+        }
+    }
+}