Started work on board game grid statistic

static/css/main.css

@@ -0,0 +1,5 @@
+.statistic_image_grid_image{
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+}

static/javascript/plays.js

@@ -51,6 +51,9 @@ async function loadPlays() {
         const row_div = document.createElement('div')
         row_div.className = 'row'
         for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
+            if(((row_number * MAX_COLUMNS) + column_number) == all_plays.length){
+                break
+              }
             const column_div = document.createElement('div')
             column_div.className = "col-sm-" + column_width
             

static/javascript/statistics.js

@@ -2,6 +2,48 @@ document.body.onload=loadStatistics()
 document.getElementById('statistics_nav').classList.add('active')
 
 async function loadStatistics(){
+
+    function create_boardgame_image_grid_rows(boardgames){
+
+      console.log(boardgames)
+
+      const MAX_COLUMNS = 2
+      const column_width = 12 / MAX_COLUMNS
+
+      const rows_needed = Math.ceil(boardgames.length / MAX_COLUMNS)
+
+      let rows_to_return = []
+
+      for (let row_index = 0; row_index < rows_needed; row_index++){
+        const row = document.createElement('div')
+        row.className = 'row'
+
+        for (let column_index = 0; column_index < MAX_COLUMNS; column_index++){
+          if(((row_index * MAX_COLUMNS) + column_index) == boardgames.length){
+            break
+          }
+          const current_boardgame = boardgames[(row_index * MAX_COLUMNS) + column_index]
+
+          const column = document.createElement('div')
+          column.className = 'col'
+
+          const boardgame_image = document.createElement('img')
+          boardgame_image.src = current_boardgame.thumbnail_url
+          boardgame_image.classList.add('gallery__img')
+          boardgame_image.classList.add('statistic_image_grid_image')
+          boardgame_image.classList.add('card-img-top')
+          boardgame_image.classList.add('img-fluid')
+
+          column.appendChild(boardgame_image)
+          row.appendChild(column)
+        }
+        rows_to_return.push(row)   
+      }
+
+      return rows_to_return
+
+    }
+
     const gamesovertimechart = document.getElementById("gamesovertimechart")
     
     let games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
@@ -42,7 +84,7 @@ async function loadStatistics(){
     $("#overtimechartname").text(games_over_time_statistic.name)
 
 
-    const gamesperyearchart = document.getElementById('gamesperyear')
+    const gamesperyearchart = document.getElementById('gamesperyearchart')
 
     let games_played_per_year_statistic = await makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
     
@@ -81,5 +123,19 @@ async function loadStatistics(){
         }
       }
     });
+    $("#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')
+
+    const rows_to_fill_in = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
+
+    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

@@ -3,33 +3,27 @@
 
 {% block body_block %} 
 
-        <div class="row">
+        <div class="card-group" id="statistic_cards">
-                <div class="col">
+                <div class="card">
-                        <div class="card">
+                        <canvas class="chart_visual" id="gamesovertimechart"></canvas>
-                                <canvas id="gamesovertimechart"></canvas>
+                        <div class="card-body">
-                                <div class="card-body">
+                                <h4 class="card-title" id="overtimechartname"></h4>
-                                        <h4 class="card-title" id="overtimechartname"></h4>
-                                </div>
                         </div>
                 </div>
-                <div class="col">
+                <div class="card">                                
-                        <div class="card">                                
+                        <canvas class="chart_visual" id="gamesperyearchart"></canvas>
-                                <canvas id="gamesperyear"></canvas>
+                        <div class="card-body">
-                                <div class="card-body">
+                                <h4 class="card-title" id="gamesperyearchartname"></h4>
-                                        <h4 class="card-title" id="overtimechartname"></h4>
-                                </div>
                         </div>
                 </div>
-                <div class="col">
+                <div class="card">
-                        <div class="card">
+                        <div class="chart_visual" id="mostexpensivegameschart"></div>
-                                <canvas id="overtimechart"></canvas>
+                        <div class="card-body">
-                                <div class="card-body">
+                                <h4 class="card-title" id="mostexpensivegameschartname"></h4>
-                                        <h4 class="card-title" id="overtimechartname"></h4>
-                                </div>
                         </div>
                 </div>
         </div>
-
+        
 {% endblock body_block %}
 
 {% block extra_js_files %}