← All changes | js/render-google.js +275 -32 3.1.0 → 3.7.9 View file →

		@@ -7,19 +7,47 @@
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	+ 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;
	29	+ }
	30	+ if(id !== 'canvas' && typeof chart.series !== 'undefined' && typeof chart.settings.series !== 'undefined' && ! no_annotation_charts.includes(chart.type) ) {
	31	+ hasAnnotation = chart.series.length - chart.settings.series.length > 1;
	32	+ }
	33	+
	34	+ if(! hasAnnotation){
	35	+ renderSpecificChart(id, all_charts[id]);
	36	+ }
14	37	}
15	38
16	39	function renderSpecificChart(id, chart) {
17	40	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter;
18	41
	42	+ if ( $('#' + id).hasClass('visualizer-chart-loaded') ) {
	43	+ return;
	44	+ }
	45	+
19	46	if(chart.library !== 'google'){
20	47	return;
21	48	}
	49	+ rendered_charts[id] = 'yes';
22	50
23	51	series = chart.series;
24	52	data = chart.data;
25	53	settings = chart.settings;
		@@ -32,8 +60,11 @@
32	60
33	61	render = objects[id] || null;
34	62	if (!render) {
35	63	switch (chart.type) {
	64	+ case "tabular":
	65	+ render = "Table";
	66	+ break;
36	67	case "gauge":
37	68	case "table":
38	69	case "timeline":
39	70	render = chart.type.charAt(0).toUpperCase() + chart.type.slice(1);
		@@ -51,8 +82,47 @@
51	82	settings['animation']['startup'] = true;
52	83	settings['animation']['duration'] = parseInt(settings['animation']['duration']);
53	84	}
54	85
	86	+ // mark roles for series that have specified a role
	87	+ // and then remove them from future processing
	88	+ // and also adjust the indices of the series array so that
	89	+ // the ones with a role are ignored
	90	+ // e.g. if there are 6 columns (0-5) out of which 1, 3 and 5 are annotations
	91	+ // the final series will only include 0, 2, 4 (reindexed as 0, 1, 2)
	92	+
	93	+ // this will capture all the series indexes that became annotations.
	94	+ var series_annotations = [];
	95	+ if (settings.series) {
	96	+ var adjusted_series = [];
	97	+ for (i = 0; i < settings.series.length; i++) {
	98	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
	99	+ continue;
	100	+ }
	101	+ if(typeof settings.series[i].role !== 'undefined'){
	102	+ table.setColumnProperty(i + 1, 'role', settings.series[i].role);
	103	+ if(settings.series[i].role === '') {
	104	+ adjusted_series.push(settings.series[i]);
	105	+ }else{
	106	+ series_annotations.push(i);
	107	+ }
	108	+ }
	109	+ }
	110	+ if(adjusted_series.length > 0){
	111	+ settings.series = adjusted_series;
	112	+ }
	113	+ }
	114	+
	115	+ if ( settings['explorer_enabled'] && settings['explorer_enabled'] == 'true' ) { // jshint ignore:line
	116	+ var $explorer = {};
	117	+ $explorer['keepInBounds'] = true;
	118	+
	119	+ if ( settings['explorer_actions'] ) {
	120	+ $explorer['actions'] = settings['explorer_actions'];
	121	+ }
	122	+ settings['explorer'] = $explorer;
	123	+ }
	124	+
55	125	switch (chart.type) {
56	126	case 'pie':
57	127	if (settings.slices) {
58	128	for (i in settings.slices) {
		@@ -86,8 +156,9 @@
86	156	settings['region'] = 'world';
87	157	}
88	158	break;
89	159	case 'table':
	160	+ case 'tabular':
90	161	if (parseInt(settings['pagination']) !== 1)
91	162	{
92	163	delete settings['pageSize'];
93	164	}
		@@ -93,10 +164,13 @@
93	164	}
94	165	break;
95	166	case 'gauge':
96	167	break;
	168	+ case 'bubble':
	169	+ settings.sortBubblesBySize = settings.sortBubblesBySize ? settings.sortBubblesBySize == 1 : false; // jshint ignore:line
	170	+ break;
97	171	case 'timeline':
98		- settings['timeline'] = [];
	172	+ settings['timeline'] = {};
99	173	settings['timeline']['groupByRowLabel'] = settings['groupByRowLabel'] ? true : false;
100	174	settings['timeline']['colorByRowLabel'] = settings['colorByRowLabel'] ? true : false;
101	175	settings['timeline']['showRowLabels'] = settings['showRowLabels'] ? true : false;
102	176	if(settings['singleColor'] !== '') {
		@@ -131,8 +205,9 @@
131	205	case 'area':
132	206	case 'scatter':
133	207	case 'candlestick':
134	208	case 'column':
	209	+ case 'combo':
135	210	axis = settings.hAxis;
136	211	break;
137	212	case 'bar':
138	213	axis = settings.vAxis;
		@@ -151,8 +226,12 @@
151	226
152	227	delete axis.viewWindow[property];
153	228	}
154	229	}
	230	+
	231	+ if(settings.hAxis && settings.hAxis.format == ''){
	232	+ settings.hAxis.format = 'yyyy-MM-dd';
	233	+ }
155	234	}
156	235
157	236	if(settings.hAxis){
158	237	if(settings.hAxis.textStyle && settings.hAxis.textStyle !== ''){
		@@ -172,16 +251,38 @@
172	251
173	252	for (i = 0; i < data.length; i++) {
174	253	row = [];
175	254	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		- }
	255	+ switch(series[j].type) {
	256	+ case 'string':
	257	+ if(data[i][j] === ''){
	258	+ data[i][j] = null;
	259	+ }
	260	+ break;
	261	+ case 'boolean':
	262	+ if (typeof data[i][j] === 'string'){
	263	+ data[i][j] = data[i][j] === 'true';
	264	+ }
	265	+ break;
	266	+ case 'date':
	267	+ // fall-through.
	268	+ case 'datetime':
	269	+ if (typeof data[i][j] === 'string') {
	270	+ var dateParse = Date.parse(data[i][j].replace(/-/g, '/'));
	271	+ if ( isNaN( dateParse ) ) {
	272	+ dateParse = Date.parse(data[i][j]);
	273	+ }
	274	+ date = new Date( dateParse );
	275	+ } else if(typeof data[i][j] === 'object') {
	276	+ date = data[i][j];
	277	+ }
	278	+ data[i][j] = null;
	279	+ if (Object.prototype.toString.call(date) === "[object Date]") {
	280	+ if (!isNaN(date.getTime())) {
	281	+ data[i][j] = date;
	282	+ }
	283	+ }
	284	+ break;
184	285	}
185	286	row.push(data[i][j]);
186	287	}
187	288	table.addRow(row);
		@@ -189,8 +290,9 @@
189	290
190	291	if (settings.series) {
191	292	switch(chart.type){
192	293	case 'table':
	294	+ case 'tabular':
193	295	for(i in settings.series){
194	296	i = parseInt(i);
195	297	if (!series[i + 1]) {
196	298	continue;
		@@ -199,12 +301,20 @@
199	301	}
200	302	break;
201	303	default:
202	304	for (i = 0; i < settings.series.length; i++) {
203		- if (!series[i + 1]) {
	305	+ if (!series[i + 1] || typeof settings.series[i] === 'undefined') {
204	306	continue;
205	307	}
206		- format_data(id, table, series[i + 1].type, settings.series[i].format, i + 1);
	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	+ }
207	317	}
208	318	break;
209	319	}
210	320	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
		@@ -209,21 +319,51 @@
209	319	}
210	320	} else if (chart.type === 'pie' && settings.format && settings.format !== '') {
211	321	format_data(id, table, 'number', settings.format, 1);
212	322	}
	323	+
	324	+ if(settings.hAxis && series[0]) {
	325	+ format_data(id, table, series[0].type, settings.hAxis.format, 0);
	326	+ }
	327	+
213	328	override(settings);
214	329
215	330	gv.events.addListener(render, 'ready', function () {
216	331	var arr = id.split('-');
	332	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = '';
	333	+
	334	+ if (render.container && $(render.container).is(':visible')) {
	335	+ if ($(render.container).parents('div').next( '#sidebar' ).length === 0) {
	336	+ $(render.container).addClass( 'visualizer-chart-loaded' );
	337	+ }
	338	+ }
	339	+
217	340	try{
218		- var img = render.getImageURI();
219		- __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
220		- $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
	341	+ if ( typeof render.getImageURI !== 'undefined' ) {
	342	+ var img = render.getImageURI();
	343	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
	344	+ $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
	345	+ if ( $( '#chart-img' ).length ) {
	346	+ $( '#chart-img' ).val( img );
	347	+ }
	348	+ }
221	349	}catch(error){
222		- console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
	350	+ var canvas = document.getElementById( 'canvas' );
	351	+ domtoimage.toPng(canvas)
	352	+ .then(function ( img ) {
	353	+ __visualizer_chart_images[ arr[0] + '-' + arr[1] ] = img;
	354	+ $('body').trigger('visualizer:render:chart', {id: arr[1], image: img});
	355	+ if ( $( '#chart-img' ).length ) {
	356	+ $( '#chart-img' ).val( img );
	357	+ }
	358	+ })
	359	+ .catch(function (error) {
	360	+ console.warn('render.getImageURI not defined for ' + arr[0] + '-' + arr[1]);
	361	+ });
223	362	}
224	363	});
225	364
	365	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings, data: table});
