docs: add area example #3118
docs: add area example #3118
Conversation
dosubot
bot
added
the
size:L
📝 Walkthrough演练新增一个React演示文件，展示Ant Design Area图表组件，配置静态数据、编码映射和样式，并在元数据文件中注册该演示。 更改
估计代码审查工作量🎯 1 (简单) | ⏱️ ~5 分钟
诗歌
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
Summary of ChangesHello @lxfu1, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a new interactive area chart example to the project's documentation. The example, built with React and Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new area chart example. I've identified a few areas for improvement. In area-fill.js, the component implementation contains a critical syntax error due to missing commas and uses an incorrect property for chart smoothing. Additionally, the data structure is highly verbose and difficult to maintain. I've proposed a comprehensive refactoring of the component to address these issues, making the code correct, readable, and maintainable. For meta.json, I've suggested a clearer and more idiomatic English title for the new example. My feedback aims to enhance the quality and correctness of the new documentation example.
| const DemoSegmentedArea = () => { | ||
| const config = { | ||
| paddingLeft: 25, | ||
| data: [ | ||
| { | ||
| 'gained > 100$': 7, | ||
| 'gained <= 100$': 21, | ||
| 'lost <= 100$': -59, | ||
| 'lost > 100$': -13, | ||
| user: 'John', | ||
| key: 'lost > 100$', | ||
| value: -13, | ||
| }, | ||
| { | ||
| 'gained > 100$': 7, | ||
| 'gained <= 100$': 21, | ||
| 'lost <= 100$': -59, | ||
| 'lost > 100$': -13, | ||
| user: 'John', | ||
| key: 'lost <= 100$', | ||
| value: -59, | ||
| }, | ||
| { | ||
| 'gained > 100$': 7, | ||
| 'gained <= 100$': 21, | ||
| 'lost <= 100$': -59, | ||
| 'lost > 100$': -13, | ||
| user: 'John', | ||
| key: 'gained <= 100$', | ||
| value: 21, | ||
| }, | ||
| { | ||
| 'gained > 100$': 7, | ||
| 'gained <= 100$': 21, | ||
| 'lost <= 100$': -59, | ||
| 'lost > 100$': -13, | ||
| user: 'John', | ||
| key: 'gained > 100$', | ||
| value: 7, | ||
| }, | ||
| { | ||
| 'gained > 100$': 13, | ||
| 'gained <= 100$': 33, | ||
| 'lost <= 100$': -51, | ||
| 'lost > 100$': -3, | ||
| user: 'Raoul', | ||
| key: 'lost > 100$', | ||
| value: -3, | ||
| }, | ||
| { | ||
| 'gained > 100$': 13, | ||
| 'gained <= 100$': 33, | ||
| 'lost <= 100$': -51, | ||
| 'lost > 100$': -3, | ||
| user: 'Raoul', | ||
| key: 'lost <= 100$', | ||
| value: -51, | ||
| }, | ||
| { | ||
| 'gained > 100$': 13, | ||
| 'gained <= 100$': 33, | ||
| 'lost <= 100$': -51, | ||
| 'lost > 100$': -3, | ||
| user: 'Raoul', | ||
| key: 'gained <= 100$', | ||
| value: 33, | ||
| }, | ||
| { | ||
| 'gained > 100$': 13, | ||
| 'gained <= 100$': 33, | ||
| 'lost <= 100$': -51, | ||
| 'lost > 100$': -3, | ||
| user: 'Raoul', | ||
| key: 'gained > 100$', | ||
| value: 13, | ||
| }, | ||
| { | ||
| 'gained > 100$': 24, | ||
| 'gained <= 100$': 47, | ||
| 'lost <= 100$': -29, | ||
| 'lost > 100$': 0, | ||
| user: 'Jane', | ||
| key: 'lost > 100$', | ||
| value: 0, | ||
| }, | ||
| { | ||
| 'gained > 100$': 24, | ||
| 'gained <= 100$': 47, | ||
| 'lost <= 100$': -29, | ||
| 'lost > 100$': 0, | ||
| user: 'Jane', | ||
| key: 'lost <= 100$', | ||
| value: -29, | ||
| }, | ||
| { | ||
| 'gained > 100$': 24, | ||
| 'gained <= 100$': 47, | ||
| 'lost <= 100$': -29, | ||
| 'lost > 100$': 0, | ||
| user: 'Jane', | ||
| key: 'gained <= 100$', | ||
| value: 47, | ||
| }, | ||
| { | ||
| 'gained > 100$': 24, | ||
| 'gained <= 100$': 47, | ||
| 'lost <= 100$': -29, | ||
| 'lost > 100$': 0, | ||
| user: 'Jane', | ||
| key: 'gained > 100$', | ||
| value: 24, | ||
| }, | ||
| { | ||
| 'gained > 100$': 0, | ||
| 'gained <= 100$': 16, | ||
| 'lost <= 100$': -84, | ||
| 'lost > 100$': 0, | ||
| user: 'Marcel', | ||
| key: 'lost > 100$', | ||
| value: 0, | ||
| }, | ||
| { | ||
| 'gained > 100$': 0, | ||
| 'gained <= 100$': 16, | ||
| 'lost <= 100$': -84, | ||
| 'lost > 100$': 0, | ||
| user: 'Marcel', | ||
| key: 'lost <= 100$', | ||
| value: -84, | ||
| }, | ||
| { | ||
| 'gained > 100$': 0, | ||
| 'gained <= 100$': 16, | ||
| 'lost <= 100$': -84, | ||
| 'lost > 100$': 0, | ||
| user: 'Marcel', | ||
| key: 'gained <= 100$', | ||
| value: 16, | ||
| }, | ||
| { | ||
| 'gained > 100$': 0, | ||
| 'gained <= 100$': 16, | ||
| 'lost <= 100$': -84, | ||
| 'lost > 100$': 0, | ||
| user: 'Marcel', | ||
| key: 'gained > 100$', | ||
| value: 0, | ||
| }, | ||
| { | ||
| 'gained > 100$': 23, | ||
| 'gained <= 100$': 44, | ||
| 'lost <= 100$': -20, | ||
| 'lost > 100$': -13, | ||
| user: 'Ibrahim', | ||
| key: 'lost > 100$', | ||
| value: -13, | ||
| }, | ||
| { | ||
| 'gained > 100$': 23, | ||
| 'gained <= 100$': 44, | ||
| 'lost <= 100$': -20, | ||
| 'lost > 100$': -13, | ||
| user: 'Ibrahim', | ||
| key: 'lost <= 100$', | ||
| value: -20, | ||
| }, | ||
| { | ||
| 'gained > 100$': 23, | ||
| 'gained <= 100$': 44, | ||
| 'lost <= 100$': -20, | ||
| 'lost > 100$': -13, | ||
| user: 'Ibrahim', | ||
| key: 'gained <= 100$', | ||
| value: 44, | ||
| }, | ||
| { | ||
| 'gained > 100$': 23, | ||
| 'gained <= 100$': 44, | ||
| 'lost <= 100$': -20, | ||
| 'lost > 100$': -13, | ||
| user: 'Ibrahim', | ||
| key: 'gained > 100$', | ||
| value: 23, | ||
| }, | ||
| { | ||
| 'gained > 100$': 3, | ||
| 'gained <= 100$': 38, | ||
| 'lost <= 100$': -42, | ||
| 'lost > 100$': -17, | ||
| user: 'Junko', | ||
| key: 'lost > 100$', | ||
| value: -17, | ||
| }, | ||
| { | ||
| 'gained > 100$': 3, | ||
| 'gained <= 100$': 38, | ||
| 'lost <= 100$': -42, | ||
| 'lost > 100$': -17, | ||
| user: 'Junko', | ||
| key: 'lost <= 100$', | ||
| value: -42, | ||
| }, | ||
| { | ||
| 'gained > 100$': 3, | ||
| 'gained <= 100$': 38, | ||
| 'lost <= 100$': -42, | ||
| 'lost > 100$': -17, | ||
| user: 'Junko', | ||
| key: 'gained <= 100$', | ||
| value: 38, | ||
| }, | ||
| { | ||
| 'gained > 100$': 3, | ||
| 'gained <= 100$': 38, | ||
| 'lost <= 100$': -42, | ||
| 'lost > 100$': -17, | ||
| user: 'Junko', | ||
| key: 'gained > 100$', | ||
| value: 3, | ||
| }, | ||
| { | ||
| 'gained > 100$': 1, | ||
| 'gained <= 100$': 3, | ||
| 'lost <= 100$': -77, | ||
| 'lost > 100$': -19, | ||
| user: 'Lyu', | ||
| key: 'lost > 100$', | ||
| value: -19, | ||
| }, | ||
| { | ||
| 'gained > 100$': 1, | ||
| 'gained <= 100$': 3, | ||
| 'lost <= 100$': -77, | ||
| 'lost > 100$': -19, | ||
| user: 'Lyu', | ||
| key: 'lost <= 100$', | ||
| value: -77, | ||
| }, | ||
| { | ||
| 'gained > 100$': 1, | ||
| 'gained <= 100$': 3, | ||
| 'lost <= 100$': -77, | ||
| 'lost > 100$': -19, | ||
| user: 'Lyu', | ||
| key: 'gained <= 100$', | ||
| value: 3, | ||
| }, | ||
| { | ||
| 'gained > 100$': 1, | ||
| 'gained <= 100$': 3, | ||
| 'lost <= 100$': -77, | ||
| 'lost > 100$': -19, | ||
| user: 'Lyu', | ||
| key: 'gained > 100$', | ||
| value: 1, | ||
| }, | ||
| { | ||
| 'gained > 100$': 28, | ||
| 'gained <= 100$': 59, | ||
| 'lost <= 100$': -9, | ||
| 'lost > 100$': -4, | ||
| user: 'André', | ||
| key: 'lost > 100$', | ||
| value: -4, | ||
| }, | ||
| { | ||
| 'gained > 100$': 28, | ||
| 'gained <= 100$': 59, | ||
| 'lost <= 100$': -9, | ||
| 'lost > 100$': -4, | ||
| user: 'André', | ||
| key: 'lost <= 100$', | ||
| value: -9, | ||
| }, | ||
| { | ||
| 'gained > 100$': 28, | ||
| 'gained <= 100$': 59, | ||
| 'lost <= 100$': -9, | ||
| 'lost > 100$': -4, | ||
| user: 'André', | ||
| key: 'gained <= 100$', | ||
| value: 59, | ||
| }, | ||
| { | ||
| 'gained > 100$': 28, | ||
| 'gained <= 100$': 59, | ||
| 'lost <= 100$': -9, | ||
| 'lost > 100$': -4, | ||
| user: 'André', | ||
| key: 'gained > 100$', | ||
| value: 28, | ||
| }, | ||
| { | ||
| 'gained > 100$': 1, | ||
| 'gained <= 100$': 9, | ||
| 'lost <= 100$': -80, | ||
| 'lost > 100$': -10, | ||
| user: 'Maki', | ||
| key: 'lost > 100$', | ||
| value: -10, | ||
| }, | ||
| { | ||
| 'gained > 100$': 1, | ||
| 'gained <= 100$': 9, | ||
| 'lost <= 100$': -80, | ||
| 'lost > 100$': -10, | ||
| user: 'Maki', | ||
| key: 'lost <= 100$', | ||
| value: -80, | ||
| }, | ||
| { | ||
| 'gained > 100$': 1, | ||
| 'gained <= 100$': 9, | ||
| 'lost <= 100$': -80, | ||
| 'lost > 100$': -10, | ||
| user: 'Maki', | ||
| key: 'gained <= 100$', | ||
| value: 9, | ||
| }, | ||
| { | ||
| 'gained > 100$': 1, | ||
| 'gained <= 100$': 9, | ||
| 'lost <= 100$': -80, | ||
| 'lost > 100$': -10, | ||
| user: 'Maki', | ||
| key: 'gained > 100$', | ||
| value: 1, | ||
| }, | ||
| ], | ||
| encode: { x: 'user', y: 'value', color: 'key' }, | ||
| shapeField: 'smooth', | ||
| scale: { | ||
| y: { domainMin: -100, domainMax: 100 }, | ||
| color: { | ||
| domain: ['lost > 100$', 'lost <= 100$', 'gained <= 100$', 'gained > 100$'], | ||
| range: ['#61cdbb', '#97e3d5', '#f47560', '#e25c3b'], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| return <Area {...config} />; | ||
| }; |
There was a problem hiding this comment.
The component implementation can be improved for correctness, readability, and maintainability.
- Critical Syntax Error: The
configobject literal is missing commas between its properties (data,encode,shapeField), which will cause a JavaScript syntax error and prevent the component from rendering. - Incorrect Property: The
shapeField: 'smooth'property is not the correct way to create a smooth area chart. You should useshape: 'smooth'instead. - Data Structure: The
dataarray is extremely verbose and contains a lot of redundant information. This makes the code hard to read and maintain. It's much cleaner to define the source data in a compact "wide" format and then programmatically transform it into the "long" format required by the chart.
I've combined fixes for all these issues into a single refactoring suggestion for the entire component.
const DemoSegmentedArea = () => {
const sourceData = [
{ user: 'John', 'gained > 100$': 7, 'gained <= 100$': 21, 'lost <= 100$': -59, 'lost > 100$': -13 },
{ user: 'Raoul', 'gained > 100$': 13, 'gained <= 100$': 33, 'lost <= 100$': -51, 'lost > 100$': -3 },
{ user: 'Jane', 'gained > 100$': 24, 'gained <= 100$': 47, 'lost <= 100$': -29, 'lost > 100$': 0 },
{ user: 'Marcel', 'gained > 100$': 0, 'gained <= 100$': 16, 'lost <= 100$': -84, 'lost > 100$': 0 },
{ user: 'Ibrahim', 'gained > 100$': 23, 'gained <= 100$': 44, 'lost <= 100$': -20, 'lost > 100$': -13 },
{ user: 'Junko', 'gained > 100$': 3, 'gained <= 100$': 38, 'lost <= 100$': -42, 'lost > 100$': -17 },
{ user: 'Lyu', 'gained > 100$': 1, 'gained <= 100$': 3, 'lost <= 100$': -77, 'lost > 100$': -19 },
{ user: 'André', 'gained > 100$': 28, 'gained <= 100$': 59, 'lost <= 100$': -9, 'lost > 100$': -4 },
{ user: 'Maki', 'gained > 100$': 1, 'gained <= 100$': 9, 'lost <= 100$': -80, 'lost > 100$': -10 },
];
const keys = ['lost > 100$', 'lost <= 100$', 'gained <= 100$', 'gained > 100$'];
const data = sourceData.flatMap((item) => {
return keys.map((key) => ({
user: item.user,
key,
value: item[key],
}));
});
const config = {
paddingLeft: 25,
data,
encode: { x: 'user', y: 'value', color: 'key' },
shape: 'smooth',
scale: {
y: { domainMin: -100, domainMax: 100 },
color: {
domain: keys,
range: ['#61cdbb', '#97e3d5', '#f47560', '#e25c3b'],
},
},
};
return <Area {...config} />;
};| "filename": "area-fill.js", | ||
| "title": { | ||
| "zh": "根据数值填充面积颜色", | ||
| "en": "According to value fill area color" |
There was a problem hiding this comment.
The English title "According to value fill area color" is grammatically awkward and not very idiomatic. A clearer and more natural title would improve the documentation for English-speaking users.
| "en": "According to value fill area color" | |
| "en": "Fill Area Color by Value" |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
site/examples/case/interactions/demo/meta.json (1)
104-118: 英文标题可读性建议微调（非阻塞）
"According to value fill area color"语法略生硬，建议改为更自然的表达（例如 “Fill area color by value” / “Color the area by value”），便于文档检索与阅读。site/examples/case/interactions/demo/area-fill.js (2)
5-346: Demo 组件命名与文件意图不一致
文件是area-fill.js，但组件名是DemoSegmentedArea，容易让读者误以为是 “segmented-area”。建议改名为DemoAreaFill（或类似）以匹配示例语义。
6-343: 数据字段冗余，可能干扰读者理解
当前encode只用到了user/key/value，但每条数据里还包含 4 个冗余指标字段（如'gained > 100$'等）。建议删除这些未参与映射的字段，或在注释中说明其存在目的（否则读者会以为是“宽表”映射）。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
site/examples/case/interactions/demo/area-fill.js(1 hunks)site/examples/case/interactions/demo/meta.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test (latest)
- GitHub Check: test (latest)
🔇 Additional comments (1)
site/examples/case/interactions/demo/area-fill.js (1)
6-343: 所有配置字段在 @ant-design/plots v2.6.6 中都已支持。验证确认：
encode: { x, y, color }— 使用 G2Plot encode 映射，正确shapeField: 'smooth'— 在多个官方 Area 示例中使用（stacked-area、area-gradient、cascade-area 等），已验证支持scale.y.domainMin/domainMax— v2 标准用法，正确scale.color.domain/range— 调色板自定义方式，正确此配置与代码库中其他 Area 图表示例保持一致，无兼容性问题。
| return <Area {...config} />; | ||
| }; | ||
|
|
||
| createRoot(document.getElementById('container')).render(<DemoSegmentedArea />); |
There was a problem hiding this comment.
挂载点可能为 null：建议加守卫避免 demo 页直接报错
document.getElementById('container') 若返回 null，createRoot(null) 会直接抛错，导致整页示例不可用。建议显式判空。
-createRoot(document.getElementById('container')).render(<DemoSegmentedArea />);
+const container = document.getElementById('container');
+if (container) {
+ createRoot(container).render(<DemoSegmentedArea />);
+}🤖 Prompt for AI Agents
In site/examples/case/interactions/demo/area-fill.js around line 348, the mount
target may be null causing createRoot(null) to throw; add a null check for
document.getElementById('container') before calling createRoot and only call
createRoot(...).render(...) when the element exists (otherwise log a warning or
no-op) to prevent the demo page from crashing.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.