| @@ -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(); |
| @@ -909,8 +917,9 @@ | ||
| 909 | 917 | var dataTypes = _this.chartConvertData( getChartSource ); |
| 910 | 918 | |
| 911 | 919 | var settings = _this.chartSourceData.settings; |
| 912 | 920 | var nSettings = _this.configOptionsForCharts(settings); |
| 921 | + _this.applyPieDataGrouping(dataTypes, nSettings); | |
| 913 | 922 | |
| 914 | 923 | var ctx = document.getElementById(_this.htmlClassPrefix + '-canvas'); |
| 915 | 924 | |
| 916 | 925 | ctx.width = nSettings.chartWidth; |
| @@ -932,9 +941,9 @@ | ||
| 932 | 941 | dataTypes.dataSets[0].backgroundColor = []; |
| 933 | 942 | dataTypes.dataSets[0].borderColor = []; |
| 934 | 943 | |
| 935 | 944 | for (var i = 0; i < sliceCount; i++) { |
| 936 | - 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]); | |
| 937 | 946 | dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent'; |
| 938 | 947 | } |
| 939 | 948 | dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth; |
| 940 | 949 | _this.chartObject = new Chart(ctx, { |
| @@ -1166,8 +1175,11 @@ | ||
| 1166 | 1175 | newSettings.slicesBorderColor = settings['slices_border_color']; |
| 1167 | 1176 | newSettings.sliceColorDefault = settings['slice_colors_default']; |
| 1168 | 1177 | newSettings.sliceBorderWidth = settings['slice_border_width']; |
| 1169 | 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']; | |
| 1170 | 1182 | newSettings.legendColor = settings['legend_color']; |
| 1171 | 1183 | newSettings.legendPosition = settings['legend_position']; |
| 1172 | 1184 | newSettings.legendAlignment = settings['legend_alignment']; |
| 1173 | 1185 | newSettings.legendFontSize = settings['legend_font_size']; |
| @@ -1180,8 +1192,42 @@ | ||
| 1180 | 1192 | newSettings.tooltipFontSize = settings['tooltip_font_size']; |
| 1181 | 1193 | newSettings.tooltipBoldText = settings['tooltip_bold']; |
| 1182 | 1194 | newSettings.tooltipText = settings['tooltip_text']; |
| 1183 | 1195 | return newSettings; |
| 1196 | + } | |
| 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 | + } | |
| 1184 | 1230 | } |
| 1185 | 1231 | |
| 1186 | 1232 | // Detect window resize moment to draw charts responsively |
| 1187 | 1233 | ChartBuilderChartsJs.prototype.resizeChart = function(){ |
