/* Charts.jsx — Interactive data charts for the viewer */
/* Exports: ChartModal, MiniSparkline */
// ── Sparkline: tiny inline chart for stat cards ─────────────────
// Tiny line+area sparkline. `fill` mode renders the SVG with viewBox so it
// scales to its container's width — used as the hero visual in a stat card.
// `currentIndex` (optional) clips the data to [0..currentIndex] AND rescales
// the X-axis so the visible portion fills the full width every step. The
// Y-axis scale is still derived from the FULL series so heights at any step
// are directly comparable to the eventual peak.
function MiniSparkline({ data, width=120, height=28, color='var(--accent)', onClick, fill=false, currentIndex=null }) {
if (!data || data.length < 2) return null;
const max = Math.max(...data);
const min = Math.min(...data);
const range = max - min || 1;
const lastIdx = currentIndex != null
? Math.max(1, Math.min(data.length - 1, currentIndex))
: data.length - 1;
const visible = data.slice(0, lastIdx + 1);
const xDenom = visible.length - 1; // visible points span the full width
const pts = visible.map((v, i) => {
const x = (i / xDenom) * width;
const y = height - 2 - ((v - min) / range) * (height - 4);
return `${x.toFixed(1)},${y.toFixed(1)}`;
});
const areaPath = `M 0,${height} L ${pts.join(' L ')} L ${width},${height} Z`;
const linePath = `M ${pts.join(' L ')}`;
const svgProps = fill
? { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: 'none',
style: { width: '100%', height: '100%', display: 'block', cursor: onClick ? 'pointer' : 'default' } }
: { width, height,
style: { display: 'block', cursor: onClick ? 'pointer' : 'default', marginTop: 4 } };
return (
);
}
// ── Full chart modal ────────────────────────────────────────────
function ChartModal({ type, onClose, allRoundData, currentRound, leaderboard, authors }) {
if (!type) return null;
const charts = {
population: { title: 'Population Displaced Per Round', render: () =>
e.stopPropagation()}>
{chart.title}
✕
{chart.render()}
);
}
// ── Teams Alive line chart ──────────────────────────────────────
function TeamsChart({ data, current }) {
const W = 620, H = 200, PAD = { t: 10, r: 10, b: 30, l: 36 };
const cw = W - PAD.l - PAD.r, ch = H - PAD.t - PAD.b;
const pts = data.map((d, i) => {
const x = PAD.l + (i / 49) * cw;
const y = PAD.t + ch - (d.teamCount / 50) * ch;
return { x, y, v: d.teamCount, round: i };
});
const linePath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
const curPt = pts[current];
return (
{/* Grid lines */}
{[10, 20, 30, 40, 50].map(v => {
const y = PAD.t + ch - (v / 50) * ch;
return
{v}
;
})}
{/* X axis labels */}
{[0, 10, 20, 30, 40, 49].map(r => {
const x = PAD.l + (r / 49) * cw;
return {r} ;
})}
{/* Area fill */}
{curPt.v}
}
{/* Axis labels */}
Round
);
}
// ── Per-round population displacement (bar chart) ───────────────
// Each bar = population of the team eliminated that round. Bars get
// dramatically taller in late rounds when whole multi-state teams fall.
function PopChart({ data, current }) {
const W = 620, H = 220, PAD = { t: 12, r: 10, b: 36, l: 56 };
const cw = W - PAD.l - PAD.r, ch = H - PAD.t - PAD.b;
const maxPop = Math.max(1, ...data.map(d => d.displacedPop || 0));
const barW = cw / 50 - 1.5;
const fmtPop = n => n >= 1e6 ? (n/1e6).toFixed(0)+'M' : n >= 1e3 ? (n/1e3).toFixed(0)+'K' : String(n);
// y-axis grid lines at nice round values
const tickVals = [maxPop*0.25, maxPop*0.5, maxPop*0.75, maxPop].map(v => Math.round(v));
return (
{tickVals.map(v => {
const y = PAD.t + ch - (v / maxPop) * ch;
return
{fmtPop(v)}
;
})}
{[1, 10, 20, 30, 40, 50].map(stepN => {
const x = PAD.l + ((stepN - 1) / 49) * cw + barW / 2;
return {stepN} ;
})}
{data.map((d, i) => {
const pop = d.displacedPop || 0;
const x = PAD.l + (i / 49) * cw;
const h = pop > 0 ? (pop / maxPop) * ch : 0;
const isCurrent = i === current;
return
{fmtPop(data[current].displacedPop)}
)}
Step
);
}
// ── Top Teams horizontal bar chart ──────────────────────────────
function TopTeamsChart({ data, current }) {
const rd = data[current];
if (!rd || !rd.topTeams) return No team data for this round.
;
const maxPop = rd.topTeams[0]?.pop || 1;
const CHART_COLORS = [
'oklch(0.65 0.11 25)', // warm
'oklch(0.65 0.11 200)', // teal
'oklch(0.65 0.11 280)', // blue
'oklch(0.65 0.11 130)', // green
'oklch(0.65 0.11 340)', // pink
'oklch(0.65 0.11 60)', // yellow
'oklch(0.65 0.11 310)', // purple
];
return (
{rd.topTeams.map((t, i) => (
{t.loreName || t.name}
{t.pop / maxPop > 0.25 && {formatPopChart(t.pop)} }
{t.members}st
))}
{data.slice(1).map((rd, i) => {
const r = i + 1;
const isCurrent = r === current;
const isPast = r <= current;
const absorbers = rd.absorberNames || [];
return (
R{r}
{rd.deletedName || '—'}
{absorbers.length > 0 && (
conceded to {joinList(absorbers)}
)}
);
})}
No leaderboard data.
;
const rows = Object.entries(data)
.map(([author, s]) => ({ author, ...s }))
.sort((a, b) => b.wins - a.wins || b.total_win_score - a.total_win_score);
const maxWins = rows[0]?.wins || 1;
return (
{rows.map((r, i) => {
const key = (r.author || '').replace(/^u\//, '');
const a = authors?.[key];
const icon = (a?.icon_local || a?.icon_img || '').replace(/&/g, '&');
return (
{i + 1}
{icon
?
e.target.style.display = 'none'} />
:
}
{r.author}
{r.wins}×
▲ {(r.total_win_score || 0).toLocaleString()}
);
})}
+ 1 deleted account (won rounds 2 & 44)
e.target.style.display = 'none'} />
: }
{r.author}
{r.wins}×
▲ {(r.total_win_score || 0).toLocaleString()}