502 lines
No EOL
14 KiB
JavaScript
502 lines
No EOL
14 KiB
JavaScript
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')
|
|
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(){
|
|
|
|
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 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),
|
|
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
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
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){
|
|
|
|
for (date in statistic_data[key].result){
|
|
if (statistic_data[key].result[date] == 0){
|
|
statistic_data[key].result[date] = null
|
|
}
|
|
}
|
|
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=''){
|
|
|
|
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{
|
|
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-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_multiple_boardgame_chart(statistic_data, name = '', footer_attribute = '', footer_preamble = ''){
|
|
function create_boardgame_image_grid_row(boardgames, footer_data = []){
|
|
|
|
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')
|
|
row.classList.add('g-4')
|
|
|
|
|
|
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('h6')
|
|
boardgame_title.innerHTML = current_boardgame.name
|
|
boardgame_title.classList.add('card-title')
|
|
|
|
boardgame_card_body.appendChild(boardgame_title)
|
|
|
|
if (footer_data.length > 0){
|
|
const boardgame_footer = document.createElement('p')
|
|
boardgame_footer.innerHTML = footer_data[boardgame_index]
|
|
boardgame_footer.classList.add('card-text')
|
|
boardgame_card_body.appendChild(boardgame_footer)
|
|
}
|
|
|
|
boardgame_card.append(boardgame_imaged_linked)
|
|
boardgame_card.append(boardgame_card_body)
|
|
|
|
column.appendChild(boardgame_card)
|
|
|
|
row.appendChild(column)
|
|
|
|
}
|
|
|
|
return row
|
|
|
|
}
|
|
|
|
function footer_attribute_to_value(obj, footer_attribute){
|
|
if (!footer_attribute) return obj;
|
|
const properties = footer_attribute.split('.');
|
|
return footer_attribute_to_value(obj[properties.shift()], properties.join('.'))
|
|
}
|
|
|
|
if (name == ""){
|
|
statistic_name = statistic_data.name
|
|
}else{
|
|
statistic_name = name
|
|
}
|
|
|
|
const card_to_fill = create_statistic_card()
|
|
|
|
const card_header = document.createElement('div')
|
|
card_header.classList.add('card-header')
|
|
|
|
const card_footer_text = document.createElement('div')
|
|
card_footer_text.classList.add('text-muted')
|
|
card_footer_text.innerHTML = statistic_name
|
|
card_header.appendChild(card_footer_text)
|
|
|
|
card_to_fill.appendChild(card_header)
|
|
|
|
const boardgame_image_container = document.createElement('div')
|
|
boardgame_image_container.classList.add('card-body')
|
|
boardgame_image_container.classList.add('chart_visual')
|
|
boardgame_image_container.classList.add('container-fluid')
|
|
boardgame_image_container.classList.add('overflow-auto')
|
|
|
|
const boardgames_to_grid = statistic_data.result
|
|
|
|
footer_data = []
|
|
|
|
if (footer_attribute != ''){
|
|
for (boardgame_index in boardgames_to_grid){
|
|
let footer_string = footer_attribute_to_value(boardgames_to_grid[boardgame_index], footer_attribute)
|
|
if (footer_preamble != ''){
|
|
footer_string = footer_preamble + footer_string
|
|
}
|
|
footer_data.push(footer_string)
|
|
|
|
}
|
|
}
|
|
|
|
const row = create_boardgame_image_grid_row(boardgames_to_grid, footer_data)
|
|
|
|
boardgame_image_container.appendChild(row)
|
|
|
|
card_to_fill.appendChild(boardgame_image_container)
|
|
|
|
|
|
}
|
|
|
|
async function create_basic_statistic_chart(statistic_data, name=''){
|
|
|
|
if (name == ""){
|
|
statistic_name = statistic_data.name
|
|
}else{
|
|
statistic_name = name
|
|
}
|
|
|
|
const card_to_fill = create_statistic_card()
|
|
|
|
const card_header = document.createElement('div')
|
|
card_header.classList.add('card-header')
|
|
card_header.classList.add('text-muted')
|
|
card_header.innerHTML = statistic_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)
|
|
|
|
}
|
|
|
|
async function loadStatistics(){
|
|
|
|
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 (!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')
|
|
|
|
|
|
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, 'Winrate van spelers over tijd')
|
|
|
|
} |