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

- - - - - - - - - - <% for ( let i = 0 ; i < page.top10.length ; i += 1 ) { %> +
ArtisteAlbums
+ - - - + + + - <% } %> - -
<%= i+1 %><%= page.top10[i].name %><%= page.top10[i].count %>ArtisteAlbums
+ + + <% 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, + }); +