← All changes | js/render-chartjs.js +36 -182 3.10.14 → 3.3.4 View file →

		@@ -46,10 +46,9 @@
46	46	case 'column':
47	47	type = 'bar';
48	48	break;
49	49	case 'bar':
50		- type = 'bar';
51		- settings.indexAxis = 'y';
	50	+ type = 'horizontalBar';
52	51	break;
53	52	case 'pie':
54	53	// donut is not a setting but a separate chart type.
55	54	if(typeof settings['custom'] !== 'undefined' && settings['custom']['donut'] === 'true'){
		@@ -64,9 +63,9 @@
64	63
65	64	for (i = 0; i < data.length; i++) {
66	65	row = [];
67	66	for (j = 0; j < series.length; j++) {
68		- if (series[j].type === 'date' || series[j].type === 'datetime') {
	67	+ if (series[j].type === 'date' || series[j].type === 'datetime') {
69	68	date = new Date(data[i][j]);
70	69	data[i][j] = null;
71	70	if (Object.prototype.toString.call(date) === "[object Date]") {
72	71	if (!isNaN(date.getTime())) {
		@@ -112,43 +111,8 @@
112	111	}
113	112
114	113	handleSettings(settings, chart);
115	114
116		- const getChart = Chart.getChart(context);
117		- if ( getChart ) {
118		- return;
119		- }
120		-
121		- // Format series label.
122		- settings.plugins.tooltip = {
123		- callbacks: {
124		- label: function(context) {
125		- var label = '';
126		- if ( 'object' === typeof context.dataset.label ) {
127		- label = context.label || '';
128		- } else {
129		- label = context.dataset.label || '';
130		- }
131		- if ( label ) {
132		- label += ': ';
133		- }
134		- var format = context.dataset.format || '';
135		- if ( format ) {
136		- var lastSuffix = numeral(context.formattedValue).format(format).replace(/[0-9]/g, '');
137		- label += context.formattedValue + lastSuffix;
138		- } else {
139		- format = 'undefined' !== typeof context.chart.config._config.options.format ? context.chart.config._config.options.format : '';
140		- if ( format ) {
141		- label += format_datum( context.formattedValue, format );
142		- } else {
143		- label += context.formattedValue;
144		- }
145		- }
146		- return label;
147		- }
148		- }
149		- };
150		-
151	115	var chartjs = new Chart(context, {
152	116	type: type,
153	117	data: {
154	118	labels: labels,
		@@ -153,17 +117,9 @@
153	117	data: {
154	118	labels: labels,
155	119	datasets: datasets
156	120	},
157		- options: settings,
158		- plugins: [{
159		- afterRender: function () {
160		- var canvas = $( 'canvas' )[0];
161		- if ( $( '#chart-img' ).length ) {
162		- $( '#chart-img' ).val( canvas.toDataURL() );
163		- }
164		- }
165		- }],
	121	+ options: settings
166	122	});
167	123
168	124	// this line needs to be included twice. This is not an error.
169	125	$.extend(settings, { responsive: true, maintainAspectRatio: false });
		@@ -170,18 +126,10 @@
170	126
171	127	// chart area
172	128	if(v.is_front == true){ // jshint ignore:line
173	129	$('#' + id).css('position', 'relative');
174		- var height = settings.height.indexOf('%') === -1 ? ( settings.height + 'px' ) : settings.height;
175		- var width = settings.width.indexOf('%') === -1 ? ( settings.width + 'px' ) : settings.width;
176		- if(settings.height){
177		- chartjs.canvas.parentNode.style.height = height;
178		- $('#' + id + ' canvas').css('height', height);
179		- }
180		- if(settings.width){
181		- chartjs.canvas.parentNode.style.width = width;
182		- $('#' + id + ' canvas').css('width', width);
183		- }
	130	+ chartjs.canvas.parentNode.style.height = settings.height;
	131	+ chartjs.canvas.parentNode.style.width = settings.width;
184	132	}
185	133
186	134	// allow user to extend the settings.
187	135	$('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings});
		@@ -208,14 +156,14 @@
208	156	settings['tooltip']['intersect'] = settings['tooltip']['intersect'] == true || parseInt(settings['tooltip']['intersect']) === 1; // jshint ignore:line
209	157	}
210	158
211	159	if(typeof settings['fontName'] !== 'undefined' && settings['fontName'] !== ''){
212		- Chart.defaults.font.family = settings['fontName'];
	160	+ Chart.defaults.global.defaultFontFamily = settings['fontName'];
213	161	delete settings['fontName'];
214	162	}
215	163
216	164	if(typeof settings['fontSize'] !== 'undefined' && settings['fontSize'] !== ''){
217		- Chart.defaults.font.size = parseInt(settings['fontSize']);
	165	+ Chart.defaults.global.defaultFontSize = settings['fontSize'];
218	166	delete settings['fontSize'];
219	167	}
220	168
221	169	// handle legend defaults.
		@@ -226,12 +174,8 @@
226	174	}
227	175	}
228	176	}
229	177
230		- settings.plugins = {
231		- legend: settings.legend,
232		- };
233		-
234	178	handleAxes(settings, chart);
235	179
236	180	override(settings, chart);
237	181	}
		@@ -239,27 +183,13 @@
239	183	function handleAxes(settings, chart){
240	184	if(typeof settings['yAxes'] !== 'undefined' && typeof settings['xAxes'] !== 'undefined'){
241	185	// stacking has to be defined on both axes.
242	186	if(typeof settings['yAxes']['stacked_bool'] !== 'undefined'){
243		- settings['yAxes']['stacked_bool'] = 'true';
	187	+ settings['xAxes']['stacked_bool'] = 'true';
244	188	}
245	189	if(typeof settings['xAxes']['stacked_bool'] !== 'undefined'){
246		- settings['xAxes']['stacked_bool'] = 'true';
	190	+ settings['yAxes']['stacked_bool'] = 'true';
247	191	}
248		- // Bar percentage.
249		- if (typeof settings['yAxes']['barPercentage_int'] !=='undefined' && ''!== settings['yAxes']['barPercentage_int']){
250		- settings['barPercentage'] = settings['yAxes']['barPercentage_int'];
251		- }
252		- if (typeof settings['xAxes']['barPercentage_int'] !=='undefined' && ''!== settings['xAxes']['barPercentage_int']){
253		- settings['barPercentage'] = settings['xAxes']['barPercentage_int'];
254		- }
255		- // Bar thickness.
256		- if (typeof settings['yAxes']['barThickness'] !=='undefined' && ''!== settings['yAxes']['barThickness']){
257		- settings['barThickness'] = settings['yAxes']['barThickness'];
258		- }
259		- if (typeof settings['xAxes']['barThickness'] !=='undefined' && ''!== settings['xAxes']['barThickness']){
260		- settings['barThickness'] = settings['xAxes']['barThickness'];
261		- }
262	192	}
263	193	configureAxes(settings, 'yAxes', chart);
264	194	configureAxes(settings, 'xAxes', chart);
265	195	}
		@@ -328,56 +258,8 @@
328	258	}
329	259	var $axis = $scales['scales'][axis];
330	260
331	261	$axis.push($features);
332		- // Migrate xAxes settings to v3.0+
333		- if ( $scales.scales && $scales.scales.xAxes ) {
334		- for (var x in $scales.scales.xAxes) {
335		- $scales.scales.x = {
336		- display: $scales.scales.xAxes[x].scaleLabel.display,
337		- title: {
338		- display:true,
339		- text: $scales.scales.xAxes[x].scaleLabel.labelString,
340		- color: $scales.scales.xAxes[x].scaleLabel.fontColor,
341		- font: {
342		- family: $scales.scales.xAxes[x].scaleLabel.fontFamily,
343		- size: $scales.scales.xAxes[x].scaleLabel.fontSize
344		- }
345		- },
346		- suggestedMax: $scales.scales.xAxes[x].ticks.suggestedMax || '',
347		- suggestedMin: $scales.scales.xAxes[x].ticks.suggestedMin || '',
348		- ticks: {
349		- maxTicksLimit: $scales.scales.xAxes[x].ticks.maxTicksLimit
350		- },
351		- stacked: $scales.scales.xAxes[x].stacked || false
352		- }
353		- }
354		- delete $scales.scales.xAxes;
355		- }
356		- // Migrate yAxes settings to v3.0+
357		- if ( $scales.scales && $scales.scales.yAxes ) {
358		- for (var y in $scales.scales.yAxes) {
359		- $scales.scales.y = {
360		- display: $scales.scales.yAxes[y].scaleLabel.display,
361		- title: {
362		- display:true,
363		- text: $scales.scales.yAxes[y].scaleLabel.labelString,
364		- color: $scales.scales.yAxes[y].scaleLabel.fontColor,
365		- font: {
366		- family: $scales.scales.yAxes[y].scaleLabel.fontFamily,
367		- size: $scales.scales.yAxes[y].scaleLabel.fontSize
368		- }
369		- },
370		- suggestedMax: $scales.scales.yAxes[y].ticks.suggestedMax || '',
371		- suggestedMin: $scales.scales.yAxes[y].ticks.suggestedMin || '',
372		- ticks: {
373		- maxTicksLimit: $scales.scales.yAxes[y].ticks.maxTicksLimit
374		- },
375		- stacked: $scales.scales.yAxes[y].stacked || false
376		- }
377		- }
378		- delete $scales.scales.yAxes;
379		- }
380	262	$.extend(settings, $scales);
381	263
382	264	// to prevent duplication, indicates that the axis has been set.
383	265	var $custom = {};
		@@ -387,24 +269,21 @@
387	269
388	270	// format the axes labels.
389	271	if(typeof settings[axis + '_format'] !== 'undefined' && settings[axis + '_format'] !== ''){
390	272	var format = settings[axis + '_format'];
391		- var isDateFormat = moment( moment().format( format ),format, true ).isValid();
392		- if ( ! isDateFormat ) {
393		- switch(axis){
394		- case 'xAxes':
395		- settings.scales.x.ticks.callback = function(value, index, values){
396		- return format_datum(value, format);
397		- };
398		- break;
399		- case 'yAxes':
400		- settings.scales.y.ticks.callback = function(value, index, values){
401		- return format_datum(value, format);
402		- };
403		- break;
404		- }
405		- delete settings[axis + '_format'];
406		- }
	273	+ switch(axis){
	274	+ case 'xAxes':
	275	+ settings.scales.xAxes[0].ticks.callback = function(value, index, values){
	276	+ return format_datum(value, format);
	277	+ };
	278	+ break;
	279	+ case 'yAxes':
	280	+ settings.scales.yAxes[0].ticks.callback = function(value, index, values){
	281	+ return format_datum(value, format);
	282	+ };
	283	+ break;
	284	+ }
	285	+ delete settings[axis + '_format'];
407	286	}
408	287	delete settings[axis];
409	288	}
410	289
		@@ -441,11 +320,8 @@
441	320	return;
442	321	}
443	322	for(var i in settings.series[j]){
444	323	var $attribute = {};
445		- if ( settings.series[j].backgroundColor == '' ) {
446		- delete settings.series[j].backgroundColor;
447		- }
448	324	$attribute[i] = settings.series[j][i];
449	325	$.extend($attributes, $attribute);
450	326	}
451	327	}
		@@ -467,9 +343,9 @@
