Created ability to size statistic cards

static/javascript/statistics.js

@@ -3,10 +3,15 @@ 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_number = null){
   function create_statistic_card_col(){
     const col = document.createElement('col')
-    col.classList.add('col')
+    if (col_number == null){
+      col.classList.add('col-6')
+    }else{
+      col.classList.add('col-' + col_number)
+    }
+    
 
     const card = document.createElement('div')
     card.classList.add('card')
@@ -33,13 +38,14 @@ async function create_games_over_time_chart(){
   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 card_to_fill = create_statistic_card(12)
   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)
 
@@ -158,7 +164,7 @@ async function create_multi_line_chart(statistic_data, name=''){
     statistic_name = name
   }
 
-  const card_to_fill = create_statistic_card()
+  const card_to_fill = create_statistic_card(12)
 
   const chart_canvas_container = document.createElement('div')
   chart_canvas_container.classList.add('card-body')
@@ -429,7 +435,7 @@ async function create_basic_statistic_chart(statistic_data, name=''){
     statistic_name = name
   }
 
-  const card_to_fill = create_statistic_card()
+  const card_to_fill = create_statistic_card(3)
 
   const card_header = document.createElement('div')
   card_header.classList.add('card-header')
@@ -465,15 +471,22 @@ async function loadStatistics(){
   //Seperate because of multiple data
   await create_games_over_time_chart()
 
+  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
+      }
+    }
+  
+  create_multi_line_chart(winrate_over_time_statistic_data, 'Winrate van spelers over tijd')
+
+
   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)){
@@ -485,18 +498,10 @@ async function loadStatistics(){
 
   create_bar_chart(winrate_statistic_data, 'Winrate van spelers')
 
+  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 winrate_over_time_statistic_data = await makeRequest(api_url + '/statistics/winrate_over_time?day_step=30')
+  const shelf_of_shame_statistic_data = await makeRequest(api_url + '/statistics/shelf_of_shame')
-  for (let player_name in winrate_over_time_statistic_data){
+  create_multiple_boardgame_chart(shelf_of_shame_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')
 
 }

templates/statistics.jinja

@@ -4,7 +4,7 @@
 {% block body_block %} 
 
         <div class="container"> 
-                <div id="statistic_row" class="row row-cols-1 row-cols-md-2 g-4 ">
+                <div id="statistic_row" class="row row-cols-auto g-4 ">
                 </div>
         </div>