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 gap-10 grid-cols-1 md:grid-cols-2">
        <div>
            <h2>Mon top 10</h2>
            <table>
                <thead>
                    <tr>
                        <th style="width: 40px;"></th>
                        <th>Artiste</th>
                        <th style="width: 80px;">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></div>
        <div>
            <h2>Genres</h2>
            <canvas id="byGenres"></canvas>
        </div>
        <div>
            <h2>Styles</h2>
            <canvas id="byStyles"></canvas>
        </div>
        <div>
            <h2>Formats</h2>
            <canvas id="byFormats"></canvas>
        </div>
    </div>
</main>

<script>
    const byGenres = <%- JSON.stringify(page.byGenres) %>;
    const byStyles = <%- JSON.stringify(page.byStyles) %>;
    const byFormats = <%- JSON.stringify(page.byFormats) %>;

    const ctxGenres= document.getElementById('byGenres');
    const ctxStyles = document.getElementById('byStyles');
    const ctxFormats = document.getElementById('byFormats');

    new Chart(ctxGenres, {
        type: 'pie',
        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: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: false,
                }
            }
        },
    });

    new Chart(ctxStyles, {
        type: 'pie',
        data: {
            labels: Object.keys(byStyles).map((index) => {return byStyles[index].name}),
            datasets: [
                {
                    backgroundColor: Object.keys(byStyles).map((index) => {return byStyles[index].color}),
                    data: Object.keys(byStyles).map((index) => {return byStyles[index].count}),
                },
            ],
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: false,
                }
            }
        },
    });

    new Chart(ctxFormats, {
        type: 'pie',
        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: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                title: {
                    display: false,
                }
            }
        },
    });
</script>