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){
      let rows_to_return = []

      const row_container = document.createElement('div')
      row_container.classList.add('container')
      
      const row = document.createElement('div')
      row.classList.add('row')
      row.classList.add('row-cols-1')
      row.classList.add('row-cols-md-3')

      for (let boardgame_index in boardgames){
        let current_boardgame = boardgames[boardgame_index]

        const column = document.createElement('div')
        column.classList.add('col')

        const boardgame_card = document.createElement('div')
        boardgame_card.classList.add('card')
        boardgame_card.classList.add('h-100')

        const boardgame_link = document.createElement('a')
        boardgame_link.setAttribute('href', '/boardgame?id=' + current_boardgame.id)

        const boardgame_image = document.createElement('img')
        boardgame_image.src = current_boardgame.thumbnail_url
        boardgame_image.classList.add('card-img-top')
        boardgame_image.classList.add('boardgame_statistic_card_image')

        boardgame_link.appendChild(boardgame_image)

        const boardgame_card_body = document.createElement('div')
        boardgame_card_body.classList.add('card-body')

        const boardgame_title = document.createElement('h5')
        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)

        boardgame_card.append(boardgame_link)
        boardgame_card.append(boardgame_card_body)

        column.appendChild(boardgame_card)

        row.appendChild(column)

      }

      return row

    }

    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?top_amount=6')

    const row = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)

    mostexpensivegameschart.appendChild(row)

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

}