docs: add bidirectional bar component documentation

[lxfu1]

Summary by CodeRabbit

• 新功能

  • 在图表配置中新增可选的 transpose 属性，用于控制图表是否转置。
  • Waterfall 图新增 connector 配置，支持连接线及其反向显示。

• 文档

  • 大幅扩展了 BidirectionalBar 组件的中文文档，新增了详细介绍、使用示例、配置项说明及事件和方法参考，帮助用户更好地理解和使用该组件。
  • 全面重写并丰富了 Waterfall 组件的中文文档，新增简介、代码演示、配置项、事件和方法章节。
  • 扩充了 Area 组件的中文介绍，增强对面积图的理解。

• 样式

  • BidirectionalBarOptions 的 layout 属性现为可选项，配置更灵活。

• 示例

  • 新增 Waterfall 连接线示例及反向连接线示例，展示更多交互效果。

[coderabbitai]

📝 Walkthrough

Walkthrough

本次更新将 BidirectionalBarOptions 类型中的 layout 属性改为可选项，并在 BaseOptions 类型中新增了 transpose 可选布尔属性。同时，BidirectionalBar 组件的中文文档得到了大幅扩充，涵盖了详细介绍、用法示例、配置项说明及相关事件和方法的参考。此外，新增了 Waterfall 图表的 connector 配置及相关适配器逻辑，完善了 Waterfall 图的类型定义和中文文档，并新增了多个示例及示例元数据调整。还新增了配置项中 connector 形状的常量定义。

Changes

文件/分组	变更摘要
packages/plots/src/core/plots/bidirectional-bar/type.ts	BidirectionalBarOptions 类型的 layout 属性由必填改为可选。
packages/plots/src/core/types/common.ts	Primitive 类型扩展包含 string[]，BaseOptions 新增可选属性 transpose，ConnectNulls 缩进调整。
site/docs/components/plots/bidirectional-bar.zh.md	大幅扩充 BidirectionalBar 组件文档，新增介绍、示例、配置项等内容。
packages/plots/src/core/constants/index.ts	新增 CONFIG_SHAPE 中的 connector 配置项。
packages/plots/src/core/plots/waterfall/adaptor.ts	新增 adaptor 中 connectorTransform 函数，处理 connector 配置并插入流程。
packages/plots/src/core/plots/waterfall/type.ts	WaterfallOptions 类型调整，移除 xField 可选声明，新增 connector 可选属性。
site/docs/components/plots/waterfall.zh.md	大幅扩充 Waterfall 组件文档，新增详细介绍、示例、配置项、事件和方法说明。
site/examples/statistics/waterfall/demo/connector.js	新增 Waterfall 示例组件 DemoWaterfall，展示带连接线的瀑布图。
site/examples/statistics/waterfall/demo/reverse.js	Waterfall 示例中新增 connector 配置，设置 reverse 及样式。
site/examples/statistics/waterfall/demo/meta.json	调整 Waterfall 示例元数据，重命名示例文件及标题，新增反向连接线示例。
site/docs/components/plots/area.zh.md	扩充面积图介绍，增加详细说明及应用场景。

Poem

兔子挥笔写新篇，
layout 可选更方便。
transpose 一加，方向随心变，
文档详尽助你研。
瀑布连接线新添彩，
示例丰富展风采，
代码文档齐步迈！
🐇✨📊

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

site/examples/statistics/waterfall/demo/connector.js

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/site".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in "site/.eslintrc.js » /node_modules/.pnpm/@umijs+fabric@2.14.1/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

site/examples/statistics/waterfall/demo/reverse.js

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/site".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in "site/.eslintrc.js » /node_modules/.pnpm/@umijs+fabric@2.14.1/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7c54f28 and 0c1394a.

📒 Files selected for processing (9)

• packages/plots/src/core/constants/index.ts (1 hunks)
• packages/plots/src/core/plots/waterfall/adaptor.ts (2 hunks)
• packages/plots/src/core/plots/waterfall/type.ts (1 hunks)
• packages/plots/src/core/types/common.ts (3 hunks)
• site/docs/components/plots/area.zh.md (1 hunks)
• site/docs/components/plots/waterfall.zh.md (1 hunks)
• site/examples/statistics/waterfall/demo/connector.js (1 hunks)
• site/examples/statistics/waterfall/demo/meta.json (1 hunks)
• site/examples/statistics/waterfall/demo/reverse.js (1 hunks)

