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

Started work on board game grid statistic

Browse source
This commit is contained in:
Yarne Coppens 2024-08-14 15:05:40 +02:00
parent 938b6e98d2
commit 50710b33b4
4 changed files with 79 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
static/css/main.css
View file

@ -0,0 +1,5 @@
.statistic_image_grid_image{
width: 100px;
height: 100px;
object-fit: cover;
}

3
static/javascript/plays.js
View file

@ -51,6 +51,9 @@ async function loadPlays() {
const row_div = document.createElement('div')
row_div.className = 'row'
for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
if(((row_number * MAX_COLUMNS) + column_number) == all_plays.length){
break
}
const column_div = document.createElement('div')
column_div.className = "col-sm-" + column_width

58
static/javascript/statistics.js
View file

@ -2,6 +2,48 @@ document.body.onload=loadStatistics()
document.getElementById('statistics_nav').classList.add('active')
async function loadStatistics(){
function create_boardgame_image_grid_rows(boardgames){
console.log(boardgames)
const MAX_COLUMNS = 2
const column_width = 12 / MAX_COLUMNS
const rows_needed = Math.ceil(boardgames.length / MAX_COLUMNS)
let rows_to_return = []
for (let row_index = 0; row_index < rows_needed; row_index++){
const row = document.createElement('div')
row.className = 'row'
for (let column_index = 0; column_index < MAX_COLUMNS; column_index++){
if(((row_index * MAX_COLUMNS) + column_index) == boardgames.length){
break
}
const current_boardgame = boardgames[(row_index * MAX_COLUMNS) + column_index]
const column = document.createElement('div')
column.className = 'col'
const boardgame_image = document.createElement('img')
boardgame_image.src = current_boardgame.thumbnail_url
boardgame_image.classList.add('gallery__img')
boardgame_image.classList.add('statistic_image_grid_image')
boardgame_image.classList.add('card-img-top')
boardgame_image.classList.add('img-fluid')
column.appendChild(boardgame_image)
row.appendChild(column)
}
rows_to_return.push(row)
}
return rows_to_return
}
const gamesovertimechart = document.getElementById("gamesovertimechart")
let games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
@ -42,7 +84,7 @@ async function loadStatistics(){
$("#overtimechartname").text(games_over_time_statistic.name)
const gamesperyearchart = document.getElementById('gamesperyear')
const gamesperyearchart = document.getElementById('gamesperyearchart')
let games_played_per_year_statistic = await makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
@ -81,5 +123,19 @@ async function loadStatistics(){
}
}
});
$("#gamesperyearchartname").text(games_played_per_year_statistic.name)
const mostexpensivegameschart = document.getElementById('mostexpensivegameschart')
let most_expensive_games_statistic = await makeRequest(api_url + '/statistics/most_expensive_games')
const rows_to_fill_in = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
for (row_index in rows_to_fill_in){
mostexpensivegameschart.insertBefore(rows_to_fill_in[row_index], mostexpensivegameschart.firstChild)
}
$('#mostexpensivegameschartname').text(most_expensive_games_statistic.name)
}

34
templates/statistics.jinja
View file

@ -3,33 +3,27 @@
{% block body_block %}
<div class="row">
<div class="col">
<div class="card">
<canvas id="gamesovertimechart"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>
<div class="card-group" id="statistic_cards">
<div class="card">
<canvas class="chart_visual" id="gamesovertimechart"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>
</div>
<div class="col">
<div class="card">
<canvas id="gamesperyear"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>
<div class="card">
<canvas class="chart_visual" id="gamesperyearchart"></canvas>
<div class="card-body">
<h4 class="card-title" id="gamesperyearchartname"></h4>
</div>
</div>
<div class="col">
<div class="card">
<canvas id="overtimechart"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>
<div class="card">
<div class="chart_visual" id="mostexpensivegameschart"></div>
<div class="card-body">
<h4 class="card-title" id="mostexpensivegameschartname"></h4>
</div>
</div>
</div>
{% endblock body_block %}
{% block extra_js_files %}