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

Added bar chart for games played per year

Browse source
This commit is contained in:
Yarne Coppens 2024-08-14 13:51:07 +02:00
parent fb5f5a5bc0
commit 938b6e98d2
4 changed files with 57 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/javascript/chart/chartjs-plugin-datalabels.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

51
static/javascript/statistics.js
View file

@ -2,13 +2,13 @@ document.body.onload=loadStatistics()
document.getElementById('statistics_nav').classList.add('active')
async function loadStatistics(){
const overtimechart = document.getElementById("overtimechart")
const gamesovertimechart = document.getElementById("gamesovertimechart")
games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
games_over_time_statistic_no_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&filter_expansions_out=true')
games_over_time_statistic_only_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&only_expansions=true')
let games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
let games_over_time_statistic_no_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&filter_expansions_out=true')
let games_over_time_statistic_only_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&only_expansions=true')
new Chart(overtimechart, {
new Chart(gamesovertimechart, {
type: 'bar',
data: {
labels: Object.keys(games_over_time_statistic.result),
@ -41,4 +41,45 @@ async function loadStatistics(){
$("#overtimechartname").text(games_over_time_statistic.name)
const gamesperyearchart = document.getElementById('gamesperyear')
let games_played_per_year_statistic = await makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
let years_played = []
for (date_index in Object.keys(games_played_per_year_statistic.result)){
const current_date = Object.keys(games_played_per_year_statistic.result)[date_index]
const year = current_date.substring(0, current_date.indexOf("-"));
years_played.push(year)
}
new Chart(gamesperyearchart, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: years_played ,
datasets: [{
label: games_played_per_year_statistic.name,
data: Object.values(games_played_per_year_statistic.result),
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true,
max: Math.ceil((Math.max(...Object.values(games_played_per_year_statistic.result)))/ 250) * 250
}
},
plugins: {
datalabels: {
anchor: 'end',
align: 'end'
}
}
}
});
}

3
templates/base.jinja
View file

@ -13,7 +13,8 @@
<script src="{{ url_for('static', filename='javascript/jquery/jquery-3.7.1.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='javascript/datatables/datatables.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='javascript/chart/chart.js') }}"></script>
<script src="{{ url_for('static', filename='javascript/chart/chart.js') }}" defer></script>
<script src="{{ url_for('static', filename='javascript/chart/chartjs-plugin-datalabels.min.js') }}" defer></script>
</head>

4
templates/statistics.jinja
View file

@ -6,7 +6,7 @@
<div class="row">
<div class="col">
<div class="card">
<canvas id="overtimechart"></canvas>
<canvas id="gamesovertimechart"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>
@ -14,7 +14,7 @@
</div>
<div class="col">
<div class="card">
<canvas id="overtimechart"></canvas>
<canvas id="gamesperyear"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>