document.body.onload=loadStatistics()
document.getElementById('statistics_nav').classList.add('active')

async function loadStatistics(){
    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('gamesperyear')

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

}