@maxhealth.tech/prefab 0.2.40 → 0.3.0

package/dist/renderer/components/charts.js

@@ -1,155 +1,24 @@
 /**
- * Chart component renderers — BarChart, LineChart, AreaChart, PieChart, etc.
+ * Chart component renderers — BarChart, LineChart, AreaChart, PieChart,
+ * ScatterChart, RadialChart, Histogram.
  *
- * Charts render as SVG using simple built-in drawing.
- * For production use, these can be enhanced with a charting library.
+ * Charts render as SVG using simple built-in drawing. Shared axis/SVG/format
+ * helpers live in [chart-helpers.ts]; tooltip hit-zones in [chart-tooltip.ts].
  */
 import { registerComponent, resolveValue, el } from '../engine.js';
 import { createTooltip, addBarTooltipZones, addLineTooltipZones, showTooltipAt } from './chart-tooltip.js';
+import { COLORS, AXIS_COLOR, GRID_COLOR, AXIS_FONT, chartLayout, createSvg, svgEl, svgText, polar, arcPath, drawYAxis, drawYAxisRight, drawXAxisLabels, drawBaseline, applyPipeFormat, resolveValueFormat, makeTooltipFormatter, addLegend, } from './chart-helpers.js';
 export function registerChartComponents() {
     registerComponent('BarChart', renderBarChart);
     registerComponent('LineChart', renderLineChart);
     registerComponent('AreaChart', renderLineChart); // Same renderer, different fill
     registerComponent('PieChart', renderPieChart);
-    registerComponent('RadarChart', renderFallbackChart);
-    registerComponent('ScatterChart', renderFallbackChart);
-    registerComponent('RadialChart', renderFallbackChart);
+    registerComponent('RadarChart', renderRadarChart);
+    registerComponent('ScatterChart', renderScatterChart);
+    registerComponent('RadialChart', renderRadialChart);
     registerComponent('Histogram', renderHistogram);
 }
