97 lines
3.3 KiB
HTML
97 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Live Music Ratings</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<main class="container">
|
|
<h1>🎵 Live Leaderboard</h1>
|
|
|
|
<article>
|
|
<canvas id="ratingsChart"></canvas>
|
|
</article>
|
|
|
|
<article>
|
|
<table id="stats-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Listener</th>
|
|
<th>Tracks Rated</th>
|
|
<th>Average Rating</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td aria-busy="true" colspan="3">Loading live stats...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</article>
|
|
</main>
|
|
|
|
<script>
|
|
// 3. Initialize the Chart (empty at first)
|
|
const ctx = document.getElementById('ratingsChart');
|
|
let ratingsChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [], // This will hold user names
|
|
datasets: [{
|
|
label: 'Total Tracks Rated',
|
|
data: [], // This will hold the counts
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1,
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { stepSize: 1 } // Keep the Y axis as whole numbers
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
async function fetchLiveStats() {
|
|
try {
|
|
const response = await fetch('/stats');
|
|
const data = await response.json();
|
|
|
|
// Update the Table
|
|
const tbody = document.querySelector('#stats-table tbody');
|
|
tbody.innerHTML = '';
|
|
data.forEach(user => {
|
|
const row = `<tr>
|
|
<td><strong>${user.name}</strong></td>
|
|
<td>${user.rating_count}</td>
|
|
<td>⭐ ${user.average_rating.toFixed(2)}</td>
|
|
</tr>`;
|
|
tbody.innerHTML += row;
|
|
});
|
|
|
|
// Update the Chart
|
|
// Map the JSON data into simple arrays for Chart.js
|
|
ratingsChart.data.labels = data.map(user => user.name);
|
|
ratingsChart.data.datasets[0].data = data.map(user => user.rating_count);
|
|
|
|
// Call update('none') to prevent the chart from doing a bouncy
|
|
// re-draw animation every 2 seconds when it polls.
|
|
ratingsChart.update('none');
|
|
|
|
} catch (error) {
|
|
console.error("Error fetching stats:", error);
|
|
}
|
|
}
|
|
|
|
fetchLiveStats();
|
|
setInterval(fetchLiveStats, 2000);
|
|
</script>
|
|
</body>
|
|
</html>
|