← All changes | js/render-google.js +43 -268 4.0.8 → 3.4.2 View file →

		@@ -3,10 +3,8 @@
3	3	/* global console */
4	4
5	5	// this will store the images for each chart rendered.
6	6	var __visualizer_chart_images = [];
7		-var chartWrapperError = [];
8		-var isResizeRequest = false;
9	7
10	8	(function($) {
11	9	var gv;
12	10	var all_charts, objects;
		@@ -13,61 +11,17 @@
13	11	// so that we know which charts belong to our library.
14	12	var rendered_charts = [];
15	13
16	14	function renderChart(id) {
17		-
18		- if ( ! all_charts || 0 === Object.keys( all_charts ).length ) {
19		- return;
20		- }
21		-
22		- var chart = all_charts[id];
23		- var hasAnnotation = false;
24		-
25		- if ( ! chart ) {
26		- return;
27		- }
28		-
29		- if ( chart.library && chart.library !== 'google' && chart.library !== 'GoogleCharts' ) {
30		- return;
31		- }
32		-
33		- // re-render the chart only if it doesn't have annotations and it is on the front-end
34		- // this is to prevent the chart from showing "All series on a given axis must be of the same data type" during resize.
35		- // remember, some charts do not support annotations so they should not be included in this.
36		- var no_annotation_charts = ['tabular', 'timeline', 'gauge', 'geo', 'bubble', 'candlestick'];
37		- if ( undefined !== chart.settings && undefined !== chart.settings.series && undefined === chart.settings.series.length ) {
38		- var seriesKeys = Object.keys( chart.settings.series );
39		- // Only convert when keys are numeric indices (PHP JSON-encoded array).
40		- // String keys (e.g. named series from manual config) must be left as-is.
41		- if ( seriesKeys.every( function( k ) { return ! isNaN( k ); } ) ) {
42		- var chartSeries = [];
43		- var chartSeriesValue = Object.values( chart.settings.series );
44		- $.each( seriesKeys, function( index, element ) {
45		- chartSeries[ element ] = chartSeriesValue[ index ];
46		- } );
47		- chart.settings.series = chartSeries;
48		- }
49		- }
50		- if(id !== 'canvas' && typeof chart.series !== 'undefined' && typeof chart.settings.series !== 'undefined' && ! no_annotation_charts.includes(chart.type) ) {
51		- hasAnnotation = chart.series.length - chart.settings.series.length > 1;
52		- }
53		-
54		- if(! hasAnnotation){
55		- renderSpecificChart(id, all_charts[id]);
56		- }
	15	+ renderSpecificChart(id, all_charts[id]);
57	16	}
58	17
59	18	function renderSpecificChart(id, chart) {
60	19	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter;
61	20
62		- if( chart.library !== 'google' ) {
	21	+ if(chart.library !== 'google'){
63	22	return;
64	23	}
65		-
66		- // Bail if the chart is already rendered or is being rendered.
67		- if ( ! window.isResizeRequest && ( $('#' + id).hasClass('visualizer-chart-loaded') || ( 'canvas' !== id && $('#' + id).children( ':not(.loader, style)' ).length > 0 ) ) ) {
68		- return;
69		- }
70	24	rendered_charts[id] = 'yes';
71	25
72	26	series = chart.series;
73	27	data = chart.data;
		@@ -81,11 +35,8 @@
81	35
82	36	render = objects[id] || null;
83	37	if (!render) {
84	38	switch (chart.type) {
85		- case "tabular":
86		- render = "Table";
87		- break;
88	39	case "gauge":
89	40	case "table":
90	41	case "timeline":
91	42	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1);
		@@ -94,43 +45,9 @@
94	45	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1) + 'Chart';
95	46	break;
96	47	}
97	48
98		- var controlWrapperElement = document.getElementById( "control_wrapper_" + id ) || null;
99		- var withControlMode = ( typeof settings.controls !== 'undefined' && '' !== settings.controls.controlType ) && controlWrapperElement ? true : false;
100		-
101		- if ( $( controlWrapperElement ).hasClass( 'no-filter' ) ) {
102		- withControlMode = false;
103		- }
104		- if ( withControlMode ) {
105		- // Chart wrapper.
106		- render = new gv.ChartWrapper({
107		- 'chartType': render,
108		- 'containerId': id,
109		- });
110		- // Chart dashboard wrapper.
111		- var chartWrapperElement = document.getElementById( "chart_wrapper_" + id ) || null;
112		- var chartWrapper = new gv.Dashboard( chartWrapperElement );
113		-
114		- // Error Handler.
115		- gv.events.addListener(chartWrapper, 'error', function ( err ) {
116		- if ( chartWrapperError.length === 0 ) {
117		- chartWrapperError.push( err );
118		- gv.errors.removeError( err.id );
119		- var chartContainer = $( chartWrapperElement ).find( '.visualizer-front' );
120		- if ( chartContainer && chartContainer.is(':visible')) {
121		- if (chartContainer.parents('div').next( '#sidebar' ).length === 0) {
122		- chartContainer.addClass( 'visualizer-chart-loaded' ).addClass( 'visualizer-cw-error' );
123		- $( chartWrapperElement ).addClass( 'visualizer-cw-error' );
124		- }
125		- }
126		- } else {
127		- gv.errors.removeError( err.id );
128		- }
129		- } );
130		- } else {
131		- render = new gv[render](container);
132		- }
	49	+ render = new gv[render](container);
133	50	}
134	51
135	52	if (settings['animation'] && parseInt(settings['animation']['startup']) === 1)
136	53	{
		@@ -136,13 +53,8 @@
136	53	{
137	54	settings['animation']['startup'] = true;
138	55	settings['animation']['duration'] = parseInt(settings['animation']['duration']);
139	56	}
140		- if ( settings['controls'] ) {
141		- settings['controls']['ui']['allowMultiple'] = 'true' === settings['controls']['allowMultiple'] ? true : false;
142		- settings['controls']['ui']['allowTyping'] = 'true' === settings['controls']['allowTyping'] ? true : false;
143		- settings['controls']['ui']['showRangeValues'] = 'true' === settings['controls']['showRangeValues'] ? true : false;
144		- }
145	57
146	58	// mark roles for series that have specified a role
147	59	// and then remove them from future processing
148	60	// and also adjust the indices of the series array so that
		@@ -148,11 +60,8 @@
148	60	// and also adjust the indices of the series array so that
149	61	// the ones with a role are ignored
150	62	// e.g. if there are 6 columns (0-5) out of which 1, 3 and 5 are annotations
151	63	// the final series will only include 0, 2, 4 (reindexed as 0, 1, 2)
152		-
153		- // this will capture all the series indexes that became annotations.
154		- var series_annotations = [];
155	64	if (settings.series) {
156	65	var adjusted_series = [];
157	66	for (i = 0; i < settings.series.length; i++) {
158	67	if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
		@@ -161,10 +70,8 @@
161	70	if(typeof settings.series[i].role !== 'undefined'){
162	71	table.setColumnProperty(i + 1, 'role', settings.series[i].role);
163	72	if(settings.series[i].role === '') {
164	73	adjusted_series.push(settings.series[i]);
165		- }else{
166		- series_annotations.push(i);
167	74	}
168	75	}
169	76	}
170	77	if(adjusted_series.length > 0){
		@@ -216,9 +123,8 @@
216	123	settings['region'] = 'world';
217	124	}
218	125	break;
219	126	case 'table':
220		- case 'tabular':
221	127	if (parseInt(settings['pagination']) !== 1)
222	128	{
223	129	delete settings['pageSize'];
224	130	}
		@@ -228,9 +134,9 @@
228	134	case 'bubble':
229	135	settings.sortBubblesBySize = settings.sortBubblesBySize ? settings.sortBubblesBySize == 1 : false; // jshint ignore:line
230	136	break;
231	137	case 'timeline':
232		- settings['timeline'] = {};
	138	+ settings['timeline'] = [];
233	139	settings['timeline']['groupByRowLabel'] = settings['groupByRowLabel'] ? true : false;
234	140	settings['timeline']['colorByRowLabel'] = settings['colorByRowLabel'] ? true : false;
235	141	settings['timeline']['showRowLabels'] = settings['showRowLabels'] ? true : false;
236	142	if(settings['singleColor'] !== '') {
		@@ -286,12 +192,8 @@
286	192
287	193	delete axis.viewWindow[property];
288	194	}
289	195	}
290		-
291		- if(settings.hAxis && settings.hAxis.format == ''){
292		- settings.hAxis.format = 'yyyy-MM-dd';
293		- }
294	196	}
295	197
296	198	if(settings.hAxis){
297	199	if(settings.hAxis.textStyle && settings.hAxis.textStyle !== ''){
		@@ -325,17 +227,9 @@
325	227	break;
326	228	case 'date':
327	229	// fall-through.
328	230	case 'datetime':
329		- if (typeof data[i][j] === 'string') {
330		- var dateParse = Date.parse(data[i][j].replace(/-/g, '/'));
331		- if ( isNaN( dateParse ) ) {
332		- dateParse = Date.parse(data[i][j]);
333		- }
334		- date = new Date( dateParse );
335		- } else if(typeof data[i][j] === 'object') {
336		- date = data[i][j];
337		- }
	231	+ date = new Date(data[i][j]);
338	232	data[i][j] = null;
339	233	if (Object.prototype.toString.call(date) === "[object Date]") {
340	234	if (!isNaN(date.getTime())) {
341	235	data[i][j] = date;
		@@ -350,9 +244,8 @@
350	244
351	245	if (settings.series) {
352	246	switch(chart.type){
353	247	case 'table':
354		- case 'tabular':
355	248	for(i in settings.series){
356	249	i = parseInt(i);
357	250	if (!series[i + 1]) {
358	251	continue;
		@@ -360,16 +253,13 @@
360	253	format_data(id, table, series[i + 1].type, settings.series[i].format, i + 1);
361	254	}
362	255	break;
363	256	default:
364		- // Single-pass: walk columns, skip annotation/helper roles, apply formats in order.
365		- var k = 0; // index into settings.series (visible series)
366		- for (var c = 1; c < series.length && k < settings.series.length; c++) { // skip label at 0
367		- if (table.getColumnProperty(c, 'role')) continue; // helper/annotation column
368		- var s = settings.series[k++];
369		- if (!s || !s.format) continue;
370		- if (!series[c]) continue;
371		- format_data(id, table, series[c].type, s.format, c);
	257	+ for (i = 0; i < settings.series.length; i++) {
	258	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
	259	+ continue;
	260	+ }
	261	+ format_data(id, table, series[i + 1].type, settings.series[i].format, i + 1);
372	262	}
373	263	break;
374	264	}
375	265	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
		@@ -383,69 +273,21 @@
383	273	override(settings);
384	274
385	275	gv.events.addListener(render, 'ready', function () {
386	276	var arr = id.split('-');
387		- render = typeof render.getChart !== 'undefined' ? render.getChart() : render;
388	277	__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
389		-
390		- if (render.container && $(render.container).is(':visible')) {
391		- if ($(render.container).parents('div').next( '#sidebar' ).length === 0) {
392		- $(render.container).addClass( 'visualizer-chart-loaded' );
393		- }
394		- }
395		-
396	278	try{
397		- if ( typeof render.getImageURI !== 'undefined' ) {
398		- var img = render.getImageURI();
399		- __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
400		- $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
401		- if ( $( '#chart-img' ).length ) {
402		- $( '#chart-img' ).val( img );
403		- }
404		- }
	279	+ var img = render.getImageURI();
	280	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
	281	+ $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
405	282	}catch(error){
406		- var canvas = document.getElementById( 'canvas' );
407		- domtoimage.toPng(canvas)
408		- .then(function ( img ) {
409		- __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
410		- $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
411		- if ( $( '#chart-img' ).length ) {
412		- $( '#chart-img' ).val( img );
413		- }
414		- })
415		- .catch(function (error) {
416		- console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
417		- });
	283	+ console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
418	284	}
419	285	});
420	286
421		- if ( withControlMode ) {
422		- // alert( chart.is_library_page );
423		- // Create a control wrapper, passing some options.
424		- var controlWrapper = new gv.ControlWrapper( {
425		- containerId: 'control_wrapper_' + id,
426		- controlType: settings.controls.controlType,
427		- 'options': settings.controls,
428		- } );
	287	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
429	288
430		- $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
431		- render.setOptions(settings);
432		- chartWrapper.bind(controlWrapper, render);
433		- chartWrapper.draw(table);
434		-
435		- gv.events.addListener(controlWrapper, 'ready', function ( err ) {
436		- if ( 'vertical' === settings.controls.ui.orientation ) {
437		- if ( 'canvas' === id ) {
438		- jQuery( '#' + id ).addClass( 'vz-vertical' );
439		- }
440		- } else {
441		- jQuery( '#' + id ).removeClass( 'vz-vertical' );
442		- }
443		- });
444		- } else {
445		- $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
446		- render.draw(table, settings);
447		- }
	289	+ render.draw(table, settings);
448	290	}
449	291
450	292	function format_data(id, table, type, format, index) {
451	293	if (!format || format === '') {
		@@ -452,32 +294,21 @@
452	294	return;
453	295	}
454	296
455	297	var formatter = null;
456		- var $formatInput = $('input.control-text[name*="[format]"]').filter(function() {
457		- return $(this).val() === format;
458		- });
459		- try {
460		- switch (type) {
461		- case 'number':
462		- formatter = new gv.NumberFormat({pattern: format});
463		- break;
464		- case 'date':
465		- case 'datetime':
466		- case 'timeofday':
467		- formatter = new gv.DateFormat({pattern: format});
468		- break;
469		- }
	298	+ switch (type) {
	299	+ case 'number':
	300	+ formatter = new gv.NumberFormat({pattern: format});
	301	+ break;
	302	+ case 'date':
	303	+ case 'datetime':
	304	+ case 'timeofday':
	305	+ formatter = new gv.DateFormat({pattern: format});
	306	+ break;
	307	+ }
470	308
471		- if (formatter) {
472		- formatter.format(table, index);
473		- $formatInput.nextAll('.visualizer-format-error').remove();
474		- }
475		- } catch (e) {
476		- if ($formatInput.length) {
477		- $formatInput.nextAll('.visualizer-format-error').remove();
478		- $('<p class="visualizer-format-error" style="color:#cc0000;margin:4px 0 0"></p>').text(visualizer.l10n.invalid_format).insertAfter($formatInput);
479		- }
	309	+ if (formatter) {
	310	+ formatter.format(table, index);
480	311	}
481	312
482	313	var arr = id.split('-');
483	314	$('body').trigger('visualizer:format:chart', {id: parseInt(arr[1]), data: table, column: index});
		@@ -497,12 +328,9 @@
497	328	}
498	329
499	330	function render() {
500	331	for (var id in (all_charts || {})) {
501		- var chartElement = document.getElementById( id );
502		- if (chartElement && chartElement.offsetParent) {
503		- renderChart(id);
504		- }
	332	+ renderChart(id);
505	333	}
506	334	}
507	335
508	336	var resizeTimeout;
		@@ -507,29 +335,17 @@
507	335
508	336	var resizeTimeout;
509	337
510	338	$(document).ready(function() {
511		- $(window).resize(function(e) {
	339	+ $(window).resize(function() {
512	340	clearTimeout(resizeTimeout);
513		- window.isResizeRequest = 'undefined' !== typeof e.originalEvent ? true : false;
514	341	resizeTimeout = setTimeout(render, 100);
515	342	});
516	343
517	344	resizeHiddenContainers(true);
518		-
519		- if ( $( '.visualizer-hidden-container' ).length ) {
520		- setInterval( function() {
521		- $( '.visualizer-hidden-container' ).find(".visualizer-front:not(.visualizer-chart-loaded)").resize();
522		- }, 500 );
523		- }
524		-
525		- window.addEventListener( 'orientationchange', function() {
526		- $( '.visualizer-chart-loaded' ).removeClass( 'visualizer-chart-loaded' ).resize();
527		- }, false);
528	345	});
529	346
530	347	$(window).on('load', function(){
531		- $( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize();
532	348	resizeHiddenContainers(true);
533	349	});
534	350
535	351	function resizeHiddenContainers(everytime){
		@@ -563,12 +379,8 @@
563	379	if(v.is_front == true){ // jshint ignore:line
564	380	// check what all chart types to load.
565	381	$chart_types = [];
566	382	$.each(v.charts, function(i, c){
567		- // Only consider charts rendered by Google Charts.
568		- if ( c.library && c.library !== 'google' && c.library !== 'GoogleCharts' ) {
569		- return;
570		- }
571	383	var $type = c.type;
572	384	switch($type){
573	385	case 'bar':
574	386	case 'column':
		@@ -587,12 +399,8 @@
587	399	break;
588	400	case 'geo':
589	401	$type = 'geochart';
590	402	break;
591		- case 'tabular':
592		- case 'table':
593		- $type = 'table';
594		- break;
595	403	case 'dataTable':
596	404	case 'polarArea':
597	405	case 'radar':
598	406	$type = null;
		@@ -597,9 +405,9 @@
597	405	case 'radar':
598	406	$type = null;
599	407	break;
600	408	}
601		- if($type != null && $type !== ''){
	409	+ if($type != null){
602	410	$chart_types.push($type);
603	411	}
604	412	});
605	413	}
		@@ -604,24 +412,14 @@
604	412	});
605	413	}
606	414
607	415	objects = {};
608		- if ( 'object' === typeof google ) {
609		- $chart_types.push( 'controls' );
610		- google.load( 'visualization', '51', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
611		- callback: function () {
612		- gv = google.visualization;
613		- all_charts = v.charts;
614		- if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
615		- if ( document.getElementById( v.id ).offsetParent !== null ) {
616		- renderChart(v.id);
617		- }
618		- } else {
619		- render();
620		- }
621		- }
622		- });
623		- }
	416	+ google.charts.load("current", {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language});
	417	+ google.charts.setOnLoadCallback(function() {
	418	+ gv = google.visualization;
	419	+ all_charts = v.charts;
	420	+ render();
	421	+ });
624	422	});
625	423
626	424	$('body').on('visualizer:render:specificchart:start', function(event, v){
627	425	objects = {};
		@@ -633,18 +431,17 @@
633	431	renderChart('canvas');
634	432	});
635	433
636	434	// front end actions
637		- // 'image' is also called from the library
638	435	$('body').on('visualizer:action:specificchart', function(event, v){
639		- var id = v.id;
640		- if(typeof rendered_charts[id] === 'undefined'){
641		- return;
642		- }
643		- var arr = id.split('-');
644		- var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
645	436	switch(v.action){
646	437	case 'print':
	438	+ var id = v.id;
	439	+ if(typeof rendered_charts[id] === 'undefined'){
	440	+ return;
	441	+ }
	442	+ var arr = id.split('-');
	443	+ var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
647	444	// for charts that have no rendered image defined, we print the data instead.
648	445	var html = v.data;
649	446	if(img !== ''){
650	447	html = "<html><body><img src='" + img + "' /></body></html>";
		@@ -650,30 +447,8 @@
650	447	html = "<html><body><img src='" + img + "' /></body></html>";
651	448	}
652	449	$('body').trigger('visualizer:action:specificchart:defaultprint', {data: html});
653	450	break;
654		- case 'image':
655		- if(img !== ''){
656		- var $a = $("<a>"); // jshint ignore:line
657		- $a.attr("href", img);
658		- $("body").append($a);
659		- $a.attr("download", v.dataObj.name);
660		- $a[0].click();
661		- $a.remove();
662		- }else{
663		- console.warn("No image generated");
664		- }
665		- break;
666	451	}
667	452	});
668	453
669		- var timer = 0;
670		- $( document ).on( 'input', '.series-linewidth', function() {
671		- var seriesLineWidth = $( this );
672		- clearTimeout( timer );
673		- timer = setTimeout( function() {
674		- if ( seriesLineWidth.val() != '' && seriesLineWidth.val() <= 0 ) {
675		- seriesLineWidth.val( '0.1' );
676		- }
677		- }, 700 );
678		- } );
679	454	})(jQuery);