From 061e72c4598ae188c48d9526bf656ddd9f45478b Mon Sep 17 00:00:00 2001 From: Damien Broqua Date: Fri, 2 Feb 2024 09:38:35 +0100 Subject: [PATCH] Updated statistics --- sass/index.scss | 1 + sass/table.scss | 23 +++++ src/middleware/Albums.js | 72 +++++++++----- .../mon-compte/ma-collection/statistiques.ejs | 94 +++++++++---------- 4 files changed, 118 insertions(+), 72 deletions(-) create mode 100644 sass/table.scss diff --git a/sass/index.scss b/sass/index.scss index 476e4b8..808151b 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -16,6 +16,7 @@ @import './list'; @import './box'; @import './loader'; +@import './table'; @import './error'; @import './messages.scss'; diff --git a/sass/table.scss b/sass/table.scss new file mode 100644 index 0000000..44565df --- /dev/null +++ b/sass/table.scss @@ -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); + } + } + + } +} \ No newline at end of file diff --git a/src/middleware/Albums.js b/src/middleware/Albums.js index c9be824..1fbfda1 100644 --- a/src/middleware/Albums.js +++ b/src/middleware/Albums.js @@ -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); } diff --git a/views/pages/mon-compte/ma-collection/statistiques.ejs b/views/pages/mon-compte/ma-collection/statistiques.ejs index 2a68b40..cd2651d 100644 --- a/views/pages/mon-compte/ma-collection/statistiques.ejs +++ b/views/pages/mon-compte/ma-collection/statistiques.ejs @@ -3,17 +3,15 @@ Mes statistiques - - -
-
+
+

Mon top 10

- + - + @@ -27,16 +25,17 @@
ArtisteAlbumsAlbums
-
-
+
+
+

Genres

-
+

Styles

-
+

Formats

@@ -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, });