Esports Team Performance
${teamKDA.toFixed(2)}
Top Fragger
${topFragger}
Best Map
${mapWinRates[0]?.map || 'N/A'}
`;
}
const renderChart = (id, type, data, options) => {
const ctx = document.getElementById(id).getContext('2d');
if(charts[id]) charts[id].destroy();
charts[id] = new Chart(ctx, { type, data, options });
};
function renderRecentFormChart(matches) {
const recentMatches = matches.slice(0, 20).reverse();
renderChart('esports-form-chart', 'bar', {
labels: recentMatches.map((m, i) => `Match ${i + 1}`),
datasets: [{
label: 'Result',
data: recentMatches.map(m => m.result === 'Win' ? 1 : -1),
backgroundColor: recentMatches.map(m => m.result === 'Win' ? 'rgba(0, 209, 255, 0.7)' : 'rgba(255, 59, 48, 0.7)')
}]
}, { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { ticks: { callback: (v) => v === 1 ? 'WIN' : (v === -1 ? 'LOSS' : '') } } } });
}
function renderMapPerformanceChart(matches) {
const mapWinRates = [...new Set(matches.map(m => m.map_name))].map(map => {
const mapMatches = matches.filter(m => m.map_name === map);
const wins = mapMatches.filter(m => m.result === 'Win').length;
return { map, winRate: (wins / mapMatches.length) * 100 };
});
renderChart('esports-map-chart', 'bar', {
labels: mapWinRates.map(m => m.map),
datasets: [{ label: 'Win Rate (%)', data: mapWinRates.map(m => m.winRate), backgroundColor: 'rgba(0, 209, 255, 0.6)' }]
}, { responsive: true, maintainAspectRatio: false, indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { min: 0, max: 100 } } });
}
function renderPlayerTable(playerStats) {
elements.playerTableHead.innerHTML = `