Added current year and last year in statistics page

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() {}

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);
     }
 
     /**

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

@@ -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>