deblan.io-murph/assets/js/admin/modules/analytics.js

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)
})
}