#99 - Affichage des statistiques : rien ne va plus !

This commit is contained in:
Damien Broqua 2025-03-29 11:17:21 +01:00
parent b0dc6d820d
commit e321691daf
2 changed files with 54 additions and 36 deletions

View file

@ -1,5 +1,9 @@
@import '../node_modules/knacss/sass/knacss.scss';
table {
table-layout: unset;
}
// SPÉCIFIQUE AU SITE
@import './fonts';
@import './colors';

View file

@ -1,29 +1,30 @@
<main class="layout-maxed ma-collection-details" id="ma-collection-statistiques">
<!-- <main class="layout-maxed ma-collection-details" id="ma-collection-statistiques"> -->
<main class="layout-maxed collection" id="mon-compte">
<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">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mb-10">
<div class="md:col-span-2 lg:col-span-3 box">
<h2>Mon top 10</h2>
<table>
<thead>
<table>
<thead>
<tr>
<th></th>
<th>Artiste</th>
<th>Albums</th>
</tr>
</thead>
<tbody>
<% for ( let i = 0 ; i < page.top10.length ; i += 1 ) { %>
<tr>
<th style="width: 60px;"></th>
<th>Artiste</th>
<th style="width: 100px;">Albums</th>
<td><%= i+1 %></td>
<td><%= page.top10[i].name %></td>
<td><%= page.top10[i].count %></td>
</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>
<% } %>
</tbody>
</table>
</div>
<div class="box">
@ -41,26 +42,39 @@
<canvas id="byFormats"></canvas>
</div>
<div><!-- histoire de faire un break --></div>
<div class="box">
<div class="box col-span-full">
<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 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<div>
<h3>Genres</h3>
<canvas id="currentYearGenres"></canvas>
</div>
<div>
<h3>Styles</h3>
<canvas id="currentYearStyles"></canvas>
</div>
<div>
<h3>Formats</h3>
<canvas id="currentYearFormats"></canvas>
</div>
</div>
</div>
<div class="box">
<div class="box col-span-full">
<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 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<div>
<h3>Genres</h3>
<canvas id="lastYearGenres"></canvas>
</div>
<div>
<h3>Styles</h3>
<canvas id="lastYearStyles"></canvas>
</div>
<div>
<h3>Formats</h3>
<canvas id="lastYearFormats"></canvas>
</div>
</div>
</div>
</div>
</main>