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

<main class="layout-maxed ma-collection-details" id="ma-collection-statistiques">
    <h1>
        Mes statistiques
    </h1>

    <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>
                    <thead>
                        <tr>
                            <th style="width: 60px;"></th>
                            <th>Artiste</th>
                            <th style="width: 100px;">Albums</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% for ( let i = 0 ; i < page.top10.length ; i += 1 ) { %>
                            <tr>
                                <td><%= i+1 %></td>
                                <td><%= page.top10[i].name %></td>
                                <td><%= page.top10[i].count %></td>
                            </tr>
                        <% } %>
                    </tbody>
                </table>
        </div>

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

<script>
    const byGenres = <%- JSON.stringify(page.byGenres) %>;
    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: {
                display: false,
            }
        }
    };

    new Chart(ctxGenres, {
        type: 'doughnut',
        data: {
            labels: Object.keys(byGenres).map((index) => {return byGenres[index].name}),
            datasets: [
                {
                    backgroundColor: Object.keys(byGenres).map((index) => {return byGenres[index].color}),
                    data: Object.keys(byGenres).map((index) => {return byGenres[index].count}),
                },
            ],
        },
        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 = [];
    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: 'doughnut',
        data: {
            labels: styleLabels,
            datasets: [
                {
                    backgroundColor: styleBg,
                    data: styleData,
                },
            ],
        },
        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',
        data: {
            labels: Object.keys(byFormats).map((index) => {return byFormats[index].name}),
            datasets: [
                {
                    backgroundColor: Object.keys(byFormats).map((index) => {return byFormats[index].color}),
                    data: Object.keys(byFormats).map((index) => {return byFormats[index].count}),
                },
            ],
        },
        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>