← All changes | admin/js/chart-builder-admin-chartjs.js +292 -43 3.7.5 → 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 () {
		@@ -495,8 +514,20 @@
495	514	_this.updateTooltipItalic();
496	515	_this.chartObject.update();
497	516	});
498	517
	518	+ _this.$el.find('#'+_this.htmlClassPrefix+'option-tooltip-font-size').on('input', function () {
	519	+ _this.chartSourceData.settings.tooltip_font_size = $(this).val();
	520	+ _this.updateTooltipFontSize();
	521	+ _this.chartObject.update();
	522	+ });
	523	+
	524	+ _this.$el.find('#'+_this.htmlClassPrefix+'option-tooltip-bold').on('change', function () {
	525	+ _this.chartSourceData.settings.tooltip_bold = $(this).val();
	526	+ _this.updateTooltipBold();
	527	+ _this.chartObject.update();
	528	+ });
	529	+
499	530	// legend settings
500	531	_this.$el.find('#'+_this.htmlClassPrefix+'option-legend-position').on('change', function () {
501	532	_this.chartSourceData.settings.legend_position = $(this).val();
502	533	_this.chartObject.options.plugins.legend.position = _this.chartSourceData.settings.legend_position;
		@@ -538,36 +569,44 @@
538	569	_this.chartObject.options.plugins.legend.labels.font.weight = _this.chartSourceData.settings.legend_bold ? 'bold' : 'normal';
539	570	_this.chartObject.update();
540	571	});
541	572
	573	+ // interactivity settings
	574	+ _this.$el.find('#'+_this.htmlClassPrefix+'option-enable-interactivity').on('change', function () {
	575	+ _this.chartSourceData.settings.enable_interactivity = $(this).is(':checked') ? 'checked' : '';
	576	+ _this.updateInteractivity();
	577	+ _this.chartObject.update();
	578	+ });
	579	+
