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