✅ Files skipped from review due to trivial changes (3)

• packages/plots/src/core/constants/index.ts
• site/examples/statistics/waterfall/demo/connector.js
• site/examples/statistics/waterfall/demo/meta.json

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/plots/src/core/types/common.ts

🧰 Additional context used

🧬 Code Graph Analysis (2)

packages/plots/src/core/plots/waterfall/adaptor.ts (3)

packages/plots/src/core/utils/index.ts (4)

• set (12-12)
• isObject (22-22)
• flow (3-3)
• transformOptions (33-33)

packages/plots/src/core/plots/waterfall/constants.ts (1)

• END_KEY (2-2)

packages/plots/src/core/adaptor/mark.ts (1)

• mark (8-10)

packages/plots/src/core/plots/waterfall/type.ts (1)

packages/plots/src/core/types/common.ts (2)

• Options (97-123)
• AttrStyle (131-131)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: deploy

🔇 Additional comments (10)

site/docs/components/plots/area.zh.md (1)

13-13: 文档描述增强效果很好

将面积图的简单描述扩展为更详细和专业的说明，清楚地定义了面积图的特点、与折线图的关系以及使用优势。这种详细的技术描述有助于用户更好地理解组件的特性和适用场景。

site/examples/statistics/waterfall/demo/reverse.js (1)

44-47: 连接器配置实现正确

新增的连接器配置正确实现了反向连接线功能，样式配置合理，偏移量和颜色设置适合演示需求。

packages/plots/src/core/plots/waterfall/type.ts (1)

3-10: 类型定义更新正确

WaterfallOptions 类型正确添加了 connector 属性，类型定义为 Partial<Options> & { reverse?: boolean }，既支持标准配置选项又增加了反向功能的布尔标志。类型结构合理且与使用场景匹配。

packages/plots/src/core/plots/waterfall/adaptor.ts (3)

1-1: 导入语句完整

正确导入了必要的工具函数，包括新增的 set 和 isObject 函数，用于支持连接器功能实现。

---

72-93: 连接器转换函数实现优秀

connectorTransform 函数设计良好：

• 正确处理了反向逻辑，根据 reverse 标志调整 xField 和 yField 的顺序
• 使用首尾数据点构造连接线数据，逻辑清晰
• 使用 set 工具函数安全地设置配置
• 通过 isObject 检查确保配置合并的正确性

---

95-95: 流水线集成正确

connectorTransform 函数被正确地集成到适配器流水线中，位置合适（在 mark 之后，transformOptions 之前），确保连接器配置能够正确处理。

site/docs/components/plots/waterfall.zh.md (4)

10-19: 瀑布图简介内容详实

新增的简介部分完整地解释了瀑布图的概念、特征和视觉隐喻，包括阶梯式布局和因果关系可视化的详细说明。内容专业且易于理解。

---

20-34: 代码演示结构清晰

代码演示部分组织良好，涵盖了基础用法、连接线标记和反向连接线标记等关键功能，每个示例都有对应的 Playground 链接，便于用户学习和实践。

---

36-61: 配置项文档全面详细

配置项表格涵盖了所有主要配置选项，包括新增的 connector 配置，每个选项都有清晰的说明、类型定义和相关文档链接。特别是 connector 选项的描述准确地说明了其功能和配置方式。

---

1-70: 注意：PR 标题与实际内容不符

PR 标题为 "docs: add bidirectional bar component documentation"，但本文件是关于瀑布图（Waterfall）的文档，而不是双向条形图（BidirectionalBar）。请确认 PR 标题是否正确，或者是否遗漏了双向条形图的相关文档。

Likely an incorrect or invalid review comment.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate Unit Tests

• Create PR with Unit Tests
• Post Copyable Unit Tests in Comment
• Commit Unit Tests in branch docs/bidirectional-bar-component

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai auto-generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.