← All changes | public/js/chart-builder-public-chartjs.js +258 -25 3.7.5 → 3.8.1 View file →

		@@ -105,8 +105,11 @@
105	105	switch (_this.chartType) {
106	106	case 'pie_chart':
107	107	_this.pieChartView();
108	108	break;
	109	+ case 'donut_chart':
	110	+ _this.donutChartView();
	111	+ break;
109	112	case 'bar_chart':
110	113	_this.barChartView();
111	114	break;
112	115	case 'line_chart':
		@@ -128,8 +131,9 @@
128	131	var dataTypes = _this.chartConvertData( getChartSource );
129	132
130	133	var settings = _this.dbData.options;
131	134	var nSettings = _this.configOptionsForCharts(settings);
	135	+ _this.applyPieDataGrouping(dataTypes, nSettings);
132	136
133	137	// var ctx = document.getElementById(_this.htmlClassPrefix + _this.uniqueId + '-canvas');
134	138	var parentId = _this.htmlClassPrefix + _this.chartType + '-' + _this.uniqueId;
135	139	var canvasId = parentId + '-canvas';
		@@ -163,9 +167,9 @@
163	167	dataTypes.dataSets[0].backgroundColor = [];
164	168	dataTypes.dataSets[0].borderColor = [];
165	169
166	170	for (var i = 0; i < sliceCount; i++) {
167		- dataTypes.dataSets[0].backgroundColor[i] = nSettings.sliceColor?.[i] || nSettings.sliceColorDefault?.[i % nSettings.sliceColorDefault.length];
	171	+ dataTypes.dataSets[0].backgroundColor[i] = i === dataTypes.dataSets[0].groupedSliceIndex ? nSettings.dataGroupingColor : (nSettings.sliceColor?.[i] || nSettings.sliceColorDefault?.[i % nSettings.sliceColorDefault.length]);
168	172	dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent';
169	173	}
170	174	dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth;
171	175	_this.chartObject = new Chart(ctx, {
		@@ -177,40 +181,154 @@
177	181	options: {
178	182	radius: nSettings.outerRadius,
179	183	spacing: nSettings.sliceSpacing,
180	184	circumference: nSettings.circumference,
181		- rotation: nSettings.startAngle,
	185	+ rotation: nSettings.rotationDegree,
182	186	borderColor: nSettings.sliceBorderColor,
	187	+ hover: nSettings.enableInteractivity ? {
	188	+ mode: 'nearest',
	189	+ intersect: true
	190	+ } : {
	191	+ mode: null,
	192	+ intersect: false
	193	+ },
183	194	plugins: {
184	195	tooltip:{
	196	+ enabled: nSettings.enableInteractivity,
185	197	titleColor: nSettings.tooltipColor,
186	198	bodyColor: nSettings.tooltipColor,
187	199	footerColor: nSettings.tooltipColor,
188	200	titleFont: {
189		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	201	+ size: nSettings.tooltipFontSize || 12,
	202	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	203	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
190	204	},
191	205	bodyFont: {
192		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	206	+ size: nSettings.tooltipFontSize || 12,
	207	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	208	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
193	209	},
194	210	footerFont: {
195		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	211	+ size: nSettings.tooltipFontSize || 12,
	212	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	213	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
196	214	},
197	215	position: 'nearest',
198	216	events: ['click'],
199		- callbacks: nSettings.showColorCode ? {
200		- label: function(context) {
201		- var label = context.label || '';
202		- var value = context.parsed || 0;
203		- var color = context.dataset.backgroundColor[context.dataIndex];
204		- return label + ': ' + value + ' (Color: ' + color + ')';
	217	+ callbacks: _this.getTooltipCallbacks(nSettings.tooltipText, nSettings.showColorCode)
	218	+ },
	219	+ legend: {
	220	+ position: nSettings.legendPosition,
	221	+ align: nSettings.legendAlignment,
	222	+ reverse: nSettings.legendReverse,
	223	+ labels: {
	224	+ color: nSettings.legendColor,
	225	+ font: {
	226	+ size: nSettings.legendFontSize,
	227	+ weight: nSettings.legendBoldText ? 'bold' : 'normal',
	228	+ style: nSettings.legendItalicText ? 'italic' : 'normal'
205	229	}
206		- } : {
207		- label: function(context) {
208		- var label = context.label || '';
209		- var value = context.parsed || 0;
210		- return label + ': ' + value;
211		- }
212	230	}
	231	+ }
	232	+ }
	233	+ }
	234	+ });
	235	+
	236	+ _this.resizeChart();
	237	+ }
	238	+
	239	+ // Load chart by pie chart
	240	+ ChartBuilderChartJs.prototype.donutChartView = function(){
	241	+ var _this = this;
	242	+ var getChartSource = _this.dbData.source;
	243	+
	244	+ var dataTypes = _this.chartConvertData( getChartSource );
	245	+
	246	+ var settings = _this.dbData.options;
	247	+ var nSettings = _this.configOptionsForCharts(settings);
	248	+ _this.applyPieDataGrouping(dataTypes, nSettings);
	249	+
	250	+ // var ctx = document.getElementById(_this.htmlClassPrefix + _this.uniqueId + '-canvas');
	251	+ var parentId = _this.htmlClassPrefix + _this.chartType + '-' + _this.uniqueId;
	252	+ var canvasId = parentId + '-canvas';
	253	+
	254	+ var parentElement = document.getElementById(parentId);
	255	+ var canvasElement = document.getElementById(canvasId);
	256	+
	257	+ if (!canvasElement) {
	258	+ canvasElement = document.createElement('canvas');
	259	+ canvasElement.id = canvasId;
	260	+ parentElement.appendChild(canvasElement);
	261	+ }
	262	+
	263	+ var ctx = canvasElement;
	264	+ ctx.width = nSettings.chartWidth;
	265	+ ctx.height = nSettings.chartHeight;
	266	+
	267	+ if (nSettings.chartWidthFormat === 'px') {
	268	+ ctx.width = parseInt(nSettings.chartWidth);
	269	+ } else if (nSettings.chartWidthFormat === '%') {
	270	+ ctx.style.width = nSettings.chartWidth + '%';
	271	+ }
	272	+
	273	+ if (nSettings.chartHeightFormat === 'px') {
	274	+ ctx.height = parseInt(nSettings.chartHeight);
	275	+ } else if (nSettings.chartHeightFormat === '%') {
	276	+ ctx.style.height = nSettings.chartHeight + '%';
	277	+ }
	278	+
	279	+ var sliceCount = dataTypes?.dataSets[0]?.data?.length || 0;
	280	+ dataTypes.dataSets[0].backgroundColor = [];
	281	+ dataTypes.dataSets[0].borderColor = [];
	282	+
	283	+ for (var i = 0; i < sliceCount; i++) {
	284	+ dataTypes.dataSets[0].backgroundColor[i] = nSettings.sliceColor?.[i] || nSettings.sliceColorDefault?.[i % nSettings.sliceColorDefault.length];
	285	+ dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent';
	286	+ }
	287	+ dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth;
	288	+ _this.chartObject = new Chart(ctx, {
	289	+ type: 'doughnut',
	290	+ data: {
	291	+ labels: dataTypes?.labels,
	292	+ datasets: dataTypes?.dataSets,
	293	+ },
	294	+ options: {
	295	+ radius: nSettings.outerRadius,
	296	+ spacing: nSettings.sliceSpacing,
	297	+ circumference: nSettings.circumference,
	298	+ rotation: nSettings.rotationDegree,
	299	+ borderColor: nSettings.sliceBorderColor,
	300	+ hover: nSettings.enableInteractivity ? {
	301	+ mode: 'nearest',
	302	+ intersect: true
	303	+ } : {
	304	+ mode: null,
	305	+ intersect: false
	306	+ },
	307	+ plugins: {
	308	+ tooltip:{
	309	+ enabled: nSettings.enableInteractivity,
	310	+ titleColor: nSettings.tooltipColor,
	311	+ bodyColor: nSettings.tooltipColor,
	312	+ footerColor: nSettings.tooltipColor,
	313	+ titleFont: {
	314	+ size: nSettings.tooltipFontSize || 12,
	315	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	316	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	317	+ },
	318	+ bodyFont: {
	319	+ size: nSettings.tooltipFontSize || 12,
	320	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	321	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	322	+ },
	323	+ footerFont: {
	324	+ size: nSettings.tooltipFontSize || 12,
	325	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	326	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	327	+ },
	328	+ position: 'nearest',
	329	+ events: ['click'],
	330	+ callbacks: _this.getTooltipCallbacks(nSettings.tooltipText, nSettings.showColorCode)
213	331	},
214	332	legend: {
215	333	position: nSettings.legendPosition,
216	334	align: nSettings.legendAlignment,
		@@ -276,21 +394,35 @@
276	394	labels: dataTypes?.labels,
277	395	datasets: dataTypes?.dataSets,
278	396	},
279	397	options: {
	398	+ hover: nSettings.enableInteractivity ? {
	399	+ mode: 'nearest',
	400	+ intersect: true
	401	+ } : {
	402	+ mode: null,
	403	+ intersect: false
	404	+ },
280	405	plugins: {
281	406	tooltip:{
	407	+ enabled: nSettings.enableInteractivity,
282	408	titleColor: nSettings.tooltipColor,
283	409	bodyColor: nSettings.tooltipColor,
284	410	footerColor: nSettings.tooltipColor,
285	411	titleFont: {
286		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	412	+ size: nSettings.tooltipFontSize || 12,
	413	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	414	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
287	415	},
288	416	bodyFont: {
289		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	417	+ size: nSettings.tooltipFontSize || 12,
	418	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	419	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
290	420	},
291	421	footerFont: {
292		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	422	+ size: nSettings.tooltipFontSize || 12,
	423	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	424	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
293	425	},
294	426	},
295	427	legend: {
296	428	position: nSettings.legendPosition,
		@@ -358,21 +490,35 @@
358	490	datasets: dataTypes?.dataSets,
359	491	},
360	492	options: {
361	493	maintainAspectRatio: false,
	494	+ hover: nSettings.enableInteractivity ? {
	495	+ mode: 'nearest',
	496	+ intersect: true
	497	+ } : {
	498	+ mode: null,
	499	+ intersect: false
	500	+ },
362	501	plugins: {
363	502	tooltip:{
	503	+ enabled: nSettings.enableInteractivity,
364	504	titleColor: nSettings.tooltipColor,
365	505	bodyColor: nSettings.tooltipColor,
366	506	footerColor: nSettings.tooltipColor,
367	507	titleFont: {
368		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	508	+ size: nSettings.tooltipFontSize || 12,
	509	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	510	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
369	511	},
370	512	bodyFont: {
371		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	513	+ size: nSettings.tooltipFontSize || 12,
	514	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	515	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
372	516	},
373	517	footerFont: {
374		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	518	+ size: nSettings.tooltipFontSize || 12,
	519	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	520	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
375	521	},
376	522	},
377	523	legend: {
378	524	position: nSettings.legendPosition,
		@@ -407,13 +553,17 @@
407	553	newSettings.outerRadius = settings['outer_radius'];
408	554	newSettings.sliceSpacing = settings['slice_spacing'];
409	555	newSettings.circumference = settings['circumference'];
410	556	newSettings.startAngle = settings['start_angle'];
	557	+ newSettings.rotationDegree = settings['rotation_degree'];
411	558	newSettings.sliceColor = settings['slice_color'];
412	559	newSettings.slicesBorderColor = settings['slices_border_color'];
413	560	newSettings.sliceColorDefault = settings['slice_colors_default'];
414	561	newSettings.sliceBorderWidth = settings['slice_border_width'];
415	562	newSettings.sliceBorderColor = settings['slice_border_color'];
	563	+ newSettings.dataGroupingLimit = parseFloat(settings['data_grouping_limit']) / 100;
	564	+ newSettings.dataGroupingLabel = settings['data_grouping_label'];
	565	+ newSettings.dataGroupingColor = settings['data_grouping_color'];
416	566	newSettings.legendPosition = settings['legend_position'];
417	567	newSettings.legendAlignment = settings['legend_alignment'];
418	568	newSettings.legendColor = settings['legend_color'];
419	569	newSettings.legendFontSize = settings['legend_font_size'];
		@@ -420,14 +570,51 @@
420	570	newSettings.legendReverse = settings['legend_reverse'];
421	571	newSettings.legendItalicText = (settings['legend_italic'] == 'on') ? true : false;
422	572	newSettings.legendBoldText = (settings['legend_bold'] == 'on') ? true : false;
423	573	newSettings.tooltipColor = settings['tooltip_text_color'];
424		-console.log('tooltip_italic value:', settings['tooltip_italic']);
425		-newSettings.tooltipItalicText = (settings['tooltip_italic'] == 'italic') ? true : false;
	574	+ newSettings.tooltipItalicText = (settings['tooltip_italic'] == 'italic') ? true : false;
	575	+ newSettings.tooltipFontSize = settings['tooltip_font_size'];
	576	+ newSettings.tooltipBoldText = settings['tooltip_bold'];
426	577	newSettings.showColorCode = (settings['show_color_code'] == 'checked') ? true : false;
	578	+ newSettings.tooltipText = settings['tooltip_text'];
	579	+ newSettings.enableInteractivity = (settings['enable_interactivity'] == 'off') ? false : true;
427	580	return newSettings;
428	581	}
429	582
	583	+ ChartBuilderChartJs.prototype.applyPieDataGrouping = function (dataTypes, settings) {
	584	+ var groupingLimit = parseFloat(settings.dataGroupingLimit);
	585	+ var dataSet = dataTypes && dataTypes.dataSets && dataTypes.dataSets[0];
	586	+
	587	+ if (!(groupingLimit > 0) || !dataSet || !Array.isArray(dataSet.data)) {
	588	+ return;
	589	+ }
	590	+
	591	+ var total = dataSet.data.reduce(function (sum, value) {
	592	+ return sum + (Number(value) || 0);
	593	+ }, 0);
	594	+ var groupedValue = 0;
	595	+ var groupedSlices = 0;
	596	+ var labels = [];
	597	+ var values = [];
	598	+
	599	+ dataSet.data.forEach(function (value, index) {
	600	+ var numericValue = Number(value) || 0;
	601	+ if (total > 0 && numericValue / total < groupingLimit) {
	602	+ groupedValue += numericValue;
	603	+ groupedSlices++;
	604	+ } else {
	605	+ labels.push(dataTypes.labels[index]);
	606	+ values.push(numericValue);
	607	+ }
	608	+ });
	609	+
	610	+ if (groupedSlices > 0) {
	611	+ dataTypes.labels = labels.concat([settings.dataGroupingLabel]);
	612	+ dataSet.data = values.concat([groupedValue]);
	613	+ dataSet.groupedSliceIndex = values.length;
	614	+ }
	615	+ }
	616	+
430	617	// Detect window resize moment to draw charts responsively
431	618	ChartBuilderChartJs.prototype.resizeChart = function(){
432	619	var _this = this;
433	620
		@@ -468,8 +655,54 @@
468	655	data: item.slice(1).map(Number),
469	656	}));
470	657
471	658	return {labels, dataSets};
	659	+ }
	660	+
	661	+ ChartBuilderChartJs.prototype.getTooltipCallbacks = function(tooltipText, showColorCode) {
	662	+ var _this = this;
	663	+ if (showColorCode === true) {
	664	+ return {
	665	+ label: function(context) {
	666	+ var label = context.label || '';
	667	+ var value = context.parsed || 0;
	668	+ var color = context.dataset.backgroundColor[context.dataIndex];
	669	+ return ' ' + label + ': ' + value + ' (Color: ' + color + ')';
	670	+ }
	671	+ };
	672	+ } else {
	673	+ switch(tooltipText) {
	674	+ case 'percentage':
	675	+ return {
	676	+ label: function(context) {
	677	+ var label = context.label || '';
	678	+ var value = context.parsed || 0;
	679	+ var total = context.chart._metasets[context.datasetIndex].total;
	680	+ var percentage = ((value / total) * 100).toFixed(1) + '%';
	681	+ return ' ' + label + ': ' + percentage;
	682	+ }
	683	+ };
	684	+ case 'both':
	685	+ return {
	686	+ label: function(context) {
	687	+ var label = context.label || '';
	688	+ var value = context.parsed || 0;
	689	+ var total = context.chart._metasets[context.datasetIndex].total;
	690	+ var percentage = ((value / total) * 100).toFixed(1) + '%';
	691	+ return ' ' + label + ': ' + value + ' (' + percentage + ')';
	692	+ }
	693	+ };
	694	+ case 'value':
	695	+ default:
	696	+ return {
	697	+ label: function(context) {
	698	+ var label = context.label || '';
	699	+ var value = context.parsed || 0;
	700	+ return ' ' + label + ': ' + value;
	701	+ }
	702	+ };
	703	+ }
	704	+ }
472	705	}
473	706
474	707	// Update chart data and display immediately
475	708	ChartBuilderChartJs.prototype.updateChartData = function( newData ){