/* FP&A Copilot — SVG charts: TrendChart + Donut + Sparkline */
const { useState: useStateChart, useEffect: useEffectChart } = React;
function TrendChart({ data, series, forecastFrom, onPointClick }) {
const W = 640, H = 230, padL = 46, padR = 12, padT = 14, padB = 26;
const innerW = W - padL - padR, innerH = H - padT - padB;
const all = data.flatMap((d) => series.map((s) => d[s.key] || 0));
const max = Math.max(...all, 1) * 1.08;
// A negative floor must be *stretched* (×1.08), not shrunk (×0.9), or the
// lowest points plot below the chart. Zero stays pinned at zero.
const rawMin = Math.min(...all, 0);
const min = rawMin < 0 ? rawMin * 1.08 : 0;
const x = (i) => padL + (innerW * i) / Math.max(data.length - 1, 1);
const y = (v) => padT + innerH - (innerH * (v - min)) / (max - min || 1);
const fmtAxis = (v) => {
const a = Math.abs(v), s = v < 0 ? "-" : "";
if (a >= 1e6) return `${s}£${(a / 1e6).toFixed(1)}M`;
if (a >= 1e3) return `${s}£${Math.round(a / 1e3)}k`;
return `${s}£${Math.round(a)}`;
};
const hasForecast = forecastFrom != null && forecastFrom < data.length;
const [grow, setGrow] = useStateChart(0);
const [hoverIdx, setHoverIdx] = useStateChart(null);
useEffectChart(() => {
const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
if (reduce) { setGrow(1); return; }
let raf, t0;
const tick = (t) => {
if (!t0) t0 = t;
const k = Math.min(1, (t - t0) / 520);
setGrow(1 - Math.pow(1 - k, 3));
if (k < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [JSON.stringify(data)]);
const gridY = 4;
return (
);
}
function Donut({ data, total, label }) {
const R = 70, r = 42, cx = 90, cy = 90;
let angle = -Math.PI / 2;
const sum = data.reduce((a, b) => a + (b.value || 0), 0);
const slices = data.map((d) => {
const theta = sum > 0 ? (d.value / sum) * 2 * Math.PI : 0;
const x1 = cx + R * Math.cos(angle), y1 = cy + R * Math.sin(angle);
angle += theta;
const x2 = cx + R * Math.cos(angle), y2 = cy + R * Math.sin(angle);
const xi = cx + r * Math.cos(angle - theta / 2), yi = cy + r * Math.sin(angle - theta / 2);
const large = theta > Math.PI ? 1 : 0;
return { ...d, x1, y1, x2, y2, xi, yi, large, theta };
});
return (
);
}
/* ── WaterfallChart ─────────────────────────────────────────────────────
Shows how Operating Profit moved from prior to current period.
Props:
prior number – prior period profit
current number – current period profit
bars [{label, impact, fav}] – category impacts (pre-sorted)
priorLabel string – short x-axis label for the prior bar (e.g. "Jul")
currentLabel string – short x-axis label for the current bar (e.g. "Aug")
──────────────────────────────────────────────────────────────────────── */
function WaterfallChart({ prior, current, bars, priorLabel, currentLabel }) {
const W = 720, H = 280;
const padL = 76, padR = 18, padT = 32, padB = 52;
const cW = W - padL - padR;
const cH = H - padT - padB;
const [hoveredIdx, setHoveredIdx] = useStateChart(null);
// ── Build the full segment list ───────────────────────────────────────
// segment: { label, base, impact, type:"total"|"fav"|"adv" }
const segs = [];
segs.push({ label: priorLabel || "Prior", base: 0, impact: prior, type: "total" });
let running = prior;
for (const b of (bars || [])) {
segs.push({ label: b.label, base: running, impact: b.impact, type: b.fav ? "fav" : "adv" });
running += b.impact;
}
segs.push({ label: currentLabel || "Current", base: 0, impact: current, type: "total" });
const n = segs.length;
const slotW = cW / n;
const barW = Math.min(slotW * 0.58, 54);
// ── Y domain ─────────────────────────────────────────────────────────
const allVals = segs.flatMap(s =>
s.type === "total" ? [0, s.impact] : [s.base, s.base + s.impact, 0]
);
const rawMin = Math.min(...allVals);
const rawMax = Math.max(...allVals);
const span = Math.max(rawMax - rawMin, Math.abs(rawMax) * 0.1, 500);
const yPad = span * 0.14;
const yMin = rawMin - yPad;
const yMax = rawMax + yPad;
const toY = v => padT + (1 - (v - yMin) / (yMax - yMin)) * cH;
// ── Axis ticks ───────────────────────────────────────────────────────
const TICKS = 5;
const ticks = Array.from({ length: TICKS }, (_, i) =>
yMin + (i / (TICKS - 1)) * (yMax - yMin)
);
// ── Formatters ───────────────────────────────────────────────────────
const fmtAxis = v => (window.fmtCurrency || (x => x))(v, { compact: true });
const fmtImpact = v => (window.fmtCurrency || (x => x))(v, { compact: true, signed: true });
// ── Label word-wrap (max 2 lines, 11 chars/line) ─────────────────────
const wrapLabel = text => {
const MAX = 11;
if (text.length <= MAX) return [text];
const words = text.split(" ");
let line1 = "", i = 0;
while (i < words.length && (line1 + (line1 ? " " : "") + words[i]).length <= MAX) {
line1 += (line1 ? " " : "") + words[i++];
}
const line2 = words.slice(i).join(" ").slice(0, MAX);
return line2 ? [line1, line2] : [line1];
};
// ── Colour tokens ────────────────────────────────────────────────────
const FILL = { total: "var(--waterfall-anchor, var(--navy-600))", fav: "var(--favourable)", adv: "var(--adverse)" };
const FILL_SOFT = { total: "rgba(0,0,0,0)", fav: "var(--favourable-soft)", adv: "var(--adverse-soft)" };
const zeroY = toY(0);
return (
);
}
/* ── Sparkline ────────────────────────────────────────────────────────────────
Tiny inline trend line for KPI tiles.
Props:
data — the trend array already fetched by Dashboard
valueKey — which key to plot ("revenue" | "profit" | "costs" | ...)
height — SVG height in px (default 28)
Green when last ≥ first, red otherwise. No axes, no labels.
──────────────────────────────────────────────────────────────────────────── */
function Sparkline({ data, valueKey, height = 28 }) {
if (!data || data.length < 2) return null;
const vals = data.map(d => {
const v = d[valueKey];
return typeof v === "number" && isFinite(v) ? v : null;
});
const valid = vals.filter(v => v !== null);
if (valid.length < 2) return null;
const W = 100, H = height, pad = 2;
const min = Math.min(...valid);
const max = Math.max(...valid);
const rng = max - min || 1;
const xOf = i => pad + ((W - 2 * pad) * i) / (vals.length - 1);
const yOf = v => H - pad - ((v - min) / rng) * (H - 2 * pad);
const pts = vals
.map((v, i) => v !== null ? `${xOf(i).toFixed(1)},${yOf(v).toFixed(1)}` : null)
.filter(Boolean);
const firstValid = vals.findIndex(v => v !== null);
const lastValid = vals.length - 1 - [...vals].reverse().findIndex(v => v !== null);
const areaPath = pts.length >= 2
? `M ${pts[0]} L ${pts.slice(1).join(" L ")} L ${xOf(lastValid).toFixed(1)},${H} L ${xOf(firstValid).toFixed(1)},${H} Z`
: null;
const up = valid[valid.length - 1] >= valid[0];
const stroke = up ? "var(--favourable)" : "var(--adverse)";
return (
);
}
// TrendSparkline: collision-proof alias — Movements.jsx declares its own
// top-level `Sparkline` (different props), and whichever file loads last wins
// the `window` slot. Consumers of THIS component must use the alias.
Object.assign(window, { TrendChart, Donut, WaterfallChart, Sparkline, TrendSparkline: Sparkline });