MDL-55013 core: add support for title

Part of MDL-54987 epic.

lib/amd/build/chart_base.min.js

@@ -1 +1 @@
-define(["core/chart_series"],function(a){function b(){this._series=[],this._labels=[]}return b.prototype._series=null,b.prototype._labels=null,b.prototype.COLORSET=["red","green","blue","yellow","pink","orange"],b.prototype.TYPE=null,b.prototype.addSeries=function(a){this._validateSerie(a),this._series.push(a),null===a.getColor()&&a.setColor(b.prototype.COLORSET[this._series.length%b.prototype.COLORSET.length])},b.prototype.create=function(b,c){var d=new b;d.setLabels(c.labels);for(var e=0;e<c.series.length;e++)d.addSeries(a.prototype.create(c.series[e]));return d},b.prototype.getLabels=function(){return this._labels},b.prototype.getSeries=function(){return this._series},b.prototype.getType=function(){if(!this.TYPE)throw new Error("The TYPE property has not been set.");return this.TYPE},b.prototype.setLabels=function(a){if(a.length&&this._series.length&&this._series[0].length!=a.length)throw new Error("Series must match label values.");this._labels=a},b.prototype._validateSerie=function(a){if(this._series.length&&this._series[0].getCount()!=a.getCount())throw new Error("Series do not have an equal number of values.");if(this._labels.length&&this._labels.length!=a.getCount())throw new Error("Series must match label values.")},b});
+define(["core/chart_series"],function(a){function b(){this._series=[],this._labels=[]}return b.prototype._series=null,b.prototype._labels=null,b.prototype._title=null,b.prototype.COLORSET=["red","green","blue","yellow","pink","orange"],b.prototype.TYPE=null,b.prototype.addSeries=function(a){this._validateSerie(a),this._series.push(a),null===a.getColor()&&a.setColor(b.prototype.COLORSET[this._series.length%b.prototype.COLORSET.length])},b.prototype.create=function(b,c){var d=new b;d.setLabels(c.labels),d.setTitle(c.title);for(var e=0;e<c.series.length;e++)d.addSeries(a.prototype.create(c.series[e]));return d},b.prototype.getLabels=function(){return this._labels},b.prototype.getSeries=function(){return this._series},b.prototype.getTitle=function(){return this._title},b.prototype.getType=function(){if(!this.TYPE)throw new Error("The TYPE property has not been set.");return this.TYPE},b.prototype.setLabels=function(a){if(a.length&&this._series.length&&this._series[0].length!=a.length)throw new Error("Series must match label values.");this._labels=a},b.prototype.setTitle=function(a){this._title=a},b.prototype._validateSerie=function(a){if(this._series.length&&this._series[0].getCount()!=a.getCount())throw new Error("Series do not have an equal number of values.");if(this._labels.length&&this._labels.length!=a.getCount())throw new Error("Series must match label values.")},b});

lib/amd/build/chart_output_chartjs.min.js

@@ -1 +1 @@
-define(["jquery","core/chartjs","core/chart_output_base"],function(a,b,c){function d(){c.prototype.constructor.apply(this,arguments),this._build()}return d.prototype=Object.create(c.prototype),d.prototype._config=null,d.prototype._chartjs=null,d.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},d.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._node[0],this._config)},d.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this.getDatasets()},options:{}};return a},d.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},d});
+define(["jquery","core/chartjs","core/chart_output_base"],function(a,b,c){function d(){c.prototype.constructor.apply(this,arguments),this._build()}return d.prototype=Object.create(c.prototype),d.prototype._config=null,d.prototype._chartjs=null,d.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},d.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._node[0],this._config)},d.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 a},d.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},d});

lib/amd/src/chart_base.js

@@ -31,6 +31,7 @@ define(['core/chart_series'], function(Series) {
     }
     Base.prototype._series = null;
     Base.prototype._labels = null;
+    Base.prototype._title = null;
     Base.prototype.COLORSET = ['red', 'green', 'blue', 'yellow', 'pink', 'orange'];
     Base.prototype.TYPE = null;
 
@@ -49,6 +50,7 @@ define(['core/chart_series'], function(Series) {
         // to have a reference to the class in the sub classes, in PHP I'd do new self().
         var Chart = new Klass();
         Chart.setLabels(data.labels);
+        Chart.setTitle(data.title);
         for (var i = 0; i < data.series.length; i++) {
             Chart.addSeries(Series.prototype.create(data.series[i]));
         }
@@ -63,6 +65,10 @@ define(['core/chart_series'], function(Series) {
         return this._series;
     };
 
+    Base.prototype.getTitle = function() {
+        return this._title;
+    };
+
     Base.prototype.getType = function() {
         if (!this.TYPE) {
             throw new Error('The TYPE property has not been set.');
@@ -77,6 +83,10 @@ define(['core/chart_series'], function(Series) {
         this._labels = labels;
     };
 
+    Base.prototype.setTitle = function(title) {
+        this._title = title;
+    };
+
     Base.prototype._validateSerie = function(serie) {
         if (this._series.length && this._series[0].getCount() != serie.getCount()) {
             throw new Error('Series do not have an equal number of values.');

lib/amd/src/chart_output_chartjs.js

@@ -62,6 +62,10 @@ define(['jquery', 'core/chartjs', 'core/chart_output_base'], function($, Chartjs
                 datasets: this.getDatasets()
             },
             options: {
+                title: {
+                    display: this._chart.getTitle() !== null,
+                    text: this._chart.getTitle()
+                }
             }
         };
         return config;

lib/classes/chart_base.php

@@ -40,6 +40,7 @@ class chart_base implements JsonSerializable, renderable {
 
     protected $series = [];
     protected $labels = [];
+    protected $title = null;
 
     public function __construct() {
     }
@@ -52,7 +53,8 @@ class chart_base implements JsonSerializable, renderable {
         return [
             'type' => $this->get_type(),
             'series' => $this->series,
-            'labels' => $this->labels
+            'labels' => $this->labels,
+            'title' => $this->title
         ];
     }
 
@@ -64,6 +66,10 @@ class chart_base implements JsonSerializable, renderable {
         return $this->series;
     }
 
+    public function get_title() {
+        return $this->title;
+    }
+
     public function get_type() {
         $classname = get_class($this);
         return substr($classname, strpos($classname, '_') + 1);
@@ -73,4 +79,7 @@ class chart_base implements JsonSerializable, renderable {
         $this->labels = $labels;
     }
 
+    public function set_title($title) {
+        $this->title = $title;
+    }
 }