add analytics in assets

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')()

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