← All changes | admin/js/chart-builder-admin-chartjs.js +103 -37 3.7.8 → 3.8.1 View file →

		@@ -448,8 +448,16 @@
448	448	_this.chartSourceData.settings.rotation_degree = $(this).val();
449	449	_this.chartObject.options.rotation = _this.chartSourceData.settings.rotation_degree;
450	450	_this.chartObject.update();
451	451	});
	452	+
	453	+ _this.$el.find('#'+_this.htmlClassPrefix+'option-data-grouping-limit, #'+_this.htmlClassPrefix+'option-data-grouping-label, #'+_this.htmlClassPrefix+'option-data-grouping-color').on('input', function () {
	454	+ _this.chartSourceData.settings.data_grouping_limit = _this.$el.find('#'+_this.htmlClassPrefix+'option-data-grouping-limit').val();
	455	+ _this.chartSourceData.settings.data_grouping_label = _this.$el.find('#'+_this.htmlClassPrefix+'option-data-grouping-label').val();
	456	+ _this.chartSourceData.settings.data_grouping_color = _this.$el.find('#'+_this.htmlClassPrefix+'option-data-grouping-color').val();
	457	+ _this.chartObject.destroy();
	458	+ _this.loadChartBySource();
	459	+ });
452	460	// Slices settings
453	461	_this.$el.find('.'+_this.htmlClassPrefix+'option-slice-color').on('input', function () {
454	462	var id = $(this).attr('data-slice-id');
455	463	_this.chartSourceData.settings.slice_color[id] = $(this).val();
		@@ -488,11 +496,17 @@
488	496	_this.chartObject.options.plugins.tooltip.bodyColor = _this.chartSourceData.settings.tooltip_text_color;
489	497	_this.chartObject.update();
490	498	});
491	499
	500	+ _this.$el.find('#'+_this.htmlClassPrefix+'option-tooltip-text').on('change', function () {
	501	+ _this.chartSourceData.settings.tooltip_text = $(this).val();
	502	+ _this.chartObject.options.plugins.tooltip.callbacks = _this.getTooltipCallbacks(_this.chartSourceData.settings.tooltip_text, _this.chartSourceData.settings.show_color_code);
	503	+ _this.chartObject.update();
	504	+ });
	505	+
492	506	_this.$el.find('#'+_this.htmlClassPrefix+'option-show-color-code').on('change', function () {
493	507	_this.chartSourceData.settings.show_color_code = $(this).is(':checked') ? 'checked' : '';
494		- _this.updateTooltipColorCode();
	508	+ _this.chartObject.options.plugins.tooltip.callbacks = _this.getTooltipCallbacks(_this.chartSourceData.settings.tooltip_text, _this.chartSourceData.settings.show_color_code);
495	509	_this.chartObject.update();
496	510	});
497	511
498	512	_this.$el.find('#'+_this.htmlClassPrefix+'option-tooltip-italic').on('change', function () {
		@@ -587,31 +601,11 @@
587	601	}
588	602
589	603	ChartBuilderChartsJs.prototype.updateTooltipColorCode = function() {
590	604	var _this = this;
591		- var showColorCode = _this.chartSourceData.settings.show_color_code === 'checked';
592		-
593	605	_this.chartObject.options.plugins.tooltip.events = ['click'];
594		-
595		- if (showColorCode) {
596		- _this.chartObject.options.plugins.tooltip.callbacks = {
597		- label: function(context) {
598		- var label = context.label || '';
599		- var value = context.parsed || context.parsed.y || 0;
600		- var color = context.dataset.backgroundColor[context.dataIndex];
601		- return label + ': ' + value + ' (Color: ' + color + ')';
602		- }
603		- };
604		- } else {
605		- _this.chartObject.options.plugins.tooltip.callbacks = {
606		- label: function(context) {
607		- var label = context.label || '';
608		- var value = context.parsed || context.parsed.y || 0;
609		- return label + ': ' + value;
610		- }
611		- };
612		- }
613		- }
	606	+ _this.chartObject.options.plugins.tooltip.callbacks = _this.getTooltipCallbacks(_this.chartSourceData.settings.tooltip_text, _this.chartSourceData.settings.show_color_code);
	607	+ };
