@maxhealth.tech/prefab 0.2.4 → 0.2.6

package/dist/app.d.ts

@@ -9,7 +9,7 @@ import type { ComponentJSON } from './core/component.js';
 import type { Action, ActionJSON } from './actions/types.js';
 import type { PipeFn } from './rx/pipes.js';
 /** Package version — injected by build script, updated at release time. */
-export declare const VERSION = "0.2.4";
+export declare const VERSION = "0.2.6";
 export interface Theme {
     light?: Record<string, string>;
     dark?: Record<string, string>;

package/dist/app.js

@@ -7,7 +7,7 @@
 import {} from './core/component.js';
 import { drainAutoState } from './rx/state-collector.js';
 /** Package version — injected by build script, updated at release time. */
-export const VERSION = '0.2.4';
+export const VERSION = '0.2.6';
 export class PrefabApp {
     title;
     view;

package/dist/prefab.css

@@ -736,6 +736,27 @@
 .pf-chart { position: relative; }
 .pf-chart svg { display: block; width: 100%; height: auto; }
 
+.pf-chart-tooltip {
+  position: absolute;
+  pointer-events: none;
+  z-index: 50;
+  background: var(--popover, #fff);
+  color: var(--popover-foreground, #09090b);
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: var(--radius, 0.375rem);
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.pf-chart-tooltip.pf-visible { opacity: 1; }
+.pf-chart-tooltip-label { font-weight: 500; margin-bottom: 0.125rem; }
+.pf-chart-tooltip-row { display: flex; align-items: center; gap: 0.375rem; }
+.pf-chart-tooltip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+
 .pf-chart-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.75rem; }
 .pf-chart-legend-item { display: flex; align-items: center; gap: 0.375rem; }
 

package/dist/renderer/components/chart-tooltip.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Chart tooltip — hit-zone overlays, crosshair, data dots, and tooltip popup.
+ *
+ * Extracted from charts.ts to keep each file under 700 LOC.
+ */
+import type { ChartLayout, SeriesEntry } from './charts.js';
+export interface TooltipEntry {
+    label: string;
+    value: string | number;
+    color: string;
+}
+export interface TooltipCtx {
+    wrapper: HTMLElement;
+    tooltip: HTMLElement;
+    svgEl: SVGSVGElement;
+}
+/** Create and attach a tooltip div to the chart wrapper. */
+export declare function createTooltip(wrapper: HTMLElement, svg: SVGSVGElement): TooltipCtx;
+/** Show the tooltip at a position relative to the SVG. */
+export declare function showTooltipAt(ctx: TooltipCtx, svgX: number, _svgY: number, categoryLabel: string | undefined, entries: TooltipEntry[]): void;
+/** Attach hover hit-zones for bar chart columns. */
+export declare function addBarTooltipZones(ctx: TooltipCtx, svg: SVGSVGElement, data: Record<string, unknown>[], series: SeriesEntry[], layout: ChartLayout, xAxisKey: string | undefined, formatValue: (raw: unknown, s: SeriesEntry, si: number) => string): void;
+/** Attach hover hit-zones for line/area chart data points. */
+export declare function addLineTooltipZones(ctx: TooltipCtx, svg: SVGSVGElement, data: Record<string, unknown>[], allSeries: SeriesEntry[], layout: ChartLayout, xAxisKey: string | undefined, formatValue: (raw: unknown, s: SeriesEntry, si: number) => string, crosshair?: SVGLineElement, dotGroups?: SVGCircleElement[][]): void;
+//# sourceMappingURL=chart-tooltip.d.ts.map

package/dist/renderer/components/chart-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip.d.ts","sourceRoot":"","sources":["../../../src/renderer/components/chart-tooltip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAI3D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,WAAW,CAAA;IACpB,OAAO,EAAE,WAAW,CAAA;IACpB,KAAK,EAAE,aAAa,CAAA;CACrB;AAED,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,GAAG,UAAU,CAUlF;AAED,0DAA0D;AAC1D,wBAAgB,aAAa,CAC3B,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,MAAM,GAAG,SAAS,EACjC,OAAO,EAAE,YAAY,EAAE,GACtB,IAAI,CA8BN;AAMD,oDAAoD;AACpD,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,UAAU,EACf,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/B,MAAM,EAAE,WAAW,EAAE,EACrB,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,WAAW,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,GAChE,IAAI,CA6BN;AAED,8DAA8D;AAC9D,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,UAAU,EACf,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/B,SAAS,EAAE,WAAW,EAAE,EACxB,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,WAAW,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,EACjE,SAAS,CAAC,EAAE,cAAc,EAC1B,SAAS,CAAC,EAAE,gBAAgB,EAAE,EAAE,GAC/B,IAAI,CAuDN"}

package/dist/renderer/components/chart-tooltip.js

@@ -0,0 +1,135 @@
+/**
+ * Chart tooltip — hit-zone overlays, crosshair, data dots, and tooltip popup.
+ *
+ * Extracted from charts.ts to keep each file under 700 LOC.
+ */
+const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
+/** Create and attach a tooltip div to the chart wrapper. */
+export function createTooltip(wrapper, svg) {
+    const tooltip = document.createElement('div');
+    tooltip.className = 'pf-chart-tooltip';
+    wrapper.appendChild(tooltip);
+    wrapper.addEventListener('mouseleave', () => {
+        tooltip.classList.remove('pf-visible');
+    });
+    return { wrapper, tooltip, svgEl: svg };
+}
+/** Show the tooltip at a position relative to the SVG. */
+export function showTooltipAt(ctx, svgX, _svgY, categoryLabel, entries) {
+    const { tooltip, svgEl, wrapper } = ctx;
+    if (entries.length === 0)
+        return;
+    let html = '';
+    if (categoryLabel) {
+        html += `<div class="pf-chart-tooltip-label">${esc(categoryLabel)}</div>`;
+    }
+    for (const e of entries) {
+        html += `<div class="pf-chart-tooltip-row">`;
+        html += `<span class="pf-chart-tooltip-dot" style="background:${esc(e.color)}"></span>`;
+        html += `<span>${esc(e.label)}:</span> <strong>${esc(String(e.value))}</strong>`;
+        html += `</div>`;
+    }
+    tooltip.innerHTML = html;
+    const svgRect = svgEl.getBoundingClientRect();
+    const wrapRect = wrapper.getBoundingClientRect();
+    const viewBox = svgEl.viewBox.baseVal;
+    const scaleX = svgRect.width / (viewBox.width || 1);
+    const pixelX = svgRect.left - wrapRect.left + svgX * scaleX;
+    const tooltipW = tooltip.offsetWidth || 100;
+    let left = pixelX + 12;
+    if (left + tooltipW > wrapRect.width) {
+        left = pixelX - tooltipW - 12;
+    }
+    tooltip.style.left = `${Math.max(0, left)}px`;
+    tooltip.style.top = '4px';
+    tooltip.classList.add('pf-visible');
+}
+function esc(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/** Attach hover hit-zones for bar chart columns. */
+export function addBarTooltipZones(ctx, svg, data, series, layout, xAxisKey, formatValue) {
+    const groupW = layout.plotWidth / data.length;
+    for (let di = 0; di < data.length; di++) {
+        const x = layout.plotLeft + di * groupW;
+        const zone = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        zone.setAttribute('x', String(x));
+        zone.setAttribute('y', String(layout.plotTop));
+        zone.setAttribute('width', String(groupW));
+        zone.setAttribute('height', String(layout.plotHeight));
+        zone.setAttribute('fill', 'transparent');
+        zone.style.cursor = 'default';
+        const rawLabel = xAxisKey ? data[di][xAxisKey] : undefined;
+        const label = rawLabel != null ? String(rawLabel) : undefined;
+        const entries = series.map((s, si) => ({
+            label: s.label ?? s.dataKey,
+            value: formatValue(data[di][s.dataKey], s, si),
+            color: s.color ?? COLORS[si % COLORS.length],
+        }));
+        const centerX = x + groupW / 2;
+        const show = () => showTooltipAt(ctx, centerX, layout.plotTop, label, entries);
+        const hide = () => ctx.tooltip.classList.remove('pf-visible');
+        zone.addEventListener('mouseenter', show);
+        zone.addEventListener('mouseleave', hide);
+        zone.addEventListener('touchstart', show, { passive: true });
+        zone.addEventListener('touchend', hide, { passive: true });
+        svg.appendChild(zone);
+    }
+}
+/** Attach hover hit-zones for line/area chart data points. */
+export function addLineTooltipZones(ctx, svg, data, allSeries, layout, xAxisKey, formatValue, crosshair, dotGroups) {
+    const step = data.length === 1 ? layout.plotWidth : layout.plotWidth / (data.length - 1);
+    for (let di = 0; di < data.length; di++) {
+        const centerX = data.length === 1
+            ? (layout.plotLeft + layout.plotRight) / 2
+            : layout.plotLeft + (di / (data.length - 1)) * layout.plotWidth;
+        const zoneX = data.length === 1 ? layout.plotLeft : centerX - step / 2;
+        const zoneW = data.length === 1 ? layout.plotWidth : step;
+        const zone = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        zone.setAttribute('x', String(Math.max(layout.plotLeft, zoneX)));
+        zone.setAttribute('y', String(layout.plotTop));
+        zone.setAttribute('width', String(Math.min(zoneW, layout.plotRight - Math.max(layout.plotLeft, zoneX))));
+        zone.setAttribute('height', String(layout.plotHeight));
+        zone.setAttribute('fill', 'transparent');
+        zone.style.cursor = 'default';
+        const rawLabel = xAxisKey ? data[di][xAxisKey] : undefined;
+        const label = rawLabel != null ? String(rawLabel) : undefined;
+        const entries = allSeries.map((s, si) => ({
+            label: s.label ?? s.dataKey,
+            value: formatValue(data[di][s.dataKey], s, si),
+            color: s.color ?? COLORS[si % COLORS.length],
+        }));
+        const showHover = () => {
+            showTooltipAt(ctx, centerX, layout.plotTop, label, entries);
+            if (crosshair) {
+                crosshair.setAttribute('x1', String(centerX));
+                crosshair.setAttribute('x2', String(centerX));
+                crosshair.setAttribute('opacity', '1');
+            }
+            if (dotGroups) {
+                for (const dots of dotGroups) {
+                    for (const dot of dots)
+                        dot.setAttribute('data-visible', 'false');
+                    dots[di]?.setAttribute('data-visible', 'true');
+                }
+            }
+        };
+        const hideHover = () => {
+            ctx.tooltip.classList.remove('pf-visible');
+            if (crosshair)
+                crosshair.setAttribute('opacity', '0');
+            if (dotGroups) {
+                for (const dots of dotGroups) {
+                    for (const dot of dots)
+                        dot.setAttribute('data-visible', 'false');
+                }
+            }
+        };
+        zone.addEventListener('mouseenter', showHover);
+        zone.addEventListener('mouseleave', hideHover);
+        zone.addEventListener('touchstart', showHover, { passive: true });
+        zone.addEventListener('touchend', hideHover, { passive: true });
+        svg.appendChild(zone);
+    }
+}
+//# sourceMappingURL=chart-tooltip.js.map

package/dist/renderer/components/chart-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip.js","sourceRoot":"","sources":["../../../src/renderer/components/chart-tooltip.ts"],"names":[],"mappings":"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"}

package/dist/renderer/components/charts.d.ts

@@ -5,4 +5,20 @@
  * For production use, these can be enhanced with a charting library.
  */
 export declare function registerChartComponents(): void;
+export interface SeriesEntry {
+    dataKey: string;
+    label?: string;
+    color?: string;
+    yAxisId?: 'left' | 'right';
+}
+export interface ChartLayout {
+    /** Usable plot area after axis padding */
+    plotLeft: number;
+    plotRight: number;
+    plotTop: number;
+    plotBottom: number;
+    plotWidth: number;
+    plotHeight: number;
+}
+export declare function formatYValue(value: number, format?: string): string;
 //# sourceMappingURL=charts.d.ts.map

package/dist/renderer/components/charts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../../src/renderer/components/charts.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,wBAAgB,uBAAuB,IAAI,IAAI,CAS9C"}
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../../src/renderer/components/charts.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,wBAAgB,uBAAuB,IAAI,IAAI,CAS9C;AAOD,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B;AAID,MAAM,WAAW,WAAW;IAC1B,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB;AAuID,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAMnE"}

package/dist/renderer/components/charts.js

@@ -5,6 +5,7 @@
  * For production use, these can be enhanced with a charting library.
  */
 import { registerComponent, resolveValue, el } from '../engine.js';
+import { createTooltip, addBarTooltipZones, addLineTooltipZones, showTooltipAt } from './chart-tooltip.js';
 export function registerChartComponents() {
     registerComponent('BarChart', renderBarChart);
     registerComponent('LineChart', renderLineChart);
@@ -119,7 +120,7 @@ function drawBaseline(svg, layout) {
     line.setAttribute('stroke-width', '1');
     svg.appendChild(line);
 }
-function formatYValue(value, format) {
+export function formatYValue(value, format) {
     if (format === 'currency')
         return `$${value.toLocaleString()}`;
     if (format === 'percent')
@@ -130,6 +131,15 @@ function formatYValue(value, format) {
         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(yAxisFormat, yAxisRightFormat) {
+    return (raw, s) => {
+        if (raw === null || raw === undefined)
+            return '—';
+        const fmt = s.yAxisId === 'right' ? yAxisRightFormat : yAxisFormat;
+        return formatYValue(Number(raw), fmt);
+    };
+}
 function renderBarChart(node, ctx) {
     const wrapper = el('div', 'pf-chart pf-bar-chart');
     const data = resolveValue(node.data, ctx) ?? [];
@@ -142,6 +152,7 @@ function renderBarChart(node, ctx) {
     const showYAxis = node.showYAxis !== false;
     const showGrid = node.showGrid === true;
     const showYAxisRight = node.showYAxisRight === true;
+    const showTooltipProp = node.showTooltip !== false;
     const xAxisKey = node.xAxis;
     const leftSeries = series.filter(s => s.yAxisId !== 'right');
     const rightSeries = series.filter(s => s.yAxisId === 'right');
@@ -154,7 +165,7 @@ function renderBarChart(node, ctx) {
         : 1;
     const w = 400;
     const layout = chartLayout(w, height, showYAxis, hasRight);
-    const svg = createSvg(w, height);
+    const svg = createSvg(w, height, 'Bar');
     // Axes + grid (behind bars)
     if (showYAxis)
         drawYAxis(svg, layout, leftMax, showGrid, node.yAxisFormat);
@@ -167,9 +178,12 @@ function renderBarChart(node, ctx) {
     for (let di = 0; di < data.length; di++) {
         for (let si = 0; si < series.length; si++) {
             const s = series[si];
+            const raw = data[di][s.dataKey];
+            if (raw === null || raw === undefined)
+                continue; // skip null bars
             const isRight = s.yAxisId === 'right';
             const max = isRight ? rightMax : leftMax;
-            const val = Number(data[di][s.dataKey] ?? 0);
+            const val = Number(raw);
             const h = Math.max(0, (val / max) * layout.plotHeight);
             const x = layout.plotLeft + di * barGroupWidth + si * barWidth + barWidth / 2;
             const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
@@ -188,6 +202,12 @@ function renderBarChart(node, ctx) {
             return layout.plotLeft + i * barGroupWidth + barGroupWidth / 2;
         }, layout.plotBottom);
     }
+    // Tooltip hit-zones (on top of bars)
+    if (showTooltipProp) {
+        const ttCtx = createTooltip(wrapper, svg);
+        const fmt = makeTooltipFormatter(node.yAxisFormat, node.yAxisRightFormat);
+        addBarTooltipZones(ttCtx, svg, data, series, layout, xAxisKey, fmt);
+    }
     addLegend(wrapper, series, node.showLegend);
     wrapper.appendChild(svg);
     return wrapper;
@@ -204,6 +224,7 @@ function renderLineChart(node, ctx) {
     const showYAxis = node.showYAxis !== false;
     const showGrid = node.showGrid === true;
     const showYAxisRight = node.showYAxisRight === true;
+    const showTooltipProp = node.showTooltip !== false;
     const xAxisKey = node.xAxis;
     // Split series by axis
     const leftSeries = allSeries.filter(s => s.yAxisId !== 'right');
@@ -218,7 +239,7 @@ function renderLineChart(node, ctx) {
         : 1;
     const w = 400;
     const layout = chartLayout(w, height, showYAxis, hasRight);
-    const svg = createSvg(w, height);
+    const svg = createSvg(w, height, node.type === 'AreaChart' ? 'Area' : 'Line');
     const isArea = node.type === 'AreaChart';
     // Draw grid + axes (behind data)
     if (showYAxis)
@@ -226,39 +247,100 @@ function renderLineChart(node, ctx) {
     if (hasRight)
         drawYAxisRight(svg, layout, rightMax, node.yAxisRightFormat);
     drawBaseline(svg, layout);
-    // Draw series
+    // Draw series (with null-gap handling)
+    const dotGroups = []; // one array of dots per series
     for (let si = 0; si < allSeries.length; si++) {
         const s = allSeries[si];
         const isRight = s.yAxisId === 'right';
         const max = isRight ? rightMax : leftMax;
+        const color = s.color ?? COLORS[si % COLORS.length];
         const points = data.map((d, i) => {
+            const raw = d[s.dataKey];
+            const isNull = raw === null || raw === undefined;
             const x = data.length === 1
                 ? (layout.plotLeft + layout.plotRight) / 2
                 : layout.plotLeft + (i / (data.length - 1)) * layout.plotWidth;
-            const y = layout.plotBottom - (Number(d[s.dataKey] ?? 0) / max) * layout.plotHeight;
-            return { x, y };
+            const y = isNull ? layout.plotBottom : layout.plotBottom - (Number(raw) / max) * layout.plotHeight;
+            return { x, y, isNull };
         });
-        const color = s.color ?? COLORS[si % COLORS.length];
-        if (isArea && points.length > 0) {
-            const areaPath = `M ${points[0].x},${layout.plotBottom} ` +
-                points.map(p => `L ${p.x},${p.y}`).join(' ') +
-                ` L ${points[points.length - 1].x},${layout.plotBottom} Z`;
-            const area = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            area.setAttribute('d', areaPath);
-            area.setAttribute('fill', color);
-            area.setAttribute('opacity', '0.15');
-            svg.appendChild(area);
+        // Area fill (skip null segments)
+        if (isArea) {
+            let seg = [];
+            const flushArea = () => {
+                if (seg.length < 2) {
+                    seg = [];
+                    return;
+                }
+                const d = `M ${seg[0].x},${layout.plotBottom} ` +
+                    seg.map(p => `L ${p.x},${p.y}`).join(' ') +
+                    ` L ${seg[seg.length - 1].x},${layout.plotBottom} Z`;
+                const area = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                area.setAttribute('d', d);
+                area.setAttribute('fill', color);
+                area.setAttribute('opacity', '0.15');
+                svg.appendChild(area);
+                seg = [];
+            };
+            for (const p of points) {
+                if (p.isNull) {
+                    flushArea();
+                    continue;
+                }
+                seg.push(p);
+            }
+            flushArea();
+        }
+        // Line path with gap handling: break into segments on null
+        let linePath = '';
+        for (const p of points) {
+            if (p.isNull) { /* gap — next valid point starts a new M */
+                continue;
+            }
+            // Check if previous point was null → start new segment
+            const idx = points.indexOf(p);
+            const prevNull = idx === 0 || points[idx - 1].isNull;
+            linePath += `${prevNull ? 'M' : 'L'} ${p.x},${p.y} `;
+        }
+        if (linePath) {
+            const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            line.setAttribute('d', linePath.trim());
+            line.setAttribute('fill', 'none');
+            line.setAttribute('stroke', color);
+            line.setAttribute('stroke-width', '2');
+            if (isRight)
+                line.setAttribute('stroke-dasharray', '6 3');
+            svg.appendChild(line);
+        }
+        // Data-point dots (hidden by default, shown on hover)
+        const seriesDots = [];
+        for (const p of points) {
+            const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            dot.setAttribute('cx', String(p.x));
+            dot.setAttribute('cy', String(p.y));
+            dot.setAttribute('r', '4');
+            dot.setAttribute('fill', color);
+            dot.setAttribute('class', 'pf-data-dot');
+            dot.setAttribute('data-visible', 'false');
+            dot.style.pointerEvents = 'none';
+            if (p.isNull)
+                dot.style.display = 'none';
+            svg.appendChild(dot);
+            seriesDots.push(dot);
         }
-        const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ');
-        const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        line.setAttribute('d', linePath);
-        line.setAttribute('fill', 'none');
-        line.setAttribute('stroke', color);
-        line.setAttribute('stroke-width', '2');
-        if (isRight)
-            line.setAttribute('stroke-dasharray', '6 3');
-        svg.appendChild(line);
+        dotGroups.push(seriesDots);
     }
+    // Crosshair line (hidden by default)
+    const crosshair = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    crosshair.setAttribute('class', 'pf-crosshair');
+    crosshair.setAttribute('x1', String(layout.plotLeft));
+    crosshair.setAttribute('x2', String(layout.plotLeft));
+    crosshair.setAttribute('y1', String(layout.plotTop));
+    crosshair.setAttribute('y2', String(layout.plotBottom));
+    crosshair.setAttribute('stroke', AXIS_COLOR);
+    crosshair.setAttribute('stroke-width', '1');
+    crosshair.setAttribute('stroke-dasharray', '3 3');
+    crosshair.setAttribute('opacity', '0');
+    svg.appendChild(crosshair);
     // X-axis labels
     if (xAxisKey) {
         drawXAxisLabels(svg, data, xAxisKey, (i) => {
@@ -267,6 +349,12 @@ function renderLineChart(node, ctx) {
                 : layout.plotLeft + (i / (data.length - 1)) * layout.plotWidth;
         }, layout.plotBottom);
     }
+    // Tooltip hit-zones (on top of lines)
+    if (showTooltipProp) {
+        const ttCtx = createTooltip(wrapper, svg);
+        const fmt = makeTooltipFormatter(node.yAxisFormat, node.yAxisRightFormat);
+        addLineTooltipZones(ttCtx, svg, data, allSeries, layout, xAxisKey, fmt, crosshair, dotGroups);
+    }
     addLegend(wrapper, allSeries, node.showLegend);
     wrapper.appendChild(svg);
     return wrapper;
@@ -277,16 +365,18 @@ function renderPieChart(node, ctx) {
     const series = 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) {
         wrapper.textContent = 'No chart data';
         return wrapper;
     }
-    const svg = createSvg(size, size);
+    const svg = createSvg(size, size, 'Pie');
     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 values = data.map(d => Number(d[key] ?? 0));
     const total = values.reduce((a, b) => a + b, 0);
     if (total === 0) {
@@ -294,6 +384,7 @@ function renderPieChart(node, ctx) {
         wrapper.appendChild(svg);
         return wrapper;
     }
+    const ttCtx = showTooltipProp ? createTooltip(wrapper, svg) : undefined;
     let startAngle = -Math.PI / 2;
     for (let i = 0; i < values.length; i++) {
         const angle = (values[i] / total) * 2 * Math.PI;
@@ -303,9 +394,34 @@ function renderPieChart(node, ctx) {
         const y1 = cy + r * Math.sin(startAngle);
         const x2 = cx + r * Math.cos(endAngle);
         const y2 = cy + r * Math.sin(endAngle);
+        const color = COLORS[i % COLORS.length];
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         path.setAttribute('d', `M ${cx},${cy} L ${x1},${y1} A ${r},${r} 0 ${largeArc} 1 ${x2},${y2} Z`);
-        path.setAttribute('fill', COLORS[i % COLORS.length]);
+        path.setAttribute('fill', color);
+        path.style.cursor = 'default';
+        if (ttCtx) {
+            const rawSlice = xAxisKey ? data[i][xAxisKey] : undefined;
+            const sliceLabel = rawSlice != null ? String(rawSlice) : `Slice ${i + 1}`;
+            const pct = `${((values[i] / total) * 100).toFixed(1)}%`;
+            const midAngle = startAngle + angle / 2;
+            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 },
+                ]);
+            });
+            path.addEventListener('mouseleave', () => {
+                ttCtx.tooltip.classList.remove('pf-visible');
+            });
+            path.addEventListener('touchstart', () => {
+                showTooltipAt(ttCtx, tipX, cy, sliceLabel, [
+                    { label: series[0].label ?? key, value: `${values[i]} (${pct})`, color },
+                ]);
+            }, { passive: true });
+            path.addEventListener('touchend', () => {
+                ttCtx.tooltip.classList.remove('pf-visible');
+            }, { passive: true });
+        }
         svg.appendChild(path);
         startAngle = endAngle;
     }
@@ -322,11 +438,15 @@ function renderFallbackChart(node, _ctx) {
     return e;
 }
 // ── Helpers ──────────────────────────────────────────────────────────────────
-function createSvg(width, height) {
+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`);
+    }
     svg.style.overflow = 'visible';
     return svg;
 }
@@ -380,14 +500,10 @@ function renderHistogram(node, ctx) {
     const W = 300;
     const H = height;
     const barW = W / binCount;
-    const ns = 'http://www.w3.org/2000/svg';
-    const svg = document.createElementNS(ns, 'svg');
-    svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
-    svg.setAttribute('width', '100%');
-    svg.setAttribute('height', String(H));
+    const svg = createSvg(W, H, 'Histogram');
     for (let i = 0; i < binCount; i++) {
         const barH = maxBin > 0 ? (bins[i] / maxBin) * H : 0;
-        const rect = document.createElementNS(ns, 'rect');
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
         rect.setAttribute('x', String(i * barW));
         rect.setAttribute('y', String(H - barH));
         rect.setAttribute('width', String(barW - 1));