54 lines
1.1 KiB
JavaScript
54 lines
1.1 KiB
JavaScript
|
const $ = require('jquery')
|
||
|
const Chart = require('chart.js/auto').default
|
||
|
|
||
|
const drawChart = () => {
|
||
|
const ctx = document.getElementById('analytic-chart')
|
||
|
const options = {
|
||
|
type: 'bar',
|
||
|
options: {
|
||
|
responsive: true,
|
||
|
maintainAspectRatio: false,
|
||
|
scales: {
|
||
|
y: {
|
||
|
beginAtZero: true
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
data: {
|
||
|
labels: JSON.parse(ctx.getAttribute('data-labels')),
|
||
|
datasets: [{
|
||
|
label: ctx.getAttribute('data-label'),
|
||
|
data: JSON.parse(ctx.getAttribute('data-values')),
|
||
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||
|
borderColor: 'rgb(54, 162, 235)',
|
||
|
borderWidth: 1
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const chart = new Chart(ctx, options)
|
||
|
|
||
|
const resize = () => {
|
||
|
const width = ctx.parentNode.parentNode.offsetWidth
|
||
|
const height = 250
|
||
|
|
||
|
chart.resize(width, height)
|
||
|
}
|
||
|
|
||
|
resize()
|
||
|
|
||
|
window.addEventListener('resize', resize)
|
||
|
}
|
||
|
|
||
|
module.exports = () => {
|
||
|
const body = $('body')
|
||
|
|
||
|
body.on('shown.bs.modal', '.modal', (e) => {
|
||
|
window.setTimeout(() => {
|
||
|
if (document.getElementById('analytic-chart')) {
|
||
|
drawChart()
|
||
|
}
|
||
|
}, 500)
|
||
|
})
|
||
|
}
|