boardgame_site_v2/static/javascript/statistics.js

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

function create_statistic_card(){
  function create_statistic_card_col(){
    const col = document.createElement('col')
    col.classList.add('col')

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

    col.appendChild(card)

    return col
  }

  let statistic_row = document.getElementById('statistic_row')

  const statistic_card_col = create_statistic_card_col()
  const statistic_card = statistic_card_col.firstChild
  statistic_row.appendChild(statistic_card_col)

  return statistic_card

}

async function create_games_over_time_chart(){
  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)
}

async function create_bar_chart(url){

  const card_to_fill = create_statistic_card()

  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_container.appendChild(chart_canvas)

  let statistic_data = await makeRequest(url)

  const highest_bar_value = Math.max(...Object.values(statistic_data.result))

  let grid_offset = 0

  if (highest_bar_value > 10000){
    grid_offset = 25000
  }else if(highest_bar_value > 1000){
    grid_offset = 2500
  }else if(highest_bar_value > 100){
    grid_offset = 250
  }else{
    grid_offset = 25
  }
    
  new Chart(chart_canvas, {
    plugins: [ChartDataLabels],
    type: 'bar',
    data: {
      labels: Object.keys(statistic_data.result),
      datasets: [{
        label: statistic_data.name,
        data: Object.values(statistic_data.result),
        borderWidth: 1  
      }
    ]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          max: Math.ceil((highest_bar_value) / grid_offset) * grid_offset
        }
      },
      plugins: {
        datalabels: {
            anchor: 'end',
          align: 'end'
        }
      }
    }
  });

  const card_footer = document.createElement('div')
  card_footer.classList.add('card-header')
  card_footer.classList.add('text-muted')
  card_footer.innerHTML = statistic_data.name
  
  card_to_fill.appendChild(card_footer)
  card_to_fill.appendChild(chart_canvas_container)
  

}

async function create_multiple_boardgame_chart(url, footer_attribute = '', footer_preamble = ''){
  function create_boardgame_image_grid_row(boardgames, footer_data = []){

    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')
    row.classList.add('g-4')
    

    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_imaged_linked = document.createElement('a')
      boardgame_imaged_linked.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_imaged_linked.appendChild(boardgame_image)

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

      const boardgame_title = document.createElement('h6')
      boardgame_title.innerHTML = current_boardgame.name
      boardgame_title.classList.add('card-title')

      boardgame_card_body.appendChild(boardgame_title)

      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)

      column.appendChild(boardgame_card)

      row.appendChild(column)

    }

    return row

  }

  function footer_attribute_to_value(obj, footer_attribute){
    if (!footer_attribute) return obj;
    const properties = footer_attribute.split('.');
    return footer_attribute_to_value(obj[properties.shift()], properties.join('.'))
  }

  const card_to_fill = create_statistic_card()

  const statistic_data = await makeRequest(url)

  const card_header = document.createElement('div')
  card_header.classList.add('card-header')

  const card_footer_text = document.createElement('div')
  card_footer_text.classList.add('text-muted')
  card_footer_text.innerHTML = statistic_data.name
  card_header.appendChild(card_footer_text)

  card_to_fill.appendChild(card_header)

  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')
  boardgame_image_container.classList.add('overflow-auto')

  const boardgames_to_grid = statistic_data.result

  footer_data = []

  if (footer_attribute != ''){
    for (boardgame_index in boardgames_to_grid){
      let footer_string = footer_attribute_to_value(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)

  card_to_fill.appendChild(boardgame_image_container)


}

async function create_basic_statistic_chart(url){

  const card_to_fill = create_statistic_card()

  const statistic_data = await makeRequest(url)

  const card_header = document.createElement('div')
  card_header.classList.add('card-header')
  card_header.classList.add('text-muted')
  card_header.innerHTML = statistic_data.name

  card_to_fill.appendChild(card_header)

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

  const card_title = document.createElement('h5')
  card_title.classList.add('card-title')
  card_title.innerHTML = statistic_data.result

  card_body.appendChild(card_title)

  card_to_fill.appendChild(card_header)
  card_to_fill.appendChild(card_body)

}

async function loadStatistics(){   

  //Seperate because of multiple data
  create_games_over_time_chart()
  create_bar_chart(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')

  create_basic_statistic_chart(api_url+'/statistics/total_collection_cost')
  create_basic_statistic_chart(api_url+'/statistics/amount_of_games')

  create_multiple_boardgame_chart(api_url + '/statistics/most_expensive_games?top_amount=6', 'owned_info.price_paid', '\u20AC ')

  create_multiple_boardgame_chart(api_url + '/statistics/shelf_of_shame')

}