614	608
615	609	ChartBuilderChartsJs.prototype.updateTooltipItalic = function() {
616	610	var _this = this;
617	611	var isItalic = _this.chartSourceData.settings.tooltip_italic === 'checked';
		@@ -923,8 +917,9 @@
923	917	var dataTypes = _this.chartConvertData( getChartSource );
924	918
925	919	var settings = _this.chartSourceData.settings;
926	920	var nSettings = _this.configOptionsForCharts(settings);
	921	+ _this.applyPieDataGrouping(dataTypes, nSettings);
927	922
928	923	var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
929	924
930	925	ctx.width = nSettings.chartWidth;
		@@ -946,9 +941,9 @@
946	941	dataTypes.dataSets[0].backgroundColor = [];
947	942	dataTypes.dataSets[0].borderColor = [];
948	943
949	944	for (var i = 0; i < sliceCount; i++) {
950		- dataTypes.dataSets[0].backgroundColor[i] = nSettings.sliceColor?.[i] || nSettings.sliceColorDefault?.[i % nSettings.sliceColorDefault.length];
	945	+ dataTypes.dataSets[0].backgroundColor[i] = i === dataTypes.dataSets[0].groupedSliceIndex ? nSettings.dataGroupingColor : (nSettings.sliceColor?.[i] || nSettings.sliceColorDefault?.[i % nSettings.sliceColorDefault.length]);
951	946	dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent';
952	947	}
953	948	dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth;
954	949	_this.chartObject = new Chart(ctx, {
		@@ -985,20 +980,9 @@
985	980	weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
986	981	},
987	982	position: 'nearest',
988	983	events: ['click'],
989		- callbacks: nSettings.showColorCode ? {
990		- label: function(context) {
991		- var color = context.dataset.backgroundColor[context.dataIndex];
992		- return 'Color: ' + color;
993		- }
994		- } : {
995		- label: function(context) {
996		- var label = context.label || '';
997		- var value = context.parsed || 0;
998		- return label + ': ' + value;
999		- }
1000		- }
	984	+ callbacks: _this.getTooltipCallbacks(nSettings.tooltipText, nSettings.showColorCode)
1001	985	},
1002	986	legend: {
1003	987	position: nSettings.legendPosition,
1004	988	reverse: nSettings.legendReverse,
		@@ -1191,8 +1175,11 @@
1191	1175	newSettings.slicesBorderColor = settings['slices_border_color'];
1192	1176	newSettings.sliceColorDefault = settings['slice_colors_default'];
1193	1177	newSettings.sliceBorderWidth = settings['slice_border_width'];
1194	1178	newSettings.sliceBorderColor = settings['slice_border_color'];
	1179	+ newSettings.dataGroupingLimit = parseFloat(settings['data_grouping_limit']) / 100;
	1180	+ newSettings.dataGroupingLabel = settings['data_grouping_label'];
	1181	+ newSettings.dataGroupingColor = settings['data_grouping_color'];
1195	1182	newSettings.legendColor = settings['legend_color'];
1196	1183	newSettings.legendPosition = settings['legend_position'];
1197	1184	newSettings.legendAlignment = settings['legend_alignment'];
1198	1185	newSettings.legendFontSize = settings['legend_font_size'];
		@@ -1199,15 +1186,50 @@
1199	1186	newSettings.legendItalicText = (settings['legend_italic'] == 'checked') ? true : false;
1200	1187	newSettings.legendBoldText = (settings['legend_bold'] == 'checked') ? true : false;
1201	1188	newSettings.legendReverse = settings['legend_reverse'];
1202	1189	newSettings.tooltipColor = settings['tooltip_text_color'];
1203		- newSettings.showColorCode = (settings['show_color_code'] == 'checked') ? true : false;
	1190	+ newSettings.showColorCode = settings['show_color_code'];
1204	1191	newSettings.tooltipItalicText = (settings['tooltip_italic'] == 'checked') ? true : false;
1205	1192	newSettings.tooltipFontSize = settings['tooltip_font_size'];
1206	1193	newSettings.tooltipBoldText = settings['tooltip_bold'];
	1194	+ newSettings.tooltipText = settings['tooltip_text'];
1207	1195	return newSettings;
1208	1196	}
1209	1197
	1198	+ ChartBuilderChartsJs.prototype.applyPieDataGrouping = function (dataTypes, settings) {
	1199	+ var groupingLimit = parseFloat(settings.dataGroupingLimit);
	1200	+ var dataSet = dataTypes && dataTypes.dataSets && dataTypes.dataSets[0];
	1201	+
	1202	+ if (!(groupingLimit > 0) || !dataSet || !Array.isArray(dataSet.data)) {
	1203	+ return;
	1204	+ }
	1205	+
	1206	+ var total = dataSet.data.reduce(function (sum, value) {
	1207	+ return sum + (Number(value) || 0);
	1208	+ }, 0);
	1209	+ var groupedValue = 0;
	1210	+ var groupedSlices = 0;
	1211	+ var labels = [];
	1212	+ var values = [];
	1213	+
	1214	+ dataSet.data.forEach(function (value, index) {
	1215	+ var numericValue = Number(value) || 0;
	1216	+ if (total > 0 && numericValue / total < groupingLimit) {
	1217	+ groupedValue += numericValue;
	1218	+ groupedSlices++;
	1219	+ } else {
	1220	+ labels.push(dataTypes.labels[index]);
	1221	+ values.push(numericValue);
	1222	+ }
	1223	+ });
	1224	+
	1225	+ if (groupedSlices > 0) {
	1226	+ dataTypes.labels = labels.concat([settings.dataGroupingLabel]);
	1227	+ dataSet.data = values.concat([groupedValue]);
	1228	+ dataSet.groupedSliceIndex = values.length;
	1229	+ }
	1230	+ }
	1231	+
1210	1232	// Detect window resize moment to draw charts responsively
1211	1233	ChartBuilderChartsJs.prototype.resizeChart = function(){
1212	1234	var _this = this;
1213	1235
		@@ -1303,8 +1325,52 @@
1303	1325	datasets: newData?.dataSets,
1304	1326	},
1305	1327	_this.chartObject.update();
1306	1328	}
	1329	+
	1330	+ ChartBuilderChartsJs.prototype.getTooltipCallbacks = function(tooltipText, showColorCode) {
	1331	+ var _this = this;
	1332	+ if (showColorCode === 'checked' || showColorCode === true) {
	1333	+ return {
	1334	+ label: function(context) {
	1335	+ var color = context.dataset.backgroundColor[context.dataIndex];
	1336	+ return ' Color: ' + color;
	1337	+ }
	1338	+ };
	1339	+ } else {
	1340	+ switch(tooltipText) {
	1341	+ case 'percentage':
	1342	+ return {
	1343	+ label: function(context) {
	1344	+ var label = context.label || '';
	1345	+ var value = context.parsed || 0;
	1346	+ var total = context.chart._metasets[context.datasetIndex].total;
	1347	+ var percentage = ((value / total) * 100).toFixed(1) + '%';
	1348	+ return ' ' + label + ': ' + percentage;
	1349	+ }
	1350	+ };
	1351	+ case 'both':
	1352	+ return {
	1353	+ label: function(context) {
	1354	+ var label = context.label || '';
	1355	+ var value = context.parsed || 0;
	1356	+ var total = context.chart._metasets[context.datasetIndex].total;
	1357	+ var percentage = ((value / total) * 100).toFixed(1) + '%';
	1358	+ return ' ' + label + ': ' + value + ' (' + percentage + ')';
	1359	+ }
	1360	+ };
	1361	+ case 'value':
	1362	+ default:
	1363	+ return {
	1364	+ label: function(context) {
	1365	+ var label = context.label || '';
	1366	+ var value = context.parsed || 0;
	1367	+ return ' ' + label + ': ' + value;
	1368	+ }
	1369	+ };
	1370	+ }
	1371	+ }
	1372	+ };
1307	1373
1308	1374	ChartBuilderChartsJs.prototype.addChartDataRow = function (element){
1309	1375	var _this = this;
1310	1376	var content = '';