IBX-6881: Upgrade chart.js to 4.4.0:

ibexa · Nov 14, 2023 · 82f9505 · 82f9505
1 parent 9c89d0e
commit 82f9505
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 45 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/core/bar.chart.js b/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,
                 },
-            ],
+            },
         },
     };
 

diff --git a/src/bundle/Resources/public/js/scripts/core/base.chart.js b/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,
@@ -74,7 +76,9 @@
         }
 
         render() {
-            this.chart = new Chart(this.canvas.getContext('2d'), {
+            // console.log(window);
+            // console.log(this.labels, this.datasets);
+            this.chart = new Chart(this.canvas, {
                 type: this.getType(),
                 data: {
                     labels: this.labels,

diff --git a/src/bundle/Resources/public/js/scripts/core/doughnut.chart.js b/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) {
+            super(data);
+
+            this.type = 'doughnut';
+        }
+
+        getType() {
+            return this.type;
+        }
+    }
+
+    ibexa.addConfig('core.chart.Doughnut', DoughnutChart);
+})(window, window.document, window.ibexa);
diff --git a/src/bundle/Resources/public/js/scripts/core/line.chart.js b/src/bundle/Resources/public/js/scripts/core/line.chart.js
@@ -1,4 +1,4 @@
-(function (global, doc, ibexa, Chart) {
+(function (global, doc, ibexa, moment) {
     const MAX_NUMBER_OF_LABELS = 16;
     const lineDefaultOptions = {
         elements: {
@@ -10,41 +10,26 @@
             },
         },
         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 +55,4 @@
     }
 
     ibexa.addConfig('core.chart.LineChart', LineChart);
-})(window, window.document, window.ibexa, window.Chart);
+})(window, window.document, window.ibexa, window.moment);
diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/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 %}">