542	580	}
543	581
544		- ChartBuilderChartsJs.prototype.updateTooltipColorCode = function() {
	582	+ ChartBuilderChartsJs.prototype.updateInteractivity = function() {
545	583	var _this = this;
546		- var showColorCode = _this.chartSourceData.settings.show_color_code === 'checked';
	584	+ var enableInteractivity = _this.chartSourceData.settings.enable_interactivity === 'checked';
547	585
548		- _this.chartObject.options.plugins.tooltip.events = ['click'];
549		-
550		- if (showColorCode) {
551		- _this.chartObject.options.plugins.tooltip.callbacks = {
552		- label: function(context) {
553		- var label = context.label || '';
554		- var value = context.parsed || context.parsed.y || 0;
555		- var color = context.dataset.backgroundColor[context.dataIndex];
556		- return label + ': ' + value + ' (Color: ' + color + ')';
557		- }
	586	+ if (enableInteractivity) {
	587	+ // Enable tooltips and hover
	588	+ _this.chartObject.options.plugins.tooltip.enabled = true;
	589	+ _this.chartObject.options.hover = {
	590	+ mode: 'nearest',
	591	+ intersect: true
558	592	};
559	593	} else {
560		- _this.chartObject.options.plugins.tooltip.callbacks = {
561		- label: function(context) {
562		- var label = context.label || '';
563		- var value = context.parsed || context.parsed.y || 0;
564		- return label + ': ' + value;
565		- }
	594	+ // Disable tooltips and hover
	595	+ _this.chartObject.options.plugins.tooltip.enabled = false;
	596	+ _this.chartObject.options.hover = {
	597	+ mode: null,
	598	+ intersect: false
566	599	};
567	600	}
568	601	}
569	602
	603	+ ChartBuilderChartsJs.prototype.updateTooltipColorCode = function() {
	604	+ var _this = this;
	605	+ _this.chartObject.options.plugins.tooltip.events = ['click'];
	606	+ _this.chartObject.options.plugins.tooltip.callbacks = _this.getTooltipCallbacks(_this.chartSourceData.settings.tooltip_text, _this.chartSourceData.settings.show_color_code);
	607	+ };
	608	+
570	609	ChartBuilderChartsJs.prototype.updateTooltipItalic = function() {
571	610	var _this = this;
572	611	var isItalic = _this.chartSourceData.settings.tooltip_italic === 'checked';
573	612
		@@ -596,8 +635,84 @@
596	635	};
597	636	}
598	637	}
599	638
	639	+ ChartBuilderChartsJs.prototype.updateTooltipFontSize = function() {
	640	+ var _this = this;
	641	+ var fontSize = parseInt(_this.chartSourceData.settings.tooltip_font_size) || 12;
	642	+
	643	+ // Set tooltip font size based on setting
	644	+ if (_this.chartObject.options.plugins.tooltip.titleFont) {
	645	+ _this.chartObject.options.plugins.tooltip.titleFont.size = fontSize;
	646	+ } else {
	647	+ _this.chartObject.options.plugins.tooltip.titleFont = {
	648	+ size: fontSize
	649	+ };
	650	+ }
	651	+
	652	+ if (_this.chartObject.options.plugins.tooltip.bodyFont) {
	653	+ _this.chartObject.options.plugins.tooltip.bodyFont.size = fontSize;
	654	+ } else {
	655	+ _this.chartObject.options.plugins.tooltip.bodyFont = {
	656	+ size: fontSize
	657	+ };
	658	+ }
	659	+
	660	+ if (_this.chartObject.options.plugins.tooltip.footerFont) {
	661	+ _this.chartObject.options.plugins.tooltip.footerFont.size = fontSize;
	662	+ } else {
	663	+ _this.chartObject.options.plugins.tooltip.footerFont = {
	664	+ size: fontSize
	665	+ };
	666	+ }
	667	+ }
	668	+
	669	+ ChartBuilderChartsJs.prototype.updateTooltipBold = function() {
	670	+ var _this = this;
	671	+ var boldSetting = _this.chartSourceData.settings.tooltip_bold;
	672	+ var isBold = boldSetting === 'true';
	673	+
	674	+ // Set tooltip font weight based on bold setting
	675	+ if (boldSetting === 'default') {
	676	+ // Use default (remove custom weight)
	677	+ if (_this.chartObject.options.plugins.tooltip.titleFont) {
	678	+ delete _this.chartObject.options.plugins.tooltip.titleFont.weight;
	679	+ }
	680	+ if (_this.chartObject.options.plugins.tooltip.bodyFont) {
	681	+ delete _this.chartObject.options.plugins.tooltip.bodyFont.weight;
	682	+ }
	683	+ if (_this.chartObject.options.plugins.tooltip.footerFont) {
	684	+ delete _this.chartObject.options.plugins.tooltip.footerFont.weight;
	685	+ }
	686	+ } else {
	687	+ var weight = isBold ? 'bold' : 'normal';
	688	+
	689	+ if (_this.chartObject.options.plugins.tooltip.titleFont) {
	690	+ _this.chartObject.options.plugins.tooltip.titleFont.weight = weight;
	691	+ } else {
	692	+ _this.chartObject.options.plugins.tooltip.titleFont = {
	693	+ weight: weight
	694	+ };
	695	+ }
	696	+
	697	+ if (_this.chartObject.options.plugins.tooltip.bodyFont) {
	698	+ _this.chartObject.options.plugins.tooltip.bodyFont.weight = weight;
	699	+ } else {
	700	+ _this.chartObject.options.plugins.tooltip.bodyFont = {
	701	+ weight: weight
	702	+ };
	703	+ }
	704	+
	705	+ if (_this.chartObject.options.plugins.tooltip.footerFont) {
	706	+ _this.chartObject.options.plugins.tooltip.footerFont.weight = weight;
	707	+ } else {
	708	+ _this.chartObject.options.plugins.tooltip.footerFont = {
	709	+ weight: weight
	710	+ };
	711	+ }
	712	+ }
	713	+ }
	714	+
600	715	ChartBuilderChartsJs.prototype.detectManualChange = function (e) {
601	716	var input = $(document).find('input[name="ays_source_type"]');
602	717	if (input.val() !== 'manual') input.val('manual');
603	718	}
		@@ -802,8 +917,9 @@
802	917	var dataTypes = _this.chartConvertData( getChartSource );
803	918
804	919	var settings = _this.chartSourceData.settings;
805	920	var nSettings = _this.configOptionsForCharts(settings);
	921	+ _this.applyPieDataGrouping(dataTypes, nSettings);
806	922
807	923	var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas');
808	924
809	925	ctx.width = nSettings.chartWidth;
		@@ -825,9 +941,9 @@
825	941	dataTypes.dataSets[0].backgroundColor = [];
826	942	dataTypes.dataSets[0].borderColor = [];
827	943
828	944	for (var i = 0; i < sliceCount; i++) {
829		- 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]);
830	946	dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent';
831	947	}
832	948	dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth;
833	949	_this.chartObject = new Chart(ctx, {
		@@ -839,9 +955,9 @@
839	955	options: {
840	956	radius: nSettings.outerRadius,
841	957	spacing: nSettings.sliceSpacing,
842	958	circumference: nSettings.circumference,
843		- rotation: nSettings.startAngle,
	959	+ rotation: nSettings.rotationDegree,
844	960	borderColor: nSettings.sliceBorderColor,
845	961	plugins: {
846	962	maintainAspectRatio: false,
847	963	tooltip:{
		@@ -848,30 +964,25 @@
848	964	titleColor: nSettings.tooltipColor,
849	965	bodyColor: nSettings.tooltipColor,
850	966	footerColor: nSettings.tooltipColor,
851	967	titleFont: {
852		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	968	+ size: nSettings.tooltipFontSize || 12,
	969	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	970	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
853	971	},
854	972	bodyFont: {
855		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	973	+ size: nSettings.tooltipFontSize || 12,
	974	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	975	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
856	976	},
857	977	footerFont: {
858		- style: nSettings.tooltipItalicText ? 'italic' : 'normal'
	978	+ size: nSettings.tooltipFontSize || 12,
	979	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	980	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
859	981	},
860	982	position: 'nearest',
861	983	events: ['click'],
862		- callbacks: nSettings.showColorCode ? {
863		- label: function(context) {
864		- var color = context.dataset.backgroundColor[context.dataIndex];
865		- return 'Color: ' + color;
866		- }
867		- } : {
868		- label: function(context) {
869		- var label = context.label || '';
870		- var value = context.parsed || 0;
871		- return label + ': ' + value;
872		- }
873		- }
	984	+ callbacks: _this.getTooltipCallbacks(nSettings.tooltipText, nSettings.showColorCode)
874	985	},
875	986	legend: {
876	987	position: nSettings.legendPosition,
877	988	reverse: nSettings.legendReverse,
		@@ -933,15 +1044,21 @@
933	1044	titleColor: nSettings.tooltipColor,
934	1045	bodyColor: nSettings.tooltipColor,
935	1046	footerColor: nSettings.tooltipColor,
936	1047	titleFont: {
937		- style: nSettings.tooltipItalicText ? "italic" : "normal"
	1048	+ size: nSettings.tooltipFontSize || 12,
	1049	+ style: nSettings.tooltipItalicText ? "italic" : "normal",
	1050	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
938	1051	},
939	1052	bodyFont: {
940		- style: nSettings.tooltipItalicText ? "italic" : "normal"
	1053	+ size: nSettings.tooltipFontSize || 12,
	1054	+ style: nSettings.tooltipItalicText ? "italic" : "normal",
	1055	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
941	1056	},
942	1057	footerFont: {
943		- style: nSettings.tooltipItalicText ? "italic" : "normal"
	1058	+ size: nSettings.tooltipFontSize || 12,
	1059	+ style: nSettings.tooltipItalicText ? "italic" : "normal",
	1060	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
944	1061	}
945	1062	},
946	1063	legend: {
947	1064	position: nSettings.legendPosition,
		@@ -1002,15 +1119,21 @@
1002	1119	titleColor: nSettings.tooltipColor,
1003	1120	bodyColor: nSettings.tooltipColor,
1004	1121	footerColor: nSettings.tooltipColor,
1005	1122	titleFont: {
1006		- style: nSettings.tooltipItalicText ? "italic" : "normal"
	1123	+ size: nSettings.tooltipFontSize || 12,
	1124	+ style: nSettings.tooltipItalicText ? "italic" : "normal",
	1125	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
1007	1126	},
1008	1127	bodyFont: {
1009		- style: nSettings.tooltipItalicText ? "italic" : "normal"
	1128	+ size: nSettings.tooltipFontSize || 12,
	1129	+ style: nSettings.tooltipItalicText ? "italic" : "normal",
	1130	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
1010	1131	},
1011	1132	footerFont: {
1012		- style: nSettings.tooltipItalicText ? "italic" : "normal"
	1133	+ size: nSettings.tooltipFontSize || 12,
	1134	+ style: nSettings.tooltipItalicText ? "italic" : "normal",
	1135	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
1013	1136	}
1014	1137	},
1015	1138	legend: {
1016	1139	position: nSettings.legendPosition,
		@@ -1046,13 +1169,17 @@
1046	1169	newSettings.outerRadius = settings['outer_radius'];
1047	1170	newSettings.sliceSpacing = settings['slice_spacing'];
1048	1171	newSettings.circumference = settings['circumference'];
1049	1172	newSettings.startAngle = settings['start_angle'];
	1173	+ newSettings.rotationDegree = settings['rotation_degree'];
1050	1174	newSettings.sliceColor = settings['slice_color'];
1051	1175	newSettings.slicesBorderColor = settings['slices_border_color'];
1052	1176	newSettings.sliceColorDefault = settings['slice_colors_default'];
1053	1177	newSettings.sliceBorderWidth = settings['slice_border_width'];
1054	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'];
1055	1182	newSettings.legendColor = settings['legend_color'];
1056	1183	newSettings.legendPosition = settings['legend_position'];
1057	1184	newSettings.legendAlignment = settings['legend_alignment'];
1058	1185	newSettings.legendFontSize = settings['legend_font_size'];
		@@ -1059,13 +1186,50 @@
1059	1186	newSettings.legendItalicText = (settings['legend_italic'] == 'checked') ? true : false;
1060	1187	newSettings.legendBoldText = (settings['legend_bold'] == 'checked') ? true : false;
1061	1188	newSettings.legendReverse = settings['legend_reverse'];
1062	1189	newSettings.tooltipColor = settings['tooltip_text_color'];
1063		- newSettings.showColorCode = (settings['show_color_code'] == 'checked') ? true : false;
	1190	+ newSettings.showColorCode = settings['show_color_code'];
1064	1191	newSettings.tooltipItalicText = (settings['tooltip_italic'] == 'checked') ? true : false;
	1192	+ newSettings.tooltipFontSize = settings['tooltip_font_size'];
	1193	+ newSettings.tooltipBoldText = settings['tooltip_bold'];
	1194	+ newSettings.tooltipText = settings['tooltip_text'];
1065	1195	return newSettings;
1066	1196	}
1067	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	+
1068	1232	// Detect window resize moment to draw charts responsively
1069	1233	ChartBuilderChartsJs.prototype.resizeChart = function(){
1070	1234	var _this = this;
1071	1235
		@@ -1113,8 +1277,49 @@
1113	1277	ChartBuilderChartsJs.prototype.updateChartData = function(){
1114	1278	var _this = this;
1115	1279	var newData = _this.chartConvertData( _this.chartData );
1116	1280
	1281	+ var settings = _this.chartSourceData.settings;
	1282	+ var nSettings = _this.configOptionsForCharts(settings);
	1283	+ var defaultColors = nSettings.sliceColorDefault || ['#36A2EB','#FF6384','#FF9F40','#FFCD56', '#4BC0C0','#0099c6','#dd4477','#66aa00', '#b82e2e','#316395','#994499','#22aa99', '#aaaa11','#6633cc','#e67300','#8b0707', '#651067','#329262','#5574a6','#3b3eac', '#b77322','#16d620','#b91383','#f4359e', '#9c5935','#a9c413','#2a778d','#668d1c', '#bea413','#0c5922','#743411'];
	1284	+
	1285	+ var existingDatasets = _this.chartObject.data.datasets || [];
	1286	+ newData.dataSets = newData.dataSets.map((dataset, index) => {
	1287	+ var existingDataset = existingDatasets[index] || {};
	1288	+
	1289	+ // Handle backgroundColor for pie charts (array of colors per data point)
	1290	+ if (_this.chartType === 'pie_chart' && Array.isArray(existingDataset.backgroundColor)) {
	1291	+ var newBgColor = [...existingDataset.backgroundColor];
	1292	+ for (var i = existingDataset.backgroundColor.length; i < dataset.data.length; i++) {
	1293	+ newBgColor[i] = nSettings.sliceColor?.[i] || defaultColors[i % defaultColors.length];
	1294	+ }
	1295	+ return {
	1296	+ ...dataset,
	1297	+ backgroundColor: newBgColor,
	1298	+ borderColor: existingDataset.borderColor || dataset.borderColor,
	1299	+ borderWidth: existingDataset.borderWidth !== undefined ? existingDataset.borderWidth : dataset.borderWidth
	1300	+ };
	1301	+ }
	1302	+
	1303	+ // Handle backgroundColor for bar/line charts (single color per dataset)
	1304	+ var bgColor = existingDataset.backgroundColor;
	1305	+ var borderColor = existingDataset.borderColor;
	1306	+
	1307	+ if (!bgColor) {
	1308	+ bgColor = defaultColors[index % defaultColors.length];
	1309	+ }
	1310	+ if (!borderColor) {
	1311	+ borderColor = bgColor;
	1312	+ }
	1313	+
	1314	+ return {
	1315	+ ...dataset,
	1316	+ backgroundColor: bgColor,
	1317	+ borderColor: borderColor,
	1318	+ borderWidth: existingDataset.borderWidth !== undefined ? existingDataset.borderWidth : dataset.borderWidth
	1319	+ };
	1320	+ });
	1321	+
1117	1322	_this.chartObject.data = {
1118	1323	..._this.chartObject.data,
1119	1324	labels: newData?.labels,
1120	1325	datasets: newData?.dataSets,
		@@ -1120,8 +1325,52 @@
1120	1325	datasets: newData?.dataSets,
1121	1326	},
1122	1327	_this.chartObject.update();
1123	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	+ };
1124	1373
1125	1374	ChartBuilderChartsJs.prototype.addChartDataRow = function (element){
1126	1375	var _this = this;
1127	1376	var content = '';