← All changes | js/render-google.js +223 -28 3.1.0 → 3.6.1 View file →

		@@ -7,11 +7,29 @@
7	7
8	8	(function($) {
9	9	var gv;
10	10	var all_charts, objects;
	11	+ // so that we know which charts belong to our library.
	12	+ var rendered_charts = [];
11	13
12	14	function renderChart(id) {
13		- renderSpecificChart(id, all_charts[id]);
	15	+ var chart = all_charts[id];
	16	+ var hasAnnotation = false;
	17	+
	18	+ // re-render the chart only if it doesn't have annotations and it is on the front-end
	19	+ // this is to prevent the chart from showing "All series on a given axis must be of the same data type" during resize.
	20	+ // remember, some charts do not support annotations so they should not be included in this.
	21	+ var no_annotation_charts = ['tabular', 'timeline', 'gauge', 'geo', 'bubble', 'candlestick'];
	22	+ if ( undefined !== chart.settings && undefined !== chart.settings.series && undefined === chart.settings.series.length ) {
	23	+ chart.settings.series = Object.values( chart.settings.series );
	24	+ }
	25	+ if(id !== 'canvas' && typeof chart.series !== 'undefined' && typeof chart.settings.series !== 'undefined' && ! no_annotation_charts.includes(chart.type) ) {
	26	+ hasAnnotation = chart.series.length - chart.settings.series.length > 1;
	27	+ }
	28	+
	29	+ if(! hasAnnotation){
	30	+ renderSpecificChart(id, all_charts[id]);
	31	+ }
14	32	}
15	33
16	34	function renderSpecificChart(id, chart) {
17	35	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter;
		@@ -18,8 +36,9 @@
18	36
19	37	if(chart.library !== 'google'){
20	38	return;
21	39	}
	40	+ rendered_charts[id] = 'yes';
22	41
23	42	series = chart.series;
24	43	data = chart.data;
25	44	settings = chart.settings;
		@@ -32,8 +51,11 @@
32	51
33	52	render = objects[id] || null;
34	53	if (!render) {
35	54	switch (chart.type) {
	55	+ case "tabular":
	56	+ render = "Table";
	57	+ break;
36	58	case "gauge":
37	59	case "table":
38	60	case "timeline":
39	61	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1);
		@@ -51,8 +73,47 @@
51	73	settings['animation']['startup'] = true;
52	74	settings['animation']['duration'] = parseInt(settings['animation']['duration']);
53	75	}
54	76
	77	+ // mark roles for series that have specified a role
	78	+ // and then remove them from future processing
	79	+ // and also adjust the indices of the series array so that
	80	+ // the ones with a role are ignored
	81	+ // e.g. if there are 6 columns (0-5) out of which 1, 3 and 5 are annotations
	82	+ // the final series will only include 0, 2, 4 (reindexed as 0, 1, 2)
	83	+
	84	+ // this will capture all the series indexes that became annotations.
	85	+ var series_annotations = [];
	86	+ if (settings.series) {
	87	+ var adjusted_series = [];
	88	+ for (i = 0; i < settings.series.length; i++) {
	89	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
	90	+ continue;
	91	+ }
	92	+ if(typeof settings.series[i].role !== 'undefined'){
	93	+ table.setColumnProperty(i + 1, 'role', settings.series[i].role);
	94	+ if(settings.series[i].role === '') {
	95	+ adjusted_series.push(settings.series[i]);
	96	+ }else{
	97	+ series_annotations.push(i);
	98	+ }
	99	+ }
	100	+ }
	101	+ if(adjusted_series.length > 0){
	102	+ settings.series = adjusted_series;
	103	+ }
	104	+ }
	105	+
	106	+ if ( settings['explorer_enabled'] && settings['explorer_enabled'] == 'true' ) { // jshint ignore:line
	107	+ var $explorer = {};
	108	+ $explorer['keepInBounds'] = true;
	109	+
	110	+ if ( settings['explorer_actions'] ) {
	111	+ $explorer['actions'] = settings['explorer_actions'];
	112	+ }
	113	+ settings['explorer'] = $explorer;
	114	+ }
	115	+
55	116	switch (chart.type) {
56	117	case 'pie':
57	118	if (settings.slices) {
58	119	for (i in settings.slices) {
		@@ -86,8 +147,9 @@
86	147	settings['region'] = 'world';
87	148	}
88	149	break;
89	150	case 'table':
	151	+ case 'tabular':
90	152	if (parseInt(settings['pagination']) !== 1)
91	153	{
92	154	delete settings['pageSize'];
93	155	}
		@@ -93,10 +155,13 @@
93	155	}
94	156	break;
95	157	case 'gauge':
96	158	break;
	159	+ case 'bubble':
	160	+ settings.sortBubblesBySize = settings.sortBubblesBySize ? settings.sortBubblesBySize == 1 : false; // jshint ignore:line
	161	+ break;
97	162	case 'timeline':
98		- settings['timeline'] = [];
	163	+ settings['timeline'] = {};
99	164	settings['timeline']['groupByRowLabel'] = settings['groupByRowLabel'] ? true : false;
100	165	settings['timeline']['colorByRowLabel'] = settings['colorByRowLabel'] ? true : false;
101	166	settings['timeline']['showRowLabels'] = settings['showRowLabels'] ? true : false;
102	167	if(settings['singleColor'] !== '') {
		@@ -131,8 +196,9 @@
131	196	case 'area':
132	197	case 'scatter':
133	198	case 'candlestick':
134	199	case 'column':
	200	+ case 'combo':
135	201	axis = settings.hAxis;
136	202	break;
137	203	case 'bar':
138	204	axis = settings.vAxis;
		@@ -172,16 +238,30 @@
172	238
173	239	for (i = 0; i < data.length; i++) {
174	240	row = [];
175	241	for (j = 0; j < series.length; j++) {
176		- if (series[j].type === 'date' || series[j].type === 'datetime') {
177		- date = new Date(data[i][j]);
178		- data[i][j] = null;
179		- if (Object.prototype.toString.call(date) === "[object Date]") {
180		- if (!isNaN(date.getTime())) {
181		- data[i][j] = date;
182		- }
183		- }
	242	+ switch(series[j].type) {
	243	+ case 'string':
	244	+ if(data[i][j] === ''){
	245	+ data[i][j] = null;
	246	+ }
	247	+ break;
	248	+ case 'boolean':
	249	+ if (typeof data[i][j] === 'string'){
	250	+ data[i][j] = data[i][j] === 'true';
	251	+ }
	252	+ break;
	253	+ case 'date':
	254	+ // fall-through.
	255	+ case 'datetime':
	256	+ date = new Date(data[i][j]);
	257	+ data[i][j] = null;
	258	+ if (Object.prototype.toString.call(date) === "[object Date]") {
	259	+ if (!isNaN(date.getTime())) {
	260	+ data[i][j] = date;
	261	+ }
	262	+ }
	263	+ break;
184	264	}
185	265	row.push(data[i][j]);
186	266	}
187	267	table.addRow(row);
		@@ -189,8 +269,9 @@
189	269
190	270	if (settings.series) {
191	271	switch(chart.type){
192	272	case 'table':
	273	+ case 'tabular':
193	274	for(i in settings.series){
194	275	i = parseInt(i);
195	276	if (!series[i + 1]) {
196	277	continue;
		@@ -199,12 +280,20 @@
199	280	}
200	281	break;
201	282	default:
202	283	for (i = 0; i < settings.series.length; i++) {
203		- if (!series[i + 1]) {
	284	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
204	285	continue;
205	286	}
206		- format_data(id, table, series[i + 1].type, settings.series[i].format, i + 1);
	287	+ var seriesIndexToUse = i + 1;
	288	+
	289	+ // if an annotation "swallowed" a series, use the following one.
	290	+ if(series_annotations.includes(i)){
	291	+ seriesIndexToUse++;
	292	+ }
	293	+ if ( series[seriesIndexToUse] ) {
	294	+ format_data(id, table, series[seriesIndexToUse].type, settings.series[i].format, seriesIndexToUse);
	295	+ }
207	296	}
208	297	break;
209	298	}
210	299	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
		@@ -209,21 +298,42 @@
209	298	}
210	299	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
211	300	format_data(id, table, 'number', settings.format, 1);
212	301	}
	302	+
	303	+ if(settings.hAxis && series[0]) {
	304	+ format_data(id, table, series[0].type, settings.hAxis.format, 0);
	305	+ }
	306	+
213	307	override(settings);
214	308
215	309	gv.events.addListener(render, 'ready', function () {
216	310	var arr = id.split('-');
	311	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
217	312	try{
218	313	var img = render.getImageURI();
219	314	__visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
220	315	$('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
	316	+ if ( $( '#chart-img' ).length ) {
	317	+ $( '#chart-img' ).val( img );
	318	+ }
221	319	}catch(error){
222		- console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
	320	+ var canvas = document.getElementById( 'canvas' );
	321	+ domtoimage.toPng(canvas)
	322	+ .then(function ( img ) {
	323	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
	324	+ $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
	325	+ if ( $( '#chart-img' ).length ) {
	326	+ $( '#chart-img' ).val( img );
	327	+ }
	328	+ })
	329	+ .catch(function (error) {
	330	+ console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
	331	+ });
223	332	}
224	333	});
225	334
	335	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
226	336	render.draw(table, settings);
227	337	}
228	338
229	339	function format_data(id, table, type, format, index) {
		@@ -265,20 +375,14 @@
265	375	}
266	376
267	377	function render() {
268	378	for (var id in (all_charts || {})) {
269		- renderChart(id);
	379	+ if (document.getElementById( id ).offsetParent !== null) {
	380	+ renderChart(id);
	381	+ }
270	382	}
271	383	}
272	384
273		- if(typeof visualizer !== 'undefined'){
274		- // called while updating the chart.
275		- visualizer.update = function(){
276		- renderChart('canvas');
277		- };
278		- }
279		-
280		-
281	385	var resizeTimeout;
282	386
283	387	$(document).ready(function() {
284	388	$(window).resize(function() {
		@@ -286,11 +390,17 @@
286	390	resizeTimeout = setTimeout(render, 100);
287	391	});
288	392
289	393	resizeHiddenContainers(true);
	394	+
	395	+ if ( $( '.visualizer-hidden-container' ).length ) {
	396	+ setInterval( function() {
	397	+ $( '.visualizer-hidden-container' ).find(".visualizer-front").resize();
	398	+ }, 500 );
	399	+ }
290	400	});
291	401
292		- $(window).load(function(){
	402	+ $(window).on('load', function(){
293	403	resizeHiddenContainers(true);
294	404	});
295	405
296	406	function resizeHiddenContainers(everytime){
		@@ -319,14 +429,62 @@
319	429	});
320	430	}
321	431
322	432	$('body').on('visualizer:render:chart:start', function(event, v){
	433	+ var $chart_types = ['corechart', 'geochart', 'gauge', 'table', 'timeline'];
	434	+ if(v.is_front == true){ // jshint ignore:line
	435	+ // check what all chart types to load.
	436	+ $chart_types = [];
	437	+ $.each(v.charts, function(i, c){
	438	+ var $type = c.type;
	439	+ switch($type){
	440	+ case 'bar':
	441	+ case 'column':
	442	+ case 'line':
	443	+ case 'area':
	444	+ case 'stepped area':
	445	+ case 'bubble':
	446	+ case 'pie':
	447	+ case 'donut':
	448	+ case 'combo':
	449	+ case 'candlestick':
	450	+ case 'histogram':
	451	+ case 'scatter':
	452	+ case 'bubble':
	453	+ $type = 'corechart';
	454	+ break;
	455	+ case 'geo':
	456	+ $type = 'geochart';
	457	+ break;
	458	+ case 'tabular':
	459	+ case 'table':
	460	+ $type = 'table';
	461	+ break;
	462	+ case 'dataTable':
	463	+ case 'polarArea':
	464	+ case 'radar':
	465	+ $type = null;
	466	+ break;
	467	+ }
	468	+ if($type != null){
	469	+ $chart_types.push($type);
	470	+ }
	471	+ });
	472	+ }
	473	+
323	474	objects = {};
324		- google.charts.load("current", {packages: ["corechart", "geochart", "gauge", "table", "timeline"], mapsApiKey: v.map_api_key, 'language' : v.language});
325		- google.charts.setOnLoadCallback(function() {
326		- gv = google.visualization;
327		- all_charts = v.charts;
328		- render();
	475	+ google.load( 'visualization', 'current', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
	476	+ callback: function () {
	477	+ gv = google.visualization;
	478	+ all_charts = v.charts;
	479	+ if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
	480	+ if ( document.getElementById( v.id ).offsetParent !== null ) {
	481	+ renderChart(v.id);
	482	+ }
	483	+ } else {
	484	+ render();
	485	+ }
	486	+ }
329	487	});
330	488	});
331	489
332	490	$('body').on('visualizer:render:specificchart:start', function(event, v){
		@@ -332,7 +490,44 @@
332	490	$('body').on('visualizer:render:specificchart:start', function(event, v){
333	491	objects = {};
334	492	gv = google.visualization;
335	493	renderSpecificChart(v.id, v.chart);
	494	+ });
	495	+
	496	+ $('body').on('visualizer:render:currentchart:update', function(event, v){
	497	+ renderChart('canvas');
	498	+ });
	499	+
	500	+ // front end actions
	501	+ // 'image' is also called from the library
	502	+ $('body').on('visualizer:action:specificchart', function(event, v){
	503	+ var id = v.id;
	504	+ if(typeof rendered_charts[id] === 'undefined'){
	505	+ return;
	506	+ }
	507	+ var arr = id.split('-');
	508	+ var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
	509	+ switch(v.action){
	510	+ case 'print':
	511	+ // for charts that have no rendered image defined, we print the data instead.
	512	+ var html = v.data;
	513	+ if(img !== ''){
	514	+ html = "<html><body><img src='" + img + "' /></body></html>";
	515	+ }
	516	+ $('body').trigger('visualizer:action:specificchart:defaultprint', {data: html});
	517	+ break;
	518	+ case 'image':
	519	+ if(img !== ''){
	520	+ var $a = $("<a>"); // jshint ignore:line
	521	+ $a.attr("href", img);
	522	+ $("body").append($a);
	523	+ $a.attr("download", v.dataObj.name);
	524	+ $a[0].click();
	525	+ $a.remove();
	526	+ }else{
	527	+ console.warn("No image generated");
	528	+ }
	529	+ break;
	530	+ }
336	531	});
337	532
338	533	})(jQuery);