/* =============================================================
Chart components — pure SVG, no libraries.
============================================================= */
const { useState, useMemo, useRef, useEffect } = React;
/* ---------- StackedArea (cash flow S-curve) ---------- */
function StackedArea({ months, series, height = 220, formatY }) {
// series: [{ label, color, values: [n], stack: "neg" | "pos" }]
const W = 800;
const H = height;
const padL = 56, padR = 16, padT = 12, padB = 28;
const n = months.length;
// Build cumulative stacks per month (positive and negative separately)
const posStacks = months.map(() => 0);
const negStacks = months.map(() => 0);
const seriesWithBaseline = series.map(s => {
const out = { ...s, points: [] };
for (let i = 0; i < n; i++) {
const v = s.values[i] || 0;
if (v >= 0) {
const base = posStacks[i];
out.points.push({ base, top: base + v });
posStacks[i] = base + v;
} else {
const base = negStacks[i];
out.points.push({ base, top: base + v });
negStacks[i] = base + v;
}
}
return out;
});
const yMax = Math.max(...posStacks, 1);
const yMin = Math.min(...negStacks, -1);
const yRange = yMax - yMin;
const x = (i) => padL + (i / Math.max(1, n - 1)) * (W - padL - padR);
const y = (v) => padT + (1 - (v - yMin) / yRange) * (H - padT - padB);
// Cumulative net line
const cumulative = [];
let cum = 0;
for (let i = 0; i < n; i++) {
cum += series.reduce((s, sr) => s + (sr.values[i] || 0), 0);
cumulative.push(cum);
}
const cumMax = Math.max(...cumulative, 0);
const cumMin = Math.min(...cumulative, 0);
const cumRange = (cumMax - cumMin) || 1;
const yCum = (v) => padT + (1 - (v - cumMin) / cumRange) * (H - padT - padB);
// Y ticks
const yTicks = [];
const tickCount = 4;
for (let i = 0; i <= tickCount; i++) {
const v = yMin + (yRange * i) / tickCount;
yTicks.push({ v, y: y(v) });
}
return (
);
}
/* ---------- Bars (horizontal — cost stack, etc.) ---------- */
function HBars({ data, height = 240, formatV }) {
// data: [{ label, value, color }]
const W = 800;
const H = height;
const padL = 180, padR = 80, padT = 10, padB = 10;
const rowH = (H - padT - padB) / data.length;
const max = Math.max(...data.map(d => d.value), 1);
const x = (v) => padL + (v / max) * (W - padL - padR);
return (
);
}
/* ---------- Tornado chart ---------- */
function Tornado({ data, height = 280 }) {
// data: [{ label, irrLo, irrHi, baseIRR }]
const W = 800;
const H = height;
const padL = 200, padR = 60, padT = 16, padB = 26;
const rowH = (H - padT - padB) / Math.max(1, data.length);
// Centered on base
const base = data[0]?.baseIRR ?? 0;
let maxDelta = 0;
data.forEach(d => {
maxDelta = Math.max(maxDelta, Math.abs(d.irrLo - base), Math.abs(d.irrHi - base));
});
if (maxDelta === 0) maxDelta = 0.01;
const cx = padL + (W - padL - padR) / 2;
const scaleX = (W - padL - padR) / 2 / maxDelta;
return (
);
}
/* ---------- Histogram (Monte Carlo) ---------- */
function Histogram({ values, bins = 28, height = 200, formatX, target, label }) {
const W = 800;
const H = height;
const padL = 36, padR = 16, padT = 14, padB = 30;
if (!values || values.length === 0) return null;
const min = Math.min(...values);
const max = Math.max(...values);
const range = (max - min) || 1;
const binW = range / bins;
const counts = new Array(bins).fill(0);
for (const v of values) {
let idx = Math.floor((v - min) / binW);
if (idx >= bins) idx = bins - 1;
if (idx < 0) idx = 0;
counts[idx]++;
}
const maxCount = Math.max(...counts);
const innerW = W - padL - padR;
const bw = innerW / bins;
const x = (i) => padL + i * bw;
const y = (c) => padT + (1 - c / maxCount) * (H - padT - padB);
// p10 / p50 / p90 ticks
const sorted = [...values].sort((a, b) => a - b);
const p10 = sorted[Math.floor(sorted.length * 0.1)];
const p50 = sorted[Math.floor(sorted.length * 0.5)];
const p90 = sorted[Math.floor(sorted.length * 0.9)];
const xVal = (v) => padL + ((v - min) / range) * innerW;
return (
);
}
/* ---------- Waterfall (cost / return breakdown) ---------- */
function Waterfall({ steps, height = 240, formatY }) {
// steps: [{ label, value, type: "start" | "delta" | "end" }]
const W = 800;
const H = height;
const padL = 50, padR = 16, padT = 30, padB = 40;
let cum = 0;
const rows = steps.map(s => {
if (s.type === "start" || s.type === "end") {
const r = { ...s, from: 0, to: s.value };
cum = s.value;
return r;
}
const from = cum;
cum += s.value;
return { ...s, from, to: cum };
});
const allVals = rows.flatMap(r => [r.from, r.to]);
const yMax = Math.max(...allVals, 0);
const yMin = Math.min(...allVals, 0);
const yRange = (yMax - yMin) || 1;
const innerW = W - padL - padR;
const bw = innerW / steps.length;
const x = (i) => padL + i * bw;
const y = (v) => padT + (1 - (v - yMin) / yRange) * (H - padT - padB);
return (
);
}
/* ---------- Donut ---------- */
function Donut({ data, size = 160, thickness = 18 }) {
// data: [{ label, value, color }]
const total = data.reduce((s, d) => s + d.value, 0) || 1;
const r = size / 2 - thickness / 2;
const cx = size / 2, cy = size / 2;
let a0 = -Math.PI / 2;
const arcs = data.map(d => {
const a1 = a0 + (d.value / total) * Math.PI * 2;
const large = (a1 - a0) > Math.PI ? 1 : 0;
const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0);
const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
const path = `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1}`;
a0 = a1;
return { ...d, path };
});
return (
);
}
/* ---------- Sparkline ---------- */
function Sparkline({ values, height = 28, color = "var(--ad-navy-800)" }) {
const W = 100, H = height;
if (!values || values.length === 0) return null;
const min = Math.min(...values);
const max = Math.max(...values);
const r = (max - min) || 1;
const pts = values.map((v, i) => `${(i / (values.length - 1)) * W},${H - ((v - min) / r) * H}`).join(" ");
return (
);
}
window.Charts = { StackedArea, HBars, Tornado, Histogram, Waterfall, Donut, Sparkline };