// ═══ UR2D STANDINGS — POINTS PROGRESSION (season graph, broadcast style) ════════════════════════ // Same sources as the matrix: useStandings (order / teams / colours) + useRaceResults (driver points // per round) + useConstructorRounds (team points per round). The season follows useSharedSeason, so it // tracks the selector in the standings section above. Loads after ur2d-standings-broadcast.jsx. const URSG_PALETTE = ['#F2F2F4', '#E10600', '#F2B83A', '#2E86FF', '#2BD99F', '#B06CFF', '#FF7A1A', '#4FD1E8', '#FF5FA2', '#9AA3AE']; const ursgNorm = (s) => (typeof rosterNorm === 'function' ? rosterNorm(s) : String(s || '').toLowerCase().replace(/[^a-z0-9]/g, '')) || String(s || '').trim().toLowerCase(); // Dark team colours are lifted toward white so their lines read on the slate. function ursgLift(hex) { const m = /^#?([0-9a-f]{6})$/i.exec(String(hex || '').trim()); if (!m) return null; const n = parseInt(m[1], 16), rgb = [n >> 16, (n >> 8) & 255, n & 255]; const lin = rgb.map((v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); const lum = 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2], k = lum < 0.05 ? 0.5 : lum < 0.12 ? 0.32 : 0; return '#' + rgb.map((v) => Math.round(v + (255 - v) * k).toString(16).padStart(2, '0')).join(''); } function ursgTicks(max) { const m = Math.max(10, max), raw = m / 4, p = Math.pow(10, Math.floor(Math.log10(raw))); const step = [1, 2, 2.5, 5, 10].map((f) => f * p).find((s) => s >= raw), top = Math.ceil(m / step) * step, ticks = []; for (let v = 0; v <= top + 1e-9; v += step) ticks.push(Math.round(v * 10) / 10); return { top, ticks }; } const ursgMono = (color, size = 10) => ({ fontFamily: 'JetBrains Mono', fontSize: size, letterSpacing: '0.2em', textTransform: 'uppercase', color }); const URStandingsGraph = ({ league }) => { const L = LEAGUE_BY_ID[league]; const seasons = getSeasons(league); const [seasonId] = useSharedSeason(league); const activeId = seasons.some((s) => s.id === seasonId) ? seasonId : ((seasons.find((s) => s.isCurrent) || {}).id || defaultDataSeasonId(seasons)); const data = useStandings(league, activeId); const label = data.season && data.season.label; const results = useRaceResults(league, label); const conRounds = useConstructorRounds(league, label); const teamBased = !!(data.teams && data.teams.length); const [view, setView] = React.useState('drivers'); const isCon = teamBased && view === 'teams'; const numRaces = (data.season && data.season.numRaces) || 10; const sdef = ((UR2D_ADAPTERS[league] && UR2D_ADAPTERS[league].seasons) || []).find((s) => s.label === label); const perRound = !!(sdef && sdef.liveSource); const [waited, setWaited] = React.useState(false); const [pick, setPick] = React.useState(null), [hl, setHl] = React.useState(null), [at, setAt] = React.useState(null); React.useEffect(() => { setWaited(false); const t = setTimeout(() => setWaited(true), 9000); return () => clearTimeout(t); }, [league, label]); React.useEffect(() => { setPick(null); setHl(null); setAt(null); }, [league, label, isCon]); // Round labels — same index-aligned calendar resolution as the matrix. const calSeasons = typeof getCalendarSeasons === 'function' ? getCalendarSeasons() : []; const idx = seasons.filter((s) => !s.dbOnly).findIndex((s) => s.id === activeId); const cal = getCalendar(league, idx >= 0 && calSeasons[idx] ? calSeasons[idx].id : label) || {}; const races = Array.from({ length: numRaces }, (_, i) => { const r = (cal.races || []).find((x) => x.round === i + 1); return { n: i + 1, code: r && typeof UR_GP_LOC3 !== 'undefined' ? UR_GP_LOC3[r.grandPrix] || null : null, gp: r ? r.grandPrix : null }; }); const teamByShort = {}; (data.teams || []).forEach((t) => { teamByShort[t.short] = t; }); const series = (() => { if (isCon) return (data.teams || []).map((t, i) => { const rr = conRounds[t.short] || {}; return { key: 'T:' + t.short, name: t.name || t.short, team: t.short, pos: t.pos || i + 1, total: t.pts, color: t.color, per: races.map((r) => (rr[r.n] ? Number(rr[r.n].pts) || 0 : null)) }; }); const byName = {}; Object.entries(results).forEach(([n, list]) => list.forEach((r) => { const k = ursgNorm(r.name); (byName[k] || (byName[k] = {}))[n] = Number(r.points) || 0; })); return (data.drivers || []).map((d, i) => { const rr = byName[ursgNorm(d.name)] || {}, tm = teamByShort[d.team]; return { key: 'D:' + d.name + ':' + d.pos, name: d.name, team: d.team, pos: d.pos || i + 1, total: d.pts, color: tm ? tm.color : null, per: races.map((r) => (rr[r.n] != null ? rr[r.n] : null)) }; }); })(); const raced = races.filter((r) => (isCon ? series.some((s) => s.per[r.n - 1]) : Object.prototype.hasOwnProperty.call(results, r.n) || Object.prototype.hasOwnProperty.call(results, String(r.n)))).map((r) => r.n); const last = raced.length ? Math.max.apply(null, raced) : 0; // Colours: team colour (lifted), palette for solo leagues; a team's second car is dashed. const seenTeam = {}; series.forEach((s, i) => { s.col = ursgLift(s.color) || URSG_PALETTE[i % URSG_PALETTE.length]; s.dash = !isCon && teamBased && s.team && seenTeam[s.team] ? '7 5' : null; if (s.team) seenTeam[s.team] = true; let c = 0; s.cum = [0].concat(races.slice(0, last).map((r) => (c += s.per[r.n - 1] || 0))); }); const focus = pick || new Set(series.filter((s) => isCon || s.pos <= 5).map((s) => s.key)); const r0 = at || last; const rank = (r) => series.slice().sort((a, b) => b.cum[r] - a.cum[r] || a.pos - b.pos); const now = r0 ? rank(r0) : [], before = {}; if (r0 > 1) rank(r0 - 1).forEach((s, i) => { before[s.key] = i + 1; }); const { top, ticks } = ursgTicks(Math.max(0, ...series.map((s) => s.cum[last] || 0))); const X = (i) => (i / numRaces) * 1000, Y = (v) => 1000 - (v / top) * 1000; const off = series.filter((s) => s.total != null && Math.abs((s.cum[last] || 0) - s.total) > 0.5).length; const toggleFocus = (k) => { const n = new Set(focus); if (n.has(k)) n.delete(k); else n.add(k); setPick(n); }; if (data.status === 'loading' || !(data.drivers || []).length) return null; // the standings section above shows loading / no-data const toggle = teamBased ?
{[['drivers', 'Drivers'], ['teams', 'Constructors']].map(([id, lab], i) => { const on = (isCon ? 'teams' : 'drivers') === id; return ; })}
: null; const note = (txt) =>
{txt}
; const loading = perRound && !last && !waited; const PT = 10, PB = 48; return (
Points Progression
{L.name} · {label}{last ? ` · after round ${last} of ${numRaces}` : ''}
{!perRound ? note(`Round-by-round points aren't archived for ${label} yet. The table above has the final standings.`) : loading ?
{[0, 1, 2].map((i) => )}
Loading round results…
: !last ? note(sdef && sdef.isCurrent ? 'No rounds raced yet — the graph starts after round 1.' : "Couldn't load this season's round results.") :
{ticks.map((v) => {v})}
setAt(null)}> {ticks.map((v) =>
)} {last < numRaces &&
}
{series.filter((s) => focus.has(s.key) || s.key === hl).map((s) => )} {races.slice(0, last).map((r) =>
setAt(r.n)} onClick={() => setAt(r.n)} style={{ position: 'absolute', top: 0, bottom: 0, left: `${((r.n - 0.5) / numRaces) * 100}%`, width: `${(1 / numRaces) * 100}%`, cursor: 'crosshair' }}>
)}
{races.map((r) => last ? 0.4 : 1 }}> R{r.n} {r.code || '—'} )}
{off > 0 &&
◆ {off} {off === 1 ? 'total differs' : 'totals differ'} from the table above — sprint, penalty or bonus points aren't split by round.
}
◆ After round {r0} / {numRaces}
{races[r0 - 1] && races[r0 - 1].gp || 'Round ' + r0}
{now.map((s, i) => { const p = i + 1, was = before[s.key], d = was ? was - p : 0, on = focus.has(s.key), p1 = p === 1, gain = s.per[r0 - 1]; const ink = p1 ? COLORS.plateInk : on || s.key === hl ? COLORS.text : COLORS.textDim; return ( ); })}
Hover a round · click a name to plot it {pick && }
}
); }; Object.assign(window, { URStandingsGraph });