diff --git a/static/css/main.css b/static/css/main.css index e69de29..8d5ba1a 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -0,0 +1,5 @@ +.statistic_image_grid_image{ + width: 100px; + height: 100px; + object-fit: cover; +} \ No newline at end of file diff --git a/static/javascript/plays.js b/static/javascript/plays.js index bcd11dc..c76a1a4 100644 --- a/static/javascript/plays.js +++ b/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 diff --git a/static/javascript/statistics.js b/static/javascript/statistics.js index b14208a..bd70699 100644 --- a/static/javascript/statistics.js +++ b/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) } \ No newline at end of file diff --git a/templates/statistics.jinja b/templates/statistics.jinja index bf7012b..65f2c38 100644 --- a/templates/statistics.jinja +++ b/templates/statistics.jinja @@ -3,33 +3,27 @@ {% block body_block %} -