Added shelf of shame statistic. Cards will now align properly

static/javascript/statistics.js

@@ -43,9 +43,15 @@ async function create_games_over_time_chart(){
 }
 
 async function create_bar_chart(url, card_to_fill){
+
+  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.classList.add('card-img-top')
+
+  chart_canvas_container.appendChild(chart_canvas)
 
   let statistic_data = await makeRequest(url)
 
@@ -96,13 +102,13 @@ async function create_bar_chart(url, card_to_fill){
   card_footer.classList.add('text-muted')
   card_footer.innerHTML = statistic_data.name
   
-  card_to_fill.appendChild(chart_canvas)
+  card_to_fill.appendChild(chart_canvas_container)
   card_to_fill.appendChild(card_footer)
 
 }
 
-async function create_multiple_boardgame_chart(url, card_to_fill){
+async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribute = '', footer_preamble = ''){
-  function create_boardgame_image_grid_row(boardgames){
+  function create_boardgame_image_grid_row(boardgames, footer_data = []){
 
     const row_container = document.createElement('div')
     row_container.classList.add('container')
@@ -139,12 +145,14 @@ async function create_multiple_boardgame_chart(url, card_to_fill){
       boardgame_title.innerHTML = current_boardgame.name
       boardgame_title.classList.add('card-title')
 
-      const boardgame_price_holder = document.createElement('p')
-      boardgame_price_holder.innerHTML = current_boardgame.price_paid
-      boardgame_price_holder.classList.add('card-text')
-
       boardgame_card_body.appendChild(boardgame_title)
-      boardgame_card_body.appendChild(boardgame_price_holder)
+
+      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)
@@ -162,10 +170,26 @@ async function create_multiple_boardgame_chart(url, card_to_fill){
   statistic_data = await makeRequest(url)
 
   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')
 
-  const row = create_boardgame_image_grid_row(statistic_data.result)
+  const boardgames_to_grid = statistic_data.result
+
+  footer_data = []
+
+  if (footer_attribute != ''){
+    for (boardgame_index in boardgames_to_grid){
+      let footer_string = 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)
 
@@ -173,8 +197,11 @@ async function create_multiple_boardgame_chart(url, card_to_fill){
 
   const card_footer = document.createElement('div')
   card_footer.classList.add('card-footer')
-  card_footer.classList.add('text-muted')
+
-  card_footer.innerHTML = statistic_data.name
+  const card_footer_text = document.createElement('small')
+  card_footer_text.classList.add('text-muted')
+  card_footer_text.innerHTML = statistic_data.name
+  card_footer.appendChild(card_footer_text)
 
   card_to_fill.appendChild(card_footer)
 
@@ -210,9 +237,13 @@ async function loadStatistics(){
   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)
+  create_multiple_boardgame_chart(most_expensive_games_url, most_expensive_games_card, 'price_paid', '\u20AC ')
-
 
 
+  const shelf_of_shame_card_col = create_statistic_card_col()
+  const shelf_of_shame_card= shelf_of_shame_card_col.firstChild
+  statistic_row.appendChild(shelf_of_shame_card_col)
+  const shelf_of_shame_url = api_url + '/statistics/shelf_of_shame?top_amount=6'
+  create_multiple_boardgame_chart(shelf_of_shame_url, shelf_of_shame_card)
 
 }

templates/statistics.jinja

@@ -4,10 +4,12 @@
 {% block body_block %} 
 
         <div class="container"> 
-                <div id="statistic_row" class="row row-cols-1 row-cols-md-2">
+                <div id="statistic_row" class="row row-cols-1 row-cols-md-2 g-4 ">
                         <div class="col">
                                 <div class="card h-100">
-                                        <canvas class="chart_visual card-img-top" id="gamesovertimechart"></canvas>
+                                        <div class="card-img-top card-body">
+                                                <canvas class="chart_visual" id="gamesovertimechart"></canvas>
+                                        </div>
                                         <div id="overtimechartname" class="card-footer text-muted">
                                         </div>
                                 </div>