Scribd
Upload
10 views14 pages

New Try Code

The document outlines an interactive web application for analyzing the performance of ISL football players. It includes features such as player comparison, performance heatmaps, best XI predictions, and visual data representation through charts and Power BI. The interface is designed with a dark theme and includes functionalities for user login, data upload, and various analytical tools.

Uploaded by

ajay123456ab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views14 pages

New Try Code

The document outlines an interactive web application for analyzing the performance of ISL football players. It includes features such as player comparison, performance heatmaps, best XI predictions, and visual data representation through charts and Power BI. The interface is designed with a dark theme and includes functionalities for user login, data upload, and various analytical tools.

Uploaded by

ajay123456ab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

<!

DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ISL FOOTBALL PLAYERS PERFORMANCE ANALYSIS</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.c
ss" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js"></scr
ipt>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-image: url('background.JPG');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: white;
transition: background-color 0.3s, color 0.3s;
}
.dark-mode { background-color: #1e293b; color: white; }
.login-overlay {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,0.7);
display: flex; align-items: center; justify-content: center;
z-index: 1000;
backdrop-filter: blur(4px);
}
.login-form {
background: rgba(34,34,34,0.95);
padding: 2.5rem 2.5rem 2rem 2.5rem;
border-radius: 1.5rem;
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
min-width: 340px;
animation: popIn 0.7s cubic-bezier(.25,.8,.25,1);
}
@keyframes popIn {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.login-form input {
background: #18181b;
color: #facc15;
border: 1px solid #555;
font-size: 1rem;
transition: border 0.2s;
width: 100%; margin-bottom: 1rem; padding: 0.5rem;
border-radius: 0.5rem;
}
.login-form input:focus {
border: 1.5px solid #facc15;
outline: none;
}
.login-form button {
width: 100%;
background: linear-gradient(90deg, #facc15 60%, #4ade80 100%);
color: #222;
font-size: 1.1rem;
font-weight: bold;
letter-spacing: 0.5px;
box-shadow: 0 4px 16px rgba(250,204,21,0.08);
padding: 0.5rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
}
.login-form button:hover {
background: linear-gradient(90deg, #fbbf24 40%, #22d3ee 100%);
box-shadow: 0 8px 32px rgba(34,197,94,0.12);
}
#projectDescModal {
display: none;
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,0.7);
z-index: 2000;
align-items: center; justify-content: center;
}
#projectDescModal.active { display: flex; }
#projectDescModal .modal-content {
background: #18181b;
color: #facc15;
padding: 2.5rem 2rem 2rem 2rem;
border-radius: 1.25rem;
min-width: 340px;
max-width: 95vw;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
animation: popIn 0.7s cubic-bezier(.25,.8,.25,1);
position: relative;
}
.close-btn {
position: absolute; top: 18px; right: 28px;
background: none; border: none; font-size: 2rem; color: #f87171;
cursor: pointer;
}
.comparison-card {
background: linear-gradient(135deg, #facc15 0%, #4ade80 100%);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
padding: 24px;
margin: 12px;
transition: transform 0.3s;
color: #222;
text-align: center;
}
.comparison-card:hover { transform: scale(1.04); }
.comparison-card img {
width: 80px; height: 80px; border-radius: 50%;
border: 4px solid #fbbf24; margin-bottom: 10px; object-fit: cover;
}
.comparison-container {
display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
margin-top: 20px;
}
.player-details {
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 8px;
margin-top: 20px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: white;
}
.player-details img { width: 150px; border-radius: 8px; margin-
bottom: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
th, td { border: 1px solid #444; padding: 6px 8px; text-align: left;
}
th { background-color: #333; color: #facc15; }
.overflow-auto { overflow-x: auto; }
/* Smaller Best XI cards */
#bestXICardView {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-top: 20px;
}
#bestXICardView .comparison-card {
padding: 10px;
margin: 0;
font-size: 0.85rem;
border-radius: 10px;
}
#bestXICardView .comparison-card img {
width: 48px;
height: 48px;
margin-bottom: 6px;
border-width: 2px;
}
#bestXICardView .comparison-card h3 {
font-size: 1rem;
margin-bottom: 2px;
}
</style>
</head>
<body class="dark-mode p-4">
<!-- Login Overlay -->
<div id="loginOverlay" class="login-overlay">
<div class="login-form">
<h2 class="text-2xl font-bold text-center mb-6 text-yellow-300">ISL
Analysis Dashboard</h2>
<input type="text" id="username" placeholder="Enter your username"
autocomplete="username" />
<input type="password" id="password" placeholder="Enter your
password" autocomplete="current-password" />
<button id="loginBtn">LOGIN</button>
</div>
</div>

