From ccaa2b347d2e8d04f7eb00ec4bbe29f69df33a51 Mon Sep 17 00:00:00 2001 From: Frederic Massart Date: Tue, 5 Jul 2016 18:29:18 +0800 Subject: [PATCH] MDL-55038 core: Support multiple colours in the same series Part of MDL-54987 epic. --- lib/amd/build/chart_output_chartjs.min.js | 2 +- lib/amd/build/chart_pie.min.js | 2 +- lib/amd/build/chart_series.min.js | 2 +- lib/amd/src/chart_output_chartjs.js | 11 +++-- lib/amd/src/chart_pie.js | 16 ++++++++ lib/amd/src/chart_series.js | 50 ++++++++++++++++++++--- lib/classes/chart_series.php | 41 +++++++++++++++---- 7 files changed, 104 insertions(+), 20 deletions(-) diff --git a/lib/amd/build/chart_output_chartjs.min.js b/lib/amd/build/chart_output_chartjs.min.js index 0acc1c9b459..a9dfb537558 100644 --- a/lib/amd/build/chart_output_chartjs.min.js +++ b/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(""),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._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._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)}.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._makeDatasetsConfig=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.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},e}); \ No newline at end of file +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(""),this._node.append(this._canvas)),this._build()}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){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},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)}.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},f.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor();return{label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,backgroundColor:b,borderColor:this._chart.getType()==e.prototype.TYPE?null:b}}.bind(this));return a},f.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},f}); \ No newline at end of file diff --git a/lib/amd/build/chart_pie.min.js b/lib/amd/build/chart_pie.min.js index ea900bdf22e..ff55da789a5 100644 --- a/lib/amd/build/chart_pie.min.js +++ b/lib/amd/build/chart_pie.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="pie",b.prototype._validateSerie=function(){if(this._series.length>=1)throw new Error("Pie charts only support one serie.");return a.prototype._validateSerie.apply(this,arguments)},b}); \ No newline at end of file +define(["core/chart_base"],function(a){function b(){a.prototype.constructor.apply(this,arguments)}return b.prototype=Object.create(a.prototype),b.prototype.TYPE="pie",b.prototype.addSeries=function(b){if(null===b.getColor()){for(var c=[],d=0;d=1)throw new Error("Pie charts only support one serie.");return a.prototype._validateSerie.apply(this,arguments)},b}); \ No newline at end of file diff --git a/lib/amd/build/chart_series.min.js b/lib/amd/build/chart_series.min.js index 5723224d57a..b74b9d967ba 100644 --- a/lib/amd/build/chart_series.min.js +++ b/lib/amd/build/chart_series.min.js @@ -1 +1 @@ -define([],function(){function a(a,b){if("string"!=typeof a)throw new Error("Invalid label for series.");if("object"!=typeof b)throw new Error("Values for a series must be an array.");if(b.length<1)throw new Error("Invalid values received for series.");this._label=a,this._values=b}return a.prototype.TYPE_DEFAULT=null,a.prototype.TYPE_LINE="line",a.prototype._color=null,a.prototype._label=null,a.prototype._type=a.prototype.TYPE_DEFAULT,a.prototype._values=null,a.prototype.create=function(b){var c=new a(b.label,b.values);return c.setColor(b.color),c.setType(b.type),c},a.prototype.getColor=function(){return this._color},a.prototype.getCount=function(){return this._values.length},a.prototype.getLabel=function(){return this._label},a.prototype.getType=function(){return this._type},a.prototype.getValues=function(){return this._values},a.prototype.setColor=function(a){this._color=a||null},a.prototype.setType=function(a){if(a!=this.TYPE_DEFAULT&&a!=this.TYPE_LINE)throw new Error("Invalid serie type.");this._type=a||null},a}); \ No newline at end of file +define([],function(){function a(a,b){if("string"!=typeof a)throw new Error("Invalid label for series.");if("object"!=typeof b)throw new Error("Values for a series must be an array.");if(b.length<1)throw new Error("Invalid values received for series.");this._colors=[],this._label=a,this._values=b}return a.prototype.TYPE_DEFAULT=null,a.prototype.TYPE_LINE="line",a.prototype._colors=null,a.prototype._label=null,a.prototype._type=a.prototype.TYPE_DEFAULT,a.prototype._values=null,a.prototype.create=function(b){var c=new a(b.label,b.values);return c.setType(b.type),b.colors&&b.colors.length>1?c.setColors(b.colors):c.setColor(b.colors[0]),c},a.prototype.getColor=function(){return this._colors[0]||null},a.prototype.getColors=function(){return this._colors},a.prototype.getCount=function(){return this._values.length},a.prototype.getLabel=function(){return this._label},a.prototype.getType=function(){return this._type},a.prototype.getValues=function(){return this._values},a.prototype.hasColoredValues=function(){return this._colors.length==this.getCount()},a.prototype.setColor=function(a){this._colors=[a]},a.prototype.setColors=function(a){if(a&&a.length!=this.getCount())throw new Error("When setting multiple colors there must be one per value.");this._colors=a||[]},a.prototype.setType=function(a){if(a!=this.TYPE_DEFAULT&&a!=this.TYPE_LINE)throw new Error("Invalid serie type.");this._type=a||null},a}); \ No newline at end of file diff --git a/lib/amd/src/chart_output_chartjs.js b/lib/amd/src/chart_output_chartjs.js index 775589a5150..faa9b3e82af 100644 --- a/lib/amd/src/chart_output_chartjs.js +++ b/lib/amd/src/chart_output_chartjs.js @@ -26,7 +26,8 @@ define([ 'core/chartjs', 'core/chart_axis', 'core/chart_output_base', -], function($, Chartjs, Axis, Base) { + 'core/chart_pie', +], function($, Chartjs, Axis, Base, Pie) { /** * Chart output for Chart.js. @@ -175,15 +176,17 @@ define([ */ Output.prototype._makeDatasetsConfig = function() { var sets = this._chart.getSeries().map(function(series) { + var colors = series.hasColoredValues() ? series.getColors() : series.getColor(); return { label: series.getLabel(), data: series.getValues(), type: series.getType(), fill: false, - borderColor: series.getColor(), - backgroundColor: series.getColor() + backgroundColor: colors, + // Pie charts look better without borders. + borderColor: this._chart.getType() == Pie.prototype.TYPE ? null : colors }; - }); + }.bind(this)); return sets; }; diff --git a/lib/amd/src/chart_pie.js b/lib/amd/src/chart_pie.js index 57756df9da2..7e73905f95f 100644 --- a/lib/amd/src/chart_pie.js +++ b/lib/amd/src/chart_pie.js @@ -38,6 +38,22 @@ define(['core/chart_base'], function(Base) { /** @override */ Pie.prototype.TYPE = 'pie'; + /** + * Overridden to add appropriate colors to the series. + * + * @override + */ + Pie.prototype.addSeries = function(series) { + if (series.getColor() === null) { + var colors = []; + for (var i = 0; i < series.getCount(); i++) { + colors.push(this.COLORSET[i % Base.prototype.COLORSET.length]); + } + series.setColors(colors); + } + return Base.prototype.addSeries.apply(this, arguments); + }; + /** * Validate a series. * diff --git a/lib/amd/src/chart_series.js b/lib/amd/src/chart_series.js index 73f827a335c..e6b3e246d2a 100644 --- a/lib/amd/src/chart_series.js +++ b/lib/amd/src/chart_series.js @@ -42,6 +42,7 @@ define([], function() { throw new Error('Invalid values received for series.'); } + this._colors = []; this._label = label; this._values = values; } @@ -63,12 +64,12 @@ define([], function() { Series.prototype.TYPE_LINE = 'line'; /** - * The color of the series. + * The colors of the series. * - * @type {String} + * @type {String[]} * @protected */ - Series.prototype._color = null; + Series.prototype._colors = null; /** * The label of the series. @@ -104,8 +105,15 @@ define([], function() { */ Series.prototype.create = function(obj) { var s = new Series(obj.label, obj.values); - s.setColor(obj.color); s.setType(obj.type); + + // Colors are exported as an array with 1, or n values. + if (obj.colors && obj.colors.length > 1) { + s.setColors(obj.colors); + } else { + s.setColor(obj.colors[0]); + } + return s; }; @@ -115,7 +123,16 @@ define([], function() { * @return {String} */ Series.prototype.getColor = function() { - return this._color; + return this._colors[0] || null; + }; + + /** + * Get the colors for each value in the series. + * + * @return {String[]} + */ + Series.prototype.getColors = function() { + return this._colors; }; /** @@ -154,13 +171,34 @@ define([], function() { return this._values; }; + /** + * Whether there is a color per value. + * + * @return {Bool} + */ + Series.prototype.hasColoredValues = function() { + return this._colors.length == this.getCount(); + }; + /** * Set the series color. * * @param {String} color A CSS-compatible color. */ Series.prototype.setColor = function(color) { - this._color = color || null; + this._colors = [color]; + }; + + /** + * Set a color for each value in the series. + * + * @param {String[]} colors CSS-compatible colors. + */ + Series.prototype.setColors = function(colors) { + if (colors && colors.length != this.getCount()) { + throw new Error('When setting multiple colors there must be one per value.'); + } + this._colors = colors || []; }; /** diff --git a/lib/classes/chart_series.php b/lib/classes/chart_series.php index 4ac93ef8d38..ae73b72de3a 100644 --- a/lib/classes/chart_series.php +++ b/lib/classes/chart_series.php @@ -42,8 +42,8 @@ class chart_series implements JsonSerializable { /** Series of type line. */ const TYPE_LINE = 'line'; - /** @var string Color of the series. */ - protected $color; + /** @var string[] Colors of the series. */ + protected $colors = []; /** @var string Label for this series. */ protected $label; /** @var string Type of the series. */ @@ -65,10 +65,19 @@ class chart_series implements JsonSerializable { /** * Get the color. * - * @return string + * @return string|null */ public function get_color() { - return $this->color; + return isset($this->color[0]) ? $this->color[0] : null; + } + + /** + * Get the colors for each value in the series. + * + * @return string[] + */ + public function get_colors() { + return $this->colors; } /** @@ -101,12 +110,21 @@ class chart_series implements JsonSerializable { /** * Get the values of the series. * - * @return [type] + * @return string[] */ public function get_values() { return $this->values; } + /** + * Whether there is a color per value. + * + * @return bool + */ + public function has_colored_values() { + return count($this->colors) == $this->get_count(); + } + /** * Serialize the object. * @@ -117,7 +135,7 @@ class chart_series implements JsonSerializable { 'label' => $this->label, 'type' => $this->type, 'values' => $this->values, - 'color' => $this->color, + 'colors' => $this->colors, ]; return $data; } @@ -128,7 +146,16 @@ class chart_series implements JsonSerializable { * @param string $color CSS compatible color. */ public function set_color($color) { - $this->color = $color; + $this->colors = [$color]; + } + + /** + * Set a color for each value in the series. + * + * @param string[] $colors CSS compatible colors. + */ + public function set_colors(array $colors) { + $this->colors = $colors; } /**