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

Created ability to create a multi_line chart

Browse source
This commit is contained in:
Yarne Coppens 2024-08-25 10:50:24 +02:00
parent 1d5b6a04bd
commit 08990e61dc
2 changed files with 197 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

224
static/javascript/statistics.js
View file

@ -1,6 +1,8 @@
document.body.onload=loadStatistics()
document.getElementById('statistics_nav').classList.add('active')
const important_player_name_colors = {'Yarne':'black', 'Lore':'green', 'Lucas':'red','Louize':'blue','Ruben':'purple'}
function create_statistic_card(){
function create_statistic_card_col(){
const col = document.createElement('col')
@ -26,13 +28,24 @@ function create_statistic_card(){
}
async function create_games_over_time_chart(){
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, {
const card_to_fill = create_statistic_card()
const chart_canvas_container = document.createElement('div')
chart_canvas_container.classList.add('card-body')
chart_canvas_container.classList.add('card-img-top')
const chart_canvas = document.createElement('canvas')
chart_canvas.classList.add('chart_visual')
chart_canvas_container.appendChild(chart_canvas)
new Chart(chart_canvas, {
type: 'bar',
data: {
labels: Object.keys(games_over_time_statistic.result),
@ -63,13 +76,158 @@ async function create_games_over_time_chart(){
}
});
$("#overtimechartname").text(games_over_time_statistic.name)
const card_footer = document.createElement('div')
card_footer.classList.add('card-header')
card_footer.classList.add('text-muted')
card_footer.innerHTML = games_over_time_statistic.name
card_to_fill.appendChild(card_footer)
card_to_fill.appendChild(chart_canvas_container)
}
async function create_line_chart(statistic_data, name=''){
if (name == ""){
statistic_name = statistic_data.name
}else{
statistic_name = name
}
const card_to_fill = create_statistic_card()
const chart_canvas_container = document.createElement('div')
chart_canvas_container.classList.add('card-body')
chart_canvas_container.classList.add('card-img-top')
const chart_canvas = document.createElement('canvas')
chart_canvas.classList.add('chart_visual')
chart_canvas_container.appendChild(chart_canvas)
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 if(highest_bar_value > 10){
grid_offset = 25
}else if(highest_bar_value > 2){
grid_offset = 2.5
}else{
grid_offset = 1.25
}
new Chart(chart_canvas, {
type: 'line',
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
}
}
}
});
const card_footer = document.createElement('div')
card_footer.classList.add('card-header')
card_footer.classList.add('text-muted')
card_footer.innerHTML = statistic_name
card_to_fill.appendChild(card_footer)
card_to_fill.appendChild(chart_canvas_container)
}
async function create_multi_line_chart(statistic_data, name=''){
if (name == ""){
statistic_name = statistic_data.name
}else{
statistic_name = name
}
const card_to_fill = create_statistic_card()
const chart_canvas_container = document.createElement('div')
chart_canvas_container.classList.add('card-body')
chart_canvas_container.classList.add('card-img-top')
const chart_canvas = document.createElement('canvas')
chart_canvas.classList.add('chart_visual')
chart_canvas_container.appendChild(chart_canvas)
let own_datasets = []
let all_results = []
let all_dates = []
for (key in statistic_data){
if (!Object.keys(important_player_name_colors).includes(key)){
dataset = {
label: key,
data: Object.values(statistic_data[key].result)
}
}else{
dataset = {
label: key,
data: Object.values(statistic_data[key].result),
borderColor: important_player_name_colors[key]
}
}
own_datasets.push(dataset)
for (result_value in Object.values(statistic_data[key].result)){
all_results.push(result_value)
}
for (date in statistic_data[key].result){
if (!all_dates.includes(date)){
all_dates.push(date)
}
}
}
new Chart(chart_canvas, {
type: 'line',
data: {
labels: all_dates,
datasets: own_datasets
},
options: {
scales: {
y: {
beginAtZero: true,
offset: true
},
x: {
offset: true
}
}
}
});
const card_footer = document.createElement('div')
card_footer.classList.add('card-header')
card_footer.classList.add('text-muted')
card_footer.innerHTML = statistic_name
card_to_fill.appendChild(card_footer)
card_to_fill.appendChild(chart_canvas_container)
}
async function create_bar_chart(statistic_data, name=''){
statistic_data = await statistic_data
if (name == ""){
statistic_name = statistic_data.name
}else{
@ -209,8 +367,6 @@ async function create_multiple_boardgame_chart(statistic_data, name = '', footer
return footer_attribute_to_value(obj[properties.shift()], properties.join('.'))
}
statistic_data = await statistic_data
if (name == ""){
statistic_name = statistic_data.name
}else{
@ -261,8 +417,6 @@ async function create_multiple_boardgame_chart(statistic_data, name = '', footer
async function create_basic_statistic_chart(statistic_data, name=''){
statistic_data = await statistic_data
if (name == ""){
statistic_name = statistic_data.name
}else{
@ -294,33 +448,49 @@ async function create_basic_statistic_chart(statistic_data, name=''){
async function loadStatistics(){
const names_to_show = ['Yarne', 'Lore', 'Lucas', 'Louize', 'Ruben']
const amount_of_games_statistic_data = await makeRequest(api_url+'/statistics/amount_of_games')
create_basic_statistic_chart(amount_of_games_statistic_data, 'Spellen in bezit')
const total_collection_cost_statistic_data = await makeRequest(api_url+'/statistics/total_collection_cost')
create_basic_statistic_chart(total_collection_cost_statistic_data, 'Totale kost van spellen in bezit')
//Seperate because of multiple data
await create_games_over_time_chart()
const games_played_per_year_statistic_data = await makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
create_bar_chart(games_played_per_year_statistic_data, 'Spellen gespeeld per jaar')
const most_expensive_games_statistic_data = await makeRequest(api_url+'/statistics/most_expensive_games?top_amount=6')
create_multiple_boardgame_chart(most_expensive_games_statistic_data, 'Duurste spellen', 'owned_info.price_paid', '\u20AC ')
const shelf_of_shame_statistic_data = await makeRequest(api_url + '/statistics/shelf_of_shame')
create_multiple_boardgame_chart(shelf_of_shame_statistic_data)
const winrate_statistic_data = await makeRequest(api_url + '/statistics/winrate')
for (let player_name in winrate_statistic_data.result){
if (!names_to_show.includes(player_name)){
if (!Object.keys(important_player_name_colors).includes(player_name)){
delete winrate_statistic_data.result[player_name]
}else{
winrate_statistic_data.result[player_name] *= 100
}
}
create_bar_chart(winrate_statistic_data, 'Winrate van spelers')
//Seperate because of multiple data
create_games_over_time_chart()
const games_played_per_year_statistic_data_promise = makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
create_bar_chart(games_played_per_year_statistic_data_promise, 'Spellen gespeeld per jaar')
const total_collection_cost_statistic_data_promise = makeRequest(api_url+'/statistics/total_collection_cost')
create_basic_statistic_chart(total_collection_cost_statistic_data_promise, 'Totale kost van spellen in bezit')
const amount_of_games_statistic_data_promise = makeRequest(api_url+'/statistics/amount_of_games')
create_basic_statistic_chart(amount_of_games_statistic_data_promise, 'Spellen in bezit')
const most_expensive_games_statistic_data_promise = makeRequest(api_url+'/statistics/most_expensive_games?top_amount=6')
create_multiple_boardgame_chart(most_expensive_games_statistic_data_promise, 'Duurste spellen', 'owned_info.price_paid', '\u20AC ')
const shelf_of_shame_statistic_data_promise = makeRequest(api_url + '/statistics/shelf_of_shame')
create_multiple_boardgame_chart(shelf_of_shame_statistic_data_promise)
const winrate_over_time_statistic_data = await makeRequest(api_url + '/statistics/winrate_over_time?day_step=30')
for (let player_name in winrate_over_time_statistic_data){
if (!Object.keys(important_player_name_colors).includes(player_name)){
delete winrate_over_time_statistic_data[player_name]
}else{
for (date_key in winrate_over_time_statistic_data[player_name].result)
winrate_over_time_statistic_data[player_name].result[date_key] *= 100
}
}
console.log(winrate_over_time_statistic_data)
create_multi_line_chart(winrate_over_time_statistic_data)
}

10
templates/statistics.jinja
View file

@ -5,16 +5,6 @@
<div class="container">
<div id="statistic_row" class="row row-cols-1 row-cols-md-2 g-4 ">
<div class="col">
<div class="card h-100">
<div id="overtimechartname" class="card-header text-muted">
</div>
<div class="card-img-top card-body">
<canvas class="chart_visual" id="gamesovertimechart"></canvas>
</div>
</div>
</div>
</div>
</div>