Created more generic functions to re-use for charts
This commit is contained in:
Yarne Coppens
parent
8d415846e6
commit
7ab74205a1
2 changed files with 194 additions and 150 deletions
|
|
@ -1,126 +1,31 @@
|
|||
document.body.onload=loadStatistics()
|
||||
document.getElementById('statistics_nav').classList.add('active')
|
||||
|
||||
async function loadStatistics(){
|
||||
async function create_games_over_time_chart(){
|
||||
const gamesovertimechart = document.getElementById("gamesovertimechart")
|
||||
|
||||
function create_boardgame_image_grid_rows(boardgames){
|
||||
let rows_to_return = []
|
||||
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')
|
||||
|
||||
const row_container = document.createElement('div')
|
||||
row_container.classList.add('container')
|
||||
|
||||
const row = document.createElement('div')
|
||||
row.classList.add('row')
|
||||
row.classList.add('row-cols-1')
|
||||
row.classList.add('row-cols-md-3')
|
||||
|
||||
for (let boardgame_index in boardgames){
|
||||
let current_boardgame = boardgames[boardgame_index]
|
||||
|
||||
const column = document.createElement('div')
|
||||
column.classList.add('col')
|
||||
|
||||
const boardgame_card = document.createElement('div')
|
||||
boardgame_card.classList.add('card')
|
||||
boardgame_card.classList.add('h-100')
|
||||
|
||||
const boardgame_imaged_linked = document.createElement('a')
|
||||
boardgame_imaged_linked.setAttribute('href', '/boardgame?id=' + current_boardgame.id)
|
||||
|
||||
const boardgame_image = document.createElement('img')
|
||||
boardgame_image.src = current_boardgame.thumbnail_url
|
||||
boardgame_image.classList.add('card-img-top')
|
||||
boardgame_image.classList.add('boardgame_statistic_card_image')
|
||||
|
||||
boardgame_imaged_linked.appendChild(boardgame_image)
|
||||
|
||||
const boardgame_card_body = document.createElement('div')
|
||||
boardgame_card_body.classList.add('card-body')
|
||||
|
||||
const boardgame_title = document.createElement('h5')
|
||||
boardgame_title.innerHTML = current_boardgame.name
|
||||
boardgame_title.classList.add('card-title')
|
||||
|
||||
const boardgame_price_holder = document.createElement('p')
|
||||
boardgame_price_holder.innerHTML = current_boardgame.price_paid
|
||||
boardgame_price_holder.classList.add('card-text')
|
||||
|
||||
boardgame_card_body.appendChild(boardgame_title)
|
||||
boardgame_card_body.appendChild(boardgame_price_holder)
|
||||
|
||||
boardgame_card.append(boardgame_imaged_linked)
|
||||
boardgame_card.append(boardgame_card_body)
|
||||
|
||||
column.appendChild(boardgame_card)
|
||||
|
||||
row.appendChild(column)
|
||||
|
||||
}
|
||||
|
||||
return row
|
||||
|
||||
}
|
||||
|
||||
const gamesovertimechart = document.getElementById("gamesovertimechart")
|
||||
|
||||
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(gamesovertimechart, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: Object.keys(games_over_time_statistic.result),
|
||||
datasets: [{
|
||||
label: games_over_time_statistic.name,
|
||||
data: Object.values(games_over_time_statistic.result),
|
||||
borderWidth: 1,
|
||||
type: 'line'
|
||||
},
|
||||
{
|
||||
label: "Base games",
|
||||
data: Object.values(games_over_time_statistic_no_expanions.result),
|
||||
borderWidth: 1
|
||||
},
|
||||
{
|
||||
label: "Expansions",
|
||||
data: Object.values(games_over_time_statistic_only_expanions.result),
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#overtimechartname").text(games_over_time_statistic.name)
|
||||
|
||||
|
||||
const gamesperyearchart = document.getElementById('gamesperyearchart')
|
||||
|
||||
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],
|
||||
new Chart(gamesovertimechart, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: years_played ,
|
||||
labels: Object.keys(games_over_time_statistic.result),
|
||||
datasets: [{
|
||||
label: games_played_per_year_statistic.name,
|
||||
data: Object.values(games_played_per_year_statistic.result),
|
||||
label: games_over_time_statistic.name,
|
||||
data: Object.values(games_over_time_statistic.result),
|
||||
borderWidth: 1,
|
||||
type: 'line'
|
||||
},
|
||||
{
|
||||
label: "Base games",
|
||||
data: Object.values(games_over_time_statistic_no_expanions.result),
|
||||
borderWidth: 1
|
||||
},
|
||||
{
|
||||
label: "Expansions",
|
||||
data: Object.values(games_over_time_statistic_only_expanions.result),
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
|
|
@ -128,33 +33,186 @@ async function loadStatistics(){
|
|||
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'
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$("#gamesperyearchartname").text(games_played_per_year_statistic.name)
|
||||
|
||||
$("#overtimechartname").text(games_over_time_statistic.name)
|
||||
}
|
||||
|
||||
const mostexpensivegameschart = document.getElementById('mostexpensivegameschart')
|
||||
async function create_bar_chart(url, card_to_fill){
|
||||
const chart_canvas = document.createElement('canvas')
|
||||
chart_canvas.classList.add('chart_visual')
|
||||
chart_canvas.classList.add('card-img-top')
|
||||
|
||||
let most_expensive_games_statistic = await makeRequest(api_url + '/statistics/most_expensive_games?top_amount=6')
|
||||
let statistic_data = await makeRequest(url)
|
||||
|
||||
const row = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
|
||||
const highest_bar_value = Math.max(...Object.values(statistic_data.result))
|
||||
|
||||
let grid_offset = 0
|
||||
|
||||
if (highest_bar_value > 10000){
|
||||
grid_offset = 25000
|
||||
}else if(highest_bar_value > 1000){
|
||||
grid_offset = 2500
|
||||
}else if(highest_bar_value > 100){
|
||||
grid_offset = 250
|
||||
}else{
|
||||
grid_offset = 25
|
||||
}
|
||||
|
||||
new Chart(chart_canvas, {
|
||||
plugins: [ChartDataLabels],
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: Object.keys(statistic_data.result),
|
||||
datasets: [{
|
||||
label: statistic_data.name,
|
||||
data: Object.values(statistic_data.result),
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: Math.ceil((highest_bar_value) / grid_offset) * grid_offset
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
datalabels: {
|
||||
anchor: 'end',
|
||||
align: 'end'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const card_footer = document.createElement('div')
|
||||
card_footer.classList.add('card-footer')
|
||||
card_footer.classList.add('text-muted')
|
||||
card_footer.innerHTML = statistic_data.name
|
||||
|
||||
card_to_fill.appendChild(chart_canvas)
|
||||
card_to_fill.appendChild(card_footer)
|
||||
|
||||
}
|
||||
|
||||
async function create_multiple_boardgame_chart(url, card_to_fill){
|
||||
function create_boardgame_image_grid_row(boardgames){
|
||||
|
||||
const row_container = document.createElement('div')
|
||||
row_container.classList.add('container')
|
||||
|
||||
const row = document.createElement('div')
|
||||
row.classList.add('row')
|
||||
row.classList.add('row-cols-1')
|
||||
row.classList.add('row-cols-md-3')
|
||||
|
||||
for (let boardgame_index in boardgames){
|
||||
let current_boardgame = boardgames[boardgame_index]
|
||||
|
||||
const column = document.createElement('div')
|
||||
column.classList.add('col')
|
||||
|
||||
const boardgame_card = document.createElement('div')
|
||||
boardgame_card.classList.add('card')
|
||||
boardgame_card.classList.add('h-100')
|
||||
|
||||
const boardgame_imaged_linked = document.createElement('a')
|
||||
boardgame_imaged_linked.setAttribute('href', '/boardgame?id=' + current_boardgame.id)
|
||||
|
||||
const boardgame_image = document.createElement('img')
|
||||
boardgame_image.src = current_boardgame.thumbnail_url
|
||||
boardgame_image.classList.add('card-img-top')
|
||||
boardgame_image.classList.add('boardgame_statistic_card_image')
|
||||
|
||||
boardgame_imaged_linked.appendChild(boardgame_image)
|
||||
|
||||
const boardgame_card_body = document.createElement('div')
|
||||
boardgame_card_body.classList.add('card-body')
|
||||
|
||||
const boardgame_title = document.createElement('h5')
|
||||
boardgame_title.innerHTML = current_boardgame.name
|
||||
boardgame_title.classList.add('card-title')
|
||||
|
||||
const boardgame_price_holder = document.createElement('p')
|
||||
boardgame_price_holder.innerHTML = current_boardgame.price_paid
|
||||
boardgame_price_holder.classList.add('card-text')
|
||||
|
||||
boardgame_card_body.appendChild(boardgame_title)
|
||||
boardgame_card_body.appendChild(boardgame_price_holder)
|
||||
|
||||
boardgame_card.append(boardgame_imaged_linked)
|
||||
boardgame_card.append(boardgame_card_body)
|
||||
|
||||
column.appendChild(boardgame_card)
|
||||
|
||||
row.appendChild(column)
|
||||
|
||||
}
|
||||
|
||||
return row
|
||||
|
||||
}
|
||||
|
||||
statistic_data = await makeRequest(url)
|
||||
|
||||
const boardgame_image_container = document.createElement('div')
|
||||
boardgame_image_container.classList.add('chart_visual')
|
||||
boardgame_image_container.classList.add('container-fluid')
|
||||
|
||||
const row = create_boardgame_image_grid_row(statistic_data.result)
|
||||
|
||||
boardgame_image_container.appendChild(row)
|
||||
|
||||
card_to_fill.appendChild(boardgame_image_container)
|
||||
|
||||
const card_footer = document.createElement('div')
|
||||
card_footer.classList.add('card-footer')
|
||||
card_footer.classList.add('text-muted')
|
||||
card_footer.innerHTML = statistic_data.name
|
||||
|
||||
card_to_fill.appendChild(card_footer)
|
||||
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
async function loadStatistics(){
|
||||
|
||||
let statistic_row = document.getElementById('statistic_row')
|
||||
|
||||
create_games_over_time_chart()
|
||||
|
||||
|
||||
const games_played_per_year_card_col = create_statistic_card_col()
|
||||
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()
|
||||
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)
|
||||
|
||||
mostexpensivegameschart.appendChild(row)
|
||||
|
||||
// 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)
|
||||
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
{% block body_block %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-md-2">
|
||||
<div id="statistic_row" class="row row-cols-1 row-cols-md-2">
|
||||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<canvas class="chart_visual card-img-top" id="gamesovertimechart"></canvas>
|
||||
|
|
@ -12,20 +12,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<canvas class="chart_visual card-img-top" id="gamesperyearchart"></canvas>
|
||||
<div id="gamesperyearchartname" class="card-footer text-muted">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="chart_visual container-fluid" id="mostexpensivegameschart"></div>
|
||||
<div id="mostexpensivegameschartname" class="card-footer text-muted">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue