← All changes | js/render-google.js +40 -138 4.0.5 → 3.7.9 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,40 +11,22 @@
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		- if ( chart.library && chart.library !== 'google' && chart.library !== 'GoogleCharts' ) {
30		- return;
31		- }
32		-
33	18	// re-render the chart only if it doesn't have annotations and it is on the front-end
34	19	// this is to prevent the chart from showing "All series on a given axis must be of the same data type" during resize.
35	20	// remember, some charts do not support annotations so they should not be included in this.
36	21	var no_annotation_charts = ['tabular', 'timeline', 'gauge', 'geo', 'bubble', 'candlestick'];
37	22	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		- }
	23	+ var chartSeries = [];
	24	+ var chartSeriesValue = Object.values( chart.settings.series );
	25	+ $.each( Object.keys( chart.settings.series ), function( index, element ) {
	26	+ chartSeries[element] = chartSeriesValue[index];
	27	+ } );
	28	+ chart.settings.series = chartSeries;
49	29	}
50	30	if(id !== 'canvas' && typeof chart.series !== 'undefined' && typeof chart.settings.series !== 'undefined' && ! no_annotation_charts.includes(chart.type) ) {
51	31	hasAnnotation = chart.series.length - chart.settings.series.length > 1;
52	32	}
		@@ -58,14 +38,13 @@
58	38
59	39	function renderSpecificChart(id, chart) {
60	40	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter;
61	41
62		- if( chart.library !== 'google' ) {
	42	+ if ( $('#' + id).hasClass('visualizer-chart-loaded') ) {
63	43	return;
64	44	}
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 ) ) ) {
	45	+
	46	+ if(chart.library !== 'google'){
68	47	return;
69	48	}
70	49	rendered_charts[id] = 'yes';
71	50
		@@ -94,43 +73,9 @@
94	73	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1) + 'Chart';
95	74	break;
96	75	}
97	76
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		- }
	77	+ render = new gv[render](container);
133	78	}
134	79
135	80	if (settings['animation'] && parseInt(settings['animation']['startup']) === 1)
136	81	{
		@@ -136,13 +81,8 @@
136	81	{
137	82	settings['animation']['startup'] = true;
138	83	settings['animation']['duration'] = parseInt(settings['animation']['duration']);
139	84	}
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	85
146	86	// mark roles for series that have specified a role
147	87	// and then remove them from future processing
148	88	// and also adjust the indices of the series array so that
		@@ -360,16 +300,21 @@
360	300	format_data(id, table, series[i + 1].type, settings.series[i].format, i + 1);
361	301	}
362	302	break;
363	303	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);
	304	+ for (i = 0; i < settings.series.length; i++) {
	305	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
	306	+ continue;
	307	+ }
	308	+ var seriesIndexToUse = i + 1;
	309	+
	310	+ // if an annotation "swallowed" a series, use the following one.
	311	+ if(series_annotations.includes(i)){
	312	+ seriesIndexToUse++;
	313	+ }
	314	+ if ( series[seriesIndexToUse] ) {
	315	+ format_data(id, table, series[seriesIndexToUse].type, settings.series[i].format, seriesIndexToUse);
	316	+ }
372	317	}
373	318	break;
374	319	}
375	320	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
		@@ -383,9 +328,8 @@
383	328	override(settings);
384	329
385	330	gv.events.addListener(render, 'ready', function () {
386	331	var arr = id.split('-');
387		- render = typeof render.getChart !== 'undefined' ? render.getChart() : render;
388	332	__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
389	333
390	334	if (render.container && $(render.container).is(':visible')) {
391	335	if ($(render.container).parents('div').next( '#sidebar' ).length === 0) {
		@@ -417,35 +361,10 @@
417	361	});
418	362	}
419	363	});
420	364
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		- } );
429		-
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		- }
	365	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
	366	+ render.draw(table, settings);
448	367	}
449	368
450	369	function format_data(id, table, type, format, index) {
451	370	if (!format || format === '') {
		@@ -452,32 +371,21 @@
452	371	return;
453	372	}
454	373
455	374	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		- }
	375	+ switch (type) {
	376	+ case 'number':
	377	+ formatter = new gv.NumberFormat({pattern: format});
	378	+ break;
	379	+ case 'date':
	380	+ case 'datetime':
	381	+ case 'timeofday':
	382	+ formatter = new gv.DateFormat({pattern: format});
	383	+ break;
	384	+ }
470	385
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		- }
	386	+ if (formatter) {
	387	+ formatter.format(table, index);
480	388	}
481	389
482	390	var arr = id.split('-');
483	391	$('body').trigger('visualizer:format:chart', {id: parseInt(arr[1]), data: table, column: index});
		@@ -507,11 +415,10 @@
507	415
508	416	var resizeTimeout;
509	417
510	418	$(document).ready(function() {
511		- $(window).resize(function(e) {
	419	+ $(window).resize(function() {
512	420	clearTimeout(resizeTimeout);
513		- window.isResizeRequest = 'undefined' !== typeof e.originalEvent ? true : false;
514	421	resizeTimeout = setTimeout(render, 100);
515	422	});
516	423
517	424	resizeHiddenContainers(true);
		@@ -563,12 +470,8 @@
563	470	if(v.is_front == true){ // jshint ignore:line
564	471	// check what all chart types to load.
565	472	$chart_types = [];
566	473	$.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	474	var $type = c.type;
572	475	switch($type){
573	476	case 'bar':
574	477	case 'column':
		@@ -597,9 +500,9 @@
597	500	case 'radar':
598	501	$type = null;
599	502	break;
600	503	}
601		- if($type != null && $type !== ''){
	504	+ if($type != null){
602	505	$chart_types.push($type);
603	506	}
604	507	});
605	508	}
		@@ -605,10 +508,9 @@
605	508	}
606	509
607	510	objects = {};
608	511	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,
	512	+ google.load( 'visualization', 'current', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
611	513	callback: function () {
612	514	gv = google.visualization;
613	515	all_charts = v.charts;
614	516	if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line