mirror of
https://github.com/skidoodle/ncore-stats.git
synced 2025-02-15 05:09:14 +01:00
chartjs
This commit is contained in:
parent
134d09869e
commit
8a994c3bb8
GPG key ID:
A06E3070D7D55BF2
1 changed files with 252 additions and 171 deletions
423
index.html
423
index.html
|
|
@ -1,171 +1,156 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>nCore Profile Stats</title>
|
<title>nCore Profile Stats</title>
|
||||||
<script src="//cdn.tailwindcss.com"></script>
|
<script src="//cdn.tailwindcss.com"></script>
|
||||||
<script src="//unpkg.com/boxicons"></script>
|
<script src="//unpkg.com/boxicons"></script>
|
||||||
|
<script src="//unpkg.com/chart.js"></script>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background-color: #121212;
|
background-color: #121212;
|
||||||
color: #efefef;
|
color: #efefef;
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
#historyModal {
|
#historyModal {
|
||||||
transition: opacity 0.3s ease-in-out;
|
transition: opacity 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
#historyModal.hidden {
|
#historyModal.hidden {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#historyModal.visible {
|
#historyModal.visible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#profiles {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
#profiles {
|
#profiles {
|
||||||
display: flex;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 1024px) {
|
||||||
#profiles {
|
#profiles {
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
.profile-card {
|
||||||
#profiles {
|
flex: 0 1 calc(100% - 2rem);
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
max-width: 400px;
|
||||||
}
|
background-color: #1f1f1f;
|
||||||
}
|
color: #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
.profile-card {
|
.profile-card button {
|
||||||
flex: 0 1 calc(100% - 2rem);
|
background-color: #3b3b3b;
|
||||||
max-width: 400px;
|
color: #ffffff;
|
||||||
background-color: #1f1f1f;
|
}
|
||||||
color: #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-card button {
|
.profile-card button:hover {
|
||||||
background-color: #3b3b3b;
|
background-color: #5b5b5b;
|
||||||
color: #ffffff;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.profile-card button:hover {
|
#historyModal .bg-gray-800 {
|
||||||
background-color: #5b5b5b;
|
background-color: #2c2c2c;
|
||||||
}
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#historyModal button {
|
||||||
|
background-color: #444444;
|
||||||
|
}
|
||||||
|
|
||||||
|
#historyModal button:hover {
|
||||||
|
background-color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
#historyModal .bg-gray-800 {
|
#historyModal .bg-gray-800 {
|
||||||
background-color: #2c2c2c;
|
padding: 1.5rem;
|
||||||
color: #ffffff;
|
width: 90%;
|
||||||
}
|
|
||||||
|
|
||||||
#historyModal button {
|
|
||||||
background-color: #444444;
|
|
||||||
}
|
|
||||||
|
|
||||||
#historyModal button:hover {
|
|
||||||
background-color: #666666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button {
|
|
||||||
background-color: #444444;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button.active {
|
|
||||||
background-color: #ff5722;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
display: none;
|
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: #333333;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
#historyModal .bg-gray-800 {
|
|
||||||
padding: 1.5rem;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="p-8 flex flex-col items-center">
|
<body class="p-8 flex flex-col items-center">
|
||||||
<h1 class="text-4xl mb-10 font-semibold text-gray-100 text-center">nCore Profile Stats</h1>
|
<h1 class="text-4xl mb-10 font-semibold text-gray-100 text-center">
|
||||||
|
nCore Profile Stats
|
||||||
|
</h1>
|
||||||
|
|
||||||
<div id="profiles" class="w-full max-w-7xl"></div>
|
<div id="profiles" class="w-full max-w-7xl"></div>
|
||||||
|
|
||||||
<div id="historyModal" class="fixed inset-0 hidden bg-black bg-opacity-50 flex items-center justify-center z-50" aria-hidden="true" aria-modal="true" tabindex="-1">
|
<div
|
||||||
<div class="bg-gray-800 rounded-lg p-8 w-11/12 max-w-3xl text-white shadow-lg relative">
|
id="historyModal"
|
||||||
<h2 class="text-2xl mb-6 font-semibold" id="modal-profile-name">Historical Data for <span></span></h2>
|
class="fixed inset-0 hidden bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-modal="true"
|
||||||
|
tabindex="-1">
|
||||||
|
<div
|
||||||
|
class="bg-gray-800 rounded-lg p-8 w-11/12 max-w-3xl text-white shadow-lg relative">
|
||||||
|
<h2 class="text-2xl mb-6 font-semibold" id="modal-profile-name">
|
||||||
|
Historical Data for <span></span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div class="button-container mb-4">
|
<canvas id="historyChart" width="330px" height="300px"></canvas>
|
||||||
<button class="tab-button active" onclick="openTab(event, 'rankTab')">Rank</button>
|
|
||||||
<button class="tab-button" onclick="openTab(event, 'uploadTab')">Upload</button>
|
|
||||||
<button class="tab-button" onclick="openTab(event, 'downloadTab')">Download</button>
|
|
||||||
<button class="tab-button" onclick="openTab(event, 'pointsTab')">Points</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="rankTab" class="tab-content active">
|
<button
|
||||||
<p id="rank-data"></p>
|
class="mt-4 px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded"
|
||||||
</div>
|
onclick="closeModal()">
|
||||||
<div id="uploadTab" class="tab-content">
|
Close
|
||||||
<p id="upload-data"></p>
|
</button>
|
||||||
</div>
|
<button
|
||||||
<div id="downloadTab" class="tab-content">
|
class="absolute top-2 right-2 text-white"
|
||||||
<p id="download-data"></p>
|
onclick="closeModal()">
|
||||||
</div>
|
<i class="bx bx-x text-2xl"></i>
|
||||||
<div id="pointsTab" class="tab-content">
|
</button>
|
||||||
<p id="points-data"></p>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="mt-4 px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded" onclick="closeModal()">Close</button>
|
|
||||||
<button class="absolute top-2 right-2 text-white" onclick="closeModal()"><i class='bx bx-x text-2xl'></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let allProfileData = [];
|
let allProfileData = []
|
||||||
|
let historyChart
|
||||||
|
|
||||||
async function fetchProfiles() {
|
async function fetchProfiles() {
|
||||||
const response = await fetch('/data');
|
const response = await fetch('/data')
|
||||||
allProfileData = await response.json();
|
allProfileData = await response.json()
|
||||||
|
|
||||||
const profilesDiv = document.getElementById('profiles');
|
const profilesDiv = document.getElementById('profiles')
|
||||||
profilesDiv.innerHTML = '';
|
profilesDiv.innerHTML = ''
|
||||||
|
|
||||||
const profileGroups = groupByOwner(allProfileData);
|
const profileGroups = groupByOwner(allProfileData)
|
||||||
|
|
||||||
for (const [owner, records] of Object.entries(profileGroups)) {
|
for (const [owner, records] of Object.entries(profileGroups)) {
|
||||||
const latestRecord = records[records.length - 1];
|
const latestRecord = records[records.length - 1]
|
||||||
const profileCard = document.createElement('div');
|
const profileCard = document.createElement('div')
|
||||||
profileCard.classList.add('profile-card', 'rounded-lg', 'shadow-lg', 'p-6', 'w-full', 'flex', 'flex-col', 'justify-between');
|
profileCard.classList.add(
|
||||||
|
'profile-card',
|
||||||
|
'rounded-lg',
|
||||||
|
'shadow-lg',
|
||||||
|
'p-6',
|
||||||
|
'w-full',
|
||||||
|
'flex',
|
||||||
|
'flex-col',
|
||||||
|
'justify-between'
|
||||||
|
)
|
||||||
|
|
||||||
profileCard.innerHTML = `
|
profileCard.innerHTML = `
|
||||||
<h2 class="text-2xl font-semibold mb-4"><i class='bx bxs-user text-2xl mr-2'></i>${owner}</h2>
|
<h2 class="text-2xl font-semibold mb-4"><i class='bx bxs-user text-2xl mr-2'></i>${owner}</h2>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<p><i class='bx bx-trophy mr-2'></i> Rank: ${latestRecord.rank}</p>
|
<p><i class='bx bx-trophy mr-2'></i> Rank: ${latestRecord.rank}</p>
|
||||||
|
|
@ -175,51 +160,147 @@
|
||||||
<p><i class='bx bx-coin mr-2'></i> Points: ${latestRecord.points}</p>
|
<p><i class='bx bx-coin mr-2'></i> Points: ${latestRecord.points}</p>
|
||||||
</div>
|
</div>
|
||||||
<button class="mt-6 px-4 py-2 text-white rounded" onclick="showHistory('${owner}', event)">View History</button>
|
<button class="mt-6 px-4 py-2 text-white rounded" onclick="showHistory('${owner}', event)">View History</button>
|
||||||
`;
|
`
|
||||||
|
|
||||||
profilesDiv.appendChild(profileCard);
|
profilesDiv.appendChild(profileCard)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupByOwner(data) {
|
||||||
|
return data.reduce((acc, record) => {
|
||||||
|
acc[record.owner] = acc[record.owner] || []
|
||||||
|
acc[record.owner].push(record)
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseStorageValue(value) {
|
||||||
|
const numericValue = parseFloat(value)
|
||||||
|
if (value.includes('TiB')) {
|
||||||
|
return numericValue.toFixed(2)
|
||||||
|
} else if (value.includes('GiB')) {
|
||||||
|
return (numericValue / 1024).toFixed(2)
|
||||||
|
} else {
|
||||||
|
return numericValue.toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseSpeedValue(value) {
|
||||||
|
return parseFloat(value).toFixed(2)
|
||||||
|
}
|
||||||
|
|
||||||
|
function showHistory(owner, event) {
|
||||||
|
event.stopPropagation()
|
||||||
|
const historyModal = document.getElementById('historyModal')
|
||||||
|
document.getElementById('modal-profile-name').innerText = owner
|
||||||
|
|
||||||
|
const profileHistory = allProfileData.filter(
|
||||||
|
record => record.owner === owner
|
||||||
|
)
|
||||||
|
|
||||||
|
const labels = profileHistory.map(record =>
|
||||||
|
new Date(record.timestamp).toLocaleDateString()
|
||||||
|
)
|
||||||
|
const rankData = profileHistory.map(record => parseFloat(record.rank))
|
||||||
|
const uploadData = profileHistory.map(record =>
|
||||||
|
parseStorageValue(record.upload)
|
||||||
|
)
|
||||||
|
const currentUploadData = profileHistory.map(record =>
|
||||||
|
parseSpeedValue(record.current_upload)
|
||||||
|
)
|
||||||
|
const downloadData = profileHistory.map(record =>
|
||||||
|
parseSpeedValue(record.current_download)
|
||||||
|
)
|
||||||
|
const pointsData = profileHistory.map(record =>
|
||||||
|
parseFloat(record.points)
|
||||||
|
)
|
||||||
|
|
||||||
|
const chartData = {
|
||||||
|
labels: labels,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Rank',
|
||||||
|
data: rankData,
|
||||||
|
borderColor: 'rgba(255, 99, 132, 1)',
|
||||||
|
fill: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Total Uploaded (TB)',
|
||||||
|
data: uploadData,
|
||||||
|
borderColor: 'rgba(54, 162, 235, 1)',
|
||||||
|
fill: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Upload Speed (MiB/s)',
|
||||||
|
data: currentUploadData,
|
||||||
|
borderColor: 'rgba(255, 206, 86, 1)',
|
||||||
|
fill: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Download Speed (MiB/s)',
|
||||||
|
data: downloadData,
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
fill: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Points',
|
||||||
|
data: pointsData,
|
||||||
|
borderColor: 'rgba(153, 102, 255, 1)',
|
||||||
|
fill: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
function groupByOwner(data) {
|
if (historyChart) {
|
||||||
return data.reduce((acc, record) => {
|
historyChart.destroy()
|
||||||
acc[record.owner] = acc[record.owner] || [];
|
|
||||||
acc[record.owner].push(record);
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function showHistory(owner, event) {
|
const ctx = document.getElementById('historyChart').getContext('2d')
|
||||||
event.stopPropagation();
|
historyChart = new Chart(ctx, {
|
||||||
const historyModal = document.getElementById('historyModal');
|
type: 'line',
|
||||||
document.getElementById('modal-profile-name').innerText = owner;
|
data: chartData,
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Date',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Value',
|
||||||
|
},
|
||||||
|
beginAtZero: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (tooltipItem) {
|
||||||
|
const label = tooltipItem.dataset.label || ''
|
||||||
|
const value = tooltipItem.raw
|
||||||
|
return `${label}: ${value}`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
const profileHistory = allProfileData.filter(record => record.owner === owner);
|
historyModal.classList.remove('hidden')
|
||||||
|
setTimeout(() => historyModal.classList.add('visible'), 10)
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementById('rank-data').innerHTML = profileHistory.map(record => `<p>${new Date(record.timestamp).toLocaleDateString()} - Rank: ${record.rank}</p>`).join('');
|
function closeModal() {
|
||||||
document.getElementById('upload-data').innerHTML = profileHistory.map(record => `<p>${new Date(record.timestamp).toLocaleDateString()} - Upload: ${record.upload}</p>`).join('');
|
const historyModal = document.getElementById('historyModal')
|
||||||
document.getElementById('download-data').innerHTML = profileHistory.map(record => `<p>${new Date(record.timestamp).toLocaleDateString()} - Download: ${record.current_download}</p>`).join('');
|
historyModal.classList.remove('visible')
|
||||||
document.getElementById('points-data').innerHTML = profileHistory.map(record => `<p>${new Date(record.timestamp).toLocaleDateString()} - Points: ${record.points}</p>`).join('');
|
historyModal.classList.add('hidden')
|
||||||
|
}
|
||||||
|
|
||||||
historyModal.classList.remove('hidden');
|
fetchProfiles()
|
||||||
setTimeout(() => historyModal.classList.add('visible'), 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
function openTab(evt, tabName) {
|
|
||||||
document.querySelectorAll('.tab-button').forEach(button => button.classList.remove('active'));
|
|
||||||
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
|
||||||
|
|
||||||
evt.target.classList.add('active');
|
|
||||||
document.getElementById(tabName).classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeModal() {
|
|
||||||
const historyModal = document.getElementById('historyModal');
|
|
||||||
historyModal.classList.remove('visible');
|
|
||||||
historyModal.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchProfiles();
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue