src/main.js
import Chart from 'chart.js/auto'
import './styles.css'
const canvas = document.querySelector('#signup-chart')
const addWeekButton = document.querySelector('[data-add-week]')
const status = document.querySelector('[data-status]')
if (
!(canvas instanceof HTMLCanvasElement) ||
!(addWeekButton instanceof HTMLButtonElement) ||
!(status instanceof HTMLElement)
) {
throw new Error('Chart elements were not found')
}
const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const signups = [38, 51, 46, 63, 58, 74]
const chart = new Chart(canvas, {
type: 'line',
data: {
labels,
datasets: [
{
label: 'Signups',
data: signups,
borderColor: '#ff6384',
backgroundColor: 'rgba(255, 99, 132, 0.14)',
borderWidth: 3,
fill: true,
tension: 0.35,
pointRadius: 4,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: false,
plugins: {
legend: { display: false },
},
scales: {
y: { beginAtZero: true },
},
},
})
canvas.dataset.chartReady = 'true'
canvas.dataset.points = String(signups.length)
addWeekButton.addEventListener('click', () => {
const nextValue = (signups.at(-1) ?? 0) + 9
labels.push('Sun')
signups.push(nextValue)
chart.update()
canvas.dataset.points = String(signups.length)
status.textContent = `Latest: ${nextValue} signups`
addWeekButton.disabled = true
})
window.addEventListener('pagehide', () => chart.destroy(), { once: true })