<!-- Main Dashboard -->


<div id="dashboardContent" style="display:none;">
<div class="flex justify-between items-center mb-4 flex-wrap gap-2">
<h1 class="text-4xl font-extrabold text-center flex-grow bg-
gradient-to-r from-yellow-400 via-orange-400 to-green-400 bg-clip-text
text-transparent drop-shadow-lg tracking-tight py-2 uppercase"
style="letter-spacing:2px;">
⚽ ISL Football Players <span class="text-white">Performance
Analysis</span> ⚽
</h1>
<span id="userDisplay" class="mr-2"></span>
<button id="logoutBtn" class="ml-2 bg-yellow-400 text-black px-3
py-1 rounded">Logout</button>
<button id="modeToggle" class="ml-2 bg-gray-600 text-white px-3 py-
1 rounded">Toggle Dark/Light Mode</button>
<button id="toggleTableBtn" class="ml-2 bg-yellow-200 text-black
px-3 py-1 rounded">Hide Table</button>
<button id="projectDescBtn" class="ml-2 bg-yellow-200 text-black
px-3 py-1 rounded">Project Description</button>
<button id="clearResultsBtn" class="ml-2 bg-red-500 text-white px-3
py-1 rounded">Clear Results</button>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">


<div>
<input type="file" id="csvUpload" class="mb-4 text-black bg-white
p-1 rounded w-full" />
</div>
<div class="relative">
<input type="text" id="playerSearch" placeholder="Search Player"
class="mb-4 p-2 text-black rounded w-full" autocomplete="off" />
<div id="autocompleteSuggestions" class="autocomplete-suggestions
hidden"></div>
</div>
<div>
<select id="featuresDropdown" class="p-2 text-black rounded w-
full">
<option value="">Select Feature</option>
<option value="basicCharts">Basic Charts</option>
<option value="heatmap">Performance Heatmap</option>
<option value="bestEleven">Predict Best 11</option>
</select>
</div>
</div>

<!-- Compare Players -->


<div class="mb-4">
<label class="block mb-1">Compare Two Players:</label>
<div class="flex gap-4 flex-wrap">
<select id="comparePlayer1" class="p-2 text-black
rounded"></select>
<select id="comparePlayer2" class="p-2 text-black
rounded"></select>
<button id="compareBtn" class="bg-yellow-400 text-black px-3 py-1
rounded">Compare</button>
</div>
</div>
<div id="comparisonResult" class="comparison-container hidden"></div>
<div id="playerDetails" class="player-details hidden"></div>
<div id="tableContainer" class="overflow-auto max-h-[400px] bg-gray-
800 p-2 rounded-lg"></div>

<!-- Basic Charts Section -->


<div id="basicChartsSection" class="feature-section hidden">
<div class="mt-4">
<label for="chartType">Select Chart:</label>
<select id="chartType" class="text-black">
<option value="goals">Top Scorers</option>
<option value="assists">Top Assists</option>
<option value="ageDistribution">Age Distribution</option>
<option value="positionDistribution">Position
Distribution</option>
<option value="nationalityDistribution">Nationality
Distribution</option>
<option value="marketValue">Top Market Value</option>
</select>
<input type="number" id="topN" value="10" min="5" max="50"
class="text-black ml-2" />
<button id="generateChart" class="bg-gray-600 text-white px-3 py-
1 rounded ml-2">Generate Chart</button>
</div>
<div class="mt-4">
<canvas id="mainChart" width="600" height="400"></canvas>
</div>
</div>

<!-- Performance Heatmap Section -->


