diff --git a/static/javascript/statistics.js b/static/javascript/statistics.js index 811252a..f9fa3d7 100644 --- a/static/javascript/statistics.js +++ b/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){ - function create_boardgame_image_grid_row(boardgames){ +async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribute = '', footer_preamble = ''){ + 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) } \ No newline at end of file diff --git a/templates/statistics.jinja b/templates/statistics.jinja index 0378328..f8a3845 100644 --- a/templates/statistics.jinja +++ b/templates/statistics.jinja @@ -4,10 +4,12 @@ {% block body_block %}