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

		@@ -2,21 +2,11 @@
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 = [];
8	6
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		-
12	7	function renderChart(id, v) {
13		- var chart = all_charts[id];
14		- if(chart.library !== 'datatables'){
15		- return;
16		- }
17		- cssClassNames = null;
18		- renderSpecificChart(id, chart, v);
	8	+ renderSpecificChart(id, all_charts[id], v);
19	9	}
20	10
21	11	function renderSpecificChart(id, chart, v) {
22	12	var render, container, series, data, table, settings, i, j, row, date, axis, property, format, formatter, type, rows, cols;
		@@ -24,14 +14,8 @@
24	14	if(chart.library !== 'datatables'){
25	15	return;
26	16	}
27	17
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		-
34	18	series = chart.series;
35	19	data = chart.data;
36	20
37	21	container = document.getElementById(id);
		@@ -41,8 +25,9 @@
41	25
42	26	if($('#' + id).find('table.visualizer-data-table').length > 0){
43	27	$('#' + id).empty();
44	28	}
	29	+ $('#' + id).append($('<table class="dataTable visualizer-data-table table table-striped"></table>'));
45	30
46	31	settings = {
47	32	destroy: true,
48	33	paging: false,
		@@ -49,78 +34,36 @@
49	34	searching: false,
50	35	ordering: true,
51	36	select: false,
52	37	lengthChange: false,
53		- buttons: {
54		- buttons: [{
55		- extend: 'print',
56		- text: '',
57		- title: ''
58		- }]
59		- },
60		- dom: 'Bfrtip',
61	38	};
62	39
63		- var $classes = 'dataTable visualizer-data-table table table-striped';
64		-
65	40	if(typeof v.page_type !== 'undefined'){
66	41	switch(v.page_type){
67	42	case 'post':
68		- // fall-through.
69	43	case 'library':
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',''))),
	44	+ $.extend( settings, {
	45	+ scrollX: 150,
	46	+ scrollY: 180,
78	47	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%',
87		- scrollY: 180,
88		- } );
89		- }
	48	+ } );
90	49	break;
	50	+ case 'frontend':
91	51	case 'chart':
92		- delete chart.settings['scrollX']; // jshint ignore:line
93		- // fall-through.
94		- case 'frontend':
95	52	// empty.
96	53	break;
97	54	}
98	55	}
99	56
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		-
108	57	var select = {
109	58	info: false
110	59	};
111		- // we cannot use { select } below because https://github.com/Codeinwp/visualizer/issues/357
112		- $.extend( settings, { info: false } ); // jshint ignore:line
	60	+ $.extend( settings, { select } ); // jshint ignore:line
113	61
114	62	var stripe = ['', ''];
115	63
116		- if(cssClassNames !== null){
117		- chart.settings['cssClassNames'] = cssClassNames;
118		- }
119		-
120	64	// in preview mode, cssClassNames will not exist when a color is changed.
121	65	if(typeof chart.settings['cssClassNames'] !== 'undefined'){
122		- cssClassNames = chart.settings['cssClassNames'];
123	66	if(typeof chart.settings['cssClassNames']['oddTableRow'] !== 'undefined'){
124	67	stripe[0] = chart.settings['cssClassNames']['oddTableRow'];
125	68	}
126	69
		@@ -134,12 +77,8 @@
134	77	} );
135	78	}
136	79	}
137	80
138		- // remove this so that the eval does not fail.
139		- delete chart.settings['internal_title'];
140		-
141		- var additional = [];
142	81	for (i in chart.settings) {
143	82	var valoo = chart.settings[i];
144	83
145	84	// remove the type suffix to get the name of the setting.
		@@ -155,11 +94,8 @@
155	94	default:
156	95	if(parseInt(valoo) > 0){
157	96	valoo = parseInt(valoo);
158	97	}
159		- if(i === 'pageLength' && (valoo === '' || parseInt(valoo) < 0)){
160		- valoo = 1;
161		- }
162	98	}
163	99
164	100	// if the setting name has an '_' this means it is a sub-setting e.g. select_items means { select: { items: ... } }.
165	101	var array = i.split('_');
		@@ -165,19 +101,14 @@
