| @@ -131,8 +131,9 @@ | ||
| 131 | 131 | var dataTypes = _this.chartConvertData( getChartSource ); |
| 132 | 132 | |
| 133 | 133 | var settings = _this.dbData.options; |
| 134 | 134 | var nSettings = _this.configOptionsForCharts(settings); |
| 135 | + _this.applyPieDataGrouping(dataTypes, nSettings); | |
| 135 | 136 | |
| 136 | 137 | // var ctx = document.getElementById(_this.htmlClassPrefix + _this.uniqueId + '-canvas'); |
| 137 | 138 | var parentId = _this.htmlClassPrefix + _this.chartType + '-' + _this.uniqueId; |
| 138 | 139 | var canvasId = parentId + '-canvas'; |
| @@ -166,9 +167,9 @@ | ||
| 166 | 167 | dataTypes.dataSets[0].backgroundColor = []; |
| 167 | 168 | dataTypes.dataSets[0].borderColor = []; |
| 168 | 169 | |
| 169 | 170 | for (var i = 0; i < sliceCount; i++) { |
| 170 | - 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]); | |
| 171 | 172 | dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent'; |
| 172 | 173 | } |
| 173 | 174 | dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth; |
| 174 | 175 | _this.chartObject = new Chart(ctx, { |
| @@ -243,8 +244,9 @@ | ||
| 243 | 244 | var dataTypes = _this.chartConvertData( getChartSource ); |
| 244 | 245 | |
| 245 | 246 | var settings = _this.dbData.options; |
| 246 | 247 | var nSettings = _this.configOptionsForCharts(settings); |
| 248 | + _this.applyPieDataGrouping(dataTypes, nSettings); | |
| 247 | 249 | |
| 248 | 250 | // var ctx = document.getElementById(_this.htmlClassPrefix + _this.uniqueId + '-canvas'); |
| 249 | 251 | var parentId = _this.htmlClassPrefix + _this.chartType + '-' + _this.uniqueId; |
| 250 | 252 | var canvasId = parentId + '-canvas'; |
| @@ -557,8 +559,11 @@ | ||
| 557 | 559 | newSettings.slicesBorderColor = settings['slices_border_color']; |
| 558 | 560 | newSettings.sliceColorDefault = settings['slice_colors_default']; |
| 559 | 561 | newSettings.sliceBorderWidth = settings['slice_border_width']; |
| 560 | 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']; | |
| 561 | 566 | newSettings.legendPosition = settings['legend_position']; |
| 562 | 567 | newSettings.legendAlignment = settings['legend_alignment']; |
| 563 | 568 | newSettings.legendColor = settings['legend_color']; |
| 564 | 569 | newSettings.legendFontSize = settings['legend_font_size']; |
| @@ -572,8 +577,42 @@ | ||
| 572 | 577 | newSettings.showColorCode = (settings['show_color_code'] == 'checked') ? true : false; |
| 573 | 578 | newSettings.tooltipText = settings['tooltip_text']; |
| 574 | 579 | newSettings.enableInteractivity = (settings['enable_interactivity'] == 'off') ? false : true; |
| 575 | 580 | return newSettings; |
| 581 | + } | |
| 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 | + } | |
| 576 | 615 | } |
| 577 | 616 | |
| 578 | 617 | // Detect window resize moment to draw charts responsively |
| 579 | 618 | ChartBuilderChartJs.prototype.resizeChart = function(){ |
