← All changes | js/render-datatables.js +137 -26 3.1.1 → 4.0.8 View file →

		@@ -2,11 +2,21 @@
2	2	/* global visualizer */
3	3
4	4	(function($) {
5	5	var all_charts;
	6	+ // so that we know which charts belong to our library.
	7	+ var rendered_charts = [];
6	8
	9	+ // save the settings corresponding to cssClassNames so that when a table is being edited, they stripes etc. don't get reset
	10	+ var cssClassNames;
	11	+
7	12	function renderChart(id, v) {
8		- renderSpecificChart(id, all_charts[id], v);
	13	+ var chart = all_charts[id];
	14	+ if(chart.library !== 'datatables'){
	15	+ return;
	16	+ }
	17	+ cssClassNames = null;
	18	+ renderSpecificChart(id, chart, v);
9	19	}
10	20
11	21	function renderSpecificChart(id, chart, v) {
12	22	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter, type, rows, cols;
		@@ -14,8 +24,14 @@
14	24	if(chart.library !== 'datatables'){
15	25	return;
16	26	}
17	27
	28	+ // Bail if the chart is already rendered or is being rendered.
	29	+ if ( ! window.isResizeRequest && ( $('#' + id).hasClass('visualizer-chart-loaded') || ( 'canvas' !== id && $('#' + id).children( ':not(.loader, style)' ).length > 0 ) ) ) {
	30	+ return;
	31	+ }
	32	+ rendered_charts[id] = 'yes';
	33	+
18	34	series = chart.series;
19	35	data = chart.data;
20	36
21	37	container = document.getElementById(id);
		@@ -25,9 +41,8 @@
25	41
26	42	if($('#' + id).find('table.visualizer-data-table').length > 0){
27	43	$('#' + id).empty();
28	44	}
29		- $('#' + id).append($('<table class="dataTable visualizer-data-table table table-striped"></table>'));
30	45
31	46	settings = {
32	47	destroy: true,
33	48	paging: false,
		@@ -34,36 +49,78 @@
34	49	searching: false,
35	50	ordering: true,
36	51	select: false,
37	52	lengthChange: false,
	53	+ buttons: {
	54	+ buttons: [{
	55	+ extend: 'print',
	56	+ text: '',
	57	+ title: ''
	58	+ }]
	59	+ },
	60	+ dom: 'Bfrtip',
38	61	};
39	62
	63	+ var $classes = 'dataTable visualizer-data-table table table-striped';
	64	+
40	65	if(typeof v.page_type !== 'undefined'){
41	66	switch(v.page_type){
42	67	case 'post':
	68	+ // fall-through.
43	69	case 'library':
44		- $.extend( settings, {
45		- scrollX: 150,
	70	+ // for smaller screens...
	71	+ if(window.innerWidth < 1500){
	72	+ delete chart.settings['scrollX'];
	73	+ delete chart.settings['scrollY'];
	74	+ delete chart.settings['scrollY_int'];
	75	+ $.extend( settings, {
	76	+ scrollX: '100%',
	77	+ scrollY: (( chart.settings['responsive_bool'] === 'true' ? 0.8 : 0.5 ) * parseInt($(container).css('height').replace('px',''))),
	78	+ scrollCollapse: true
	79	+ } );
	80	+ }else{
	81	+ if(parseInt(chart.settings['scrollY_int']) > 180){
	82	+ chart.settings['scrollY_int'];
	83	+ }
	84	+ delete chart.settings['scrollX'];
	85	+ $.extend( settings, {
	86	+ scrollX: '100%',
46	87	scrollY: 180,
47		- scrollCollapse: true
48		- } );
	88	+ } );
	89	+ }
49	90	break;
	91	+ case 'chart':
	92	+ delete chart.settings['scrollX']; // jshint ignore:line
	93	+ // fall-through.
50	94	case 'frontend':
51		- case 'chart':
52	95	// empty.
53	96	break;
54	97	}
55	98	}
56	99
	100	+ if(typeof chart.settings['scrollX'] !== 'undefined'){
	101	+ if(chart.settings['scrollX'] == 'true'){ // jshint ignore:line
	102	+ $classes = $classes + ' nowrap';
	103	+ }
	104	+ }
	105	+
	106	+ $('#' + id).append($('<table class="' + $classes + '"></table>'));
	107	+
57	108	var select = {
58	109	info: false
59	110	};
60		- $.extend( settings, { select } ); // jshint ignore:line
	111	+ // we cannot use { select } below because https://github.com/Codeinwp/visualizer/issues/357
	112	+ $.extend( settings, { info: false } ); // jshint ignore:line
61	113
62	114	var stripe = ['', ''];
63	115
	116	+ if(cssClassNames !== null){
	117	+ chart.settings['cssClassNames'] = cssClassNames;
	118	+ }
	119	+
64	120	// in preview mode, cssClassNames will not exist when a color is changed.
65	121	if(typeof chart.settings['cssClassNames'] !== 'undefined'){
	122	+ cssClassNames = chart.settings['cssClassNames'];
66	123	if(typeof chart.settings['cssClassNames']['oddTableRow'] !== 'undefined'){
67	124	stripe[0] = chart.settings['cssClassNames']['oddTableRow'];
68	125	}
69	126
		@@ -77,8 +134,12 @@
77	134	} );
78	135	}
79	136	}
80	137
	138	+ // remove this so that the eval does not fail.
	139	+ delete chart.settings['internal_title'];
	140	+
	141	+ var additional = [];
