Chart functions now accept statistic data instead of url, so that statistic data can be manipulated before being processed

static/javascript/statistics.js

@@ -66,7 +66,15 @@ async function create_games_over_time_chart(){
   $("#overtimechartname").text(games_over_time_statistic.name)
 }
 
-async function create_bar_chart(url){
+async function create_bar_chart(statistic_data, name=''){
+
+  statistic_data = await statistic_data
+
+  if (name == ""){
+    statistic_name = statistic_data.name
+  }else{
+    statistic_name = name
+  }
 
   const card_to_fill = create_statistic_card()
 
@@ -79,8 +87,6 @@ async function create_bar_chart(url){
 
   chart_canvas_container.appendChild(chart_canvas)
   
-  let statistic_data = await makeRequest(url)
-
   const highest_bar_value = Math.max(...Object.values(statistic_data.result))
 
   let grid_offset = 0
@@ -126,7 +132,7 @@ async function create_bar_chart(url){
   const card_footer = document.createElement('div')
   card_footer.classList.add('card-header')
   card_footer.classList.add('text-muted')
-  card_footer.innerHTML = statistic_data.name
+  card_footer.innerHTML = statistic_name
   
   card_to_fill.appendChild(card_footer)
   card_to_fill.appendChild(chart_canvas_container)
@@ -134,7 +140,7 @@ async function create_bar_chart(url){
 
 }
 
-async function create_multiple_boardgame_chart(url, footer_attribute = '', footer_preamble = ''){
+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')
@@ -203,16 +209,22 @@ async function create_multiple_boardgame_chart(url, footer_attribute = '', foote
     return footer_attribute_to_value(obj[properties.shift()], properties.join('.'))
   }
 
-  const card_to_fill = create_statistic_card()
+  statistic_data = await statistic_data
 
-  const statistic_data = await makeRequest(url)
+  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_data.name
+  card_footer_text.innerHTML = statistic_name
   card_header.appendChild(card_footer_text)
 
   card_to_fill.appendChild(card_header)
@@ -247,16 +259,22 @@ async function create_multiple_boardgame_chart(url, footer_attribute = '', foote
 
 }
 
-async function create_basic_statistic_chart(url){
+async function create_basic_statistic_chart(statistic_data, name=''){
+
+  statistic_data = await statistic_data
+
+  if (name == ""){
+    statistic_name = statistic_data.name
+  }else{
+    statistic_name = name
+  }
 
   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_header.innerHTML = statistic_name
 
   card_to_fill.appendChild(card_header)
 
@@ -276,15 +294,33 @@ async function create_basic_statistic_chart(url){
 
 async function loadStatistics(){   
 
+  const names_to_show = ['Yarne', 'Lore', 'Lucas', 'Louize', 'Ruben']
+  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)){
+      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()
-  create_bar_chart(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
 
-  create_basic_statistic_chart(api_url+'/statistics/total_collection_cost')
+  const games_played_per_year_statistic_data_promise = makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
-  create_basic_statistic_chart(api_url+'/statistics/amount_of_games')
+  create_bar_chart(games_played_per_year_statistic_data_promise, 'Spellen gespeeld per jaar')
 
-  create_multiple_boardgame_chart(api_url + '/statistics/most_expensive_games?top_amount=6', 'owned_info.price_paid', '\u20AC ')
+  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')
 
-  create_multiple_boardgame_chart(api_url + '/statistics/shelf_of_shame')
+  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)
 
 }