MDL-71708 libraries: Upgrade chartjs to latest version

Changes in chart config file and the process to import library.

Co-authored-by: Andrew Lyons <[email protected]>

lib/amd/src/chart_output_chartjs.js

@@ -156,9 +156,9 @@ define([
         }
 
         if (axis.getLabel() !== null) {
-            scaleData.scaleLabel = {
+            scaleData.title = {
                 display: true,
-                labelString: this._cleanData(axis.getLabel())
+                text: this._cleanData(axis.getLabel())
             };
         }
 
@@ -187,56 +187,67 @@ define([
      * @return {Object} The axis config.
      */
     Output.prototype._makeConfig = function() {
+        var charType = this._getChartType();
         var config = {
-            type: this._getChartType(),
+            type: charType,
             data: {
                 labels: this._cleanData(this._chart.getLabels()),
                 datasets: this._makeDatasetsConfig()
             },
             options: {
-                title: {
-                    display: this._chart.getTitle() !== null,
-                    text: this._cleanData(this._chart.getTitle())
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    title: {
+                        display: this._chart.getTitle() !== null,
+                        text: this._cleanData(this._chart.getTitle())
+                    }
                 }
             }
         };
+
+        if (charType === 'horizontalBar') {
+            config.type = 'bar';
+            config.options.indexAxis = 'y';
+        }
+
         var legendOptions = this._chart.getLegendOptions();
         if (legendOptions) {
-            config.options.legend = legendOptions;
+            config.options.plugins.legend = legendOptions;
         }
 
 
         this._chart.getXAxes().forEach(function(axis, i) {
             var axisLabels = axis.getLabels();
 
             config.options.scales = config.options.scales || {};
-            config.options.scales.xAxes = config.options.scales.xAxes || [];
-            config.options.scales.xAxes[i] = this._makeAxisConfig(axis, 'x', i);
+            config.options.scales.x = config.options.scales.x || {};
+            config.options.scales.x[i] = this._makeAxisConfig(axis, 'x', i);
 
             if (axisLabels !== null) {
-                config.options.scales.xAxes[i].ticks.callback = function(value, index) {
+                config.options.scales.x[i].ticks.callback = function(value, index) {
                     return axisLabels[index] || '';
                 };
             }
-            config.options.scales.xAxes[i].stacked = this._isStacked();
+            config.options.scales.x.stacked = this._isStacked();
         }.bind(this));
 
         this._chart.getYAxes().forEach(function(axis, i) {
             var axisLabels = axis.getLabels();
 
             config.options.scales = config.options.scales || {};
-            config.options.scales.yAxes = config.options.scales.yAxes || [];
-            config.options.scales.yAxes[i] = this._makeAxisConfig(axis, 'y', i);
+            config.options.scales.y = config.options.scales.yAxes || {};
+            config.options.scales.y[i] = this._makeAxisConfig(axis, 'y', i);
 
             if (axisLabels !== null) {
-                config.options.scales.yAxes[i].ticks.callback = function(value) {
+                config.options.scales.y[i].ticks.callback = function(value) {
                     return axisLabels[parseInt(value, 10)] || '';
                 };
             }
-            config.options.scales.yAxes[i].stacked = this._isStacked();
+            config.options.scales.y.stacked = this._isStacked();
         }.bind(this));
 
-        config.options.tooltips = {
+        config.options.plugins.tooltip = {
             callbacks: {
                 label: this._makeTooltip.bind(this)
             }
@@ -262,7 +273,7 @@ define([
                 backgroundColor: colors,
                 // Pie charts look better without borders.
                 borderColor: this._chart.getType() == Pie.prototype.TYPE ? '#fff' : colors,
-                lineTension: this._isSmooth(series) ? 0.3 : 0
+                tension: this._isSmooth(series) ? 0.3 : 0
             };
 
             if (series.getXAxis() !== null) {
@@ -280,32 +291,25 @@ define([
     /**
      * Get the chart data, add labels and rebuild the tooltip.
      *
-     * @param {Object[]} tooltipItem The tooltip item data.
-     * @param {Object[]} data The chart data.
-     * @returns {String}
+     * @param {Object[]} tooltipItem The tooltip item object.
+     * @returns {*[]}
      * @protected
      */
-    Output.prototype._makeTooltip = function(tooltipItem, data) {
+    Output.prototype._makeTooltip = function(tooltipItem) {
 
         // Get series and chart data to rebuild the tooltip and add labels.
         var series = this._chart.getSeries()[tooltipItem.datasetIndex];
         var serieLabel = series.getLabel();
-        var serieLabels = series.getLabels();
-        var chartData = data.datasets[tooltipItem.datasetIndex].data;
-        var tooltipData = chartData[tooltipItem.index];
+        var chartData = tooltipItem.dataset.data;
+        var tooltipData = chartData[tooltipItem.dataIndex];
 
         // Build default tooltip.
         var tooltip = [];
 
-        // Pie and doughnut charts does not have axis.
-        if (tooltipItem.xLabel == '' && tooltipItem.yLabel == '') {
+        // Pie and doughnut charts tooltip are different.
+        if (this._chart.getType() === Pie.prototype.TYPE) {
             var chartLabels = this._cleanData(this._chart.getLabels());
-            tooltip.push(chartLabels[tooltipItem.index]);
-        }
-
-        // Add series labels to the tooltip if any.
-        if (serieLabels !== null) {
-            tooltip.push(this._cleanData(serieLabels[tooltipItem.index]));
+            tooltip.push(chartLabels[tooltipItem.dataIndex] + ' - ' + this._cleanData(serieLabel) + ': ' + tooltipData);
         } else {
             tooltip.push(this._cleanData(serieLabel) + ': ' + tooltipData);
         }