PoC 32842 upgrade ChartJS

Author: karyna-t

app/code/Magento/Backend/view/adminhtml/web/js/dashboard/chart.js

@@ -9,6 +9,7 @@ define([
     'jquery',
     'chartJs',
     'jquery-ui-modules/widget',
+    'chartjs/chartjs-adapter-moment',
     'moment'
 ], function ($, Chart) {
     'use strict';
@@ -74,7 +75,7 @@ define([
             $(this.element).toggle(response.data.length > 0);
             $(this.element).next('.dashboard-diagram-nodata').toggle(response.data.length === 0);
 
-            this.chart.options.scales.xAxes[0].time.unit = this.options.periodUnits[this.period] ?
+            this.chart.options.scales.xAxis.time.unit = this.options.periodUnits[this.period] ?
                 this.options.periodUnits[this.period] : 'hour';
             this.chart.data.datasets[0].data = response.data;
             this.chart.data.datasets[0].label = response.label;
@@ -89,6 +90,8 @@ define([
                 type: 'bar',
                 data: {
                     datasets: [{
+                        yAxisID: 'yAxis',
+                        xAxisID: 'xAxis',
                         data: [],
                         backgroundColor: '#f1d4b3',
                         borderColor: '#eb5202',
@@ -101,20 +104,19 @@ define([
                         position: 'bottom'
                     },
                     scales: {
-                        xAxes: [{
+                        xAxis: {
                             offset: true,
                             type: 'time',
                             ticks: {
-                                autoSkip: true,
                                 source: 'data'
                             }
-                        }],
-                        yAxes: [{
+                        },
+                        yAxis: {
                             ticks: {
                                 beginAtZero: true,
                                 precision: this.options.precision
                             }
-                        }]
+                        }
                     }
                 }
             };

app/code/Magento/Ui/view/base/requirejs-config.js

@@ -6,7 +6,7 @@
 var config = {
     deps: [],
     shim: {
-        'chartjs/Chart.min': ['moment'],
+        'chartjs/chartjs-adapter-moment': ['moment'],
         'tiny_mce_4/tinymce.min': {
             exports: 'tinyMCE'
         }
@@ -26,6 +26,7 @@ var config = {
             uiLayout:       'Magento_Ui/js/core/renderer/layout',
             buttonAdapter:  'Magento_Ui/js/form/button-adapter',
             chartJs:        'chartjs/Chart.min',
+            'chart.js':     'chartjs/Chart.min',
             tinymce:        'tiny_mce_4/tinymce.min',
             wysiwygAdapter: 'mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter'
         }

app/design/frontend/Magento/blank/etc/view.xml

@@ -260,6 +260,7 @@
     </vars>
     <exclude>
         <item type="file">Lib::chartjs/Chart.min.js</item>
+        <item type="file">Lib::chartjs/chartjs-adapter-moment.js</item>
         <item type="file">Lib::jquery/jquery.min.js</item>
         <item type="file">Lib::jquery/jquery-ui-1.9.2.js</item>
         <item type="file">Lib::jquery/jquery.details.js</item>

app/design/frontend/Magento/luma/etc/view.xml

@@ -271,6 +271,7 @@
     </vars>
     <exclude>
         <item type="file">Lib::chartjs/Chart.min.js</item>
+        <item type="file">Lib::chartjs/chartjs-adapter-moment.js</item>
         <item type="file">Lib::jquery/jquery.min.js</item>
         <item type="file">Lib::jquery/jquery-ui-1.9.2.js</item>
         <item type="file">Lib::jquery/jquery.details.js</item>

lib/web/chartjs/Chart.min.js

@@ -0,0 +1,72 @@
+/*!
+  * chartjs-adapter-moment v1.0.0
+  * https://www.chartjs.org
+  * (c) 2021 chartjs-adapter-moment Contributors
+  * Released under the MIT license
+  */
+(function (global, factory) {
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('moment'), require('chart.js')) :
+typeof define === 'function' && define.amd ? define(['moment', 'chart.js'], factory) :
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.moment, global.Chart));
+}(this, (function (moment, chart_js) { 'use strict';
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+const FORMATS = {
+  datetime: 'MMM D, YYYY, h:mm:ss a',
+  millisecond: 'h:mm:ss.SSS a',
+  second: 'h:mm:ss a',
+  minute: 'h:mm a',
+  hour: 'hA',
+  day: 'MMM D',
+  week: 'll',
+  month: 'MMM YYYY',
+  quarter: '[Q]Q - YYYY',
+  year: 'YYYY'
+};
+
+chart_js._adapters._date.override(typeof moment__default['default'] === 'function' ? {
+  _id: 'moment', // DEBUG ONLY
+
+  formats: function() {
+    return FORMATS;
+  },
+
+  parse: function(value, format) {
+    if (typeof value === 'string' && typeof format === 'string') {
+      value = moment__default['default'](value, format);
+    } else if (!(value instanceof moment__default['default'])) {
+      value = moment__default['default'](value);
+    }
+    return value.isValid() ? value.valueOf() : null;
+  },
+
+  format: function(time, format) {
+    return moment__default['default'](time).format(format);
+  },
+
+  add: function(time, amount, unit) {
+    return moment__default['default'](time).add(amount, unit).valueOf();
+  },
+
+  diff: function(max, min, unit) {
+    return moment__default['default'](max).diff(moment__default['default'](min), unit);
+  },
+
+  startOf: function(time, unit, weekday) {
+    time = moment__default['default'](time);
+    if (unit === 'isoWeek') {
+      weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
+      return time.isoWeekday(weekday).startOf('day').valueOf();
+    }
+    return time.startOf(unit).valueOf();
+  },
+
+  endOf: function(time, unit) {
+    return moment__default['default'](time).endOf(unit).valueOf();
+  }
+} : {});
+
+})));