<div id="heatmapSection" class="feature-section hidden">
<div class="mt-4 bg-gray-800 p-4 rounded">
<h2 class="text-xl font-semibold mb-2 text-yellow-
300">Performance Heatmap</h2>
<div class="flex flex-wrap gap-4 mb-4">
<div>
<label for="heatmapMetric">Select Metric:</label>
<select id="heatmapMetric" class="text-black p-2 rounded">
<option value="Goals">Goals</option>
<option value="Assists">Assists</option>
<option value="Age">Age</option>
<option value="Marketvalueincrores">Market Value</option>
</select>
</div>
<div>
<label for="heatmapFilter">Filter by Position:</label>
<select id="heatmapFilter" class="text-black p-2 rounded">
<option value="All">All Positions</option>
</select>
</div>
<button id="generateHeatmap" class="bg-gray-600 text-white px-3
py-1 rounded">Generate Heatmap</button>
</div>
<div id="heatmapContainer" class="heatmap-container"></div>
<div id="heatmapLegend" class="heatmap-legend"></div>
</div>
</div>

<!-- Best 11 Prediction Section -->


<div id="bestElevenSection" class="feature-section hidden">
<div class="mt-4 bg-gray-800 p-4 rounded">
<h2 class="text-xl font-semibold mb-2 text-yellow-300">Predict
Best XI</h2>
<div class="flex flex-wrap gap-4 mb-4 justify-between items-
center">
<div>
<label for="formationSelect">Select Formation:</label>
<select id="formationSelect" class="text-black p-2 rounded">
<option value="4-3-3">4-3-3</option>
<option value="4-4-2">4-4-2</option>
<option value="3-5-2">3-5-2</option>
<option value="5-3-2">5-3-2</option>
</select>
</div>
<div>
<label for="bestXIMetric">Primary Selection Metric:</label>
<select id="bestXIMetric" class="text-black p-2 rounded">
<option value="combined">Combined Stats</option>
<option value="goals">Goals</option>
<option value="assists">Assists</option>
<option value="marketValue">Market Value</option>
</select>
</div>
<button id="generateBestXI" class="bg-yellow-400 text-black px-
3 py-1 rounded">Generate Best XI</button>
</div>
<div id="bestXICardView"></div>
</div>
</div>

<!-- Power BI iframe -->


<div class="mt-6">
<h2 class="text-xl font-semibold mb-2 text-yellow-300">Power BI
Insights</h2>
<div class="w-full overflow-auto">
<iframe title="FOOTBALL PLAYERS PERFORMANCE ANALYSIS PROJECT
FINAL ALL READY"
width="100%" height="541"
src="https://app.powerbi.com/reportEmbed?reportId=ce5cd268-
56e7-47d7-84ce-cccf195cd562&autoAuth=true&ctid=24f88f05-24e2-4cd6-8549-
5d47656f2c7a"
frameborder="0" allowfullscreen class="rounded-lg shadow-
lg"></iframe>
</div>
</div>
</div>

<!-- Project Description Modal -->


<div id="projectDescModal">
<div class="modal-content">
<button class="close-btn" id="closeProjectDesc">&times;</button>
<h2 class="text-2xl font-bold mb-4 text-yellow-300">Football
Players Performance Analysis</h2>
<p><strong>About the Project:</strong><br>
This platform simplifies football analysis, enabling users to
explore player data, compare talent, and predict the best teams without
complex tools. Driven by data and passion, it empowers coaches, analysts,
and fans to make smarter decisions based on player performance.
</p>
<p><strong>Objective:</strong></p>
<ul>
<li>Upload and analyze football player data easily.</li>
<li>Visualize statistics through interactive charts and
heatmaps.</li>
<li>Compare players based on key metrics.</li>
<li>Predict the best XI team based on user-selected
formations.</li>
<li>Make football performance analysis accessible and
insightful.</li>
</ul>
<p><strong>Scope:</strong></p>
<ul>
<li>Manage player data via CSV uploads.</li>
<li>Generate interactive charts and heatmaps.</li>
<li>Compare two players in detail.</li>
<li>Predict best XI for different formations.</li>
</ul>
</div>
</div>

<script>
window.chartInstance = null;
let playerData = [];

// Login logic
$('#loginBtn').on('click', function() {
$('#loginOverlay').hide();
$('#dashboardContent').show();
$('#userDisplay').text('Welcome, ' + $('#username').val());
loadSampleData();
});

$('#logoutBtn').on('click', function() {
$('#dashboardContent').hide();
$('#loginOverlay').show();
});

