);
}
// xG card — goal "quality". Every plotted goal carries an Opta xG (the chance
// an average shot from that spot is scored). Same chart-card shape as the
// Timing / Distance cards: a clickable histogram (each bar filters the pitch to
// that xG band) with a single caption line. Low-xG bands (worldies) tinted red.
function XGCard({ data, onXgFilter, activeXg }) {
const withXg = data.filter(d => d.xg != null);
const [hover, setHover] = React.useState(null);
const buckets = new Array(10).fill(0);
let sum = 0, lowest = null;
for (const d of withXg) {
const v = Number(d.xg);
sum += v;
const i = Math.min(9, Math.floor(v * 10));
buckets[i]++;
if (lowest == null || v < Number(lowest.xg)) lowest = d;
}
const n = withXg.length;
const avg = n ? sum / n : 0;
const max = Math.max(1, ...buckets);
const W = 380, H = 200, P = 24;
const bw = (W - P * 2) / buckets.length;
const label = (i) => `${(i / 10).toFixed(1)}–${((i + 1) / 10).toFixed(1)}`;
// Hide when no goal carries xG, rather than showing a placeholder.
if (n === 0) return null;
return (
{zonePills}
);
}
function TopOpponents({ data, onOpponent }) {
const counts = {};
const oppAbbr = {};
for (const d of data) {
if (!d.opponent) continue;
counts[d.opponent] = (counts[d.opponent]||0)+1;
if (d.opponent_abbr) oppAbbr[d.opponent] = d.opponent_abbr;
}
// Top 8 keeps the card within the same height floor as the other analytics
// cards so the two rows line up.
const items = Object.entries(counts).sort((a,b)=>b[1]-a[1]).slice(0,8);
const max = items[0]?.[1] || 1;
const totalAll = data.length;
const [hover, setHover] = React.useState(null);
return (