MDL-55092 core: Add support for custom Y axis labels

Part of MDL-54987 epic.

lib/amd/build/chart_axis.min.js

@@ -1 +1 @@
-define([],function(){function a(){}return a.prototype.POS_DEFAULT=null,a.prototype.POS_BOTTOM="bottom",a.prototype.POS_LEFT="left",a.prototype.POS_RIGHT="right",a.prototype.POS_TOP="top",a.prototype._label=null,a.prototype._max=null,a.prototype._min=null,a.prototype._position=null,a.prototype._stepSize=null,a.prototype.create=function(b){var c=new a;return c.setPosition(b.position),c.setLabel(b.label),c.setStepSize(b.stepSize),c.setMax(b.max),c.setMin(b.min),c},a.prototype.getLabel=function(){return this._label},a.prototype.getMax=function(){return this._max},a.prototype.getMin=function(){return this._min},a.prototype.getPosition=function(){return this._position},a.prototype.getStepSize=function(){return this._stepSize},a.prototype.setLabel=function(a){this._label=a||null},a.prototype.setMax=function(a){this._max="undefined"!=typeof a?a:null},a.prototype.setMin=function(a){this._min="undefined"!=typeof a?a:null},a.prototype.setPosition=function(a){if(a!=this.POS_DEFAULT&&a!=this.POS_BOTTOM&&a!=this.POS_LEFT&&a!=this.POS_RIGHT&&a!=this.POS_TOP)throw new Error("Invalid axis position.");this._position=a},a.prototype.setStepSize=function(a){if("undefined"==typeof a||null===a)a=null;else{if(isNaN(Number(a)))throw new Error("Value for stepSize is not a number.");a=Number(a)}this._stepSize=a},a});
+define([],function(){function a(){}return a.prototype.POS_DEFAULT=null,a.prototype.POS_BOTTOM="bottom",a.prototype.POS_LEFT="left",a.prototype.POS_RIGHT="right",a.prototype.POS_TOP="top",a.prototype._label=null,a.prototype._labels=null,a.prototype._max=null,a.prototype._min=null,a.prototype._position=null,a.prototype._stepSize=null,a.prototype.create=function(b){var c=new a;return c.setPosition(b.position),c.setLabel(b.label),c.setStepSize(b.stepSize),c.setMax(b.max),c.setMin(b.min),c.setLabels(b.labels),c},a.prototype.getLabel=function(){return this._label},a.prototype.getLabels=function(){return this._labels},a.prototype.getMax=function(){return this._max},a.prototype.getMin=function(){return this._min},a.prototype.getPosition=function(){return this._position},a.prototype.getStepSize=function(){return this._stepSize},a.prototype.setLabel=function(a){this._label=a||null},a.prototype.setLabels=function(a){this._labels=a||null,null===this._labels||null!==this._stepSize||null!==this._min&&0!==this._min||null!==this._max||(this.setStepSize(1),this.setMin(0),this.setMax(a.length-1))},a.prototype.setMax=function(a){this._max="undefined"!=typeof a?a:null},a.prototype.setMin=function(a){this._min="undefined"!=typeof a?a:null},a.prototype.setPosition=function(a){if(a!=this.POS_DEFAULT&&a!=this.POS_BOTTOM&&a!=this.POS_LEFT&&a!=this.POS_RIGHT&&a!=this.POS_TOP)throw new Error("Invalid axis position.");this._position=a},a.prototype.setStepSize=function(a){if("undefined"==typeof a||null===a)a=null;else{if(isNaN(Number(a)))throw new Error("Value for stepSize is not a number.");a=Number(a)}this._stepSize=a},a});

lib/amd/build/chart_output_chartjs.min.js

