← All changes | js/render-google.js +319 -39 3.1.3 → 3.9.2 View file →

		@@ -3,8 +3,9 @@
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 = [];
7	8
8	9	(function($) {
9	10	var gv;
10	11	var all_charts, objects;
		@@ -11,14 +12,39 @@
11	12	// so that we know which charts belong to our library.
12	13	var rendered_charts = [];
13	14
14	15	function renderChart(id) {
15		- renderSpecificChart(id, all_charts[id]);
	16	+ var chart = all_charts[id];
	17	+ var hasAnnotation = false;
	18	+
	19	+ // re-render the chart only if it doesn't have annotations and it is on the front-end
	20	+ // this is to prevent the chart from showing "All series on a given axis must be of the same data type" during resize.
	21	+ // remember, some charts do not support annotations so they should not be included in this.
	22	+ var no_annotation_charts = ['tabular', 'timeline', 'gauge', 'geo', 'bubble', 'candlestick'];
	23	+ if ( undefined !== chart.settings && undefined !== chart.settings.series && undefined === chart.settings.series.length ) {
	24	+ var chartSeries = [];
	25	+ var chartSeriesValue = Object.values( chart.settings.series );
	26	+ $.each( Object.keys( chart.settings.series ), function( index, element ) {
	27	+ chartSeries[element] = chartSeriesValue[index];
	28	+ } );
	29	+ chart.settings.series = chartSeries;
	30	+ }
	31	+ if(id !== 'canvas' && typeof chart.series !== 'undefined' && typeof chart.settings.series !== 'undefined' && ! no_annotation_charts.includes(chart.type) ) {
	32	+ hasAnnotation = chart.series.length - chart.settings.series.length > 1;
	33	+ }
	34	+
	35	+ if(! hasAnnotation){
	36	+ renderSpecificChart(id, all_charts[id]);
	37	+ }
16	38	}
17	39
18	40	function renderSpecificChart(id, chart) {
19	41	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter;
20	42
	43	+ if ( $('#' + id).hasClass('visualizer-chart-loaded') || $('#' + id).children( ':not(.loader)' ).length > 0 ) {
	44	+ return;
	45	+ }
	46	+
21	47	if(chart.library !== 'google'){
22	48	return;
23	49	}
24	50	rendered_charts[id] = 'yes';
		@@ -35,8 +61,11 @@
35	61
36	62	render = objects[id] || null;
37	63	if (!render) {
38	64	switch (chart.type) {
	65	+ case "tabular":
	66	+ render = "Table";
	67	+ break;
39	68	case "gauge":
40	69	case "table":
41	70	case "timeline":
42	71	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1);
		@@ -45,9 +74,43 @@
45	74	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1) + 'Chart';
46	75	break;
47	76	}
48	77
49		- render = new gv[render](container);
	78	+ var controlWrapperElement = document.getElementById( "control_wrapper_" + id ) || null;
	79	+ var withControlMode = ( typeof settings.controls !== 'undefined' && '' !== settings.controls.controlType ) && controlWrapperElement ? true : false;
	80	+
	81	+ if ( $( controlWrapperElement ).hasClass( 'no-filter' ) ) {
	82	+ withControlMode = false;
	83	+ }
	84	+ if ( withControlMode ) {
	85	+ // Chart wrapper.
	86	+ render = new gv.ChartWrapper({
	87	+ 'chartType': render,
	88	+ 'containerId': id,
	89	+ });
	90	+ // Chart dashboard wrapper.
	91	+ var chartWrapperElement = document.getElementById( "chart_wrapper_" + id ) || null;
	92	+ var chartWrapper = new gv.Dashboard( chartWrapperElement );
	93	+
	94	+ // Error Handler.
	95	+ gv.events.addListener(chartWrapper, 'error', function ( err ) {
	96	+ if ( chartWrapperError.length === 0 ) {
	97	+ chartWrapperError.push( err );
	98	+ gv.errors.removeError( err.id );
	99	+ var chartContainer = $( chartWrapperElement ).find( '.visualizer-front' );
	100	+ if ( chartContainer && chartContainer.is(':visible')) {
	101	+ if (chartContainer.parents('div').next( '#sidebar' ).length === 0) {
	102	+ chartContainer.addClass( 'visualizer-chart-loaded' ).addClass( 'visualizer-cw-error' );
	103	+ $( chartWrapperElement ).addClass( 'visualizer-cw-error' );
	104	+ }
	105	+ }
	106	+ } else {
	107	+ gv.errors.removeError( err.id );
	108	+ }
	109	+ } );
	110	+ } else {
	111	+ render = new gv[render](container);
	112	+ }
50	113	}
51	114
52	115	if (settings['animation'] && parseInt(settings['animation']['startup']) === 1)
53	116	{
		@@ -54,8 +117,47 @@
54	117	settings['animation']['startup'] = true;
55	118	settings['animation']['duration'] = parseInt(settings['animation']['duration']);
56	119	}
57	120
	121	+ // mark roles for series that have specified a role
	122	+ // and then remove them from future processing
	123	+ // and also adjust the indices of the series array so that
	124	+ // the ones with a role are ignored
	125	+ // e.g. if there are 6 columns (0-5) out of which 1, 3 and 5 are annotations
	126	+ // the final series will only include 0, 2, 4 (reindexed as 0, 1, 2)
	127	+
	128	+ // this will capture all the series indexes that became annotations.
	129	+ var series_annotations = [];
	130	+ if (settings.series) {
	131	+ var adjusted_series = [];
	132	+ for (i = 0; i < settings.series.length; i++) {
	133	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
	134	+ continue;
	135	+ }
	136	+ if(typeof settings.series[i].role !== 'undefined'){
	137	+ table.setColumnProperty(i + 1, 'role', settings.series[i].role);
	138	+ if(settings.series[i].role === '') {
	139	+ adjusted_series.push(settings.series[i]);
	140	+ }else{
	141	+ series_annotations.push(i);
	142	+ }
	143	+ }
	144	+ }
	145	+ if(adjusted_series.length > 0){
	146	+ settings.series = adjusted_series;
	147	+ }
	148	+ }
	149	+
	150	+ if ( settings['explorer_enabled'] && settings['explorer_enabled'] == 'true' ) { // jshint ignore:line
	151	+ var $explorer = {};
	152	+ $explorer['keepInBounds'] = true;
	153	+
	154	+ if ( settings['explorer_actions'] ) {
	155	+ $explorer['actions'] = settings['explorer_actions'];
	156	+ }
	157	+ settings['explorer'] = $explorer;
	158	+ }
	159	+
58	160	switch (chart.type) {
59	161	case 'pie':
60	162	if (settings.slices) {
61	163	for (i in settings.slices) {
		@@ -89,8 +191,9 @@
89	191	settings['region'] = 'world';
90	192	}
91	193	break;
92	194	case 'table':
	195	+ case 'tabular':
93	196	if (parseInt(settings['pagination']) !== 1)
94	197	{
95	198	delete settings['pageSize'];
96	199	}
		@@ -96,10 +199,13 @@
96	199	}
97	200	break;
98	201	case 'gauge':
99	202	break;
	203	+ case 'bubble':
	204	+ settings.sortBubblesBySize = settings.sortBubblesBySize ? settings.sortBubblesBySize == 1 : false; // jshint ignore:line
	205	+ break;
100	206	case 'timeline':
101		- settings['timeline'] = [];
	207	+ settings['timeline'] = {};
102	208	settings['timeline']['groupByRowLabel'] = settings['groupByRowLabel'] ? true : false;
103	209	settings['timeline']['colorByRowLabel'] = settings['colorByRowLabel'] ? true : false;
104	210	settings['timeline']['showRowLabels'] = settings['showRowLabels'] ? true : false;
105	211	if(settings['singleColor'] !== '') {
		@@ -155,8 +261,12 @@
155	261
156	262	delete axis.viewWindow[property];
157	263	}
158	264	}
	265	+
	266	+ if(settings.hAxis && settings.hAxis.format == ''){
	267	+ settings.hAxis.format = 'yyyy-MM-dd';
	268	+ }
