← All changes | js/render-google.js +24 -179 3.10.13 → 3.4.8 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,32 +11,15 @@
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	15	var chart = all_charts[id];
23	16	var hasAnnotation = false;
24	17
25		- if ( ! chart ) {
26		- return;
27		- }
28		-
29	18	// re-render the chart only if it doesn't have annotations and it is on the front-end
30	19	// this is to prevent the chart from showing "All series on a given axis must be of the same data type" during resize.
31	20	// remember, some charts do not support annotations so they should not be included in this.
32	21	var no_annotation_charts = ['tabular', 'timeline', 'gauge', 'geo', 'bubble', 'candlestick'];
33		- if ( undefined !== chart.settings && undefined !== chart.settings.series && undefined === chart.settings.series.length ) {
34		- var chartSeries = [];
35		- var chartSeriesValue = Object.values( chart.settings.series );
36		- $.each( Object.keys( chart.settings.series ), function( index, element ) {
37		- chartSeries[element] = chartSeriesValue[index];
38		- } );
39		- chart.settings.series = chartSeries;
40		- }
41	22	if(id !== 'canvas' && typeof chart.series !== 'undefined' && typeof chart.settings.series !== 'undefined' && ! no_annotation_charts.includes(chart.type) ) {
42	23	hasAnnotation = chart.series.length - chart.settings.series.length > 1;
43	24	}
44	25
		@@ -49,16 +30,11 @@
49	30
50	31	function renderSpecificChart(id, chart) {
51	32	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter;
52	33
53		- if( chart.library !== 'google' ) {
	34	+ if(chart.library !== 'google'){
54	35	return;
55	36	}
56		-
57		- // Bail if the chart is already rendered or is being rendered.
58		- if ( ! window.isResizeRequest && ( $('#' + id).hasClass('visualizer-chart-loaded') || ( 'canvas' !== id && $('#' + id).children( ':not(.loader, style)' ).length > 0 ) ) ) {
59		- return;
60		- }
61	37	rendered_charts[id] = 'yes';
62	38
63	39	series = chart.series;
64	40	data = chart.data;
		@@ -85,43 +61,9 @@
85	61	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1) + 'Chart';
86	62	break;
87	63	}
88	64
89		- var controlWrapperElement = document.getElementById( "control_wrapper_" + id ) || null;
90		- var withControlMode = ( typeof settings.controls !== 'undefined' && '' !== settings.controls.controlType ) && controlWrapperElement ? true : false;
91		-
92		- if ( $( controlWrapperElement ).hasClass( 'no-filter' ) ) {
93		- withControlMode = false;
94		- }
95		- if ( withControlMode ) {
96		- // Chart wrapper.
97		- render = new gv.ChartWrapper({
98		- 'chartType': render,
99		- 'containerId': id,
100		- });
101		- // Chart dashboard wrapper.
102		- var chartWrapperElement = document.getElementById( "chart_wrapper_" + id ) || null;
103		- var chartWrapper = new gv.Dashboard( chartWrapperElement );
104		-
105		- // Error Handler.
106		- gv.events.addListener(chartWrapper, 'error', function ( err ) {
107		- if ( chartWrapperError.length === 0 ) {
108		- chartWrapperError.push( err );
109		- gv.errors.removeError( err.id );
110		- var chartContainer = $( chartWrapperElement ).find( '.visualizer-front' );
111		- if ( chartContainer && chartContainer.is(':visible')) {
112		- if (chartContainer.parents('div').next( '#sidebar' ).length === 0) {
113		- chartContainer.addClass( 'visualizer-chart-loaded' ).addClass( 'visualizer-cw-error' );
114		- $( chartWrapperElement ).addClass( 'visualizer-cw-error' );
115		- }
116		- }
117		- } else {
118		- gv.errors.removeError( err.id );
119		- }
120		- } );
121		- } else {
122		- render = new gv[render](container);
123		- }
	65	+ render = new gv[render](container);