226	366	render.draw(table, settings);
227	367	}
228	368
229	369	function format_data(id, table, type, format, index) {
		@@ -265,20 +405,15 @@
265	405	}
266	406
267	407	function render() {
268	408	for (var id in (all_charts || {})) {
269		- renderChart(id);
	409	+ var chartElement = document.getElementById( id );
	410	+ if (chartElement && chartElement.offsetParent) {
	411	+ renderChart(id);
	412	+ }
270	413	}
271	414	}
272	415
273		- if(typeof visualizer !== 'undefined'){
274		- // called while updating the chart.
275		- visualizer.update = function(){
276		- renderChart('canvas');
277		- };
278		- }
279		-
280		-
281	416	var resizeTimeout;
282	417
283	418	$(document).ready(function() {
284	419	$(window).resize(function() {
		@@ -286,11 +421,22 @@
286	421	resizeTimeout = setTimeout(render, 100);
287	422	});
288	423
289	424	resizeHiddenContainers(true);
	425	+
	426	+ if ( $( '.visualizer-hidden-container' ).length ) {
	427	+ setInterval( function() {
	428	+ $( '.visualizer-hidden-container' ).find(".visualizer-front:not(.visualizer-chart-loaded)").resize();
	429	+ }, 500 );
	430	+ }
	431	+
	432	+ window.addEventListener( 'orientationchange', function() {
	433	+ $( '.visualizer-chart-loaded' ).removeClass( 'visualizer-chart-loaded' ).resize();
	434	+ }, false);
290	435	});
291	436
292		- $(window).load(function(){
	437	+ $(window).on('load', function(){
	438	+ $( '.visualizer-front:not(.visualizer-chart-loaded)' ).resize();
293	439	resizeHiddenContainers(true);
294	440	});
295	441
296	442	function resizeHiddenContainers(everytime){
		@@ -319,15 +465,65 @@
319	465	});
320	466	}
321	467
322	468	$('body').on('visualizer:render:chart:start', function(event, v){
	469	+ var $chart_types = ['corechart', 'geochart', 'gauge', 'table', 'timeline'];
	470	+ if(v.is_front == true){ // jshint ignore:line
	471	+ // check what all chart types to load.
	472	+ $chart_types = [];
	473	+ $.each(v.charts, function(i, c){
	474	+ var $type = c.type;
	475	+ switch($type){
	476	+ case 'bar':
	477	+ case 'column':
	478	+ case 'line':
	479	+ case 'area':
	480	+ case 'stepped area':
	481	+ case 'bubble':
	482	+ case 'pie':
	483	+ case 'donut':
	484	+ case 'combo':
	485	+ case 'candlestick':
	486	+ case 'histogram':
	487	+ case 'scatter':
	488	+ case 'bubble':
	489	+ $type = 'corechart';
	490	+ break;
	491	+ case 'geo':
	492	+ $type = 'geochart';
	493	+ break;
	494	+ case 'tabular':
	495	+ case 'table':
	496	+ $type = 'table';
	497	+ break;
	498	+ case 'dataTable':
	499	+ case 'polarArea':
	500	+ case 'radar':
	501	+ $type = null;
	502	+ break;
	503	+ }
	504	+ if($type != null){
	505	+ $chart_types.push($type);
	506	+ }
	507	+ });
	508	+ }
	509	+
323	510	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();
329		- });
	511	+ if ( 'object' === typeof google ) {
	512	+ google.load( 'visualization', 'current', {packages: $chart_types, mapsApiKey: v.map_api_key, 'language' : v.language,
	513	+ callback: function () {
	514	+ gv = google.visualization;
	515	+ all_charts = v.charts;
	516	+ if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
	517	+ if ( document.getElementById( v.id ).offsetParent !== null ) {
	518	+ renderChart(v.id);
	519	+ }
	520	+ } else {
	521	+ render();
	522	+ }
	523	+ }
	524	+ });
	525	+ }
