// Slate — chart primitives (small, hand-rolled SVG)
const Charts = {};
Charts.LineChart = ({ series, height = 220, showAxis = true, annotation }) => {
// series: [{ name, color, points: [y...], dashed?: bool }]
const w = 800, h = height, pad = { l: 8, r: 8, t: 14, b: 22 };
const all = series.flatMap(s => s.points);
const min = Math.min(...all), max = Math.max(...all);
const range = max - min || 1;
const stepX = (w - pad.l - pad.r) / (series[0].points.length - 1);
const yPx = v => pad.t + (h - pad.t - pad.b) * (1 - (v - min) / range);
const path = pts => pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${pad.l + i * stepX} ${yPx(p)}`).join(' ');
return (
);
};
Charts.Spark = ({ points, height = 36, color = 'var(--ink)', fill = false }) => {
const w = 100, h = height;
const min = Math.min(...points), max = Math.max(...points), r = max - min || 1;
const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${(i/(points.length-1))*w} ${h - ((p - min)/r)*h*0.9 - 1}`).join(' ');
const fillPath = fill ? `${path} L ${w} ${h} L 0 ${h} Z` : null;
return (
);
};
Charts.Donut = ({ data, size = 160, thickness = 22 }) => {
// data: [{ pct, color, label }]
const r = size / 2 - thickness / 2;
const cx = size / 2, cy = size / 2;
const total = data.reduce((a, b) => a + b.pct, 0);
let cumulative = 0;
return (
);
};
Charts.Bars = ({ data, height = 140, color = 'var(--ink-3)' }) => {
// data: [{ label, value }]
const w = 600, max = Math.max(...data.map(d => d.value));
const bw = w / data.length;
return (
);
};
// Payoff diagram for structured products. Renders payoff (% of notional) vs underlier
// performance from -50% to +50%. `shape` switches the curve; `barrierPct` draws a vertical
// barrier marker. Coupon rate (annualized) inflates the upside cap on income shapes.
Charts.PayoffDiagram = ({ shape = 'phoenix', barrierPct = 65, coupon = 10, height = 160, label }) => {
const w = 320, h = height, pad = { l: 28, r: 8, t: 14, b: 22 };
const xMin = -50, xMax = 50;
const yMin = -50, yMax = Math.max(30, coupon * 2 + 5);
const pxX = u => pad.l + ((u - xMin) / (xMax - xMin)) * (w - pad.l - pad.r);
const pxY = p => pad.t + (1 - (p - yMin) / (yMax - yMin)) * (h - pad.t - pad.b);
const pts = [];
for (let u = xMin; u <= xMax; u += 1) {
let p = 0;
const barrier = barrierPct - 100;
if (shape === 'phoenix') {
p = u >= barrier ? coupon : Math.min(coupon, u);
} else if (shape === 'reverse_convertible') {
p = u >= barrier ? coupon : coupon + u;
} else if (shape === 'buffer') {
const buf = barrierPct - 100;
if (u >= 0) p = Math.min(u, 25);
else if (u >= buf) p = 0;
else p = u - buf;
} else if (shape === 'booster') {
const floor = barrierPct - 100;
if (u >= 0) p = Math.min(u * 1.5, 30);
else if (u >= floor) p = 0;
else p = u - floor;
}
pts.push([u, p]);
}
const path = pts.map(([u, p], i) => `${i === 0 ? 'M' : 'L'} ${pxX(u)} ${pxY(p)}`).join(' ');
return (
);
};
// J-curve for private fund holdings. data: [{ q, called, distributed, nav }] cumulative.
// Plots total value (nav + distributed) on the upside and -called on the downside.
Charts.JCurve = ({ data, height = 180 }) => {
const w = 600, h = height, pad = { l: 8, r: 8, t: 14, b: 24 };
const tv = data.map(d => d.nav + d.distributed);
const callOut = data.map(d => -d.called);
const all = [...tv, ...callOut];
const min = Math.min(...all), max = Math.max(...all);
const range = max - min || 1;
const stepX = (w - pad.l - pad.r) / (data.length - 1);
const yPx = v => pad.t + (h - pad.t - pad.b) * (1 - (v - min) / range);
const path = arr => arr.map((v, i) => `${i === 0 ? 'M' : 'L'} ${pad.l + i * stepX} ${yPx(v)}`).join(' ');
return (
);
};
// Cashflow projection — paired bars per period. Calls render below the zero line
// (negative), distributions render above. Used on the Alternatives Cashflow plan tab.
Charts.CashflowBars = ({ data, height = 220 }) => {
const w = 720, pad = { l: 50, r: 8, t: 14, b: 28 };
const allValues = data.flatMap(d => [d.calls, d.dist]).filter(v => v !== 0);
const maxAbs = Math.max(...allValues.map(Math.abs));
const yScale = v => pad.t + (height - pad.t - pad.b) * (1 - (v + maxAbs) / (2 * maxAbs));
const stepX = (w - pad.l - pad.r) / data.length;
const barW = stepX * 0.55;
return (
);
};
// Stacked cashflow chart — per-quarter inflows above the zero line, outflows
// below, color-coded by source. Shared scale on both sides. Each bar segment
// carries an SVG so hovering reveals exact source + amount. Used by
// the Household Cashflow tab. `sources` is the column definition list with
// { key, label, color, sign:'in'|'out' }; `formatValue` formats $ for tooltips.
Charts.StackedCashflow = ({ data, sources, formatValue, height = 320 }) => {
const w = 720, pad = { l: 60, r: 8, t: 14, b: 28 };
const fv = formatValue || (v => '$' + Math.round(v/1000) + 'k');
const inSrc = sources.filter(s => s.sign === 'in');
const outSrc = sources.filter(s => s.sign === 'out');
const totalIn = d => inSrc.reduce((a, s) => a + (d[s.key] || 0), 0);
const totalOut = d => Math.abs(outSrc.reduce((a, s) => a + (d[s.key] || 0), 0));
const maxAbs = Math.max(...data.map(totalIn), ...data.map(totalOut)) || 1;
const yScale = v => pad.t + (height - pad.t - pad.b) * (1 - (v + maxAbs) / (2 * maxAbs));
const zeroY = yScale(0);
const stepX = (w - pad.l - pad.r) / data.length;
const barW = stepX * 0.55;
return (
<svg viewBox={`0 0 ${w} ${height}`} style={{ width: '100%', height }} preserveAspectRatio="none">
{[-1, -0.5, 0, 0.5, 1].map(t => {
const y = yScale(t * maxAbs);
return <line key={t} x1={pad.l} y1={y} x2={w-pad.r} y2={y} stroke="var(--rule)" strokeWidth="1" strokeDasharray={t === 0 ? '0' : '2 4'}/>;
})}
{[-1, -0.5, 0.5, 1].map(t => {
const v = t * maxAbs;
return <text key={t} x={pad.l - 6} y={yScale(v) + 3} fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)" textAnchor="end">{(v >= 0 ? '+' : '') + (v/1e6).toFixed(1) + 'M'}</text>;
})}
{data.map((d, i) => {
const cx = pad.l + (i + 0.5) * stepX;
let posOff = 0, negOff = 0;
return (
<g key={i}>
{inSrc.map(s => {
const val = d[s.key] || 0;
if (val <= 0) return null;
const h = (val / maxAbs) * (height - pad.t - pad.b) / 2;
const y = zeroY - posOff - h;
posOff += h;
return (
<rect key={s.key} x={cx - barW/2} y={y} width={barW} height={h} fill={s.color} opacity="0.9" style={{ cursor:'help' }}>
<title>{`${d.q} · ${s.label}: +${fv(val)}`}
);
})}
{outSrc.map(s => {
const val = d[s.key] || 0;
if (val >= 0) return null;
const h = (Math.abs(val) / maxAbs) * (height - pad.t - pad.b) / 2;
const y = zeroY + negOff;
negOff += h;
return (
{`${d.q} · ${s.label}: ${fv(val)}`}
);
})}
{d.q}
);
})}
);
};
window.Slate.Charts = Charts;