portal-mojo 0.1.0

package/src/charts/MiniChart.tsx

@@ -0,0 +1,283 @@
+// MiniChart — the compact single-series sparkline (line / bar), ported from
+// web-mojo src/extensions/charts/MiniChart.js (674 lines, read in full).
+// Carries: area fill, curve smoothing, hard crops (minValue/maxValue), bar
+// soft bounds (softMin/softMax expand-only targets), the zero-crossing-aware
+// x-axis, per-bucket hover tooltip + crosshair + bar highlight, dots, and
+// the all-zero "alive, just zero" dashed baseline. Draw-in animation uses
+// pathLength-normalized CSS (no getTotalLength measuring).
+//
+// Deviations, deliberate: geometry comes from a measured container width
+// (ResizeObserver — the SeriesChart pattern) instead of the source's
+// stretched viewBox; colors default to theme tokens; the tooltip formatter
+// is a typed function (never a DataFormatter pipe string).
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { toNumber } from './stats';
+
+export type MiniChartType = 'line' | 'bar';
+
+export interface MiniChartProps {
+    data: readonly number[];
+    /** Per-bucket tooltip labels (index-aligned with data). */
+    labels?: readonly string[];
+    /** 'line' | 'bar'. Unknown values warn and fall back to 'line'. */
+    chartType?: MiniChartType;
+    /** px, or 'fill' to take the container's height (uniform-height cards). */
+    height?: number | 'fill';
+    /** Stroke / bar color — any CSS color incl. var() tokens. */
+    color?: string;
+    /** Area fill under the line. Default: `color` at 0.12 opacity. */
+    fillColor?: string;
+    fill?: boolean;
+    strokeWidth?: number;
+    barGap?: number;
+    /** 0 = straight segments; the source's cubic smoothing. */
+    smoothing?: number;
+    padding?: number;
+    /** Hard axis crops (both chart types). */
+    minValue?: number;
+    maxValue?: number;
+    /** Bar-only soft bounds: normalize to these, expand if data exceeds. */
+    softMin?: number;
+    softMax?: number;
+    showDots?: boolean;
+    dotRadius?: number;
+    showTooltip?: boolean;
+    valueFormatter?: (v: number) => string;
+    showCrosshair?: boolean;
+    showXAxis?: boolean;
+    animate?: boolean;
+    className?: string;
+}
+
+/** The source's simpler horizontal-control-point smoothing (not Catmull-Rom). */
+function smoothPath(points: readonly { x: number; y: number }[], smoothing: number): string {
+    if (points.length === 0) return '';
+    if (points.length < 2 || smoothing <= 0) {
+        return `M ${points.map((p) => `${p.x},${p.y}`).join(' L ')}`;
+    }
+    let path = `M ${points[0]!.x},${points[0]!.y}`;
+    for (let i = 0; i < points.length - 1; i++) {
+        const cur = points[i]!;
+        const next = points[i + 1]!;
+        const cp1x = cur.x + (next.x - cur.x) * smoothing;
+        const cp2x = next.x - (next.x - cur.x) * smoothing;
+        path += ` C ${cp1x},${cur.y} ${cp2x},${next.y} ${next.x},${next.y}`;
+    }
+    return path;
+}
+
+export function MiniChart({
+    data: dataProp,
+    labels,
+    chartType = 'line',
+    height: heightProp = 48,
+    color = 'var(--accent)',
+    fillColor,
+    fill = true,
+    strokeWidth = 2,
+    barGap = 2,
+    smoothing = 0.3,
+    padding = 2,
+    minValue,
+    maxValue,
+    softMin,
+    softMax,
+    showDots = false,
+    dotRadius = 2,
+    showTooltip = true,
+    valueFormatter,
+    showCrosshair = true,
+    showXAxis = false,
+    animate = true,
+    className = '',
+}: MiniChartProps) {
+    // Malformed feed → warn + empty (unknown-value rule; never crash).
+    const validShape = Array.isArray(dataProp);
+    if (!validShape) {
+        console.warn('MiniChart: data is not an array — rendering empty', { data: dataProp });
+    }
+    let type: MiniChartType = chartType;
+    if (type !== 'line' && type !== 'bar') {
+        console.warn(`MiniChart: unknown chartType "${String(chartType)}" — falling back to "line"`);
+        type = 'line';
+    }
+    const values = useMemo(() => (validShape ? dataProp.map(toNumber) : []), [validShape, dataProp]);
+
+    const wrapRef = useRef<HTMLDivElement>(null);
+    const [width, setWidth] = useState(120);
+    const [fillH, setFillH] = useState(72);
+    const [hover, setHover] = useState<number | null>(null);
+
+    useLayoutEffect(() => {
+        const node = wrapRef.current;
+        if (!node) return;
+        const ro = new ResizeObserver(([entry]) => {
+            const w = entry?.contentRect.width ?? 0;
+            if (w > 0) setWidth(w);
+            // 'fill' cards take their height from the box too, so a chart can
+            // grow into a stretched card instead of leaving a void under it.
+            const h = entry?.contentRect.height ?? 0;
+            if (h > 0) setFillH(h);
+        });
+        ro.observe(node);
+        return () => ro.disconnect();
+    }, []);
+
+    // Resolve 'fill' to the measured box height.
+    const height = heightProp === 'fill' ? fillH : heightProp;
+
+    const n = values.length;
+    const dataMin = n ? Math.min(...values) : 0;
+    const dataMax = n ? Math.max(...values) : 0;
+
+    // Line bounds (source calculateBounds): hard crops win; zero-range pads.
+    let lineMin = minValue ?? dataMin;
+    let lineMax = maxValue ?? dataMax;
+    if (lineMax - lineMin === 0) {
+        if (type === 'bar' && lineMin === 0) lineMax = 1;
+        else { lineMin -= 1; lineMax += 1; }
+    }
+
+    const drawTop = padding;
+    const drawBottom = height - padding;
+    const drawH = drawBottom - drawTop;
+    const xStep = (width - padding * 2) / (n - 1 || 1);
+    const points = values.map((v, i) => ({
+        x: padding + i * xStep,
+        y: drawBottom - ((v - lineMin) / (lineMax - lineMin)) * drawH,
+    }));
+
+    // Bar bounds (source renderBar): always include zero; soft bounds expand.
+    const barLo = minValue !== undefined ? minValue : Math.min(0, softMin ?? 0, dataMin);
+    const barHiRaw = maxValue !== undefined ? maxValue : Math.max(0, softMax ?? 0, dataMax);
+    const barHi = barHiRaw === barLo ? barLo + 1 : barHiRaw;
+    const yScale = drawH / (barHi - barLo);
+    const yBase = Math.max(drawTop, Math.min(drawBottom, drawBottom - (0 - barLo) * yScale));
+
+    const allZero = n > 0 && dataMin === 0 && dataMax === 0;
+    const callerBounds = minValue !== undefined || maxValue !== undefined || softMin !== undefined || softMax !== undefined;
+    const barsAsBaseline = type === 'bar' && allZero && !callerBounds;
+
+    // X-axis at zero when the data crosses it, else at the bottom (source).
+    let axisY = drawBottom;
+    if (lineMin <= 0 && lineMax >= 0) {
+        axisY = drawBottom - ((0 - lineMin) / (lineMax - lineMin)) * drawH;
+    }
+
+    const barW = n > 0 ? Math.max(1, (width - padding * 2 - barGap * (n - 1)) / n) : 0;
+    const fmt = valueFormatter ?? ((v: number) => v.toLocaleString());
+    const fillPaint = fillColor ?? color;
+    const fillOpacity = fillColor ? 1 : 0.12;
+
+    const colW = n > 0 ? width / n : width;
+    const onMove = (e: React.MouseEvent<SVGRectElement>) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        setHover(Math.min(n - 1, Math.max(0, Math.floor(x / (colW || 1)))));
+    };
+
+    // Re-run the draw-in whenever the series identity changes (source parity:
+    // every setData re-animated).
+    const dataKey = useMemo(() => values.join('|'), [values]);
+
+    const linePath = smoothPath(points, smoothing);
+    const areaPath = points.length
+        ? `${linePath} L ${points[points.length - 1]!.x},${drawBottom} L ${points[0]!.x},${drawBottom} Z`
+        : '';
+
+    const tipX = hover != null ? Math.min(Math.max(colW * (hover + 0.5), 40), Math.max(width - 40, 40)) : 0;
+
+    return (
+        <div
+            ref={wrapRef}
+            className={`minichart${className ? ` ${className}` : ''}`}
+            style={{ height: heightProp === 'fill' ? '100%' : height }}
+            onMouseLeave={() => setHover(null)}
+        >
+            <svg width={width} height={height} className="minichart-svg" role="img" key={animate ? dataKey : 'static'}>
+                {showXAxis && n > 0 && (
+                    <line
+                        x1={padding} x2={width - padding} y1={axisY} y2={axisY}
+                        stroke={color} strokeWidth={1} strokeOpacity={0.5} strokeDasharray="2,2"
+                    />
+                )}
+
+                {n > 0 && type === 'line' && (
+                    <>
+                        {fill && (
+                            <path d={areaPath} fill={fillPaint} fillOpacity={fillOpacity} stroke="none" />
+                        )}
+                        <path
+                            d={linePath}
+                            fill="none"
+                            stroke={color}
+                            strokeWidth={strokeWidth}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            pathLength={1}
+                            className={animate ? 'minichart-draw' : undefined}
+                        />
+                        {showDots && points.map((p, i) => (
+                            <circle key={i} cx={p.x} cy={p.y} r={hover === i ? dotRadius + 1 : dotRadius} fill={color} />
+                        ))}
+                    </>
+                )}
+
+                {n > 0 && type === 'bar' && (barsAsBaseline ? (
+                    // All-zero, no caller bounds: dashed baseline says "alive,
+                    // just zero" instead of looking broken (source behavior).
+                    <line
+                        x1={padding} x2={width - padding} y1={drawBottom} y2={drawBottom}
+                        stroke={color} strokeWidth={1} strokeOpacity={0.4} strokeDasharray="2,2"
+                    />
+                ) : (
+                    values.map((v, i) => {
+                        const yRaw = drawBottom - (v - barLo) * yScale;
+                        const yVal = Math.max(drawTop, Math.min(drawBottom, yRaw));
+                        const top = Math.min(yVal, yBase);
+                        const h = Math.max(0, Math.abs(yVal - yBase));
+                        return (
+                            <rect
+                                key={i}
+                                x={points[i]!.x - barW / 2}
+                                y={top}
+                                width={barW}
+                                height={h}
+                                rx={1}
+                                fill={color}
+                                opacity={hover === i ? 0.7 : 1}
+                                className={animate ? 'minichart-grow' : undefined}
+                                style={animate ? { animationDelay: `${i * 20}ms` } : undefined}
+                            />
+                        );
+                    })
+                ))}
+
+                {showCrosshair && hover != null && (
+                    <line
+                        x1={colW * (hover + 0.5)} x2={colW * (hover + 0.5)}
+                        y1={0} y2={height}
+                        className="minichart-crosshair"
+                    />
+                )}
+
+                {/* One overlay drives index hover (SeriesChart pattern). */}
+                {n > 0 && (showTooltip || showCrosshair) && (
+                    <rect
+                        x={0} y={0} width={width} height={height}
+                        fill="transparent"
+                        onMouseMove={onMove}
+                        onMouseLeave={() => setHover(null)}
+                    />
+                )}
+            </svg>
+
+            {showTooltip && hover != null && n > 0 && (
+                <div className="minichart-tip" style={{ left: tipX }}>
+                    {labels?.[hover] != null && <div className="minichart-tip-label">{labels[hover]}</div>}
+                    <strong>{fmt(values[hover] ?? 0)}</strong>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/charts/PieChart.tsx

@@ -0,0 +1,354 @@
+// PieChart — native SVG pie / doughnut, ported from web-mojo
+// src/extensions/charts/PieChart.js (546 lines, read in full). No chart
+// library. Carries: the three input shapes (array of {label,value,color?} /
+// Chart.js {labels,datasets} / object map), optional endpoint fetch through
+// the one client boundary, the golden-angle color generator, cutout +
+// center label/sub-label (static or computed), right/bottom legend, slice
+// edge labels with percentages, clamped tooltip, slice click, the
+// full-circle single-segment special case, and the label-keyed arc tween.
+//
+// Deviations, deliberate:
+//   · default palette is CHART_PALETTE (the mission-control set SeriesChart
+//     uses) instead of web-mojo's Chart.js-era hexes; overflow indices go to
+//     the golden-angle generator exactly as in the source;
+//   · valueFormatter is a typed function (never a DataFormatter pipe string);
+//   · malformed data warns and renders the empty state (the source silently
+//     rendered nothing);
+//   · endpoint errors warn + empty state; TanStack owns retry/caching.
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { mojoCall } from '../client/client';
+import type { Params } from '../client/types';
+import { CHART_PALETTE } from './SeriesChart';
+import {
+    arcPath,
+    buildPieGeometry,
+    goldenAngleColor,
+    interpolateSegments,
+    parsePieInput,
+    type PieInput,
+    type PieSegment,
+} from './pie-math';
+
+/** The center-label context ({total, segments} — source ctx shape). */
+export interface PieCenterContext {
+    total: number;
+    segments: readonly PieSegment[];
+}
+
+export type PieCenterLabel = string | number | ((ctx: PieCenterContext) => string | number);
+
+export interface PieChartProps {
+    /** One of the three shapes. Ignored while `endpoint` is set. */
+    data?: PieInput | null;
+    /** GET this endpoint through the client boundary; its `data` feeds the pie. */
+    endpoint?: string;
+    /** Wire params for the endpoint fetch. */
+    params?: Params;
+    width?: number;
+    height?: number;
+    /** 0 = solid pie; 0..1 = inner-hole fraction (doughnut). */
+    cutout?: number;
+    /** Doughnut center text (needs cutout > 0). String or ({total, segments}) => string. */
+    centerLabel?: PieCenterLabel | null;
+    /** Smaller uppercase line under the center label. */
+    centerSubLabel?: PieCenterLabel | null;
+    /** Per-index colors; overflow falls to `colorGenerator`. Default CHART_PALETTE. */
+    colors?: string[];
+    colorGenerator?: (i: number) => string;
+    showLegend?: boolean;
+    /** 'right' | 'bottom' | 'none'. Unknown values warn and fall back to 'right'. */
+    legendPosition?: 'right' | 'bottom' | 'none';
+    /** Slice-edge labels outside the arc. */
+    showLabels?: boolean;
+    /** Append "(12.5%)" to edge labels; legend always shows percentages. */
+    showPercentages?: boolean;
+    showTooltip?: boolean;
+    animate?: boolean;
+    animationDuration?: number;
+    valueFormatter?: (v: number) => string;
+    onSliceClick?: (e: { label: string; value: number; pct: number; index: number }) => void;
+    emptyText?: string;
+    className?: string;
+}
+
+const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3);
+
+export function PieChart({
+    data: dataProp = null,
+    endpoint,
+    params,
+    width = 200,
+    height = 200,
+    cutout = 0,
+    centerLabel = null,
+    centerSubLabel = null,
+    colors,
+    colorGenerator = goldenAngleColor,
+    showLegend = true,
+    legendPosition = 'right',
+    showLabels = false,
+    showPercentages = true,
+    showTooltip = true,
+    animate = true,
+    animationDuration = 300,
+    valueFormatter,
+    onSliceClick,
+    emptyText = 'No data',
+    className = '',
+}: PieChartProps) {
+    let legendPos: 'right' | 'bottom' | 'none' = legendPosition;
+    if (legendPos !== 'right' && legendPos !== 'bottom' && legendPos !== 'none') {
+        console.warn(`PieChart: unknown legendPosition "${String(legendPosition)}" — falling back to "right"`);
+        legendPos = 'right';
+    }
+    const legendOn = showLegend && legendPos !== 'none';
+
+    // ── Endpoint fetch (optional) through the one client boundary ─────
+    const query = useQuery({
+        queryKey: [endpoint, 'pie', params ?? {}],
+        queryFn: () => mojoCall(endpoint!, { params }),
+        enabled: !!endpoint,
+    });
+    useEffect(() => {
+        if (query.isError) {
+            console.warn(`PieChart: endpoint fetch failed (${endpoint}) — rendering empty state`, query.error);
+        }
+    }, [query.isError, query.error, endpoint]);
+
+    // Source heuristic carried over: some endpoints nest the payload one
+    // level deeper (`data.data`) — prefer it when present.
+    const raw: unknown = endpoint
+        ? (query.data ? ((query.data.data as { data?: unknown } | null)?.data ?? query.data.data) : null)
+        : dataProp;
+
+    // ── Normalize + color + geometry ──────────────────────────────────
+    const palette = colors && colors.length ? colors : CHART_PALETTE;
+    const target = useMemo(() => {
+        const slices = parsePieInput(raw);
+        const total = slices.reduce((s, d) => s + d.value, 0);
+        const colored = slices.map((s, i) => ({
+            label: s.label,
+            value: s.value,
+            pct: total > 0 ? (s.value / total) * 100 : 0,
+            color: s.color ?? palette[i] ?? colorGenerator(i),
+        }));
+        return buildPieGeometry(colored);
+    }, [raw, palette, colorGenerator]);
+    const total = useMemo(() => target.reduce((s, seg) => s + seg.value, 0), [target]);
+
+    // ── Tween (label-keyed, rAF, cancelled on change/unmount) ─────────
+    const [painted, setPainted] = useState<readonly PieSegment[]>(target);
+    const prevRef = useRef<readonly PieSegment[]>(target);
+    const firstPaint = useRef(true);
+    const targetKey = useMemo(
+        () => target.map((s) => `${s.label}:${s.value}`).join('|'),
+        [target],
+    );
+    useEffect(() => {
+        // First paint is direct (source: onAfterRender painted without animation).
+        if (firstPaint.current || !animate || animationDuration <= 0) {
+            firstPaint.current = false;
+            prevRef.current = target;
+            setPainted(target);
+            return;
+        }
+        const prev = prevRef.current;
+        const start = performance.now();
+        let raf = 0;
+        const step = (now: number) => {
+            const t = Math.min(1, (now - start) / animationDuration);
+            setPainted(interpolateSegments(prev, target, easeOutCubic(t)));
+            if (t < 1) raf = requestAnimationFrame(step);
+            else prevRef.current = target;
+        };
+        raf = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(raf);
+        // targetKey is the identity of `target`; the ref carries the old one.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [targetKey, animate, animationDuration]);
+
+    // ── Tooltip (clamped inside the svg area, source _moveTooltip) ────
+    const [hover, setHover] = useState<number | null>(null);
+    // Legend hover highlights a slice but must not summon the mouse-anchored
+    // tooltip (it would render at a stale position) — arc hover only.
+    const [tipOn, setTipOn] = useState(false);
+    const areaRef = useRef<HTMLDivElement>(null);
+    const tipRef = useRef<HTMLDivElement>(null);
+    const mouseRef = useRef({ x: 0, y: 0 });
+    const placeTip = () => {
+        const tip = tipRef.current;
+        const area = areaRef.current;
+        if (!tip || !area) return;
+        const aw = area.clientWidth;
+        const ah = area.clientHeight;
+        const tw = tip.offsetWidth;
+        const th = tip.offsetHeight;
+        let left = mouseRef.current.x - tw / 2;
+        let top = mouseRef.current.y - th - 8;
+        if (left < 0) left = 0;
+        if (left + tw > aw) left = aw - tw;
+        if (top < 0) top = mouseRef.current.y + 12;
+        if (top + th > ah) top = ah - th;
+        tip.style.left = `${left}px`;
+        tip.style.top = `${top}px`;
+    };
+    useLayoutEffect(() => { if (hover != null) placeTip(); });
+    const trackMouse = (e: React.MouseEvent) => {
+        const area = areaRef.current;
+        if (!area) return;
+        const rect = area.getBoundingClientRect();
+        mouseRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        placeTip();
+    };
+
+    const fmt = valueFormatter ?? ((v: number) => v.toLocaleString());
+
+    const cx = width / 2;
+    const cy = height / 2;
+    const outerR = Math.min(cx, cy) - 4;
+    const innerR = cutout > 0 ? outerR * Math.min(1, Math.max(0, cutout)) : 0;
+
+    const visible = painted.filter((s) => Math.abs(s.endAngle - s.startAngle) > 1e-6);
+    const fullCircle = visible.length === 1
+        && Math.abs(Math.abs(visible[0]!.endAngle - visible[0]!.startAngle) - Math.PI * 2) < 1e-3;
+    const hasData = target.length > 0 && total > 0;
+
+    const centerCtx: PieCenterContext = { total, segments: target };
+    const resolveCenter = (v: PieCenterLabel | null): string | null => {
+        if (v == null) return null;
+        return String(typeof v === 'function' ? v(centerCtx) : v);
+    };
+    const centerMain = resolveCenter(centerLabel);
+    const centerSub = resolveCenter(centerSubLabel);
+
+    const sliceHandlers = (i: number) => ({
+        onMouseEnter: (e: React.MouseEvent) => { setHover(i); if (showTooltip) { setTipOn(true); trackMouse(e); } },
+        onMouseMove: (e: React.MouseEvent) => { if (showTooltip) trackMouse(e); },
+        onMouseLeave: () => { setHover(null); setTipOn(false); },
+        onClick: () => {
+            const seg = target[i];
+            if (seg && onSliceClick) onSliceClick({ label: seg.label, value: seg.value, pct: seg.pct, index: i });
+        },
+    });
+
+    const hovered = hover != null ? target[hover] : null;
+
+    return (
+        <div className={`pie-chart pie-layout-${legendPos === 'bottom' ? 'bottom' : 'right'}${className ? ` ${className}` : ''}`}>
+            <div className="pie-svg-area" style={{ width, height }} ref={areaRef}>
+                {!hasData ? (
+                    <div className="pie-empty">{endpoint && query.isPending ? <span className="skel skel-block" /> : emptyText}</div>
+                ) : (
+                    <svg
+                        className="pie-svg"
+                        viewBox={`0 0 ${width} ${height}`}
+                        width="100%"
+                        height="100%"
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                    >
+                        {fullCircle ? (
+                            // Single-segment special case: SVG arcs cannot draw a
+                            // full 360° — a circle element does (source parity).
+                            innerR > 0 ? (
+                                <circle
+                                    cx={cx} cy={cy} r={(outerR + innerR) / 2}
+                                    fill="none" stroke={visible[0]!.color} strokeWidth={outerR - innerR}
+                                    className="pie-segment"
+                                    {...sliceHandlers(painted.indexOf(visible[0]!))}
+                                />
+                            ) : (
+                                <circle
+                                    cx={cx} cy={cy} r={outerR} fill={visible[0]!.color}
+                                    className="pie-segment"
+                                    {...sliceHandlers(painted.indexOf(visible[0]!))}
+                                />
+                            )
+                        ) : (
+                            painted.map((seg, i) => {
+                                if (seg.endAngle - seg.startAngle <= 0) return null;
+                                return (
+                                    <path
+                                        key={seg.label || i}
+                                        d={arcPath(cx, cy, outerR, innerR, seg)}
+                                        fill={seg.color}
+                                        stroke="var(--surface)"
+                                        strokeWidth={1.5}
+                                        className={`pie-segment${hover === i ? ' pie-segment-hot' : ''}`}
+                                        {...sliceHandlers(i)}
+                                    />
+                                );
+                            })
+                        )}
+
+                        {/* Slice-edge labels */}
+                        {showLabels && !fullCircle && painted.map((seg, i) => {
+                            const arc = seg.endAngle - seg.startAngle;
+                            if (arc <= 0.05) return null;
+                            const mid = (seg.startAngle + seg.endAngle) / 2;
+                            const lx = cx + (outerR + 12) * Math.cos(mid);
+                            const ly = cy + (outerR + 12) * Math.sin(mid);
+                            return (
+                                <text
+                                    key={`l${seg.label || i}`}
+                                    x={lx} y={ly}
+                                    textAnchor={lx < cx ? 'end' : 'start'}
+                                    className="pie-edge-label"
+                                >
+                                    {showPercentages ? `${seg.label} (${seg.pct.toFixed(1)}%)` : seg.label}
+                                </text>
+                            );
+                        })}
+
+                        {/* Doughnut center label(s) */}
+                        {innerR > 0 && centerMain != null && (
+                            <text
+                                x={cx} y={centerSub != null ? cy - 2 : cy + 6}
+                                textAnchor="middle" dominantBaseline="middle"
+                                className="pie-center-label"
+                            >
+                                {centerMain}
+                            </text>
+                        )}
+                        {innerR > 0 && centerSub != null && (
+                            <text
+                                x={cx} y={cy + 16}
+                                textAnchor="middle" dominantBaseline="middle"
+                                className="pie-center-sub"
+                            >
+                                {centerSub.toUpperCase()}
+                            </text>
+                        )}
+                    </svg>
+                )}
+
+                {showTooltip && tipOn && hovered && (
+                    <div className="pie-tip" ref={tipRef}>
+                        <strong>{hovered.label}</strong>
+                        <span>{fmt(hovered.value)} ({hovered.pct.toFixed(1)}%)</span>
+                    </div>
+                )}
+            </div>
+
+            {legendOn && hasData && (
+                <div className="pie-legend">
+                    {target.map((seg, i) => (
+                        <div
+                            key={seg.label || i}
+                            className={`pie-legend-item${hover === i ? ' pie-legend-hot' : ''}`}
+                            onMouseEnter={() => setHover(i)}
+                            onMouseLeave={() => setHover(null)}
+                        >
+                            {/* Color as a style property, never string-interpolated markup —
+                                the value can come from the API (source note carried over). */}
+                            <span className="pie-legend-swatch" style={{ background: seg.color }} />
+                            <span className="pie-legend-label">{seg.label}</span>
+                            <span className="pie-legend-value">{seg.pct.toFixed(1)}%</span>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}