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

Added current year and last year in statistics page

Browse source
This commit is contained in:
Damien Broqua 2024-12-29 14:50:51 +01:00
parent 48287f2bae
commit 14f46ae112
3 changed files with 228 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
sass/box.scss
View file

@ -3,7 +3,6 @@
border-radius: 6px;
box-shadow: var(--box-shadow-color) 0px 3px 6px 0px;
color: var(--font-color);
display: block;
padding: 1.25rem;
@include transition() {}

95
src/middleware/Albums.js
View file

@ -1,4 +1,4 @@
import { format as formatDate } from "date-fns";
import { format as formatDate, startOfYear, subYears } from "date-fns";
import fs from "fs";
import Mastodon from "mastodon";
@ -525,6 +525,22 @@ Publié automatiquement via #musictopus`;
const top10 = [];
let byStyles10 = [];
const max = this.colors.length - 1;
const startYear = startOfYear(new Date());
const lastStartYear = startOfYear(subYears(new Date(), 1));
const currentYear = {
year: formatDate(startYear, "yyyy"),
total: 0,
byGenres: {},
byStyles: {},
byFormats: {},
};
const lastYear = {
year: formatDate(lastStartYear, "yyyy"),
total: 0,
byGenres: {},
byStyles: {},
byFormats: {},
};
const colorsCount = this.colors.length;
@ -535,7 +551,14 @@ Publié automatiquement via #musictopus`;
for (let i = 0; i < albums.length; i += 1) {
const currentFormats = [];
const { artists, genres, styles, formats } = albums[i];
const { artists, genres, styles, formats, createdAt } = albums[i];
// INFO: On s'occupe de la rétrospective
if (createdAt > startYear) {
currentYear.total += 1;
} else if (createdAt > lastStartYear) {
lastYear.total += 1;
}
// INFO: On regroupe les artistes par nom pour en faire le top10
for (let j = 0; j < artists.length; j += 1) {
@ -563,6 +586,28 @@ Publié automatiquement via #musictopus`;
}
byGenres[name].count += 1;
// INFO: On s'occupe de la rétrospective
if (createdAt > startYear) {
if (!currentYear.byGenres[name]) {
currentYear.total += 1;
currentYear.byGenres[name] = {
name,
count: 0,
color: byGenres[name].color,
};
}
currentYear.byGenres[name].count += 1;
} else if (createdAt > lastStartYear) {
if (!lastYear.byGenres[name]) {
lastYear.byGenres[name] = {
name,
count: 0,
color: byGenres[name].color,
};
}
lastYear.byGenres[name].count += 1;
}
}
// INFO: On regroupe les styles
@ -579,6 +624,28 @@ Publié automatiquement via #musictopus`;
}
byStyles[name].count += 1;
// INFO: On s'occupe de la rétrospective
if (createdAt > startYear) {
if (!currentYear.byStyles[name]) {
currentYear.total += 1;
currentYear.byStyles[name] = {
name,
count: 0,
color: byStyles[name].color,
};
}
currentYear.byStyles[name].count += 1;
} else if (createdAt > lastStartYear) {
if (!lastYear.byStyles[name]) {
lastYear.byStyles[name] = {
name,
count: 0,
color: byStyles[name].color,
};
}
lastYear.byStyles[name].count += 1;
}
}
// INFO: On regroupe les formats
@ -598,6 +665,28 @@ Publié automatiquement via #musictopus`;
byFormats[name].count += 1;
currentFormats.push(name);
// INFO: On s'occupe de la rétrospective
if (createdAt > startYear) {
if (!currentYear.byFormats[name]) {
currentYear.total += 1;
currentYear.byFormats[name] = {
name,
count: 0,
color: byFormats[name].color,
};
}
currentYear.byFormats[name].count += 1;
} else if (createdAt > lastStartYear) {
if (!lastYear.byFormats[name]) {
lastYear.byFormats[name] = {
name,
count: 0,
color: byFormats[name].color,
};
}
lastYear.byFormats[name].count += 1;
}
}
}
}
@ -644,6 +733,8 @@ Publié automatiquement via #musictopus`;
this.setPageContent("byGenres", byGenres);
this.setPageContent("byStyles", byStyles10);
this.setPageContent("byFormats", byFormats);
this.setPageContent("currentYear", currentYear);
this.setPageContent("lastYear", lastYear);
}
/**

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

@ -3,7 +3,7 @@
Mes statistiques
</h1>
<div class="grid gap-10 grid-cols-1 md:grid-cols-2 mb-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-10">
<div class="md:col-span-2 box">
<h2>Mon top 10</h2>
<table>
@ -25,20 +25,43 @@
</tbody>
</table>
</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 class="box">
<h2>Styles</h2>
<canvas id="byStyles"></canvas>
</div>
<div class="box">
<h2>Formats</h2>
<canvas id="byFormats"></canvas>
</div>
<div><!-- histoire de faire un break --></div>
<div class="box">
<h2><%= page.currentYear.year %> (<%= page.currentYear.total %> ajout<%= page.currentYear.total > 1 ? 's' : '' %>)</h2>
<h3>Genres</h3>
<canvas id="currentYearGenres"></canvas>
<h3>Styles</h3>
<canvas id="currentYearStyles"></canvas>
<h3>Formats</h3>
<canvas id="currentYearFormats"></canvas>
</div>
<div class="box">
<h2><%= page.lastYear.year %> (<%= page.lastYear.total %> ajout<%= page.lastYear.total > 1 ? 's' : '' %>)</h2>
<h3>Genres</h3>
<canvas id="lastYearGenres"></canvas>
<h3>Styles</h3>
<canvas id="lastYearStyles"></canvas>
<h3>Formats</h3>
<canvas id="lastYearFormats"></canvas>
</div>
</div>
</main>
@ -47,14 +70,26 @@
const byStyles = <%- JSON.stringify(page.byStyles) %>;
const byFormats = <%- JSON.stringify(page.byFormats) %>;
const currentYear = <%- JSON.stringify(page.currentYear) %>;
const lastYear = <%- JSON.stringify(page.lastYear) %>;
const ctxGenres= document.getElementById('byGenres');
const ctxStyles = document.getElementById('byStyles');
const ctxFormats = document.getElementById('byFormats');
const ctxCurrentYearGenres = document.getElementById('currentYearGenres');
const ctxCurrentYearStyles = document.getElementById('currentYearStyles');
const ctxCurrentYearFormats = document.getElementById('currentYearFormats');
const ctxLastYearGenres = document.getElementById('lastYearGenres');
const ctxLastYearStyles = document.getElementById('lastYearStyles');
const ctxLastYearFormats = document.getElementById('lastYearFormats');
const options = {
responsive: true,
plugins: {
legend: {
display: false,
position: 'bottom',
},
title: {
@ -76,6 +111,32 @@
},
options,
});
new Chart(ctxCurrentYearGenres, {
type: 'doughnut',
data: {
labels: Object.keys(currentYear.byGenres).map((index) => {return currentYear.byGenres[index].name}),
datasets: [
{
backgroundColor: Object.keys(currentYear.byGenres).map((index) => {return currentYear.byGenres[index].color}),
data: Object.keys(currentYear.byGenres).map((index) => {return currentYear.byGenres[index].count}),
},
],
},
options,
});
new Chart(ctxLastYearGenres, {
type: 'doughnut',
data: {
labels: Object.keys(lastYear.byGenres).map((index) => {return lastYear.byGenres[index].name}),
datasets: [
{
backgroundColor: Object.keys(lastYear.byGenres).map((index) => {return lastYear.byGenres[index].color}),
data: Object.keys(lastYear.byGenres).map((index) => {return lastYear.byGenres[index].count}),
},
],
},
options,
});
const styleLabels = [];
const styleBg = [];
@ -105,6 +166,32 @@
},
options,
});
new Chart(ctxCurrentYearStyles, {
type: 'doughnut',
data: {
labels: Object.keys(currentYear.byStyles).map((index) => {return currentYear.byStyles[index].name}),
datasets: [
{
backgroundColor: Object.keys(currentYear.byStyles).map((index) => {return currentYear.byStyles[index].color}),
data: Object.keys(currentYear.byStyles).map((index) => {return currentYear.byStyles[index].count}),
},
],
},
options,
});
new Chart(ctxLastYearStyles, {
type: 'doughnut',
data: {
labels: Object.keys(lastYear.byStyles).map((index) => {return lastYear.byStyles[index].name}),
datasets: [
{
backgroundColor: Object.keys(lastYear.byStyles).map((index) => {return lastYear.byStyles[index].color}),
data: Object.keys(lastYear.byStyles).map((index) => {return lastYear.byStyles[index].count}),
},
],
},
options,
});
new Chart(ctxFormats, {
type: 'doughnut',
@ -119,4 +206,33 @@
},
options,
});
new Chart(ctxCurrentYearFormats, {
type: 'doughnut',
data: {
labels: Object.keys(currentYear.byFormats).map((index) => {return currentYear.byFormats[index].name}),
datasets: [
{
backgroundColor: Object.keys(currentYear.byFormats).map((index) => {return currentYear.byFormats[index].color}),
data: Object.keys(currentYear.byFormats).map((index) => {return currentYear.byFormats[index].count}),
},
],
},
options,
});
new Chart(ctxLastYearFormats, {
type: 'doughnut',
data: {
labels: Object.keys(lastYear.byFormats).map((index) => {return lastYear.byFormats[index].name}),
datasets: [
{
backgroundColor: Object.keys(lastYear.byFormats).map((index) => {return lastYear.byFormats[index].color}),
data: Object.keys(lastYear.byFormats).map((index) => {return lastYear.byFormats[index].count}),
},
],
},
options,
});
</script>