From 82f9505ec92ee6182e902cf67ade17240e6250d3 Mon Sep 17 00:00:00 2001
From: Robert Swoboda <53216935+Gengar-i@users.noreply.github.com>
Date: Tue, 24 Oct 2023 20:06:02 +0200
Subject: [PATCH] IBX-6881: Upgrade chart.js to 4.4.0:

---
 .../public/js/scripts/core/bar.chart.js       | 12 ++---
 .../public/js/scripts/core/base.chart.js      | 10 ++--
 .../public/js/scripts/core/doughnut.chart.js  | 15 ++++++
 .../public/js/scripts/core/line.chart.js      | 53 +++++++------------
 .../views/themes/admin/ui/layout.html.twig    |  2 +-
 5 files changed, 47 insertions(+), 45 deletions(-)
 create mode 100644 src/bundle/Resources/public/js/scripts/core/doughnut.chart.js

diff --git a/src/bundle/Resources/public/js/scripts/core/bar.chart.js b/src/bundle/Resources/public/js/scripts/core/bar.chart.js
index c4cafab7ac..994c73e819 100644
--- 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
index f7647405bd..b6591caeaf 100644
--- 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
new file mode 100644
index 0000000000..04fd62dc8f
--- /dev/null
+++ 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
index 84578fed8a..4f54bc66b3 100644
--- 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
index 09e45451e5..5ed3ba3c24 100644
--- 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 %}">