{data.map(d => { const diff = d.proj ? ((d.pts - d.proj) / d.proj) * 100 : 0; const isUp = diff >= 0; const color = isUp ? "var(--mint)" : "var(--red)"; return (

{/* color rail */}

{d.pos} {d.slot}× slot

{isUp ? "▲" : "▼"} {Math.abs(diff).toFixed(1)}%

{d.pts} pts

{compareLabel}: {d.proj}

); })}

{/* Total at bottom */}

Season Total

{data.reduce((s, d) => s + d.pts, 0)}

{compareLabel}: {data.reduce((s, d) => s + d.proj, 0)}

); } function SmallStat({ label, value, delta }) { return (

{label}

{value}

{delta}

); } // ============================================================ // Player Trends (Image 9) — weekly bars (ceiling/floor) + actual line // ============================================================ function PlayerTrendsView({ onSelectPlayer, live }) { const rosterPool = (live?.roster && live.roster.length) ? live.roster : null; const pool = rosterPool || ((window.DRAFT_PLAYERS && window.DRAFT_PLAYERS.length) ? window.DRAFT_PLAYERS : (window.PLAYERS || [])); const [search, setSearch] = React.useState(""); const [pickId, setPickId] = React.useState(pool[0]?.id || "jchase"); React.useEffect(() => { if (!pool.length) return; setPickId((current) => { if (pool.some((p) => p.id === current)) return current; const seed = (window.PLAYERS || []).find((p) => p.id === current); const hit = seed && pool.find((p) => p.name === seed.name && p.pos === seed.pos); return hit?.id || pool[0].id; }); }, [pool.length]); const list = pool.filter((p) => !search || `${p.name} ${p.pos} ${p.team}`.toLowerCase().includes(search.toLowerCase())); const player = pool.find((p) => p.id === pickId) || list[0] || pool[0]; return (

{/* Player picker */}

setSearch(e.target.value)} placeholder="Search full player pool" style={{ width: "100%", background: "var(--green-900)", border: "1px solid var(--green-600)", borderRadius: 8, color: "var(--mint-soft)", fontFamily: "Sora", fontSize: 13, padding: "9px 12px", outline: "none", }} />

{list.map(p => { const active = p.id === pickId; return ( ); })}

{/* Trend chart */}

Player trend

{player ? player.name : "Select a player"}

{player ? : null} {player ? : null} {player ? `POS RK #${player.rank || "—"}` : ""}

{player ? :

Search the pool to open a trend chart.

}

); } function CeilingFloorChart({ player }) { if (!player) return

Select a player.

; const season = Number(window.TAPE_SEASON) === 2024 ? 2024 : 2025; const scoring = window.ACTIVE_DRAFT_SCORING || "ppr"; const [tapeLog, setTapeLog] = React.useState(null); React.useEffect(() => { let cancelled = false; fetch(`/api/nfl/player-tape?name=${encodeURIComponent(player.name)}&pos=${encodeURIComponent(player.pos || "")}&season=${season}`, { cache: "no-store" }) .then((r) => r.json()) .then((payload) => { if (cancelled) return; const byeWeek = Number(player.byeWeek || player.bye) || null; const weeks = (payload.weeks || []).map((row) => { const proj = scoring === "std" ? row.projStd : scoring === "half" ? row.projHalf : row.projPpr; const actual = scoring === "std" ? row.actualStd : scoring === "half" ? row.actualHalf : row.actualPpr; const isBye = byeWeek && Number(row.week) === byeWeek; const projN = !isBye && proj != null && Number.isFinite(Number(proj)) ? Number(proj) : null; const actualN = !isBye && actual != null && Number.isFinite(Number(actual)) ? Number(actual) : null; return { wk: Number(row.week), bye: !!isBye, proj: projN, actual: actualN, ceiling: !isBye && row.ceiling != null ? Number(row.ceiling) : (projN != null ? +(projN * 1.35).toFixed(2) : null), floor: !isBye && row.floor != null ? Number(row.floor) : (projN != null ? +(projN * 0.55).toFixed(2) : null), }; }); setTapeLog(weeks); }) .catch(() => { if (!cancelled) setTapeLog([]); }); return () => { cancelled = true; }; }, [player.name, player.pos, player.id, player.byeWeek, player.bye, season, scoring]); const fallback = typeof window.getGameLog === "function" ? window.getGameLog(player.id) : []; const log = (tapeLog && tapeLog.length) ? tapeLog : fallback; const weeks = (log || []).filter((g) => !g.bye); if (!weeks.length || weeks.every((g) => g.actual == null && g.proj == null)) { return

No {season} weekly scores for this player.

; } const w = 700, h = 280, padL = 36, padR = 14, padT = 16, padB = 28; const vals = weeks.flatMap((g) => [g.actual, g.proj, g.ceiling, g.floor].filter((v) => v != null && Number.isFinite(v))); const max = Math.max(...vals, 30) + 4; const min = 0; const range = max - min; const stepX = weeks.length > 1 ? (w - padL - padR) / (weeks.length - 1) : 0; function xFor(i) { return padL + i * stepX; } function yFor(v) { return h - padB - ((v - min) / range) * (h - padT - padB); } const bars = weeks.map((g, i) => ({ x: xFor(i), week: g.wk, floor: g.floor, ceiling: g.ceiling, value: g.actual != null ? g.actual : g.proj, actual: g.actual, proj: g.proj, isFuture: g.actual == null && g.proj != null, })); const bandPts = bars.filter((b) => b.floor != null && b.ceiling != null); const bandPath = bandPts.length > 1 ? [ ...bandPts.map((b, i) => `${i === 0 ? "M" : "L"}${b.x},${yFor(b.ceiling)}`), ...bandPts.slice().reverse().map((b) => `L${b.x},${yFor(b.floor)}`), "Z", ].join(" ") : ""; const actualBars = bars.filter((b) => b.actual != null); const actualPath = actualBars.map((b, i) => `${i === 0 ? "M" : "L"}${b.x},${yFor(b.actual)}`).join(" "); const projBars = bars.filter((b) => b.proj != null); const projPath = projBars.map((b, i) => `${i === 0 ? "M" : "L"}${b.x},${yFor(b.proj)}`).join(" "); return ( ); } Object.assign(window, { StatisticsView });