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

docs: 新增透视表 - 树状模式下的连接线示例 #3072

Closed
wants to merge 2 commits into from

Conversation

gb853940223
Copy link
Contributor

👀 PR includes

✨ Feature

  • New feature

🎨 Enhance

  • Code style optimization
  • Refactoring
  • Change the UI
  • Improve the performance
  • Type optimization

🐛 Bugfix

  • Solve the issue and close #0

🔧 Chore

  • Test case
  • Docs / demos update
  • CI / workflow
  • Release version
  • Other ()

📝 Description

新增一个图表示例,透视表 - 树状模式下绘制Polyline,以增加层次感。因为这种树形图,普遍都有Polyline,比如Antd中的TreeSelect。

🖼️ Screenshot

改动前:
image
image

改动后:
image
image

🔗 Related issue link

🔍 Self-Check before the merge

  • Add or update relevant docs.
  • Add or update relevant demos.
  • Add or update test case.
  • Add or update relevant TypeScript definitions.

Copy link

vercel bot commented Jan 8, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
antvis-s2 ❌ Failed (Inspect) Jan 8, 2025 7:43am

Copy link
Contributor

github-actions bot commented Jan 8, 2025

你好 @gb853940223,非常感谢你的贡献.
为了让代码更健壮, 请根据 贡献指南 补充相应单元测试 (文档改动或其他特殊场景除外), 如果有 API 改动, 请修改 相应的文档.
同时请检查 linttest 相关 CI 是否通过, 如果失败, 请点击 [Details] 按钮查看, 并根据日志修复.

Hello, @gb853940223, Thanks for your contribution. In order to make the code more robust, please add the corresponding unit tests, and update the docs if there are API changes.
At the same time, please check whether the CI related to lint and test passes. If the CI fails, please click [Details] button to check and repair according to the log.

@github-actions github-actions bot added pr(feature) new feature next 2.0-next 版本的问题 labels Jan 8, 2025
Copy link

Walkthrough

此PR新增了一个图表示例,展示了在透视表的树状模式下绘制Polyline以增加层次感。此功能类似于Antd中的TreeSelect,旨在通过在树形图中添加Polyline来增强视觉层次。

Changes

文件 概要
s2-site/examples/custom/custom-shape-and-chart/demo/meta.json 更新了图表示例的元数据。
s2-site/examples/custom/custom-shape-and-chart/demo/pivot-chart-polyline.ts 新增文件,包含绘制Polyline的逻辑和相关功能实现。




fetch(

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fetch request to an external URL ('https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json') could lead to potential security risks, such as exposing the application to external dependencies and data breaches. Consider validating the data or ensuring the URL is trusted.

@lijinke666 lijinke666 changed the title feat: 新增一个图表示例,透视表 - 树状模式下绘制Polyline,以增加层次感 docs: 新增透视表 - 树状模式下的连接线示例 Jan 8, 2025
@github-actions github-actions bot added pr(documentation) documentation and removed pr(feature) new feature labels Jan 8, 2025
{
"filename": "pivot-chart-polyline.ts",
"title": {
"zh": "透视组合图 - PolyLine",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个和透视组合图应该没啥关系吧

建议就叫 "树状模式连接线" ? "PolyLine" 是连接线对应的实现方式, 对用户来说不太友好

/**
* 销毁已存在的虚线
*/
function destroyDottedLines(lines: Polyline[] = []) {
Copy link
Member

@lijinke666 lijinke666 Jan 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文件的缩进看起来有点奇怪, 是 GitHub 展示有问题?

s2.on(S2Event.LAYOUT_AFTER_RENDER, () => {
drawDottedLines(s2);
})
s2.on(S2Event.GLOBAL_SCROLL, () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

增加一下销毁的处理? S2Event.LAYOUT_DESTROY

@lijinke666
Copy link
Member

@@ -59,6 +57,15 @@
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*V-TMTaDYzxcAAAAAAAAAAAAADmJ7AQ/original",
"new": true
},
{
"filename": "pivot-chart-polyline.ts",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pivot-tree-line.ts

@gb853940223
Copy link
Contributor Author

稍后我再提交一个PR

@lijinke666
Copy link
Member

文档类的 commit 请以 "docs: xxx" 开头

@gb853940223 gb853940223 closed this Jan 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
next 2.0-next 版本的问题 pr(documentation) documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants