// ============================================================
// Slices — by-market, bias slices, bias flags, park bias, recent days
// Tufte: dot plots, direct labeling, reference lines, no chartjunk
// ============================================================
// ---- By-market summary ---------------------------------------
function ByMarket({ roi, kpropRoi, batterHr, totalsStatus }) {
const by = roi?.by_type || {};
// Map raw types to nice rows
const ml = {
name: 'Moneyline',
bets: (by.ml_away?.count || 0) + (by.ml_home?.count || 0),
wins: (by.ml_away?.wins || 0) + (by.ml_home?.wins || 0),
profit: (by.ml_away?.profit || 0) + (by.ml_home?.profit || 0),
};
const totals = {
name: 'Totals (O/U)',
bets: (by.over?.count || 0) + (by.under?.count || 0),
wins: (by.over?.wins || 0) + (by.under?.wins || 0),
profit: (by.over?.profit || 0) + (by.under?.profit || 0),
};
const kp = kpropRoi?.buckets || [];
const kSum = kp.reduce((a, b) => ({
bets: a.bets + b.n,
wins: a.wins + b.hits,
profit: a.profit + b.profit_units,
}), { bets: 0, wins: 0, profit: 0 });
const krow = { name: 'K-Props (trusted)', bets: kSum.bets, wins: kSum.wins, profit: kSum.profit };
const hr = batterHr?.scalars;
const hrRow = hr ? {
name: 'HR Props',
bets: hr.n,
wins: Math.round((hr.n || 0) * (hr.base_hr_rate ?? 0)),
profit: null,
note: `Brier ${hr.brier?.toFixed(3)} vs ${hr.brier_baseline?.toFixed(3)} baseline`,
} : null;
const rows = [ml, totals, krow];
if (hrRow) rows.push(hrRow);
return (
Market
Bets
Hit rate
Profit
ROI
{rows.map((r, i) => {
const hit = r.bets > 0 ? r.wins / r.bets : null;
const roiPct = r.profit != null && r.bets > 0 ? r.profit / r.bets : null;
return (
{r.name}
{r.note &&
{r.note}
}
{r.bets || '—'}
{hit == null ? — : (
= 0.524 ? colors.green : hit >= 0.5 ? colors.amber : colors.red }}>
{(hit*100).toFixed(1)}%
)}
{r.profit == null ? — : (
= 0 ? colors.green : colors.red, fontWeight: 600 }}>
{r.profit >= 0 ? '+' : ''}{r.profit.toFixed(1)}u
)}
{roiPct == null ? — : (
= 0 ? colors.green : colors.red, fontWeight: 600 }}>
{roiPct >= 0 ? '+' : ''}{(roiPct*100).toFixed(1)}%
)}
);
})}
);
}
// ---- Slice diagnostics: by_spread, by_edge, by_total, by_lineup ----
// Tufte dot plot: each slice = one row with sample size + dot positioned
// relative to a break-even reference line.
function SliceDotPlot({ rows, metric = 'ml_accuracy', vmin = 0.40, vmax = 0.65, refValue = 0.524, refLabel = 'break-even', formatValue, height = null, onSelect, selected, minSample = 0 }) {
const wrapRef = useRef(null);
const [w, setW] = useState(420);
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 (!rows || rows.length === 0) {
return No slice data.
;
}
const validRows = rows.filter(r => r.n >= minSample);
const maxN = Math.max(...validRows.map(r => r.n));
const dotR = (n) => 3 + Math.sqrt(n / maxN) * 4;
const fmtVal = formatValue || ((v) => (v*100).toFixed(1) + '%');
const labelCol = 110;
const nCol = 36;
const valCol = 60;
const plotW = Math.max(140, w - labelCol - nCol - valCol - 20);
const xScale = (v) => ((v - vmin) / (vmax - vmin)) * plotW;
return (
{/* Header row */}
n
{(vmin*100).toFixed(0)}%
{refLabel} {(refValue*100).toFixed(1)}%
{(vmax*100).toFixed(0)}%
value
{validRows.map((r, i) => {
const v = r[metric];
if (v == null) return null;
const isSelected = selected === r.slice;
const cx = Math.max(0, Math.min(plotW, xScale(v)));
const aboveRef = v > refValue;
return (
onSelect && onSelect(r)}>
{r.slice}
{r.n}
{fmtVal(v)}
);
})}
No bias flags.
;
// Group by direction
const top = flags.slice(0, 12);
return (
Dimension
Value
n
Acc
Δ
{top.map((f, i) => {
const dev = f.deviation;
const dim = f.dimension.replace(/_/g, ' ').replace('away', 'Away').replace('home', 'Home').replace('park', 'Park').replace('name', '').trim();
return (
{dim}
{f.value}
{f.n}
{(f.accuracy*100).toFixed(0)}%
= 0 ? colors.green : colors.red }}>
{dev >= 0 ? '+' : ''}{(dev*100).toFixed(0)}pp
);
})}
);
}
// ---- Park bias dot plot --------------------------------------
function ParkBias({ parks }) {
if (!parks || parks.length === 0) return null;
// Filter to parks with >= 5 games
const valid = parks.filter(p => p.n >= 5);
const maxAbs = Math.max(...valid.map(p => Math.abs(p.runs_bias)));
const vmin = -Math.ceil(maxAbs);
const vmax = Math.ceil(maxAbs);
// Sort by abs bias descending
const sorted = [...valid].sort((a, b) => Math.abs(b.runs_bias) - Math.abs(a.runs_bias));
const top = sorted.slice(0, 10);
const wrapRef = useRef(null);
const [w, setW] = useState(420);
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 labelCol = 130;
const nCol = 32;
const valCol = 56;
const plotW = Math.max(120, w - labelCol - nCol - valCol - 20);
const xScale = (v) => ((v - vmin) / (vmax - vmin)) * plotW;
return (
Park
n
−{Math.abs(vmin)}r
actual − predicted
+{vmax}r
bias
{top.map((p, i) => {
const v = p.runs_bias;
const cx = xScale(v);
const colorBias = Math.abs(v) < 1 ? colors.fg2 : v > 0 ? colors.green : colors.red;
return (
{p.park} {p.is_dome ? ·dome : null}
{p.n}
{v >= 0 ? '+' : ''}{v.toFixed(2)}r
);
})}
);
}
// ---- Team performance dot plot (top over/under-performers) ---
function TeamSlices({ teams, onSelect, selected }) {
if (!teams || teams.length === 0) return null;
// Sort by deviation from break-even, take extremes
const sorted = [...teams]
.filter(t => t.n >= 8)
.sort((a, b) => Math.abs(b.ml_accuracy - 0.524) - Math.abs(a.ml_accuracy - 0.524));
const top = sorted.slice(0, 12);
return (
);
}
// ---- Recent days strip — last 10 days, P/L + ML hitrate ------
function RecentDaysStrip({ daily, growth }) {
const deltas = useMemo(() => dailyDeltas(growth), [growth]);
// join daily + deltas
const dailyByDate = useMemo(() => {
const m = {};
for (const d of (daily || [])) m[d.date] = d;
return m;
}, [daily]);
const last = deltas.slice(-10);
if (!last.length) {
return No recent days yet.
;
}
return (
{last.map((d, i) => {
const dd = dailyByDate[d.date];
const cls = d.delta > 0.01 ? 'pos' : d.delta < -0.01 ? 'neg' : 'zero';
return (
{fmt.date(d.date)}
{Math.abs(d.delta) < 0.005 ? '0.00u' : (d.delta >= 0 ? '+' : '') + d.delta.toFixed(2) + 'u'}
{dd ? `${dd.ml_correct}/${dd.games} ML` : '—'}
1 ? colors.amber : colors.fg3 }}>
{dd ? `${dd.total_bias >= 0 ? '+' : ''}${dd.total_bias.toFixed(1)}r tot` : ''}
);
})}
Brier
0 ? colors.green : colors.red }}>
{s.brier.toFixed(4)}
vs {s.brier_baseline.toFixed(4)} base
ECE
{(s.ece*100).toFixed(1)}%
Base / Model
{(s.base_hr_rate*100).toFixed(1)}% / {(s.avg_model_prob*100).toFixed(1)}%
);
}
Object.assign(window, {
ByMarket, SliceDotPlot, BiasFlags, ParkBias, TeamSlices,
RecentDaysStrip, HrPropSummary,
});