Created more generic functions to re-use for charts

static/javascript/statistics.js

@@ -1,10 +1,108 @@
 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 games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
-      let rows_to_return = []
+  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)
+}
+
+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 statistic_data = await makeRequest(url)
+
+  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')
@@ -61,100 +159,60 @@ async function loadStatistics(){
 
   }
 
-    const gamesovertimechart = document.getElementById("gamesovertimechart")
+  statistic_data = await makeRequest(url)
 
-    let games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
+  const boardgame_image_container = document.createElement('div')
-    let games_over_time_statistic_no_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&filter_expansions_out=true')
+  boardgame_image_container.classList.add('chart_visual')
-    let games_over_time_statistic_only_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&only_expansions=true')
+  boardgame_image_container.classList.add('container-fluid')
 
-    new Chart(gamesovertimechart, {
+  const row = create_boardgame_image_grid_row(statistic_data.result)
-        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)
+  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)
 
 
-    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],
-      type: 'bar',
-      data: {
-        labels: years_played    ,
-        datasets: [{
-          label: games_played_per_year_statistic.name,
-          data: Object.values(games_played_per_year_statistic.result),
-          borderWidth: 1  
-        }
-      ]
-      },
-      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'
-          }
-        }
-      }
-    });
-    $("#gamesperyearchartname").text(games_played_per_year_statistic.name)
-
-
-    const mostexpensivegameschart = document.getElementById('mostexpensivegameschart')
-
-    let most_expensive_games_statistic = await makeRequest(api_url + '/statistics/most_expensive_games?top_amount=6')
-
-    const row = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
-
-    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)
 
 }

templates/statistics.jinja

@@ -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>