124	66	}
125	67
126	68	if (settings['animation'] && parseInt(settings['animation']['startup']) === 1)
127	69	{
		@@ -127,13 +69,8 @@
127	69	{
128	70	settings['animation']['startup'] = true;
129	71	settings['animation']['duration'] = parseInt(settings['animation']['duration']);
130	72	}
131		- if ( settings['controls'] ) {
132		- settings['controls']['ui']['allowMultiple'] = 'true' === settings['controls']['allowMultiple'] ? true : false;
133		- settings['controls']['ui']['allowTyping'] = 'true' === settings['controls']['allowTyping'] ? true : false;
134		- settings['controls']['ui']['showRangeValues'] = 'true' === settings['controls']['showRangeValues'] ? true : false;
135		- }
136	73
137	74	// mark roles for series that have specified a role
138	75	// and then remove them from future processing
139	76	// and also adjust the indices of the series array so that
		@@ -219,9 +156,9 @@
219	156	case 'bubble':
220	157	settings.sortBubblesBySize = settings.sortBubblesBySize ? settings.sortBubblesBySize == 1 : false; // jshint ignore:line
221	158	break;
222	159	case 'timeline':
223		- settings['timeline'] = {};
	160	+ settings['timeline'] = [];
224	161	settings['timeline']['groupByRowLabel'] = settings['groupByRowLabel'] ? true : false;
225	162	settings['timeline']['colorByRowLabel'] = settings['colorByRowLabel'] ? true : false;
226	163	settings['timeline']['showRowLabels'] = settings['showRowLabels'] ? true : false;
227	164	if(settings['singleColor'] !== '') {
		@@ -277,12 +214,8 @@
277	214
278	215	delete axis.viewWindow[property];
279	216	}
280	217	}
281		-
282		- if(settings.hAxis && settings.hAxis.format == ''){
283		- settings.hAxis.format = 'yyyy-MM-dd';
284		- }
285	218	}
286	219
287	220	if(settings.hAxis){
288	221	if(settings.hAxis.textStyle && settings.hAxis.textStyle !== ''){
		@@ -316,17 +249,9 @@
316	249	break;
317	250	case 'date':
318	251	// fall-through.
319	252	case 'datetime':
320		- if (typeof data[i][j] === 'string') {
321		- var dateParse = Date.parse(data[i][j].replace(/-/g, '/'));
322		- if ( isNaN( dateParse ) ) {
323		- dateParse = Date.parse(data[i][j]);
324		- }
325		- date = new Date( dateParse );
326		- } else if(typeof data[i][j] === 'object') {
327		- date = data[i][j];
328		- }
	253	+ date = new Date(data[i][j]);
329	254	data[i][j] = null;
330	255	if (Object.prototype.toString.call(date) === "[object Date]") {
331	256	if (!isNaN(date.getTime())) {
332	257	data[i][j] = date;
		@@ -361,11 +286,10 @@
361	286	// if an annotation "swallowed" a series, use the following one.
362	287	if(series_annotations.includes(i)){
363	288	seriesIndexToUse++;
364	289	}
365		- if ( series[seriesIndexToUse] ) {
366		- format_data(id, table, series[seriesIndexToUse].type, settings.series[i].format, seriesIndexToUse);
367		- }
	290	+
	291	+ format_data(id, table, series[seriesIndexToUse].type, settings.series[i].format, seriesIndexToUse);
368	292	}
369	293	break;
370	294	}
371	295	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
		@@ -379,69 +303,21 @@
379	303	override(settings);
380	304
381	305	gv.events.addListener(render, 'ready', function () {
382	306	var arr = id.split('-');
383		- render = typeof render.getChart !== 'undefined' ? render.getChart() : render;
384	307	__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
385		-
386		- if (render.container && $(render.container).is(':visible')) {
387		- if ($(render.container).parents('div').next( '#sidebar' ).length === 0) {
388		- $(render.container).addClass( 'visualizer-chart-loaded' );
389		- }
390		- }
391		-
392	308	try{
393		- if ( typeof render.getImageURI !== 'undefined' ) {
394		- var img = render.getImageURI();
395		- __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
396		- $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
397		- if ( $( '#chart-img' ).length ) {
398		- $( '#chart-img' ).val( img );
399		- }
400		- }
	309	+ var img = render.getImageURI();
	310	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
	311	+ $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
401	312	}catch(error){
402		- var canvas = document.getElementById( 'canvas' );
403		- domtoimage.toPng(canvas)
404		- .then(function ( img ) {
405		- __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
406		- $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
407		- if ( $( '#chart-img' ).length ) {
408		- $( '#chart-img' ).val( img );
409		- }
410		- })
411		- .catch(function (error) {
412		- console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
413		- });
	313	+ console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
414	314	}
415	315	});
416	316
417		- if ( withControlMode ) {
418		- // alert( chart.is_library_page );
419		- // Create a control wrapper, passing some options.
420		- var controlWrapper = new gv.ControlWrapper( {
421		- containerId: 'control_wrapper_' + id,
422		- controlType: settings.controls.controlType,
423		- 'options': settings.controls,
424		- } );
	317	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
425	318
426		- $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
427		- render.setOptions(settings);
428		- chartWrapper.bind(controlWrapper, render);
429		- chartWrapper.draw(table);
430		-
431		- gv.events.addListener(controlWrapper, 'ready', function ( err ) {
432		- if ( 'vertical' === settings.controls.ui.orientation ) {
433		- if ( 'canvas' === id ) {
434		- jQuery( '#' + id ).addClass( 'vz-vertical' );
435		- }
436		- } else {
437		- jQuery( '#' + id ).removeClass( 'vz-vertical' );
438		- }
439		- });
440		- } else {
441		- $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
442		- render.draw(table, settings);
443		- }
	319	+ render.draw(table, settings);
444	320	}
445	321
446	322	function format_data(id, table, type, format, index) {
447	323	if (!format || format === '') {
		@@ -482,12 +358,9 @@
482	358	}
483	359
484	360	function render() {
485	361	for (var id in (all_charts || {})) {
486		- var chartElement = document.getElementById( id );
487		- if (chartElement && chartElement.offsetParent) {
488		- renderChart(id);
489		- }
	362	+ renderChart(id);
490	363	}
491	364	}
492	365
493	366	var resizeTimeout;
		@@ -492,29 +365,17 @@
492	365
493	366	var resizeTimeout;
494	367
495	368	$(document).ready(function() {
496		- $(window).resize(function(e) {
	369	+ $(window).resize(function() {
497	370	clearTimeout(resizeTimeout);
498		- window.isResizeRequest = 'undefined' !== typeof e.originalEvent ? true : false;
499	371	resizeTimeout = setTimeout(render, 100);
500	372	});
501	373
502	374	resizeHiddenContainers(true);
503		-
504		- if ( $( '.visualizer-hidden-container' ).length ) {
505		- setInterval( function() {
506		- $( '.visualizer-hidden-container' ).find(".visualizer-front:not(.visualizer-chart-loaded)").resize();
507		- }, 500 );
508		- }
509		-
510		- window.addEventListener( 'orientationchange', function() {
511		- $( '.visualizer-chart-loaded' ).removeClass( 'visualizer-chart-loaded' ).resize();
512		- }, false);
513	375	});
514	376
515	377	$(window).on('load', function(){
516		- $( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize();
517	378	resizeHiddenContainers(true);
518	379	});
519	380
520	381	function resizeHiddenContainers(everytime){
		@@ -585,24 +446,18 @@
585	446	});
586	447	}
587	448
588	449	objects = {};
589		- if ( 'object' === typeof google ) {
590		- $chart_types.push( 'controls' );
591		- google.load( 'visualization', '51', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
592		- callback: function () {
593		- gv = google.visualization;
594		- all_charts = v.charts;
595		- if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
596		- if ( document.getElementById( v.id ).offsetParent !== null ) {
597		- renderChart(v.id);
598		- }
599		- } else {
600		- render();
601		- }
602		- }
603		- });
604		- }
	450	+ google.charts.load("current", {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language});
	451	+ google.charts.setOnLoadCallback(function() {
	452	+ gv = google.visualization;
	453	+ all_charts = v.charts;
	454	+ if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
	455	+ renderChart(v.id);
	456	+ } else {
	457	+ render();
	458	+ }
	459	+ });
605	460	});
606	461
607	462	$('body').on('visualizer:render:specificchart:start', function(event, v){
608	463	objects = {};
		@@ -646,15 +501,5 @@
646	501	break;
647	502	}
648	503	});
649	504
650		- var timer = 0;
651		- $( document ).on( 'input', '.series-linewidth', function() {
652		- var seriesLineWidth = $( this );
653		- clearTimeout( timer );
654		- timer = setTimeout( function() {
655		- if ( seriesLineWidth.val() != '' && seriesLineWidth.val() <= 0 ) {
656		- seriesLineWidth.val( '0.1' );
657		- }
658		- }, 700 );
659		- } );
660	505	})(jQuery);