[TASK] Adjust chartjs implementation (#218)

* [TASK] Make chartjs usable without endpoint
* [BUGFIX] Make requests work again

assets/js/libs/charts.js

@@ -1,50 +1,52 @@
-(function() {
-    'use strict';
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
 
-    const Selectors = {
-        chartContainer: 'canvas.js-chart'
-    };
-
-    const Charts = {
-        initialize: function () {
-            if (document.querySelectorAll(Selectors.chartContainer).length > 0) {
-                require('chart.js');
-                Charts.setup();
-            }
-        },
-        setup: function () {
-            const charts = Array.from(document.querySelectorAll(Selectors.chartContainer));
-            for (let canvas of charts) {
-                Charts.loadChart(canvas);
-            }
-        },
-        loadChart: function (canvas) {
-            const chartType = canvas.dataset.chartType;
-            const sourceUrl = canvas.dataset.src;
-            const options = JSON.parse(canvas.dataset.options || '{}');
+const Charts = {
+    options: {
+        selector: 'canvas.js-chart'
+    },
+    initialize: function () {
+        if (document.querySelectorAll(this.options.selector).length > 0) {
+            Charts.setup();
+        }
+    },
+    setup: function () {
+        const charts = Array.from(document.querySelectorAll(this.options.selector));
+        for (let canvas of charts) {
+            Charts.loadChart(canvas);
+        }
+    },
+    loadChart: async function (canvas) {
+        let chartType = canvas.dataset.chartType;
+        let sourceUrl = canvas.dataset.src || null;
+        let dataSet = JSON.parse(canvas.dataset.dataset || '{}');
+        let options = JSON.parse(canvas.dataset.options || '{}');
 
-            Charts.fetchData(sourceUrl).done(function(response) {
-                new Chart(canvas, {
-                    type: chartType,
-                    data: response,
-                    options: Object.assign({
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        tooltips: {
-                            mode: 'index'
-                        }
-                    }, options)
-                });
-            });
-        },
-        fetchData: function (src) {
-            return $.ajax(src, {
-                dataType: 'json'
-            });
+        if (sourceUrl) {
+            dataSet = await this.fetchData(sourceUrl);
         }
-    };
 
-    $(function () {
-        Charts.initialize();
-    });
-})();
+        new Chart(canvas, {
+            type: chartType,
+            data: dataSet,
+            options: Object.assign({
+                responsive: true,
+                maintainAspectRatio: false,
+                tooltips: {
+                    mode: 'index'
+                }
+            }, options)
+        });
+    },
+    fetchData: async function (src) {
+        let response = await fetch(src, {
+            headers: {
+              'Accept': 'application/json'
+            }
+        });
+        let data = await response.json();
+        return data;
+    }
+};
+
+Charts.initialize();

src/Resources/public/entrypoints.json

@@ -5,7 +5,7 @@
         "/bundles/template/app.11308dab.css"
       ],
       "js": [
-        "/bundles/template/app.54fb8efd.js"
+        "/bundles/template/app.9aaea0d2.js"
       ]
     },
     "webfont": {

src/Resources/public/manifest.json

@@ -1,6 +1,6 @@
 {
   "bundles/template/app.css": "/bundles/template/app.11308dab.css",
-  "bundles/template/app.js": "/bundles/template/app.54fb8efd.js",
+  "bundles/template/app.js": "/bundles/template/app.9aaea0d2.js",
   "bundles/template/webfont.css": "/bundles/template/webfont.eb64eebe.css",
   "bundles/template/fonts/fa-solid-900.ttf": "/bundles/template/fonts/fa-solid-900.e615bbcb.ttf",
   "bundles/template/fonts/fa-brands-400.ttf": "/bundles/template/fonts/fa-brands-400.b823fc0d.ttf",