Skip to content

feat(vseed): 支持按坐标范围绘制区域标注 - #543

Open
666haiwen wants to merge 2 commits into
mainfrom
feat/vseed-region-annotation
Open

666haiwen wants to merge 2 commits into
mainfrom
feat/vseed-region-annotation

Conversation

@666haiwen

@666haiwen 666haiwen commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

🤔 这个分支是...

  • 新功能
  • Ts 类型更新
  • 测试 case 更新
  • 网站/文档更新
  • demo 更新

🔗 相关 issue 链接

暂无。

🔗 相关的 PR 链接

无。

🐞 Bugserver 用例 id

不适用。

💡 问题的背景&解决方案

现有 annotationArea.selector 依赖已选中的数据点,无法准确表达“y > 10 是高危险区域”或散点图中没有数据点的矩形区域。本 PR 新增与 selector 互斥的 range 模式,使用线性数值轴的坐标上下界绘制区域:

annotationArea: {
  range: { y: { min: 10, max: AxisBoundaryEnum.Max } },
  text: '高危险区域',
  areaColor: '#ef4444',
  areaColorOpacity: 0.12,
}
  • range.x、range.y 至少填写一项;每项必须同时提供 min / max,可用导出的 AxisBoundaryEnum.Min/Max 指向当前轴边界。未填写的轴铺满绘图区。
  • 支持散点、折线/面积、柱/条、箱线和直方图及适用变体;仅允许普通数值线性轴。完全越界时不绘制,部分越界时裁剪。
  • 保留原有 selector 色带行为,并在类型、Schema 和 Builder 路径校验两种模式的互斥及必填约束。
  • 增加 Builder、坐标计算、实际 VChart 渲染和文档生成的回归测试,补充可运行示例并重新生成配置文档。顺带修复示例生成器的代码围栏尾随空格。

验证

  • @visactor/vseed 完整测试与覆盖率、单元测试覆盖率、类型检查及构建通过;完整覆盖率:语句/行 89.74%,分支 79.03%,函数 81.48%。
  • 网站测试与覆盖率、类型检查、生产构建通过。
  • 本地文档站浏览器确认直方图区域着色及选项文档的互斥/可选字段显示;页面:/VBI/vseed/examples/features/annotationArea.html。

发布计划

  • 已添加 @visactor/vseed 的 patch Changeset。pnpm changeset status 确认固定版本组中的 VSeed、VBI、VQuery 都规划为 patch;当前 0.6.0 的目标版本为 0.6.1。此 PR 不直接修改包版本,也不执行发布。

☑️ 自测

  • 文档提供了,或者更新,或者不需要
  • Demo 提供了,或者更新,或者不需要
  • Ts 类型定义提供了,或者更新,或者不需要
  • Changelog 提供了,或者不需要(已添加 Changeset,版本 PR 将生成更新记录)

Why:
- Let charts mark numeric risk zones even when no data point falls inside them.
- Keep selector bands and range annotations mutually exclusive and explicit.

What:
- Add validated range bounds and axis-aware clipped geometry for supported Cartesian charts.
- Cover Builder validation, rendering, generated option docs, and runnable examples.
- Fix generated preview fence whitespace and retain stable coverage floors.
Record the VSeed range-annotation feature as a patch Changeset so the fixed VSeed, VBI, and VQuery release group can advance together.
const issues = validation.error.issues.map((issue) => `${issue.path.join('.')}: ${issue.message}`).join('; ')
throw new Error(`${path}.range: ${issues}`)
}
if (!rangeChartTypes.has(vseed.chartType)) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

建议pipe解除图表类型依赖, 最小功能pipe, 在各个图表类型中组装;

每个pipeline已经确定图表类型了, 应该避免在pipe内根据图表类型做不同的逻辑;

This branch has not been deployed

No deployments
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

Successfully merging this pull request may close these issues.

2 participants