-const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
-const AXIS_COLOR = 'var(--muted-foreground, #6b7280)';
-const GRID_COLOR = 'var(--border, #e5e7eb)';
-const AXIS_FONT = '10';
-/** Compute chart layout accounting for optional Y-axis label space. */
-function chartLayout(svgWidth, svgHeight, hasYAxis, hasYAxisRight = false) {
-    const plotLeft = hasYAxis ? 44 : 0;
-    const plotRight = svgWidth - (hasYAxisRight ? 44 : 0);
-    const plotTop = 10;
-    const plotBottom = svgHeight - 24;
-    return {
-        plotLeft,
-        plotRight,
-        plotTop,
-        plotBottom,
-        plotWidth: plotRight - plotLeft,
-        plotHeight: plotBottom - plotTop,
-    };
-}
-/** Nice round tick values for a 0..max range, returning ~tickCount values. */
-function niceYTicks(max, tickCount = 5) {
-    if (max <= 0)
-        return [0];
-    const rawStep = max / tickCount;
-    const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
-    const residual = rawStep / magnitude;
-    const niceStep = residual <= 1.5 ? magnitude
-        : residual <= 3 ? 2 * magnitude
-            : residual <= 7 ? 5 * magnitude
-                : 10 * magnitude;
-    const ticks = [];
-    for (let v = 0; v <= max + niceStep * 0.01; v += niceStep) {
-        ticks.push(Math.round(v * 1000) / 1000);
-    }
-    return ticks;
-}
-/** Draw Y-axis labels + optional horizontal grid lines into SVG. */
-function drawYAxis(svg, layout, max, showGrid, format) {
-    const ticks = niceYTicks(max);
-    for (const tick of ticks) {
-        const y = layout.plotBottom - (max > 0 ? (tick / max) * layout.plotHeight : 0);
-        // Y label
-        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        label.setAttribute('x', String(layout.plotLeft - 6));
-        label.setAttribute('y', String(y + 3));
-        label.setAttribute('text-anchor', 'end');
-        label.setAttribute('font-size', AXIS_FONT);
-        label.setAttribute('fill', AXIS_COLOR);
-        label.textContent = formatYValue(tick, format);
-        svg.appendChild(label);
-        // Grid line
-        if (showGrid && tick > 0) {
-            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            line.setAttribute('x1', String(layout.plotLeft));
-            line.setAttribute('y1', String(y));
-            line.setAttribute('x2', String(layout.plotRight));
-            line.setAttribute('y2', String(y));
-            line.setAttribute('stroke', GRID_COLOR);
-            line.setAttribute('stroke-width', '1');
-            line.setAttribute('stroke-dasharray', '4 3');
-            svg.appendChild(line);
-        }
-    }
-}
-/** Draw secondary Y-axis labels on the right side of the plot. */
-function drawYAxisRight(svg, layout, max, format) {
-    const ticks = niceYTicks(max);
-    for (const tick of ticks) {
-        const y = layout.plotBottom - (max > 0 ? (tick / max) * layout.plotHeight : 0);
-        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        label.setAttribute('x', String(layout.plotRight + 6));
-        label.setAttribute('y', String(y + 3));
-        label.setAttribute('text-anchor', 'start');
-        label.setAttribute('font-size', AXIS_FONT);
-        label.setAttribute('fill', AXIS_COLOR);
-        label.textContent = formatYValue(tick, format);
-        svg.appendChild(label);
-    }
-}
-/** Draw X-axis labels under the plot area. */
-function drawXAxisLabels(svg, data, xAxisKey, getX, yBase, format) {
-    for (let i = 0; i < data.length; i++) {
-        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        label.setAttribute('x', String(getX(i)));
-        label.setAttribute('y', String(yBase + 14));
-        label.setAttribute('text-anchor', 'middle');
-        label.setAttribute('font-size', AXIS_FONT);
-        label.setAttribute('fill', AXIS_COLOR);
-        const val = data[i][xAxisKey];
-        label.textContent = val == null ? '' : (format ? format(val) : String(val));
-        svg.appendChild(label);
-    }
-}
-/** Draw a baseline (X-axis line) at the bottom of the plot. */
-function drawBaseline(svg, layout) {
-    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-    line.setAttribute('x1', String(layout.plotLeft));
-    line.setAttribute('y1', String(layout.plotBottom));
-    line.setAttribute('x2', String(layout.plotRight));
-    line.setAttribute('y2', String(layout.plotBottom));
-    line.setAttribute('stroke', AXIS_COLOR);
-    line.setAttribute('stroke-width', '1');
-    svg.appendChild(line);
-}
-/** Apply a pipe expression to a value using the Rx engine. */
-function applyPipeFormat(value, pipe, ctx) {
-    if (value == null)
-        return '';
-    const result = resolveValue(`{{ __v | ${pipe} }}`, { ...ctx, scope: { ...ctx.scope, __v: value } });
-    return result == null ? String(value) : String(result);
-}
-export function formatYValue(value, format) {
-    if (format === 'currency')
-        return `$${value.toLocaleString()}`;
-    if (format === 'percent')
-        return `${value}%`;
-    if (value >= 1_000_000)
-        return `${(value / 1_000_000).toFixed(1)}M`;
-    if (value >= 1_000)
-        return `${(value / 1_000).toFixed(1)}K`;
-    return String(value);
-}
-/** Create a format callback for tooltip entries that handles per-axis formats + null. */
-function makeTooltipFormatter(ctx, yAxisFormat, yAxisRightFormat) {
-    return (raw, s) => {
-        if (raw === null || raw === undefined)
-            return '\u2014';
-        // Per-series tooltipFormat overrides axis format
-        if (s.tooltipFormat)
-            return applyPipeFormat(raw, s.tooltipFormat, ctx);
-        const fmt = s.yAxisId === 'right' ? yAxisRightFormat : yAxisFormat;
-        return formatYValue(Number(raw), fmt);
-    };
-}
+// ── BarChart ─────────────────────────────────────────────────────────────────
 function renderBarChart(node, ctx) {
     const wrapper = el('div', 'pf-chart pf-bar-chart');
     const data = resolveValue(node.data, ctx) ?? [];
@@ -181,7 +50,7 @@ function renderBarChart(node, ctx) {
     const svg = createSvg(w, height, 'Bar');
     // Axes + grid (behind bars)
     if (showYAxis)
-        drawYAxis(svg, layout, leftMax, showGrid, node.yAxisFormat);
+        drawYAxis(svg, layout, leftMax, showGrid, resolveValueFormat(node));
     if (hasRight)
         drawYAxisRight(svg, layout, rightMax, node.yAxisRightFormat);
     drawBaseline(svg, layout);
@@ -219,7 +88,7 @@ function renderBarChart(node, ctx) {
     // Tooltip hit-zones (on top of bars)
     if (showTooltipProp) {
         const ttCtx = createTooltip(wrapper, svg);
-        const fmt = makeTooltipFormatter(ctx, node.yAxisFormat, node.yAxisRightFormat);
+        const fmt = makeTooltipFormatter(ctx, resolveValueFormat(node), node.yAxisRightFormat);
         const ttLabelFmt = tooltipXFormat ? (v) => applyPipeFormat(v, tooltipXFormat, ctx) : undefined;
         addBarTooltipZones(ttCtx, svg, data, series, layout, tooltipXKey ?? xAxisKey, fmt, ttLabelFmt);
     }
@@ -227,6 +96,7 @@ function renderBarChart(node, ctx) {
     wrapper.appendChild(svg);
     return wrapper;
 }
+// ── LineChart / AreaChart ────────────────────────────────────────────────────
 function renderLineChart(node, ctx) {
     const wrapper = el('div', `pf-chart pf-${node.type.toLowerCase()}-chart`);
     const data = resolveValue(node.data, ctx) ?? [];
@@ -261,7 +131,7 @@ function renderLineChart(node, ctx) {
     const isArea = node.type === 'AreaChart';
     // Draw grid + axes (behind data)
     if (showYAxis)
-        drawYAxis(svg, layout, leftMax, showGrid, node.yAxisFormat);
+        drawYAxis(svg, layout, leftMax, showGrid, resolveValueFormat(node));
     if (hasRight)
         drawYAxisRight(svg, layout, rightMax, node.yAxisRightFormat);
     drawBaseline(svg, layout);
@@ -371,7 +241,7 @@ function renderLineChart(node, ctx) {
     // Tooltip hit-zones (on top of lines)
     if (showTooltipProp) {
         const ttCtx = createTooltip(wrapper, svg);
-        const fmt = makeTooltipFormatter(ctx, node.yAxisFormat, node.yAxisRightFormat);
+        const fmt = makeTooltipFormatter(ctx, resolveValueFormat(node), node.yAxisRightFormat);
         const ttLabelFmt = tooltipXFormat ? (v) => applyPipeFormat(v, tooltipXFormat, ctx) : undefined;
         addLineTooltipZones(ttCtx, svg, data, allSeries, layout, tooltipXKey ?? xAxisKey, fmt, crosshair, dotGroups, ttLabelFmt);
     }
@@ -379,14 +249,25 @@ function renderLineChart(node, ctx) {
     wrapper.appendChild(svg);
     return wrapper;
 }
+// ── PieChart ─────────────────────────────────────────────────────────────────
 function renderPieChart(node, ctx) {
     const wrapper = el('div', 'pf-chart pf-pie-chart');
     const data = resolveValue(node.data, ctx) ?? [];
-    const series = node.series ?? [];
+    const seriesIn = node.series ?? [];
     const height = node.height ?? 300;
     const size = Math.min(height, 300);
     const showTooltipProp = node.showTooltip !== false;
-    if (data.length === 0 || series.length === 0) {
+    // Value field: upstream `dataKey`, falling back to series[0] (legacy series-based input).
+    const key = node.dataKey ?? seriesIn[0]?.dataKey;
+    // Slice-label field: upstream `nameKey`, falling back to tooltipXKey / xAxis (legacy).
+    const nameKey = node.nameKey
+        ?? node.tooltipXKey
+        ?? node.xAxis;
+    // Synthesize a single series for the legend/tooltip when only dataKey/nameKey is given.
+    const series = seriesIn.length > 0
+        ? seriesIn
+        : (key ? [{ dataKey: key, label: key }] : []);
+    if (data.length === 0 || !key) {
         wrapper.textContent = 'No chart data';
         return wrapper;
     }
@@ -394,11 +275,9 @@ function renderPieChart(node, ctx) {
     const cx = size / 2;
     const cy = size / 2;
     const r = size / 2 - 10;
-    // Use first series key, each data point is a slice
-    const key = series[0].dataKey;
-    const xAxisKey = node.xAxis;
-    const tooltipXKey = node.tooltipXKey;
     const tooltipXFormat = node.tooltipXFormat;
+    const valueFmt = resolveValueFormat(node);
+    const fmtValue = (v) => valueFmt ? applyPipeFormat(v, valueFmt, ctx) : String(v);
     const values = data.map(d => Number(d[key] ?? 0));
     const total = values.reduce((a, b) => a + b, 0);
     if (total === 0) {
@@ -422,8 +301,7 @@ function renderPieChart(node, ctx) {
         path.setAttribute('fill', color);
         path.style.cursor = 'default';
         if (ttCtx) {
-            const sliceKey = tooltipXKey ?? xAxisKey;
-            const rawSlice = sliceKey ? data[i][sliceKey] : undefined;
+            const rawSlice = nameKey ? data[i][nameKey] : undefined;
             const sliceLabel = rawSlice != null
                 ? (tooltipXFormat ? applyPipeFormat(rawSlice, tooltipXFormat, ctx) : String(rawSlice))
                 : `Slice ${i + 1}`;
@@ -432,7 +310,7 @@ function renderPieChart(node, ctx) {
             const tipX = cx + (r * 0.6) * Math.cos(midAngle);
             path.addEventListener('mouseenter', () => {
                 showTooltipAt(ttCtx, tipX, cy, sliceLabel, [
-                    { label: series[0].label ?? key, value: `${values[i]} (${pct})`, color },
+                    { label: series[0].label ?? key, value: `${fmtValue(values[i])} (${pct})`, color },
                 ]);
             });
             path.addEventListener('mouseleave', () => {
@@ -440,7 +318,7 @@ function renderPieChart(node, ctx) {
             });
             path.addEventListener('touchstart', () => {
                 showTooltipAt(ttCtx, tipX, cy, sliceLabel, [
-                    { label: series[0].label ?? key, value: `${values[i]} (${pct})`, color },
+                    { label: series[0].label ?? key, value: `${fmtValue(values[i])} (${pct})`, color },
                 ]);
             }, { passive: true });
             path.addEventListener('touchend', () => {
@@ -454,51 +332,224 @@ function renderPieChart(node, ctx) {
     wrapper.appendChild(svg);
     return wrapper;
 }
-function renderFallbackChart(node, _ctx) {
-    const e = el('div', `pf-chart pf-${node.type.toLowerCase()}`);
-    e.textContent = `${node.type} — not yet supported in renderer`;
-    e.style.padding = '24px';
-    e.style.textAlign = 'center';
-    return e;
+// ── ScatterChart ─────────────────────────────────────────────────────────────
+function renderScatterChart(node, ctx) {
+    const wrapper = el('div', 'pf-chart pf-scatter-chart');
+    const data = resolveValue(node.data, ctx) ?? [];
+    const xKey = node.xAxis;
+    const yKey = node.yAxis;
+    const zKey = node.zAxis;
+    const series = node.series ?? [];
+    const height = node.height ?? 300;
+    if (data.length === 0 || !xKey || !yKey) {
+        wrapper.textContent = 'No chart data';
+        return wrapper;
+    }
+    const showGrid = node.showGrid !== false;
+    const showTooltipProp = node.showTooltip !== false;
+    const color = series[0]?.color ?? COLORS[0];
+    const valueFmt = resolveValueFormat(node);
+    const fmt = (v) => valueFmt ? applyPipeFormat(v, valueFmt, ctx) : String(Math.round(v * 100) / 100);
+    const xs = data.map(d => Number(d[xKey] ?? 0));
+    const ys = data.map(d => Number(d[yKey] ?? 0));
+    const xMin = Math.min(...xs), xMax = Math.max(...xs);
+    const yMin = Math.min(...ys), yMax = Math.max(...ys);
+    const xRange = (xMax - xMin) || 1;
+    const yRange = (yMax - yMin) || 1;
+    const zs = zKey ? data.map(d => Number(d[zKey] ?? 0)) : [];
+    const zMax = zKey ? Math.max(...zs, 1) : 1;
+    const W = 400;
+    const layout = chartLayout(W, height, true);
+    const svg = createSvg(W, height, 'Scatter');
+    const sx = (v) => layout.plotLeft + ((v - xMin) / xRange) * layout.plotWidth;
+    const sy = (v) => layout.plotBottom - ((v - yMin) / yRange) * layout.plotHeight;
+    // Y axis ticks across the actual [min, max] range (+ optional grid).
+    const Y_TICKS = 4;
+    for (let t = 0; t <= Y_TICKS; t++) {
+        const val = yMin + (yRange * t) / Y_TICKS;
+        const y = sy(val);
+        svg.appendChild(svgText({ x: layout.plotLeft - 6, y: y + 3, 'text-anchor': 'end', 'font-size': AXIS_FONT, fill: AXIS_COLOR }, fmt(val)));
+        if (showGrid && t > 0) {
+            svg.appendChild(svgEl('line', {
+                x1: layout.plotLeft, y1: y, x2: layout.plotRight, y2: y,
+                stroke: GRID_COLOR, 'stroke-width': 1, 'stroke-dasharray': '4 3',
+            }));
+        }
+    }
+    drawBaseline(svg, layout);
+    // X axis: min / mid / max labels.
+    for (const xv of [xMin, (xMin + xMax) / 2, xMax]) {
+        svg.appendChild(svgText({ x: sx(xv), y: layout.plotBottom + 14, 'text-anchor': 'middle', 'font-size': AXIS_FONT, fill: AXIS_COLOR }, String(Math.round(xv * 100) / 100)));
+    }
+    const ttCtx = showTooltipProp ? createTooltip(wrapper, svg) : undefined;
+    for (let i = 0; i < data.length; i++) {
+        const px = sx(xs[i]);
+        const py = sy(ys[i]);
+        // Bubble radius from z (sqrt → area-proportional); fixed dot otherwise.
+        const rad = zKey ? 4 + Math.sqrt(zs[i] / zMax) * 14 : 4;
+        const dot = svgEl('circle', { cx: px, cy: py, r: rad, fill: color, 'fill-opacity': zKey ? 0.6 : 0.85 });
+        if (ttCtx) {
+            const entries = [
+                { label: xKey, value: fmt(xs[i]), color },
+                { label: yKey, value: fmt(ys[i]), color },
+                ...(zKey ? [{ label: zKey, value: fmt(zs[i]), color }] : []),
+            ];
+            const title = series[0]?.label ?? 'Point';
+            dot.addEventListener('mouseenter', () => showTooltipAt(ttCtx, px, py, title, entries));
+            dot.addEventListener('mouseleave', () => ttCtx.tooltip.classList.remove('pf-visible'));
+            dot.addEventListener('touchstart', () => showTooltipAt(ttCtx, px, py, title, entries), { passive: true });
+            dot.addEventListener('touchend', () => ttCtx.tooltip.classList.remove('pf-visible'), { passive: true });
+        }
+        svg.appendChild(dot);
+    }
+    addLegend(wrapper, series, node.showLegend);
+    wrapper.appendChild(svg);
+    return wrapper;
 }
-// ── Helpers ──────────────────────────────────────────────────────────────────
-function createSvg(width, height, chartType) {
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('width', '100%');
-    svg.setAttribute('height', String(height));
-    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
-    svg.setAttribute('role', 'img');
-    if (chartType) {
-        svg.setAttribute('aria-label', `${chartType} chart`);
+// ── RadialChart ──────────────────────────────────────────────────────────────
+function renderRadialChart(node, ctx) {
+    const wrapper = el('div', 'pf-chart pf-radial-chart');
+    const data = resolveValue(node.data, ctx) ?? [];
+    const seriesIn = node.series ?? [];
+    const dataKey = node.dataKey ?? seriesIn[0]?.dataKey;
+    const nameKey = node.nameKey
+        ?? node.tooltipXKey
+        ?? node.xAxis;
+    const height = node.height ?? 300;
+    if (data.length === 0 || !dataKey) {
+        wrapper.textContent = 'No chart data';
+        return wrapper;
     }
-    svg.style.overflow = 'visible';
-    return svg;
+    const size = Math.min(height, 300);
+    const cx = size / 2;
+    const cy = size / 2;
+    const outer = size / 2 - 10;
+    const inner = Math.max(0, Math.min(node.innerRadius ?? 30, outer - 10));
+    const startAngle = node.startAngle ?? 180;
+    const endAngle = node.endAngle ?? 0;
+    const showTooltipProp = node.showTooltip !== false;
+    const values = data.map(d => Number(d[dataKey] ?? 0));
+    const max = Math.max(...values, 1);
+    const svg = createSvg(size, size, 'Radial');
+    const band = (outer - inner) / data.length;
+    const thickness = Math.max(2, band * 0.7);
+    const valueFmt = resolveValueFormat(node);
+    const fmt = (v) => valueFmt ? applyPipeFormat(v, valueFmt, ctx) : String(v);
+    const ttCtx = showTooltipProp ? createTooltip(wrapper, svg) : undefined;
+    const legendSeries = [];
+    for (let i = 0; i < data.length; i++) {
+        // First row is the outermost ring.
+        const rMid = outer - band * i - band / 2;
+        const color = seriesIn[i]?.color ?? COLORS[i % COLORS.length];
+        const frac = values[i] / max;
+        const valueEnd = startAngle + frac * (endAngle - startAngle);
+        const rawName = nameKey ? data[i][nameKey] : null;
+        const name = rawName != null ? String(rawName) : (seriesIn[i]?.label ?? dataKey);
+        legendSeries.push({ dataKey: name || dataKey, label: name || dataKey, color });
+        // Muted full-range track.
+        svg.appendChild(svgEl('path', {
+            d: arcPath(cx, cy, rMid, startAngle, endAngle),
+            fill: 'none', stroke: GRID_COLOR, 'stroke-width': thickness, 'stroke-linecap': 'round',
+        }));
+        // Coloured value arc.
+        const arc = svgEl('path', {
+            d: arcPath(cx, cy, rMid, startAngle, valueEnd),
+            fill: 'none', stroke: color, 'stroke-width': thickness, 'stroke-linecap': 'round',
+        });
+        if (ttCtx) {
+            const mid = polar(cx, cy, rMid, (startAngle + valueEnd) / 2);
+            const entries = [{ label: dataKey, value: fmt(values[i]), color }];
+            const title = name || dataKey;
+            arc.addEventListener('mouseenter', () => showTooltipAt(ttCtx, mid.x, mid.y, title, entries));
+            arc.addEventListener('mouseleave', () => ttCtx.tooltip.classList.remove('pf-visible'));
+            arc.addEventListener('touchstart', () => showTooltipAt(ttCtx, mid.x, mid.y, title, entries), { passive: true });
+            arc.addEventListener('touchend', () => ttCtx.tooltip.classList.remove('pf-visible'), { passive: true });
+        }
+        svg.appendChild(arc);
+    }
+    addLegend(wrapper, legendSeries, node.showLegend);
+    wrapper.appendChild(svg);
+    return wrapper;
 }
-function addLegend(wrapper, series, show) {
-    if (show === false || series.length <= 1)
-        return;
-    const legend = el('div', 'pf-chart-legend');
-    legend.style.display = 'flex';
-    legend.style.gap = '12px';
-    legend.style.fontSize = '12px';
-    legend.style.marginBottom = '8px';
-    for (let i = 0; i < series.length; i++) {
-        const item = el('div', 'pf-chart-legend-item');
-        item.style.display = 'flex';
-        item.style.alignItems = 'center';
-        item.style.gap = '4px';
-        const dot = el('span');
-        dot.style.width = '8px';
-        dot.style.height = '8px';
-        dot.style.borderRadius = '50%';
-        dot.style.backgroundColor = series[i].color ?? COLORS[i % COLORS.length];
-        const label = el('span');
-        label.textContent = series[i].label ?? series[i].dataKey;
-        item.appendChild(dot);
-        item.appendChild(label);
-        legend.appendChild(item);
+// ── RadarChart ───────────────────────────────────────────────────────────────
+function renderRadarChart(node, ctx) {
+    const wrapper = el('div', 'pf-chart pf-radar-chart');
+    const data = resolveValue(node.data, ctx) ?? [];
+    const series = node.series ?? [];
+    const axisKey = node.axisKey ?? node.xAxis;
+    const height = node.height ?? 300;
+    if (data.length === 0 || series.length === 0) {
+        wrapper.textContent = 'No chart data';
+        return wrapper;
+    }
+    const filled = node.filled !== false;
+    const showDots = node.showDots === true;
+    const showGrid = node.showGrid !== false;
+    const showTooltipProp = node.showTooltip !== false;
+    const size = Math.min(height, 320);
+    const cx = size / 2;
+    const cy = size / 2;
+    const R = size / 2 - 24; // leave room for spoke labels
+    const N = data.length;
+    const max = Math.max(...data.flatMap(d => series.map(s => Number(d[s.dataKey] ?? 0))), 1);
+    // Spokes start at the top and go clockwise.
+    const angleAt = (i) => 90 - (360 * i) / N;
+    const ptStr = (pts) => pts.map(p => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+    const svg = createSvg(size, size, 'Radar');
+    // Polar grid: concentric rings + spokes.
+    if (showGrid) {
+        const rings = 4;
+        for (let r = 1; r <= rings; r++) {
+            const rr = (R * r) / rings;
+            const ring = Array.from({ length: N }, (_unused, i) => polar(cx, cy, rr, angleAt(i)));
+            svg.appendChild(svgEl('polygon', { points: ptStr(ring), fill: 'none', stroke: GRID_COLOR, 'stroke-width': 1 }));
+        }
+        for (let i = 0; i < N; i++) {
+            const p = polar(cx, cy, R, angleAt(i));
+            svg.appendChild(svgEl('line', { x1: cx, y1: cy, x2: p.x, y2: p.y, stroke: GRID_COLOR, 'stroke-width': 1 }));
+        }
+    }
+    // Spoke labels.
+    for (let i = 0; i < N; i++) {
+        const p = polar(cx, cy, R + 12, angleAt(i));
+        const raw = axisKey ? data[i][axisKey] : null;
+        svg.appendChild(svgText({ x: p.x, y: p.y + 3, 'text-anchor': 'middle', 'font-size': AXIS_FONT, fill: AXIS_COLOR }, raw != null ? String(raw) : ''));
     }
-    wrapper.appendChild(legend);
+    const ttCtx = showTooltipProp ? createTooltip(wrapper, svg) : undefined;
+    const valueFmt = resolveValueFormat(node);
+    const fmt = (v) => valueFmt ? applyPipeFormat(v, valueFmt, ctx) : String(v);
+    // One polygon per series.
+    for (let si = 0; si < series.length; si++) {
+        const s = series[si];
+        const color = s.color ?? COLORS[si % COLORS.length];
+        const pts = data.map((d, i) => polar(cx, cy, (Number(d[s.dataKey] ?? 0) / max) * R, angleAt(i)));
+        svg.appendChild(svgEl('polygon', {
+            points: ptStr(pts),
+            fill: filled ? color : 'none', 'fill-opacity': filled ? 0.2 : 0,
+            stroke: color, 'stroke-width': 2,
+        }));
+        if (showDots || ttCtx) {
+            for (let i = 0; i < pts.length; i++) {
+                const dot = svgEl('circle', {
+                    cx: pts[i].x, cy: pts[i].y, r: showDots ? 3 : 6,
+                    fill: showDots ? color : 'transparent', 'fill-opacity': showDots ? 1 : 0,
+                });
+                if (ttCtx) {
+                    const raw = axisKey ? data[i][axisKey] : null;
+                    const title = raw != null ? String(raw) : (s.label ?? s.dataKey);
+                    const entries = [{ label: s.label ?? s.dataKey, value: fmt(Number(data[i][s.dataKey] ?? 0)), color }];
+                    dot.addEventListener('mouseenter', () => showTooltipAt(ttCtx, pts[i].x, pts[i].y, title, entries));
+                    dot.addEventListener('mouseleave', () => ttCtx.tooltip.classList.remove('pf-visible'));
+                    dot.addEventListener('touchstart', () => showTooltipAt(ttCtx, pts[i].x, pts[i].y, title, entries), { passive: true });
+                    dot.addEventListener('touchend', () => ttCtx.tooltip.classList.remove('pf-visible'), { passive: true });
+                }
+                svg.appendChild(dot);
+            }
+        }
+    }
+    addLegend(wrapper, series, node.showLegend);
+    wrapper.appendChild(svg);
+    return wrapper;
 }
 // ── Histogram ────────────────────────────────────────────────────────────────
 function renderHistogram(node, ctx) {