antvis / antvis/S2

🐛插入自定义节点并自定义数据位置后 下载数据错乱

Open
#2,137 1 comment 0 reactions 1 assignee Claimed by @stone-lyl View on GitHub
💤 inactive s2-core
Dominant language
TypeScript
Stars
1.7k
Forks
220
PR merge metrics
No merged PRs in 30d

Description

### 🏷 Version

| Package | Version |
| -------------- | ------- |
| @antv/s2 | 1.43.0 |
| @antv/s2-react | |
| @antv/s2-vue | 1.5.0 |

### Sheet Type

- [ √ ] PivotSheet
- [ ] TableSheet
- [ ] GridAnalysisSheet
- [ ] StrategySheet
- [ ] EditableSheet

### 🖋 Description
![image](https://user-images.githubusercontent.com/65275407/228182732-8ec4665a-7bdd-424d-8733-764a405d417f.png)

如图所示,在宁波市前后各插入了节点”宁波A“和”宁波B“,并且自定义了第2行第0列的数据渲染“999”,但是点击下载后 发现这个那个数据会从“宁波A”一行错乱。
![image](https://user-images.githubusercontent.com/65275407/228182461-b9c46f6b-1da5-441a-a22e-e8c461355725.png)

### ⌨️ Code Snapshots

用如下代码替换官网示例中的代码
https://s2.antv.antgroup.com/examples/react-component/export/#export
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/style.min.css';
import { PivotSheet, Node, generateId, VALUE_FIELD, EXTRA_FIELD } from '@antv/s2';

fetch(
'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
)
.then((res) => res.json())
.then((res) => {
const s2Options = {
width: 600,
height: 480,
interaction: {
enableCopy: true,
},
layoutHierarchy: (s2, node) => {
// layoutHierarchy 用于手动控制行列结构的增加、删除的特殊场景。
// 以 「宁波市」为例,删除其节点,增加宁波A和宁波B节点。
const { field, label } = node;
if (field === 'city' && label === '宁波市') {
const preLabel = '宁波A';
const nextLabel = '宁波B';

const parentNode = node.parent;
const preUniqueId = generateId(parentNode.id, preLabel);
const nextUniqueId = generateId(parentNode.id, nextLabel);
const preNode = new Node({
...node,
...node.config,
id: preUniqueId,
label: preLabel,
value: preLabel,
query: { ...parentNode.query, [node.key]: preLabel },
});

const nextNode = new Node({
...node,
...node.config,
id: nextUniqueId,
label: nextLabel,
value: nextLabel,
query: { ...parentNode.query, [node.key]: nextLabel },
});

return {
push: [nextNode],
unshift: [preNode],
delete: false,
};
}
return null;
},
layoutDataPosition: (s2, getCellData) => {
// layoutDataPosition 动态改变数据的定位,确定修订某个或者某些格子的值
// 下面以更改「浙江省-宁波市-家具-桌子」的单元格数据为例
const getCellMeta = (rowIndex, colIndex) => {
const viewMeta = getCellData(rowIndex, colIndex);
if (rowIndex === 2 && colIndex === 0) {
return {
...viewMeta,
data: {
province: '浙江省',
city: '宁波市',
type: '家具',
sub_type: '桌子',
number: 999,
[EXTRA_FIELD]: 'number',
[VALUE_FIELD]: 999,
},
fieldValue: 999,
valueField: "number",
};
}
return viewMeta;
};
return getCellMeta;
},
};

const s2DataConfig = {
fields: {
rows: ['province', 'city'],
columns: ['type', 'sub_type'],
values: ['number'],
},
meta: res.meta,
data: res.data,
};

ReactDOM.render(
,
document.getElementById('container'),
);
});

```
### 🔗 Reproduce Link

https://s2.antv.antgroup.com/examples/react-component/export/#export

### 🤔 Steps to Reproduce

1. 打开https://s2.antv.antgroup.com/examples/react-component/export/#export
2. 用Code Snapshots中的代码替换编辑器中的代码;
3. 运行后下载,即可复现。

### 😊 Expected Behavior

插入节点后,也能正常下载数据,不会出现数据确实&错乱的情况
### 😅 Current Behavior

![image](https://user-images.githubusercontent.com/65275407/228184875-78cdfbcb-6454-4584-b737-6cacfb7ffe56.png)
![image](https://user-images.githubusercontent.com/65275407/228184981-f9a2071e-2d27-407d-a4c2-1595ee330ed4.png)
下载的数据从插入的第一行“宁波A”开始错乱

### 💻 System information

| Environment | Info |
| ------- | ------- |
| System | |
| Browser | |

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.