MDL-55146 core: Support custom labels on X axis

Note that this is still limited as the number of labels is locked
to the number of elements in the series.

Part of MDL-54987 epic.

lib/amd/build/chart_output_chartjs.min.js

@@ -1 +1 @@
-define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base","core/chart_pie"],function(a,b,c,d,e){function f(){d.prototype.constructor.apply(this,arguments),this._canvas=this._node,"CANVAS"!=this._canvas.prop("tagName")&&(this._canvas=a("<canvas>"),this._node.append(this._canvas)),this._build()}var g=function(a,b){return"axis-"+a+"-"+b};return f.prototype=Object.create(d.prototype),f.prototype._config=null,f.prototype._chartjs=null,f.prototype._canvas=null,f.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},f.prototype._makeAxisConfig=function(a,b,d){var e={id:g(b,d)};return a.getPosition()!==c.prototype.POS_DEFAULT&&(e.position=a.getPosition()),null!==a.getLabel()&&(e.scaleLabel={display:!0,labelString:a.getLabel()}),null!==a.getStepSize()&&(e.ticks=e.ticks||{},e.ticks.stepSize=a.getStepSize()),null!==a.getMax()&&(e.ticks=e.ticks||{},e.ticks.max=a.getMax()),null!==a.getMin()&&(e.ticks=e.ticks||{},e.ticks.min=a.getMin()),e},f.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._chart.getTitle()}}};return this._chart.getXAxes().forEach(function(b,c){a.options.scales=a.options.scales||{},a.options.scales.xAxes=a.options.scales.xAxes||[],a.options.scales.xAxes[c]=this._makeAxisConfig(b,"x",c)}.bind(this)),this._chart.getYAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.yAxes=a.options.scales.yAxes||[],a.options.scales.yAxes[c]=this._makeAxisConfig(b,"y",c),null!==d&&(a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""})}.bind(this)),a},f.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor(),c={label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,backgroundColor:b,borderColor:this._chart.getType()==e.prototype.TYPE?null:b};return null!==a.getXAxis()&&(c.xAxisID=g("x",a.getXAxis())),null!==a.getYAxis()&&(c.yAxisID=g("y",a.getYAxis())),c}.bind(this));return a},f.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},f});
+define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base","core/chart_pie"],function(a,b,c,d,e){function f(){d.prototype.constructor.apply(this,arguments),this._canvas=this._node,"CANVAS"!=this._canvas.prop("tagName")&&(this._canvas=a("<canvas>"),this._node.append(this._canvas)),this._build()}var g=function(a,b){return"axis-"+a+"-"+b};return f.prototype=Object.create(d.prototype),f.prototype._config=null,f.prototype._chartjs=null,f.prototype._canvas=null,f.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},f.prototype._makeAxisConfig=function(a,b,d){var e={id:g(b,d)};return a.getPosition()!==c.prototype.POS_DEFAULT&&(e.position=a.getPosition()),null!==a.getLabel()&&(e.scaleLabel={display:!0,labelString:a.getLabel()}),null!==a.getStepSize()&&(e.ticks=e.ticks||{},e.ticks.stepSize=a.getStepSize()),null!==a.getMax()&&(e.ticks=e.ticks||{},e.ticks.max=a.getMax()),null!==a.getMin()&&(e.ticks=e.ticks||{},e.ticks.min=a.getMin()),e},f.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._chart.getTitle()}}};return this._chart.getXAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.xAxes=a.options.scales.xAxes||[],a.options.scales.xAxes[c]=this._makeAxisConfig(b,"x",c),null!==d&&(a.options.scales.xAxes[c].ticks.callback=function(a,b){return d[b]||""})}.bind(this)),this._chart.getYAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.yAxes=a.options.scales.yAxes||[],a.options.scales.yAxes[c]=this._makeAxisConfig(b,"y",c),null!==d&&(a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""})}.bind(this)),a},f.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor(),c={label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,backgroundColor:b,borderColor:this._chart.getType()==e.prototype.TYPE?null:b};return null!==a.getXAxis()&&(c.xAxisID=g("x",a.getXAxis())),null!==a.getYAxis()&&(c.yAxisID=g("y",a.getYAxis())),c}.bind(this));return a},f.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},f});

lib/amd/src/chart_output_chartjs.js

@@ -161,9 +161,17 @@ define([
         };
 
         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);
+
+            if (axisLabels !== null) {
+                config.options.scales.xAxes[i].ticks.callback = function(value, index) {
+                    return axisLabels[index] || '';
+                };
+            }
         }.bind(this));
 
         this._chart.getYAxes().forEach(function(axis, i) {

lib/classes/chart_base.php

@@ -262,7 +262,7 @@ class chart_base implements JsonSerializable, renderable {
      * axis preceding, we would effectively contain the axes in an associative array
      * rather than a simple array, and that would have consequences on serialisation.
      *
-     * @param string} $xy Accepts x or y.
+     * @param string $xy Accepts x or y.
      * @param chart_axis $axis The axis to validate.
      * @param index $index The index of the axis.
      */