// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Chart output for chart.js.
*
* @copyright 2016 Frédéric Massart - FMCorz.net
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
* @module core/chart_output_chartjs
*/
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, Bar, Base, Line, Pie, Series) {
/**
* Makes an axis ID.
*
* @param {String} xy Accepts 'x' and 'y'.
* @param {Number} index The axis index.
* @return {String}
*/
var makeAxisId = function(xy, index) {
return 'axis-' + xy + '-' + index;
};
/**
* Chart output for Chart.js.
*
* @class
* @extends {module:core/chart_output_base}
*/
function Output() {
Base.prototype.constructor.apply(this, arguments);
// Make sure that we've got a canvas tag.
this._canvas = this._node;
if (this._canvas.prop('tagName') != 'CANVAS') {
this._canvas = $('<canvas>');
this._node.append(this._canvas);
}
this._build();
}
Output.prototype = Object.create(Base.prototype);
/**
* Reference to the chart config object.
*
* @type {Object}
* @protected
*/
Output.prototype._config = null;
/**
* Reference to the instance of chart.js.
*
* @type {Object}
* @protected
*/
Output.prototype._chartjs = null;
/**
* Reference to the canvas node.
*
* @type {Jquery}
* @protected
*/
Output.prototype._canvas = null;
/**
* Builds the config and the chart.
*
* @protected
*/
Output.prototype._build = function() {
this._config = this._makeConfig();
this._chartjs = new Chartjs(this._canvas[0], this._config);
};
/**
* Clean data.
*
* @param {(String|String[])} data A single string or an array of strings.
* @returns {(String|String[])}
* @protected
*/
Output.prototype._cleanData = function(data) {
if (data instanceof Array) {
return data.map(function(value) {
return $('<span>').html(value).text();
});
} else {
return $('<span>').html(data).text();
}
};
/**
* Get the chart type and handles the Chart.js specific chart types.
*
* By default returns the current chart TYPE value. Also does the handling of specific chart types, for example
* check if the bar chart should be horizontal and the pie chart should be displayed as a doughnut.
*
* @method getChartType
* @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';
} else if (this._chart.getType() === Pie.prototype.TYPE && this._chart.getDoughnut() === true) {
// Pie chart can be displayed as doughnut.
type = 'doughnut';
}
return type;
};
/**
* Make the axis config.
*
* @protected
* @param {module:core/chart_axis} axis The axis.
* @param {String} xy Accepts 'x' or 'y'.
* @param {Number} index The axis index.
* @return {Object} The axis config.
*/
Output.prototype._makeAxisConfig = function(axis, xy, index) {
var scaleData = {
id: makeAxisId(xy, index)
};
if (axis.getPosition() !== Axis.prototype.POS_DEFAULT) {
scaleData.position = axis.getPosition();
}
if (axis.getLabel() !== null) {
scaleData.title = {
display: true,
text: this._cleanData(axis.getLabel())
};
}
if (axis.getStepSize() !== null) {
scaleData.ticks = scaleData.ticks || {};
scaleData.ticks.stepSize = axis.getStepSize();
}
if (axis.getMax() !== null) {
scaleData.ticks = scaleData.ticks || {};
scaleData.ticks.max = axis.getMax();
}
if (axis.getMin() !== null) {
scaleData.ticks = scaleData.ticks || {};
scaleData.ticks.min = axis.getMin();
}
return scaleData;
};
/**
* Make the config config.
*
* @protected
* @return {Object} The axis config.
*/
Output.prototype._makeConfig = function() {
var charType = this._getChartType();
var config = {
type: charType,
data: {
labels: this._cleanData(this._chart.getLabels()),
datasets: this._makeDatasetsConfig()
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: this._chart.getTitle() !== null,
text: this._cleanData(this._chart.getTitle())
}
}
}
};
if (charType === 'horizontalBar') {
config.type = 'bar';
config.options.indexAxis = 'y';
}
var legendOptions = this._chart.getLegendOptions();
if (legendOptions) {
config.options.plugins.legend = legendOptions;
}
this._chart.getXAxes().forEach(function(axis, i) {
var axisLabels = axis.getLabels();
config.options.scales = config.options.scales || {};
config.options.scales.x = config.options.scales.x || {};
config.options.scales.x[i] = this._makeAxisConfig(axis, 'x', i);
if (axisLabels !== null) {
config.options.scales.x[i].ticks.callback = function(value, index) {
return axisLabels[index] || '';
};
}
config.options.scales.x.stacked = this._isStacked();
}.bind(this));
this._chart.getYAxes().forEach(function(axis, i) {
var axisLabels = axis.getLabels();
config.options.scales = config.options.scales || {};
config.options.scales.y = config.options.scales.yAxes || {};
config.options.scales.y[i] = this._makeAxisConfig(axis, 'y', i);
if (axisLabels !== null) {
config.options.scales.y[i].ticks.callback = function(value) {
return axisLabels[parseInt(value, 10)] || '';
};
}
config.options.scales.y.stacked = this._isStacked();
}.bind(this));
config.options.plugins.tooltip = {
callbacks: {
label: this._makeTooltip.bind(this)
}
};
return config;
};
/**
* Get the datasets configurations.
*
* @protected
* @return {Object[]}
*/
Output.prototype._makeDatasetsConfig = function() {
var sets = this._chart.getSeries().map(function(series) {
var colors = series.hasColoredValues() ? series.getColors() : series.getColor();
var dataset = {
label: this._cleanData(series.getLabel()),
data: series.getValues(),
type: series.getType(),
fill: series.getFill(),
backgroundColor: colors,
// Pie charts look better without borders.
borderColor: this._chart.getType() == Pie.prototype.TYPE ? '#fff' : colors,
tension: this._isSmooth(series) ? 0.3 : 0
};
if (series.getXAxis() !== null) {
dataset.xAxisID = makeAxisId('x', series.getXAxis());
}
if (series.getYAxis() !== null) {
dataset.yAxisID = makeAxisId('y', series.getYAxis());
}
return dataset;
}.bind(this));
return sets;
};
/**
* Get the chart data, add labels and rebuild the tooltip.
*
* @param {Object[]} tooltipItem The tooltip item object.
* @returns {Array}
* @protected
*/
Output.prototype._makeTooltip = function(tooltipItem) {
// Get series and chart data to rebuild the tooltip and add labels.
var series = this._chart.getSeries()[tooltipItem.datasetIndex];
var serieLabel = series.getLabel();
var chartData = tooltipItem.dataset.data;
var tooltipData = chartData[tooltipItem.dataIndex];
// Build default tooltip.
var tooltip = [];
// Pie and doughnut charts tooltip are different.
if (this._chart.getType() === Pie.prototype.TYPE) {
var chartLabels = this._cleanData(this._chart.getLabels());
tooltip.push(chartLabels[tooltipItem.dataIndex] + ' - ' + this._cleanData(serieLabel) + ': ' + tooltipData);
} else {
tooltip.push(this._cleanData(serieLabel) + ': ' + tooltipData);
}
return tooltip;
};
/**
* Verify if the chart line is smooth or not.
*
* @protected
* @param {module:core/chart_series} series The series.
* @returns {Bool}
*/
Output.prototype._isSmooth = function(series) {
var smooth = false;
if (this._chart.getType() === Line.prototype.TYPE) {
smooth = series.getSmooth();
if (smooth === null) {
smooth = this._chart.getSmooth();
}
} else if (series.getType() === Series.prototype.TYPE_LINE) {
smooth = series.getSmooth();
}
return smooth;
};
/**
* Verify if the bar chart is stacked or not.
*
* @protected
* @returns {Bool}
*/
Output.prototype._isStacked = function() {
var stacked = false;
// Stacking is (currently) only supported for bar charts.
if (this._chart.getType() === Bar.prototype.TYPE) {
stacked = this._chart.getStacked();
}
return stacked;
};
/** @override */
Output.prototype.update = function() {
$.extend(true, this._config, this._makeConfig());
this._chartjs.update();
};
return Output;
});