From 73700dbe5926c2f19d5786531b05cb3fa1edf74a Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 27 Oct 2022 16:49:01 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=88=86=E7=BB=84=E5=A0=86=E5=8F=A0=E6=9F=B1=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 视图类型增加分组堆叠柱状图 https://www.tapd.cn/55578866/prong/stories/view/1155578866001008801 --- .../service/chart/ChartViewService.java | 3 + .../service/chart/util/ChartDataBuild.java | 85 +++++++++++++++++++ frontend/src/icons/svg/bar-group-stack.svg | 1 + frontend/src/lang/en.js | 1 + frontend/src/lang/tw.js | 1 + frontend/src/lang/zh.js | 1 + .../src/views/chart/chart/bar/bar_antv.js | 6 ++ .../views/chart/chart/common/common_antv.js | 8 +- frontend/src/views/chart/chart/util.js | 79 +++++++++++++++++ .../chart/components/ChartComponentG2.vue | 2 + frontend/src/views/chart/view/ChartEdit.vue | 2 +- 11 files changed, 186 insertions(+), 3 deletions(-) create mode 100644 frontend/src/icons/svg/bar-group-stack.svg diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java index 192143ad87..9d628ed9ad 100644 --- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java +++ b/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")) { diff --git a/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java b/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java index 7314367c28..4e28040812 100644 --- a/backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java +++ b/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 transGroupStackDataAntV(List xAxisBase, List xAxis, List xAxisExt, List yAxis, List extStack, List 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 map = new HashMap<>(); + + List 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 dimensionList = new ArrayList<>(); + List 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; + } + } } diff --git a/frontend/src/icons/svg/bar-group-stack.svg b/frontend/src/icons/svg/bar-group-stack.svg new file mode 100644 index 0000000000..3ecd3eeef0 --- /dev/null +++ b/frontend/src/icons/svg/bar-group-stack.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 804ddce80d..3e8e26ac16 100644 --- a/frontend/src/lang/en.js +++ b/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', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 6f69214e79..ecc48ae8ba 100644 --- a/frontend/src/lang/tw.js +++ b/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: '介於', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 73d7733c38..2bb4ead4af 100644 --- a/frontend/src/lang/zh.js +++ b/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: '介于', diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js index 5c3cbb30a6..8a95f15dd8 100644 --- a/frontend/src/views/chart/chart/bar/bar_antv.js +++ b/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 diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js index 3f6093278c..7244f2467f 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/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')) { - obj = { name: param.category, value: param.value } + 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) { diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index b5915a81da..c5874ce070 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/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', diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue index cd7b2b1334..4b0b2940b8 100644 --- a/frontend/src/views/chart/components/ChartComponentG2.vue +++ b/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') { diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 96f5f73619..b7019dab26 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -549,7 +549,7 @@