dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
sass/index.scss
View file

@ -16,6 +16,7 @@
@import './list';
@import './box';
@import './loader';
@import './table';
@import './error';
@import './messages.scss';

23
sass/table.scss Normal file
View file

@ -0,0 +1,23 @@
table {
th,
td {
padding: 0.75rem;
text-align: left;
}
thead {
tr {
border-bottom: 2px solid var(--font-color);
}
}
tbody {
tr {
background-color: var(--default-color);
&:nth-child(2n) {
background-color: var(--bg-alternate-color);
}
}
}
}

72
src/middleware/Albums.js
View file

@ -165,24 +165,17 @@ Publié automatiquement via #musictopus`;
constructor(req, viewname) {
super(req, viewname);
this.colors = {
nord0: "#2e3440",
nord1: "#3b4252",
nord2: "#434c5e",
nord3: "#4C566A",
nord4: "#d8dee9",
nord5: "#e5e9f0",
nord6: "#eceff4",
nord7: "#8fbcbb",
nord8: "#88c0d0",
nord9: "#81a1c1",
nord10: "#5e81ac",
nord11: "#d08770",
nord12: "#bf616a",
nord13: "#ebcb8b",
nord14: "#a3be8c",
nord15: "#b48ead",
};
this.colors = [
"#2e3440",
"#d8dee9",
"#8fbcbb",
"#5e81ac",
"#d08770",
"#bf616a",
"#ebcb8b",
"#a3be8c",
"#b48ead",
];
}
/**
@ -535,6 +528,10 @@ Publié automatiquement via #musictopus`;
const byStyles = {};
const byFormats = {};
const top10 = [];
let byStyles10 = [];
const max = this.colors.length - 1;
const colorsCount = this.colors.length;
const albums = await AlbumsModel.find({
User,
@ -565,7 +562,7 @@ Publié automatiquement via #musictopus`;
name,
count: 0,
color: this.colors[
`nord${Object.keys(byGenres).length % 15}`
Object.keys(byGenres).length % colorsCount
],
};
}
@ -581,7 +578,7 @@ Publié automatiquement via #musictopus`;
name,
count: 0,
color: this.colors[
`nord${Object.keys(byStyles).length % 15}`
Object.keys(byStyles).length % colorsCount
],
};
}
@ -599,7 +596,7 @@ Publié automatiquement via #musictopus`;
name,
count: 0,
color: this.colors[
`nord${Object.keys(byFormats).length % 15}`
Object.keys(byFormats).length % colorsCount
],
};
}
@ -615,13 +612,42 @@ Publié automatiquement via #musictopus`;
top10.push(top[index]);
});
// INFO: On ordonne par quantité pour on récupère le top 10
// INFO: On convertit les styles en tableau
Object.keys(byStyles).forEach((index) => {
byStyles10.push(byStyles[index]);
});
// INFO: On ordonne les artistes par quantité d'albums
top10.sort((a, b) => (a.count > b.count ? -1 : 1));
// INFO: On ordonne les styles par quantité
byStyles10.sort((a, b) => (a.count > b.count ? -1 : 1));
const tmp = [];
// INFO: On recupère le top N des styles et on mets le reste dans le label "autre"
for (let i = 0; i < byStyles10.length; i += 1) {
if (i < max) {
tmp.push({
...byStyles10[i],
color: this.colors[max - i],
});
} else if (i === max) {
tmp.push({
name: "Autre",
count: 0,
color: this.colors[0],
});
tmp[max].count += byStyles10[i].count;
} else {
tmp[max].count += byStyles10[i].count;
}
}
byStyles10 = tmp;
this.setPageTitle("Mes statistiques");
this.setPageContent("top10", top10.splice(0, 10));
this.setPageContent("byGenres", byGenres);
this.setPageContent("byStyles", byStyles);
this.setPageContent("byStyles", byStyles10);
this.setPageContent("byFormats", byFormats);
}

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>