diff --git a/sass/box.scss b/sass/box.scss
index 1ab13ad..5f3d322 100644
--- a/sass/box.scss
+++ b/sass/box.scss
@@ -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() {}
diff --git a/src/middleware/Albums.js b/src/middleware/Albums.js
index 3ac5565..ac19eac 100644
--- a/src/middleware/Albums.js
+++ b/src/middleware/Albums.js
@@ -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);
}
/**
diff --git a/views/pages/mon-compte/ma-collection/statistiques.ejs b/views/pages/mon-compte/ma-collection/statistiques.ejs
index cd2651d..605c1b7 100644
--- a/views/pages/mon-compte/ma-collection/statistiques.ejs
+++ b/views/pages/mon-compte/ma-collection/statistiques.ejs
@@ -3,42 +3,65 @@
Mes statistiques
-
+
Mon top 10
-
-
-
- |
- Artiste |
- Albums |
-
-
-
- <% for ( let i = 0 ; i < page.top10.length ; i += 1 ) { %>
+
+
- <%= i+1 %> |
- <%= page.top10[i].name %> |
- <%= page.top10[i].count %> |
+ |
+ Artiste |
+ Albums |
- <% } %>
-
-
+
+
+ <% for ( let i = 0 ; i < page.top10.length ; i += 1 ) { %>
+
+ <%= i+1 %> |
+ <%= page.top10[i].name %> |
+ <%= page.top10[i].count %> |
+
+ <% } %>
+
+
-
-
+
Genres
+
Styles
+
Formats
+
+
+
+
+
<%= page.currentYear.year %> (<%= page.currentYear.total %> ajout<%= page.currentYear.total > 1 ? 's' : '' %>)
+ Genres
+
+ Styles
+
+ Formats
+
+
+
+
+
<%= page.lastYear.year %> (<%= page.lastYear.total %> ajout<%= page.lastYear.total > 1 ? 's' : '' %>)
+ Genres
+
+ Styles
+
+ Formats
+
+
@@ -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,
+ });
+