mirror of
https://github.com/moodle/moodle.git
synced 2025-01-19 14:27:22 +01:00
MDL-68386 libraries: Enhancement for Area Charts support with chart.js.
This commit is contained in:
David Thompson
parent
788dfb9c7d
commit
ab0d409991
2
lib/amd/build/chart_output_chartjs.min.js
vendored
2
lib/amd/build/chart_output_chartjs.min.js
vendored
@ -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:!1,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())}}};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
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
lib/amd/build/chart_series.min.js
vendored
2
lib/amd/build/chart_series.min.js
vendored
@ -1,2 +1,2 @@
|
||||
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_series",[],function(){function a(a,b){if("string"!=typeof a){throw new Error("Invalid label for series.")}else if("object"!==_typeof(b)){throw new Error("Values for a series must be an array.")}else if(1>b.length){throw new Error("Invalid values received for series.")}this._colors=[];this._label=a;this._values=b}a.prototype.TYPE_DEFAULT=null;a.prototype.TYPE_LINE="line";a.prototype._colors=null;a.prototype._label=null;a.prototype._labels=null;a.prototype._smooth=!1;a.prototype._type=a.prototype.TYPE_DEFAULT;a.prototype._values=null;a.prototype._xaxis=null;a.prototype._yaxis=null;a.prototype.create=function(b){var c=new a(b.label,b.values);c.setType(b.type);c.setXAxis(b.axes.x);c.setYAxis(b.axes.y);c.setLabels(b.labels);if(b.colors&&1<b.colors.length){c.setColors(b.colors)}else{c.setColor(b.colors[0])}c.setSmooth(b.smooth);return 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.getLabels=function(){return this._labels};a.prototype.getSmooth=function(){return this._smooth};a.prototype.getType=function(){return this._type};a.prototype.getValues=function(){return this._values};a.prototype.getXAxis=function(){return this._xaxis};a.prototype.getYAxis=function(){return this._yaxis};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.setLabels=function(a){this._validateLabels(a);a="undefined"==typeof a?null:a;this._labels=a};a.prototype.setSmooth=function(a){a="undefined"==typeof a?null:a;this._smooth=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.prototype.setXAxis=function(a){this._xaxis=a||null};a.prototype.setYAxis=function(a){this._yaxis=a||null};a.prototype._validateLabels=function(a){if(a&&0<a.length&&a.length!=this.getCount()){throw new Error("Series labels must match series values.")}};return a});
|
||||
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_series",[],function(){function a(a,b){if("string"!=typeof a){throw new Error("Invalid label for series.")}else if("object"!==_typeof(b)){throw new Error("Values for a series must be an array.")}else if(1>b.length){throw new Error("Invalid values received for series.")}this._colors=[];this._label=a;this._values=b}a.prototype.TYPE_DEFAULT=null;a.prototype.TYPE_LINE="line";a.prototype._colors=null;a.prototype._fill=!1;a.prototype._label=null;a.prototype._labels=null;a.prototype._smooth=!1;a.prototype._type=a.prototype.TYPE_DEFAULT;a.prototype._values=null;a.prototype._xaxis=null;a.prototype._yaxis=null;a.prototype.create=function(b){var c=new a(b.label,b.values);c.setType(b.type);c.setXAxis(b.axes.x);c.setYAxis(b.axes.y);c.setLabels(b.labels);if(b.colors&&1<b.colors.length){c.setColors(b.colors)}else{c.setColor(b.colors[0])}c.setFill(b.fill);c.setSmooth(b.smooth);return 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.getFill=function(){return this._fill};a.prototype.getLabel=function(){return this._label};a.prototype.getLabels=function(){return this._labels};a.prototype.getSmooth=function(){return this._smooth};a.prototype.getType=function(){return this._type};a.prototype.getValues=function(){return this._values};a.prototype.getXAxis=function(){return this._xaxis};a.prototype.getYAxis=function(){return this._yaxis};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.setFill=function(a){this._fill="undefined"==typeof a?null:a};a.prototype.setLabels=function(a){this._validateLabels(a);a="undefined"==typeof a?null:a;this._labels=a};a.prototype.setSmooth=function(a){a="undefined"==typeof a?null:a;this._smooth=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.prototype.setXAxis=function(a){this._xaxis=a||null};a.prototype.setYAxis=function(a){this._yaxis=a||null};a.prototype._validateLabels=function(a){if(a&&0<a.length&&a.length!=this.getCount()){throw new Error("Series labels must match series values.")}};return a});
|
||||
//# sourceMappingURL=chart_series.min.js.map
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -256,7 +256,7 @@ define([
|
||||
label: this._cleanData(series.getLabel()),
|
||||
data: series.getValues(),
|
||||
type: series.getType(),
|
||||
fill: false,
|
||||
fill: series.getFill(),
|
||||
backgroundColor: colors,
|
||||
// Pie charts look better without borders.
|
||||
borderColor: this._chart.getType() == Pie.prototype.TYPE ? '#fff' : colors,
|
||||
|
||||
@ -71,6 +71,14 @@ define([], function() {
|
||||
*/
|
||||
Series.prototype._colors = null;
|
||||
|
||||
/**
|
||||
* The fill mode of the series.
|
||||
*
|
||||
* @type {Object}
|
||||
* @protected
|
||||
*/
|
||||
Series.prototype._fill = false;
|
||||
|
||||
/**
|
||||
* The label of the series.
|
||||
*
|
||||
@ -149,6 +157,7 @@ define([], function() {
|
||||
s.setColor(obj.colors[0]);
|
||||
}
|
||||
|
||||
s.setFill(obj.fill);
|
||||
s.setSmooth(obj.smooth);
|
||||
return s;
|
||||
};
|
||||
@ -180,6 +189,15 @@ define([], function() {
|
||||
return this._values.length;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the fill mode of the series.
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
Series.prototype.getFill = function() {
|
||||
return this._fill;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the series label.
|
||||
*
|
||||
@ -273,6 +291,15 @@ define([], function() {
|
||||
this._colors = colors || [];
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the fill mode for the series.
|
||||
*
|
||||
* @param {Object} fill
|
||||
*/
|
||||
Series.prototype.setFill = function(fill) {
|
||||
this._fill = typeof fill === 'undefined' ? null : fill;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the labels for the values of the series.
|
||||
*
|
||||
|
||||
@ -44,6 +44,8 @@ class chart_series implements JsonSerializable {
|
||||
|
||||
/** @var string[] Colors of the series. */
|
||||
protected $colors = [];
|
||||
/** @var string Fill mode for area charts. See https://www.chartjs.org/docs/latest/charts/area.html */
|
||||
protected $fill = null;
|
||||
/** @var string Label for this series. */
|
||||
protected $label;
|
||||
/** @var string[] Labels for the values of the series. */
|
||||
@ -97,6 +99,13 @@ class chart_series implements JsonSerializable {
|
||||
return count($this->values);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get area fill mode for series.
|
||||
*/
|
||||
public function get_fill() {
|
||||
return $this->fill;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the label of the series.
|
||||
*
|
||||
@ -181,6 +190,7 @@ class chart_series implements JsonSerializable {
|
||||
'type' => $this->type,
|
||||
'values' => $this->values,
|
||||
'colors' => $this->colors,
|
||||
'fill' => $this->fill,
|
||||
'axes' => [
|
||||
'x' => $this->xaxis,
|
||||
'y' => $this->yaxis,
|
||||
@ -208,6 +218,14 @@ class chart_series implements JsonSerializable {
|
||||
$this->colors = $colors;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set fill mode for the series.
|
||||
* @param string $fill
|
||||
*/
|
||||
public function set_fill($fill) {
|
||||
$this->fill = $fill;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set labels for the values of the series.
|
||||
*
|
||||
|
||||
@ -90,6 +90,20 @@ $chart8->add_series($expensesline);
|
||||
$chart8->add_series($sales);
|
||||
$chart8->set_labels($labels);
|
||||
|
||||
$hills = new \core\chart_series('Hills', [700, 870, 660, 950]);
|
||||
$mountain = new \core\chart_series('Mountain', [400, 460, 1350, 540]);
|
||||
$sky = new \core\chart_series('Sky', [1400, 1500, 1550, 1500]);
|
||||
$chart9 = new \core\chart_line();
|
||||
$chart9->set_title('AREA FILL CHART');
|
||||
$chart9->add_series($hills);
|
||||
$chart9->add_series($mountain);
|
||||
$chart9->add_series($sky);
|
||||
$chart9->set_labels($labels);
|
||||
$hills->set_smooth(true);
|
||||
$hills->set_fill('origin');
|
||||
$mountain->set_fill('-1');
|
||||
$sky->set_fill('end');
|
||||
|
||||
echo $OUTPUT->render($chart);
|
||||
echo $OUTPUT->render($chart2);
|
||||
echo $OUTPUT->render($chart3);
|
||||
@ -98,4 +112,5 @@ echo $OUTPUT->render($chart5);
|
||||
echo $OUTPUT->render($chart6);
|
||||
echo $OUTPUT->render($chart7);
|
||||
echo $OUTPUT->render($chart8);
|
||||
echo $OUTPUT->render($chart9);
|
||||
echo $OUTPUT->footer();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user