Updated statistics

sass/index.scss

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

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);
+            }
+        }
+
+    }
+}

src/middleware/Albums.js

@@ -165,24 +165,17 @@ Publié automatiquement via #musictopus`;
     constructor(req, viewname) {
         super(req, viewname);
 
-        this.colors = {
+        this.colors = [
-            nord0: "#2e3440",
+            "#2e3440",
-            nord1: "#3b4252",
+            "#d8dee9",
-            nord2: "#434c5e",
+            "#8fbcbb",
-            nord3: "#4C566A",
+            "#5e81ac",
-            nord4: "#d8dee9",
+            "#d08770",
-            nord5: "#e5e9f0",
+            "#bf616a",
-            nord6: "#eceff4",
+            "#ebcb8b",
-            nord7: "#8fbcbb",
+            "#a3be8c",
-            nord8: "#88c0d0",
+            "#b48ead",
-            nord9: "#81a1c1",
+        ];
-            nord10: "#5e81ac",
-            nord11: "#d08770",
-            nord12: "#bf616a",
-            nord13: "#ebcb8b",
-            nord14: "#a3be8c",
-            nord15: "#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);
     }
 

views/pages/mon-compte/ma-collection/statistiques.ejs

@@ -3,17 +3,15 @@
         Mes statistiques
     </h1>
 
-
+    <div class="grid gap-10 grid-cols-1 md:grid-cols-2 mb-10">
-
+        <div class="md:col-span-2 box">
-    <div class="grid gap-10 grid-cols-1 md:grid-cols-2">
-        <div>
             <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: {
+        options,
-            responsive: true,
-            plugins: {
-                legend: {
-                    position: 'bottom',
-                },
-                title: {
-                    display: false,
-                }
-            }
-        },
     });
 
+    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}),
+                    backgroundColor: styleBg,
-                    data: Object.keys(byStyles).map((index) => {return byStyles[index].count}),
+                    data: styleData,
                 },
             ],
         },
-        options: {
+        options,
-            responsive: true,
-            plugins: {
-                legend: {
-                    position: 'bottom',
-                },
-                title: {
-                    display: false,
-                }
-            }
-        },
     });
 
     new Chart(ctxFormats, {
-        type: 'pie',
+        type: 'doughnut',
         data: {
             labels: Object.keys(byFormats).map((index) => {return byFormats[index].name}),
             datasets: [
@@ -111,16 +117,6 @@
                 },
             ],
         },
-        options: {
+        options,
-            responsive: true,
-            plugins: {
-                legend: {
-                    position: 'bottom',
-                },
-                title: {
-                    display: false,
-                }
-            }
-        },
     });
 </script>