No bankroll data.
;
}
const pad = { l: 40, r: 60, t: 14, b: 28 };
const innerW = Math.max(100, w - pad.l - pad.r);
const innerH = height - pad.t - pad.b;
const series = growth.map((d, i) => ({ ...d, i }));
const ys = series.map(d => d.bankroll);
const yMin = Math.min(...ys, startBR);
const yMax = Math.max(...ys, startBR);
const yPad = (yMax - yMin) * 0.12 || 1;
const y0 = yMin - yPad, y1 = yMax + yPad;
const xScale = (i) => pad.l + (i / (series.length - 1)) * innerW;
const yScale = (v) => pad.t + (1 - (v - y0) / (y1 - y0)) * innerH;
const path = series.map((d, i) =>
(i === 0 ? 'M' : 'L') + xScale(d.i).toFixed(2) + ',' + yScale(d.bankroll).toFixed(2)
).join(' ');
const last = series[series.length - 1];
const final = last.bankroll;
const ret = final - startBR;
const retPct = (ret / startBR) * 100;
const lineColor = ret >= 0 ? colors.green : colors.red;
// y-ticks
const yTicks = [];
const range = y1 - y0;
const step = range > 50 ? 25 : range > 20 ? 10 : 5;
const yFloor = Math.ceil(y0 / step) * step;
for (let v = yFloor; v <= y1; v += step) yTicks.push(v);
// peak & trough annotations
const peak = series.reduce((a, b) => b.bankroll > a.bankroll ? b : a, series[0]);
const trough = series.reduce((a, b) => b.bankroll < a.bankroll ? b : a, series[0]);
function onMove(e) {
const rect = e.currentTarget.getBoundingClientRect();
const mx = e.clientX - rect.left;
const idx = Math.max(0, Math.min(series.length - 1, Math.round((mx - pad.l) / innerW * (series.length - 1))));
setHover({ idx, clientX: e.clientX, clientY: e.clientY });
}
return (
setHover(null)}>
{/* baseline reference */}
start ${startBR.toFixed(0)}
{/* y ticks (sparse) */}
{yTicks.map((v, i) => (
{v.toFixed(0)}
))}
{/* x labels: first & last date only (Tufte: don't repeat what label-text says) */}
{fmt.date(series[0].date)}
{fmt.date(last.date)}
{/* area + line */}
${peak.bankroll.toFixed(0)}
)}
{trough.i > 0 && trough.i < series.length - 1 && trough.bankroll < startBR && (
${trough.bankroll.toFixed(0)}
)}
{/* end value */}
${last.bankroll.toFixed(1)}
{/* hover crosshair */}
{hover && (
)}
{/* Summary chips, below chart, integrated */}
{showFooterStats && (
Return = 0 ? colors.green : colors.red, fontWeight: 600 }}>{ret >= 0 ? '+' : ''}{retPct.toFixed(2)}%
Peak ${peak.bankroll.toFixed(1)}
Max DD {variants?.full_kelly?.max_drawdown_pct?.toFixed(1) ?? '—'}%
Bets sized {variants?.full_kelly?.n_bets_sized ?? '—'}
)}
{hover && (
{fmt.date(series[hover.idx].date)}
Bankroll ${series[hover.idx].bankroll.toFixed(2)}
vs start = 0 ? colors.green : colors.red }}>
{(series[hover.idx].bankroll - startBR >= 0 ? '+' : '')}{(series[hover.idx].bankroll - startBR).toFixed(2)}u
)}
);
}
// ---- Calibration Reliability Plot ---------------------------
// x = model probability, y = actual win rate, dot area = sample
// Diagonal = perfect calibration
function CalibrationPlot({ buckets, height = 240 }) {
const wrapRef = useRef(null);
const [w, setW] = useState(420);
const [hover, setHover] = useState(null);
useEffect(() => {
const onResize = () => { if (wrapRef.current) setW(wrapRef.current.clientWidth); };
onResize();
const obs = new ResizeObserver(onResize);
if (wrapRef.current) obs.observe(wrapRef.current);
return () => obs.disconnect();
}, []);
if (!buckets || buckets.length === 0) {
return No calibration data.
;
}
const valid = buckets.filter(b => b.count > 0);
const pad = { l: 36, r: 16, t: 14, b: 32 };
const innerW = Math.max(100, w - pad.l - pad.r);
const innerH = height - pad.t - pad.b;
// Determine domain - bracket around the actual buckets
const vmin = 0.45, vmax = 0.80;
const xScale = (v) => pad.l + (v - vmin) / (vmax - vmin) * innerW;
const yScale = (v) => pad.t + (1 - (v - vmin) / (vmax - vmin)) * innerH;
// ticks
const ticks = [0.5, 0.6, 0.7, 0.8];
const maxN = Math.max(...valid.map(b => b.count));
const dotR = (n) => 4 + Math.sqrt(n / maxN) * 16;
return (
{/* grid */}
{ticks.map(t => (
{(t*100).toFixed(0)}%
{(t*100).toFixed(0)}%
))}
{/* perfect calibration diagonal */}
perfect
{/* connecting line through bucket centers */}
(i === 0 ? 'M' : 'L') + xScale(b.avg_model_prob).toFixed(2) + ',' + yScale(b.actual_win_rate).toFixed(2)).join(' ')}
fill="none" stroke={colors.blue} strokeWidth="1.25" opacity="0.5"
/>
{/* dots */}
{valid.map((b, i) => {
const ce = b.calibration_error;
const color = Math.abs(ce) < 0.05 ? colors.green : Math.abs(ce) < 0.1 ? colors.amber : colors.red;
const cx = xScale(b.avg_model_prob);
const cy = yScale(b.actual_win_rate);
const r = dotR(b.count);
const isHover = hover && hover.i === i;
return (
setHover({ i, b, clientX: e.clientX, clientY: e.clientY })}
onMouseLeave={() => setHover(null)}
onMouseMove={(e) => setHover({ i, b, clientX: e.clientX, clientY: e.clientY })}
style={{ cursor: 'pointer' }}>
{/* error bar to diagonal */}
{b.count}
);
})}
{/* axis titles */}
Model probability →
Actual win rate →
{hover && (
{hover.b.bucket} bucket
Sample {hover.b.count} games
Predicted {fmt.pct(hover.b.avg_model_prob, 1)}
Actual {fmt.pct(hover.b.actual_win_rate, 1)}
Gap
{hover.b.calibration_error >= 0 ? '+' : ''}{(hover.b.calibration_error * 100).toFixed(1)}pp
)}
);
}
// ---- Daily P/L bars (small multiple, last 30 days) -----------
function DailyPL({ growth, daily, height = 130 }) {
const wrapRef = useRef(null);
const [w, setW] = useState(420);
const [hover, setHover] = useState(null);
useEffect(() => {
const onResize = () => { if (wrapRef.current) setW(wrapRef.current.clientWidth); };
onResize();
const obs = new ResizeObserver(onResize);
if (wrapRef.current) obs.observe(wrapRef.current);
return () => obs.disconnect();
}, []);
const deltas = useMemo(() => dailyDeltas(growth), [growth]);
// Match each delta to its daily ML accuracy
const dailyByDate = useMemo(() => {
const m = {};
for (const d of (daily || [])) m[d.date] = d;
return m;
}, [daily]);
if (!deltas.length) return null;
const pad = { l: 8, r: 8, t: 8, b: 26 };
const innerW = Math.max(100, w - pad.l - pad.r);
const innerH = height - pad.t - pad.b;
const ys = deltas.map(d => d.delta);
const yMax = Math.max(...ys, 0);
const yMin = Math.min(...ys, 0);
const yRange = yMax - yMin || 1;
const yZero = pad.t + (yMax / yRange) * innerH;
const barW = innerW / deltas.length;
const barGap = Math.min(1.5, barW * 0.15);
const drawW = barW - barGap;
return (