// Project Description modal


$('#projectDescBtn').on('click', function() {
$('#projectDescModal').addClass('active');
});
$('#closeProjectDesc').on('click', function() {
$('#projectDescModal').removeClass('active');
});

// Toggle Dark/Light Mode


$('#modeToggle').on('click', function() {
$('body').toggleClass('dark-mode');
if ($('body').hasClass('dark-mode')) {
$(this).text('Toggle Light Mode');
} else {
$(this).text('Toggle Dark Mode');
}
});

// Hide Table
let tableVisible = true;
$('#toggleTableBtn').on('click', function() {
tableVisible = !tableVisible;
if (tableVisible) {
$('#tableContainer').show();
$(this).text('Hide Table');
} else {
$('#tableContainer').hide();
$(this).text('Show Table');
}
});

// Clear Results button


$('#clearResultsBtn').on('click', function() {
$('#comparisonResult').addClass('hidden').html('');
$('#playerDetails').addClass('hidden').html('');
if (window.chartInstance) {
window.chartInstance.destroy();
window.chartInstance = null;
}
$('#mainChart').remove();
$('#basicChartsSection .mt-4').append('<canvas id="mainChart"
width="600" height="400"></canvas>');
$('#heatmapContainer').html('');
$('#heatmapLegend').html('');
$('#bestXICardView').html('');
});

// CSV Upload and parsing


$('#csvUpload').on('change', function(e) {
if (e.target.files.length) {
Papa.parse(e.target.files[0], {
header: true,
skipEmptyLines: true,
complete: function(results) {
playerData = results.data;
updateAllSections();
}
});
}
});

// Sample data loader for demo


function loadSampleData() {
const csv =
`Player,Nation,Position,Age,MatchPlayed,Started11,Minutesplayed,averagepl
ayingtime,Goals,Assists,Numberofsubstituted,Foulsattempted,PenaltyKicksMa
de,PenaltyKicksMissed,Yellowcard,Redcard,Goalsper90,Assistsper90,CLUB,Cle
arancesPer90,AerialDuelsWonPer90,ShootingAccuracy,PassAccuracy,Marketvalu
eincrores,playersimages
Sunil
Chhetri,India,Forward,37,20,19,1700,89.5,14,2,1,10,3,1,2,0,0.74,0.11,Beng
aluru
FC,1.2,2.1,58,82,6.5,https://upload.wikimedia.org/wikipedia/commons/6/6f/
Sunil_Chhetri_BFC.jpg
Greg
Stewart,Scotland,Midfielder,31,18,17,1550,86.1,10,7,1,12,2,0,3,0,0.58,0.4
1,Jamshedpur
FC,0.9,1.7,52,87,5.2,https://upload.wikimedia.org/wikipedia/commons/2/2c/
Greg_Stewart.jpg
Roy
Krishna,Fiji,Forward,33,19,18,1600,84.2,8,5,1,13,1,1,2,0,0.45,0.28,ATK
Mohun
Bagan,1.5,2.3,61,79,5.8,https://upload.wikimedia.org/wikipedia/commons/9/
9e/Roy_Krishna.jpg
`;
Papa.parse(csv, {
header: true,
skipEmptyLines: true,
complete: function(results) {
playerData = results.data;
updateAllSections();
}
});
}

function updateAllSections() {
populateTable(playerData);
populatePlayerDropdowns(playerData);
updateAutocomplete(playerData);
}

function populateTable(data) {
if (!data.length) return $('#tableContainer').html('');
let headers = Object.keys(data[0]);
let html = '<table class="min-w-full text-xs"><thead><tr>' +
headers.map(h => `<th class="px-2 py-1">${h}</th>`).join('') +
'</tr></thead><tbody>' +
data.map(row => '<tr>' + headers.map(h => `<td class="px-2 py-
1">${row[h]}</td>`).join('') + '</tr>').join('') +
'</tbody></table>';
$('#tableContainer').html(html);
}

function populatePlayerDropdowns(data) {
let options = data.map(p => `<option
value="${p.Player}">${p.Player}</option>`).join('');
$('#comparePlayer1').html('<option value="">Select Player
1</option>' + options);
$('#comparePlayer2').html('<option value="">Select Player
2</option>' + options);
}

function updateAutocomplete(data) {
$('#playerSearch').off('input').on('input', function() {
const val = $(this).val().toLowerCase();
if (!val) {
$('#autocompleteSuggestions').addClass('hidden').empty();
return;
}
const matches = data.filter(p =>
p.Player.toLowerCase().includes(val));
if (matches.length === 0) {
$('#autocompleteSuggestions').addClass('hidden').empty();
return;
}
$('#autocompleteSuggestions').removeClass('hidden').html(
matches.map(m => `<div class="px-3 py-2 cursor-pointer
hover:bg-yellow-500" data-
player="${m.Player}">${m.Player}</div>`).join('')
);
});

$('#autocompleteSuggestions').off('click').on('click', 'div',
function() {
const playerName = $(this).data('player');
$('#playerSearch').val(playerName);
$('#autocompleteSuggestions').addClass('hidden').empty();
const player = playerData.find(p => p.Player === playerName);
if (player) showPlayerDetails(player);
});
}
function showPlayerDetails(player) {
$('#playerDetails').removeClass('hidden').html(`
<div>
<img src="${player.playersimages}" alt="${player.Player}"
style="max-width:120px;">
<h3 class="text-xl font-bold mt-2 mb-1">${player.Player}</h3>
<p class="mb-2">${player.Position} | ${player.Nation} | Age:
${player.Age}</p>
<div class="grid grid-cols-2 gap-2 text-sm">
<div>Goals:</div><div class="font-bold">${player.Goals}</div>
<div>Assists:</div><div class="font-
bold">${player.Assists}</div>
<div>Market Value:</div><div class="font-bold text-green-
300">₹${player.Marketvalueincrores} Cr</div>
<div>Club:</div><div>${player.CLUB}</div>
<div>Yellow Cards:</div><div>${player.Yellowcard}</div>
<div>Red Cards:</div><div>${player.Redcard}</div>
</div>
</div>
`);
}

$('#compareBtn').on('click', function() {
let p1 = $('#comparePlayer1').val();
let p2 = $('#comparePlayer2').val();
if (!p1 || !p2) {
alert('Please select two players to compare.');
return;
}
if (p1 === p2) {
alert('Please select two different players.');
return;
}
let player1 = playerData.find(p => p.Player === p1);
let player2 = playerData.find(p => p.Player === p2);
if (!player1 || !player2) {
alert('Player data not found.');
return;
}
showComparison(player1, player2);
});

function showComparison(player1, player2) {


$('#comparisonResult').removeClass('hidden').html(`
<div class="comparison-card bg-gradient-to-br from-yellow-400 to-
red-600 shadow-xl">
<img src="${player1.playersimages}" alt="${player1.Player}">
<h3 class="text-xl font-bold">${player1.Player}</h3>
<p class="text-sm mb-2">${player1.Position} |
${player1.Nation}</p>
<div class="grid grid-cols-2 gap-2 text-sm text-white">
<div>Goals:</div><div class="font-
bold">${player1.Goals}</div>
<div>Assists:</div><div class="font-
bold">${player1.Assists}</div>
<div>Market Value:</div><div class="font-bold text-green-
300">₹${player1.Marketvalueincrores} Cr</div>
</div>
</div>
<div class="comparison-card bg-gradient-to-br from-blue-400 to-
green-600 shadow-xl">
<img src="${player2.playersimages}" alt="${player2.Player}">
<h3 class="text-xl font-bold">${player2.Player}</h3>
<p class="text-sm mb-2">${player2.Position} |
${player2.Nation}</p>
<div class="grid grid-cols-2 gap-2 text-sm text-white">
<div>Goals:</div><div class="font-
bold">${player2.Goals}</div>
<div>Assists:</div><div class="font-
bold">${player2.Assists}</div>
<div>Market Value:</div><div class="font-bold text-green-
300">₹${player2.Marketvalueincrores} Cr</div>
</div>
</div>
`);
}

$('#generateChart').on('click', function() {
let type = $('#chartType').val();
let topN = parseInt($('#topN').val()) || 10;
let sorted, labels, data, label;
if (type === 'goals') {
sorted = playerData.slice().sort((a, b) => parseInt(b.Goals) -
parseInt(a.Goals));
labels = sorted.slice(0, topN).map(p => p.Player);
data = sorted.slice(0, topN).map(p => parseInt(p.Goals));
label = 'Goals';
} else if (type === 'assists') {
sorted = playerData.slice().sort((a, b) => parseInt(b.Assists) -
parseInt(a.Assists));
labels = sorted.slice(0, topN).map(p => p.Player);
data = sorted.slice(0, topN).map(p => parseInt(p.Assists));
label = 'Assists';
} else if (type === 'marketValue') {
sorted = playerData.slice().sort((a, b) =>
parseFloat(b.Marketvalueincrores) - parseFloat(a.Marketvalueincrores));
labels = sorted.slice(0, topN).map(p => p.Player);
data = sorted.slice(0, topN).map(p =>
parseFloat(p.Marketvalueincrores));
label = 'Market Value (Cr)';
} else if (type === 'ageDistribution') {
let ageBuckets = {};
playerData.forEach(p => {
let age = parseInt(p.Age);
let bucket = Math.floor(age / 5) * 5 + '-' + (Math.floor(age /
5) * 5 + 4);
ageBuckets[bucket] = (ageBuckets[bucket] || 0) + 1;
});
labels = Object.keys(ageBuckets);
data = Object.values(ageBuckets);
label = 'Players';
} else if (type === 'positionDistribution') {
let posBuckets = {};
playerData.forEach(p => {
let pos = p.Position;
posBuckets[pos] = (posBuckets[pos] || 0) + 1;
});
labels = Object.keys(posBuckets);
data = Object.values(posBuckets);
label = 'Players';
} else if (type === 'nationalityDistribution') {
let natBuckets = {};
playerData.forEach(p => {
let nat = p.Nation;
natBuckets[nat] = (natBuckets[nat] || 0) + 1;
});
labels = Object.keys(natBuckets);
data = Object.values(natBuckets);
label = 'Players';
}
if (window.chartInstance) window.chartInstance.destroy();
const ctx = document.getElementById('mainChart').getContext('2d');
window.chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: label,
data: data,
backgroundColor: 'rgba(250,204,21,0.7)'
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
x: { ticks: { color: '#fff' } },
y: { beginAtZero: true, ticks: { color: '#fff' } }
}
}
});
});