@@ -1 +1 @@
-define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base"],function(a,b,c,d){function e(){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()}return e.prototype=Object.create(d.prototype),e.prototype._config=null,e.prototype._chartjs=null,e.prototype._canvas=null,e.prototype.getDatasets=function(){var a=this._chart.getSeries().map(function(a){return{label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,borderColor:a.getColor(),backgroundColor:a.getColor()}});return a},e.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},e.prototype._makeAxisConfig=function(a){var b={};return a.getPosition()!==c.prototype.POS_DEFAULT&&(b.position=a.getPosition()),null!==a.getLabel()&&(b.scaleLabel={display:!0,labelString:a.getLabel()}),null!==a.getStepSize()&&(b.ticks=b.ticks||{},b.ticks.stepSize=a.getStepSize()),null!==a.getMax()&&(b.ticks=b.ticks||{},b.ticks.max=a.getMax()),null!==a.getMin()&&(b.ticks=b.ticks||{},b.ticks.min=a.getMin()),b},e.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this.getDatasets()},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)}.bind(this)),this._chart.getYAxes().forEach(function(b,c){a.options.scales=a.options.scales||{},a.options.scales.yAxes=a.options.scales.yAxes||[],a.options.scales.yAxes[c]=this._makeAxisConfig(b)}.bind(this)),a},e.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},e});
+define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base"],function(a,b,c,d){function e(){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()}return e.prototype=Object.create(d.prototype),e.prototype._config=null,e.prototype._chartjs=null,e.prototype._canvas=null,e.prototype.getDatasets=function(){var a=this._chart.getSeries().map(function(a){return{label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,borderColor:a.getColor(),backgroundColor:a.getColor()}});return a},e.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},e.prototype._makeAxisConfig=function(a){var b={};return a.getPosition()!==c.prototype.POS_DEFAULT&&(b.position=a.getPosition()),null!==a.getLabel()&&(b.scaleLabel={display:!0,labelString:a.getLabel()}),null!==a.getStepSize()&&(b.ticks=b.ticks||{},b.ticks.stepSize=a.getStepSize()),null!==a.getMax()&&(b.ticks=b.ticks||{},b.ticks.max=a.getMax()),null!==a.getMin()&&(b.ticks=b.ticks||{},b.ticks.min=a.getMin()),b},e.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this.getDatasets()},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)}.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),null!==d&&(a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""})}.bind(this)),a},e.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},e});

lib/amd/src/chart_axis.js

@@ -36,6 +36,7 @@ define([], function() {
     Axis.prototype.POS_TOP = 'top';
 
     Axis.prototype._label = null;
+    Axis.prototype._labels = null;
     Axis.prototype._max = null;
     Axis.prototype._min = null;
     Axis.prototype._position = null;
@@ -48,6 +49,7 @@ define([], function() {
         s.setStepSize(obj.stepSize);
         s.setMax(obj.max);
         s.setMin(obj.min);
+        s.setLabels(obj.labels);
         return s;
     };
 
@@ -55,6 +57,10 @@ define([], function() {
         return this._label;
     };
 
+    Axis.prototype.getLabels = function() {
+        return this._labels;
+    };
+
     Axis.prototype.getMax = function() {
         return this._max;
     };
@@ -75,6 +81,20 @@ define([], function() {
         this._label = label || null;
     };
 
+    Axis.prototype.setLabels = function(labels) {
+        this._labels = labels || null;
+
+        // By default we set the grid according to the labels.
+        if (this._labels !== null
+                && this._stepSize === null
+                && (this._min === null || this._min === 0)
+                && this._max === null) {
+            this.setStepSize(1);
+            this.setMin(0);
+            this.setMax(labels.length - 1);
+        }
+    };
+
     Axis.prototype.setMax = function(max) {
         this._max = typeof max !== 'undefined' ? max : null;
     };

lib/amd/src/chart_output_chartjs.js

@@ -122,9 +122,17 @@ define([
         }.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);
+
+            if (axisLabels !== null) {
+                config.options.scales.yAxes[i].ticks.callback = function(value) {
+                    return axisLabels[parseInt(value, 10)] || '';
+                };
+            }
         }.bind(this));
 
         return config;

lib/classes/chart_axis.php

@@ -45,6 +45,7 @@ class chart_axis implements JsonSerializable {
     const POS_TOP = 'top';
 
     protected $label = null;
+    protected $labels = null;
     protected $max = null;
     protected $min = null;
     protected $position = self::POS_DEFAULT;
@@ -57,6 +58,10 @@ class chart_axis implements JsonSerializable {
         return $this->label;
     }
 
+    public function get_labels() {
+        return $this->labels;
+    }
+
     public function get_max() {
         return $this->max;
     }
@@ -76,6 +81,7 @@ class chart_axis implements JsonSerializable {
     public function jsonSerialize() {
         return [
             'label' => $this->label,
+            'labels' => $this->labels,
             'max' => $this->max,
             'min' => $this->min,
             'position' => $this->position,
@@ -87,6 +93,10 @@ class chart_axis implements JsonSerializable {
         return $this->label = $label;
     }
 
+    public function set_labels($labels) {
+        return $this->labels = $labels;
+    }
+
     public function set_max($max) {
         return $this->max = $max;
     }