BREAKING CHANGE: update the configuration of the Stock#3003
Conversation
📝 WalkthroughWalkthrough此次更新重构了股票图（Stock plot）核心适配器与类型定义，简化了数据处理和样式配置方式，移除了自定义涨跌色彩属性，新增通用线条样式属性。文档与示例也进行了全面扩充和重组，提供更丰富的用例、配置说明及常见问题解答。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant StockChart
participant DataSource
User->>StockChart: 配置静态或远程数据、样式等属性
StockChart->>DataSource: （如需）异步获取数据
DataSource-->>StockChart: 返回股票数据
StockChart->>StockChart: 直接按 yField、style 配置渲染
StockChart-->>User: 展示股票图（含自定义颜色/线型/tooltip）
Poem
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
site/examples/statistics/stock/demo/color.jsOops! 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: 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 detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
site/docs/components/plots/stock.zh.md (1)
82-93: 删除已废弃的配置项说明根据PR的破坏性变更说明，
risingFill和fallingFill配置已被移除，文档应同步更新。-### risingFill - -<description>**optional** _string_</description> - -上涨色 - -### fallingFill - -<description>**optional** _string_</description> - -下跌色
🧹 Nitpick comments (1)
site/examples/statistics/stock/demo/line.js (1)
28-34: 建议优化线条配置线条配置中的
colorField: ''可能不够明确。建议明确指定或添加注释说明其用途。line: { yField: 'mean', - colorField: '', + colorField: '', // 清空颜色字段以使用默认样式 style: { stroke: '#FACC14', }, },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
packages/plots/src/core/plots/stock/adaptor.ts(1 hunks)packages/plots/src/core/plots/stock/index.ts(1 hunks)packages/plots/src/core/plots/stock/type.ts(1 hunks)site/docs/components/plots/stock.zh.md(1 hunks)site/examples/statistics/stock/demo/basic.js(1 hunks)site/examples/statistics/stock/demo/color.js(1 hunks)site/examples/statistics/stock/demo/custom-color.js(0 hunks)site/examples/statistics/stock/demo/line.js(1 hunks)site/examples/statistics/stock/demo/meta.json(1 hunks)site/package.json(1 hunks)
💤 Files with no reviewable changes (1)
- site/examples/statistics/stock/demo/custom-color.js
🧰 Additional context used
🧬 Code Graph Analysis (2)
site/examples/statistics/stock/demo/line.js (3)
site/examples/statistics/stock/demo/basic.js (2)
DemoStock(197-224)config(202-221)site/examples/statistics/stock/demo/color.js (2)
DemoStock(5-60)config(6-57)packages/plots/src/core/plots/stock/index.ts (1)
Stock(10-66)
packages/plots/src/core/plots/stock/adaptor.ts (2)
packages/plots/src/core/utils/index.ts (3)
set(12-12)flow(3-3)transformOptions(33-33)packages/plots/src/core/annotation/index.ts (1)
init(19-32)
🪛 Biome (1.9.4)
packages/plots/src/core/plots/stock/adaptor.ts
[error] 28-28: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 30-33: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 33-33: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: deploy
🔇 Additional comments (14)
site/package.json (1)
48-48: ```shell
#!/bin/bash
set -e在隔离目录中生成最小化 package.json 并进行安全审计
mkdir -p audit-temp && cd audit-temp
cat < package.json
{
"name": "audit-temp",
"version": "1.0.0",
"dependencies": {
"@antv/dumi-theme-antv": "0.7.6"
}
}
EOF仅生成 lockfile，不实际安装依赖
npm install --package-lock-only
执行安全审计，输出 JSON 格式结果
npm audit --audit-level=moderate --json
</details> <details> <summary>packages/plots/src/core/plots/stock/index.ts (2)</summary> `29-29`: **注释更新提升了代码可读性** 将注释从 "shadow" 更新为 "line shadow" 更好地说明了该子元素的用途。 --- `34-34`: **验证类型变更的一致性** 第二个子元素的类型从 'link' 更改为 'interval'。请确认这个变更与 adaptor.ts 中的逻辑保持一致。 ```shell #!/bin/bash # 检查 adaptor.ts 中对 interval 类型的处理 echo "检查 Stock adaptor 中的子元素类型处理..." cat packages/plots/src/core/plots/stock/adaptor.ts | grep -A 10 -B 5 "interval\|link"site/examples/statistics/stock/demo/meta.json (2)
16-22: 示例元数据更新符合重构目标将 demo 从 "custom-color.js" 重命名为 "color.js" 并更新标题为 "颜色映射"，这与移除自定义颜色属性的重构目标一致。
23-30: 新增线条样式示例新增的 "line.js" 示例展示了新的
lineStyle属性功能，很好地补充了文档。site/examples/statistics/stock/demo/line.js (1)
5-47: 新示例正确展示了 lineStyle 功能该示例很好地展示了新的
lineStyle属性的使用方式，配置看起来正确且完整。代码结构清晰，字段映射合理。packages/plots/src/core/plots/stock/type.ts (4)
1-1: 正确添加了 AttrStyle 类型导入新增的
AttrStyle导入支持了lineStyle属性的类型定义。
6-6: 修正了 yField 字段顺序描述字段顺序从
[open, close, high, low]更正为[open, close, low, high]，这个修正很重要，确保了文档的准确性。
10-12: 重构后的样式属性设计更加通用移除了
risingFill和fallingFill特定颜色属性，新增了更通用的lineStyle属性。这是一个好的设计改进，提供了更大的灵活性。
8-8: 继续验证文档文件中的 yField 使用顺序：#!/bin/bash echo "检查文档文件中的 yField 使用..." grep -R "yField" -n --include='*.md' --include='*.mdx' --include='*.html' .packages/plots/src/core/plots/stock/adaptor.ts (2)
17-24: 代码逻辑正确实现了股票图的标准表示线影和实体部分的字段分配符合股票图的标准约定。
33-33: 适配器流程简化合理移除数据转换步骤，保持配置处理的简洁性。
site/docs/components/plots/stock.zh.md (1)
12-18: 股票图介绍内容专业且全面清晰地说明了股票图的用途和核心特点。
site/examples/statistics/stock/demo/basic.js (1)
205-205: 验证yField字段顺序yField配置为
['start', 'end', 'min', 'max']，请确认这个顺序是否符合预期。根据适配器代码，它期望的顺序是[open, close, high, low]。建议参考文档中的标准顺序配置：
- yField: ['start', 'end', 'min', 'max'], + yField: ['start', 'end', 'max', 'min'],
| delete options.yField; | ||
| delete options.lineStyle; | ||
| delete options.style; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
使用undefined赋值替代delete操作符以提升性能
静态分析正确地指出了性能问题。在JavaScript中，delete操作符会导致对象去优化，影响性能。
- delete options.yField;
- delete options.lineStyle;
- delete options.style;
+ options.yField = undefined;
+ options.lineStyle = undefined;
+ options.style = undefined;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| delete options.yField; | |
| delete options.lineStyle; | |
| delete options.style; | |
| // replace delete with undefined assignment to avoid V8 deoptimizations | |
| options.yField = undefined; | |
| options.lineStyle = undefined; | |
| options.style = undefined; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 28-28: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
🤖 Prompt for AI Agents
In packages/plots/src/core/plots/stock/adaptor.ts around lines 26 to 28, replace
the delete operations on options.yField, options.lineStyle, and options.style
with assignments to undefined to improve performance and avoid de-optimizing the
object.
| const color = (d) => { | ||
| const trend = Math.sign(d.start - d.end); | ||
| return trend > 0 ? '#4daf4a' : trend === 0 ? '#999999' : '#e41a1c'; | ||
| }; |
There was a problem hiding this comment.
颜色逻辑错误：涨跌颜色相反
当前逻辑将下跌显示为绿色，上涨显示为红色，不符合常见的股票图表约定。
- const trend = Math.sign(d.start - d.end);
- return trend > 0 ? '#4daf4a' : trend === 0 ? '#999999' : '#e41a1c';
+ const trend = Math.sign(d.end - d.start);
+ return trend > 0 ? '#e41a1c' : trend === 0 ? '#999999' : '#4daf4a';或者保持计算不变，调整颜色映射：
const trend = Math.sign(d.start - d.end);
- return trend > 0 ? '#4daf4a' : trend === 0 ? '#999999' : '#e41a1c';
+ return trend > 0 ? '#e41a1c' : trend === 0 ? '#999999' : '#4daf4a';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const color = (d) => { | |
| const trend = Math.sign(d.start - d.end); | |
| return trend > 0 ? '#4daf4a' : trend === 0 ? '#999999' : '#e41a1c'; | |
| }; | |
| const color = (d) => { | |
| const trend = Math.sign(d.start - d.end); | |
| return trend > 0 ? '#e41a1c' : trend === 0 ? '#999999' : '#4daf4a'; | |
| }; |
🤖 Prompt for AI Agents
In site/examples/statistics/stock/demo/basic.js around lines 198 to 201, the
color function incorrectly assigns green to downtrends and red to uptrends,
which is opposite to standard stock chart conventions. Fix this by reversing the
color mapping so that when the trend indicates a price increase (start less than
end), it returns green (#4daf4a), and when it indicates a decrease (start
greater than end), it returns red (#e41a1c). Keep the zero trend color as gray
(#999999).
1 participant
fallingFillandrisingFill.Summary by CodeRabbit