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

Made statistic chart creation more efficient

Browse source
This commit is contained in:
Yarne Coppens 2024-08-22 22:38:48 +02:00
parent 050638ae43
commit 603a17b854
2 changed files with 63 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/css/main.css
View file

@ -1,5 +1,6 @@
body{ body{
padding-top: 100px; padding-top: 100px;
padding-bottom: 100px;
} }
@media screen and (max-width: 576px) { @media screen and (max-width: 576px) {

99
static/javascript/statistics.js
View file

@ -1,6 +1,30 @@
document.body.onload=loadStatistics() document.body.onload=loadStatistics()
document.getElementById('statistics_nav').classList.add('active') document.getElementById('statistics_nav').classList.add('active')
function create_statistic_card(){
function create_statistic_card_col(){
const col = document.createElement('col')
col.classList.add('col')
const card = document.createElement('div')
card.classList.add('card')
card.classList.add('h-100')
col.appendChild(card)
return col
}
let statistic_row = document.getElementById('statistic_row')
const statistic_card_col = create_statistic_card_col()
const statistic_card = statistic_card_col.firstChild
statistic_row.appendChild(statistic_card_col)
return statistic_card
}
async function create_games_over_time_chart(){ async function create_games_over_time_chart(){
const gamesovertimechart = document.getElementById("gamesovertimechart") const gamesovertimechart = document.getElementById("gamesovertimechart")
@ -42,7 +66,9 @@ async function create_games_over_time_chart(){
$("#overtimechartname").text(games_over_time_statistic.name) $("#overtimechartname").text(games_over_time_statistic.name)
} }
async function create_bar_chart(url, card_to_fill){ async function create_bar_chart(url){
const card_to_fill = create_statistic_card()
const chart_canvas_container = document.createElement('div') const chart_canvas_container = document.createElement('div')
chart_canvas_container.classList.add('card-body') chart_canvas_container.classList.add('card-body')
@ -108,7 +134,7 @@ async function create_bar_chart(url, card_to_fill){
} }
async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribute = '', footer_preamble = ''){ async function create_multiple_boardgame_chart(url, footer_attribute = '', footer_preamble = ''){
function create_boardgame_image_grid_row(boardgames, footer_data = []){ function create_boardgame_image_grid_row(boardgames, footer_data = []){
const row_container = document.createElement('div') const row_container = document.createElement('div')
@ -177,7 +203,9 @@ async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribu
return footer_attribute_to_value(obj[properties.shift()], properties.join('.')) return footer_attribute_to_value(obj[properties.shift()], properties.join('.'))
} }
statistic_data = await makeRequest(url) const card_to_fill = create_statistic_card()
const statistic_data = await makeRequest(url)
const card_header = document.createElement('div') const card_header = document.createElement('div')
card_header.classList.add('card-header') card_header.classList.add('card-header')
@ -219,47 +247,44 @@ async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribu
} }
async function create_basic_statistic_chard(url, card_to_fill){ async function create_basic_statistic_chart(url){
const card_to_fill = create_statistic_card()
const statistic_data = await makeRequest(url)
const card_header = document.createElement('div')
card_header.classList.add('card-header')
card_header.classList.add('text-muted')
card_header.innerHTML = statistic_data.name
card_to_fill.appendChild(card_header)
const card_body = document.createElement('div')
card_body.classList.add('card-body')
const card_title = document.createElement('h5')
card_title.classList.add('card-title')
card_title.innerHTML = statistic_data.result
card_body.appendChild(card_title)
card_to_fill.appendChild(card_header)
card_to_fill.appendChild(card_body)
} }
function create_statistic_card_col(){ async function loadStatistics(){
const col = document.createElement('col')
col.classList.add('col')
const card = document.createElement('div') //Seperate because of multiple data
card.classList.add('card')
card.classList.add('h-100')
col.appendChild(card)
return col
}
async function loadStatistics(){
let statistic_row = document.getElementById('statistic_row')
create_games_over_time_chart() create_games_over_time_chart()
create_bar_chart(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
create_basic_statistic_chart(api_url+'/statistics/total_collection_cost')
create_basic_statistic_chart(api_url+'/statistics/amount_of_games')
const games_played_per_year_card_col = create_statistic_card_col() create_multiple_boardgame_chart(api_url + '/statistics/most_expensive_games?top_amount=6', 'owned_info.price_paid', '\u20AC ')
const games_played_per_year_card = games_played_per_year_card_col.firstChild
statistic_row.appendChild(games_played_per_year_card_col)
const games_played_per_year_url = api_url + '/statistics/games_played_per_year?filter_expansions_out=true'
create_bar_chart(games_played_per_year_url, games_played_per_year_card)
const most_expensive_games_card_col = create_statistic_card_col() create_multiple_boardgame_chart(api_url + '/statistics/shelf_of_shame')
const most_expensive_games_card = most_expensive_games_card_col.firstChild
statistic_row.appendChild(most_expensive_games_card_col)
const most_expensive_games_url = api_url + '/statistics/most_expensive_games?top_amount=6'
create_multiple_boardgame_chart(most_expensive_games_url, most_expensive_games_card, 'owned_info.price_paid', '\u20AC ')
const shelf_of_shame_card_col = create_statistic_card_col()
const shelf_of_shame_card= shelf_of_shame_card_col.firstChild
statistic_row.appendChild(shelf_of_shame_card_col)
const shelf_of_shame_url = api_url + '/statistics/shelf_of_shame'
create_multiple_boardgame_chart(shelf_of_shame_url, shelf_of_shame_card)
} }