$('#featuresDropdown').on('change', function() {
let val = $(this).val();
$('#basicChartsSection, #heatmapSection,
#bestElevenSection').addClass('hidden');
if (val === 'basicCharts')
$('#basicChartsSection').removeClass('hidden');
if (val === 'heatmap') $('#heatmapSection').removeClass('hidden');
if (val === 'bestEleven')
$('#bestElevenSection').removeClass('hidden');
});

$('#generateBestXI').on('click', function() {
let formation = $('#formationSelect').val();
let metric = $('#bestXIMetric').val();
let sorted;
if (metric === 'goals') {
sorted = playerData.slice().sort((a, b) => parseInt(b.Goals) -
parseInt(a.Goals));
} else if (metric === 'assists') {
sorted = playerData.slice().sort((a, b) => parseInt(b.Assists) -
parseInt(a.Assists));
} else if (metric === 'marketValue') {
sorted = playerData.slice().sort((a, b) =>
parseFloat(b.Marketvalueincrores) - parseFloat(a.Marketvalueincrores));
} else {
sorted = playerData.slice().sort((a, b) => (
(parseInt(b.Goals) + parseInt(b.Assists) +
parseFloat(b.Marketvalueincrores)) -
(parseInt(a.Goals) + parseInt(a.Assists) +
parseFloat(a.Marketvalueincrores))
));
}
let bestXI = sorted.slice(0, 11);
$('#bestXICardView').html(
bestXI.map(p => `
<div class="comparison-card">
<img src="${p.playersimages}" alt="${p.Player}">
<h3 class="text-lg font-bold">${p.Player}</h3>
<p>${p.Position} | ${p.Nation}</p>
<div>Goals: <span class="font-bold">${p.Goals}</span></div>
<div>Assists: <span class="font-
bold">${p.Assists}</span></div>
<div>Market Value: <span class="font-bold text-green-
300">₹${p.Marketvalueincrores} Cr</span></div>
</div>
`).join('')
);
});
</script>
</body>
</html>

You might also like