Yarninator/boardgame_site_v2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added boardgame playercount vote chart

Browse source
This commit is contained in:
Yarne Coppens 2024-10-14 18:58:20 +02:00
parent 452eff32bf
commit 5c2fdd202f
2 changed files with 65 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
static/javascript/boardgame.js
View file

@ -17,4 +17,63 @@ async function loadGame() {
$('#boardgame_link').attr('href', 'https://boardgamegeek.com/boardgame/' + boardgame_id)
const playercount_votes_chart = $('#playercount_votes_chart')
const playercountVotes = requested_game.playercount_votes
const labels = playercountVotes.map(vote => vote.playercount);
const bestData = playercountVotes.map(vote => vote.best);
const recommendedData = playercountVotes.map(vote => vote.recommended);
const notRecommendedData = playercountVotes.map(vote => vote.not_recommended);
const data = {
labels: labels,
datasets: [
{
label: 'Not Recommended',
data: notRecommendedData,
backgroundColor: 'rgba(255, 99, 132, 0.6)',
},
{
label: 'Recommended',
data: recommendedData,
backgroundColor: 'rgba(75, 192, 192, 0.6)',
},
{
label: 'Best',
data: bestData,
backgroundColor: 'rgba(50, 205, 50, 0.6)',
},
],
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Player Count Votes'
}
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
}
}
},
};
console.log(labels)
new Chart(playercount_votes_chart, config);
}

7
templates/boardgame.jinja
View file

@ -3,7 +3,7 @@
{% block body_block %}
<div class="row">
<div class="col-sm-2">
<div class="col-sm-4">
<div class="card">
<img id="boardgame_image">
<div class="card-body">
@ -13,7 +13,10 @@
</div>
</div>
</div>
<div class="col-sm-10"><p id="boardgame_weight"></p></div>
<div class="col-sm-4"><p id="boardgame_weight"></p></div>
<div class="col-sm-4">
<canvas id="playercount_votes_chart"></canvas>
</div>
</div>
{% endblock body_block %}