MDL-55219 core: Add support for horizontal bars

Part of MDL-54987 epic.

lib/amd/build/chart_bar.min.js

@@ -1 +1 @@
-define(["core/chart_base"],function(a){function b(){a.prototype.constructor.apply(this,arguments)}return b.prototype=Object.create(a.prototype),b.prototype.TYPE="bar",b.prototype._setDefaults=function(){a.prototype._setDefaults.apply(this,arguments);var b=this.getYAxis(0,!0);b.setMin(0)},b});
+define(["core/chart_base"],function(a){function b(){a.prototype.constructor.apply(this,arguments)}return b.prototype=Object.create(a.prototype),b.prototype._horizontal=!1,b.prototype.TYPE="bar",b.prototype.create=function(b,c){var d=a.prototype.create.apply(this,arguments);return d.setHorizontal(c.horizontal),d},b.prototype._setDefaults=function(){a.prototype._setDefaults.apply(this,arguments);var b=this.getYAxis(0,!0);b.setMin(0)},b.prototype.getHorizontal=function(){return this._horizontal},b.prototype.setHorizontal=function(a){var b=this.getXAxis(0,!0);null===b.getMin()&&b.setMin(0),this._horizontal=Boolean(a)},b});

lib/amd/build/chart_output_chartjs.min.js

@@ -1 +1 @@
-define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base","core/chart_line","core/chart_pie","core/chart_series"],function(a,b,c,d,e,f,g){function h(){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 i=function(a,b){return"axis-"+a+"-"+b};return h.prototype=Object.create(d.prototype),h.prototype._config=null,h.prototype._chartjs=null,h.prototype._canvas=null,h.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},h.prototype._makeAxisConfig=function(a,b,d){var e={id:i(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},h.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},h.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()==f.prototype.TYPE?null:b,lineTension:this._isSmooth(a)?.3:0};return null!==a.getXAxis()&&(c.xAxisID=i("x",a.getXAxis())),null!==a.getYAxis()&&(c.yAxisID=i("y",a.getYAxis())),c}.bind(this));return a},h.prototype._isSmooth=function(a){var b=!1;return this._chart.getType()===e.prototype.TYPE?(b=a.getSmooth(),null===b&&(b=this._chart.getSmooth())):a.getType()===g.prototype.TYPE_LINE&&(b=a.getSmooth()),b},h.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},h});
+define(["jquery","core/chartjs","core/chart_axis","core/chart_bar","core/chart_output_base","core/chart_line","core/chart_pie","core/chart_series"],function(a,b,c,d,e,f,g,h){function i(){e.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 j=function(a,b){return"axis-"+a+"-"+b};return i.prototype=Object.create(e.prototype),i.prototype._config=null,i.prototype._chartjs=null,i.prototype._canvas=null,i.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},i.prototype._getChartType=function(){var a=this._chart.getType();return this._chart.getType()===d.prototype.TYPE&&this._chart.getHorizontal()===!0&&(a="horizontalBar"),a},i.prototype._makeAxisConfig=function(a,b,d){var e={id:j(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},i.prototype._makeConfig=function(){var a={type:this._getChartType(),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},i.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()==g.prototype.TYPE?null:b,lineTension:this._isSmooth(a)?.3:0};return null!==a.getXAxis()&&(c.xAxisID=j("x",a.getXAxis())),null!==a.getYAxis()&&(c.yAxisID=j("y",a.getYAxis())),c}.bind(this));return a},i.prototype._isSmooth=function(a){var b=!1;return this._chart.getType()===f.prototype.TYPE?(b=a.getSmooth(),null===b&&(b=this._chart.getSmooth())):a.getType()===h.prototype.TYPE_LINE&&(b=a.getSmooth()),b},i.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},i});

lib/amd/src/chart_bar.js