165	101	var array = i.split('_');
166	102	if(array.length === 2){
167	103	i = eval( array[0] ); // jshint ignore:line
168	104	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;
176	105	}
	106	+ settings[i] = valoo;
177	107	}
178		- $.extend( settings, additional );
179	108
	109	+ $.extend( $.fn.dataTable.defaults, settings );
	110	+
180	111	cols = [];
181	112	for (j = 0; j < series.length; j++) {
182	113	type = series[j].type;
183	114	switch(type){
		@@ -189,8 +120,9 @@
189	120	case 'timeofday':
190	121	type = 'date';
191	122	break;
192	123	}
	124	+
193	125	render = addRenderer(series[j].type, settings.series, j);
194	126
195	127	var col = { title: series[j].label, data: series[j].label, type: type, render: render };
196	128	if(typeof chart.settings['cssClassNames'] !== 'undefined' && typeof chart.settings['cssClassNames']['tableCell'] !== 'undefined'){
		@@ -203,36 +135,22 @@
203	135	for (i = 0; i < data.length; i++) {
204	136	row = [];
205	137	for (j = 0; j < series.length; j++) {
206	138	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		- }
211	139	row[ series[j].label ] = datum;
212	140	}
213	141	rows.push(row);
214	142	}
215	143
216		- $.extend( settings, {
	144	+ // allow user to extend the settings.
	145	+ $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings});
	146	+
	147	+ table = $('#' + id + ' table.visualizer-data-table');
	148	+ table.DataTable( {
217	149	data: rows,
218	150	columns: cols,
219	151	stripeClasses: stripe,
220	152	} );
221		-
222		- // allow user to extend the settings.
223		- $('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings});
224		-
225		- table = $('#' + id + ' table.visualizer-data-table');
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		-
235	153	$('.loader').remove();
236	154	}
237	155
238	156	function addRenderer(type, series, index){
		@@ -251,13 +169,10 @@
251	169	parts[0] = series.format.thousands;
252	170	}
253	171	if(typeof series.format.decimal !== ''){
254	172	parts[1] = series.format.decimal;
255		- if ( '' === series.format.precision ) {
256		- series.format.precision = 2;
257		- }
258	173	}
259		- if(typeof series.format.precision !== '' && parseInt(series.format.precision) > 0){
	174	+ if(typeof series.format.precision !== ''){
260	175	parts[2] = series.format.precision;
261	176	}
262	177	if(typeof series.format.prefix !== ''){
263	178	parts[3] = series.format.prefix;
		@@ -273,21 +188,10 @@
273	188	if(typeof series.format.to !== 'undefined' && typeof series.format.from !== 'undefined' && series.format.from != '' && series.format.to !== ''){
274	189	render = $.fn.dataTable.render.moment(series.format.from, series.format.to);
275	190	}
276	191	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		- }
287	192	}
288	193	/* jshint ignore:end */
289		-
290	194	return render;
291	195	}
292	196
293	197	function render(v) {
		@@ -295,16 +199,18 @@
295	199	renderChart(id, v);
296	200	}
297	201	}
298	202
	203	+ if(typeof visualizer !== 'undefined'){
	204	+ // called while updating the chart.
	205	+ visualizer.update = function(){
	206	+ renderChart('canvas', visualizer);
	207	+ };
	208	+ }
	209	+
299	210	$('body').on('visualizer:render:chart:start', function(event, v){
300	211	all_charts = v.charts;
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		- }
	212	+ render(v);
307	213	});
308	214
309	215	$('body').on('visualizer:render:specificchart:start', function(event, v){
310	216	renderSpecificChart(v.id, v.chart, v.v);
		@@ -309,25 +215,8 @@
309	215	$('body').on('visualizer:render:specificchart:start', function(event, v){
310	216	renderSpecificChart(v.id, v.chart, v.v);
311	217	});
312	218
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		- });
330	219
331	220	})(jQuery);
332	221
333	222