michael/MusicTopus
1
0
Fork 0
forked from dbroqua/MusicTopus
Code Pull requests Activity

Added statistics page

Browse source
This commit is contained in:
Damien Broqua 2024-01-31 10:43:50 +01:00
parent 30bd3ebdf9
commit 8d22435b90
9 changed files with 290 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
views/index.ejs
View file

@ -16,6 +16,9 @@
<link href="/css/main.css" rel="stylesheet" />
<script src="/js/libs.js"></script>
<script defer src="/js/main.js"></script>
<% if ( config.matomoUrl ) { %>
<!-- Matomo -->
<script>
@ -90,6 +93,9 @@
<a class="navbar-item" href="/ma-collection/on-air">
On air
</a>
<a class="navbar-item" href="/ma-collection/statistiques">
Statistiques
</a>
<a class="navbar-item" href="/ma-collection/exporter">
Exporter ma collection
</a>
@ -187,8 +193,5 @@
Fait avec ❤️ à Bordeaux.
</p>
</footer>
<script defer src="/js/libs.js"></script>
<script defer src="/js/main.js"></script>
</body>
</html>

122
views/pages/mon-compte/ma-collection/statistiques.ejs Normal file
View file

@ -0,0 +1,122 @@
<main class="layout-maxed ma-collection-details" id="ma-collection-statistiques">
<h1>
Mes statistiques
</h1>
<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 class="grid gap-10 grid-cols-1 md:grid-cols-2">
<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>