diff --git a/assets/js/admin/admin.js b/assets/js/admin/admin.js index 0bf8794..4430472 100644 --- a/assets/js/admin/admin.js +++ b/assets/js/admin/admin.js @@ -23,3 +23,4 @@ require('./modules/sortable.js')() require('./modules/batch.js')() require('./modules/file-manager.js')() require('./modules/file-picker.js')() +require('./modules/analytics.js')() diff --git a/assets/js/admin/modules/analytics.js b/assets/js/admin/modules/analytics.js new file mode 100644 index 0000000..dcb6d1a --- /dev/null +++ b/assets/js/admin/modules/analytics.js @@ -0,0 +1,53 @@ +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) + }) +} diff --git a/assets/js/admin/modules/modal.js b/assets/js/admin/modules/modal.js index 8afb28a..13cecba 100644 --- a/assets/js/admin/modules/modal.js +++ b/assets/js/admin/modules/modal.js @@ -3,8 +3,10 @@ const $ = require('jquery') const openModal = function (url) { let container = $('#modal-container') const body = $('body') + let doTrigger = true if (!container.length) { + let doTrigger = false container = $('