467	343
468	344	switch(type) {
469	345	case 'number':
470	346	// numeral.js works on 0 instead of # so we just replace that in the ICU pattern set.
471		- format = format.replace(/#/g, '0').replace(/%/g, '');
	347	+ format = format.replace(/#/g, '0');
472	348	// we also replace all instance of '$' as that is more relevant for ticks.
473	349	if(removeDollar){
474	350	format = format.replace(/\$/g, '');
475	351	}
		@@ -486,13 +362,8 @@
486	362
487	363	function format_data(datum, j, settings, series){
488	364	j = j - 1;
489	365	var format = typeof settings.series !== 'undefined' && typeof settings.series[j] !== 'undefined' ? settings.series[j].format : '';
490		- if ( '' === format && typeof settings.yAxes_format !== 'undefined' ) {
491		- format = settings.yAxes_format;
492		- } else if ( '' === format && typeof settings.xAxes_format !== 'undefined' ) {
493		- format = settings.xAxes_format;
494		- }
495	366	return format_datum(datum, format, series[j + 1].type);
496	367	}
497	368
498	369	function override(settings, chart) {
		@@ -513,17 +384,19 @@
513	384	renderChart(id, v);
514	385	}
515	386	}
516	387
	388	+ if(typeof visualizer !== 'undefined'){
	389	+ // called while updating the chart.
	390	+ visualizer.update = function(){
	391	+ renderChart('canvas', visualizer);
	392	+ };
	393	+ }
	394	+
517	395	$('body').on('visualizer:render:chart:start', function(event, v){
518	396	all_charts = v.charts;
	397	+ render(v);
519	398
520		- if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
521		- renderChart(v.id, v);
522		- } else {
523		- render(v);
524		- }
525		-
526	399	// for some reason this needs to be introduced here for dynamic preview updates to work.
527	400	v.update = function(){
528	401	renderChart('canvas', v);
529	402	};
		@@ -533,40 +406,21 @@
533	406	$('body').on('visualizer:render:specificchart:start', function(event, v){
534	407	renderSpecificChart(v.id, v.chart, v.v);
535	408	});
536	409
537		- $('body').on('visualizer:render:currentchart:update', function(event, v){
538		- var data = v || event.detail;
539		- renderChart('canvas', data.visualizer);
540		- });
541		-
542	410	// front end actions
543		- // 'image' is also called from the library
544	411	$('body').on('visualizer:action:specificchart', function(event, v){
545		- var id = v.id;
546		- if(typeof rendered_charts[id] === 'undefined'){
547		- return;
548		- }
549		- var canvas = $('#' + id + ' canvas');
550	412	switch(v.action){
551	413	case 'print':
	414	+ var id = v.id;
	415	+ if(typeof rendered_charts[id] === 'undefined'){
	416	+ return;
	417	+ }
	418	+ var canvas = $('#' + id + ' canvas');
552	419	var win = window.open();
553	420	win.document.write("<br><img src='" + canvas[0].toDataURL() + "'/>");
554	421	win.document.close();
555	422	win.onload = function () { win.print(); setTimeout(win.close, 500); };
556		- break;
557		- case 'image':
558		- var img = canvas[0].toDataURL();
559		- if(img !== ''){
560		- var $a = $("<a>"); // jshint ignore:line
561		- $a.attr("href", img);
562		- $("body").append($a);
563		- $a.attr("download", v.dataObj.name);
564		- $a[0].click();
565		- $a.remove();
566		- }else{
567		- console.warn("No image generated");
568		- }
569	423	break;
570	424	}
571	425	});
572	426