Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 给 s2Options.hierarchyType 配置为 'tree' 后对列表进行折叠会导致 asyncGetAllPlainData 获取不到被折叠的数据 #3076

Closed
3 of 16 tasks
DelMemory opened this issue Jan 11, 2025 · 2 comments
Assignees

Comments

@DelMemory
Copy link

DelMemory commented Jan 11, 2025

🏷 S2 Version / S2 版本

Package Version
@antv/s2 2.1.8
@antv/s2-react 2.1.6
@antv/s2-react-components 2.1.2

💻 Sheet Type / 表格类型

  • PivotSheet
  • TableSheet
  • PivotChartSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 Describe the bug / 问题描述

由于采用了多层级结构,使用了 s2Options.hierarchyType:'tree' 配置,供用户更方便的操作
但是目前发现,在对列表折叠后进行下载,会获取不到被折叠部分的数据

这部分逻辑在官网示例即可复现

⌨️ Code Snapshots / 代码片段

/* eslint-disable no-console */
// organize-imports-ignore
import React from 'react';
import { S2DataConfig, type SpreadSheet } from '@antv/s2';
import { SheetComponent, type SheetComponentOptions } from '@antv/s2-react';
import { Export } from '@antv/s2-react-components';
import { Button, Space } from 'antd';
import '@antv/s2-react/dist/s2-react.min.css';
import '@antv/s2-react-components/dist/s2-react-components.min.css';

const s2Options: SheetComponentOptions = {
width: 600,
height: 480,
hierarchyType: 'tree',
interaction: {
copy: {
enable: true,
},
},
};

function App({ dataCfg }) {
const [sheetInstance, setSheetInstance] = React.useState();

const onMounted = (s2: SpreadSheet) => {
setSheetInstance(s2);
};

return (
<>
<Space style={{ marginBottom: 12 }}>

自定义导出按钮

<Export
sheetInstance={sheetInstance}
onCopySuccess={(data) => {
console.log('copy success:', data);
}}
onCopyError={(error) => {
console.log('copy failed:', error);
}}
onDownloadSuccess={(data) => {
console.log('download success', data);
}}
onDownloadError={(error) => {
console.log('download failed:', error);
}}
/>


</>
);
}

fetch(
'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
)
.then((res) => res.json())
.then((res) => {
const s2DataConfig: S2DataConfig = {
fields: {
rows: ['province', 'city'],
columns: ['type', 'sub_type'],
values: ['number'],
},
meta: res.meta,
data: res.data,
};

reactDOMClient
  .createRoot(document.getElementById('container'))
  .render(<App dataCfg={s2DataConfig} />);

});

🔗 Reproduction link / 复现链接

https://codesandbox.io/p/sandbox/objective-sound-lcwhpv

📋 Steps to Reproduce the Bug or Issue / 重现步骤

点击 浙江省 左边的加号,将浙江省折叠
点击顶部 自定义导出按钮 ,点击 下载格式化数据

😊 Expected Behavior / 期望行为

希望导出的数据中含有被折叠的数据

  type 家具 家具 办公用品 办公用品
  sub_type 桌子 沙发 纸张
province city number number number number
浙江省          
浙江省 杭州市 7789 5343 945 1343
浙江省 绍兴市 2367 632 1304 1354
浙江省 宁波市 3877 7234 1145 1523
浙江省 舟山市 4342 834 1432 1634
四川省          
四川省 成都市 1723 2451 2335 4004
四川省 绵阳市 1822 2244 245 3077
四川省 南充市 1943 2333 2457 3551
四川省 乐山市 2330 2445 2458 352

😅 Current Behavior / 当前行为

image
当前下载数据

  类别 家具 家具 办公用品 办公用品
  子类别 桌子 沙发 纸张
省份 城市 数量 数量 数量 数量
浙江省   - - - -
四川省   - - - -
四川省 成都市 1723 2451 2335 4004
四川省 绵阳市 1822 2244 245 3077
四川省 南充市 1943 2333 2457 3551
四川省 乐山市 2330 2445 2458 352

💻 OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

🌏 Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他
Copy link
Contributor

你好 @DelMemory:

提 Issue 须知

⚠️ 在提出问题前,请确保你已经仔细阅读👓/搜索🔍过 官方文档常见问题 以及 图表示例, 并且已经搜索查阅过相关 Issues 列表Discussions 列表. 当你确定自己的问题没有解决方案时,请提交 issue。 ⚠️

如果是使用问题,不知道怎么用,移步 Discussions 讨论区 并提供 有效信息 进行 提问

参与社区共建

这是一个开源项目, 我们也有繁忙的业务要做, 是用自己的业余时间在维护, 为爱发电, 精力有限, 所以有时候 issue 响应速度不是那么及时, 如果你遇到了问题, 或者对 IssuesDiscussions 列表的问题感兴趣, 可以直接认领并尝试修复 (贡献指南),帮助 S2 变得更好, 而不是一味的埋怨和催促, 我们不是甲方乙方的关系.

@lijinke666 lijinke666 self-assigned this Jan 13, 2025
@lijinke666
Copy link
Member

lijinke666 commented Jan 13, 2025

复制导出都是所见即所得, 折叠的话出于性能考虑, 对应的节点不会渲染, 即数据结构中不含被折叠的节点, 所以导出的时候也感知不到. 如果要从底层修改的话, 影响的范围比较大.

如果要兼容这种场景, 建议是另外用一个表格实例做导出

// 在内存中声明一个新的表格实例, 用于导出 (对应的的 canvas 设为 `display:none`)
const s2 = new PivotSheet(..., s2Options)
await s2.render()

<Export sheetInstance={s2} />

或者可以先保存下目前的折叠状态, 导出时重置, 导出后在还原, 但这种用户体验可能要差点, 页面会展开再收起

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants