/* LabCharts — the Strategy Lab's charts (18 Sep 2026).
Gianni asked for charts that make the drawdown visible, and pointed at shadcn/ui's chart components. Those are Recharts with a
ChartContainer + a card-styled tooltip and CSS-variable colors, so that is exactly what
this is: Recharts (UMD, pinned 2.15) wrapped in a small container of our own, painted
with Reezer's tokens — money green/red, violet rationed, hairline borders, no gradients.
Standing rule on every chart here (he had to ask three times): BOTH sides. A win
figure never appears without its loss counterpart. */
const RC = window.Recharts || {};
/* ---------- shadcn-style container: title, subtitle, fixed height, legend row ---------- */
function NT_ChartCard({ title, subtitle, legend, height, children }) {
return (
{title}
{subtitle ?
{subtitle}
: null}
{legend && legend.length ? (
{legend.map((l, i) => (
{l.label}
))}
) : null}
{children}
);
}
/* ---------- tooltip: a small Reezer card, never a browser default ---------- */
function NT_ChartTip({ active, payload, label, fmt, titleFmt }) {
if (!active || !payload || !payload.length) return null;
return (
{titleFmt ? titleFmt(label) : label}
{payload.map((p, i) => (
{p.name}
{fmt ? fmt(p.value) : p.value}
))}
);
}
const LC_money = (v) => (v == null || isNaN(v) ? "—" : (v < 0 ? "−$" : "+$") + Math.abs(Math.round(v)).toLocaleString("en-US"));
const LC_axis = { stroke: "var(--text-tertiary)", fontSize: 13, fontFamily: "var(--font-mono)", tickLine: false, axisLine: false };
/* ---------- 1. equity curve with the drawdown underneath ---------- */
function LabEquityChart({ curve, worstLabel, height }) {
if (!RC.ComposedChart || !curve || !curve.length) return null;
const { ComposedChart, Area, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } = RC;
const dd = Math.min.apply(null, curve.map((p) => p.dd));
return (
(v < 0 ? "−" : "") + "$" + Math.abs(v)} />
"trade " + l} />} cursor={{ stroke: "var(--border-strong, var(--border))" }} />
);
}
/* ---------- 2. every trade as a bar: winners and losers side by side ---------- */
function LabTradesChart({ curve, losses, height }) {
if (!RC.BarChart || !curve || !curve.length) return null;
const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, Cell } = RC;
// per-trade P&L from the running total, then sorted big win -> big loss so the SHAPE
// of the distribution is the message (three towers vs eighteen even bars)
const per = curve.map((p, i) => (i ? p.eq - curve[i - 1].eq : p.eq));
const data = per.map((v, i) => ({ i: i + 1, v })).sort((a, b) => b.v - a.v).map((d, i) => ({ ...d, r: i + 1 }));
const wins = data.filter((d) => d.v > 0).length;
return (
(v < 0 ? "−" : "") + "$" + Math.abs(v)} />
"no. " + l + " of " + data.length} />} cursor={{ fill: "var(--surface-inset)" }} />
{data.map((d, i) => = 0 ? "var(--profit)" : "var(--loss)"} />)}
);
}
/* ---------- 3. the landscape: dip-buy depth x count ---------- */
function LabLandscapeChart({ landscape, acct, height }) {
if (!RC.BarChart || !landscape || !landscape.length) return null;
const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, Cell } = RC;
const data = landscape.map((r) => ({
name: r.depth === 0 ? "none" : "−" + r.depth + "% ×" + r.count,
result: r.richest.pnl, dip: r.richest.mdd,
shaped: r.shaped.pnl, shapedDip: r.shaped.mdd,
label: r.richest.label,
}));
return (
(v < 0 ? "−" : "") + "$" + Math.abs(v)} />
} cursor={{ fill: "var(--surface-inset)" }} />
);
}
/* ---------- 4. how bad a bad stretch really gets (the reshuffles) ---------- */
function LabBootstrapChart({ bootstrap, observed, acct, height }) {
if (!RC.BarChart || !bootstrap) return null;
const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } = RC;
const data = [
{ name: "the order that happened", v: observed || 0 },
{ name: "most orders", v: bootstrap.p50 },
{ name: "1 order in 20", v: bootstrap.p95 },
{ name: "1 in 100", v: bootstrap.p99 },
{ name: "worst of 2,000", v: bootstrap.extreme },
];
const pct = (v) => (acct ? Math.round(Math.abs(v) / acct * 100) + "% of your account" : "");
return (
Math.round(d * 1.08), 0]} tickFormatter={(v) => (v < 0 ? "−" : "") + "$" + Math.abs(v)} />
LC_money(v) + (acct ? " · " + pct(v) : "")} />} cursor={{ fill: "var(--surface-inset)" }} />
{data.map((d, i) => (
))}
);
}
Object.assign(window, { NT_ChartCard, NT_ChartTip, LabEquityChart, LabTradesChart, LabLandscapeChart, LabBootstrapChart, LC_money });