159	269	}
160	270
161	271	if(settings.hAxis){
162	272	if(settings.hAxis.textStyle && settings.hAxis.textStyle !== ''){
		@@ -176,16 +286,38 @@
176	286
177	287	for (i = 0; i < data.length; i++) {
178	288	row = [];
179	289	for (j = 0; j < series.length; j++) {
180		- if (series[j].type === 'date' || series[j].type === 'datetime') {
181		- date = new Date(data[i][j]);
182		- data[i][j] = null;
183		- if (Object.prototype.toString.call(date) === "[object Date]") {
184		- if (!isNaN(date.getTime())) {
185		- data[i][j] = date;
186		- }
187		- }
	290	+ switch(series[j].type) {
	291	+ case 'string':
	292	+ if(data[i][j] === ''){
	293	+ data[i][j] = null;
	294	+ }
	295	+ break;
	296	+ case 'boolean':
	297	+ if (typeof data[i][j] === 'string'){
	298	+ data[i][j] = data[i][j] === 'true';
	299	+ }
	300	+ break;
	301	+ case 'date':
	302	+ // fall-through.
	303	+ case 'datetime':
	304	+ if (typeof data[i][j] === 'string') {
	305	+ var dateParse = Date.parse(data[i][j].replace(/-/g, '/'));
	306	+ if ( isNaN( dateParse ) ) {
	307	+ dateParse = Date.parse(data[i][j]);
	308	+ }
	309	+ date = new Date( dateParse );
	310	+ } else if(typeof data[i][j] === 'object') {
	311	+ date = data[i][j];
	312	+ }
	313	+ data[i][j] = null;
	314	+ if (Object.prototype.toString.call(date) === "[object Date]") {
	315	+ if (!isNaN(date.getTime())) {
	316	+ data[i][j] = date;
	317	+ }
	318	+ }
	319	+ break;
188	320	}
189	321	row.push(data[i][j]);
190	322	}
191	323	table.addRow(row);
		@@ -193,8 +325,9 @@
193	325
194	326	if (settings.series) {
195	327	switch(chart.type){
196	328	case 'table':
	329	+ case 'tabular':
197	330	for(i in settings.series){
198	331	i = parseInt(i);
199	332	if (!series[i + 1]) {
200	333	continue;
		@@ -203,12 +336,20 @@
203	336	}
204	337	break;
205	338	default:
206	339	for (i = 0; i < settings.series.length; i++) {
207		- if (!series[i + 1]) {
	340	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
208	341	continue;
209	342	}
210		- format_data(id, table, series[i + 1].type, settings.series[i].format, i + 1);
	343	+ var seriesIndexToUse = i + 1;
	344	+
	345	+ // if an annotation "swallowed" a series, use the following one.
	346	+ if(series_annotations.includes(i)){
	347	+ seriesIndexToUse++;
	348	+ }
	349	+ if ( series[seriesIndexToUse] ) {
	350	+ format_data(id, table, series[seriesIndexToUse].type, settings.series[i].format, seriesIndexToUse);
	351	+ }
211	352	}
212	353	break;
213	354	}
214	355	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
		@@ -213,23 +354,78 @@
213	354	}
214	355	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
215	356	format_data(id, table, 'number', settings.format, 1);
216	357	}
	358	+
	359	+ if(settings.hAxis && series[0]) {
	360	+ format_data(id, table, series[0].type, settings.hAxis.format, 0);
	361	+ }
	362	+
217	363	override(settings);
218	364
219	365	gv.events.addListener(render, 'ready', function () {
220	366	var arr = id.split('-');
	367	+ render = typeof render.getChart !== 'undefined' ? render.getChart() : render;
221	368	__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
	369	+
	370	+ if (render.container && $(render.container).is(':visible')) {
	371	+ if ($(render.container).parents('div').next( '#sidebar' ).length === 0) {
	372	+ $(render.container).addClass( 'visualizer-chart-loaded' );
	373	+ }
	374	+ }
	375	+
222	376	try{
223		- var img = render.getImageURI();
224		- __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
225		- $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
	377	+ if ( typeof render.getImageURI !== 'undefined' ) {
	378	+ var img = render.getImageURI();
	379	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
	380	+ $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
	381	+ if ( $( '#chart-img' ).length ) {
	382	+ $( '#chart-img' ).val( img );
	383	+ }
	384	+ }
226	385	}catch(error){
227		- console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
	386	+ var canvas = document.getElementById( 'canvas' );
	387	+ domtoimage.toPng(canvas)
	388	+ .then(function ( img ) {
	389	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
	390	+ $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
	391	+ if ( $( '#chart-img' ).length ) {
	392	+ $( '#chart-img' ).val( img );
	393	+ }
	394	+ })
	395	+ .catch(function (error) {
	396	+ console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
	397	+ });
228	398	}
229	399	});
230	400
231		- render.draw(table, settings);
	401	+ if ( withControlMode ) {
	402	+ // alert( chart.is_library_page );
	403	+ // Create a control wrapper, passing some options.
	404	+ var controlWrapper = new gv.ControlWrapper( {
	405	+ containerId: 'control_wrapper_' + id,
	406	+ controlType: settings.controls.controlType,
	407	+ 'options': settings.controls,
	408	+ } );
	409	+
	410	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
	411	+ render.setOptions(settings);
	412	+ chartWrapper.bind(controlWrapper, render);
	413	+ chartWrapper.draw(table);
	414	+
	415	+ gv.events.addListener(controlWrapper, 'ready', function ( err ) {
	416	+ if ( 'vertical' === settings.controls.ui.orientation ) {
	417	+ if ( 'canvas' === id ) {
	418	+ jQuery( '#' + id ).addClass( 'vz-vertical' );
	419	+ }
	420	+ } else {
	421	+ jQuery( '#' + id ).removeClass( 'vz-vertical' );
	422	+ }
	423	+ });
	424	+ } else {
	425	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
	426	+ render.draw(table, settings);
	427	+ }
232	428	}
233	429
234	430	function format_data(id, table, type, format, index) {
235	431	if (!format || format === '') {
		@@ -270,20 +466,15 @@
270	466	}
271	467
272	468	function render() {
273	469	for (var id in (all_charts || {})) {
274		- renderChart(id);
	470	+ var chartElement = document.getElementById( id );
	471	+ if (chartElement && chartElement.offsetParent) {
	472	+ renderChart(id);
	473	+ }
275	474	}
276	475	}
277	476
278		- if(typeof visualizer !== 'undefined'){
279		- // called while updating the chart.
280		- visualizer.update = function(){
281		- renderChart('canvas');
282		- };
283		- }
284		-
285		-
286	477	var resizeTimeout;
287	478
288	479	$(document).ready(function() {
289	480	$(window).resize(function() {
		@@ -291,11 +482,22 @@
291	482	resizeTimeout = setTimeout(render, 100);
292	483	});
293	484
294	485	resizeHiddenContainers(true);
	486	+
	487	+ if ( $( '.visualizer-hidden-container' ).length ) {
	488	+ setInterval( function() {
	489	+ $( '.visualizer-hidden-container' ).find(".visualizer-front:not(.visualizer-chart-loaded)").resize();
	490	+ }, 500 );
	491	+ }
	492	+
	493	+ window.addEventListener( 'orientationchange', function() {
	494	+ $( '.visualizer-chart-loaded' ).removeClass( 'visualizer-chart-loaded' ).resize();
	495	+ }, false);
295	496	});
296	497
297	498	$(window).on('load', function(){
	499	+ $( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize();
298	500	resizeHiddenContainers(true);
299	501	});
300	502
301	503	function resizeHiddenContainers(everytime){
		@@ -324,15 +526,66 @@
324	526	});
325	527	}
326	528
327	529	$('body').on('visualizer:render:chart:start', function(event, v){
	530	+ var $chart_types = ['corechart', 'geochart', 'gauge', 'table', 'timeline'];
	531	+ if(v.is_front == true){ // jshint ignore:line
	532	+ // check what all chart types to load.
	533	+ $chart_types = [];
	534	+ $.each(v.charts, function(i, c){
	535	+ var $type = c.type;
	536	+ switch($type){
	537	+ case 'bar':
	538	+ case 'column':
	539	+ case 'line':
	540	+ case 'area':
	541	+ case 'stepped area':
	542	+ case 'bubble':
	543	+ case 'pie':
	544	+ case 'donut':
	545	+ case 'combo':
	546	+ case 'candlestick':
	547	+ case 'histogram':
	548	+ case 'scatter':
	549	+ case 'bubble':
	550	+ $type = 'corechart';
	551	+ break;
	552	+ case 'geo':
	553	+ $type = 'geochart';
	554	+ break;
	555	+ case 'tabular':
	556	+ case 'table':
	557	+ $type = 'table';
	558	+ break;
	559	+ case 'dataTable':
	560	+ case 'polarArea':
	561	+ case 'radar':
	562	+ $type = null;
	563	+ break;
	564	+ }
	565	+ if($type != null){
	566	+ $chart_types.push($type);
	567	+ }
	568	+ });
	569	+ }
	570	+
328	571	objects = {};
329		- google.charts.load("current", {packages: ["corechart", "geochart", "gauge", "table", "timeline"], mapsApiKey: v.map_api_key, 'language' : v.language});
330		- google.charts.setOnLoadCallback(function() {
331		- gv = google.visualization;
332		- all_charts = v.charts;
333		- render();
334		- });
	572	+ if ( 'object' === typeof google ) {
	573	+ $chart_types.push( 'controls' );
	574	+ google.load( 'visualization', 'current', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
	575	+ callback: function () {
	576	+ gv = google.visualization;
	577	+ all_charts = v.charts;
	578	+ if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
	579	+ if ( document.getElementById( v.id ).offsetParent !== null ) {
	580	+ renderChart(v.id);
	581	+ }
	582	+ } else {
	583	+ render();
	584	+ }
	585	+ }
	586	+ });
	587	+ }
335	588	});
336	589
337	590	$('body').on('visualizer:render:specificchart:start', function(event, v){
338	591	objects = {};
		@@ -339,18 +592,23 @@
339	592	gv = google.visualization;
340	593	renderSpecificChart(v.id, v.chart);
341	594	});
342	595
	596	+ $('body').on('visualizer:render:currentchart:update', function(event, v){
	597	+ renderChart('canvas');
	598	+ });
	599	+
343	600	// front end actions
	601	+ // 'image' is also called from the library
344	602	$('body').on('visualizer:action:specificchart', function(event, v){
	603	+ var id = v.id;
	604	+ if(typeof rendered_charts[id] === 'undefined'){
	605	+ return;
	606	+ }
	607	+ var arr = id.split('-');
	608	+ var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
345	609	switch(v.action){
346	610	case 'print':
347		- var id = v.id;
348		- if(typeof rendered_charts[id] === 'undefined'){
349		- return;
350		- }
351		- var arr = id.split('-');
352		- var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
353	611	// for charts that have no rendered image defined, we print the data instead.
354	612	var html = v.data;
355	613	if(img !== ''){
356	614	html = "<html><body><img src='" + img + "' /></body></html>";
		@@ -356,8 +614,30 @@
356	614	html = "<html><body><img src='" + img + "' /></body></html>";
357	615	}
358	616	$('body').trigger('visualizer:action:specificchart:defaultprint', {data: html});
359	617	break;
	618	+ case 'image':
	619	+ if(img !== ''){
	620	+ var $a = $("<a>"); // jshint ignore:line
	621	+ $a.attr("href", img);
	622	+ $("body").append($a);
	623	+ $a.attr("download", v.dataObj.name);
	624	+ $a[0].click();
	625	+ $a.remove();
	626	+ }else{
	627	+ console.warn("No image generated");
	628	+ }
	629	+ break;
360	630	}
361	631	});
362	632
	633	+ var timer = 0;
	634	+ $( document ).on( 'input', '.series-linewidth', function() {
	635	+ var seriesLineWidth = $( this );
	636	+ clearTimeout( timer );
	637	+ timer = setTimeout( function() {
	638	+ if ( seriesLineWidth.val() != '' && seriesLineWidth.val() <= 0 ) {
	639	+ seriesLineWidth.val( '0.1' );
	640	+ }
	641	+ }, 700 );
	642	+ } );
363	643	})(jQuery);