122 lines
3.5 KiB
Text
122 lines
3.5 KiB
Text
<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 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>
|
|
<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>
|
|
</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');
|
|
|
|
const options = {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
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,
|
|
});
|
|
|
|
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(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,
|
|
});
|
|
</script>
|