dbroqua/MusicTopus
2
0
Fork 1
Code Issues 12 Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

Updated statistics

Browse source
This commit is contained in:
Damien Broqua 2024-02-02 09:38:35 +01:00
parent bf2e9be3b7
commit 061e72c459
4 changed files with 118 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

94
views/pages/mon-compte/ma-collection/statistiques.ejs
View file

@ -3,17 +3,15 @@
Mes statistiques
</h1>
<div class="grid gap-10 grid-cols-1 md:grid-cols-2">
<div>
<div class="grid gap-10 grid-cols-1 md:grid-cols-2 mb-10">
<div class="md:col-span-2 box">
<h2>Mon top 10</h2>
<table>
<thead>
<tr>
<th style="width: 40px;"></th>
<th style="width: 60px;"></th>
<th>Artiste</th>
<th style="width: 80px;">Albums</th>
<th style="width: 100px;">Albums</th>
</tr>
</thead>
<tbody>
@ -27,16 +25,17 @@
</tbody>
</table>
</div>
<div></div>
<div>
</div>
<div class="grid gap-10 grid-cols-1 md:grid-cols-2 mb-10">
<div class="box">
<h2>Genres</h2>
<canvas id="byGenres"></canvas>
</div>
<div>
<div class="box">
<h2>Styles</h2>
<canvas id="byStyles"></canvas>
</div>
<div>
<div class="box">
<h2>Formats</h2>
<canvas id="byFormats"></canvas>
</div>
@ -52,8 +51,20 @@
const ctxStyles = document.getElementById('byStyles');
const ctxFormats = document.getElementById('byFormats');
const options = {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: false,
}
}
};
new Chart(ctxGenres, {
type: 'pie',
type: 'doughnut',
data: {
labels: Object.keys(byGenres).map((index) => {return byGenres[index].name}),
datasets: [
@ -63,45 +74,40 @@
},
],
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: false,
}
}
},
options,
});
const styleLabels = [];
const styleBg = [];
const styleData = [];
for ( let i = 0 ; i < byStyles.length ; i += 1 ) {
const {
name,
color,
count,
} = byStyles[i];
styleLabels.push(name);
styleBg.push(color);
styleData.push(count);
}
new Chart(ctxStyles, {
type: 'pie',
type: 'doughnut',
data: {
labels: Object.keys(byStyles).map((index) => {return byStyles[index].name}),
labels: styleLabels,
datasets: [
{
backgroundColor: Object.keys(byStyles).map((index) => {return byStyles[index].color}),
data: Object.keys(byStyles).map((index) => {return byStyles[index].count}),
backgroundColor: styleBg,
data: styleData,
},
],
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: false,
}
}
},
options,
});
new Chart(ctxFormats, {
type: 'pie',
type: 'doughnut',
data: {
labels: Object.keys(byFormats).map((index) => {return byFormats[index].name}),
datasets: [
@ -111,16 +117,6 @@
},
],
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: false,
}
}
},
options,
});
</script>