81	142	for (i in chart.settings) {
82	143	var valoo = chart.settings[i];
83	144
84	145	// remove the type suffix to get the name of the setting.
		@@ -94,8 +155,11 @@
94	155	default:
95	156	if(parseInt(valoo) > 0){
96	157	valoo = parseInt(valoo);
97	158	}
	159	+ if(i === 'pageLength' && (valoo === '' || parseInt(valoo) < 0)){
	160	+ valoo = 1;
	161	+ }
98	162	}
99	163
100	164	// if the setting name has an '_' this means it is a sub-setting e.g. select_items means { select: { items: ... } }.
101	165	var array = i.split('_');
		@@ -101,14 +165,19 @@
101	165	var array = i.split('_');
102	166	if(array.length === 2){
103	167	i = eval( array[0] ); // jshint ignore:line
104	168	i[ array[1] ] = valoo;
	169	+ additional[ array[0] ] = i;
	170	+ if(array[0] === 'select' && array[1] === 'info' ){
	171	+ // enable main info or the selection info will not show.
	172	+ $.extend( settings, {info: true} );
	173	+ }
	174	+ } else {
	175	+ settings[i] = valoo;
105	176	}
106		- settings[i] = valoo;
107	177	}
	178	+ $.extend( settings, additional );
108	179
109		- $.extend( $.fn.dataTable.defaults, settings );
110		-
111	180	cols = [];
112	181	for (j = 0; j < series.length; j++) {
113	182	type = series[j].type;
114	183	switch(type){
		@@ -120,9 +189,8 @@
120	189	case 'timeofday':
121	190	type = 'date';
122	191	break;
123	192	}
124		-
125	193	render = addRenderer(series[j].type, settings.series, j);
126	194
127	195	var col = { title: series[j].label, data: series[j].label, type: type, render: render };
128	196	if(typeof chart.settings['cssClassNames'] !== 'undefined' && typeof chart.settings['cssClassNames']['tableCell'] !== 'undefined'){
		@@ -135,22 +203,36 @@
135	203	for (i = 0; i < data.length; i++) {
136	204	row = [];
137	205	for (j = 0; j < series.length; j++) {
138	206	var datum = data[i][j];
	207	+ // datum could be undefined for dynamic data (e.g. through json).
	208	+ if(typeof datum === 'undefined'){
	209	+ datum = data[i][series[j].label];
	210	+ }
139	211	row[ series[j].label ] = datum;
140	212	}
141	213	rows.push(row);
142	214	}
143	215
	216	+ $.extend( settings, {
	217	+ data: rows,
	218	+ columns: cols,
	219	+ stripeClasses: stripe,
	220	+ } );
	221	+
144	222	// allow user to extend the settings.
145	223	$('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings});
146	224
147	225	table = $('#' + id + ' table.visualizer-data-table');
148		- table.DataTable( {
149		- data: rows,
150		- columns: cols,
151		- stripeClasses: stripe,
152		- } );
	226	+ table.DataTable( settings );
	227	+
	228	+ // header row is handled here as the class is added dynamically to it (after the table is rendered).
	229	+ if(typeof chart.settings['cssClassNames'] !== 'undefined'){
	230	+ if(typeof chart.settings['cssClassNames']['headerRow'] !== 'undefined'){
	231	+ $('#' + id + ' table thead tr').addClass( chart.settings['cssClassNames']['headerRow'] );
	232	+ }
	233	+ }
	234	+
153	235	$('.loader').remove();
154	236	}
155	237
156	238	function addRenderer(type, series, index){
		@@ -169,10 +251,13 @@
169	251	parts[0] = series.format.thousands;
170	252	}
171	253	if(typeof series.format.decimal !== ''){
172	254	parts[1] = series.format.decimal;
	255	+ if ( '' === series.format.precision ) {
	256	+ series.format.precision = 2;
	257	+ }
173	258	}
174		- if(typeof series.format.precision !== ''){
	259	+ if(typeof series.format.precision !== '' && parseInt(series.format.precision) > 0){
175	260	parts[2] = series.format.precision;
176	261	}
177	262	if(typeof series.format.prefix !== ''){
178	263	parts[3] = series.format.prefix;
		@@ -188,10 +273,21 @@
188	273	if(typeof series.format.to !== 'undefined' && typeof series.format.from !== 'undefined' && series.format.from != '' && series.format.to !== ''){
189	274	render = $.fn.dataTable.render.moment(series.format.from, series.format.to);
190	275	}
191	276	break;
	277	+ default:
	278	+ render = $.fn.dataTable.render.extra = function ( data, type, row ) {
	279	+ if((data === true || data === 'true') && typeof series.format !== 'undefined' && series.format.truthy !== ''){
	280	+ data = series.format.truthy.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
	281	+ }
	282	+ if((data === false || data === 'false') && typeof series.format !== 'undefined' && series.format.falsy !== ''){
	283	+ data = series.format.falsy.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
	284	+ }
	285	+ return data;
	286	+ }
192	287	}
193	288	/* jshint ignore:end */
	289	+
194	290	return render;
195	291	}
196	292
197	293	function render(v) {
		@@ -199,18 +295,16 @@
199	295	renderChart(id, v);
200	296	}
201	297	}
202	298
203		- if(typeof visualizer !== 'undefined'){
204		- // called while updating the chart.
205		- visualizer.update = function(){
206		- renderChart('canvas', visualizer);
207		- };
208		- }
209		-
210	299	$('body').on('visualizer:render:chart:start', function(event, v){
211	300	all_charts = v.charts;
212		- render(v);
	301	+
	302	+ if(v.is_front == true && typeof v.id !== 'undefined'){ // jshint ignore:line
	303	+ renderChart(v.id, v);
	304	+ } else {
	305	+ render(v);
	306	+ }
213	307	});
214	308
215	309	$('body').on('visualizer:render:specificchart:start', function(event, v){
216	310	renderSpecificChart(v.id, v.chart, v.v);
		@@ -215,8 +309,25 @@
215	309	$('body').on('visualizer:render:specificchart:start', function(event, v){
216	310	renderSpecificChart(v.id, v.chart, v.v);
217	311	});
218	312
	313	+ $('body').on('visualizer:render:currentchart:update', function(event, v){
	314	+ var data = v || event.detail;
	315	+ renderSpecificChart('canvas', all_charts['canvas'], data.visualizer);
	316	+ });
	317	+
	318	+ // front end actions
	319	+ $('body').on('visualizer:action:specificchart', function(event, v){
	320	+ switch(v.action){
	321	+ case 'print':
	322	+ var id = v.id;
	323	+ if(typeof rendered_charts[id] === 'undefined'){
	324	+ return;
	325	+ }
	326	+ $('#' + id + ' .buttons-print').trigger('click');
	327	+ break;
	328	+ }
	329	+ });
219	330
220	331	})(jQuery);
221	332
222	333