IBX-6881: Upgraded chart.js to 4.4.0 (#961)

Author: Gengar-i

src/bundle/Resources/encore/ibexa.js.config.js

@@ -32,6 +32,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/core/split.btn.js'),
     path.resolve(__dirname, '../public/js/scripts/core/pie.chart.js'),
     path.resolve(__dirname, '../public/js/scripts/core/bar.chart.js'),
+    path.resolve(__dirname, '../public/js/scripts/core/doughnut.chart.js'),
     path.resolve(__dirname, '../public/js/scripts/core/adaptive.items.js'),
     path.resolve(__dirname, '../public/js/scripts/core/popup.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/core/tag.view.select.js'),

src/bundle/Resources/public/js/scripts/core/bar.chart.js

@@ -1,14 +1,12 @@
 (function (global, doc, ibexa) {
     const barDefaultOptions = {
         scales: {
-            xAxes: [
-                {
-                    display: true,
-                    gridLines: {
-                        display: false,
-                    },
+            x: {
+                display: true,
+                grid: {
+                    display: false,
                 },
-            ],
+            },
         },
     };
 

src/bundle/Resources/public/js/scripts/core/base.chart.js

@@ -5,8 +5,10 @@
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
-        legend: {
-            display: false,
+        plugins: {
+            legend: {
+                display: false,
+            },
         },
         tooltips: {
             enabled: true,
@@ -26,11 +28,13 @@
             },
         },
     };
+    const defaultPlugins = [];
 
     class BaseChart {
-        constructor(data, options = {}) {
+        constructor(data, options = {}, plugins = []) {
             this.setData(data);
             this.setOptions(options);
+            this.setPlugins(plugins);
             this.lang = document.documentElement.lang.replace('_', '-'); // TODO: Get this config from settings
         }
 
@@ -46,6 +50,10 @@
             };
         }
 
+        setPlugins(plugins) {
+            this.plugins = [...defaultPlugins, ...plugins];
+        }
+
         getType() {}
 
         getLayoutOptions() {}
@@ -74,13 +82,14 @@
         }
 
         render() {
-            this.chart = new Chart(this.canvas.getContext('2d'), {
+            this.chart = new Chart(this.canvas, {
                 type: this.getType(),
                 data: {
                     labels: this.labels,
                     datasets: this.datasets,
                 },
                 options: this.options,
+                plugins: this.plugins,
             });
 
             this.updateChartMessageDisplay();

src/bundle/Resources/public/js/scripts/core/doughnut.chart.js

@@ -0,0 +1,15 @@
+(function (global, doc, ibexa) {
+    class DoughnutChart extends ibexa.core.BaseChart {
+        constructor(data, options = {}, plugins = []) {
+            super(data, options, plugins);
+
+            this.type = 'doughnut';
+        }
+
+        getType() {
+            return this.type;
+        }
+    }
+
+    ibexa.addConfig('core.chart.DoughnutChart', DoughnutChart);
+})(window, window.document, window.ibexa);

src/bundle/Resources/public/js/scripts/core/line.chart.js

@@ -1,50 +1,32 @@
-(function (global, doc, ibexa, Chart) {
+(function (global, doc, ibexa) {
     const MAX_NUMBER_OF_LABELS = 16;
     const lineDefaultOptions = {
         elements: {
             point: {
                 radius: 2,
             },
-            line: {
-                tension: 0,
-            },
         },
         scales: {
-            xAxes: [
-                {
-                    display: true,
-                    gridLines: {
-                        display: false,
-                    },
-                    ticks: {
-                        maxRotation: 0,
-                        autoSkip: false,
-                        callback: (value, index, labels) => {
-                            const labelsInterval = Math.max(Math.ceil(labels.length / MAX_NUMBER_OF_LABELS), 1);
-                            const shouldDisplayLabel = !(index % labelsInterval);
-
-                            return shouldDisplayLabel ? value : null;
-                        },
-                    },
+            x: {
+                display: true,
+                grid: {
+                    display: false,
                 },
-            ],
-            yAxes: [
-                {
-                    display: true,
-                    type: 'logarithmic',
-                    ticks: {
-                        callback: (...args) => {
-                            const value = Chart.Ticks.formatters.logarithmic.call(this, ...args);
-
-                            if (value.length) {
-                                return Number(value).toLocaleString();
-                            }
-
-                            return value;
-                        },
+                ticks: {
+                    maxRotation: 0,
+                    autoSkip: false,
+                    callback: function (value, index, ticks) {
+                        const label = this.getLabelForValue(value);
+                        const labelsInterval = Math.max(Math.ceil(ticks.length / MAX_NUMBER_OF_LABELS), 1);
+                        const shouldDisplayLabel = !(index % labelsInterval);
+
+                        return shouldDisplayLabel ? label : null;
                     },
                 },
-            ],
+            },
+            y: {
+                display: true,
+            },
         },
     };
 
@@ -70,4 +52,4 @@
     }
 
     ibexa.addConfig('core.chart.LineChart', LineChart);
-})(window, window.document, window.ibexa, window.Chart);
+})(window, window.document, window.ibexa);

src/bundle/Resources/views/themes/admin/ui/layout.html.twig

@@ -112,7 +112,7 @@
         <script src="{{ asset('bundles/ibexaadminuiassets/vendors/moment-timezone/builds/moment-timezone-with-data.min.js') }}"></script>
         <script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
         <script src="{{ asset('assets/translations/config.js') }}"></script>
-        <script src="{{ asset('bundles/ibexaadminuiassets/vendors/chart-js/dist/Chart.min.js') }}"></script>
+        <script src="{{ asset('bundles/ibexaadminuiassets/vendors/chart-js/dist/chart.umd.js') }}"></script>
         <script src="{{ asset('bundles/ibexaadminuiassets/vendors/js-md5/build/md5.min.js') }}"></script>
     </head>
     <body class="{% block body_class %}{% endblock %}">