@@ -35,9 +35,24 @@ define(['core/chart_base'], function(Base) {
     }
     Bar.prototype = Object.create(Base.prototype);
 
+    /**
+     * Whether the bars should be displayed horizontally or not.
+     *
+     * @type {Bool}
+     * @protected
+     */
+    Bar.prototype._horizontal = false;
+
     /** @override */
     Bar.prototype.TYPE = 'bar';
 
+    /** @override */
+    Bar.prototype.create = function(Klass, data) {
+        var chart = Base.prototype.create.apply(this, arguments);
+        chart.setHorizontal(data.horizontal);
+        return chart;
+    };
+
     /** @override */
     Bar.prototype._setDefaults = function() {
         Base.prototype._setDefaults.apply(this, arguments);
@@ -45,6 +60,30 @@ define(['core/chart_base'], function(Base) {
         axis.setMin(0);
     };
 
+    /**
+     * Get whether the bars should be displayed horizontally or not.
+     *
+     * @returns {Bool}
+     */
+    Bar.prototype.getHorizontal = function() {
+        return this._horizontal;
+    };
+
+    /**
+     * Set whether the bars should be displayed horizontally or not.
+     *
+     * It sets the X Axis to zero if the min value is null.
+     *
+     * @param horizontal {Bool} True if the bars should be displayed horizontally, false otherwise.
+     */
+    Bar.prototype.setHorizontal = function(horizontal) {
+        var axis = this.getXAxis(0, true);
+        if (axis.getMin() === null) {
+            axis.setMin(0);
+        }
+        this._horizontal = Boolean(horizontal);
+    };
+
     return Bar;
 
 });

lib/amd/src/chart_output_chartjs.js

@@ -25,11 +25,12 @@ define([
     'jquery',
     'core/chartjs',
     'core/chart_axis',
+    'core/chart_bar',
     'core/chart_output_base',
     'core/chart_line',
     'core/chart_pie',
     'core/chart_series'
-], function($, Chartjs, Axis, Base, Line, Pie, Series) {
+], function($, Chartjs, Axis, Bar, Base, Line, Pie, Series) {
 
     /**
      * Makes an axis ID.
@@ -97,6 +98,26 @@ define([
         this._chartjs = new Chartjs(this._canvas[0], this._config);
     };
 
+    /**
+     * Get the chart type.
+     *
+     * It also handles the bar charts positioning, deciding if the bars should be displayed horizontally.
+     * Otherwise, get the chart TYPE value.
+     *
+     * @returns {String} the chart type.
+     * @protected
+     */
+    Output.prototype._getChartType = function() {
+        var type = this._chart.getType();
+
+        // Bars can be displayed vertically and horizontally, defining horizontalBar type.
+        if (this._chart.getType() === Bar.prototype.TYPE && this._chart.getHorizontal() === true) {
+            type = 'horizontalBar';
+        }
+
+        return type;
+    };
+
     /**
      * Make the axis config.
      *
@@ -149,7 +170,7 @@ define([
      */
     Output.prototype._makeConfig = function() {
         var config = {
-            type: this._chart.getType(),
+            type: this._getChartType(),
             data: {
                 labels: this._chart.getLabels(),
                 datasets: this._makeDatasetsConfig()

lib/classes/chart_bar.php

@@ -34,6 +34,20 @@ defined('MOODLE_INTERNAL') || die();
  */
 class chart_bar extends chart_base {
 
+    /** @var bool Whether the bars should be displayed horizontally or not. */
+    protected $horizontal = false;
+
+   /**
+    * Add the horizontal to the parent and return the serialized data.
+    *
+    * @return array
+    */
+    public function jsonSerialize() {
+        $data = parent::jsonSerialize();
+        $data['horizontal'] = $this->get_horizontal();
+        return $data;
+    }
+
     /**
      * Set the defaults.
      */
@@ -43,4 +57,21 @@ class chart_bar extends chart_base {
         $yaxis->set_min(0);
     }
 
+    /**
+     * Get whether the bars should be displayed horizontally or not.
+     *
+     * @return bool
+     */
+    public function get_horizontal() {
+        return $this->horizontal;
+    }
+
+    /**
+     * Get Set whether the bars should be displayed horizontally or not.
+     *
+     * @param bool $horizontal True if the bars should be displayed horizontally, false otherwise.
+     */
+    public function set_horizontal($horizontal) {
+        $this->horizontal = $horizontal;
+    }
 }