67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
async function getPlayerCounts(range) {
|
|
const res = await fetch(`/api/player-count?range=${range}`)
|
|
if (!res.ok) {
|
|
throw new Error(`Failed to get player counts, got status ${res.status}`)
|
|
}
|
|
|
|
const json = await res.json()
|
|
return json
|
|
}
|
|
|
|
function initChart() {
|
|
const range = document.querySelector("select#range")
|
|
const canvas = document.querySelector("canvas#chart")
|
|
|
|
const chart = new Chart(canvas, {
|
|
type: "line",
|
|
data: {
|
|
datasets: [],
|
|
},
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
type: "time",
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
time: {
|
|
unit: "minute"
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
})
|
|
|
|
const updateChart = async () => {
|
|
try {
|
|
const data = await getPlayerCounts(range.value)
|
|
|
|
const datasets = new Map([
|
|
["Playing", "playing"],
|
|
["Normal queue", "normal_queue"],
|
|
["Priority queue", "priority_queue"],
|
|
])
|
|
|
|
chart.data.datasets = Array
|
|
.from(datasets.entries())
|
|
.map(([name, key]) => ({
|
|
label: name,
|
|
data: data.map(point => ({
|
|
x: point["time"] * 60_000,
|
|
y: point[key],
|
|
}))
|
|
}))
|
|
chart.update()
|
|
} catch (e) {
|
|
alert(`Failed to fetch data: ${e}`)
|
|
}
|
|
}
|
|
|
|
range.addEventListener("input", () => updateChart())
|
|
updateChart()
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
initChart()
|
|
})
|