dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: antv散点图增加子分类

Browse Source
This commit is contained in:
ulleo 2023-11-06 16:41:30 +08:00
parent be05a99338
commit efd33c0739
7 changed files with 146 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -357,6 +357,11 @@ public class ChartViewService {
}
List<ChartViewFieldDTO> extStack = gson.fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
if (CollectionUtils.isNotEmpty(xAxis) && StringUtils.equals(xAxis.get(0).getGroupType(), "q") && StringUtils.equalsIgnoreCase(view.getRender(), "antv")) {
List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
extStack.addAll(xAxisExt);
}
List<ChartViewFieldDTO> extBubble = gson.fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartFieldCustomFilterDTO> fieldCustomFilter = new ArrayList<ChartFieldCustomFilterDTO>();
@ -640,6 +645,9 @@ public class ChartViewService {
yAxis.addAll(sizeField);
}
List<ChartViewFieldDTO> extStack = gson.fromJson(view.getExtStack(), tokenType);
if (CollectionUtils.isNotEmpty(xAxis) && StringUtils.equals(xAxis.get(0).getGroupType(), "q") && StringUtils.equalsIgnoreCase(view.getRender(), "antv")) {
extStack.addAll(xAxisExt);
}
List<ChartViewFieldDTO> extBubble = gson.fromJson(view.getExtBubble(), tokenType);
List<ChartFieldCustomFilterDTO> fieldCustomFilter = gson.fromJson(view.getCustomFilter(), filterTokenType);
List<ChartViewFieldDTO> drill = gson.fromJson(view.getDrillFields(), tokenType);
@ -939,6 +947,8 @@ public class ChartViewService {
if (!checkDrillExist(xAxis, extStack, nextDrillField.getId(), view)) {
// get drill list first element's sort,then assign to nextDrillField
nextDrillField.setSort(getDrillSort(xAxis, drill.get(0)));
nextDrillField.setDrill(true);
if (isAntVScatterNumberXAxis) {
extStack.add(nextDrillField);
} else {

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

@ -303,8 +303,10 @@ public class ChartDataBuild {
}
}
List<ChartViewFieldDTO> extGroupList = new ArrayList<>();
List<ChartViewFieldDTO> extBaseGroupList = new ArrayList<>();
if (xIsNumber) {
extGroupList.addAll(extGroup);
extBaseGroupList.addAll(extGroup.stream().filter(d -> !d.isDrill()).collect(Collectors.toList()));
}
@ -374,11 +376,20 @@ public class ChartDataBuild {
}
if (CollectionUtils.isNotEmpty(extGroup) && xIsNumber) { //有分组时其实就是第一个
String catalog = null;
if (isDrill) {
axisChartDataDTO.setCategory(row[extGroupList.size() - 1]);
catalog = row[extGroupList.size() - 1];
} else {
axisChartDataDTO.setCategory(row[0]);
catalog = row[0];
}
axisChartDataDTO.setCategory(StringUtils.defaultIfBlank(catalog, "null"));
if (!extBaseGroupList.isEmpty()) {
axisChartDataDTO.setField(row[extBaseGroupList.size() - 1]);
} else {
axisChartDataDTO.setField(yAxis.get(j).getName());
}
} else {
axisChartDataDTO.setCategory(yAxis.get(j).getName());
}

24
core/frontend/src/views/chart/chart/common/common_antv.js
View File

@ -246,6 +246,9 @@ export function getLabel(chart) {
contentItems.push(valueFormatter(param.value, formatterCfg))
}
res = contentItems.join('\n')
} else if (chart.type === 'scatter' && xAxis && xAxis.length > 0 && xAxis[0].groupType === 'q') {
// 针对散点图
res = param.field
} else {
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]
@ -313,13 +316,18 @@ export function getTooltip(chart) {
const t = JSON.parse(JSON.stringify(customAttr.tooltip))
if (t.show) {
tooltip = {}
let xAxis, yAxis, extStack
let xAxis, yAxis, extStack, xAxisExt
try {
xAxis = JSON.parse(chart.xaxis)
} catch (e) {
xAxis = JSON.parse(JSON.stringify(chart.xaxis))
}
try {
xAxisExt = JSON.parse(chart.xaxisExt)
} catch (e) {
xAxisExt = JSON.parse(JSON.stringify(chart.xaxisExt))
}
try {
yAxis = JSON.parse(chart.yaxis)
} catch (e) {
@ -467,14 +475,18 @@ export function getTooltip(chart) {
}
//
if (chart.type === 'scatter' && xAxis && xAxis.length > 0 && xAxis[0].groupType === 'q') {
tooltip.fields = ['x', 'category', 'value', 'group']
tooltip.fields = ['x', 'category', 'value', 'group', 'field']
tooltip.customContent = (title, data) => {
const key1 = xAxis[0]?.name
let key2, v1, v2
let key2, v1, v2, subGroup
let hasSubGroup = false
if (data && data.length > 0) {
title = data[0].data.category
key2 = data[0].data.group
subGroup = data[0].data.field
hasSubGroup = xAxisExt.length > 0
const fx = xAxis[0]
if (fx.formatterCfg) {
@ -499,6 +511,12 @@ export function getTooltip(chart) {
return `
<div>
<div class="g2-tooltip-title">${title}</div>
` +
(hasSubGroup
? `<div class="g2-tooltip-item">
<span class="g2-tooltip-name">${xAxisExt[0].name}:</span><span class="g2-tooltip-value">${subGroup}</span>
</div>` : ``) +
`
<div class="g2-tooltip-item">
<span class="g2-tooltip-name">${key1}:</span><span class="g2-tooltip-value">${v1}</span>
</div>

39
core/frontend/src/views/chart/chart/util.js
View File

@ -3452,7 +3452,43 @@ export function getColors(chart, colors, reset) {
isCustom: false
})
}
} else if (includesAny(chart.type, 'bar', 'scatter', 'radar', 'area') && !chart.type.includes('group')) {
} else if (chart.type === 'scatter') {
const xAxis = JSON.parse(chart.xaxis)
if (chart.data && chart.render === 'antv' && xAxis && xAxis.length > 0 && xAxis[0].groupType === 'q') {
const data = chart.data.data
const groups = []
for (let i = 0; i < data.length; i++) {
const d = data[i]
if (!groups.includes(d.category)) {
groups.push(d.category)
}
}
for (let i = 0; i < groups.length; i++) {
const s = groups[i]
seriesColors.push({
name: s,
color: colors[i % colors.length],
isCustom: false
})
}
} else {
if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
series = JSON.parse(JSON.stringify(chart.yaxis))
} else {
series = JSON.parse(chart.yaxis)
}
if (series) {
for (let i = 0; i < series.length; i++) {
const s = series[i]
seriesColors.push({
name: s.name,
color: colors[i % colors.length],
isCustom: false
})
}
}
}
} else if ((includesAny(chart.type, 'bar', 'radar', 'area')) && !chart.type.includes('group')) {
if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
series = JSON.parse(JSON.stringify(chart.yaxis))
} else {
@ -3499,7 +3535,6 @@ export function getColors(chart, colors, reset) {
// if (customSortData && customSortData.length > 0) {
// data = customSort(customSortData, data)
// }
for (let i = 0; i < data.length; i++) {
const s = data[i]
seriesColors.push({

1
core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
View File

@ -120,6 +120,7 @@
v-show="showProperty('customColor')"
class="custom-color-style"
>
aaa
<div
v-for="(item,index) in colorForm.seriesColors"
:key="index"

63
core/frontend/src/views/chart/view/ChartEdit.vue
View File

@ -920,6 +920,67 @@
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row
v-if="view.type === 'scatter' && view.render === 'antv'"
class="padding-lr"
>
<span class="data-area-label">
<span>
{{ $t('chart.chart_group') }}
</span>
/
<span>{{ $t('chart.dimension') }}</span>
<el-tooltip
class="item"
effect="dark"
placement="bottom"
>
<div slot="content">
{{ $t('chart.scatter_group_tip') }}
</div>
<i
class="el-icon-info"
style="cursor: pointer;color: #606266;"
/>
</el-tooltip>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('xaxisExt')"
/>
</span>
<draggable
v-model="view.xaxisExt"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addXaxisExt"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<dimension-ext-item
v-for="(item,index) in view.xaxisExt"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimension"
:quota-data="quota"
:chart="chart"
@onDimensionItemChange="dimensionItemChange"
@onDimensionItemRemove="dimensionItemRemove"
@editItemFilter="showDimensionEditFilter"
@onNameEdit="showRename"
/>
</transition-group>
</draggable>
<div
v-if="!view.xaxisExt || view.xaxisExt.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<!--extBubble-->
<el-row
v-if="view.type && view.type.includes('scatter')"
@ -3152,7 +3213,7 @@ export default {
this.dragCheckType(this.view.xaxisExt, 'd')
}
this.dragMoveDuplicate(this.view.xaxisExt, e)
if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxisExt.length > 1) {
if ((this.view.type === 'map' || this.view.type === 'word-cloud' || this.view.type === 'scatter') && this.view.xaxisExt.length > 1) {
this.view.xaxisExt = [this.view.xaxisExt[0]]
}
this.calcData(true)

2
sdk/dataease-plugin-common/src/main/java/io/dataease/plugins/common/dto/chart/ChartViewFieldDTO.java
View File

@ -16,4 +16,6 @@ public class ChartViewFieldDTO extends ChartViewFieldBaseDTO implements Serializ
private List<String> customSort;
private String busiType;
private boolean drill;
}