← All changes | admin/js/chart-builder-admin-chartjs.js +110 -38 3.7.7 → 3.8.1 View file →

		@@ -443,8 +443,21 @@
443	443	_this.chartObject.options.rotation = _this.chartSourceData.settings.start_angle;
444	444	_this.chartObject.update();
445	445	});
446	446
	447	+ _this.$el.find('#'+_this.htmlClassPrefix+'option-rotation-degree').on('input', function () {
	448	+ _this.chartSourceData.settings.rotation_degree = $(this).val();
	449	+ _this.chartObject.options.rotation = _this.chartSourceData.settings.rotation_degree;
	450	+ _this.chartObject.update();
	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	+ });
447	460	// Slices settings
448	461	_this.$el.find('.'+_this.htmlClassPrefix+'option-slice-color').on('input', function () {
449	462	var id = $(this).attr('data-slice-id');
450	463	_this.chartSourceData.settings.slice_color[id] = $(this).val();
		@@ -483,11 +496,17 @@
483	496	_this.chartObject.options.plugins.tooltip.bodyColor = _this.chartSourceData.settings.tooltip_text_color;
484	497	_this.chartObject.update();
485	498	});
486	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	+
487	506	_this.$el.find('#'+_this.htmlClassPrefix+'option-show-color-code').on('change', function () {
488	507	_this.chartSourceData.settings.show_color_code = $(this).is(':checked') ? 'checked' : '';
489		- _this.updateTooltipColorCode();
	508	+ _this.chartObject.options.plugins.tooltip.callbacks = _this.getTooltipCallbacks(_this.chartSourceData.settings.tooltip_text, _this.chartSourceData.settings.show_color_code);
490	509	_this.chartObject.update();
491	510	});
492	511
493	512	_this.$el.find('#'+_this.htmlClassPrefix+'option-tooltip-italic').on('change', function () {
		@@ -582,31 +601,11 @@
582	601	}
583	602
584	603	ChartBuilderChartsJs.prototype.updateTooltipColorCode = function() {
585	604	var _this = this;
586		- var showColorCode = _this.chartSourceData.settings.show_color_code === 'checked';
587		-
588	605	_this.chartObject.options.plugins.tooltip.events = ['click'];
589		-
590		- if (showColorCode) {
591		- _this.chartObject.options.plugins.tooltip.callbacks = {
592		- label: function(context) {
593		- var label = context.label || '';
594		- var value = context.parsed || context.parsed.y || 0;
595		- var color = context.dataset.backgroundColor[context.dataIndex];
596		- return label + ': ' + value + ' (Color: ' + color + ')';
597		- }
598		- };
599		- } else {
600		- _this.chartObject.options.plugins.tooltip.callbacks = {
601		- label: function(context) {
602		- var label = context.label || '';
603		- var value = context.parsed || context.parsed.y || 0;
604		- return label + ': ' + value;
605		- }
606		- };
607		- }
608		- }
	606	+ _this.chartObject.options.plugins.tooltip.callbacks = _this.getTooltipCallbacks(_this.chartSourceData.settings.tooltip_text, _this.chartSourceData.settings.show_color_code);
	607	+ };
609	608
610	609	ChartBuilderChartsJs.prototype.updateTooltipItalic = function() {
611	610	var _this = this;
612	611	var isItalic = _this.chartSourceData.settings.tooltip_italic === 'checked';
		@@ -918,8 +917,9 @@
918	917	var dataTypes = _this.chartConvertData( getChartSource );
919	918
920	919	var settings = _this.chartSourceData.settings;
921	920	var nSettings = _this.configOptionsForCharts(settings);
	921	+ _this.applyPieDataGrouping(dataTypes, nSettings);
922	922
923	923	var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
924	924
925	925	ctx.width = nSettings.chartWidth;
		@@ -941,9 +941,9 @@
941	941	dataTypes.dataSets[0].backgroundColor = [];
942	942	dataTypes.dataSets[0].borderColor = [];
943	943
944	944	for (var i = 0; i < sliceCount; i++) {
945		- 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]);
946	946	dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent';
947	947	}
948	948	dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth;
949	949	_this.chartObject = new Chart(ctx, {
		@@ -955,9 +955,9 @@
955	955	options: {
956	956	radius: nSettings.outerRadius,
957	957	spacing: nSettings.sliceSpacing,
958	958	circumference: nSettings.circumference,
959		- rotation: nSettings.startAngle,
	959	+ rotation: nSettings.rotationDegree,
960	960	borderColor: nSettings.sliceBorderColor,
961	961	plugins: {
962	962	maintainAspectRatio: false,
963	963	tooltip:{
		@@ -980,20 +980,9 @@
980	980	weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
981	981	},
982	982	position: 'nearest',
983	983	events: ['click'],
984		- callbacks: nSettings.showColorCode ? {
985		- label: function(context) {
986		- var color = context.dataset.backgroundColor[context.dataIndex];
987		- return 'Color: ' + color;
988		- }
989		- } : {
990		- label: function(context) {
991		- var label = context.label || '';
992		- var value = context.parsed || 0;
993		- return label + ': ' + value;
994		- }
995		- }
	984	+ callbacks: _this.getTooltipCallbacks(nSettings.tooltipText, nSettings.showColorCode)
996	985	},
997	986	legend: {
998	987	position: nSettings.legendPosition,
999	988	reverse: nSettings.legendReverse,
		@@ -1180,13 +1169,17 @@
1180	1169	newSettings.outerRadius = settings['outer_radius'];
1181	1170	newSettings.sliceSpacing = settings['slice_spacing'];
1182	1171	newSettings.circumference = settings['circumference'];
1183	1172	newSettings.startAngle = settings['start_angle'];
	1173	+ newSettings.rotationDegree = settings['rotation_degree'];
1184	1174	newSettings.sliceColor = settings['slice_color'];
1185	1175	newSettings.slicesBorderColor = settings['slices_border_color'];
1186	1176	newSettings.sliceColorDefault = settings['slice_colors_default'];
1187	1177	newSettings.sliceBorderWidth = settings['slice_border_width'];
1188	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'];
1189	1182	newSettings.legendColor = settings['legend_color'];
1190	1183	newSettings.legendPosition = settings['legend_position'];
1191	1184	newSettings.legendAlignment = settings['legend_alignment'];
1192	1185	newSettings.legendFontSize = settings['legend_font_size'];
		@@ -1193,15 +1186,50 @@
1193	1186	newSettings.legendItalicText = (settings['legend_italic'] == 'checked') ? true : false;
1194	1187	newSettings.legendBoldText = (settings['legend_bold'] == 'checked') ? true : false;
1195	1188	newSettings.legendReverse = settings['legend_reverse'];
1196	1189	newSettings.tooltipColor = settings['tooltip_text_color'];
1197		- newSettings.showColorCode = (settings['show_color_code'] == 'checked') ? true : false;
	1190	+ newSettings.showColorCode = settings['show_color_code'];
1198	1191	newSettings.tooltipItalicText = (settings['tooltip_italic'] == 'checked') ? true : false;
1199	1192	newSettings.tooltipFontSize = settings['tooltip_font_size'];
1200	1193	newSettings.tooltipBoldText = settings['tooltip_bold'];
	1194	+ newSettings.tooltipText = settings['tooltip_text'];
1201	1195	return newSettings;
1202	1196	}
1203	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	+
1204	1232	// Detect window resize moment to draw charts responsively
1205	1233	ChartBuilderChartsJs.prototype.resizeChart = function(){
1206	1234	var _this = this;
1207	1235
		@@ -1297,8 +1325,52 @@
1297	1325	datasets: newData?.dataSets,
1298	1326	},
1299	1327	_this.chartObject.update();
1300	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	+ };
1301	1373
1302	1374	ChartBuilderChartsJs.prototype.addChartDataRow = function (element){
1303	1375	var _this = this;
1304	1376	var content = '';