feat(视图): 支持分组堆叠柱状图

视图类型增加分组堆叠柱状图
https://www.tapd.cn/55578866/prong/stories/view/1155578866001008801

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -648,6 +648,7 @@ public class ChartViewService {
                 yAxis = yAxis.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || dataeaseNames.contains(item.getDataeaseName())).collect(Collectors.toList());
                 break;
             case "bar-group":
+            case "bar-group-stack":
                 xAxis = xAxis.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || (!desensitizationList.contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
                 yAxis = yAxis.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || (!desensitizationList.contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
                 xAxisBase = xAxisBase.stream().filter(item -> StringUtils.isNotEmpty(item.getChartId()) || (!desensitizationList.contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
@@ -1113,6 +1114,8 @@ public class ChartViewService {
         } else if (StringUtils.equalsIgnoreCase(view.getRender(), "antv")) {
             if (StringUtils.equalsIgnoreCase(view.getType(), "bar-group")) {
                 mapChart = ChartDataBuild.transBaseGroupDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
+            } else if (StringUtils.equalsIgnoreCase(view.getType(),"bar-group-stack")) {
+                mapChart = ChartDataBuild.transGroupStackDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, extStack, data, view, isDrill);
             } else if (StringUtils.containsIgnoreCase(view.getType(), "bar-stack")) {
                 mapChart = ChartDataBuild.transStackChartDataAntV(xAxis, yAxis, view, data, extStack, isDrill);
             } else if (StringUtils.containsIgnoreCase(view.getType(), "line-stack")) {

backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java

@@ -994,4 +994,89 @@ public class ChartDataBuild {
         map.put("tableRow", tableRow);
         return map;
     }
+
+    public static Map<String, Object> transGroupStackDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> xAxisExt, List<ChartViewFieldDTO> yAxis, List<ChartViewFieldDTO> extStack, List<String[]> data, ChartViewWithBLOBs view, boolean isDrill) {
+        // 堆叠柱状图
+        if (CollectionUtils.isEmpty(xAxisExt)) {
+            return transStackChartDataAntV(xAxis, yAxis, view, data, extStack, isDrill);
+        //  分组柱状图
+        } else if (CollectionUtils.isNotEmpty(xAxisExt) && CollectionUtils.isEmpty(extStack)) {
+            return transBaseGroupDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
+        // 分组堆叠柱状图
+        }else {
+            Map<String, Object> map = new HashMap<>();
+
+            List<AxisChartDataAntVDTO> dataList = new ArrayList<>();
+            for (int i1 = 0; i1 < data.size(); i1++) {
+                String[] row = data.get(i1);
+
+                StringBuilder xField = new StringBuilder();
+                if (isDrill) {
+                    xField.append(row[xAxis.size() - 1]);
+                } else {
+                    for (int i = 0; i < xAxisBase.size(); i++) {
+                        if (i == xAxisBase.size() - 1) {
+                            xField.append(row[i]);
+                        } else {
+                            xField.append(row[i]).append("\n");
+                        }
+                    }
+                }
+
+                StringBuilder groupField = new StringBuilder();
+                for (int i = xAxisBase.size(); i < xAxisBase.size() + xAxisExt.size(); i++) {
+                    if (i == xAxisBase.size() + xAxisExt.size() - 1) {
+                        groupField.append(row[i]);
+                    } else {
+                        groupField.append(row[i]).append("\n");
+                    }
+                }
+
+                StringBuilder stackField = new StringBuilder();
+                for (int i = xAxis.size(); i < xAxis.size() + extStack.size(); i++) {
+                    if (i == xAxis.size() + extStack.size() - 1) {
+                        stackField.append(row[i]);
+                    } else {
+                        stackField.append(row[i]).append("\n");
+                    }
+                }
+
+                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                axisChartDataDTO.setField(xField.toString());
+                axisChartDataDTO.setName(xField.toString());
+
+                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                for (int j = 0; j < xAxis.size(); j++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxis.get(j).getId());
+                    chartDimensionDTO.setValue(row[j]);
+                    dimensionList.add(chartDimensionDTO);
+                }
+                axisChartDataDTO.setDimensionList(dimensionList);
+
+                if (CollectionUtils.isNotEmpty(yAxis)) {
+                    int valueIndex = xAxis.size() + extStack.size();
+                    ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                    chartQuotaDTO.setId(yAxis.get(0).getId());
+                    quotaList.add(chartQuotaDTO);
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    try {
+                        axisChartDataDTO.setValue(StringUtils.isEmpty(row[valueIndex]) ? null : new BigDecimal(row[valueIndex]));
+                    } catch (Exception e) {
+                        axisChartDataDTO.setValue(new BigDecimal(0));
+                    }
+                } else {
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    axisChartDataDTO.setValue(new BigDecimal(0));
+                }
+                axisChartDataDTO.setGroup(groupField.toString());
+                axisChartDataDTO.setCategory(stackField.toString());
+                dataList.add(axisChartDataDTO);
+            }
+            map.put("data", dataList);
+            return map;
+        }
+    }
 }

frontend/src/lang/en.js

@@ -1420,6 +1420,7 @@ export default {
     gauge_size_field_delete: 'Dynamic field changed，please edit again',
     chart_group: 'Sub Type',
     chart_bar_group: 'Bar Group',
+    chart_bar_group_stack: 'Group Stack Bar',
     field_dynamic: 'Dynamic',
     aggregation: 'Aggregation',
     filter_between: 'Between',

frontend/src/lang/tw.js

@@ -1420,6 +1420,7 @@ export default {
     gauge_size_field_delete: '動態值中字段發生變更，請重新編輯',
     chart_group: '子類別',
     chart_bar_group: '分組柱狀圖',
+    chart_bar_group_stack: '分組堆疊柱狀圖',
     field_dynamic: '動態值',
     aggregation: '聚合方式',
     filter_between: '介於',

frontend/src/lang/zh.js

@@ -1419,6 +1419,7 @@ export default {
     gauge_size_field_delete: '动态值中字段发生变更，请重新编辑',
     chart_group: '子类别',
     chart_bar_group: '分组柱状图',
+    chart_bar_group_stack: '分组堆叠柱状图',
     field_dynamic: '动态值',
     aggregation: '聚合方式',
     filter_between: '介于',

frontend/src/views/chart/chart/bar/bar_antv.js

@@ -93,6 +93,12 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   } else {
     delete options.isStack
   }
+
+  if (chart.type === 'bar-group-stack') {
+    options.groupField = 'group'
+  } else {
+    delete options.groupField
+  }
   // 目前只有百分比堆叠柱状图需要这个属性，先直接在这边判断而不作为参数传过来
   options.isPercent = chart.type === 'percentage-bar-stack'
   // custom color

frontend/src/views/chart/chart/common/common_antv.js

@@ -195,7 +195,7 @@ export function getLabel(chart) {
                 f.formatterCfg.thousandSeparator = false
               }
               res = valueFormatter(param.value, f.formatterCfg)
-            } else if (chart.type === 'bar-group') {
+            } else if (equalsAny(chart.type, 'bar-group', 'bar-group-stack')) {
               const f = yAxis[0]
               if (f.formatterCfg) {
                 res = valueFormatter(param.value, f.formatterCfg)
@@ -350,7 +350,11 @@ export function getTooltip(chart) {
                 }
               }
             } else if (chart.type.includes('group')) {
+              if (chart.type === 'bar-group') {
                 obj = { name: param.category, value: param.value }
+              } else {
+                obj = { name: param.group, value: param.value }
+              }
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]
                 if (f.formatterCfg) {

frontend/src/views/chart/chart/util.js

@@ -833,6 +833,85 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_compare',
+    value: 'bar-group-stack',
+    title: 'chart.chart_bar_group_stack',
+    icon: 'bar-group-stack',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'label-selector-ant-v',
+      'tooltip-selector-ant-v',
+      'x-axis-selector-ant-v',
+      'y-axis-selector-ant-v',
+      'title-selector-ant-v',
+      'legend-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'colorPanel',
+        'customColor',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'barDefault',
+        'barGap'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position-v'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder',
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
+  },
   {
     render: 'antv',
     category: 'chart.chart_type_compare',

frontend/src/views/chart/components/ChartComponentG2.vue

@@ -253,6 +253,8 @@ export default {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
       } else if (chart.type === 'bar-stack' || chart.type === 'percentage-bar-stack') {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
+      } else if (chart.type === 'bar-group-stack') {
+        this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, true)
       } else if (chart.type === 'bar-horizontal') {
         this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
       } else if (chart.type === 'bar-stack-horizontal') {

frontend/src/views/chart/view/ChartEdit.vue

@@ -549,7 +549,7 @@
                     </el-row>
                     <!--group field,use xaxisExt-->
                     <el-row
-                      v-if="view.type === 'bar-group'"
+                      v-if="view.type === 'bar-group' || view.type === 'bar-group-stack'"
                       class="padding-lr"
                     >
                       <span style="width: 80px;text-align: right;">