boardgame_site_v2/static/javascript/statistics.js

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('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')
    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)


    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')

    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)

}