mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-13 04:22:07 +02:00
Code Issues Projects Releases Wiki Activity

MDL-68477 libraries: support for Chart.js legend options.

Browse Source
This commit is contained in:
David Thompson 2020-04-21 08:48:39 +12:00 committed by Simey Lameze
parent ab0d409991
commit 5bc86614a2
7 changed files with 67 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/amd/build/chart_base.min.js vendored
View File

@ -1,2 +1,2 @@
define ("core/chart_base",["core/chart_series","core/chart_axis"],function(a,b){function c(){this._series=[];this._labels=[];this._xaxes=[];this._yaxes=[];this._setDefaults()}c.prototype._series=null;c.prototype._labels=null;c.prototype._title=null;c.prototype._xaxes=null;c.prototype._yaxes=null;c.prototype.COLORSET=["#f3c300","#875692","#f38400","#a1caf1","#be0032","#c2b280","#7f180d","#008856","#e68fac","#0067a5"];c.prototype._configColorSet=null;c.prototype.TYPE=null;c.prototype.addSeries=function(a){this._validateSeries(a);this._series.push(a);if(null===a.getColor()){var b=this.getConfigColorSet()||c.prototype.COLORSET;a.setColor(b[this._series.length%b.length])}};c.prototype.create=function(c,d){var e=new c;e.setConfigColorSet(d.config_colorset);e.setLabels(d.labels);e.setTitle(d.title);d.series.forEach(function(b){e.addSeries(a.prototype.create(b))});d.axes.x.forEach(function(a,c){e.setXAxis(b.prototype.create(a),c)});d.axes.y.forEach(function(a,c){e.setYAxis(b.prototype.create(a),c)});return e};c.prototype.__getAxis=function(a,c,d){var e="x"===a?this._xaxes:this._yaxes,f=("x"===a?this.setXAxis:this.setYAxis).bind(this),g;c="undefined"==typeof c?0:c;d="undefined"==typeof d?!1:d;g=e[c];if("undefined"==typeof g){if(!d){throw new Error("Unknown axis.")}g=new b;f(g,c)}return g};c.prototype.getConfigColorSet=function(){return this._configColorSet};c.prototype.getLabels=function(){return this._labels};c.prototype.getSeries=function(){return this._series};c.prototype.getTitle=function(){return this._title};c.prototype.getType=function(){if(!this.TYPE){throw new Error("The TYPE property has not been set.")}return this.TYPE};c.prototype.getXAxes=function(){return this._xaxes};c.prototype.getXAxis=function(a,b){return this.__getAxis("x",a,b)};c.prototype.getYAxes=function(){return this._yaxes};c.prototype.getYAxis=function(a,b){return this.__getAxis("y",a,b)};c.prototype.setConfigColorSet=function(a){this._configColorSet=a};c.prototype._setDefaults=function(){};c.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};c.prototype.setTitle=function(a){this._title=a};c.prototype.setXAxis=function(a,b){b="undefined"==typeof b?0:b;this._validateAxis("x",a,b);this._xaxes[b]=a};c.prototype.setYAxis=function(a,b){b="undefined"==typeof b?0:b;this._validateAxis("y",a,b);this._yaxes[b]=a};c.prototype._validateAxis=function(a,b,c){c="undefined"==typeof c?0:c;if(0<c){var d="x"==a?this._xaxes:this._yaxes;if("undefined"==typeof d[c-1]){throw new Error("Missing "+a+" axis at index lower than "+c)}}};c.prototype._validateSeries=function(a){if(this._series.length&&this._series[0].getCount()!=a.getCount()){throw new Error("Series do not have an equal number of values.")}else if(this._labels.length&&this._labels.length!=a.getCount()){throw new Error("Series must match label values.")}};return c});
function _typeof(a){if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){_typeof=function(a){return typeof a}}else{_typeof=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return _typeof(a)}define ("core/chart_base",["core/chart_series","core/chart_axis"],function(a,b){function c(){this._series=[];this._labels=[];this._xaxes=[];this._yaxes=[];this._setDefaults()}c.prototype._series=null;c.prototype._labels=null;c.prototype._legendOptions=null;c.prototype._title=null;c.prototype._xaxes=null;c.prototype._yaxes=null;c.prototype.COLORSET=["#f3c300","#875692","#f38400","#a1caf1","#be0032","#c2b280","#7f180d","#008856","#e68fac","#0067a5"];c.prototype._configColorSet=null;c.prototype.TYPE=null;c.prototype.addSeries=function(a){this._validateSeries(a);this._series.push(a);if(null===a.getColor()){var b=this.getConfigColorSet()||c.prototype.COLORSET;a.setColor(b[this._series.length%b.length])}};c.prototype.create=function(c,d){var e=new c;e.setConfigColorSet(d.config_colorset);e.setLabels(d.labels);e.setTitle(d.title);if(d.legend_options){e.setLegendOptions(d.legend_options)}d.series.forEach(function(b){e.addSeries(a.prototype.create(b))});d.axes.x.forEach(function(a,c){e.setXAxis(b.prototype.create(a),c)});d.axes.y.forEach(function(a,c){e.setYAxis(b.prototype.create(a),c)});return e};c.prototype.__getAxis=function(a,c,d){var e="x"===a?this._xaxes:this._yaxes,f=("x"===a?this.setXAxis:this.setYAxis).bind(this),g;c="undefined"==typeof c?0:c;d="undefined"==typeof d?!1:d;g=e[c];if("undefined"==typeof g){if(!d){throw new Error("Unknown axis.")}g=new b;f(g,c)}return g};c.prototype.getConfigColorSet=function(){return this._configColorSet};c.prototype.getLabels=function(){return this._labels};c.prototype.getLegendOptions=function(){return this._legendOptions};c.prototype.getSeries=function(){return this._series};c.prototype.getTitle=function(){return this._title};c.prototype.getType=function(){if(!this.TYPE){throw new Error("The TYPE property has not been set.")}return this.TYPE};c.prototype.getXAxes=function(){return this._xaxes};c.prototype.getXAxis=function(a,b){return this.__getAxis("x",a,b)};c.prototype.getYAxes=function(){return this._yaxes};c.prototype.getYAxis=function(a,b){return this.__getAxis("y",a,b)};c.prototype.setConfigColorSet=function(a){this._configColorSet=a};c.prototype._setDefaults=function(){};c.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};c.prototype.setLegendOptions=function(a){if("object"!==_typeof(a)){throw new Error("Setting legend with non-object value:"+a)}this._legendOptions=a};c.prototype.setTitle=function(a){this._title=a};c.prototype.setXAxis=function(a,b){b="undefined"==typeof b?0:b;this._validateAxis("x",a,b);this._xaxes[b]=a};c.prototype.setYAxis=function(a,b){b="undefined"==typeof b?0:b;this._validateAxis("y",a,b);this._yaxes[b]=a};c.prototype._validateAxis=function(a,b,c){c="undefined"==typeof c?0:c;if(0<c){var d="x"==a?this._xaxes:this._yaxes;if("undefined"==typeof d[c-1]){throw new Error("Missing "+a+" axis at index lower than "+c)}}};c.prototype._validateSeries=function(a){if(this._series.length&&this._series[0].getCount()!=a.getCount()){throw new Error("Series do not have an equal number of values.")}else if(this._labels.length&&this._labels.length!=a.getCount()){throw new Error("Series must match label values.")}};return c});
//# sourceMappingURL=chart_base.min.js.map

