center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source 
视图类型增加分组堆叠柱状图
https://www.tapd.cn/55578866/prong/stories/view/1155578866001008801
This commit is contained in:
wisonic-s 2022-10-27 16:49:01 +08:00
parent 3ab8bd2e2d
commit 73700dbe59
11 changed files with 186 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -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")) {

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

@ -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;
}
}
}

1
frontend/src/icons/svg/bar-group-stack.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

1
frontend/src/lang/en.js
View File

@ -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',

1
frontend/src/lang/tw.js
View File

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

1
frontend/src/lang/zh.js
View File

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

6
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -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

8
frontend/src/views/chart/chart/common/common_antv.js
View File

@ -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) {

79
frontend/src/views/chart/chart/util.js
View File

@ -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',

2
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -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') {

2
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -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;">