330	526	});
331	527
332	528	$('body').on('visualizer:render:specificchart:start', function(event, v){
333	529	objects = {};
		@@ -334,5 +530,52 @@
334	530	gv = google.visualization;
335	531	renderSpecificChart(v.id, v.chart);
336	532	});
337	533
	534	+ $('body').on('visualizer:render:currentchart:update', function(event, v){
	535	+ renderChart('canvas');
	536	+ });
	537	+
	538	+ // front end actions
	539	+ // 'image' is also called from the library
	540	+ $('body').on('visualizer:action:specificchart', function(event, v){
	541	+ var id = v.id;
	542	+ if(typeof rendered_charts[id] === 'undefined'){
	543	+ return;
	544	+ }
	545	+ var arr = id.split('-');
	546	+ var img = __visualizer_chart_images[ arr[0] + '-' + arr[1] ];
	547	+ switch(v.action){
	548	+ case 'print':
	549	+ // for charts that have no rendered image defined, we print the data instead.
	550	+ var html = v.data;
	551	+ if(img !== ''){
	552	+ html = "<html><body><img src='" + img + "' /></body></html>";
	553	+ }
	554	+ $('body').trigger('visualizer:action:specificchart:defaultprint', {data: html});
	555	+ break;
	556	+ case 'image':
	557	+ if(img !== ''){
	558	+ var $a = $("<a>"); // jshint ignore:line
	559	+ $a.attr("href", img);
	560	+ $("body").append($a);
	561	+ $a.attr("download", v.dataObj.name);
	562	+ $a[0].click();
	563	+ $a.remove();
	564	+ }else{
	565	+ console.warn("No image generated");
	566	+ }
	567	+ break;
	568	+ }
	569	+ });
	570	+
	571	+ var timer = 0;
	572	+ $( document ).on( 'input', '.series-linewidth', function() {
	573	+ var seriesLineWidth = $( this );
	574	+ clearTimeout( timer );
	575	+ timer = setTimeout( function() {
	576	+ if ( seriesLineWidth.val() != '' && seriesLineWidth.val() <= 0 ) {
	577	+ seriesLineWidth.val( '0.1' );
	578	+ }
	579	+ }, 700 );
	580	+ } );
338	581	})(jQuery);