2
lib/amd/build/chart_base.min.js.map
View File

File diff suppressed because one or more lines are too long

2
lib/amd/build/chart_output_chartjs.min.js vendored
View File

@ -1,2 +1,2 @@
define ("core/chart_output_chartjs",["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){var j=function(a,b){return"axis-"+a+"-"+b};function i(){e.prototype.constructor.apply(this,arguments);this._canvas=this._node;if("CANVAS"!=this._canvas.prop("tagName")){this._canvas=a("<canvas>");this._node.append(this._canvas)}this._build()}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._cleanData=function(b){if(b instanceof Array){return b.map(function(b){return a("<span>").html(b).text()})}else{return a("<span>").html(b).text()}};i.prototype._getChartType=function(){var a=this._chart.getType();if(this._chart.getType()===d.prototype.TYPE&&!0===this._chart.getHorizontal()){a="horizontalBar"}else if(this._chart.getType()===g.prototype.TYPE&&!0===this._chart.getDoughnut()){a="doughnut"}return a};i.prototype._makeAxisConfig=function(a,b,d){var e={id:j(b,d)};if(a.getPosition()!==c.prototype.POS_DEFAULT){e.position=a.getPosition()}if(null!==a.getLabel()){e.scaleLabel={display:!0,labelString:this._cleanData(a.getLabel())}}if(null!==a.getStepSize()){e.ticks=e.ticks||{};e.ticks.stepSize=a.getStepSize()}if(null!==a.getMax()){e.ticks=e.ticks||{};e.ticks.max=a.getMax()}if(null!==a.getMin()){e.ticks=e.ticks||{};e.ticks.min=a.getMin()}return e};i.prototype._makeConfig=function(){var a={type:this._getChartType(),data:{labels:this._cleanData(this._chart.getLabels()),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._cleanData(this._chart.getTitle())}}};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);if(null!==d){a.options.scales.xAxes[c].ticks.callback=function(a,b){return d[b]||""}}a.options.scales.xAxes[c].stacked=this._isStacked()}.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);if(null!==d){a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""}}a.options.scales.yAxes[c].stacked=this._isStacked()}.bind(this));a.options.tooltips={callbacks:{label:this._makeTooltip.bind(this)}};return a};i.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor(),c={label:this._cleanData(a.getLabel()),data:a.getValues(),type:a.getType(),fill:a.getFill(),backgroundColor:b,borderColor:this._chart.getType()==g.prototype.TYPE?"#fff":b,lineTension:this._isSmooth(a)?.3:0};if(null!==a.getXAxis()){c.xAxisID=j("x",a.getXAxis())}if(null!==a.getYAxis()){c.yAxisID=j("y",a.getYAxis())}return c}.bind(this));return a};i.prototype._makeTooltip=function(a,b){var c=this._chart.getSeries()[a.datasetIndex],d=c.getLabel(),e=c.getLabels(),f=b.datasets[a.datasetIndex].data,g=f[a.index],h=[];if(""==a.xLabel&&""==a.yLabel){var i=this._cleanData(this._chart.getLabels());h.push(i[a.index])}if(null!==e){h.push(this._cleanData(e[a.index]))}else{h.push(this._cleanData(d)+": "+g)}return h};i.prototype._isSmooth=function(a){var b=!1;if(this._chart.getType()===f.prototype.TYPE){b=a.getSmooth();if(null===b){b=this._chart.getSmooth()}}else if(a.getType()===h.prototype.TYPE_LINE){b=a.getSmooth()}return b};i.prototype._isStacked=function(){var a=!1;if(this._chart.getType()===d.prototype.TYPE){a=this._chart.getStacked()}return a};i.prototype.update=function(){a.extend(!0,this._config,this._makeConfig());this._chartjs.update()};return i});
define ("core/chart_output_chartjs",["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){var j=function(a,b){return"axis-"+a+"-"+b};function i(){e.prototype.constructor.apply(this,arguments);this._canvas=this._node;if("CANVAS"!=this._canvas.prop("tagName")){this._canvas=a("<canvas>");this._node.append(this._canvas)}this._build()}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._cleanData=function(b){if(b instanceof Array){return b.map(function(b){return a("<span>").html(b).text()})}else{return a("<span>").html(b).text()}};i.prototype._getChartType=function(){var a=this._chart.getType();if(this._chart.getType()===d.prototype.TYPE&&!0===this._chart.getHorizontal()){a="horizontalBar"}else if(this._chart.getType()===g.prototype.TYPE&&!0===this._chart.getDoughnut()){a="doughnut"}return a};i.prototype._makeAxisConfig=function(a,b,d){var e={id:j(b,d)};if(a.getPosition()!==c.prototype.POS_DEFAULT){e.position=a.getPosition()}if(null!==a.getLabel()){e.scaleLabel={display:!0,labelString:this._cleanData(a.getLabel())}}if(null!==a.getStepSize()){e.ticks=e.ticks||{};e.ticks.stepSize=a.getStepSize()}if(null!==a.getMax()){e.ticks=e.ticks||{};e.ticks.max=a.getMax()}if(null!==a.getMin()){e.ticks=e.ticks||{};e.ticks.min=a.getMin()}return e};i.prototype._makeConfig=function(){var a={type:this._getChartType(),data:{labels:this._cleanData(this._chart.getLabels()),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._cleanData(this._chart.getTitle())}}},b=this._chart.getLegendOptions();if(b){a.options.legend=b}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);if(null!==d){a.options.scales.xAxes[c].ticks.callback=function(a,b){return d[b]||""}}a.options.scales.xAxes[c].stacked=this._isStacked()}.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);if(null!==d){a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""}}a.options.scales.yAxes[c].stacked=this._isStacked()}.bind(this));a.options.tooltips={callbacks:{label:this._makeTooltip.bind(this)}};return a};i.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor(),c={label:this._cleanData(a.getLabel()),data:a.getValues(),type:a.getType(),fill:a.getFill(),backgroundColor:b,borderColor:this._chart.getType()==g.prototype.TYPE?"#fff":b,lineTension:this._isSmooth(a)?.3:0};if(null!==a.getXAxis()){c.xAxisID=j("x",a.getXAxis())}if(null!==a.getYAxis()){c.yAxisID=j("y",a.getYAxis())}return c}.bind(this));return a};i.prototype._makeTooltip=function(a,b){var c=this._chart.getSeries()[a.datasetIndex],d=c.getLabel(),e=c.getLabels(),f=b.datasets[a.datasetIndex].data,g=f[a.index],h=[];if(""==a.xLabel&&""==a.yLabel){var i=this._cleanData(this._chart.getLabels());h.push(i[a.index])}if(null!==e){h.push(this._cleanData(e[a.index]))}else{h.push(this._cleanData(d)+": "+g)}return h};i.prototype._isSmooth=function(a){var b=!1;if(this._chart.getType()===f.prototype.TYPE){b=a.getSmooth();if(null===b){b=this._chart.getSmooth()}}else if(a.getType()===h.prototype.TYPE_LINE){b=a.getSmooth()}return b};i.prototype._isStacked=function(){var a=!1;if(this._chart.getType()===d.prototype.TYPE){a=this._chart.getStacked()}return a};i.prototype.update=function(){a.extend(!0,this._config,this._makeConfig());this._chartjs.update()};return i});
//# sourceMappingURL=chart_output_chartjs.min.js.map

2
lib/amd/build/chart_output_chartjs.min.js.map
View File

File diff suppressed because one or more lines are too long

32
lib/amd/src/chart_base.js
View File

@ -58,6 +58,14 @@ define(['core/chart_series', 'core/chart_axis'], function(Series, Axis) {
*/
Base.prototype._labels = null;
/**
* Options for chart legend display.
*
* @protected
* @type {Object}
*/
Base.prototype._legendOptions = null;
/**
* The title of the chart.
*
@ -144,6 +152,9 @@ define(['core/chart_series', 'core/chart_axis'], function(Series, Axis) {
Chart.setConfigColorSet(data.config_colorset);
Chart.setLabels(data.labels);
Chart.setTitle(data.title);
if (data.legend_options) {
Chart.setLegendOptions(data.legend_options);
}
data.series.forEach(function(seriesData) {
Chart.addSeries(Series.prototype.create(seriesData));
});
@ -203,6 +214,15 @@ define(['core/chart_series', 'core/chart_axis'], function(Series, Axis) {
return this._labels;
};
/**
* Get whether to display the chart legend.
*
* @return {Bool}
*/
Base.prototype.getLegendOptions = function() {
return this._legendOptions;
};
/**
* Get the series.
*
@ -312,6 +332,18 @@ define(['core/chart_series', 'core/chart_axis'], function(Series, Axis) {
this._labels = labels;
};
/**
* Set options for chart legend display.
*
* @param {Object} legendOptions
*/
Base.prototype.setLegendOptions = function(legendOptions) {
if (typeof legendOptions !== 'object') {
throw new Error('Setting legend with non-object value:' + legendOptions);
}
this._legendOptions = legendOptions;
};
/**
* Set the title of the chart.
*

5
lib/amd/src/chart_output_chartjs.js
View File

@ -203,6 +203,11 @@ define([
}
}
};
var legendOptions = this._chart.getLegendOptions();
if (legendOptions) {
config.options.legend = legendOptions;
}
this._chart.getXAxes().forEach(function(axis, i) {
var axisLabels = axis.getLabels();

26
lib/classes/chart_base.php
View File

@ -48,6 +48,8 @@ class chart_base implements JsonSerializable, renderable {
protected $xaxes = [];
/** @var chart_axis[] The Y axes. */
protected $yaxes = [];
/** @var array Options for the chart legend. */
protected $legendoptions = [];
/**
* Constructor.
@ -86,6 +88,7 @@ class chart_base implements JsonSerializable, renderable {
'x' => $this->xaxes,
'y' => $this->yaxes,
],
'legend_options' => !empty($this->legendoptions) ? $this->legendoptions : null,
'config_colorset' => !empty($CFG->chart_colorset) ? $CFG->chart_colorset : null
];
}
@ -131,6 +134,15 @@ class chart_base implements JsonSerializable, renderable {
return $this->labels;
}
/**
* Get an array of options for the chart legend.
*
* @return array
*/
public function get_legend_options() {
return $this->legendoptions;
}
/**
* Get the series.
*
@ -221,6 +233,20 @@ class chart_base implements JsonSerializable, renderable {
$this->labels = $labels;
}
/**
* Set options for the chart legend.
* See https://www.chartjs.org/docs/2.7.0/configuration/legend.html for options.
*
* Note: Setting onClick and onHover events is not directly supported through
* this method. These config options must be set directly within Javascript
* on the page.
*
* @param array $legendoptions Whether or not to display the chart's legend.
*/
public function set_legend_options(array $legendoptions) {
$this->legendoptions = $legendoptions;
}
/**
* Set the title.
*