cannery/assets/js/shot_log_chart.js

110 lines
2.5 KiB
JavaScript
Raw Normal View History

2024-03-18 23:26:32 -04:00
import Chart from 'chart.js/auto'
2022-11-09 21:04:57 -05:00
import 'chartjs-adapter-date-fns'
export default {
initalizeChart (el) {
const data = JSON.parse(el.dataset.chartData)
this.el.chart = new Chart(el, {
2024-03-18 23:26:32 -04:00
type: 'bar',
2022-11-09 21:04:57 -05:00
data: {
datasets: [{
label: el.dataset.label,
2022-11-11 19:34:23 -05:00
data: data.map(({ date, count, label }) => ({
label,
2022-11-09 21:04:57 -05:00
x: date,
y: count
})),
2022-11-11 19:34:23 -05:00
backgroundColor: `${el.dataset.color}77`,
2022-11-09 21:04:57 -05:00
borderColor: el.dataset.color,
fill: true,
2022-11-11 19:34:23 -05:00
borderWidth: 3,
pointBorderWidth: 1
2022-11-09 21:04:57 -05:00
}]
},
options: {
elements: {
point: {
2022-11-11 19:34:23 -05:00
radius: 9,
hoverRadius: 12
2022-11-09 21:04:57 -05:00
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20
}
},
tooltip: {
displayColors: false,
callbacks: {
2022-11-11 19:34:23 -05:00
title: (contexts) => contexts.map(({ raw: { x } }) => Intl.DateTimeFormat([], { timeZone: 'Etc/UTC', dateStyle: 'short' }).format(new Date(x))),
label: ({ raw: { label } }) => label
2022-11-09 21:04:57 -05:00
}
}
},
scales: {
y: {
beginAtZero: true,
stacked: true,
grace: '15%',
ticks: {
2024-03-18 23:26:32 -04:00
padding: 15,
precision: 0
2022-11-09 21:04:57 -05:00
}
},
x: {
2024-03-19 00:28:30 -04:00
type: 'timeseries',
2022-11-09 21:04:57 -05:00
time: {
unit: 'day'
2024-03-19 00:00:51 -04:00
},
ticks: {
source: 'data'
2022-11-09 21:04:57 -05:00
}
}
},
transitions: {
show: {
animations: {
x: {
from: 0
}
}
},
hide: {
animations: {
x: {
to: 0
}
}
}
}
}
})
},
2022-12-03 21:27:39 -05:00
updateChart (el) {
const data = JSON.parse(el.dataset.chartData)
this.el.chart.data = {
datasets: [{
label: el.dataset.label,
data: data.map(({ date, count, label }) => ({
label,
x: date,
y: count
})),
backgroundColor: `${el.dataset.color}77`,
borderColor: el.dataset.color,
fill: true,
borderWidth: 3,
pointBorderWidth: 1
}]
}
this.el.chart.update()
},
2022-11-09 21:04:57 -05:00
mounted () { this.initalizeChart(this.el) },
2022-12-03 21:27:39 -05:00
updated () { this.updateChart(this.el) }
2022-11-09 21:04:57 -05:00
}