async function initChart() {
  const datasets = ["Playing", "Normal queue", "Priority queue"]
    .map(label => ({ label, data: [] }))

  const chart = new Chart(document.querySelector("#player-counts"), {
    type: "line",
    data: {
      datasets: datasets,
    },
    options: {
      scales: {
        x: {
          type: "time",
          time: {
            unit: "minute"
          },
        },
        y: {
          beginAtZero: true,
        },
      },
    },
  })

  const range = document.querySelector("select#range")

  const updateChart = async () => {
  const data = await getPlayerCounts(range.value)

    datasets[0].data = data.map(point => ({
      x: point["time"] * 60 * 1_000,
      y: point["playing"],
    }))

    datasets[1].data = data.map(point => ({
      x: point["time"] * 60 * 1_000,
      y: point["normal_queue"],
    }))

    datasets[2].data = data.map(point => ({
      x: point["time"] * 60 * 1_000,
      y: point["priority_queue"],
    }))

    chart.update()
  }

  range.addEventListener("change", e => updateChart())
  updateChart()
}

document.addEventListener("DOMContentLoaded", () => {
  initChart()
})