From 196acc55cb7f539be75a1375daf806cf3f3dbefb Mon Sep 17 00:00:00 2001 From: ZJU_czx <952370295@qq.com> Date: Thu, 24 Sep 2026 11:33:48 +0800 Subject: [PATCH 1/6] feat: add coordinate-range area annotations 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. --- README.md | 2 +- .../zh-CN/vseed/examples/chartType/area.mdx | 6 +- .../vseed/examples/chartType/areaPercent.mdx | 6 +- .../zh-CN/vseed/examples/chartType/bar.mdx | 6 +- .../vseed/examples/chartType/barParallel.mdx | 6 +- .../vseed/examples/chartType/barPercent.mdx | 6 +- .../vseed/examples/chartType/boxplot.mdx | 4 +- .../examples/chartType/circlePacking.mdx | 6 +- .../zh-CN/vseed/examples/chartType/column.mdx | 6 +- .../examples/chartType/columnParallel.mdx | 6 +- .../examples/chartType/columnPercent.mdx | 6 +- .../zh-CN/vseed/examples/chartType/donut.mdx | 6 +- .../vseed/examples/chartType/dualAxis.mdx | 16 +- .../zh-CN/vseed/examples/chartType/funnel.mdx | 8 +- .../vseed/examples/chartType/heatmap.mdx | 8 +- .../examples/chartType/hierarchySankey.mdx | 8 +- .../vseed/examples/chartType/histogram.mdx | 10 +- .../zh-CN/vseed/examples/chartType/line.mdx | 6 +- .../zh-CN/vseed/examples/chartType/pie.mdx | 6 +- .../vseed/examples/chartType/pivotTable.mdx | 6 +- .../vseed/examples/chartType/raceBar.mdx | 2 +- .../vseed/examples/chartType/raceColumn.mdx | 2 +- .../vseed/examples/chartType/raceDonut.mdx | 2 +- .../vseed/examples/chartType/raceLine.mdx | 2 +- .../vseed/examples/chartType/racePie.mdx | 2 +- .../vseed/examples/chartType/raceScatter.mdx | 2 +- .../zh-CN/vseed/examples/chartType/radar.mdx | 6 +- .../zh-CN/vseed/examples/chartType/rose.mdx | 10 +- .../vseed/examples/chartType/roseParallel.mdx | 6 +- .../zh-CN/vseed/examples/chartType/sankey.mdx | 4 +- .../vseed/examples/chartType/scatter.mdx | 6 +- .../vseed/examples/chartType/sunburst.mdx | 6 +- .../zh-CN/vseed/examples/chartType/table.mdx | 8 +- .../vseed/examples/chartType/treeMap.mdx | 6 +- .../vseed/examples/features/animation.mdx | 10 +- .../examples/features/annotationArea.mdx | 663 +++++++++++++++++- .../features/annotationHorizontalLine.mdx | 4 +- .../examples/features/annotationPoint.mdx | 6 +- .../features/annotationVerticalLine.mdx | 4 +- .../vseed/examples/features/barStyle.mdx | 8 +- .../vseed/examples/features/bodyCellStyle.mdx | 20 +- .../zh-CN/vseed/examples/features/brush.mdx | 4 +- .../zh-CN/vseed/examples/features/color.mdx | 4 +- .../zh-CN/vseed/examples/features/dataset.mdx | 16 +- .../vseed/examples/features/dimensions.mdx | 8 +- .../zh-CN/vseed/examples/features/i18n.mdx | 4 +- .../zh-CN/vseed/examples/features/label.mdx | 2 +- .../zh-CN/vseed/examples/features/legend.mdx | 14 +- .../vseed/examples/features/measures.mdx | 2 +- .../vseed/examples/features/numFormat.mdx | 18 +- .../vseed/examples/features/pointStyle.mdx | 10 +- .../vseed/examples/features/polynomial.mdx | 4 +- .../zh-CN/vseed/examples/features/sort.mdx | 16 +- .../zh-CN/vseed/examples/features/totals.mdx | 6 +- apps/website/docs/zh-CN/vseed/option/area.md | 76 +- .../docs/zh-CN/vseed/option/areaPercent.md | 76 +- apps/website/docs/zh-CN/vseed/option/bar.md | 76 +- .../docs/zh-CN/vseed/option/barParallel.md | 76 +- .../docs/zh-CN/vseed/option/barPercent.md | 76 +- .../docs/zh-CN/vseed/option/boxPlot.md | 76 +- .../website/docs/zh-CN/vseed/option/column.md | 76 +- .../docs/zh-CN/vseed/option/columnParallel.md | 76 +- .../docs/zh-CN/vseed/option/columnPercent.md | 76 +- .../docs/zh-CN/vseed/option/dualAxis.md | 76 +- .../docs/zh-CN/vseed/option/histogram.md | 76 +- apps/website/docs/zh-CN/vseed/option/line.md | 76 +- .../docs/zh-CN/vseed/option/raceBar.md | 76 +- .../docs/zh-CN/vseed/option/raceColumn.md | 76 +- .../docs/zh-CN/vseed/option/raceLine.md | 76 +- .../docs/zh-CN/vseed/option/raceScatter.md | 76 +- .../docs/zh-CN/vseed/option/scatter.md | 76 +- .../2026-09-23-annotation-area-range/plan.md | 132 ++++ packages/vseed/scripts/build-docs.mjs | 37 +- packages/vseed/scripts/build-examples.mjs | 2 +- .../chart/pipes/annotation/annotation.ts | 43 ++ .../chart/pipes/annotation/annotationArea.ts | 5 + .../pipes/annotation/annotationAreaBand.ts | 5 + .../pipes/annotation/annotationAreaRange.ts | 51 ++ .../properties/annotation/annotationArea.ts | 34 +- .../annotation/annotationAreaRange.ts | 28 + .../src/types/properties/annotation/index.ts | 1 + .../properties/annotation/zAnnotationArea.ts | 30 +- .../config/annotation/zAnnotation.ts | 4 +- .../annotationArea/area-selector-months.json | 23 + .../annotationArea/bar-range-risk.json | 20 + .../examples/features/annotationArea/bar.json | 2 +- .../annotationArea/boxplot-range-risk.json | 27 + .../annotationArea/column-range-risk.json | 20 + .../histogram-range-window.json | 26 + .../annotationArea/line-range-risk.json | 20 + .../annotationArea/scatter-range-empty.json | 24 + .../scatter-range-rectangle.json | 24 + .../annotationArea/scatter-range-x.json | 24 + .../annotationArea/scatter-range-y.json | 24 + .../tests/examples/features/features.test.ts | 404 ++++++----- .../unit/builder/annotationAreaRange.test.ts | 371 ++++++++++ .../builder/annotationAreaRangeRender.test.ts | 151 ++++ .../tests/unit/scripts/buildDocs.test.ts | 36 + packages/vseed/vite.config.ts | 4 +- 99 files changed, 3450 insertions(+), 435 deletions(-) create mode 100644 docs/adr/packages/vseed/2026-09-23-annotation-area-range/plan.md create mode 100644 packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaRange.ts create mode 100644 packages/vseed/src/types/properties/annotation/annotationAreaRange.ts create mode 100644 packages/vseed/tests/examples/features/annotationArea/area-selector-months.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/bar-range-risk.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/boxplot-range-risk.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/column-range-risk.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/histogram-range-window.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/line-range-risk.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/scatter-range-empty.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/scatter-range-rectangle.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/scatter-range-x.json create mode 100644 packages/vseed/tests/examples/features/annotationArea/scatter-range-y.json create mode 100644 packages/vseed/tests/unit/builder/annotationAreaRange.test.ts create mode 100644 packages/vseed/tests/unit/builder/annotationAreaRangeRender.test.ts create mode 100644 packages/vseed/tests/unit/scripts/buildDocs.test.ts diff --git a/README.md b/README.md index 7089c5be3b..777224c1f2 100644 --- a/README.md +++ b/README.md @@ -9,5 +9,5 @@ VBI provides reusable packages and agent skills for AI-oriented business intelli | Name | Description | Test Coverage | Npm Version | | :------------------------------------------------------------- | :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | | [vbi](https://visactor.github.io/VBI) | Visualization Query | [![Coverage](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg)](https://github.com/VisActor/VBI/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vbi.svg)](https://www.npmjs.com/package/@visactor/vbi) | -| [vseed](https://visactor.github.io/VBI/vseed/guide/quickStart) | Visualization engine | [![Coverage](https://img.shields.io/badge/Coverage-89.13%25-green.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vseed.svg)](https://www.npmjs.com/package/@visactor/vseed) | +| [vseed](https://visactor.github.io/VBI/vseed/guide/quickStart) | Visualization engine | [![Coverage](https://img.shields.io/badge/Coverage-89.74%25-green.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vseed.svg)](https://www.npmjs.com/package/@visactor/vseed) | | [vquery](https://visactor.github.io/VBI/VQuery) | Lightweight Query Engine | [![Coverage](https://img.shields.io/badge/Coverage-100.00%25-brightgreen.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vquery.svg)](https://www.npmjs.com/package/@visactor/vquery) | diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/area.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/area.mdx index 2d959a5643..2c6f48fceb 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/area.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/area.mdx @@ -4,7 +4,7 @@ A basic area chart suitable for showing trends over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合堆叠面积图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合堆叠面积图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/areaPercent.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/areaPercent.mdx index ceed6bd93c..4f01c46527 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/areaPercent.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/areaPercent.mdx @@ -4,7 +4,7 @@ A percentage area chart showing the relative contribution of each category over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合百分比面积图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合百分比面积图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/bar.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/bar.mdx index eb834f7b3c..804fc4b73b 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/bar.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/bar.mdx @@ -4,7 +4,7 @@ A basic bar chart for comparing categorical data. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合堆叠条形图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合堆叠条形图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/barParallel.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/barParallel.mdx index 9a43fcf57c..a0444b4985 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/barParallel.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/barParallel.mdx @@ -4,7 +4,7 @@ A parallel bar chart for comparing multiple measures across categories. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合并列条形图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合并列条形图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/barPercent.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/barPercent.mdx index 0a8844d586..0b5cf95a8f 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/barPercent.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/barPercent.mdx @@ -4,7 +4,7 @@ A percentage bar chart showing the relative proportion of each category. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合百分比条形图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合百分比条形图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/boxplot.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/boxplot.mdx index fe1a16f429..b91ef892da 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/boxplot.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/boxplot.mdx @@ -4,7 +4,7 @@ A boxplot showing the distribution of data based on a five-number summary. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -568,7 +568,7 @@ export default () => { 透视箱型图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/circlePacking.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/circlePacking.mdx index 68d097bd9a..7a876dad68 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/circlePacking.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/circlePacking.mdx @@ -4,7 +4,7 @@ A circle packing chart showing sales hierarchy across product categories, sub-categories, and products. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -120,7 +120,7 @@ export default () => { 展示食品饮料、个护家清等品类的销售额与利润分布，通过圆形嵌套展示层级与指标关系。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -307,7 +307,7 @@ export default () => { Sales and profit distribution of a global retail chain across 4 regions (Asia Pacific, North America, Europe, Latin America), 3 channels (Online, Retail Store, Wholesale), and 3 product categories (Personal Care, Home Appliance, Food & Beverage), enabling multi-dimensional drill-down analysis via TreeMap. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/column.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/column.mdx index 7ba434cb9c..2230afd4fc 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/column.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/column.mdx @@ -4,7 +4,7 @@ A basic column chart for comparing values across categories. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合堆叠柱状图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合堆叠柱状图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/columnParallel.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/columnParallel.mdx index bb6adc50fc..1e1e576aaa 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/columnParallel.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/columnParallel.mdx @@ -4,7 +4,7 @@ A parallel column chart for comparing multiple measures side-by-side. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合并列柱状图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合并列柱状图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/columnPercent.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/columnPercent.mdx index ac6c43a1dd..a2ba8e7644 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/columnPercent.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/columnPercent.mdx @@ -4,7 +4,7 @@ A percentage column chart showing the relative share of each category. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合百分比柱状图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合百分比柱状图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/donut.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/donut.mdx index 60d15ddb6d..a7f9f5d63a 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/donut.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/donut.mdx @@ -4,7 +4,7 @@ A donut chart showing the proportional contribution of each category. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合环形图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合环形图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/dualAxis.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/dualAxis.mdx index ae76adb7f5..04065ffe24 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/dualAxis.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/dualAxis.mdx @@ -4,7 +4,7 @@ A dual-axis chart combining two different chart types or scales. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -57,7 +57,7 @@ export default () => { 双轴图默认效果 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -110,7 +110,7 @@ export default () => { 双轴图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -165,7 +165,7 @@ export default () => { 组合双轴图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -250,7 +250,7 @@ export default () => { 透视组合双轴图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -490,7 +490,7 @@ export default () => { 双轴图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -547,7 +547,7 @@ export default () => { 组合双轴图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -636,7 +636,7 @@ export default () => { primaryYAxis & secondaryYAxis -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/funnel.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/funnel.mdx index e9450439ee..6583db7032 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/funnel.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/funnel.mdx @@ -4,7 +4,7 @@ A funnel chart showing the progressive reduction of data through stages. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 多度量漏斗图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -84,7 +84,7 @@ export default () => { 组合漏斗图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -145,7 +145,7 @@ export default () => { 透视组合漏斗图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/heatmap.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/heatmap.mdx index 8a873cf6de..189ef1b7ad 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/heatmap.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/heatmap.mdx @@ -4,7 +4,7 @@ A heatmap using color intensity to represent values in a matrix. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -67,7 +67,7 @@ export default () => { 热图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -210,7 +210,7 @@ export default () => { 热力图指标组 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -319,7 +319,7 @@ export default () => { 透视热力图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/hierarchySankey.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/hierarchySankey.mdx index b239e34661..1555efefb6 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/hierarchySankey.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/hierarchySankey.mdx @@ -4,7 +4,7 @@ 展示销售额从区域流向国家再流向城市的层次桑基图。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -90,7 +90,7 @@ export default () => { 展示从大区到国家、再到渠道的层级流向，并通过单个指标控制流量大小。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -176,7 +176,7 @@ export default () => { 按区域与年份透视后的层次桑基图。区域映射到行，年份映射到列，每个透视单元内展示一棵独立的层级流向树。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -347,7 +347,7 @@ export default () => { 将“指标名称”本身放进层级路径中，展示每个大区下不同业务指标的流向，并通过单个数值指标控制大小。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/histogram.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/histogram.mdx index cec7f5f932..25a41be1b3 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/histogram.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/histogram.mdx @@ -4,7 +4,7 @@ A histogram showing the frequency distribution of a dataset. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -49,7 +49,7 @@ export default () => { 直方图增加KDE回归线 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -97,7 +97,7 @@ export default () => { 使用分箱数据展示直方图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -409,7 +409,7 @@ export default () => { 透视直方图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -608,7 +608,7 @@ export default () => { 透视直方图显示累计概率密度函数 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/line.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/line.mdx index b70e18f4a7..d672bbb76b 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/line.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/line.mdx @@ -4,7 +4,7 @@ A basic line chart for visualizing trends and changes over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合折线图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合折线图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/pie.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/pie.mdx index bb09e49ae7..dd56db464a 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/pie.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/pie.mdx @@ -4,7 +4,7 @@ A pie chart showing the numerical proportion of each category. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合饼图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -118,7 +118,7 @@ export default () => { 透视组合饼图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/pivotTable.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/pivotTable.mdx index 6338ccc930..b338c988cf 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/pivotTable.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/pivotTable.mdx @@ -4,7 +4,7 @@ A pivot table for summarizing and analyzing large datasets. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -67,7 +67,7 @@ export default () => { 行维度透视 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -164,7 +164,7 @@ export default () => { 列维度透视 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/raceBar.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/raceBar.mdx index 37d6d115e5..6a4095cd41 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/raceBar.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/raceBar.mdx @@ -4,7 +4,7 @@ A dynamic bar chart race animation showing ranking changes over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/raceColumn.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/raceColumn.mdx index 2f5d4bbba5..c036ed4caf 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/raceColumn.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/raceColumn.mdx @@ -4,7 +4,7 @@ A dynamic column chart race animation showing ranking changes over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/raceDonut.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/raceDonut.mdx index 7409f402c4..b0d463bf6a 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/raceDonut.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/raceDonut.mdx @@ -4,7 +4,7 @@ A dynamic donut chart race animation showing ranking changes over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/raceLine.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/raceLine.mdx index 783c2d0fef..5fe4bb2413 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/raceLine.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/raceLine.mdx @@ -4,7 +4,7 @@ A dynamic line chart race animation showing ranking changes over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/racePie.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/racePie.mdx index bae886d822..ff7c1ce287 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/racePie.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/racePie.mdx @@ -4,7 +4,7 @@ A dynamic pie chart race animation showing ranking changes over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/raceScatter.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/raceScatter.mdx index 4eee1a5191..596b6b475c 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/raceScatter.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/raceScatter.mdx @@ -4,7 +4,7 @@ A dynamic scatter plot animation showing changes in correlation over time. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/radar.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/radar.mdx index a3a1c057eb..28e4ee13eb 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/radar.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/radar.mdx @@ -4,7 +4,7 @@ A radar chart for comparing multiple quantitative variables. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -28,7 +28,7 @@ export default () => { 组合雷达图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -99,7 +99,7 @@ export default () => { 透视组合雷达图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/rose.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/rose.mdx index d161780594..18c92f5af9 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/rose.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/rose.mdx @@ -4,7 +4,7 @@ A nightingale rose chart (polar area chart) for cyclic data. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -42,7 +42,7 @@ export default () => { 玫瑰图(零维度) -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -66,7 +66,7 @@ export default () => { 组合堆叠玫瑰图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -140,7 +140,7 @@ export default () => { 透视堆叠玫瑰图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -325,7 +325,7 @@ export default () => { 堆叠玫瑰图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/roseParallel.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/roseParallel.mdx index e7154359ca..54c270d34b 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/roseParallel.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/roseParallel.mdx @@ -4,7 +4,7 @@ A parallel rose chart for comparing multiple cyclic datasets. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -47,7 +47,7 @@ export default () => { 组合分组玫瑰图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -121,7 +121,7 @@ export default () => { 透视组合分组玫瑰图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/sankey.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/sankey.mdx index 404748900e..8b8d13707c 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/sankey.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/sankey.mdx @@ -4,7 +4,7 @@ 由 Sankey spec 反推得到的 VSeed 示例。每条链路被还原为一行 tidyData，source 和 target 使用节点名称，value 表示流量大小。示例同时开启 tooltip 与图例，支持 hover 高亮和图例筛选交互。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -409,7 +409,7 @@ export default () => { 按区域与年份透视后的图形桑基图。区域映射到行，年份映射到列，每个透视单元内展示一张独立的 source-target 流向图。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/scatter.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/scatter.mdx index 66ed60e287..658d35bbd6 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/scatter.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/scatter.mdx @@ -4,7 +4,7 @@ A scatter plot for visualizing the relationship between two variables. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -68,7 +68,7 @@ export default () => { 组合散点图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -148,7 +148,7 @@ export default () => { 透视组合散点图 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/sunburst.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/sunburst.mdx index 7113b9dfa5..3c067ca3fa 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/sunburst.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/sunburst.mdx @@ -4,7 +4,7 @@ A sunburst chart showing sales hierarchy across product categories, sub-categories, and products. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -120,7 +120,7 @@ export default () => { 展示食品饮料、个护家清等品类的销售额与利润分布，通过多层圆环展示层级与指标关系。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -307,7 +307,7 @@ export default () => { Sales and profit distribution of a global retail chain across 4 regions (Asia Pacific, North America, Europe, Latin America), 3 channels (Online, Retail Store, Wholesale), and 3 product categories (Personal Care, Home Appliance, Food & Beverage), enabling multi-dimensional drill-down analysis via TreeMap. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/table.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/table.mdx index e5b0e93fb5..121d232631 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/table.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/table.mdx @@ -4,7 +4,7 @@ A basic table for displaying raw data in rows and columns. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -67,7 +67,7 @@ export default () => { 基础表格 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -162,7 +162,7 @@ export default () => { 分组表格 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -281,7 +281,7 @@ export default () => { A table with sum aggregation at the bottom. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/chartType/treeMap.mdx b/apps/website/docs/zh-CN/vseed/examples/chartType/treeMap.mdx index 44220a4f8a..d6a6a0a44c 100644 --- a/apps/website/docs/zh-CN/vseed/examples/chartType/treeMap.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/chartType/treeMap.mdx @@ -4,7 +4,7 @@ A tree map showing sales distribution across product categories, sub-categories, and products. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -120,7 +120,7 @@ export default () => { 展示食品饮料、个护家清等品类的销售额与利润分布，通过矩形嵌套展示层级与指标关系。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -307,7 +307,7 @@ export default () => { Sales and profit distribution of a global retail chain across 4 regions (Asia Pacific, North America, Europe, Latin America), 3 channels (Online, Retail Store, Wholesale), and 3 product categories (Personal Care, Home Appliance, Food & Beverage), enabling multi-dimensional drill-down analysis via TreeMap. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/animation.mdx b/apps/website/docs/zh-CN/vseed/examples/features/animation.mdx index 2bef042b49..9272f9819a 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/animation.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/animation.mdx @@ -4,7 +4,7 @@ Bar-like charts support appear, update, and loop animation. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -83,7 +83,7 @@ export default () => { Line and area charts support appear, update, and loop animation. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -161,7 +161,7 @@ export default () => { Pie-like charts support radial appear, update, and loop animation. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -237,7 +237,7 @@ export default () => { Radar charts support appear, update, and atmosphere loop animation. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -289,7 +289,7 @@ export default () => { Scatter charts support scale appear, growth update, and point atmosphere animation. -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/annotationArea.mdx b/apps/website/docs/zh-CN/vseed/examples/features/annotationArea.mdx index 45e13fda11..ce21da8ead 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/annotationArea.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/annotationArea.mdx @@ -1,10 +1,140 @@ # AnnotationArea +## 面积图：二月到三月分类色带 + +已有 selector 正例：选中二月、三月，纵向铺满绘图区。沿 x 的历史边界是选中类别中心加 outerPadding（默认 4px），不是面积曲线下方，也不是完整 band 外沿。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "area", + "dataset": [ + { + "month": "一月", + "region": "华东", + "value": 10 + }, + { + "month": "一月", + "region": "华西", + "value": 8 + }, + { + "month": "二月", + "region": "华东", + "value": 15 + }, + { + "month": "二月", + "region": "华西", + "value": 12 + }, + { + "month": "三月", + "region": "华东", + "value": 20 + }, + { + "month": "三月", + "region": "华西", + "value": 18 + } + ], + "dimensions": [ + { + "id": "month", + "encoding": "xAxis" + }, + { + "id": "region", + "encoding": "color" + } + ], + "measures": [ + { + "id": "value", + "encoding": "yAxis" + } + ], + "annotationArea": [ + { + "selector": { + "field": "month", + "operator": "in", + "value": [ + "二月", + "三月" + ] + }, + "text": "后两月" + } + ] +} + + return +} +``` + +## 条形图：高危险区域 + +横向条形图的数值轴是 x，因此风险阈值写在 range.x，分类 y 轴铺满。x/y 对应实际坐标轴，不随图表方向互换含义。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "bar", + "dataset": [ + { + "month": "一月", + "value": 5 + }, + { + "month": "二月", + "value": 15 + }, + { + "month": "三月", + "value": 20 + } + ], + "dimensions": [ + { + "id": "month", + "encoding": "yAxis" + } + ], + "measures": [ + { + "id": "value", + "encoding": "xAxis" + } + ], + "annotationArea": { + "range": { + "x": { + "min": 10, + "max": "axisMax" + } + }, + "text": "高危险区域", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + ## bar -bar +已有 selector 分类色带：选中 2021 年，沿数值 x 轴铺满绘图区；沿分类 y 轴使用完整 band 边界加 outerPadding，保持历史行为。 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -76,11 +206,145 @@ export default () => { } ``` +## 箱线图：高危险区间 + +箱线图的数值 y 轴标出高危险区间，分类 x 轴铺满；可直观看出各组箱体和须与阈值区间的关系。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "boxPlot", + "dataset": [ + { + "group": "甲组", + "value": 4 + }, + { + "group": "甲组", + "value": 8 + }, + { + "group": "甲组", + "value": 11 + }, + { + "group": "甲组", + "value": 14 + }, + { + "group": "甲组", + "value": 18 + }, + { + "group": "乙组", + "value": 6 + }, + { + "group": "乙组", + "value": 9 + }, + { + "group": "乙组", + "value": 13 + }, + { + "group": "乙组", + "value": 17 + }, + { + "group": "乙组", + "value": 22 + } + ], + "dimensions": [ + { + "id": "group", + "encoding": "xAxis" + } + ], + "measures": [ + { + "id": "value", + "encoding": "yAxis" + } + ], + "annotationArea": { + "range": { + "y": { + "min": 15, + "max": "axisMax" + } + }, + "text": "高危险区间", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + +## 柱状图：高危险区域 + +柱状图在数值 y 轴上绘制 10 到轴上限的水平色带，分类 x 轴铺满。range 两个数值端点必须满足 min < max。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "column", + "dataset": [ + { + "month": "一月", + "value": 5 + }, + { + "month": "二月", + "value": 15 + }, + { + "month": "三月", + "value": 20 + } + ], + "dimensions": [ + { + "id": "month", + "encoding": "xAxis" + } + ], + "measures": [ + { + "id": "value", + "encoding": "yAxis" + } + ], + "annotationArea": { + "range": { + "y": { + "min": 10, + "max": "axisMax" + } + }, + "text": "高危险区域", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + ## column column -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -150,11 +414,128 @@ export default () => { } ``` +## 直方图重点观察区间 + +直方图的横轴也是数值线性轴，range.x 可以精确标注连续区间；未指定 y 时覆盖整个绘图区。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "histogram", + "dataset": [ + { + "value": 1 + }, + { + "value": 1 + }, + { + "value": 2 + }, + { + "value": 3 + }, + { + "value": 4 + }, + { + "value": 5 + }, + { + "value": 7 + }, + { + "value": 8 + }, + { + "value": 9 + }, + { + "value": 10 + } + ], + "measures": [ + { + "id": "value" + } + ], + "annotationArea": { + "range": { + "x": { + "min": 3, + "max": 7 + } + }, + "text": "重点观察区间", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + +## 折线图：高危险区域 + +y 从 10 到 axisMax，x 分类轴铺满。指定数值范围与按 selector 选出高风险月份不同：风险区域始终覆盖所有月份，并随最终轴范围更新。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "line", + "dataset": [ + { + "month": "一月", + "value": 5 + }, + { + "month": "二月", + "value": 15 + }, + { + "month": "三月", + "value": 20 + } + ], + "dimensions": [ + { + "id": "month", + "encoding": "xAxis" + } + ], + "measures": [ + { + "id": "value", + "encoding": "yAxis" + } + ], + "annotationArea": { + "range": { + "y": { + "min": 10, + "max": "axisMax" + } + }, + "text": "高危险区域", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + ## line line -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -224,3 +605,277 @@ export default () => { } ``` +## 散点图：无数据点的目标区域 + +目标矩形内没有数据点也可绘制。axisMax 指当前最终坐标轴上限，此处手动设置为 100%；它不是数据最大值 60%。TypeScript 可从 @visactor/vseed 导入 AxisBoundaryEnum.Min / Max，JSON 使用 axisMin / axisMax。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "scatter", + "dataset": [ + { + "channel": "A", + "cost": 10, + "conversion": 0.1 + }, + { + "channel": "B", + "cost": 60, + "conversion": 0.3 + }, + { + "channel": "C", + "cost": 130, + "conversion": 0.6 + } + ], + "dimensions": [ + { + "id": "channel", + "encoding": "color" + } + ], + "measures": [ + { + "id": "cost", + "encoding": "xAxis" + }, + { + "id": "conversion", + "encoding": "yAxis" + } + ], + "yAxis": { + "min": 0, + "max": 1, + "autoFormat": false, + "numFormat": { + "type": "percent" + } + }, + "annotationArea": { + "range": { + "x": { + "min": 0, + "max": 100 + }, + "y": { + "min": 0.7, + "max": "axisMax" + } + }, + "text": "待达成目标", + "areaColor": "#22c55e", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + +## 散点图：二维目标矩形 + +同时限制成本 0–100 和转化率 20%–40%。即使只有 B 点位于区间内，也绘制完整矩形；区域不随点的顺序或数量收缩。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "scatter", + "dataset": [ + { + "channel": "A", + "cost": 10, + "conversion": 0.1 + }, + { + "channel": "B", + "cost": 60, + "conversion": 0.3 + }, + { + "channel": "C", + "cost": 130, + "conversion": 0.6 + } + ], + "dimensions": [ + { + "id": "channel", + "encoding": "color" + } + ], + "measures": [ + { + "id": "cost", + "encoding": "xAxis" + }, + { + "id": "conversion", + "encoding": "yAxis" + } + ], + "yAxis": { + "autoFormat": false, + "numFormat": { + "type": "percent" + } + }, + "annotationArea": { + "range": { + "x": { + "min": 0, + "max": 100 + }, + "y": { + "min": 0.2, + "max": 0.4 + } + }, + "text": "目标区域", + "areaColor": "#22c55e", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + +## 散点图：成本窗口 + +range.x 使用原始数据坐标 0–100；未指定 y 时纵向铺满绘图区。range 与 selector 互斥，指定轴必须同时填写 min/max；范围不会扩大轴域，部分越界裁剪、完全越界不绘制。支持普通折线、面积、柱、条、箱线、直方图、散点图及适用的分组/百分比变体的数值线性轴（含反向轴）；不支持分类/对数轴范围、双轴图、透视组合图、动态竞赛图。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "scatter", + "dataset": [ + { + "channel": "A", + "cost": 10, + "conversion": 0.1 + }, + { + "channel": "B", + "cost": 60, + "conversion": 0.3 + }, + { + "channel": "C", + "cost": 130, + "conversion": 0.6 + } + ], + "dimensions": [ + { + "id": "channel", + "encoding": "color" + } + ], + "measures": [ + { + "id": "cost", + "encoding": "xAxis" + }, + { + "id": "conversion", + "encoding": "yAxis" + } + ], + "yAxis": { + "autoFormat": false, + "numFormat": { + "type": "percent" + } + }, + "annotationArea": { + "range": { + "x": { + "min": 0, + "max": 100 + } + }, + "text": "成本 0–100", + "areaColor": "#3b82f6", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + +## 散点图：转化率目标带 + +range.y 使用原始数值 0.2–0.4，显示为 20%–40%；未指定 x 时横向铺满绘图区。标签格式化不改变边界，outerPadding 不作用于 range。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "scatter", + "dataset": [ + { + "channel": "A", + "cost": 10, + "conversion": 0.1 + }, + { + "channel": "B", + "cost": 60, + "conversion": 0.3 + }, + { + "channel": "C", + "cost": 130, + "conversion": 0.6 + } + ], + "dimensions": [ + { + "id": "channel", + "encoding": "color" + } + ], + "measures": [ + { + "id": "cost", + "encoding": "xAxis" + }, + { + "id": "conversion", + "encoding": "yAxis" + } + ], + "yAxis": { + "autoFormat": false, + "numFormat": { + "type": "percent" + } + }, + "annotationArea": { + "range": { + "y": { + "min": 0.2, + "max": 0.4 + } + }, + "text": "目标转化率 20%–40%", + "areaColor": "#22c55e", + "areaColorOpacity": 0.12 + } +} + + return +} +``` + diff --git a/apps/website/docs/zh-CN/vseed/examples/features/annotationHorizontalLine.mdx b/apps/website/docs/zh-CN/vseed/examples/features/annotationHorizontalLine.mdx index 88b519529a..15de0b4e60 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/annotationHorizontalLine.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/annotationHorizontalLine.mdx @@ -4,7 +4,7 @@ fixed y value -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -85,7 +85,7 @@ export default () => { selector -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/annotationPoint.mdx b/apps/website/docs/zh-CN/vseed/examples/features/annotationPoint.mdx index 54ee0f5e03..7cdf3bfe99 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/annotationPoint.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/annotationPoint.mdx @@ -4,7 +4,7 @@ condition -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -98,7 +98,7 @@ export default () => { partial datum -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -193,7 +193,7 @@ export default () => { value point -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/annotationVerticalLine.mdx b/apps/website/docs/zh-CN/vseed/examples/features/annotationVerticalLine.mdx index e4832fb807..6c19f72f03 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/annotationVerticalLine.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/annotationVerticalLine.mdx @@ -4,7 +4,7 @@ fixed x value -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -76,7 +76,7 @@ export default () => { selector -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/barStyle.mdx b/apps/website/docs/zh-CN/vseed/examples/features/barStyle.mdx index 9efac7c04f..28d04c69e7 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/barStyle.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/barStyle.mdx @@ -4,7 +4,7 @@ barStyle array -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -92,7 +92,7 @@ export default () => { dimension condition -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -183,7 +183,7 @@ export default () => { partial datum -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -269,7 +269,7 @@ export default () => { value -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/bodyCellStyle.mdx b/apps/website/docs/zh-CN/vseed/examples/features/bodyCellStyle.mdx index f6888d42ca..46d5803b4d 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/bodyCellStyle.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/bodyCellStyle.mdx @@ -4,7 +4,7 @@ 透视表条件样式 - 色阶 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -92,7 +92,7 @@ export default () => { 表格条件样式 - 色阶 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -180,7 +180,7 @@ export default () => { 表格总计下，进度条展示范围 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -337,7 +337,7 @@ export default () => { 表格条件样式 - 全局样式 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -404,7 +404,7 @@ export default () => { 表格条件样式 - 多个条件 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -490,7 +490,7 @@ export default () => { 表格条件样式 - 根据度量值设置 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -564,7 +564,7 @@ export default () => { 表格条件样式 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -643,7 +643,7 @@ export default () => { 透视表条件样式 - 全局样式 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -710,7 +710,7 @@ export default () => { 透视表条件样式 - 根据度量值设置 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -806,7 +806,7 @@ export default () => { 透视表条件样式 - 符合条件 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/brush.mdx b/apps/website/docs/zh-CN/vseed/examples/features/brush.mdx index 72ff121715..256a320368 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/brush.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/brush.mdx @@ -4,7 +4,7 @@ enable -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -29,7 +29,7 @@ export default () => { removeOnClick -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/color.mdx b/apps/website/docs/zh-CN/vseed/examples/features/color.mdx index 1a9df20ad9..5c0be544bc 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/color.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/color.mdx @@ -4,7 +4,7 @@ colorMapping -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -109,7 +109,7 @@ export default () => { colorScheme -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/dataset.mdx b/apps/website/docs/zh-CN/vseed/examples/features/dataset.mdx index bd961e5494..201c0b0fe7 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/dataset.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/dataset.mdx @@ -4,7 +4,7 @@ 单指标 单维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -42,7 +42,7 @@ export default () => { 单指标 多维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -120,7 +120,7 @@ export default () => { 单指标 零维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -141,7 +141,7 @@ export default () => { 多指标 单维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -189,7 +189,7 @@ export default () => { 多指标 多维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -287,7 +287,7 @@ export default () => { 多指标 零维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -310,7 +310,7 @@ export default () => { 数据维度与指标配置 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -408,7 +408,7 @@ export default () => { 自动选择 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/dimensions.mdx b/apps/website/docs/zh-CN/vseed/examples/features/dimensions.mdx index c562410725..d2214400f3 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/dimensions.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/dimensions.mdx @@ -4,7 +4,7 @@ 列维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -164,7 +164,7 @@ export default () => { 普通维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -322,7 +322,7 @@ export default () => { 行维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -482,7 +482,7 @@ export default () => { 透视维度 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/i18n.mdx b/apps/website/docs/zh-CN/vseed/examples/features/i18n.mdx index 49cd426557..4f03e6a7f1 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/i18n.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/i18n.mdx @@ -4,7 +4,7 @@ en-US -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -89,7 +89,7 @@ export default () => { zh-CN -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/label.mdx b/apps/website/docs/zh-CN/vseed/examples/features/label.mdx index aa8e011215..5e6b7ab4fd 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/label.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/label.mdx @@ -4,7 +4,7 @@ enable -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/legend.mdx b/apps/website/docs/zh-CN/vseed/examples/features/legend.mdx index e4267269f6..e71e2406c6 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/legend.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/legend.mdx @@ -4,7 +4,7 @@ border -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -108,7 +108,7 @@ export default () => { enable -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -154,7 +154,7 @@ export default () => { labelColor -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -204,7 +204,7 @@ export default () => { labelFontSize -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -254,7 +254,7 @@ export default () => { labelFontWeight -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -304,7 +304,7 @@ export default () => { maxSize -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -407,7 +407,7 @@ export default () => { position -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/measures.mdx b/apps/website/docs/zh-CN/vseed/examples/features/measures.mdx index ad341dfc6b..a8a45db907 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/measures.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/measures.mdx @@ -4,7 +4,7 @@ 指标组 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/numFormat.mdx b/apps/website/docs/zh-CN/vseed/examples/features/numFormat.mdx index ae615dbe23..32ac467d20 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/numFormat.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/numFormat.mdx @@ -4,7 +4,7 @@ autoFormat -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -36,7 +36,7 @@ export default () => { fractionDigits -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -139,7 +139,7 @@ export default () => { ratio & symbol -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -255,7 +255,7 @@ export default () => { roundingMode -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -367,7 +367,7 @@ export default () => { roundingPriority -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -489,7 +489,7 @@ export default () => { significantDigits -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -591,7 +591,7 @@ export default () => { suffix & prefix -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -703,7 +703,7 @@ export default () => { thousandSeparator -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -749,7 +749,7 @@ export default () => { type -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/pointStyle.mdx b/apps/website/docs/zh-CN/vseed/examples/features/pointStyle.mdx index 76f8598da1..d28509cfa4 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/pointStyle.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/pointStyle.mdx @@ -4,7 +4,7 @@ dimension condition -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -90,7 +90,7 @@ export default () => { measure condition -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -174,7 +174,7 @@ export default () => { partial datum -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -255,7 +255,7 @@ export default () => { point array -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -339,7 +339,7 @@ export default () => { value -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/polynomial.mdx b/apps/website/docs/zh-CN/vseed/examples/features/polynomial.mdx index a256773134..2416560012 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/polynomial.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/polynomial.mdx @@ -4,7 +4,7 @@ column 示例 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -73,7 +73,7 @@ export default () => { scatter 示例 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/sort.mdx b/apps/website/docs/zh-CN/vseed/examples/features/sort.mdx index d9313a1265..b1898c0774 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/sort.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/sort.mdx @@ -4,7 +4,7 @@ 图例自身排序 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -75,7 +75,7 @@ export default () => { 指标排序 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -149,7 +149,7 @@ export default () => { 指标排序 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -223,7 +223,7 @@ export default () => { 维度排序 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -295,7 +295,7 @@ export default () => { 维度排序 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -367,7 +367,7 @@ export default () => { 自定义排序 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -444,7 +444,7 @@ export default () => { 自定义排序(图例Id) -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -519,7 +519,7 @@ export default () => { 自定义排序(图例名称) -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/examples/features/totals.mdx b/apps/website/docs/zh-CN/vseed/examples/features/totals.mdx index 7ff1670a98..5dfd50db27 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/totals.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/totals.mdx @@ -4,7 +4,7 @@ 测试多指标下，总计小计功能 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -239,7 +239,7 @@ export default () => { 测试多指标下，总计小计功能 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { @@ -343,7 +343,7 @@ export default () => { 测试基础单指标下的总计/小计功能 -```tsx preview +```tsx preview import { VSeedRender } from '@components' export default () => { diff --git a/apps/website/docs/zh-CN/vseed/option/area.md b/apps/website/docs/zh-CN/vseed/option/area.md index 4153da3dee..e2b9c95ca7 100644 --- a/apps/website/docs/zh-CN/vseed/option/area.md +++ b/apps/website/docs/zh-CN/vseed/option/area.md @@ -5498,7 +5498,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5844,7 +5844,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5853,6 +5853,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## annotationDifferenceLine diff --git a/apps/website/docs/zh-CN/vseed/option/areaPercent.md b/apps/website/docs/zh-CN/vseed/option/areaPercent.md index f1faca9019..ac932806e8 100644 --- a/apps/website/docs/zh-CN/vseed/option/areaPercent.md +++ b/apps/website/docs/zh-CN/vseed/option/areaPercent.md @@ -5507,7 +5507,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5853,7 +5853,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5862,6 +5862,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## dimensionLinkage diff --git a/apps/website/docs/zh-CN/vseed/option/bar.md b/apps/website/docs/zh-CN/vseed/option/bar.md index 076b6706e0..bfd6f2060f 100644 --- a/apps/website/docs/zh-CN/vseed/option/bar.md +++ b/apps/website/docs/zh-CN/vseed/option/bar.md @@ -4712,7 +4712,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5058,7 +5058,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5067,6 +5067,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## annotationDifferenceLine diff --git a/apps/website/docs/zh-CN/vseed/option/barParallel.md b/apps/website/docs/zh-CN/vseed/option/barParallel.md index 8f14bc68a4..a44c2dc44a 100644 --- a/apps/website/docs/zh-CN/vseed/option/barParallel.md +++ b/apps/website/docs/zh-CN/vseed/option/barParallel.md @@ -4714,7 +4714,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5060,7 +5060,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5069,6 +5069,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## annotationDifferenceLine diff --git a/apps/website/docs/zh-CN/vseed/option/barPercent.md b/apps/website/docs/zh-CN/vseed/option/barPercent.md index 620988a109..85b62f75ec 100644 --- a/apps/website/docs/zh-CN/vseed/option/barPercent.md +++ b/apps/website/docs/zh-CN/vseed/option/barPercent.md @@ -4728,7 +4728,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5074,7 +5074,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5083,6 +5083,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## dimensionLinkage diff --git a/apps/website/docs/zh-CN/vseed/option/boxPlot.md b/apps/website/docs/zh-CN/vseed/option/boxPlot.md index a917f2de31..993bb93745 100644 --- a/apps/website/docs/zh-CN/vseed/option/boxPlot.md +++ b/apps/website/docs/zh-CN/vseed/option/boxPlot.md @@ -4396,7 +4396,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -4742,7 +4742,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -4751,6 +4751,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## dimensionLinkage diff --git a/apps/website/docs/zh-CN/vseed/option/column.md b/apps/website/docs/zh-CN/vseed/option/column.md index ea9542f3bb..975d2162dd 100644 --- a/apps/website/docs/zh-CN/vseed/option/column.md +++ b/apps/website/docs/zh-CN/vseed/option/column.md @@ -4700,7 +4700,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5046,7 +5046,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5055,6 +5055,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## annotationDifferenceLine diff --git a/apps/website/docs/zh-CN/vseed/option/columnParallel.md b/apps/website/docs/zh-CN/vseed/option/columnParallel.md index 9c84147e66..162e1b52bc 100644 --- a/apps/website/docs/zh-CN/vseed/option/columnParallel.md +++ b/apps/website/docs/zh-CN/vseed/option/columnParallel.md @@ -4718,7 +4718,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5064,7 +5064,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5073,6 +5073,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## annotationDifferenceLine diff --git a/apps/website/docs/zh-CN/vseed/option/columnPercent.md b/apps/website/docs/zh-CN/vseed/option/columnPercent.md index a2438cfa4d..2d816c3f0c 100644 --- a/apps/website/docs/zh-CN/vseed/option/columnPercent.md +++ b/apps/website/docs/zh-CN/vseed/option/columnPercent.md @@ -4716,7 +4716,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5062,7 +5062,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5071,6 +5071,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## dimensionLinkage diff --git a/apps/website/docs/zh-CN/vseed/option/dualAxis.md b/apps/website/docs/zh-CN/vseed/option/dualAxis.md index 5fd451db1b..6ea806f753 100644 --- a/apps/website/docs/zh-CN/vseed/option/dualAxis.md +++ b/apps/website/docs/zh-CN/vseed/option/dualAxis.md @@ -6132,7 +6132,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -6478,7 +6478,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -6487,6 +6487,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## dimensionLinkage diff --git a/apps/website/docs/zh-CN/vseed/option/histogram.md b/apps/website/docs/zh-CN/vseed/option/histogram.md index e980222db5..b6fe7ee6d4 100644 --- a/apps/website/docs/zh-CN/vseed/option/histogram.md +++ b/apps/website/docs/zh-CN/vseed/option/histogram.md @@ -4386,7 +4386,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -4732,7 +4732,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -4741,6 +4741,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## kdeRegressionLine diff --git a/apps/website/docs/zh-CN/vseed/option/line.md b/apps/website/docs/zh-CN/vseed/option/line.md index 3546afe02b..a205bd70f1 100644 --- a/apps/website/docs/zh-CN/vseed/option/line.md +++ b/apps/website/docs/zh-CN/vseed/option/line.md @@ -5121,7 +5121,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5467,7 +5467,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5476,6 +5476,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## annotationDifferenceLine diff --git a/apps/website/docs/zh-CN/vseed/option/raceBar.md b/apps/website/docs/zh-CN/vseed/option/raceBar.md index 9f533a8791..57bfb68678 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceBar.md +++ b/apps/website/docs/zh-CN/vseed/option/raceBar.md @@ -4456,7 +4456,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -4802,7 +4802,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -4811,6 +4811,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## dimensionLinkage diff --git a/apps/website/docs/zh-CN/vseed/option/raceColumn.md b/apps/website/docs/zh-CN/vseed/option/raceColumn.md index 8b0e7e000e..4a3174a47f 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceColumn.md +++ b/apps/website/docs/zh-CN/vseed/option/raceColumn.md @@ -4503,7 +4503,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -4849,7 +4849,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -4858,6 +4858,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## dimensionLinkage diff --git a/apps/website/docs/zh-CN/vseed/option/raceLine.md b/apps/website/docs/zh-CN/vseed/option/raceLine.md index 16a17595f9..167a9de79b 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceLine.md +++ b/apps/website/docs/zh-CN/vseed/option/raceLine.md @@ -4840,7 +4840,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5186,7 +5186,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5195,6 +5195,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## dimensionLinkage diff --git a/apps/website/docs/zh-CN/vseed/option/raceScatter.md b/apps/website/docs/zh-CN/vseed/option/raceScatter.md index 3efebdaf2c..959a66f28e 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceScatter.md +++ b/apps/website/docs/zh-CN/vseed/option/raceScatter.md @@ -4577,7 +4577,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -4923,7 +4923,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -4932,6 +4932,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## locale diff --git a/apps/website/docs/zh-CN/vseed/option/scatter.md b/apps/website/docs/zh-CN/vseed/option/scatter.md index 155bdf0edb..ab0a65c1ad 100644 --- a/apps/website/docs/zh-CN/vseed/option/scatter.md +++ b/apps/website/docs/zh-CN/vseed/option/scatter.md @@ -4757,7 +4757,7 @@ true **Type:** `AreaSelector | AreaSelectors | undefined` :::note{title=描述} -依赖选择的数据, 进行数据标记. +selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 ::: @@ -5103,7 +5103,7 @@ true **Type:** `number | undefined` :::note{title=描述} -标注区域区域的边距 +selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 ::: @@ -5112,6 +5112,78 @@ true +### range + +**Type:** `AnnotationAreaRange | undefined` + +:::note{title=描述} +selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + +仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + + + +按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + +::: + + +#### x + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + +#### y + +**Type:** `AnnotationAxisRange | undefined` + +:::note{title=描述} +数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + +::: + + +##### min + +**Type:** `number | "axisMin"` + +:::note{title=描述} +数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + +::: + +##### max + +**Type:** `number | "axisMax"` + +:::note{title=描述} +数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + +::: + ## linearRegressionLine diff --git a/docs/adr/packages/vseed/2026-09-23-annotation-area-range/plan.md b/docs/adr/packages/vseed/2026-09-23-annotation-area-range/plan.md new file mode 100644 index 0000000000..5d14c46ef7 --- /dev/null +++ b/docs/adr/packages/vseed/2026-09-23-annotation-area-range/plan.md @@ -0,0 +1,132 @@ +# Annotation area coordinate ranges + +## Agreed contract + +- Keep selector-based category bands and add a mutually exclusive `range` mode. +- `range` requires x, y, or both; each specified axis requires explicit min and max. +- Export `AxisBoundaryEnum = { Min: 'axisMin', Max: 'axisMax' }` as a const object. +- Numeric boundaries use raw data coordinates. Sentinels use the final visible axis domain, including nice limits and inverse axes. +- Omitted axes span the plot. Clip to the visible domain; omit rectangles with no intersection. Numeric min >= max is invalid. +- Support ordinary linear numeric axes in line/area/column/bar/boxPlot/histogram/scatter, including applicable percentage and grouped variants. Diagnose category/log ranges, dual-axis, pivot/combination, race and other unsupported charts. BoxPlot supports its numeric y axis; its category x axis remains unsupported. Histogram supports both numeric axes. +- Share existing label/fill/border handling. Pixel outerPadding only applies to selectors. +- Preserve selector geometry: line/area category centers plus padding; column/bar band extents plus padding. +- No Story runtime/dependency update or release in this task. Starting VSeed version is 0.6.0; Story remains pinned to 0.5.5. + +## Execution + +- [x] Inspect public types, schemas, pipelines, VChart marker APIs and existing examples. +- [x] Install the frozen workspace dependencies using pnpm 10.26.1. +- [x] Record fresh unit coverage before changing source. +- [x] Add behavior tests for validation, exact bounds, clipping, sentinels, reverse axes, empty selections, resize and update/removal. +- [x] Implement public types/schema/exports, build diagnostics and shared range geometry. +- [x] Add runnable examples and regenerate owning documentation and tests. +- [x] Run relevant formatting, lint, type checks, package tests and final coverage. +- [x] Verify affected examples and interactions in the website browser. + +## Baseline + +Revision: d73947efc1b5364175126022aa413f1151cc8740. + +`pnpm --filter @visactor/vseed run test:unit:coverage`: 42 files, 339 tests passed. +Statements/lines: 73.01%; branches: 70.57%; functions: 72.08%. +Baseline log: `/tmp/vseed-annotation-area-baseline.log`. + +## Verification results + +### Implementation and generated outputs + +- Added shared coordinate geometry to both existing area-marker pipelines, preserving selector geometry and shared styles. +- Added strict public ranges, exported boundary constants, schema validation and descriptive unsupported-axis/chart diagnostics. +- Added seven range examples and a grouped-area selector regression example; regenerated the feature tests, example page and all affected option references with the package `g` script. +- Fixed the documentation generator to ignore the forbidden `never` branches of mutually exclusive properties, rather than overwrite the real selector documentation. The regression test exercises the generator without rewriting documentation. +- Tests exercise actual VChart rendering, resize, inverse axes, adding/removing annotations and clearing fully outside geometry, in addition to geometry and schema unit tests. + +### Browser acceptance + +Started the root `dev` script using pnpm 10.26.1 and checked: + +- `http://localhost:3000/VBI/`: home page rendered. +- `http://localhost:3000/VBI/vseed/examples/features/annotationArea.html`: all seven range examples rendered; x-only and y-only regions span the omitted axis, the 0–100 × 20%–40% rectangle has exact boundaries, and the 70%–100% target is visible despite containing no data points. +- The line/column 10-to-axisMax horizontal risk bands and the bar 10-to-axisMax vertical band match their numeric axes. +- Existing area-selector category-center padding and bar-selector full-band padding remain visible and unchanged. +- Navigated through the page's table of contents. Browser console contained no warnings or errors on the checked page. Resize and live marker add/remove are separately covered by actual VChart render tests, not claimed as browser interactions. + +Direct navigation initially returned `ERR_BLOCKED_BY_CLIENT`; after documentation generation completed, normal website navigation loaded the page and permitted the visual checks above. This did not require a second browser or an external browser-control mechanism. + +### Existing tooling limitations + +- Package-wide `lint` reports the pre-existing unused `updatePackageReadme` function in `scripts/build-coverage-badge.mjs:65`, confirmed against the base revision. This unrelated script was not changed. Lint passes for the files changed by this task. +- The existing `tsconfig.test.json` replaces rather than merges the source path aliases, so running it across all old tests produces unresolved `src/*` imports. New tests were type-checked with the package source compiler options plus both source/public aliases; package source type-check and declaration build pass. +- The example generator already emits a trailing space after preview code fences. Full `git diff --check` reports those generated lines; source/script/test/config diffs pass. Generated examples were not hand-edited to diverge from their owner. +- Direct Node ESM loading reaches a pre-existing extensionless import in `@visactor/vdataset`. CJS loading successfully exposes `AxisBoundaryEnum`; the website bundler and ESM declaration build pass. No dependency or packaging changes were made for this unrelated issue. + +### Final package verification + +- VSeed full suite: **72 files, 1,197 tests passed**. Log: `/tmp/vseed-annotation-area-full-tests.log`. +- VSeed unit suite: **45 files, 392 tests passed**. Log: `/tmp/vseed-annotation-area-unit-final.log`. +- Website full suite: **1 file, 3 tests passed** with fresh coverage in its configured `components/demoConnector` scope: statements 96%, branches 75%, functions 85.71%, lines 95.65%. This coverage is not a claim of whole-website or visual coverage. Log: `/tmp/vseed-annotation-area-website-tests.log`. The website has no `g` script; its changed docs are owned and generated by VSeed. +- Generation: all four package generators passed. Log: `/tmp/vseed-annotation-area-generate-final.log`. +- Package ESM/CJS/UMD builds and declaration generation passed. Log: `/tmp/vseed-annotation-area-build.log`. +- Changed-file lint and formatting passed. Source/script/test/config whitespace checks passed. +- Source type-check and the focused source + new-test type-check passed. Focused log: `/tmp/vseed-annotation-area-focused-typecheck.log`. +- Raised unit/full coverage floors while retaining the existing tolerance for variable V8 branch counts. + +| Metric | Unit baseline | Final unit | Final full suite | +| ---------- | ------------: | ---------: | ---------------: | +| Statements | 73.01% | 75.58% | 89.66% | +| Lines | 73.01% | 75.58% | 89.66% | +| Branches | 70.57% | 71.28% | 78.96% | +| Functions | 72.08% | 74.06% | 81.15% | + +Fresh HTML reports: `packages/vseed/coverage/index.html` and `packages/vseed/coverage/unit/index.html`. +Website report: `apps/website/coverage/index.html`. + +The task-created website process was stopped after acceptance; its temporary browser tab was closed. No commit, push, release, Story runtime change or unrelated process termination was performed. + +## Workspace migration + +At the user's request, development now continues directly in `/Users/bytedance/Desktop/WorkSpace/VSeed` on `feat/vseed-region-annotation`, not in a linked worktree. + +- The 44 implementation files were restored with identical SHA-256 hashes and file modes; the branch base remains `d73947efc1b5364175126022aa413f1151cc8740`. +- The original `feat/theme` branch and all other local branch refs were preserved without rewriting any commits. +- The original `.vscode/launch.json` was restored byte-for-byte. The new base ignores `.vscode/*`, so it remains local configuration and does not appear in Git's changes list. +- Recovery stashes were retained: implementation `5180a20f9471262636c71bd1ea04cbd304190934`; original launch configuration `a60e8cfaab1186c8db36193262e57ccf9e894fed`. +- The old worktree registration was removed. Its clean directory, dependencies, build products and previous coverage reports were moved to `/Users/bytedance/.Trash/vseed-region-annotation-migration.GIWyAG/workspace`, without permanent deletion. Its old `.git` pointer is no longer an active worktree registration. +- The preceding verification results describe the unchanged implementation before migration. Dependency synchronization and focused migration checks are recorded below; this move does not introduce new feature behavior or regenerate documentation. + +## BoxPlot follow-up + +- Extend `range.y` to ordinary box plots using their existing linear y axis and area-marker pipeline; retain category-axis and pivot rejection. +- Remove the trailing space in the example generator's preview fence, then regenerate affected documentation rather than editing generated MDX by hand. +- Added a rendered box-plot band test, category-axis rejection test, an invalid-domain regression test, and a runnable box-plot example. The category axis is filled while the numeric y boundaries follow the final VChart axis mapping. +- Ran VSeed `g` after source changes. The generator fix removed trailing whitespace from preview fences across 53 generated example pages (189 fences); `git diff --check` now passes. +- Final VSeed suite and full-suite coverage: 72 files, 1,203 tests passed; statements/lines 89.69%, branches 78.97%, functions 81.23%. Log: `/tmp/vseed-boxplot-range-full-coverage-final3.log`; report: `packages/vseed/coverage/index.html`. +- Fresh unit-only baseline before this follow-up: statements/lines 75.58%, branches 71.30%, functions 74.06%. Final unit coverage: 45 files, 397 tests passed; statements/lines 76.98%, branches 71.31%, functions 75.04%. Log: `/tmp/vseed-boxplot-range-unit-coverage-final3.log`; report: `packages/vseed/coverage/unit/index.html`. Raised the stable unit/full coverage floors without reducing branch floors. +- VSeed package build, VSeed and website source type-checks, changed-code lint/format checks, website full test-with-coverage (3 tests), and whitespace check passed. The website coverage remains scoped to its existing demo-connector tests; it does not measure the generated docs visually. +- Browser acceptance on the existing website dev server at `http://[::1]:3000/VBI/`: home page and `vseed/examples/features/annotationArea.html#箱线图高危险区间` rendered. The box-plot risk band crossed both categories at the numeric threshold; the generated support text included box plots. Two Rspress hot-reload WebSocket failures appeared in the console with direct-connection fallback, but no chart-rendering failure was observed. The user's existing dev server was left running. +- Website production build was not run: `apps/website/AGENTS.md` prohibits simultaneous Rspress dev/build processes, and the user's dev server was already active. No user process was stopped. + +Migration checks completed in the primary workspace: + +- `pnpm@10.26.1 install --frozen-lockfile` passed without changing either the package manifest or lockfile. Log: `/tmp/vseed-workspace-migration-install.log`. +- All 53 annotation geometry/rendering/documentation regression tests passed. Log: `/tmp/vseed-workspace-migration-tests.log`. +- VSeed source type-check passed. Log: `/tmp/vseed-workspace-migration-typecheck.log`. +- Git lists only the primary workspace, on the requested feature branch. No changes are staged, committed or pushed. +- Functional files were moved without edits. Full generation, coverage and browser validation were not repeated for a location-only migration; the original results remain above, with archived reports at the recovery location. + +## Histogram and generated-type follow-up + +- Add ordinary histogram to the supported range chart types. Both axes are linear numeric axes; pivot histogram remains rejected by the existing facet guard. +- Add a runnable x-only histogram example and tests for both-axis geometry, percentage thresholds, grouped colors, pivot and logarithmic-axis rejection, custom marker styling, and actual VChart rendering. +- Fix the option-document generator's flattened union display: shared fields that are optional in one branch now show `| undefined`. This applies to both `selector`/`range` and `range.x`/`range.y`, while the type description continues to state the required either/or constraint. +- Regenerate VSeed tests, examples, and option docs from their owning inputs. The existing website process had a stale configuration-page index after regeneration; restart the single confirmed Rspress process on the same port and keep it available to the user. +- VSeed full coverage suite passed: 72 files, 1,211 tests; statements/lines 89.74%, branches 79.01%, functions 81.48%. Final unit coverage: statements/lines 78.81%, branches 71.31%, functions 76.32%, compared with the pre-follow-up unit baseline of 76.98%, 71.31%, and 75.04% respectively. Reports: `packages/vseed/coverage/index.html` and `packages/vseed/coverage/unit/index.html`. +- VSeed package build and source type-check, website source type-check and focused website tests, changed-code lint/format, and `git diff --check` passed. The generated histogram example rendered the x-only pale-red band over the bars in the website browser. The histogram and scatter option pages showed `selector`/`range` and `range.x`/`range.y` as optional, alongside the exact-one rule. Only Rspress hot-reload WebSocket fallback messages were observed; no chart-rendering errors appeared. The user's website dev server remains running. Website production build was not run while that dev server is active. + +## Builder validation follow-up + +- The prior review found that the public schema rejected an empty `annotationArea` while `Builder.build()` silently accepted it and could produce infinite selector-band coordinates. Require a non-null selector when no range is present, keeping the existing selector parsing behavior otherwise. +- Add Builder-level regression cases for empty objects, undefined/null selectors, and an empty member inside an annotation array; retain the existing valid selector and range tests. +- The four new regression cases failed before the Builder fix and passed afterward. VSeed `g`, the full coverage suite, VSeed/website source type-checks, website tests with coverage, and changed-file lint/format checks passed. Unit coverage versus the fresh pre-edit baseline: statements/lines 78.81% to 78.81%, branches 71.31% to 71.38%, functions 76.32% to 76.32%. Full coverage: statements/lines 89.74%, branches 79.03%, functions 81.48%. Reports: `packages/vseed/coverage/index.html` and `packages/vseed/coverage/unit/index.html`. Keep the already-raised branch floors at 78.9% full and 71.2% unit rather than tuning them to small V8 coverage fluctuations. +- Browser acceptance at `http://[::1]:3000/VBI/` confirmed the home page, the rendered histogram range band on the annotationArea example page, and the histogram option page's exact-one description and optional union fields. Regeneration temporarily left the old Rspress route index stale; the single confirmed workspace dev process was restarted on the original port, then the option page loaded. Console errors were limited to Rspress WebSocket fallback messages. Keep the replacement dev server running for the user. +- For the public package-contract change, the single confirmed website dev process was stopped, `pnpm --filter website run build` passed, and the dev server was restarted on its original port. The website type-check also passed when rerun after the VSeed build; its initial concurrent run failed only while the package build was cleaning `dist`. diff --git a/packages/vseed/scripts/build-docs.mjs b/packages/vseed/scripts/build-docs.mjs index 3a67a61148..b7a3990151 100644 --- a/packages/vseed/scripts/build-docs.mjs +++ b/packages/vseed/scripts/build-docs.mjs @@ -19,7 +19,7 @@ const CONFIG = { * Documentation Generator Class * Handles the generation of markdown documentation from TypeScript interfaces. */ -class DocsGenerator { +export class DocsGenerator { constructor(config) { this.config = config this.project = new Project({ @@ -140,7 +140,7 @@ class DocsGenerator { /** * Generate markdown for a node (Interface or Property) */ - generateMarkdown(node, level = 1, visited = new Set()) { + generateMarkdown(node, level = 1, visited = new Set(), optionalInSomeBranch = false) { const isInterface = node.getKind() === SyntaxKind.InterfaceDeclaration const isProperty = node.getKind() === SyntaxKind.PropertySignature || node.getKind() === SyntaxKind.PropertyDeclaration @@ -173,7 +173,8 @@ class DocsGenerator { let markdown = `${'#'.repeat(level)} ${name}\n\n` if (isProperty) { - markdown += `**Type:** \`${this.formatType(node)}\`\n\n` + const type = this.formatType(node) + markdown += `**Type:** \`${optionalInSomeBranch && !/\bundefined\b/.test(type) ? `${type} | undefined` : type}\`\n\n` } // Add documentation tags (description, example, etc.) @@ -276,13 +277,13 @@ class DocsGenerator { ] tagMappings.forEach(({ key, title, type }) => { - const content = (tags[key] || []).join('\n\n').replace(/\n/g, '\n\n').replace(/\-/g, '\\-') + const content = (tags[key] || []).join('\n\n').replace(/\n/g, '\n\n').replace(/-/g, '\\-') if (content) { markdown += `:::${type}{title=${title}}\n${content}\n\n:::\n\n` } }) - const example = (tags.example || []).join('\n\n').replace(/\n/g, '\n').replace(/\-/g, '\\-') + const example = (tags.example || []).join('\n\n').replace(/\n/g, '\n').replace(/-/g, '\\-') if (example) { markdown += `**示例**\n${example}\n\n\n\n` } @@ -306,13 +307,24 @@ class DocsGenerator { .filter( (d) => d && (d.getKind() === SyntaxKind.PropertySignature || d.getKind() === SyntaxKind.PropertyDeclaration), ) + // An optional never marks a mutually exclusive branch, not a documented value. + .filter((d) => !d.getType().getNonNullableType().isNever()) // Deduplicate properties by name const uniqueDeclarations = [...new Map(propertyDeclarations.map((item) => [item.getName(), item])).values()] if (uniqueDeclarations.length === 0) return '' - return uniqueDeclarations.map((subProp) => this.generateMarkdown(subProp, level + 1, new Set(visited))).join('') + return uniqueDeclarations + .map((subProp) => { + const name = subProp.getName() + // Shared fields can be optional in one union branch even if the chosen declaration is required. + const branchProperties = typesToProcess.map((type) => type.getProperty(name)) + const optionalInSomeBranch = + branchProperties.every(Boolean) && branchProperties.some((property) => property.isOptional()) + return this.generateMarkdown(subProp, level + 1, new Set(visited), optionalInSomeBranch) + }) + .join('') } /** @@ -397,9 +409,10 @@ class DocsGenerator { // Entry Point // ================================================================================== -const generator = new DocsGenerator(CONFIG) - -generator.run().catch((err) => { - console.error('Failed to generate documentation:', err) - process.exit(1) -}) +if (process.argv[1] && path.resolve(process.argv[1]) === __filename) { + const generator = new DocsGenerator(CONFIG) + generator.run().catch((err) => { + console.error('Failed to generate documentation:', err) + process.exit(1) + }) +} diff --git a/packages/vseed/scripts/build-examples.mjs b/packages/vseed/scripts/build-examples.mjs index 2105b6404b..23cf488948 100644 --- a/packages/vseed/scripts/build-examples.mjs +++ b/packages/vseed/scripts/build-examples.mjs @@ -117,7 +117,7 @@ function generateDocs() { md += `${json.description}\n\n` } - md += '```tsx preview \n' + md += '```tsx preview\n' md += "import { VSeedRender } from '@components'\n\n" md += `export default () => {\n` const vseedString = JSON.stringify(json.vseed, null, 2) diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts index 8ba8829ea4..b25e036825 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts @@ -1,5 +1,22 @@ import { pick } from 'remeda' import type { AdvancedPipe, AdvancedVSeed } from 'src/types' +import { zAnnotationAreaRange } from 'src/types' +import { isPivotChart } from 'src/pipeline/utils/chatType' + +const rangeChartTypes = new Set([ + 'line', + 'area', + 'areaPercent', + 'column', + 'columnParallel', + 'columnPercent', + 'bar', + 'barParallel', + 'barPercent', + 'boxPlot', + 'histogram', + 'scatter', +]) export const annotation: AdvancedPipe = (advancedVSeed, context) => { const { vseed } = context @@ -11,5 +28,31 @@ export const annotation: AdvancedPipe = (advancedVSeed, context) => { 'annotationDifferenceLine', ]) as AdvancedVSeed['annotation'] + const areas = annotation.annotationArea + const areaList = Array.isArray(areas) ? areas : areas ? [areas] : [] + areaList.forEach((area, index) => { + const path = `annotationArea[${index}]` + if (area.range === undefined) { + if (area.selector === undefined || area.selector === null) { + throw new Error(`${path}: selector or range is required`) + } + return + } + if (area.selector !== undefined) { + throw new Error(`${path}: selector and range are mutually exclusive`) + } + const validation = zAnnotationAreaRange.safeParse(area.range) + if (!validation.success) { + const issues = validation.error.issues.map((issue) => `${issue.path.join('.')}: ${issue.message}`).join('; ') + throw new Error(`${path}.range: ${issues}`) + } + if (!rangeChartTypes.has(vseed.chartType)) { + throw new Error(`${path}.range does not support chartType ${vseed.chartType}`) + } + if (isPivotChart(vseed)) { + throw new Error(`${path}.range does not support pivot or combination charts`) + } + }) + return { ...advancedVSeed, annotation } } diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationArea.ts b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationArea.ts index 1630d7bb8e..4214097624 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationArea.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationArea.ts @@ -7,6 +7,7 @@ import type { Datum, VChartSpecPipe, VSeed } from 'src/types' import { ANNOTATION_AREA_TEXT_STYLE_BY_POSITION, isSubset } from './utils' import { ANNOTATION_Z_INDEX } from '../../../../utils/constant' import { isBarLikeChart } from 'src/pipeline/utils/chatType' +import { annotationAreaRangePositions, assertAnnotationAreaRangeAxes } from './annotationAreaRange' export const annotationArea: VChartSpecPipe = (spec, context) => { const { advancedVSeed, vseed } = context @@ -35,6 +36,7 @@ export const annotationArea: VChartSpecPipe = (spec, context) => { const markArea = annotationAreaList.flatMap((annotationArea) => { const { selector: selectorPoint, + range, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, @@ -57,6 +59,7 @@ export const annotationArea: VChartSpecPipe = (spec, context) => { outerPadding = theme?.outerPadding ?? 4, } = annotationArea const textBackgroundOpacity = theme?.textBackgroundOpacity + if (range) assertAnnotationAreaRangeAxes(range, spec as ILineChartSpec) const dataset = advancedVSeed.dataset.flat() const selectedData = selectorPoint ? dataset.filter((datum) => selector(datum, selectorPoint)) : [] @@ -73,7 +76,9 @@ export const annotationArea: VChartSpecPipe = (spec, context) => { return { zIndex: ANNOTATION_Z_INDEX, regionRelative: true, + ...(range ? { clip: true } : {}), positions: (data: Datum[], context: ICartesianSeries) => { + if (range) return annotationAreaRangePositions(range, context) const positionData = data.filter((item) => selectedData.some((datum) => isSubset(datum, item))) const xyList = positionData.map((datum) => context.dataToPosition(datum) as { x: number; y: number }) diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts index caf2f7c8a8..2682f8856b 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts @@ -4,6 +4,7 @@ import type { Datum, VChartSpecPipe, VSeed } from 'src/types' import { ANNOTATION_AREA_TEXT_STYLE_BY_POSITION, isSubset } from './utils' import { ANNOTATION_Z_INDEX } from '../../../../utils/constant' import { isBarLikeChart } from 'src/pipeline/utils/chatType' +import { annotationAreaRangePositions, assertAnnotationAreaRangeAxes } from './annotationAreaRange' export const annotationAreaBand: VChartSpecPipe = (spec, context) => { const { advancedVSeed, vseed } = context @@ -31,6 +32,7 @@ export const annotationAreaBand: VChartSpecPipe = (spec, context) => { const markArea = annotationAreaList.flatMap((annotationArea) => { const { selector: selectorPoint, + range, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, @@ -53,6 +55,7 @@ export const annotationAreaBand: VChartSpecPipe = (spec, context) => { outerPadding = theme?.outerPadding ?? 4, } = annotationArea const textBackgroundOpacity = theme?.textBackgroundOpacity + if (range) assertAnnotationAreaRangeAxes(range, spec as ILineChartSpec) const textPosition: string = annotationArea.textPosition ?? defaultTextPosition const textAlign = annotationArea.textAlign ?? @@ -69,8 +72,10 @@ export const annotationAreaBand: VChartSpecPipe = (spec, context) => { return { zIndex: ANNOTATION_Z_INDEX, regionRelative: true, + ...(range ? { clip: true } : {}), // coordinates: selectedData, positions: (data: Datum[], context: ICartesianSeries & { _scaleConfig?: { bandPosition?: number } }) => { + if (range) return annotationAreaRangePositions(range, context) const positionData = data.filter((item) => selectedData.some((datum) => isSubset(datum, item))) const xyList = positionData.map((datum) => context.dataToPosition(datum) as { x: number; y: number }) diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaRange.ts b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaRange.ts new file mode 100644 index 0000000000..a048476f6a --- /dev/null +++ b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaRange.ts @@ -0,0 +1,51 @@ +import type { ICartesianSeries, ILineChartSpec } from '@visactor/vchart' +import { AxisBoundaryEnum } from 'src/types' +import type { AnnotationAxisRange } from 'src/types' + +// The schema guarantees at least one axis. Keep the geometry helper compatible +// with both public DSL types and the schema-inferred AdvancedVSeed type. +type AreaRange = { x?: AnnotationAxisRange; y?: AnnotationAxisRange } +type AxisHelper = ReturnType + +export const assertAnnotationAreaRangeAxes = (range: AreaRange, spec: ILineChartSpec) => { + for (const axis of ['x', 'y'] as const) { + if (!range[axis]) continue + const orient = axis === 'x' ? 'bottom' : 'left' + const axisSpec = spec.axes?.find((item) => item.orient === orient) + if (axisSpec?.type !== 'linear') { + throw new Error(`annotationArea.range.${axis} requires a linear numeric axis`) + } + } +} + +const axisBounds = (range: AnnotationAxisRange | undefined, helper: AxisHelper, size: number) => { + if (!range) return [0, size] + + const domain = helper.getScale?.(0).domain() as unknown[] | undefined + if (!domain?.length || !domain.every((value) => typeof value === 'number' && Number.isFinite(value))) return [] + const axisMin = Math.min(...(domain as number[])) + const axisMax = Math.max(...(domain as number[])) + const min = Math.max(axisMin, range.min === AxisBoundaryEnum.Min ? axisMin : range.min) + const max = Math.min(axisMax, range.max === AxisBoundaryEnum.Max ? axisMax : range.max) + if (min >= max) return [] + + // Use the renderer's axis mapping, including inverse and axis layout offsets. + const start = helper.dataToPosition([min]) + const end = helper.dataToPosition([max]) + if (!Number.isFinite(start) || !Number.isFinite(end)) return [] + return [Math.max(0, Math.min(start, end)), Math.min(size, Math.max(start, end))] +} + +export const annotationAreaRangePositions = (range: AreaRange, series: ICartesianSeries) => { + const { width, height } = series.getRegion().getLayoutRect() + if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return [] + const [left, right] = axisBounds(range.x, series.getXAxisHelper(), width) + const [top, bottom] = axisBounds(range.y, series.getYAxisHelper(), height) + if (left === undefined || top === undefined || left >= right || top >= bottom) return [] + return [ + { x: left, y: top }, + { x: right, y: top }, + { x: right, y: bottom }, + { x: left, y: bottom }, + ] +} diff --git a/packages/vseed/src/types/properties/annotation/annotationArea.ts b/packages/vseed/src/types/properties/annotation/annotationArea.ts index 1e3bc0dd22..5ea12e5880 100644 --- a/packages/vseed/src/types/properties/annotation/annotationArea.ts +++ b/packages/vseed/src/types/properties/annotation/annotationArea.ts @@ -1,10 +1,32 @@ import type { AreaSelectors, AreaSelector } from '../../dataSelector/selector' +import type { AnnotationAreaRange } from './annotationAreaRange' -export type AnnotationArea = { - /** - * @description 依赖选择的数据, 进行数据标记. - */ - selector?: AreaSelector | AreaSelectors +/** + * @description 区域标注，selector 与 range 必须且只能配置一种。 + * selector 保留分类色带语义；range 按数值线性轴的原始坐标绘制，不依赖区域内是否存在数据点。 + * range 支持普通折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + * @example { range: { y: { min: 10, max: 'axisMax' } }, text: '高危险区域', areaColor: '#ef4444', areaColorOpacity: 0.12 } + */ +export type AnnotationArea = ( + | { + /** + * @description selector 与 range 必须且只能配置一种。selector 依赖选择的数据确定分类色带。折线/面积使用类别中心加 outerPadding；柱/条使用完整 band 边界加 outerPadding。 + */ + selector: AreaSelector | AreaSelectors + range?: never + } + | { + selector?: never + /** + * @description selector 与 range 必须且只能配置一种。range 按数据坐标定义区域，至少指定 x/y 中的一项，每项都必须填写 min/max。可使用 axisMin/axisMax 表示当前轴边界。 + * 仅支持普通数值线性轴，可用于折线、面积、柱、条、箱线、直方图、散点图及其适用的分组/百分比变体；不支持分类/对数轴范围、双轴图、透视组合图和动态竞赛图。 + */ + range: AnnotationAreaRange + } +) & + AnnotationAreaStyle + +export type AnnotationAreaStyle = { /** * @description 标注的文本 * @default '' @@ -113,7 +135,7 @@ export type AnnotationArea = { */ areaLineDash?: number[] /** - * @description 标注区域区域的边距 + * @description selector 分类色带的像素边距。range 模式不应用此边距，以保持精确的数据坐标边界。 * @example 0 */ outerPadding?: number diff --git a/packages/vseed/src/types/properties/annotation/annotationAreaRange.ts b/packages/vseed/src/types/properties/annotation/annotationAreaRange.ts new file mode 100644 index 0000000000..9bcf03d583 --- /dev/null +++ b/packages/vseed/src/types/properties/annotation/annotationAreaRange.ts @@ -0,0 +1,28 @@ +/** + * @description 当前可见数值轴的边界，包含轴 min/max、zero、nice 等配置的影响，不是数据极值。 + */ +export const AxisBoundaryEnum = { + Min: 'axisMin', + Max: 'axisMax', +} as const + +/** + * @description 数值线性轴上的区间。必须同时指定 min/max；两个数值端点必须满足 min < max。 + */ +export type AnnotationAxisRange = { + /** + * @description 数据坐标下界；axisMin 表示当前轴的最小值。百分比使用原始数值，例如 0.2 表示 20%。 + */ + min: number | typeof AxisBoundaryEnum.Min + /** + * @description 数据坐标上界；axisMax 表示当前轴的最大值。反向轴仍按数值大小解释上下界。 + */ + max: number | typeof AxisBoundaryEnum.Max +} + +/** + * @description 按轴坐标定义矩形，至少指定 x/y 中的一项。未指定的轴铺满绘图区；完全越界时不绘制，部分越界时裁剪，不扩大坐标轴。 + */ +export type AnnotationAreaRange = + | { x: AnnotationAxisRange; y?: AnnotationAxisRange } + | { x?: AnnotationAxisRange; y: AnnotationAxisRange } diff --git a/packages/vseed/src/types/properties/annotation/index.ts b/packages/vseed/src/types/properties/annotation/index.ts index 4edc8be41c..22e362ce14 100644 --- a/packages/vseed/src/types/properties/annotation/index.ts +++ b/packages/vseed/src/types/properties/annotation/index.ts @@ -2,6 +2,7 @@ export type * from './annotationPoint' export type * from './annotationHorizontalLine' export type * from './annotationVerticalLine' export type * from './annotationArea' +export * from './annotationAreaRange' export type * from './annotationDifferenceLine' export * from './zAnnotationPoint' diff --git a/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts b/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts index a1b1bf42a8..765cfe1165 100644 --- a/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts +++ b/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts @@ -1,8 +1,23 @@ import { zAreaSelector, zAreaSelectors } from '../../dataSelector/selector' import { z } from 'zod' +import { AxisBoundaryEnum } from './annotationAreaRange' -export const zAnnotationArea = z.object({ - selector: z.union([zAreaSelector, zAreaSelectors]).nullish(), +export const zAnnotationAxisRange = z + .object({ + min: z.number().finite().or(z.literal(AxisBoundaryEnum.Min)), + max: z.number().finite().or(z.literal(AxisBoundaryEnum.Max)), + }) + .strict() + .refine(({ min, max }) => typeof min !== 'number' || typeof max !== 'number' || min < max, { + message: 'min must be less than max', + }) + +export const zAnnotationAreaRange = z + .object({ x: zAnnotationAxisRange.optional(), y: zAnnotationAxisRange.optional() }) + .strict() + .refine(({ x, y }) => x !== undefined || y !== undefined, { message: 'range requires x or y' }) + +export const zAnnotationAreaStyle = z.object({ textPosition: z .enum(['top', 'topRight', 'topLeft', 'bottom', 'bottomLeft', 'bottomRight', 'left', 'right']) .default('top') @@ -30,3 +45,14 @@ export const zAnnotationArea = z.object({ outerPadding: z.number().default(4).nullish(), }) + +export const zAnnotationArea = z.union([ + zAnnotationAreaStyle.extend({ + selector: z.union([zAreaSelector, zAreaSelectors]), + range: z.never().optional(), + }), + zAnnotationAreaStyle.extend({ + selector: z.never().optional(), + range: zAnnotationAreaRange, + }), +]) diff --git a/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts b/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts index dda4280ad1..2b95175296 100644 --- a/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts +++ b/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts @@ -2,7 +2,7 @@ import { z } from 'zod' import { zAnnotationPoint } from '../../annotation/zAnnotationPoint' import { zAnnotationDifferenceLine } from '../../annotation/zAnnotationDifferenceLine' import { zAnnotationHorizontalLine } from '../../annotation/zAnnotationHorizontalLine' -import { zAnnotationArea } from '../../annotation/zAnnotationArea' +import { zAnnotationAreaStyle } from '../../annotation/zAnnotationArea' export const zAnnotationPointConfig = zAnnotationPoint .omit({ selector: true, measureId: true, text: true }) @@ -47,7 +47,7 @@ export const zAnnotationHorizontalLineConfig = zAnnotationHorizontalLine export const zAnnotationVerticalLineConfig = zAnnotationHorizontalLineConfig.clone() -export const zAnnotationAreaConfig = zAnnotationArea +export const zAnnotationAreaConfig = zAnnotationAreaStyle .pick({ textColor: true, textFontSize: true, diff --git a/packages/vseed/tests/examples/features/annotationArea/area-selector-months.json b/packages/vseed/tests/examples/features/annotationArea/area-selector-months.json new file mode 100644 index 0000000000..b3bf27340d --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/area-selector-months.json @@ -0,0 +1,23 @@ +{ + "name": "面积图：二月到三月分类色带", + "description": "已有 selector 正例：选中二月、三月，纵向铺满绘图区。沿 x 的历史边界是选中类别中心加 outerPadding（默认 4px），不是面积曲线下方，也不是完整 band 外沿。", + "vseed": { + "chartType": "area", + "dataset": [ + { "month": "一月", "region": "华东", "value": 10 }, + { "month": "一月", "region": "华西", "value": 8 }, + { "month": "二月", "region": "华东", "value": 15 }, + { "month": "二月", "region": "华西", "value": 12 }, + { "month": "三月", "region": "华东", "value": 20 }, + { "month": "三月", "region": "华西", "value": 18 } + ], + "dimensions": [ + { "id": "month", "encoding": "xAxis" }, + { "id": "region", "encoding": "color" } + ], + "measures": [{ "id": "value", "encoding": "yAxis" }], + "annotationArea": [ + { "selector": { "field": "month", "operator": "in", "value": ["二月", "三月"] }, "text": "后两月" } + ] + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/bar-range-risk.json b/packages/vseed/tests/examples/features/annotationArea/bar-range-risk.json new file mode 100644 index 0000000000..63a32780ce --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/bar-range-risk.json @@ -0,0 +1,20 @@ +{ + "name": "条形图：高危险区域", + "description": "横向条形图的数值轴是 x，因此风险阈值写在 range.x，分类 y 轴铺满。x/y 对应实际坐标轴，不随图表方向互换含义。", + "vseed": { + "chartType": "bar", + "dataset": [ + { "month": "一月", "value": 5 }, + { "month": "二月", "value": 15 }, + { "month": "三月", "value": 20 } + ], + "dimensions": [{ "id": "month", "encoding": "yAxis" }], + "measures": [{ "id": "value", "encoding": "xAxis" }], + "annotationArea": { + "range": { "x": { "min": 10, "max": "axisMax" } }, + "text": "高危险区域", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/bar.json b/packages/vseed/tests/examples/features/annotationArea/bar.json index bceec677f8..0e4c5e4233 100644 --- a/packages/vseed/tests/examples/features/annotationArea/bar.json +++ b/packages/vseed/tests/examples/features/annotationArea/bar.json @@ -1,6 +1,6 @@ { "name": "bar", - "description": "bar", + "description": "已有 selector 分类色带：选中 2021 年，沿数值 x 轴铺满绘图区；沿分类 y 轴使用完整 band 边界加 outerPadding，保持历史行为。", "vseed": { "chartType": "bar", "dataset": [ diff --git a/packages/vseed/tests/examples/features/annotationArea/boxplot-range-risk.json b/packages/vseed/tests/examples/features/annotationArea/boxplot-range-risk.json new file mode 100644 index 0000000000..633ece9ea9 --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/boxplot-range-risk.json @@ -0,0 +1,27 @@ +{ + "name": "箱线图：高危险区间", + "description": "箱线图的数值 y 轴标出高危险区间，分类 x 轴铺满；可直观看出各组箱体和须与阈值区间的关系。", + "vseed": { + "chartType": "boxPlot", + "dataset": [ + { "group": "甲组", "value": 4 }, + { "group": "甲组", "value": 8 }, + { "group": "甲组", "value": 11 }, + { "group": "甲组", "value": 14 }, + { "group": "甲组", "value": 18 }, + { "group": "乙组", "value": 6 }, + { "group": "乙组", "value": 9 }, + { "group": "乙组", "value": 13 }, + { "group": "乙组", "value": 17 }, + { "group": "乙组", "value": 22 } + ], + "dimensions": [{ "id": "group", "encoding": "xAxis" }], + "measures": [{ "id": "value", "encoding": "yAxis" }], + "annotationArea": { + "range": { "y": { "min": 15, "max": "axisMax" } }, + "text": "高危险区间", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/column-range-risk.json b/packages/vseed/tests/examples/features/annotationArea/column-range-risk.json new file mode 100644 index 0000000000..a4dd528e7e --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/column-range-risk.json @@ -0,0 +1,20 @@ +{ + "name": "柱状图：高危险区域", + "description": "柱状图在数值 y 轴上绘制 10 到轴上限的水平色带，分类 x 轴铺满。range 两个数值端点必须满足 min < max。", + "vseed": { + "chartType": "column", + "dataset": [ + { "month": "一月", "value": 5 }, + { "month": "二月", "value": 15 }, + { "month": "三月", "value": 20 } + ], + "dimensions": [{ "id": "month", "encoding": "xAxis" }], + "measures": [{ "id": "value", "encoding": "yAxis" }], + "annotationArea": { + "range": { "y": { "min": 10, "max": "axisMax" } }, + "text": "高危险区域", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/histogram-range-window.json b/packages/vseed/tests/examples/features/annotationArea/histogram-range-window.json new file mode 100644 index 0000000000..757d7505ad --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/histogram-range-window.json @@ -0,0 +1,26 @@ +{ + "name": "直方图重点观察区间", + "description": "直方图的横轴也是数值线性轴，range.x 可以精确标注连续区间；未指定 y 时覆盖整个绘图区。", + "vseed": { + "chartType": "histogram", + "dataset": [ + { "value": 1 }, + { "value": 1 }, + { "value": 2 }, + { "value": 3 }, + { "value": 4 }, + { "value": 5 }, + { "value": 7 }, + { "value": 8 }, + { "value": 9 }, + { "value": 10 } + ], + "measures": [{ "id": "value" }], + "annotationArea": { + "range": { "x": { "min": 3, "max": 7 } }, + "text": "重点观察区间", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/line-range-risk.json b/packages/vseed/tests/examples/features/annotationArea/line-range-risk.json new file mode 100644 index 0000000000..705e00d4c8 --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/line-range-risk.json @@ -0,0 +1,20 @@ +{ + "name": "折线图：高危险区域", + "description": "y 从 10 到 axisMax，x 分类轴铺满。指定数值范围与按 selector 选出高风险月份不同：风险区域始终覆盖所有月份，并随最终轴范围更新。", + "vseed": { + "chartType": "line", + "dataset": [ + { "month": "一月", "value": 5 }, + { "month": "二月", "value": 15 }, + { "month": "三月", "value": 20 } + ], + "dimensions": [{ "id": "month", "encoding": "xAxis" }], + "measures": [{ "id": "value", "encoding": "yAxis" }], + "annotationArea": { + "range": { "y": { "min": 10, "max": "axisMax" } }, + "text": "高危险区域", + "areaColor": "#ef4444", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/scatter-range-empty.json b/packages/vseed/tests/examples/features/annotationArea/scatter-range-empty.json new file mode 100644 index 0000000000..0833642b53 --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/scatter-range-empty.json @@ -0,0 +1,24 @@ +{ + "name": "散点图：无数据点的目标区域", + "description": "目标矩形内没有数据点也可绘制。axisMax 指当前最终坐标轴上限，此处手动设置为 100%；它不是数据最大值 60%。TypeScript 可从 @visactor/vseed 导入 AxisBoundaryEnum.Min / Max，JSON 使用 axisMin / axisMax。", + "vseed": { + "chartType": "scatter", + "dataset": [ + { "channel": "A", "cost": 10, "conversion": 0.1 }, + { "channel": "B", "cost": 60, "conversion": 0.3 }, + { "channel": "C", "cost": 130, "conversion": 0.6 } + ], + "dimensions": [{ "id": "channel", "encoding": "color" }], + "measures": [ + { "id": "cost", "encoding": "xAxis" }, + { "id": "conversion", "encoding": "yAxis" } + ], + "yAxis": { "min": 0, "max": 1, "autoFormat": false, "numFormat": { "type": "percent" } }, + "annotationArea": { + "range": { "x": { "min": 0, "max": 100 }, "y": { "min": 0.7, "max": "axisMax" } }, + "text": "待达成目标", + "areaColor": "#22c55e", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/scatter-range-rectangle.json b/packages/vseed/tests/examples/features/annotationArea/scatter-range-rectangle.json new file mode 100644 index 0000000000..cb1c2ad25f --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/scatter-range-rectangle.json @@ -0,0 +1,24 @@ +{ + "name": "散点图：二维目标矩形", + "description": "同时限制成本 0–100 和转化率 20%–40%。即使只有 B 点位于区间内，也绘制完整矩形；区域不随点的顺序或数量收缩。", + "vseed": { + "chartType": "scatter", + "dataset": [ + { "channel": "A", "cost": 10, "conversion": 0.1 }, + { "channel": "B", "cost": 60, "conversion": 0.3 }, + { "channel": "C", "cost": 130, "conversion": 0.6 } + ], + "dimensions": [{ "id": "channel", "encoding": "color" }], + "measures": [ + { "id": "cost", "encoding": "xAxis" }, + { "id": "conversion", "encoding": "yAxis" } + ], + "yAxis": { "autoFormat": false, "numFormat": { "type": "percent" } }, + "annotationArea": { + "range": { "x": { "min": 0, "max": 100 }, "y": { "min": 0.2, "max": 0.4 } }, + "text": "目标区域", + "areaColor": "#22c55e", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/scatter-range-x.json b/packages/vseed/tests/examples/features/annotationArea/scatter-range-x.json new file mode 100644 index 0000000000..bf46865ff2 --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/scatter-range-x.json @@ -0,0 +1,24 @@ +{ + "name": "散点图：成本窗口", + "description": "range.x 使用原始数据坐标 0–100；未指定 y 时纵向铺满绘图区。range 与 selector 互斥，指定轴必须同时填写 min/max；范围不会扩大轴域，部分越界裁剪、完全越界不绘制。支持普通折线、面积、柱、条、箱线、直方图、散点图及适用的分组/百分比变体的数值线性轴（含反向轴）；不支持分类/对数轴范围、双轴图、透视组合图、动态竞赛图。", + "vseed": { + "chartType": "scatter", + "dataset": [ + { "channel": "A", "cost": 10, "conversion": 0.1 }, + { "channel": "B", "cost": 60, "conversion": 0.3 }, + { "channel": "C", "cost": 130, "conversion": 0.6 } + ], + "dimensions": [{ "id": "channel", "encoding": "color" }], + "measures": [ + { "id": "cost", "encoding": "xAxis" }, + { "id": "conversion", "encoding": "yAxis" } + ], + "yAxis": { "autoFormat": false, "numFormat": { "type": "percent" } }, + "annotationArea": { + "range": { "x": { "min": 0, "max": 100 } }, + "text": "成本 0–100", + "areaColor": "#3b82f6", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/annotationArea/scatter-range-y.json b/packages/vseed/tests/examples/features/annotationArea/scatter-range-y.json new file mode 100644 index 0000000000..edb1bc5154 --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/scatter-range-y.json @@ -0,0 +1,24 @@ +{ + "name": "散点图：转化率目标带", + "description": "range.y 使用原始数值 0.2–0.4，显示为 20%–40%；未指定 x 时横向铺满绘图区。标签格式化不改变边界，outerPadding 不作用于 range。", + "vseed": { + "chartType": "scatter", + "dataset": [ + { "channel": "A", "cost": 10, "conversion": 0.1 }, + { "channel": "B", "cost": 60, "conversion": 0.3 }, + { "channel": "C", "cost": 130, "conversion": 0.6 } + ], + "dimensions": [{ "id": "channel", "encoding": "color" }], + "measures": [ + { "id": "cost", "encoding": "xAxis" }, + { "id": "conversion", "encoding": "yAxis" } + ], + "yAxis": { "autoFormat": false, "numFormat": { "type": "percent" } }, + "annotationArea": { + "range": { "y": { "min": 0.2, "max": 0.4 } }, + "text": "目标转化率 20%–40%", + "areaColor": "#22c55e", + "areaColorOpacity": 0.12 + } + } +} diff --git a/packages/vseed/tests/examples/features/features.test.ts b/packages/vseed/tests/examples/features/features.test.ts index 362f84dd71..638c8aad31 100644 --- a/packages/vseed/tests/examples/features/features.test.ts +++ b/packages/vseed/tests/examples/features/features.test.ts @@ -5,102 +5,112 @@ import config_1 from './animation/line-area.json' import config_2 from './animation/pie-like.json' import config_3 from './animation/radar.json' import config_4 from './animation/scatter.json' -import config_5 from './annotationArea/bar.json' -import config_6 from './annotationArea/column.json' -import config_7 from './annotationArea/line.json' -import config_8 from './annotationHorizontalLine/fixed-y-value.json' -import config_9 from './annotationHorizontalLine/selector.json' -import config_10 from './annotationPoint/condition.json' -import config_11 from './annotationPoint/partial-datum.json' -import config_12 from './annotationPoint/value-point.json' -import config_13 from './annotationVerticalLine/fixed-x-value.json' -import config_14 from './annotationVerticalLine/selector.json' -import config_15 from './barStyle/barstyle-array.json' -import config_16 from './barStyle/dimension-condition.json' -import config_17 from './barStyle/partial-datum.json' -import config_18 from './barStyle/value.json' -import config_19 from './bodyCellStyle/pivotTable-background-scale-with-total.json' -import config_20 from './bodyCellStyle/pivotTable-background-scale.json' -import config_21 from './bodyCellStyle/table-background-scale.json' -import config_22 from './bodyCellStyle/table-background-with-total.json' -import config_23 from './bodyCellStyle/表格条件样式---全局样式.json' -import config_24 from './bodyCellStyle/表格条件样式---多个条件.json' -import config_25 from './bodyCellStyle/表格条件样式---根据度量值设置.json' -import config_26 from './bodyCellStyle/表格条件样式.json' -import config_27 from './bodyCellStyle/透视表条件样式---全局样式.json' -import config_28 from './bodyCellStyle/透视表条件样式---根据度量值设置.json' -import config_29 from './bodyCellStyle/透视表条件样式---符合条件.json' -import config_30 from './brush/enable.json' -import config_31 from './brush/removeonclick.json' -import config_32 from './color/colormapping.json' -import config_33 from './color/colorscheme.json' -import config_34 from './dataset/单指标-单维度.json' -import config_35 from './dataset/单指标-多维度.json' -import config_36 from './dataset/单指标-零维度.json' -import config_37 from './dataset/多指标-单维度.json' -import config_38 from './dataset/多指标-多维度.json' -import config_39 from './dataset/多指标-零维度.json' -import config_40 from './dataset/数据维度与指标配置.json' -import config_41 from './dataset/自动选择.json' -import config_42 from './dimensions/列维度.json' -import config_43 from './dimensions/普通维度.json' -import config_44 from './dimensions/行维度.json' -import config_45 from './dimensions/透视维度.json' -import config_46 from './dynamicFilter/annotation-horizontal-line.json' -import config_47 from './dynamicFilter/annotation-point.json' -import config_48 from './dynamicFilter/annotation-vertical-line.json' -import config_49 from './dynamicFilter/area-line-point-style.json' -import config_50 from './dynamicFilter/column-bar-style.json' -import config_51 from './dynamicFilter/pivot-table-cell-style.json' -import config_52 from './dynamicFilter/table-dynamic-cell-style.json' -import config_53 from './formatter/base-dim-formatter-bar.json' -import config_54 from './formatter/base-dim-formatter-dualAxis.json' -import config_55 from './formatter/base-dim-formatter-heatmap.json' -import config_56 from './formatter/base-dim-formatter-pie.json' -import config_57 from './formatter/base-dim-formatter-pivotChart.json' -import config_58 from './formatter/base-dim-formatter-pivotTable.json' -import config_59 from './formatter/base-dim-formatter-radar.json' -import config_60 from './formatter/base-dim-formatter-scatter.json' -import config_61 from './formatter/base-dim-formatter-table.json' -import config_62 from './formatter/base-dim-formatter-treemap.json' -import config_63 from './i18n/en-us.json' -import config_64 from './i18n/zh-cn.json' -import config_65 from './label/enable.json' -import config_66 from './legend/border.json' -import config_67 from './legend/enable.json' -import config_68 from './legend/labelcolor.json' -import config_69 from './legend/labelfontsize.json' -import config_70 from './legend/labelfontweight.json' -import config_71 from './legend/maxsize.json' -import config_72 from './legend/position.json' -import config_73 from './measures/指标组.json' -import config_74 from './numFormat/autoformat.json' -import config_75 from './numFormat/fractiondigits.json' -import config_76 from './numFormat/ratio-&-symbol.json' -import config_77 from './numFormat/roundingmode.json' -import config_78 from './numFormat/roundingpriority.json' -import config_79 from './numFormat/significantdigits.json' -import config_80 from './numFormat/suffix-&-prefix.json' -import config_81 from './numFormat/thousandseparator.json' -import config_82 from './numFormat/type.json' -import config_83 from './pointStyle/dimension-condition.json' -import config_84 from './pointStyle/measure-condition.json' -import config_85 from './pointStyle/partial-datum.json' -import config_86 from './pointStyle/point-array.json' -import config_87 from './pointStyle/value.json' -import config_88 from './polynomial/column-示例.json' -import config_89 from './polynomial/scatter-示例.json' -import config_90 from './sort/图例自身排序.json' -import config_91 from './sort/指标排序-1.json' -import config_92 from './sort/指标排序.json' -import config_93 from './sort/维度排序-1.json' -import config_94 from './sort/维度排序.json' -import config_95 from './sort/自定义排序(图例id).json' -import config_96 from './sort/自定义排序(图例名称).json' -import config_97 from './sort/自定义排序.json' -import config_98 from './totals/columnTotal.json' -import config_99 from './totals/rowTotal.json' -import config_100 from './totals/singleIndicator.json' +import config_5 from './annotationArea/area-selector-months.json' +import config_6 from './annotationArea/bar-range-risk.json' +import config_7 from './annotationArea/bar.json' +import config_8 from './annotationArea/boxplot-range-risk.json' +import config_9 from './annotationArea/column-range-risk.json' +import config_10 from './annotationArea/column.json' +import config_11 from './annotationArea/histogram-range-window.json' +import config_12 from './annotationArea/line-range-risk.json' +import config_13 from './annotationArea/line.json' +import config_14 from './annotationArea/scatter-range-empty.json' +import config_15 from './annotationArea/scatter-range-rectangle.json' +import config_16 from './annotationArea/scatter-range-x.json' +import config_17 from './annotationArea/scatter-range-y.json' +import config_18 from './annotationHorizontalLine/fixed-y-value.json' +import config_19 from './annotationHorizontalLine/selector.json' +import config_20 from './annotationPoint/condition.json' +import config_21 from './annotationPoint/partial-datum.json' +import config_22 from './annotationPoint/value-point.json' +import config_23 from './annotationVerticalLine/fixed-x-value.json' +import config_24 from './annotationVerticalLine/selector.json' +import config_25 from './barStyle/barstyle-array.json' +import config_26 from './barStyle/dimension-condition.json' +import config_27 from './barStyle/partial-datum.json' +import config_28 from './barStyle/value.json' +import config_29 from './bodyCellStyle/pivotTable-background-scale-with-total.json' +import config_30 from './bodyCellStyle/pivotTable-background-scale.json' +import config_31 from './bodyCellStyle/table-background-scale.json' +import config_32 from './bodyCellStyle/table-background-with-total.json' +import config_33 from './bodyCellStyle/表格条件样式---全局样式.json' +import config_34 from './bodyCellStyle/表格条件样式---多个条件.json' +import config_35 from './bodyCellStyle/表格条件样式---根据度量值设置.json' +import config_36 from './bodyCellStyle/表格条件样式.json' +import config_37 from './bodyCellStyle/透视表条件样式---全局样式.json' +import config_38 from './bodyCellStyle/透视表条件样式---根据度量值设置.json' +import config_39 from './bodyCellStyle/透视表条件样式---符合条件.json' +import config_40 from './brush/enable.json' +import config_41 from './brush/removeonclick.json' +import config_42 from './color/colormapping.json' +import config_43 from './color/colorscheme.json' +import config_44 from './dataset/单指标-单维度.json' +import config_45 from './dataset/单指标-多维度.json' +import config_46 from './dataset/单指标-零维度.json' +import config_47 from './dataset/多指标-单维度.json' +import config_48 from './dataset/多指标-多维度.json' +import config_49 from './dataset/多指标-零维度.json' +import config_50 from './dataset/数据维度与指标配置.json' +import config_51 from './dataset/自动选择.json' +import config_52 from './dimensions/列维度.json' +import config_53 from './dimensions/普通维度.json' +import config_54 from './dimensions/行维度.json' +import config_55 from './dimensions/透视维度.json' +import config_56 from './dynamicFilter/annotation-horizontal-line.json' +import config_57 from './dynamicFilter/annotation-point.json' +import config_58 from './dynamicFilter/annotation-vertical-line.json' +import config_59 from './dynamicFilter/area-line-point-style.json' +import config_60 from './dynamicFilter/column-bar-style.json' +import config_61 from './dynamicFilter/pivot-table-cell-style.json' +import config_62 from './dynamicFilter/table-dynamic-cell-style.json' +import config_63 from './formatter/base-dim-formatter-bar.json' +import config_64 from './formatter/base-dim-formatter-dualAxis.json' +import config_65 from './formatter/base-dim-formatter-heatmap.json' +import config_66 from './formatter/base-dim-formatter-pie.json' +import config_67 from './formatter/base-dim-formatter-pivotChart.json' +import config_68 from './formatter/base-dim-formatter-pivotTable.json' +import config_69 from './formatter/base-dim-formatter-radar.json' +import config_70 from './formatter/base-dim-formatter-scatter.json' +import config_71 from './formatter/base-dim-formatter-table.json' +import config_72 from './formatter/base-dim-formatter-treemap.json' +import config_73 from './i18n/en-us.json' +import config_74 from './i18n/zh-cn.json' +import config_75 from './label/enable.json' +import config_76 from './legend/border.json' +import config_77 from './legend/enable.json' +import config_78 from './legend/labelcolor.json' +import config_79 from './legend/labelfontsize.json' +import config_80 from './legend/labelfontweight.json' +import config_81 from './legend/maxsize.json' +import config_82 from './legend/position.json' +import config_83 from './measures/指标组.json' +import config_84 from './numFormat/autoformat.json' +import config_85 from './numFormat/fractiondigits.json' +import config_86 from './numFormat/ratio-&-symbol.json' +import config_87 from './numFormat/roundingmode.json' +import config_88 from './numFormat/roundingpriority.json' +import config_89 from './numFormat/significantdigits.json' +import config_90 from './numFormat/suffix-&-prefix.json' +import config_91 from './numFormat/thousandseparator.json' +import config_92 from './numFormat/type.json' +import config_93 from './pointStyle/dimension-condition.json' +import config_94 from './pointStyle/measure-condition.json' +import config_95 from './pointStyle/partial-datum.json' +import config_96 from './pointStyle/point-array.json' +import config_97 from './pointStyle/value.json' +import config_98 from './polynomial/column-示例.json' +import config_99 from './polynomial/scatter-示例.json' +import config_100 from './sort/图例自身排序.json' +import config_101 from './sort/指标排序-1.json' +import config_102 from './sort/指标排序.json' +import config_103 from './sort/维度排序-1.json' +import config_104 from './sort/维度排序.json' +import config_105 from './sort/自定义排序(图例id).json' +import config_106 from './sort/自定义排序(图例名称).json' +import config_107 from './sort/自定义排序.json' +import config_108 from './totals/columnTotal.json' +import config_109 from './totals/rowTotal.json' +import config_110 from './totals/singleIndicator.json' const cases = [ { name: 'animation/bar-like', vseed: config_0 }, @@ -108,102 +118,112 @@ const cases = [ { name: 'animation/pie-like', vseed: config_2 }, { name: 'animation/radar', vseed: config_3 }, { name: 'animation/scatter', vseed: config_4 }, - { name: 'annotationArea/bar', vseed: config_5 }, - { name: 'annotationArea/column', vseed: config_6 }, - { name: 'annotationArea/line', vseed: config_7 }, - { name: 'annotationHorizontalLine/fixed-y-value', vseed: config_8 }, - { name: 'annotationHorizontalLine/selector', vseed: config_9 }, - { name: 'annotationPoint/condition', vseed: config_10 }, - { name: 'annotationPoint/partial-datum', vseed: config_11 }, - { name: 'annotationPoint/value-point', vseed: config_12 }, - { name: 'annotationVerticalLine/fixed-x-value', vseed: config_13 }, - { name: 'annotationVerticalLine/selector', vseed: config_14 }, - { name: 'barStyle/barstyle-array', vseed: config_15 }, - { name: 'barStyle/dimension-condition', vseed: config_16 }, - { name: 'barStyle/partial-datum', vseed: config_17 }, - { name: 'barStyle/value', vseed: config_18 }, - { name: 'bodyCellStyle/pivotTable-background-scale-with-total', vseed: config_19 }, - { name: 'bodyCellStyle/pivotTable-background-scale', vseed: config_20 }, - { name: 'bodyCellStyle/table-background-scale', vseed: config_21 }, - { name: 'bodyCellStyle/table-background-with-total', vseed: config_22 }, - { name: 'bodyCellStyle/表格条件样式---全局样式', vseed: config_23 }, - { name: 'bodyCellStyle/表格条件样式---多个条件', vseed: config_24 }, - { name: 'bodyCellStyle/表格条件样式---根据度量值设置', vseed: config_25 }, - { name: 'bodyCellStyle/表格条件样式', vseed: config_26 }, - { name: 'bodyCellStyle/透视表条件样式---全局样式', vseed: config_27 }, - { name: 'bodyCellStyle/透视表条件样式---根据度量值设置', vseed: config_28 }, - { name: 'bodyCellStyle/透视表条件样式---符合条件', vseed: config_29 }, - { name: 'brush/enable', vseed: config_30 }, - { name: 'brush/removeonclick', vseed: config_31 }, - { name: 'color/colormapping', vseed: config_32 }, - { name: 'color/colorscheme', vseed: config_33 }, - { name: 'dataset/单指标-单维度', vseed: config_34 }, - { name: 'dataset/单指标-多维度', vseed: config_35 }, - { name: 'dataset/单指标-零维度', vseed: config_36 }, - { name: 'dataset/多指标-单维度', vseed: config_37 }, - { name: 'dataset/多指标-多维度', vseed: config_38 }, - { name: 'dataset/多指标-零维度', vseed: config_39 }, - { name: 'dataset/数据维度与指标配置', vseed: config_40 }, - { name: 'dataset/自动选择', vseed: config_41 }, - { name: 'dimensions/列维度', vseed: config_42 }, - { name: 'dimensions/普通维度', vseed: config_43 }, - { name: 'dimensions/行维度', vseed: config_44 }, - { name: 'dimensions/透视维度', vseed: config_45 }, - { name: 'dynamicFilter/annotation-horizontal-line', vseed: config_46 }, - { name: 'dynamicFilter/annotation-point', vseed: config_47 }, - { name: 'dynamicFilter/annotation-vertical-line', vseed: config_48 }, - { name: 'dynamicFilter/area-line-point-style', vseed: config_49 }, - { name: 'dynamicFilter/column-bar-style', vseed: config_50 }, - { name: 'dynamicFilter/pivot-table-cell-style', vseed: config_51 }, - { name: 'dynamicFilter/table-dynamic-cell-style', vseed: config_52 }, - { name: 'formatter/base-dim-formatter-bar', vseed: config_53 }, - { name: 'formatter/base-dim-formatter-dualAxis', vseed: config_54 }, - { name: 'formatter/base-dim-formatter-heatmap', vseed: config_55 }, - { name: 'formatter/base-dim-formatter-pie', vseed: config_56 }, - { name: 'formatter/base-dim-formatter-pivotChart', vseed: config_57 }, - { name: 'formatter/base-dim-formatter-pivotTable', vseed: config_58 }, - { name: 'formatter/base-dim-formatter-radar', vseed: config_59 }, - { name: 'formatter/base-dim-formatter-scatter', vseed: config_60 }, - { name: 'formatter/base-dim-formatter-table', vseed: config_61 }, - { name: 'formatter/base-dim-formatter-treemap', vseed: config_62 }, - { name: 'i18n/en-us', vseed: config_63 }, - { name: 'i18n/zh-cn', vseed: config_64 }, - { name: 'label/enable', vseed: config_65 }, - { name: 'legend/border', vseed: config_66 }, - { name: 'legend/enable', vseed: config_67 }, - { name: 'legend/labelcolor', vseed: config_68 }, - { name: 'legend/labelfontsize', vseed: config_69 }, - { name: 'legend/labelfontweight', vseed: config_70 }, - { name: 'legend/maxsize', vseed: config_71 }, - { name: 'legend/position', vseed: config_72 }, - { name: 'measures/指标组', vseed: config_73 }, - { name: 'numFormat/autoformat', vseed: config_74 }, - { name: 'numFormat/fractiondigits', vseed: config_75 }, - { name: 'numFormat/ratio-&-symbol', vseed: config_76 }, - { name: 'numFormat/roundingmode', vseed: config_77 }, - { name: 'numFormat/roundingpriority', vseed: config_78 }, - { name: 'numFormat/significantdigits', vseed: config_79 }, - { name: 'numFormat/suffix-&-prefix', vseed: config_80 }, - { name: 'numFormat/thousandseparator', vseed: config_81 }, - { name: 'numFormat/type', vseed: config_82 }, - { name: 'pointStyle/dimension-condition', vseed: config_83 }, - { name: 'pointStyle/measure-condition', vseed: config_84 }, - { name: 'pointStyle/partial-datum', vseed: config_85 }, - { name: 'pointStyle/point-array', vseed: config_86 }, - { name: 'pointStyle/value', vseed: config_87 }, - { name: 'polynomial/column-示例', vseed: config_88 }, - { name: 'polynomial/scatter-示例', vseed: config_89 }, - { name: 'sort/图例自身排序', vseed: config_90 }, - { name: 'sort/指标排序-1', vseed: config_91 }, - { name: 'sort/指标排序', vseed: config_92 }, - { name: 'sort/维度排序-1', vseed: config_93 }, - { name: 'sort/维度排序', vseed: config_94 }, - { name: 'sort/自定义排序(图例id)', vseed: config_95 }, - { name: 'sort/自定义排序(图例名称)', vseed: config_96 }, - { name: 'sort/自定义排序', vseed: config_97 }, - { name: 'totals/columnTotal', vseed: config_98 }, - { name: 'totals/rowTotal', vseed: config_99 }, - { name: 'totals/singleIndicator', vseed: config_100 } + { name: 'annotationArea/area-selector-months', vseed: config_5 }, + { name: 'annotationArea/bar-range-risk', vseed: config_6 }, + { name: 'annotationArea/bar', vseed: config_7 }, + { name: 'annotationArea/boxplot-range-risk', vseed: config_8 }, + { name: 'annotationArea/column-range-risk', vseed: config_9 }, + { name: 'annotationArea/column', vseed: config_10 }, + { name: 'annotationArea/histogram-range-window', vseed: config_11 }, + { name: 'annotationArea/line-range-risk', vseed: config_12 }, + { name: 'annotationArea/line', vseed: config_13 }, + { name: 'annotationArea/scatter-range-empty', vseed: config_14 }, + { name: 'annotationArea/scatter-range-rectangle', vseed: config_15 }, + { name: 'annotationArea/scatter-range-x', vseed: config_16 }, + { name: 'annotationArea/scatter-range-y', vseed: config_17 }, + { name: 'annotationHorizontalLine/fixed-y-value', vseed: config_18 }, + { name: 'annotationHorizontalLine/selector', vseed: config_19 }, + { name: 'annotationPoint/condition', vseed: config_20 }, + { name: 'annotationPoint/partial-datum', vseed: config_21 }, + { name: 'annotationPoint/value-point', vseed: config_22 }, + { name: 'annotationVerticalLine/fixed-x-value', vseed: config_23 }, + { name: 'annotationVerticalLine/selector', vseed: config_24 }, + { name: 'barStyle/barstyle-array', vseed: config_25 }, + { name: 'barStyle/dimension-condition', vseed: config_26 }, + { name: 'barStyle/partial-datum', vseed: config_27 }, + { name: 'barStyle/value', vseed: config_28 }, + { name: 'bodyCellStyle/pivotTable-background-scale-with-total', vseed: config_29 }, + { name: 'bodyCellStyle/pivotTable-background-scale', vseed: config_30 }, + { name: 'bodyCellStyle/table-background-scale', vseed: config_31 }, + { name: 'bodyCellStyle/table-background-with-total', vseed: config_32 }, + { name: 'bodyCellStyle/表格条件样式---全局样式', vseed: config_33 }, + { name: 'bodyCellStyle/表格条件样式---多个条件', vseed: config_34 }, + { name: 'bodyCellStyle/表格条件样式---根据度量值设置', vseed: config_35 }, + { name: 'bodyCellStyle/表格条件样式', vseed: config_36 }, + { name: 'bodyCellStyle/透视表条件样式---全局样式', vseed: config_37 }, + { name: 'bodyCellStyle/透视表条件样式---根据度量值设置', vseed: config_38 }, + { name: 'bodyCellStyle/透视表条件样式---符合条件', vseed: config_39 }, + { name: 'brush/enable', vseed: config_40 }, + { name: 'brush/removeonclick', vseed: config_41 }, + { name: 'color/colormapping', vseed: config_42 }, + { name: 'color/colorscheme', vseed: config_43 }, + { name: 'dataset/单指标-单维度', vseed: config_44 }, + { name: 'dataset/单指标-多维度', vseed: config_45 }, + { name: 'dataset/单指标-零维度', vseed: config_46 }, + { name: 'dataset/多指标-单维度', vseed: config_47 }, + { name: 'dataset/多指标-多维度', vseed: config_48 }, + { name: 'dataset/多指标-零维度', vseed: config_49 }, + { name: 'dataset/数据维度与指标配置', vseed: config_50 }, + { name: 'dataset/自动选择', vseed: config_51 }, + { name: 'dimensions/列维度', vseed: config_52 }, + { name: 'dimensions/普通维度', vseed: config_53 }, + { name: 'dimensions/行维度', vseed: config_54 }, + { name: 'dimensions/透视维度', vseed: config_55 }, + { name: 'dynamicFilter/annotation-horizontal-line', vseed: config_56 }, + { name: 'dynamicFilter/annotation-point', vseed: config_57 }, + { name: 'dynamicFilter/annotation-vertical-line', vseed: config_58 }, + { name: 'dynamicFilter/area-line-point-style', vseed: config_59 }, + { name: 'dynamicFilter/column-bar-style', vseed: config_60 }, + { name: 'dynamicFilter/pivot-table-cell-style', vseed: config_61 }, + { name: 'dynamicFilter/table-dynamic-cell-style', vseed: config_62 }, + { name: 'formatter/base-dim-formatter-bar', vseed: config_63 }, + { name: 'formatter/base-dim-formatter-dualAxis', vseed: config_64 }, + { name: 'formatter/base-dim-formatter-heatmap', vseed: config_65 }, + { name: 'formatter/base-dim-formatter-pie', vseed: config_66 }, + { name: 'formatter/base-dim-formatter-pivotChart', vseed: config_67 }, + { name: 'formatter/base-dim-formatter-pivotTable', vseed: config_68 }, + { name: 'formatter/base-dim-formatter-radar', vseed: config_69 }, + { name: 'formatter/base-dim-formatter-scatter', vseed: config_70 }, + { name: 'formatter/base-dim-formatter-table', vseed: config_71 }, + { name: 'formatter/base-dim-formatter-treemap', vseed: config_72 }, + { name: 'i18n/en-us', vseed: config_73 }, + { name: 'i18n/zh-cn', vseed: config_74 }, + { name: 'label/enable', vseed: config_75 }, + { name: 'legend/border', vseed: config_76 }, + { name: 'legend/enable', vseed: config_77 }, + { name: 'legend/labelcolor', vseed: config_78 }, + { name: 'legend/labelfontsize', vseed: config_79 }, + { name: 'legend/labelfontweight', vseed: config_80 }, + { name: 'legend/maxsize', vseed: config_81 }, + { name: 'legend/position', vseed: config_82 }, + { name: 'measures/指标组', vseed: config_83 }, + { name: 'numFormat/autoformat', vseed: config_84 }, + { name: 'numFormat/fractiondigits', vseed: config_85 }, + { name: 'numFormat/ratio-&-symbol', vseed: config_86 }, + { name: 'numFormat/roundingmode', vseed: config_87 }, + { name: 'numFormat/roundingpriority', vseed: config_88 }, + { name: 'numFormat/significantdigits', vseed: config_89 }, + { name: 'numFormat/suffix-&-prefix', vseed: config_90 }, + { name: 'numFormat/thousandseparator', vseed: config_91 }, + { name: 'numFormat/type', vseed: config_92 }, + { name: 'pointStyle/dimension-condition', vseed: config_93 }, + { name: 'pointStyle/measure-condition', vseed: config_94 }, + { name: 'pointStyle/partial-datum', vseed: config_95 }, + { name: 'pointStyle/point-array', vseed: config_96 }, + { name: 'pointStyle/value', vseed: config_97 }, + { name: 'polynomial/column-示例', vseed: config_98 }, + { name: 'polynomial/scatter-示例', vseed: config_99 }, + { name: 'sort/图例自身排序', vseed: config_100 }, + { name: 'sort/指标排序-1', vseed: config_101 }, + { name: 'sort/指标排序', vseed: config_102 }, + { name: 'sort/维度排序-1', vseed: config_103 }, + { name: 'sort/维度排序', vseed: config_104 }, + { name: 'sort/自定义排序(图例id)', vseed: config_105 }, + { name: 'sort/自定义排序(图例名称)', vseed: config_106 }, + { name: 'sort/自定义排序', vseed: config_107 }, + { name: 'totals/columnTotal', vseed: config_108 }, + { name: 'totals/rowTotal', vseed: config_109 }, + { name: 'totals/singleIndicator', vseed: config_110 } ] describe('features', () => { diff --git a/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts b/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts new file mode 100644 index 0000000000..7dc49b159d --- /dev/null +++ b/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts @@ -0,0 +1,371 @@ +import { beforeAll, describe, expect, test } from 'vitest' +import type { ICartesianSeries, ILineChartSpec } from '@visactor/vchart' +import { AxisBoundaryEnum, Builder, registerAll, zAnnotationArea } from '@visactor/vseed' +import type { AnnotationArea, AnnotationAreaRange, Datum, VSeed } from '@visactor/vseed' + +const dataset = [ + { channel: 'A', cost: 10, conversion: 0.1 }, + { channel: 'B', cost: 60, conversion: 0.3 }, + { channel: 'C', cost: 130, conversion: 0.6 }, +] + +const scatter = (annotationArea?: unknown): VSeed => + ({ + chartType: 'scatter', + dataset, + dimensions: [{ id: 'channel', encoding: 'color' }], + measures: [ + { id: 'cost', encoding: 'xAxis' }, + { id: 'conversion', encoding: 'yAxis' }, + ], + annotationArea, + }) as VSeed + +const series = (width = 300, height = 200, inverse = false) => { + const axis = (domain: number[], pixels: number[]) => ({ + getAxisType: () => 'linear', + getScale: () => ({ domain: () => domain }), + dataToPosition: ([value]: number[]) => + pixels[0] + ((value - domain[0]) / (domain[1] - domain[0])) * (pixels[1] - pixels[0]), + }) + return { + getXAxisHelper: () => axis([0, 150], inverse ? [width, 0] : [0, width]), + getYAxisHelper: () => axis([0, 1], inverse ? [0, height] : [height, 0]), + getRegion: () => ({ getLayoutRect: () => ({ width, height }) }), + } as unknown as ICartesianSeries +} + +const getPositions = (vseed: VSeed) => { + const spec = Builder.from(vseed).build() as ILineChartSpec + const marks = spec.markArea as Array<{ positions: (data: Datum[], series: ICartesianSeries) => unknown }> + return marks[0].positions +} + +const rectangle = (left: number, top: number, right: number, bottom: number) => [ + { x: left, y: top }, + { x: right, y: top }, + { x: right, y: bottom }, + { x: left, y: bottom }, +] + +describe('annotationArea coordinate ranges', () => { + beforeAll(registerAll) + + test('exports the same boundary values accepted by JSON DSL', () => { + expect(AxisBoundaryEnum).toEqual({ Min: 'axisMin', Max: 'axisMax' }) + }) + + test('preserves ranges when parsing public annotation schemas', () => { + const range = { x: { min: 0, max: 100 }, y: { min: 0.2, max: 0.4 } } + expect(zAnnotationArea.parse({ range }).range).toEqual(range) + }) + + test('treats an undefined optional range as absent in selector mode', () => { + const annotation: AnnotationArea = { + selector: { field: 'channel', value: ['B'] }, + range: undefined, + } + expect(zAnnotationArea.safeParse(annotation).success).toBe(true) + expect(() => Builder.from(scatter(annotation)).build()).not.toThrow() + }) + + test.each([ + ['x-only window', { x: { min: 0, max: 100 } }, rectangle(0, 0, 200, 200)], + ['y-only target band', { y: { min: 0.2, max: 0.4 } }, rectangle(0, 120, 300, 160)], + ['two-axis rectangle', { x: { min: 0, max: 100 }, y: { min: 0.2, max: 0.4 } }, rectangle(0, 120, 200, 160)], + ])('draws the exact %s independently of data points', (_name, range, expected) => { + const positions = getPositions(scatter({ range })) + expect(positions([], series())).toEqual(expected) + }) + + test('does not move boundaries when data order or point membership changes', () => { + const positions = getPositions(scatter({ range: { x: { min: 20, max: 100 } } })) + expect(positions([...dataset].reverse(), series())).toEqual(positions([], series())) + }) + + test('axis sentinels use final scale limits instead of dataset extrema', () => { + const positions = getPositions(scatter({ range: { y: { min: 0.4, max: 'axisMax' } } })) + expect(positions(dataset, series())).toEqual(rectangle(0, 0, 300, 120)) + }) + + test('axisMin supports a lower band on a reversed axis', () => { + const positions = getPositions(scatter({ range: { y: { min: 'axisMin', max: 0.4 } } })) + expect(positions([], series(300, 200, true))).toEqual(rectangle(0, 0, 300, 80)) + }) + + test('recomputes both numeric and full-span boundaries after resize', () => { + const positions = getPositions(scatter({ range: { x: { min: 30, max: 90 } } })) + expect(positions([], series(600, 400))).toEqual(rectangle(120, 0, 360, 400)) + }) + + test('clips a partially visible rectangle to the final axis domain', () => { + const positions = getPositions(scatter({ range: { x: { min: -20, max: 60 }, y: { min: 0.5, max: 2 } } })) + expect(positions([], series())).toEqual(rectangle(0, 0, 120, 100)) + }) + + test.each([{ x: { min: 150, max: 200 } }, { y: { min: 2, max: 'axisMax' } }, { y: { min: 'axisMin', max: -1 } }])( + 'omits ranges with no visible intersection: %j', + (range) => { + expect(getPositions(scatter({ range }))([], series())).toEqual([]) + }, + ) + + test('pixel padding does not change numeric boundaries', () => { + expect(getPositions(scatter({ range: { x: { min: 30, max: 90 } }, outerPadding: 100 }))([], series())).toEqual( + rectangle(60, 0, 180, 200), + ) + }) + + test.each([ + ['missing selector and range', {}], + ['undefined selector', { selector: undefined }], + ['null selector', { selector: null }], + ['empty range', { range: {} }], + ['missing min', { range: { y: { max: 20 } } }], + ['missing max', { range: { y: { min: 10 } } }], + ['equal boundaries', { range: { y: { min: 10, max: 10 } } }], + ['reversed boundaries', { range: { y: { min: 20, max: 10 } } }], + ['infinite boundary', { range: { y: { min: 10, max: Infinity } } }], + ['NaN boundary', { range: { y: { min: NaN, max: 20 } } }], + ['wrong sentinel', { range: { y: { min: 'axisMax', max: 20 } } }], + ['null range', { range: null }], + ['unknown axis', { range: { z: { min: 1, max: 2 } } }], + ['both modes', { selector: { field: 'channel', operator: 'in', value: ['A'] }, range: { y: { min: 0, max: 1 } } }], + ])('rejects %s in schema and Builder', (_name, annotationArea) => { + expect(zAnnotationArea.safeParse(annotationArea).success).toBe(false) + expect(() => Builder.from(scatter(annotationArea)).build()).toThrow(/annotationArea/) + }) + + test('reports an empty entry in an annotationArea array', () => { + const annotations = [{ selector: { field: 'channel', value: ['B'] } }, {}] + expect(() => Builder.from(scatter(annotations)).build()).toThrow(/annotationArea\[1\].*selector or range/) + }) + + test.each([ + 'line', + 'area', + 'areaPercent', + 'column', + 'columnParallel', + 'columnPercent', + 'bar', + 'barParallel', + 'barPercent', + 'boxPlot', + ])('supports numeric-axis bands on %s', (chartType) => { + const horizontal = chartType.startsWith('bar') + const spec = Builder.from({ + chartType, + dataset, + dimensions: [{ id: 'channel' }], + measures: [{ id: 'cost' }], + annotationArea: { range: horizontal ? { x: { min: 20, max: 100 } } : { y: { min: 0.2, max: 0.4 } } }, + } as VSeed).build() as ILineChartSpec + expect(spec.markArea).toHaveLength(1) + }) + + test('draws a box-plot threshold across all categories on its numeric y axis', () => { + const positions = getPositions({ + chartType: 'boxPlot', + dataset, + dimensions: [{ id: 'channel' }], + measures: [{ id: 'cost' }], + annotationArea: { range: { y: { min: 0.2, max: 0.4 } } }, + } as VSeed) + expect(positions([], series())).toEqual(rectangle(0, 120, 300, 160)) + }) + + test('supports both linear axes on a histogram', () => { + const positions = getPositions({ + chartType: 'histogram', + dataset: [{ value: 1 }, { value: 3 }, { value: 5 }, { value: 8 }, { value: 10 }], + measures: [{ id: 'value' }], + annotationArea: { range: { x: { min: 2, max: 8 }, y: { min: 0.2, max: 0.4 } } }, + } as VSeed) + expect(positions([], series())).toEqual(rectangle(4, 120, 16, 160)) + }) + + test('interprets a percentage histogram threshold as a raw fraction', () => { + const positions = getPositions({ + chartType: 'histogram', + dataset: [{ value: 1 }, { value: 1 }, { value: 3 }, { value: 5 }, { value: 8 }], + measures: [{ id: 'value' }], + binValueType: 'percentage', + xAxis: { min: 0, max: 10 }, + annotationArea: { range: { y: { min: 0.2, max: AxisBoundaryEnum.Max } } }, + } as VSeed) + expect(positions([], series())).toEqual(rectangle(0, 0, 300, 160)) + }) + + test('keeps one numeric region across histogram color groups', () => { + const positions = getPositions({ + chartType: 'histogram', + dataset: [ + { group: 'A', value: 1 }, + { group: 'A', value: 3 }, + { group: 'B', value: 5 }, + { group: 'B', value: 8 }, + ], + dimensions: [{ id: 'group', encoding: 'color' }], + measures: [{ id: 'value' }], + legend: { enable: true }, + annotationArea: { range: { x: { min: 2, max: 7 } } }, + } as VSeed) + expect(positions([], series())).toEqual(rectangle(4, 0, 14, 200)) + }) + + test('keeps histogram range geometry exact with custom marker styling', () => { + const spec = Builder.from({ + chartType: 'histogram', + dataset: [{ value: 1 }, { value: 3 }, { value: 5 }, { value: 8 }], + measures: [{ id: 'value' }], + annotationArea: { + range: { x: { min: 2, max: 7 } }, + text: '重点观察', + textPosition: 'bottomRight', + textAlign: 'right', + textBaseline: 'bottom', + textColor: '#111111', + textFontSize: 14, + textBackgroundVisible: false, + areaColor: '#ef4444', + areaColorOpacity: 0.12, + areaBorderColor: '#991b1b', + areaBorderWidth: 2, + outerPadding: 100, + }, + } as VSeed).build() as ILineChartSpec + expect(spec.markArea).toMatchObject([ + { + label: { + position: 'insideBottomRight', + text: '重点观察', + style: { textAlign: 'right', textBaseline: 'bottom', fill: '#111111', fontSize: 14 }, + labelBackground: { visible: false }, + }, + area: { style: { fill: '#ef4444', fillOpacity: 0.12, stroke: '#991b1b', lineWidth: 2 } }, + }, + ]) + const [mark] = spec.markArea as Array<{ positions: (data: Datum[], series: ICartesianSeries) => unknown }> + expect(mark.positions([], series())).toEqual(rectangle(4, 0, 14, 200)) + }) + + test('rejects repeated histogram ranges in pivot panels', () => { + expect(() => + Builder.from({ + chartType: 'histogram', + dataset: [{ group: 'A', value: 1 }, { group: 'B', value: 2 }], + dimensions: [{ id: 'group', encoding: 'row' }], + measures: [{ id: 'value' }], + annotationArea: { range: { x: { min: 0, max: 2 } } }, + } as VSeed).build(), + ).toThrow(/annotationArea.*range.*pivot/i) + }) + + test('rejects a histogram range on a logarithmic x axis', () => { + expect(() => + Builder.from({ + chartType: 'histogram', + dataset: [{ value: 1 }, { value: 3 }, { value: 5 }], + measures: [{ id: 'value' }], + xAxis: { log: true }, + annotationArea: { range: { x: { min: 1, max: 5 } } }, + } as VSeed).build(), + ).toThrow(/annotationArea.*x.*linear/) + }) + + test('rejects a box-plot range on its category x axis', () => { + expect(() => + Builder.from({ + chartType: 'boxPlot', + dataset, + dimensions: [{ id: 'channel' }], + measures: [{ id: 'cost' }], + annotationArea: { range: { x: { min: 0, max: 1 } } }, + } as VSeed).build(), + ).toThrow(/annotationArea.*x.*linear/) + }) + + test('rejects a category-axis range instead of treating numbers as category indices', () => { + expect(() => + Builder.from({ ...scatter({ range: { x: { min: 0, max: 1 } } }), chartType: 'line' } as VSeed).build(), + ).toThrow(/annotationArea.*x.*linear/) + }) + + test('rejects logarithmic ranges', () => { + expect(() => + Builder.from({ ...scatter({ range: { y: { min: 0.1, max: 1 } } }), yAxis: { log: true } } as VSeed).build(), + ).toThrow(/annotationArea.*y.*linear/) + }) + + test.each(['dualAxis', 'pie', 'raceScatter'])('rejects unsupported chart type %s', (chartType) => { + expect(() => + Builder.from({ ...scatter({ range: { y: { min: 0, max: 1 } } }), chartType } as VSeed).build(), + ).toThrow(/annotationArea.*range.*support/) + }) + + test('diagnoses facet ranges before silently repeating them across panels', () => { + const vseed = scatter({ range: { y: { min: 0, max: 1 } } }) + vseed.dimensions = [{ id: 'channel', encoding: 'row' }] + expect(() => Builder.from(vseed).build()).toThrow(/annotationArea.*range.*pivot/i) + }) + + test('keeps style fields on the annotation and shares their rendering across modes', () => { + const spec = Builder.from( + scatter({ range: { y: { min: 0, max: 1 } }, text: 'Target', areaColor: '#ef4444', areaColorOpacity: 0.12 }), + ).build() as ILineChartSpec + expect(spec.markArea).toMatchObject([ + { label: { text: 'Target' }, area: { style: { fill: '#ef4444', fillOpacity: 0.12 } } }, + ]) + }) + + test('accepts a range typed with the public enum', () => { + const range: AnnotationAreaRange = { y: { min: 0.2, max: AxisBoundaryEnum.Max } } + const annotation: AnnotationArea = { range } + expect(zAnnotationArea.safeParse(annotation).success).toBe(true) + }) + + test.each(['line', 'area', 'column', 'bar'])('preserves %s selector band geometry', (chartType) => { + const horizontal = chartType === 'bar' + const builder = Builder.from({ + chartType, + dataset, + dimensions: [{ id: 'channel' }], + measures: [{ id: 'cost' }], + annotationArea: { selector: { field: 'channel', operator: 'in', value: ['B', 'C'] } }, + } as VSeed) + const advanced = builder.buildAdvanced()! + const spec = builder.buildSpec(advanced) as ILineChartSpec + const [mark] = spec.markArea as Array<{ positions: (data: Datum[], series: ICartesianSeries) => unknown }> + const band = { getBandwidth: () => 40 } + const context = { + ...series(), + fieldX: ['channel'], + fieldY: ['channel'], + _scaleConfig: { bandPosition: 0.5 }, + getXAxisHelper: () => (horizontal ? {} : band), + getYAxisHelper: () => (horizontal ? band : {}), + dataToPosition: (datum: Datum) => ({ x: datum.channel === 'B' ? 50 : 90, y: datum.channel === 'B' ? 50 : 90 }), + } as unknown as ICartesianSeries + const expected = horizontal + ? rectangle(0, 26, 300, 114) + : chartType === 'column' + ? rectangle(26, 0, 114, 200) + : rectangle(46, 0, 94, 200) + expect(mark.positions(advanced.dataset.flat(), context)).toEqual(expected) + }) + + test('omits geometry until the plot has a finite positive size', () => { + const positions = getPositions(scatter({ range: { y: { min: 0, max: 1 } } })) + expect([positions([], series(0, 200)), positions([], series(300, NaN))]).toEqual([[], []]) + }) + + test('omits geometry if a numeric axis no longer has a finite domain', () => { + const positions = getPositions(scatter({ range: { y: { min: 0, max: 1 } } })) + const context = { + ...series(), + getYAxisHelper: () => ({ getScale: () => ({ domain: () => [0, NaN] }) }), + } as unknown as ICartesianSeries + expect(positions([], context)).toEqual([]) + }) +}) diff --git a/packages/vseed/tests/unit/builder/annotationAreaRangeRender.test.ts b/packages/vseed/tests/unit/builder/annotationAreaRangeRender.test.ts new file mode 100644 index 0000000000..1db4df96ee --- /dev/null +++ b/packages/vseed/tests/unit/builder/annotationAreaRangeRender.test.ts @@ -0,0 +1,151 @@ +import { afterEach, beforeAll, describe, expect, test } from 'vitest' +import VChart, { type ICartesianSeries, type IScatterChartSpec, type ISpec } from '@visactor/vchart' +import { Builder, registerAll } from '@visactor/vseed' +import type { AnnotationArea, Scatter, VSeed } from '@visactor/vseed' + +const charts: VChart[] = [] +const seed = (annotationArea?: AnnotationArea): Scatter => ({ + chartType: 'scatter', + dataset: [ + { channel: 'A', cost: 10, conversion: 0.1 }, + { channel: 'B', cost: 60, conversion: 0.3 }, + { channel: 'C', cost: 130, conversion: 0.6 }, + ], + dimensions: [{ id: 'channel', encoding: 'color' }], + measures: [ + { id: 'cost', encoding: 'xAxis' }, + { id: 'conversion', encoding: 'yAxis' }, + ], + xAxis: { min: 0, max: 150 }, + yAxis: { min: 0, max: 1 }, + annotationArea, +}) + +const specFor = (annotationArea?: AnnotationArea, inverse = false): IScatterChartSpec => ({ + ...(Builder.from({ ...seed(annotationArea), yAxis: { min: 0, max: 1, inverse } }).build() as IScatterChartSpec), + width: 600, + height: 400, + autoFit: false, + animation: false, +}) + +const render = (spec: ISpec) => { + const dom = document.createElement('div') + document.body.appendChild(dom) + const chart = new VChart(spec, { dom }) + charts.push(chart) + chart.renderSync() + return chart +} + +type RenderedMarker = { _markerComponent: { attribute: { points: Array<{ x: number; y: number }> } } } +const points = (chart: VChart) => + (chart.getChart().getComponentsByKey('markArea')[0] as unknown as RenderedMarker)._markerComponent.attribute.points + +describe('annotationArea rendered coordinate ranges', () => { + beforeAll(registerAll) + afterEach(() => { + charts.splice(0).forEach((chart) => chart.release()) + document.body.replaceChildren() + }) + + test('renders exact coordinates and recomputes them on resize', async () => { + const chart = render(specFor({ range: { x: { min: 0, max: 100 }, y: { min: 0.2, max: 0.4 } } })) + const verify = () => { + const relative = chart.getChart().getAllSeries()[0] as ICartesianSeries + const offset = relative.getRegion().getLayoutStartPoint() + const x0 = relative.getXAxisHelper().dataToPosition([0]) + offset.x + const x1 = relative.getXAxisHelper().dataToPosition([100]) + offset.x + const y0 = relative.getYAxisHelper().dataToPosition([0.4]) + offset.y + const y1 = relative.getYAxisHelper().dataToPosition([0.2]) + offset.y + expect(points(chart)).toEqual([ + { x: x0, y: y0 }, + { x: x1, y: y0 }, + { x: x1, y: y1 }, + { x: x0, y: y1 }, + ]) + } + verify() + await chart.resize(900, 500) + verify() + }) + + test('updates from no annotation to a range and removes the marker again', () => { + const chart = render(specFor()) + chart.updateSpecSync(specFor({ range: { y: { min: 0.2, max: 'axisMax' } }, text: 'Target' })) + expect(points(chart)).toHaveLength(4) + chart.updateSpecSync(specFor()) + expect(chart.getChart().getComponentsByKey('markArea')).toHaveLength(0) + }) + + test('clears geometry when a visible marker moves entirely outside the axis', () => { + const chart = render(specFor({ range: { y: { min: 0.2, max: 0.4 } } })) + chart.updateSpecSync(specFor({ range: { y: { min: 2, max: 3 } } })) + expect(points(chart)).toEqual([]) + }) + + test('renders an empty-data target zone on an inverse axis using its current bounds', () => { + const chart = render(specFor({ range: { y: { min: 0.7, max: 'axisMax' } } }, true)) + const relative = chart.getChart().getAllSeries()[0] as ICartesianSeries + const origin = relative.getRegion().getLayoutStartPoint() + const ys = points(chart).map((point) => point.y - origin.y) + expect([Math.min(...ys), Math.max(...ys)]).toEqual([ + relative.getYAxisHelper().dataToPosition([0.7]), + relative.getYAxisHelper().dataToPosition([1]), + ]) + }) + + test('renders a box-plot threshold band across the full category axis', () => { + const spec = Builder.from({ + chartType: 'boxPlot', + dataset: [ + { group: 'A', value: 4 }, + { group: 'A', value: 8 }, + { group: 'A', value: 12 }, + { group: 'B', value: 9 }, + { group: 'B', value: 15 }, + { group: 'B', value: 20 }, + ], + dimensions: [{ id: 'group', encoding: 'xAxis' }], + measures: [{ id: 'value', encoding: 'yAxis' }], + annotationArea: { range: { y: { min: 10, max: 'axisMax' } } }, + } as VSeed).build() as ISpec + const chart = render({ ...spec, width: 600, height: 400, autoFit: false, animation: false }) + const relative = chart.getChart().getAllSeries()[0] as ICartesianSeries + const region = relative.getRegion() + const origin = region.getLayoutStartPoint() + const { width } = region.getLayoutRect() + const yAxis = relative.getYAxisHelper() + const axisMax = Math.max(...(yAxis.getScale(0).domain() as number[])) + const markerPoints = points(chart) + expect(markerPoints).toEqual([ + { x: origin.x, y: yAxis.dataToPosition([axisMax]) + origin.y }, + { x: origin.x + width, y: yAxis.dataToPosition([axisMax]) + origin.y }, + { x: origin.x + width, y: yAxis.dataToPosition([10]) + origin.y }, + { x: origin.x, y: yAxis.dataToPosition([10]) + origin.y }, + ]) + }) + + test('renders a histogram window against its numeric x axis', () => { + const spec = Builder.from({ + chartType: 'histogram', + dataset: [1, 1, 2, 3, 4, 5, 7, 8, 9, 10].map((value) => ({ value })), + measures: [{ id: 'value' }], + annotationArea: { range: { x: { min: 3, max: 7 } } }, + } as VSeed).build() as ISpec + const chart = render({ ...spec, width: 600, height: 400, autoFit: false, animation: false }) + const relative = chart.getChart().getAllSeries()[0] as ICartesianSeries + const region = relative.getRegion() + const origin = region.getLayoutStartPoint() + const { height } = region.getLayoutRect() + const xAxis = relative.getXAxisHelper() + const left = xAxis.dataToPosition([3]) + origin.x + const right = xAxis.dataToPosition([7]) + origin.x + expect(points(chart)).toEqual([ + { x: left, y: origin.y }, + { x: right, y: origin.y }, + { x: right, y: origin.y + height }, + { x: left, y: origin.y + height }, + ]) + }) +}) diff --git a/packages/vseed/tests/unit/scripts/buildDocs.test.ts b/packages/vseed/tests/unit/scripts/buildDocs.test.ts new file mode 100644 index 0000000000..497ea0585d --- /dev/null +++ b/packages/vseed/tests/unit/scripts/buildDocs.test.ts @@ -0,0 +1,36 @@ +import { describe, expect, it } from 'vitest' +import { execFileSync } from 'node:child_process' +import { dirname, resolve } from 'node:path' +import { fileURLToPath } from 'node:url' + +describe('union property documentation', () => { + it('documents selectable fields instead of their mutually exclusive never branches', () => { + const fixture = `interface Chart { + annotation: { selector: string; range?: never } | { + selector?: never + range: { x: number; y?: number } | { x?: number; y: number } + } + }` + const markdown = execFileSync( + process.execPath, + [ + '--input-type=module', + '-e', + ` + import { DocsGenerator } from './scripts/build-docs.mjs' + const generator = new DocsGenerator({}) + const file = generator.project.createSourceFile('annotation-docs-fixture.ts', ${JSON.stringify(fixture)}) + const property = file.getInterfaceOrThrow('Chart').getPropertyOrThrow('annotation') + process.stdout.write(generator.generateSubProperties(property, 2, new Set())) + `, + ], + { encoding: 'utf8', cwd: resolve(dirname(fileURLToPath(import.meta.url)), '../../..') }, + ) + + expect(markdown).toContain('### selector\n\n**Type:** `string | undefined`') + expect(markdown).toMatch(/### range\n\n\*\*Type:\*\* `[^\n]*\| undefined`/) + expect(markdown).toContain('#### x\n\n**Type:** `number | undefined`') + expect(markdown).toContain('#### y\n\n**Type:** `number | undefined`') + expect(markdown).not.toContain('**Type:** `undefined`') + }) +}) diff --git a/packages/vseed/vite.config.ts b/packages/vseed/vite.config.ts index 5b60f50863..aa23a46097 100644 --- a/packages/vseed/vite.config.ts +++ b/packages/vseed/vite.config.ts @@ -20,10 +20,10 @@ export default defineConfig(({ mode }) => ({ // V8 branch counts vary slightly between runs; use verified floors. thresholds: mode === 'unit' - ? { statements: 73.01, lines: 73.01, branches: 70.5, functions: 72.08 } + ? { statements: 78.7, lines: 78.7, branches: 71.2, functions: 76.2 } : mode === 'integration' ? undefined - : { statements: 89.13, lines: 89.13, branches: 78.7, functions: 80.67 }, + : { statements: 89.69, lines: 89.69, branches: 78.9, functions: 81.3 }, }, globals: true, environment: 'jsdom', From dc96091d155a9866b723624fc8ec4f619cccc36a Mon Sep 17 00:00:00 2001 From: ZJU_czx <952370295@qq.com> Date: Thu, 24 Sep 2026 14:32:37 +0800 Subject: [PATCH 2/6] chore: prepare 0.6.1 release for area annotations Record the VSeed range-annotation feature as a patch Changeset so the fixed VSeed, VBI, and VQuery release group can advance together. --- .changeset/vseed-area-range-annotation.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/vseed-area-range-annotation.md diff --git a/.changeset/vseed-area-range-annotation.md b/.changeset/vseed-area-range-annotation.md new file mode 100644 index 0000000000..dd40b77766 --- /dev/null +++ b/.changeset/vseed-area-range-annotation.md @@ -0,0 +1,5 @@ +--- +'@visactor/vseed': patch +--- + +Add coordinate-range area annotations for scatter, line, area, column, bar, box plot, and histogram charts, with explicit axis-boundary values. From 7f1a1d25babd772ab7cdc9fcc8a9ccd1eed6fe59 Mon Sep 17 00:00:00 2001 From: ZJU_czx <952370295@qq.com> Date: Thu, 8 Oct 2026 11:07:20 +0800 Subject: [PATCH 3/6] fix(vseed): preserve selector area bands with linear axis helpers Why: - Newer VChart exposes getBandwidth on linear axes but returns undefined, producing invalid area positions. What: - Treat only finite bandwidth values as categorical-axis evidence. - Cover the horizontal bar regression and raise the unit branch coverage floor. --- .../pipes/annotation/annotationAreaBand.ts | 15 ++++++------ .../unit/builder/annotationAreaRange.test.ts | 24 +++++++++++++++++++ packages/vseed/vite.config.ts | 2 +- 3 files changed, 32 insertions(+), 9 deletions(-) diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts index 2682f8856b..9d4658dd0c 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts @@ -82,21 +82,21 @@ export const annotationAreaBand: VChartSpecPipe = (spec, context) => { const bandPosition = context?._scaleConfig?.bandPosition || 0 const yAxisHelper = context.getYAxisHelper() as unknown as { - getBandwidth: (depth?: number) => number + getBandwidth?: (depth?: number) => number | undefined getScale: () => { range: () => number[] } } const xAxisHelper = context.getXAxisHelper() as unknown as { - getBandwidth: (depth?: number) => number + getBandwidth?: (depth?: number) => number | undefined getScale: () => { range: () => number[] } } - if (typeof xAxisHelper?.getBandwidth === 'function') { - const depth = context.fieldX.length ?? 0 - const xBandWidth = xAxisHelper?.getBandwidth?.(depth - 1) + // Linear axes may expose getBandwidth but return undefined; only a finite width identifies a band axis. + const xBandWidth = xAxisHelper?.getBandwidth?.((context.fieldX.length ?? 0) - 1) + if (typeof xBandWidth === 'number' && Number.isFinite(xBandWidth)) { const regionRect = context.getRegion().getLayoutRect() const startX = Math.min(...xyList.map((item) => item.x)) - (outerPadding || 4) const endX = Math.max(...xyList.map((item) => item.x)) + (outerPadding || 4) @@ -134,9 +134,8 @@ export const annotationAreaBand: VChartSpecPipe = (spec, context) => { ] } - if (typeof yAxisHelper?.getBandwidth === 'function') { - const depth = context.fieldY.length ?? 0 - const yBandWidth = yAxisHelper?.getBandwidth?.(depth - 1) + const yBandWidth = yAxisHelper?.getBandwidth?.((context.fieldY.length ?? 0) - 1) + if (typeof yBandWidth === 'number' && Number.isFinite(yBandWidth)) { const regionRect = context.getRegion().getLayoutRect() const startY = Math.min(...xyList.map((item) => item.y)) - (outerPadding || 4) diff --git a/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts b/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts index 7dc49b159d..48f78b4c21 100644 --- a/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts +++ b/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts @@ -355,6 +355,30 @@ describe('annotationArea coordinate ranges', () => { expect(mark.positions(advanced.dataset.flat(), context)).toEqual(expected) }) + test('uses the categorical y bandwidth when the numeric x helper returns undefined', () => { + const builder = Builder.from({ + chartType: 'bar', + dataset, + dimensions: [{ id: 'channel' }], + measures: [{ id: 'cost' }], + annotationArea: { selector: { field: 'channel', operator: 'in', value: ['B', 'C'] } }, + } as VSeed) + const advanced = builder.buildAdvanced()! + const spec = builder.buildSpec(advanced) as ILineChartSpec + const [mark] = spec.markArea as Array<{ positions: (data: Datum[], series: ICartesianSeries) => unknown }> + const context = { + ...series(), + fieldX: ['channel'], + fieldY: ['channel'], + _scaleConfig: { bandPosition: 0.5 }, + getXAxisHelper: () => ({ getBandwidth: () => undefined }), + getYAxisHelper: () => ({ getBandwidth: () => 40 }), + dataToPosition: (datum: Datum) => ({ x: 50, y: datum.channel === 'B' ? 50 : 90 }), + } as unknown as ICartesianSeries + + expect(mark.positions(advanced.dataset.flat(), context)).toEqual(rectangle(0, 26, 300, 114)) + }) + test('omits geometry until the plot has a finite positive size', () => { const positions = getPositions(scatter({ range: { y: { min: 0, max: 1 } } })) expect([positions([], series(0, 200)), positions([], series(300, NaN))]).toEqual([[], []]) diff --git a/packages/vseed/vite.config.ts b/packages/vseed/vite.config.ts index aa23a46097..65a9511a12 100644 --- a/packages/vseed/vite.config.ts +++ b/packages/vseed/vite.config.ts @@ -20,7 +20,7 @@ export default defineConfig(({ mode }) => ({ // V8 branch counts vary slightly between runs; use verified floors. thresholds: mode === 'unit' - ? { statements: 78.7, lines: 78.7, branches: 71.2, functions: 76.2 } + ? { statements: 78.7, lines: 78.7, branches: 71.3, functions: 76.2 } : mode === 'integration' ? undefined : { statements: 89.69, lines: 89.69, branches: 78.9, functions: 81.3 }, From 1aebb23ed86d4bb111ab27517e12d2a8375c049f Mon Sep 17 00:00:00 2001 From: ZJU_czx <952370295@qq.com> Date: Thu, 8 Oct 2026 11:17:37 +0800 Subject: [PATCH 4/6] refactor: compose annotation range support per chart pipeline Why: - The shared annotation pipe depended on a chart-type allowlist, so adding a chart could silently miss range support. What: - Keep annotation parsing independent of chart type. - Compose unsupported-chart and pivot guards at the relevant chart pipelines, preserving existing validation behavior. --- .../pipeline/advanced/chart/pipeline/area.ts | 2 ++ .../advanced/chart/pipeline/areaPercent.ts | 2 ++ .../pipeline/advanced/chart/pipeline/bar.ts | 2 ++ .../advanced/chart/pipeline/barParallel.ts | 2 ++ .../advanced/chart/pipeline/barPercent.ts | 2 ++ .../advanced/chart/pipeline/boxplot.ts | 2 ++ .../advanced/chart/pipeline/circlePacking.ts | 2 ++ .../advanced/chart/pipeline/column.ts | 2 ++ .../advanced/chart/pipeline/columnParallel.ts | 2 ++ .../advanced/chart/pipeline/columnPercent.ts | 2 ++ .../pipeline/advanced/chart/pipeline/donut.ts | 2 ++ .../advanced/chart/pipeline/dualAxis.ts | 2 ++ .../advanced/chart/pipeline/funnel.ts | 2 ++ .../advanced/chart/pipeline/heatmap.ts | 2 ++ .../chart/pipeline/hierarchySankey.ts | 2 ++ .../advanced/chart/pipeline/histogram.ts | 2 ++ .../pipeline/advanced/chart/pipeline/line.ts | 2 ++ .../pipeline/advanced/chart/pipeline/pie.ts | 2 ++ .../advanced/chart/pipeline/raceBar.ts | 2 ++ .../advanced/chart/pipeline/raceColumn.ts | 2 ++ .../advanced/chart/pipeline/raceDonut.ts | 2 ++ .../advanced/chart/pipeline/raceLine.ts | 2 ++ .../advanced/chart/pipeline/racePie.ts | 2 ++ .../advanced/chart/pipeline/raceScatter.ts | 2 ++ .../pipeline/advanced/chart/pipeline/radar.ts | 2 ++ .../pipeline/advanced/chart/pipeline/rose.ts | 2 ++ .../advanced/chart/pipeline/roseParallel.ts | 2 ++ .../advanced/chart/pipeline/sankey.ts | 2 ++ .../advanced/chart/pipeline/scatter.ts | 2 ++ .../advanced/chart/pipeline/sunburst.ts | 2 ++ .../advanced/chart/pipeline/treeMap.ts | 2 ++ .../chart/pipes/annotation/annotation.ts | 22 ------------------- .../advanced/chart/pipes/annotation/index.ts | 1 + .../annotation/rejectAnnotationAreaRange.ts | 18 +++++++++++++++ 34 files changed, 81 insertions(+), 22 deletions(-) create mode 100644 packages/vseed/src/pipeline/advanced/chart/pipes/annotation/rejectAnnotationAreaRange.ts diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts index 72d205151b..ab232aed16 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts @@ -5,6 +5,7 @@ import { pivotAdapter, areaConfig, annotation, + rejectPivotAnnotationAreaRange, markStyle, sortXBandAxis, sortLegend, @@ -40,4 +41,5 @@ export const areaAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts index 41c7738a34..e63c130302 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts @@ -5,6 +5,7 @@ import { pivotAdapter, areaPercentConfig, annotation, + rejectPivotAnnotationAreaRange, markStyle, sortXBandAxis, sortLegend, @@ -40,4 +41,5 @@ export const areaPercentAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts index c9ff24f45b..3bd1e2cbdd 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts @@ -7,6 +7,7 @@ import { barConfig, markStyle, annotation, + rejectPivotAnnotationAreaRange, sortYBandAxis, sortLegend, reshapeWithEncoding, @@ -40,4 +41,5 @@ export const barAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts index 6d448fe646..6b5034e6de 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts @@ -7,6 +7,7 @@ import { barParallelConfig, markStyle, annotation, + rejectPivotAnnotationAreaRange, sortYBandAxis, sortLegend, reshapeWithEncoding, @@ -40,4 +41,5 @@ export const barParallelAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts index b6c5ad3bf9..b288bacc82 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts @@ -7,6 +7,7 @@ import { barPercentConfig, markStyle, annotation, + rejectPivotAnnotationAreaRange, sortYBandAxis, sortLegend, reshapeWithEncoding, @@ -40,4 +41,5 @@ export const barPercentAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts index 334a88770f..f3aa5c6796 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts @@ -5,6 +5,7 @@ import { pivotAdapter, markStyle, annotation, + rejectPivotAnnotationAreaRange, sortLegend, pivotReshapeWithBoxplotEncoding, buildMeasures, @@ -42,4 +43,5 @@ export const boxplotAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts index 18085a2e81..28ddc5bc16 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, encodingForHierarchy, @@ -34,4 +35,5 @@ export const circlePackingAdvancedPipeline: AdvancedPipeline = [ circlePackingConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts index 6558be812e..9c817b665f 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts @@ -6,6 +6,7 @@ import { columnConfig, markStyle, annotation, + rejectPivotAnnotationAreaRange, sortXBandAxis, sortLegend, encodingForColumn, @@ -41,5 +42,6 @@ export const columnAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts index 4949a8e82f..1930bfc835 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts @@ -8,6 +8,7 @@ import { columnParallelConfig, markStyle, annotation, + rejectPivotAnnotationAreaRange, sortXBandAxis, sortLegend, encodingForColumn, @@ -40,4 +41,5 @@ export const columnParallelAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts index 817e549669..2f44acebee 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts @@ -6,6 +6,7 @@ import { columnPercentConfig, markStyle, annotation, + rejectPivotAnnotationAreaRange, sortXBandAxis, sortLegend, encodingForColumn, @@ -40,4 +41,5 @@ export const columnPercentAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts index 51aabc3c28..7da37cf3fc 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, donutConfig, encodingForPie, reshapeWithEncoding, @@ -34,4 +35,5 @@ export const donutAdvancedPipeline: AdvancedPipeline = [ donutConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts index 945ea19735..ad75297394 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, markStyle, sortXBandAxis, sortLegend, @@ -40,4 +41,5 @@ export const dualAxisAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts index b22d80a9d8..7c88302ffc 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, funnelConfig, reshapeWithEncoding, pivotReshapeWithEncoding, @@ -34,4 +35,5 @@ export const funnelAdvancedPipeline: AdvancedPipeline = [ funnelConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts index 5104e14298..da2ed78ad8 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, markStyle, sortXBandAxis, heatmapConfig, @@ -38,4 +39,5 @@ export const heatmapAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts index f4e07647a3..c767f5e1e3 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts @@ -3,6 +3,7 @@ import { initAdvancedVSeed, theme, annotation, + rejectUnsupportedAnnotationAreaRange, encodingForHierarchy, buildMeasures, defaultMeasures, @@ -34,4 +35,5 @@ export const hierarchySankeyAdvancedPipeline: AdvancedPipeline = [ hierarchySankeyConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts index 59e8dc9b92..b9d284c3c5 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts @@ -6,6 +6,7 @@ import { histogramConfig, markStyle, annotation, + rejectPivotAnnotationAreaRange, sortLegend, pivotReshapeWithHistogramEncoding, buildMeasures, @@ -39,5 +40,6 @@ export const histogramAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts index 70a454ad5f..6cacae204e 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts @@ -5,6 +5,7 @@ import { pivotAdapter, lineConfig, annotation, + rejectPivotAnnotationAreaRange, markStyle, sortXBandAxis, sortLegend, @@ -40,4 +41,5 @@ export const lineAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts index 33524fad16..0807f3f6a9 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts @@ -5,6 +5,7 @@ import { pivotAdapter, pieConfig, annotation, + rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, encodingForPie, @@ -34,4 +35,5 @@ export const pieAdvancedPipeline: AdvancedPipeline = [ pieConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts index 8a3affa823..ef10bbbf20 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts @@ -7,6 +7,7 @@ import { barConfig, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, sortYBandAxis, sortLegend, reshapeWithEncoding, @@ -40,4 +41,5 @@ export const raceBarAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts index e617b23573..f54bb0d912 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts @@ -6,6 +6,7 @@ import { columnConfig, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, sortXBandAxis, sortLegend, reshapeWithEncoding, @@ -41,5 +42,6 @@ export const raceColumnAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts index 936e4544fe..e098d74f61 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts @@ -6,6 +6,7 @@ import { pivotAdapter, donutConfig, annotation, + rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, defaultMeasures, @@ -34,4 +35,5 @@ export const raceDonutAdvancedPipeline: AdvancedPipeline = [ donutConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts index aad0c74f11..b5f1a9d5dc 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts @@ -7,6 +7,7 @@ import { lineConfig, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, sortXBandAxis, sortLegend, reshapeWithEncoding, @@ -40,4 +41,5 @@ export const raceLineAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts index 15ba4f9849..52096a40d0 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts @@ -6,6 +6,7 @@ import { pivotAdapter, pieConfig, annotation, + rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, defaultMeasures, @@ -34,4 +35,5 @@ export const racePieAdvancedPipeline: AdvancedPipeline = [ pieConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts index 4348bed823..377c69a6e8 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, markStyle, scatterConfig, encodingForRaceScatter, @@ -38,5 +39,6 @@ export const raceScatterAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts index 78a8f8f6bf..64c965a0e9 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, markStyle, sortLegend, radarConfig, @@ -39,4 +40,5 @@ export const radarAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts index a90266c189..524960753f 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts @@ -5,6 +5,7 @@ import { pivotAdapter, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, roseConfig, reshapeWithEncoding, pivotReshapeWithEncoding, @@ -36,4 +37,5 @@ export const roseAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts index dde9012e8c..0d58dbb0ea 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts @@ -5,6 +5,7 @@ import { pivotAdapter, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, roseParallelConfig, reshapeWithEncoding, pivotReshapeWithEncoding, @@ -36,4 +37,5 @@ export const roseParallelAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts index 54e7a7e7ba..13cc69ddbb 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts @@ -15,6 +15,7 @@ import { reshapeWithEncoding, theme, annotation, + rejectUnsupportedAnnotationAreaRange, pickDimensionsForReshape, } from '../pipes' @@ -34,4 +35,5 @@ export const sankeyAdvancedPipeline: AdvancedPipeline = [ sankeyConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts index 0cdbaf8901..21e400988a 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectPivotAnnotationAreaRange, markStyle, scatterConfig, encodingForScatter, @@ -38,5 +39,6 @@ export const scatterAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, + pivotAdapter([], [rejectPivotAnnotationAreaRange]), regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts index d7e4b276f3..9af54ce422 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, encodingForHierarchy, @@ -34,4 +35,5 @@ export const sunburstAdvancedPipeline: AdvancedPipeline = [ sunburstConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts index 1a019281b7..70460e8ec4 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts @@ -4,6 +4,7 @@ import { theme, pivotAdapter, annotation, + rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, encodingForHierarchy, @@ -34,4 +35,5 @@ export const treeMapAdvancedPipeline: AdvancedPipeline = [ treeMapConfig, theme, annotation, + rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts index b25e036825..03ed06afb2 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts @@ -1,22 +1,6 @@ import { pick } from 'remeda' import type { AdvancedPipe, AdvancedVSeed } from 'src/types' import { zAnnotationAreaRange } from 'src/types' -import { isPivotChart } from 'src/pipeline/utils/chatType' - -const rangeChartTypes = new Set([ - 'line', - 'area', - 'areaPercent', - 'column', - 'columnParallel', - 'columnPercent', - 'bar', - 'barParallel', - 'barPercent', - 'boxPlot', - 'histogram', - 'scatter', -]) export const annotation: AdvancedPipe = (advancedVSeed, context) => { const { vseed } = context @@ -46,12 +30,6 @@ export const annotation: AdvancedPipe = (advancedVSeed, context) => { const issues = validation.error.issues.map((issue) => `${issue.path.join('.')}: ${issue.message}`).join('; ') throw new Error(`${path}.range: ${issues}`) } - if (!rangeChartTypes.has(vseed.chartType)) { - throw new Error(`${path}.range does not support chartType ${vseed.chartType}`) - } - if (isPivotChart(vseed)) { - throw new Error(`${path}.range does not support pivot or combination charts`) - } }) return { ...advancedVSeed, annotation } diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/index.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/index.ts index 52c922ac98..57f1f0178c 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/index.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/index.ts @@ -1 +1,2 @@ export { annotation } from './annotation' +export { rejectUnsupportedAnnotationAreaRange, rejectPivotAnnotationAreaRange } from './rejectAnnotationAreaRange' diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/rejectAnnotationAreaRange.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/rejectAnnotationAreaRange.ts new file mode 100644 index 0000000000..b558d6d37a --- /dev/null +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/rejectAnnotationAreaRange.ts @@ -0,0 +1,18 @@ +import type { AdvancedPipe } from 'src/types' + +const rejectRange = + (message: string): AdvancedPipe => + (advancedVSeed) => { + const areas = advancedVSeed.annotation?.annotationArea + const areaList = Array.isArray(areas) ? areas : areas ? [areas] : [] + const rangeIndex = areaList.findIndex((area) => area.range !== undefined) + + if (rangeIndex !== -1) { + throw new Error(`annotationArea[${rangeIndex}].range ${message}`) + } + + return advancedVSeed + } + +export const rejectUnsupportedAnnotationAreaRange = rejectRange('does not support this chart type') +export const rejectPivotAnnotationAreaRange = rejectRange('does not support pivot or combination charts') From 445e9aae3b78830dd6947fdc14c14c01f69f0092 Mon Sep 17 00:00:00 2001 From: ZJU_czx <952370295@qq.com> Date: Fri, 9 Oct 2026 14:49:12 +0800 Subject: [PATCH 5/6] refactor: compose annotation range support by chart Why: - Keep unsupported charts fail-closed without repeating range guards in every pipeline. What: - Select annotationWithRange only in supported chart pipelines and retain pivot-specific errors. - Add mixed-annotation regressions and raise VSeed coverage thresholds to verified floors. --- README.md | 2 +- .../pipeline/advanced/chart/pipeline/area.ts | 5 ++- .../advanced/chart/pipeline/areaPercent.ts | 5 ++- .../pipeline/advanced/chart/pipeline/bar.ts | 5 ++- .../advanced/chart/pipeline/barParallel.ts | 5 ++- .../advanced/chart/pipeline/barPercent.ts | 5 ++- .../advanced/chart/pipeline/boxplot.ts | 5 ++- .../advanced/chart/pipeline/circlePacking.ts | 2 -- .../advanced/chart/pipeline/column.ts | 5 ++- .../advanced/chart/pipeline/columnParallel.ts | 5 ++- .../advanced/chart/pipeline/columnPercent.ts | 5 ++- .../pipeline/advanced/chart/pipeline/donut.ts | 2 -- .../advanced/chart/pipeline/dualAxis.ts | 2 -- .../advanced/chart/pipeline/funnel.ts | 2 -- .../advanced/chart/pipeline/heatmap.ts | 2 -- .../chart/pipeline/hierarchySankey.ts | 2 -- .../advanced/chart/pipeline/histogram.ts | 5 ++- .../pipeline/advanced/chart/pipeline/line.ts | 5 ++- .../pipeline/advanced/chart/pipeline/pie.ts | 2 -- .../advanced/chart/pipeline/raceBar.ts | 2 -- .../advanced/chart/pipeline/raceColumn.ts | 2 -- .../advanced/chart/pipeline/raceDonut.ts | 2 -- .../advanced/chart/pipeline/raceLine.ts | 2 -- .../advanced/chart/pipeline/racePie.ts | 2 -- .../advanced/chart/pipeline/raceScatter.ts | 2 -- .../pipeline/advanced/chart/pipeline/radar.ts | 2 -- .../pipeline/advanced/chart/pipeline/rose.ts | 2 -- .../advanced/chart/pipeline/roseParallel.ts | 2 -- .../advanced/chart/pipeline/sankey.ts | 2 -- .../advanced/chart/pipeline/scatter.ts | 5 ++- .../advanced/chart/pipeline/sunburst.ts | 2 -- .../advanced/chart/pipeline/treeMap.ts | 2 -- .../chart/pipes/annotation/annotation.ts | 6 +++- .../advanced/chart/pipes/annotation/index.ts | 4 +-- .../unit/builder/annotationAreaRange.test.ts | 35 +++++++++++++++++++ packages/vseed/vite.config.ts | 4 +-- 36 files changed, 69 insertions(+), 80 deletions(-) diff --git a/README.md b/README.md index d0c1bda95e..830bf882ce 100644 --- a/README.md +++ b/README.md @@ -9,5 +9,5 @@ VBI provides reusable packages and agent skills for AI-oriented business intelli | Name | Description | Test Coverage | Npm Version | | :------------------------------------------------------------- | :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | | [vbi](https://visactor.github.io/VBI) | HeadlessBI Interface | [![Coverage](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg)](https://github.com/VisActor/VBI/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vbi.svg)](https://www.npmjs.com/package/@visactor/vbi) | -| [vseed](https://visactor.github.io/VBI/vseed/guide/quickStart) | Visualization Engine | [![Coverage](https://img.shields.io/badge/Coverage-91.43%25-brightgreen.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vseed.svg)](https://www.npmjs.com/package/@visactor/vseed) | +| [vseed](https://visactor.github.io/VBI/vseed/guide/quickStart) | Visualization Engine | [![Coverage](https://img.shields.io/badge/Coverage-91.45%25-brightgreen.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vseed.svg)](https://www.npmjs.com/package/@visactor/vseed) | | [vquery](https://visactor.github.io/VBI/VQuery) | Lightweight Query Engine | [![Coverage](https://img.shields.io/badge/Coverage-100.00%25-brightgreen.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vquery.svg)](https://www.npmjs.com/package/@visactor/vquery) | diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts index ab232aed16..80639eb801 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts @@ -4,7 +4,7 @@ import { theme, pivotAdapter, areaConfig, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, markStyle, sortXBandAxis, @@ -40,6 +40,5 @@ export const areaAdvancedPipeline: AdvancedPipeline = [ areaConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts index e63c130302..824e6125c0 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts @@ -4,7 +4,7 @@ import { theme, pivotAdapter, areaPercentConfig, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, markStyle, sortXBandAxis, @@ -40,6 +40,5 @@ export const areaPercentAdvancedPipeline: AdvancedPipeline = [ areaPercentConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts index 3bd1e2cbdd..d07c89e8fa 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts @@ -6,7 +6,7 @@ import { pivotAdapter, barConfig, markStyle, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, sortYBandAxis, sortLegend, @@ -40,6 +40,5 @@ export const barAdvancedPipeline: AdvancedPipeline = [ barConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts index 6b5034e6de..e0d61e673c 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts @@ -6,7 +6,7 @@ import { pivotAdapter, barParallelConfig, markStyle, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, sortYBandAxis, sortLegend, @@ -40,6 +40,5 @@ export const barParallelAdvancedPipeline: AdvancedPipeline = [ barParallelConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts index b288bacc82..2f052771fc 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts @@ -6,7 +6,7 @@ import { pivotAdapter, barPercentConfig, markStyle, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, sortYBandAxis, sortLegend, @@ -40,6 +40,5 @@ export const barPercentAdvancedPipeline: AdvancedPipeline = [ barPercentConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts index f3aa5c6796..825565d236 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts @@ -4,7 +4,7 @@ import { theme, pivotAdapter, markStyle, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, sortLegend, pivotReshapeWithBoxplotEncoding, @@ -42,6 +42,5 @@ export const boxplotAdvancedPipeline: AdvancedPipeline = [ sortLegend, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts index 28ddc5bc16..18085a2e81 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts @@ -4,7 +4,6 @@ import { theme, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, encodingForHierarchy, @@ -35,5 +34,4 @@ export const circlePackingAdvancedPipeline: AdvancedPipeline = [ circlePackingConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts index 9c817b665f..2baa0bdd7d 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts @@ -5,7 +5,7 @@ import { pivotAdapter, columnConfig, markStyle, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, sortXBandAxis, sortLegend, @@ -41,7 +41,6 @@ export const columnAdvancedPipeline: AdvancedPipeline = [ columnConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts index 1930bfc835..5a0a68622d 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts @@ -7,7 +7,7 @@ import { pivotReshapeWithEncoding, columnParallelConfig, markStyle, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, sortXBandAxis, sortLegend, @@ -40,6 +40,5 @@ export const columnParallelAdvancedPipeline: AdvancedPipeline = [ columnParallelConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts index 2f44acebee..6d4da14f61 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts @@ -5,7 +5,7 @@ import { pivotAdapter, columnPercentConfig, markStyle, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, sortXBandAxis, sortLegend, @@ -40,6 +40,5 @@ export const columnPercentAdvancedPipeline: AdvancedPipeline = [ columnPercentConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts index e239246ef9..fcecf266d4 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts @@ -7,7 +7,6 @@ import { centerTextConfig, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, donutConfig, encodingForPie, reshapeWithEncoding, @@ -41,5 +40,4 @@ export const donutAdvancedPipeline: AdvancedPipeline = [ centerTextConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts index ad75297394..945ea19735 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts @@ -4,7 +4,6 @@ import { theme, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, markStyle, sortXBandAxis, sortLegend, @@ -41,5 +40,4 @@ export const dualAxisAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts index 7c88302ffc..b22d80a9d8 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts @@ -4,7 +4,6 @@ import { theme, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, funnelConfig, reshapeWithEncoding, pivotReshapeWithEncoding, @@ -35,5 +34,4 @@ export const funnelAdvancedPipeline: AdvancedPipeline = [ funnelConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts index da2ed78ad8..5104e14298 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts @@ -4,7 +4,6 @@ import { theme, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, markStyle, sortXBandAxis, heatmapConfig, @@ -39,5 +38,4 @@ export const heatmapAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts index c767f5e1e3..f4e07647a3 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts @@ -3,7 +3,6 @@ import { initAdvancedVSeed, theme, annotation, - rejectUnsupportedAnnotationAreaRange, encodingForHierarchy, buildMeasures, defaultMeasures, @@ -35,5 +34,4 @@ export const hierarchySankeyAdvancedPipeline: AdvancedPipeline = [ hierarchySankeyConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts index b9d284c3c5..ef23b1fcd8 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts @@ -5,7 +5,7 @@ import { pivotAdapter, histogramConfig, markStyle, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, sortLegend, pivotReshapeWithHistogramEncoding, @@ -39,7 +39,6 @@ export const histogramAdvancedPipeline: AdvancedPipeline = [ sortLegend, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts index 6cacae204e..96cf1c1f58 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts @@ -4,7 +4,7 @@ import { theme, pivotAdapter, lineConfig, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, markStyle, sortXBandAxis, @@ -40,6 +40,5 @@ export const lineAdvancedPipeline: AdvancedPipeline = [ lineConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts index 368b402cf6..a30c6b0ca3 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts @@ -7,7 +7,6 @@ import { pivotAdapter, pieConfig, annotation, - rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, encodingForPie, @@ -39,5 +38,4 @@ export const pieAdvancedPipeline: AdvancedPipeline = [ pieStyleConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts index ef10bbbf20..8a3affa823 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts @@ -7,7 +7,6 @@ import { barConfig, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, sortYBandAxis, sortLegend, reshapeWithEncoding, @@ -41,5 +40,4 @@ export const raceBarAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts index f54bb0d912..e617b23573 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts @@ -6,7 +6,6 @@ import { columnConfig, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, sortXBandAxis, sortLegend, reshapeWithEncoding, @@ -42,6 +41,5 @@ export const raceColumnAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts index 8688254ed4..55cb94441c 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts @@ -7,7 +7,6 @@ import { pivotAdapter, donutConfig, annotation, - rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, defaultMeasures, @@ -37,5 +36,4 @@ export const raceDonutAdvancedPipeline: AdvancedPipeline = [ donutGeometryConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts index b5f1a9d5dc..aad0c74f11 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts @@ -7,7 +7,6 @@ import { lineConfig, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, sortXBandAxis, sortLegend, reshapeWithEncoding, @@ -41,5 +40,4 @@ export const raceLineAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts index 763603b2e2..eac5c2d171 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts @@ -7,7 +7,6 @@ import { pivotAdapter, pieConfig, annotation, - rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, defaultMeasures, @@ -37,5 +36,4 @@ export const racePieAdvancedPipeline: AdvancedPipeline = [ pieGeometryConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts index 377c69a6e8..4348bed823 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts @@ -4,7 +4,6 @@ import { theme, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, markStyle, scatterConfig, encodingForRaceScatter, @@ -39,6 +38,5 @@ export const raceScatterAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts index 64c965a0e9..78a8f8f6bf 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts @@ -4,7 +4,6 @@ import { theme, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, markStyle, sortLegend, radarConfig, @@ -40,5 +39,4 @@ export const radarAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts index 524960753f..a90266c189 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts @@ -5,7 +5,6 @@ import { pivotAdapter, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, roseConfig, reshapeWithEncoding, pivotReshapeWithEncoding, @@ -37,5 +36,4 @@ export const roseAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts index 0d58dbb0ea..dde9012e8c 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts @@ -5,7 +5,6 @@ import { pivotAdapter, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, roseParallelConfig, reshapeWithEncoding, pivotReshapeWithEncoding, @@ -37,5 +36,4 @@ export const roseParallelAdvancedPipeline: AdvancedPipeline = [ theme, markStyle, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts index 13cc69ddbb..54e7a7e7ba 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts @@ -15,7 +15,6 @@ import { reshapeWithEncoding, theme, annotation, - rejectUnsupportedAnnotationAreaRange, pickDimensionsForReshape, } from '../pipes' @@ -35,5 +34,4 @@ export const sankeyAdvancedPipeline: AdvancedPipeline = [ sankeyConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts index 21e400988a..c463802270 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts @@ -3,7 +3,7 @@ import { initAdvancedVSeed, theme, pivotAdapter, - annotation, + annotationWithRange, rejectPivotAnnotationAreaRange, markStyle, scatterConfig, @@ -38,7 +38,6 @@ export const scatterAdvancedPipeline: AdvancedPipeline = [ scatterConfig, theme, markStyle, - annotation, - pivotAdapter([], [rejectPivotAnnotationAreaRange]), + pivotAdapter([annotationWithRange], [annotationWithRange, rejectPivotAnnotationAreaRange]), regressionLine, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts index 9af54ce422..d7e4b276f3 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts @@ -4,7 +4,6 @@ import { theme, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, encodingForHierarchy, @@ -35,5 +34,4 @@ export const sunburstAdvancedPipeline: AdvancedPipeline = [ sunburstConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts b/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts index 70460e8ec4..1a019281b7 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts @@ -4,7 +4,6 @@ import { theme, pivotAdapter, annotation, - rejectUnsupportedAnnotationAreaRange, reshapeWithEncoding, pivotReshapeWithEncoding, encodingForHierarchy, @@ -35,5 +34,4 @@ export const treeMapAdvancedPipeline: AdvancedPipeline = [ treeMapConfig, theme, annotation, - rejectUnsupportedAnnotationAreaRange, ] diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts index 03ed06afb2..c0321c5496 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/annotation.ts @@ -1,8 +1,9 @@ import { pick } from 'remeda' import type { AdvancedPipe, AdvancedVSeed } from 'src/types' import { zAnnotationAreaRange } from 'src/types' +import { rejectUnsupportedAnnotationAreaRange } from './rejectAnnotationAreaRange' -export const annotation: AdvancedPipe = (advancedVSeed, context) => { +export const annotationWithRange: AdvancedPipe = (advancedVSeed, context) => { const { vseed } = context const annotation = pick(vseed, [ 'annotationPoint', @@ -34,3 +35,6 @@ export const annotation: AdvancedPipe = (advancedVSeed, context) => { return { ...advancedVSeed, annotation } } + +export const annotation: AdvancedPipe = (advancedVSeed, context) => + rejectUnsupportedAnnotationAreaRange(annotationWithRange(advancedVSeed, context), context) diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/index.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/index.ts index 57f1f0178c..9da3a03abc 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/index.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/annotation/index.ts @@ -1,2 +1,2 @@ -export { annotation } from './annotation' -export { rejectUnsupportedAnnotationAreaRange, rejectPivotAnnotationAreaRange } from './rejectAnnotationAreaRange' +export { annotation, annotationWithRange } from './annotation' +export { rejectPivotAnnotationAreaRange } from './rejectAnnotationAreaRange' diff --git a/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts b/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts index 48f78b4c21..e1b8e5c03f 100644 --- a/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts +++ b/packages/vseed/tests/unit/builder/annotationAreaRange.test.ts @@ -304,6 +304,41 @@ describe('annotationArea coordinate ranges', () => { ).toThrow(/annotationArea.*range.*support/) }) + test('rejects a later range in mixed annotations on an unsupported chart', () => { + const annotations = [ + { selector: { field: 'channel', value: ['B'] } }, + { range: { y: { min: 0, max: 1 } } }, + ] + expect(() => Builder.from({ ...scatter(annotations), chartType: 'pie' } as VSeed).build()).toThrow( + /annotationArea\[1\].range.*support/, + ) + }) + + test('keeps histogram point annotations alongside an area range', () => { + const builder = Builder.from({ + chartType: 'histogram', + dataset: [1, 1, 2, 5, 7, 8, 9, 10].map((value) => ({ value })), + measures: [{ id: 'value' }], + annotationPoint: { selector: { field: '__BinStart__', op: '>=', value: 0 }, text: '区间' }, + annotationArea: { range: { x: { min: 3, max: 7 } } }, + } as VSeed) + const advanced = builder.buildAdvanced()! + const spec = builder.buildSpec(advanced) as unknown as { + xField: string + x2Field: string + markPoint: Array<{ coordinate: (data: Datum[]) => Datum | undefined }> + markArea: unknown[] + } + const source = advanced.dataset.flat()[0] + + expect(spec.markArea).toHaveLength(1) + expect(spec.markPoint.length).toBeGreaterThan(0) + expect(spec.markPoint[0].coordinate(advanced.dataset.flat())?.[spec.xField]).toBe( + (source[spec.xField] + source[spec.x2Field]) / 2, + ) + expect(spec.markPoint[0].coordinate([])).toBeUndefined() + }) + test('diagnoses facet ranges before silently repeating them across panels', () => { const vseed = scatter({ range: { y: { min: 0, max: 1 } } }) vseed.dimensions = [{ id: 'channel', encoding: 'row' }] diff --git a/packages/vseed/vite.config.ts b/packages/vseed/vite.config.ts index 508543941d..1a9a60ae9e 100644 --- a/packages/vseed/vite.config.ts +++ b/packages/vseed/vite.config.ts @@ -20,10 +20,10 @@ export default defineConfig(({ mode }) => ({ // V8 branch counts vary slightly between runs; use verified floors. thresholds: mode === 'unit' - ? { statements: 84.4, lines: 84.4, branches: 77.4, functions: 82.7 } + ? { statements: 84.5, lines: 84.5, branches: 77.5, functions: 82.9 } : mode === 'integration' ? undefined - : { statements: 91.3, lines: 91.3, branches: 82.3, functions: 84.7 }, + : { statements: 91.4, lines: 91.4, branches: 82.4, functions: 84.8 }, }, globals: true, environment: 'jsdom', From 32faf0081a97973f037781a214dc06bd2d546c8e Mon Sep 17 00:00:00 2001 From: ZJU_czx <952370295@qq.com> Date: Fri, 9 Oct 2026 16:31:00 +0800 Subject: [PATCH 6/6] feat: center annotation area labels with middle position Why: - Four-quadrant regions need labels anchored at their own centers without alignment workarounds. What: - Expose middle in annotationArea types, validation, and both spec pipelines. - Add a four-quadrant scatter example and rendered label-position regressions. --- .../examples/features/annotationArea.mdx | 169 +++++++ apps/website/docs/zh-CN/vseed/option/area.md | 28 +- .../docs/zh-CN/vseed/option/areaPercent.md | 28 +- apps/website/docs/zh-CN/vseed/option/bar.md | 28 +- .../docs/zh-CN/vseed/option/barParallel.md | 28 +- .../docs/zh-CN/vseed/option/barPercent.md | 28 +- .../docs/zh-CN/vseed/option/boxPlot.md | 28 +- .../website/docs/zh-CN/vseed/option/column.md | 28 +- .../docs/zh-CN/vseed/option/columnParallel.md | 28 +- .../docs/zh-CN/vseed/option/columnPercent.md | 28 +- .../docs/zh-CN/vseed/option/dualAxis.md | 28 +- .../docs/zh-CN/vseed/option/histogram.md | 28 +- apps/website/docs/zh-CN/vseed/option/line.md | 28 +- .../docs/zh-CN/vseed/option/raceBar.md | 28 +- .../docs/zh-CN/vseed/option/raceColumn.md | 28 +- .../docs/zh-CN/vseed/option/raceLine.md | 28 +- .../docs/zh-CN/vseed/option/raceScatter.md | 28 +- .../docs/zh-CN/vseed/option/scatter.md | 28 +- .../chart/pipes/annotation/annotationArea.ts | 3 +- .../pipes/annotation/annotationAreaBand.ts | 3 +- .../spec/chart/pipes/annotation/utils.ts | 4 + .../properties/annotation/annotationArea.ts | 20 +- .../properties/annotation/zAnnotationArea.ts | 2 +- .../scatter-four-quadrants.json | 80 ++++ .../tests/examples/features/features.test.ts | 434 +++++++++--------- .../builder/annotationAreaRangeRender.test.ts | 60 ++- 26 files changed, 640 insertions(+), 611 deletions(-) create mode 100644 packages/vseed/tests/examples/features/annotationArea/scatter-four-quadrants.json diff --git a/apps/website/docs/zh-CN/vseed/examples/features/annotationArea.mdx b/apps/website/docs/zh-CN/vseed/examples/features/annotationArea.mdx index ce21da8ead..4f42eb6860 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/annotationArea.mdx +++ b/apps/website/docs/zh-CN/vseed/examples/features/annotationArea.mdx @@ -605,6 +605,175 @@ export default () => { } ``` +## 散点图：产品组合四象限 + +以现有价值和增长潜力各 50 分为界，用四个 annotationArea.range 划分双轴数值域。axisMin / axisMax 指当前坐标轴端点，区域不依赖象限中是否有数据点。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "scatter", + "dataset": [ + { + "product": "产品 A", + "value": 13, + "potential": 88 + }, + { + "product": "产品 B", + "value": 40, + "potential": 60 + }, + { + "product": "产品 C", + "value": 60, + "potential": 88 + }, + { + "product": "产品 D", + "value": 88, + "potential": 60 + }, + { + "product": "产品 E", + "value": 13, + "potential": 38 + }, + { + "product": "产品 F", + "value": 40, + "potential": 12 + }, + { + "product": "产品 G", + "value": 60, + "potential": 40 + }, + { + "product": "产品 H", + "value": 88, + "potential": 12 + } + ], + "dimensions": [ + { + "id": "product", + "alias": "产品" + } + ], + "measures": [ + { + "id": "value", + "alias": "现有价值", + "encoding": "xAxis" + }, + { + "id": "potential", + "alias": "增长潜力", + "encoding": "yAxis" + } + ], + "xAxis": { + "min": 0, + "max": 100 + }, + "yAxis": { + "min": 0, + "max": 100 + }, + "label": { + "enable": false + }, + "pointStyle": { + "pointColor": "#1f2937", + "pointSize": 12 + }, + "annotationArea": [ + { + "range": { + "x": { + "min": "axisMin", + "max": 50 + }, + "y": { + "min": 50, + "max": "axisMax" + } + }, + "text": "高潜力", + "textPosition": "middle", + "textBackgroundColor": "#2563eb", + "textBackgroundBorderColor": "#2563eb", + "areaColor": "#60a5fa", + "areaColorOpacity": 0.12, + "areaBorderWidth": 0 + }, + { + "range": { + "x": { + "min": 50, + "max": "axisMax" + }, + "y": { + "min": 50, + "max": "axisMax" + } + }, + "text": "明星产品", + "textPosition": "middle", + "textBackgroundColor": "#059669", + "textBackgroundBorderColor": "#059669", + "areaColor": "#34d399", + "areaColorOpacity": 0.12, + "areaBorderWidth": 0 + }, + { + "range": { + "x": { + "min": "axisMin", + "max": 50 + }, + "y": { + "min": "axisMin", + "max": 50 + } + }, + "text": "待培育", + "textPosition": "middle", + "textBackgroundColor": "#64748b", + "textBackgroundBorderColor": "#64748b", + "areaColor": "#94a3b8", + "areaColorOpacity": 0.12, + "areaBorderWidth": 0 + }, + { + "range": { + "x": { + "min": 50, + "max": "axisMax" + }, + "y": { + "min": "axisMin", + "max": 50 + } + }, + "text": "稳健产品", + "textPosition": "middle", + "textBackgroundColor": "#d97706", + "textBackgroundBorderColor": "#d97706", + "areaColor": "#fbbf24", + "areaColorOpacity": 0.12, + "areaBorderWidth": 0 + } + ] +} + + return +} +``` + ## 散点图：无数据点的目标区域 目标矩形内没有数据点也可绘制。axisMax 指当前最终坐标轴上限，此处手动设置为 100%；它不是数据最大值 60%。TypeScript 可从 @visactor/vseed 导入 AxisBoundaryEnum.Min / Max，JSON 使用 axisMin / axisMax。 diff --git a/apps/website/docs/zh-CN/vseed/option/area.md b/apps/website/docs/zh-CN/vseed/option/area.md index a04e587453..b006de09d7 100644 --- a/apps/website/docs/zh-CN/vseed/option/area.md +++ b/apps/website/docs/zh-CN/vseed/option/area.md @@ -5592,10 +5592,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -5651,20 +5651,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -5673,20 +5665,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/areaPercent.md b/apps/website/docs/zh-CN/vseed/option/areaPercent.md index d6424e26f3..6c033669e8 100644 --- a/apps/website/docs/zh-CN/vseed/option/areaPercent.md +++ b/apps/website/docs/zh-CN/vseed/option/areaPercent.md @@ -5601,10 +5601,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -5660,20 +5660,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -5682,20 +5674,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/bar.md b/apps/website/docs/zh-CN/vseed/option/bar.md index 8a6fb05995..8d47f902ea 100644 --- a/apps/website/docs/zh-CN/vseed/option/bar.md +++ b/apps/website/docs/zh-CN/vseed/option/bar.md @@ -4811,10 +4811,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4870,20 +4870,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4892,20 +4884,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/barParallel.md b/apps/website/docs/zh-CN/vseed/option/barParallel.md index 17072eac14..fc18aaff91 100644 --- a/apps/website/docs/zh-CN/vseed/option/barParallel.md +++ b/apps/website/docs/zh-CN/vseed/option/barParallel.md @@ -4813,10 +4813,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4872,20 +4872,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4894,20 +4886,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/barPercent.md b/apps/website/docs/zh-CN/vseed/option/barPercent.md index 77b60e12a1..e7ae1109d5 100644 --- a/apps/website/docs/zh-CN/vseed/option/barPercent.md +++ b/apps/website/docs/zh-CN/vseed/option/barPercent.md @@ -4827,10 +4827,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4886,20 +4886,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4908,20 +4900,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/boxPlot.md b/apps/website/docs/zh-CN/vseed/option/boxPlot.md index efbc15e698..3e1ec5fa08 100644 --- a/apps/website/docs/zh-CN/vseed/option/boxPlot.md +++ b/apps/website/docs/zh-CN/vseed/option/boxPlot.md @@ -4472,10 +4472,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4531,20 +4531,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4553,20 +4545,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/column.md b/apps/website/docs/zh-CN/vseed/option/column.md index f96326d632..aebc847adb 100644 --- a/apps/website/docs/zh-CN/vseed/option/column.md +++ b/apps/website/docs/zh-CN/vseed/option/column.md @@ -4799,10 +4799,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4858,20 +4858,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4880,20 +4872,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/columnParallel.md b/apps/website/docs/zh-CN/vseed/option/columnParallel.md index 562d2c20e1..eb6250a113 100644 --- a/apps/website/docs/zh-CN/vseed/option/columnParallel.md +++ b/apps/website/docs/zh-CN/vseed/option/columnParallel.md @@ -4817,10 +4817,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4876,20 +4876,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4898,20 +4890,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/columnPercent.md b/apps/website/docs/zh-CN/vseed/option/columnPercent.md index 0efb297f8c..f61f189eef 100644 --- a/apps/website/docs/zh-CN/vseed/option/columnPercent.md +++ b/apps/website/docs/zh-CN/vseed/option/columnPercent.md @@ -4815,10 +4815,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4874,20 +4874,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4896,20 +4888,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/dualAxis.md b/apps/website/docs/zh-CN/vseed/option/dualAxis.md index 69c0a5d89f..5f1fac1eaf 100644 --- a/apps/website/docs/zh-CN/vseed/option/dualAxis.md +++ b/apps/website/docs/zh-CN/vseed/option/dualAxis.md @@ -6249,10 +6249,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -6308,20 +6308,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -6330,20 +6322,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/histogram.md b/apps/website/docs/zh-CN/vseed/option/histogram.md index 352f256b7a..cd4720518f 100644 --- a/apps/website/docs/zh-CN/vseed/option/histogram.md +++ b/apps/website/docs/zh-CN/vseed/option/histogram.md @@ -4485,10 +4485,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4544,20 +4544,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4566,20 +4558,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/line.md b/apps/website/docs/zh-CN/vseed/option/line.md index 24a2fff664..5f5d3dbcbc 100644 --- a/apps/website/docs/zh-CN/vseed/option/line.md +++ b/apps/website/docs/zh-CN/vseed/option/line.md @@ -5197,10 +5197,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -5256,20 +5256,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -5278,20 +5270,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/raceBar.md b/apps/website/docs/zh-CN/vseed/option/raceBar.md index 167035e91c..1e9d50563e 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceBar.md +++ b/apps/website/docs/zh-CN/vseed/option/raceBar.md @@ -4555,10 +4555,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4614,20 +4614,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4636,20 +4628,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/raceColumn.md b/apps/website/docs/zh-CN/vseed/option/raceColumn.md index 521e275e01..3a746e1d83 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceColumn.md +++ b/apps/website/docs/zh-CN/vseed/option/raceColumn.md @@ -4602,10 +4602,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4661,20 +4661,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4683,20 +4675,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/raceLine.md b/apps/website/docs/zh-CN/vseed/option/raceLine.md index 0567797a3f..afeddf917e 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceLine.md +++ b/apps/website/docs/zh-CN/vseed/option/raceLine.md @@ -4916,10 +4916,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4975,20 +4975,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4997,20 +4989,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/raceScatter.md b/apps/website/docs/zh-CN/vseed/option/raceScatter.md index f340dc1364..e7c968ce96 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceScatter.md +++ b/apps/website/docs/zh-CN/vseed/option/raceScatter.md @@ -4653,10 +4653,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4712,20 +4712,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4734,20 +4726,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/apps/website/docs/zh-CN/vseed/option/scatter.md b/apps/website/docs/zh-CN/vseed/option/scatter.md index 1b4e1ccd27..91800bbc5a 100644 --- a/apps/website/docs/zh-CN/vseed/option/scatter.md +++ b/apps/website/docs/zh-CN/vseed/option/scatter.md @@ -4833,10 +4833,10 @@ same as operator ### textPosition -**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined` +**Type:** `"left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | "middle" | undefined` :::note{title=描述} -文本位置 +文本在区域内的位置；middle 表示区域中心 ::: @@ -4892,20 +4892,12 @@ same as operator **Type:** `"left" | "right" | "center" | undefined` :::note{title=描述} -文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - -建议设置为'center', 这样可以确保文本在标注区域的中间 - -right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - -left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - -center: 文本在标注区域的中心, 文本的中心对齐标注区域 +文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 ::: **示例** -'center' 文本在标注区域的中间 +'center' @@ -4914,20 +4906,12 @@ center: 文本在标注区域的中心, 文本的中心对齐标注区域 **Type:** `"top" | "bottom" | "middle" | undefined` :::note{title=描述} -文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - -建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - -top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - -middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - -bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 +文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 ::: **示例** -'top' 文本在标注区域的底部 +'middle' diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationArea.ts b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationArea.ts index 4214097624..bfaee9fd52 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationArea.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationArea.ts @@ -30,6 +30,7 @@ export const annotationArea: VChartSpecPipe = (spec, context) => { bottomRight: 'insideBottomRight', left: 'insideLeft', right: 'insideRight', + middle: 'middle', } const defaultTextPosition = isBarLikeChart(advancedVSeed as VSeed) ? 'right' : 'top' @@ -161,7 +162,7 @@ export const annotationArea: VChartSpecPipe = (spec, context) => { return [] }, label: { - position: (positionMap as any)[textPosition], + position: positionMap[textPosition as keyof typeof positionMap], visible: true, text: text, style: { diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts index 9d4658dd0c..dc166dab24 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/annotationAreaBand.ts @@ -26,6 +26,7 @@ export const annotationAreaBand: VChartSpecPipe = (spec, context) => { bottomRight: 'insideBottomRight', left: 'insideLeft', right: 'insideRight', + middle: 'middle', } const defaultTextPosition = isBarLikeChart(advancedVSeed as VSeed) ? 'right' : 'top' @@ -175,7 +176,7 @@ export const annotationAreaBand: VChartSpecPipe = (spec, context) => { return [] }, label: { - position: positionMap[textPosition as 'bottom'], + position: positionMap[textPosition as keyof typeof positionMap], visible: true, text: text, style: { diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/utils.ts b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/utils.ts index 44ad27a952..17ec37107c 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/annotation/utils.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/annotation/utils.ts @@ -67,6 +67,10 @@ export const ANNOTATION_AREA_TEXT_STYLE_BY_POSITION = { textAlign: 'right', textBaseline: 'middle', }, + middle: { + textAlign: 'center', + textBaseline: 'middle', + }, } /** diff --git a/packages/vseed/src/types/properties/annotation/annotationArea.ts b/packages/vseed/src/types/properties/annotation/annotationArea.ts index 5ea12e5880..bce4f79f71 100644 --- a/packages/vseed/src/types/properties/annotation/annotationArea.ts +++ b/packages/vseed/src/types/properties/annotation/annotationArea.ts @@ -34,10 +34,10 @@ export type AnnotationAreaStyle = { */ text?: string | string[] /** - * @description 文本位置 + * @description 文本在区域内的位置；middle 表示区域中心 * @example 'top' */ - textPosition?: 'top' | 'topRight' | 'topLeft' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'right' + textPosition?: 'top' | 'topRight' | 'topLeft' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'right' | 'middle' /** * @description 文本颜色 @@ -55,21 +55,13 @@ export type AnnotationAreaStyle = { */ textFontWeight?: number /** - * @description 文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 - * 建议设置为'center', 这样可以确保文本在标注区域的中间 - * right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 - * left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 - * center: 文本在标注区域的中心, 文本的中心对齐标注区域 - * @example 'center' 文本在标注区域的中间 + * @description 文本相对 textPosition 锚点的水平对齐方式，不改变锚点位置 + * @example 'center' */ textAlign?: 'left' | 'right' | 'center' /** - * @description 文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 - * 建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 - * top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 - * middle: 文本在标注区域的中心, 文本的中心对齐标注区域 - * bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 - * @example 'top' 文本在标注区域的底部 + * @description 文本相对 textPosition 锚点的垂直对齐方式，不改变锚点位置 + * @example 'middle' */ textBaseline?: 'top' | 'middle' | 'bottom' /** diff --git a/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts b/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts index 765cfe1165..dc3d37adfd 100644 --- a/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts +++ b/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts @@ -19,7 +19,7 @@ export const zAnnotationAreaRange = z export const zAnnotationAreaStyle = z.object({ textPosition: z - .enum(['top', 'topRight', 'topLeft', 'bottom', 'bottomLeft', 'bottomRight', 'left', 'right']) + .enum(['top', 'topRight', 'topLeft', 'bottom', 'bottomLeft', 'bottomRight', 'left', 'right', 'middle']) .default('top') .nullish(), text: z.string().or(z.array(z.string())).nullish(), diff --git a/packages/vseed/tests/examples/features/annotationArea/scatter-four-quadrants.json b/packages/vseed/tests/examples/features/annotationArea/scatter-four-quadrants.json new file mode 100644 index 0000000000..e3f2377f0a --- /dev/null +++ b/packages/vseed/tests/examples/features/annotationArea/scatter-four-quadrants.json @@ -0,0 +1,80 @@ +{ + "name": "散点图：产品组合四象限", + "description": "以现有价值和增长潜力各 50 分为界，用四个 annotationArea.range 划分双轴数值域。axisMin / axisMax 指当前坐标轴端点，区域不依赖象限中是否有数据点。", + "vseed": { + "chartType": "scatter", + "dataset": [ + { "product": "产品 A", "value": 13, "potential": 88 }, + { "product": "产品 B", "value": 40, "potential": 60 }, + { "product": "产品 C", "value": 60, "potential": 88 }, + { "product": "产品 D", "value": 88, "potential": 60 }, + { "product": "产品 E", "value": 13, "potential": 38 }, + { "product": "产品 F", "value": 40, "potential": 12 }, + { "product": "产品 G", "value": 60, "potential": 40 }, + { "product": "产品 H", "value": 88, "potential": 12 } + ], + "dimensions": [{ "id": "product", "alias": "产品" }], + "measures": [ + { "id": "value", "alias": "现有价值", "encoding": "xAxis" }, + { "id": "potential", "alias": "增长潜力", "encoding": "yAxis" } + ], + "xAxis": { "min": 0, "max": 100 }, + "yAxis": { "min": 0, "max": 100 }, + "label": { "enable": false }, + "pointStyle": { "pointColor": "#1f2937", "pointSize": 12 }, + "annotationArea": [ + { + "range": { + "x": { "min": "axisMin", "max": 50 }, + "y": { "min": 50, "max": "axisMax" } + }, + "text": "高潜力", + "textPosition": "middle", + "textBackgroundColor": "#2563eb", + "textBackgroundBorderColor": "#2563eb", + "areaColor": "#60a5fa", + "areaColorOpacity": 0.12, + "areaBorderWidth": 0 + }, + { + "range": { + "x": { "min": 50, "max": "axisMax" }, + "y": { "min": 50, "max": "axisMax" } + }, + "text": "明星产品", + "textPosition": "middle", + "textBackgroundColor": "#059669", + "textBackgroundBorderColor": "#059669", + "areaColor": "#34d399", + "areaColorOpacity": 0.12, + "areaBorderWidth": 0 + }, + { + "range": { + "x": { "min": "axisMin", "max": 50 }, + "y": { "min": "axisMin", "max": 50 } + }, + "text": "待培育", + "textPosition": "middle", + "textBackgroundColor": "#64748b", + "textBackgroundBorderColor": "#64748b", + "areaColor": "#94a3b8", + "areaColorOpacity": 0.12, + "areaBorderWidth": 0 + }, + { + "range": { + "x": { "min": 50, "max": "axisMax" }, + "y": { "min": "axisMin", "max": 50 } + }, + "text": "稳健产品", + "textPosition": "middle", + "textBackgroundColor": "#d97706", + "textBackgroundBorderColor": "#d97706", + "areaColor": "#fbbf24", + "areaColorOpacity": 0.12, + "areaBorderWidth": 0 + } + ] + } +} diff --git a/packages/vseed/tests/examples/features/features.test.ts b/packages/vseed/tests/examples/features/features.test.ts index 30e0e1e7fd..af68b0a0fc 100644 --- a/packages/vseed/tests/examples/features/features.test.ts +++ b/packages/vseed/tests/examples/features/features.test.ts @@ -15,114 +15,115 @@ import config_11 from './annotationArea/column.json' import config_12 from './annotationArea/histogram-range-window.json' import config_13 from './annotationArea/line-range-risk.json' import config_14 from './annotationArea/line.json' -import config_15 from './annotationArea/scatter-range-empty.json' -import config_16 from './annotationArea/scatter-range-rectangle.json' -import config_17 from './annotationArea/scatter-range-x.json' -import config_18 from './annotationArea/scatter-range-y.json' -import config_19 from './annotationHorizontalLine/fixed-y-value.json' -import config_20 from './annotationHorizontalLine/selector.json' -import config_21 from './annotationPoint/condition.json' -import config_22 from './annotationPoint/partial-datum.json' -import config_23 from './annotationPoint/value-point.json' -import config_24 from './annotationVerticalLine/fixed-x-value.json' -import config_25 from './annotationVerticalLine/selector.json' -import config_26 from './areaStyle/conditional-gradient.json' -import config_27 from './areaStyle/gradient.json' -import config_28 from './barStyle/barstyle-array.json' -import config_29 from './barStyle/conditional-gradient.json' -import config_30 from './barStyle/dimension-condition.json' -import config_31 from './barStyle/gradient.json' -import config_32 from './barStyle/partial-datum.json' -import config_33 from './barStyle/value.json' -import config_34 from './bodyCellStyle/pivotTable-background-scale-with-total.json' -import config_35 from './bodyCellStyle/pivotTable-background-scale.json' -import config_36 from './bodyCellStyle/table-background-scale.json' -import config_37 from './bodyCellStyle/table-background-with-total.json' -import config_38 from './bodyCellStyle/表格条件样式---全局样式.json' -import config_39 from './bodyCellStyle/表格条件样式---多个条件.json' -import config_40 from './bodyCellStyle/表格条件样式---根据度量值设置.json' -import config_41 from './bodyCellStyle/表格条件样式.json' -import config_42 from './bodyCellStyle/透视表条件样式---全局样式.json' -import config_43 from './bodyCellStyle/透视表条件样式---根据度量值设置.json' -import config_44 from './bodyCellStyle/透视表条件样式---符合条件.json' -import config_45 from './brush/enable.json' -import config_46 from './brush/removeonclick.json' -import config_47 from './centerText/defaults.json' -import config_48 from './centerText/empty.json' -import config_49 from './centerText/pivot.json' -import config_50 from './color/colormapping.json' -import config_51 from './color/colorscheme.json' -import config_52 from './dataset/单指标-单维度.json' -import config_53 from './dataset/单指标-多维度.json' -import config_54 from './dataset/单指标-零维度.json' -import config_55 from './dataset/多指标-单维度.json' -import config_56 from './dataset/多指标-多维度.json' -import config_57 from './dataset/多指标-零维度.json' -import config_58 from './dataset/数据维度与指标配置.json' -import config_59 from './dataset/自动选择.json' -import config_60 from './dimensions/列维度.json' -import config_61 from './dimensions/普通维度.json' -import config_62 from './dimensions/行维度.json' -import config_63 from './dimensions/透视维度.json' -import config_64 from './dynamicFilter/annotation-horizontal-line.json' -import config_65 from './dynamicFilter/annotation-point.json' -import config_66 from './dynamicFilter/annotation-vertical-line.json' -import config_67 from './dynamicFilter/area-line-point-style.json' -import config_68 from './dynamicFilter/column-bar-style.json' -import config_69 from './dynamicFilter/pivot-table-cell-style.json' -import config_70 from './dynamicFilter/table-dynamic-cell-style.json' -import config_71 from './formatter/base-dim-formatter-bar.json' -import config_72 from './formatter/base-dim-formatter-dualAxis.json' -import config_73 from './formatter/base-dim-formatter-heatmap.json' -import config_74 from './formatter/base-dim-formatter-pie.json' -import config_75 from './formatter/base-dim-formatter-pivotChart.json' -import config_76 from './formatter/base-dim-formatter-pivotTable.json' -import config_77 from './formatter/base-dim-formatter-radar.json' -import config_78 from './formatter/base-dim-formatter-scatter.json' -import config_79 from './formatter/base-dim-formatter-table.json' -import config_80 from './formatter/base-dim-formatter-treemap.json' -import config_81 from './i18n/en-us.json' -import config_82 from './i18n/zh-cn.json' -import config_83 from './label/enable.json' -import config_84 from './legend/border.json' -import config_85 from './legend/enable.json' -import config_86 from './legend/labelcolor.json' -import config_87 from './legend/labelfontsize.json' -import config_88 from './legend/labelfontweight.json' -import config_89 from './legend/maxsize.json' -import config_90 from './legend/position.json' -import config_91 from './legend/static.json' -import config_92 from './measures/指标组.json' -import config_93 from './numFormat/autoformat.json' -import config_94 from './numFormat/fractiondigits.json' -import config_95 from './numFormat/ratio-&-symbol.json' -import config_96 from './numFormat/roundingmode.json' -import config_97 from './numFormat/roundingpriority.json' -import config_98 from './numFormat/significantdigits.json' -import config_99 from './numFormat/suffix-&-prefix.json' -import config_100 from './numFormat/thousandseparator.json' -import config_101 from './numFormat/type.json' -import config_102 from './pieStyle/compact-donut.json' -import config_103 from './pieStyle/half-pie.json' -import config_104 from './pointStyle/active-point.json' -import config_105 from './pointStyle/dimension-condition.json' -import config_106 from './pointStyle/measure-condition.json' -import config_107 from './pointStyle/partial-datum.json' -import config_108 from './pointStyle/point-array.json' -import config_109 from './pointStyle/value.json' -import config_110 from './polynomial/column-示例.json' -import config_111 from './polynomial/scatter-示例.json' -import config_112 from './sort/图例自身排序.json' -import config_113 from './sort/指标排序-1.json' -import config_114 from './sort/指标排序.json' -import config_115 from './sort/维度排序-1.json' -import config_116 from './sort/维度排序.json' -import config_117 from './sort/自定义排序(图例id).json' -import config_118 from './sort/自定义排序(图例名称).json' -import config_119 from './sort/自定义排序.json' -import config_120 from './totals/columnTotal.json' -import config_121 from './totals/rowTotal.json' -import config_122 from './totals/singleIndicator.json' +import config_15 from './annotationArea/scatter-four-quadrants.json' +import config_16 from './annotationArea/scatter-range-empty.json' +import config_17 from './annotationArea/scatter-range-rectangle.json' +import config_18 from './annotationArea/scatter-range-x.json' +import config_19 from './annotationArea/scatter-range-y.json' +import config_20 from './annotationHorizontalLine/fixed-y-value.json' +import config_21 from './annotationHorizontalLine/selector.json' +import config_22 from './annotationPoint/condition.json' +import config_23 from './annotationPoint/partial-datum.json' +import config_24 from './annotationPoint/value-point.json' +import config_25 from './annotationVerticalLine/fixed-x-value.json' +import config_26 from './annotationVerticalLine/selector.json' +import config_27 from './areaStyle/conditional-gradient.json' +import config_28 from './areaStyle/gradient.json' +import config_29 from './barStyle/barstyle-array.json' +import config_30 from './barStyle/conditional-gradient.json' +import config_31 from './barStyle/dimension-condition.json' +import config_32 from './barStyle/gradient.json' +import config_33 from './barStyle/partial-datum.json' +import config_34 from './barStyle/value.json' +import config_35 from './bodyCellStyle/pivotTable-background-scale-with-total.json' +import config_36 from './bodyCellStyle/pivotTable-background-scale.json' +import config_37 from './bodyCellStyle/table-background-scale.json' +import config_38 from './bodyCellStyle/table-background-with-total.json' +import config_39 from './bodyCellStyle/表格条件样式---全局样式.json' +import config_40 from './bodyCellStyle/表格条件样式---多个条件.json' +import config_41 from './bodyCellStyle/表格条件样式---根据度量值设置.json' +import config_42 from './bodyCellStyle/表格条件样式.json' +import config_43 from './bodyCellStyle/透视表条件样式---全局样式.json' +import config_44 from './bodyCellStyle/透视表条件样式---根据度量值设置.json' +import config_45 from './bodyCellStyle/透视表条件样式---符合条件.json' +import config_46 from './brush/enable.json' +import config_47 from './brush/removeonclick.json' +import config_48 from './centerText/defaults.json' +import config_49 from './centerText/empty.json' +import config_50 from './centerText/pivot.json' +import config_51 from './color/colormapping.json' +import config_52 from './color/colorscheme.json' +import config_53 from './dataset/单指标-单维度.json' +import config_54 from './dataset/单指标-多维度.json' +import config_55 from './dataset/单指标-零维度.json' +import config_56 from './dataset/多指标-单维度.json' +import config_57 from './dataset/多指标-多维度.json' +import config_58 from './dataset/多指标-零维度.json' +import config_59 from './dataset/数据维度与指标配置.json' +import config_60 from './dataset/自动选择.json' +import config_61 from './dimensions/列维度.json' +import config_62 from './dimensions/普通维度.json' +import config_63 from './dimensions/行维度.json' +import config_64 from './dimensions/透视维度.json' +import config_65 from './dynamicFilter/annotation-horizontal-line.json' +import config_66 from './dynamicFilter/annotation-point.json' +import config_67 from './dynamicFilter/annotation-vertical-line.json' +import config_68 from './dynamicFilter/area-line-point-style.json' +import config_69 from './dynamicFilter/column-bar-style.json' +import config_70 from './dynamicFilter/pivot-table-cell-style.json' +import config_71 from './dynamicFilter/table-dynamic-cell-style.json' +import config_72 from './formatter/base-dim-formatter-bar.json' +import config_73 from './formatter/base-dim-formatter-dualAxis.json' +import config_74 from './formatter/base-dim-formatter-heatmap.json' +import config_75 from './formatter/base-dim-formatter-pie.json' +import config_76 from './formatter/base-dim-formatter-pivotChart.json' +import config_77 from './formatter/base-dim-formatter-pivotTable.json' +import config_78 from './formatter/base-dim-formatter-radar.json' +import config_79 from './formatter/base-dim-formatter-scatter.json' +import config_80 from './formatter/base-dim-formatter-table.json' +import config_81 from './formatter/base-dim-formatter-treemap.json' +import config_82 from './i18n/en-us.json' +import config_83 from './i18n/zh-cn.json' +import config_84 from './label/enable.json' +import config_85 from './legend/border.json' +import config_86 from './legend/enable.json' +import config_87 from './legend/labelcolor.json' +import config_88 from './legend/labelfontsize.json' +import config_89 from './legend/labelfontweight.json' +import config_90 from './legend/maxsize.json' +import config_91 from './legend/position.json' +import config_92 from './legend/static.json' +import config_93 from './measures/指标组.json' +import config_94 from './numFormat/autoformat.json' +import config_95 from './numFormat/fractiondigits.json' +import config_96 from './numFormat/ratio-&-symbol.json' +import config_97 from './numFormat/roundingmode.json' +import config_98 from './numFormat/roundingpriority.json' +import config_99 from './numFormat/significantdigits.json' +import config_100 from './numFormat/suffix-&-prefix.json' +import config_101 from './numFormat/thousandseparator.json' +import config_102 from './numFormat/type.json' +import config_103 from './pieStyle/compact-donut.json' +import config_104 from './pieStyle/half-pie.json' +import config_105 from './pointStyle/active-point.json' +import config_106 from './pointStyle/dimension-condition.json' +import config_107 from './pointStyle/measure-condition.json' +import config_108 from './pointStyle/partial-datum.json' +import config_109 from './pointStyle/point-array.json' +import config_110 from './pointStyle/value.json' +import config_111 from './polynomial/column-示例.json' +import config_112 from './polynomial/scatter-示例.json' +import config_113 from './sort/图例自身排序.json' +import config_114 from './sort/指标排序-1.json' +import config_115 from './sort/指标排序.json' +import config_116 from './sort/维度排序-1.json' +import config_117 from './sort/维度排序.json' +import config_118 from './sort/自定义排序(图例id).json' +import config_119 from './sort/自定义排序(图例名称).json' +import config_120 from './sort/自定义排序.json' +import config_121 from './totals/columnTotal.json' +import config_122 from './totals/rowTotal.json' +import config_123 from './totals/singleIndicator.json' const cases = [ { name: 'animation/bar-like', vseed: config_0 }, @@ -140,114 +141,115 @@ const cases = [ { name: 'annotationArea/histogram-range-window', vseed: config_12 }, { name: 'annotationArea/line-range-risk', vseed: config_13 }, { name: 'annotationArea/line', vseed: config_14 }, - { name: 'annotationArea/scatter-range-empty', vseed: config_15 }, - { name: 'annotationArea/scatter-range-rectangle', vseed: config_16 }, - { name: 'annotationArea/scatter-range-x', vseed: config_17 }, - { name: 'annotationArea/scatter-range-y', vseed: config_18 }, - { name: 'annotationHorizontalLine/fixed-y-value', vseed: config_19 }, - { name: 'annotationHorizontalLine/selector', vseed: config_20 }, - { name: 'annotationPoint/condition', vseed: config_21 }, - { name: 'annotationPoint/partial-datum', vseed: config_22 }, - { name: 'annotationPoint/value-point', vseed: config_23 }, - { name: 'annotationVerticalLine/fixed-x-value', vseed: config_24 }, - { name: 'annotationVerticalLine/selector', vseed: config_25 }, - { name: 'areaStyle/conditional-gradient', vseed: config_26 }, - { name: 'areaStyle/gradient', vseed: config_27 }, - { name: 'barStyle/barstyle-array', vseed: config_28 }, - { name: 'barStyle/conditional-gradient', vseed: config_29 }, - { name: 'barStyle/dimension-condition', vseed: config_30 }, - { name: 'barStyle/gradient', vseed: config_31 }, - { name: 'barStyle/partial-datum', vseed: config_32 }, - { name: 'barStyle/value', vseed: config_33 }, - { name: 'bodyCellStyle/pivotTable-background-scale-with-total', vseed: config_34 }, - { name: 'bodyCellStyle/pivotTable-background-scale', vseed: config_35 }, - { name: 'bodyCellStyle/table-background-scale', vseed: config_36 }, - { name: 'bodyCellStyle/table-background-with-total', vseed: config_37 }, - { name: 'bodyCellStyle/表格条件样式---全局样式', vseed: config_38 }, - { name: 'bodyCellStyle/表格条件样式---多个条件', vseed: config_39 }, - { name: 'bodyCellStyle/表格条件样式---根据度量值设置', vseed: config_40 }, - { name: 'bodyCellStyle/表格条件样式', vseed: config_41 }, - { name: 'bodyCellStyle/透视表条件样式---全局样式', vseed: config_42 }, - { name: 'bodyCellStyle/透视表条件样式---根据度量值设置', vseed: config_43 }, - { name: 'bodyCellStyle/透视表条件样式---符合条件', vseed: config_44 }, - { name: 'brush/enable', vseed: config_45 }, - { name: 'brush/removeonclick', vseed: config_46 }, - { name: 'centerText/defaults', vseed: config_47 }, - { name: 'centerText/empty', vseed: config_48 }, - { name: 'centerText/pivot', vseed: config_49 }, - { name: 'color/colormapping', vseed: config_50 }, - { name: 'color/colorscheme', vseed: config_51 }, - { name: 'dataset/单指标-单维度', vseed: config_52 }, - { name: 'dataset/单指标-多维度', vseed: config_53 }, - { name: 'dataset/单指标-零维度', vseed: config_54 }, - { name: 'dataset/多指标-单维度', vseed: config_55 }, - { name: 'dataset/多指标-多维度', vseed: config_56 }, - { name: 'dataset/多指标-零维度', vseed: config_57 }, - { name: 'dataset/数据维度与指标配置', vseed: config_58 }, - { name: 'dataset/自动选择', vseed: config_59 }, - { name: 'dimensions/列维度', vseed: config_60 }, - { name: 'dimensions/普通维度', vseed: config_61 }, - { name: 'dimensions/行维度', vseed: config_62 }, - { name: 'dimensions/透视维度', vseed: config_63 }, - { name: 'dynamicFilter/annotation-horizontal-line', vseed: config_64 }, - { name: 'dynamicFilter/annotation-point', vseed: config_65 }, - { name: 'dynamicFilter/annotation-vertical-line', vseed: config_66 }, - { name: 'dynamicFilter/area-line-point-style', vseed: config_67 }, - { name: 'dynamicFilter/column-bar-style', vseed: config_68 }, - { name: 'dynamicFilter/pivot-table-cell-style', vseed: config_69 }, - { name: 'dynamicFilter/table-dynamic-cell-style', vseed: config_70 }, - { name: 'formatter/base-dim-formatter-bar', vseed: config_71 }, - { name: 'formatter/base-dim-formatter-dualAxis', vseed: config_72 }, - { name: 'formatter/base-dim-formatter-heatmap', vseed: config_73 }, - { name: 'formatter/base-dim-formatter-pie', vseed: config_74 }, - { name: 'formatter/base-dim-formatter-pivotChart', vseed: config_75 }, - { name: 'formatter/base-dim-formatter-pivotTable', vseed: config_76 }, - { name: 'formatter/base-dim-formatter-radar', vseed: config_77 }, - { name: 'formatter/base-dim-formatter-scatter', vseed: config_78 }, - { name: 'formatter/base-dim-formatter-table', vseed: config_79 }, - { name: 'formatter/base-dim-formatter-treemap', vseed: config_80 }, - { name: 'i18n/en-us', vseed: config_81 }, - { name: 'i18n/zh-cn', vseed: config_82 }, - { name: 'label/enable', vseed: config_83 }, - { name: 'legend/border', vseed: config_84 }, - { name: 'legend/enable', vseed: config_85 }, - { name: 'legend/labelcolor', vseed: config_86 }, - { name: 'legend/labelfontsize', vseed: config_87 }, - { name: 'legend/labelfontweight', vseed: config_88 }, - { name: 'legend/maxsize', vseed: config_89 }, - { name: 'legend/position', vseed: config_90 }, - { name: 'legend/static', vseed: config_91 }, - { name: 'measures/指标组', vseed: config_92 }, - { name: 'numFormat/autoformat', vseed: config_93 }, - { name: 'numFormat/fractiondigits', vseed: config_94 }, - { name: 'numFormat/ratio-&-symbol', vseed: config_95 }, - { name: 'numFormat/roundingmode', vseed: config_96 }, - { name: 'numFormat/roundingpriority', vseed: config_97 }, - { name: 'numFormat/significantdigits', vseed: config_98 }, - { name: 'numFormat/suffix-&-prefix', vseed: config_99 }, - { name: 'numFormat/thousandseparator', vseed: config_100 }, - { name: 'numFormat/type', vseed: config_101 }, - { name: 'pieStyle/compact-donut', vseed: config_102 }, - { name: 'pieStyle/half-pie', vseed: config_103 }, - { name: 'pointStyle/active-point', vseed: config_104 }, - { name: 'pointStyle/dimension-condition', vseed: config_105 }, - { name: 'pointStyle/measure-condition', vseed: config_106 }, - { name: 'pointStyle/partial-datum', vseed: config_107 }, - { name: 'pointStyle/point-array', vseed: config_108 }, - { name: 'pointStyle/value', vseed: config_109 }, - { name: 'polynomial/column-示例', vseed: config_110 }, - { name: 'polynomial/scatter-示例', vseed: config_111 }, - { name: 'sort/图例自身排序', vseed: config_112 }, - { name: 'sort/指标排序-1', vseed: config_113 }, - { name: 'sort/指标排序', vseed: config_114 }, - { name: 'sort/维度排序-1', vseed: config_115 }, - { name: 'sort/维度排序', vseed: config_116 }, - { name: 'sort/自定义排序(图例id)', vseed: config_117 }, - { name: 'sort/自定义排序(图例名称)', vseed: config_118 }, - { name: 'sort/自定义排序', vseed: config_119 }, - { name: 'totals/columnTotal', vseed: config_120 }, - { name: 'totals/rowTotal', vseed: config_121 }, - { name: 'totals/singleIndicator', vseed: config_122 } + { name: 'annotationArea/scatter-four-quadrants', vseed: config_15 }, + { name: 'annotationArea/scatter-range-empty', vseed: config_16 }, + { name: 'annotationArea/scatter-range-rectangle', vseed: config_17 }, + { name: 'annotationArea/scatter-range-x', vseed: config_18 }, + { name: 'annotationArea/scatter-range-y', vseed: config_19 }, + { name: 'annotationHorizontalLine/fixed-y-value', vseed: config_20 }, + { name: 'annotationHorizontalLine/selector', vseed: config_21 }, + { name: 'annotationPoint/condition', vseed: config_22 }, + { name: 'annotationPoint/partial-datum', vseed: config_23 }, + { name: 'annotationPoint/value-point', vseed: config_24 }, + { name: 'annotationVerticalLine/fixed-x-value', vseed: config_25 }, + { name: 'annotationVerticalLine/selector', vseed: config_26 }, + { name: 'areaStyle/conditional-gradient', vseed: config_27 }, + { name: 'areaStyle/gradient', vseed: config_28 }, + { name: 'barStyle/barstyle-array', vseed: config_29 }, + { name: 'barStyle/conditional-gradient', vseed: config_30 }, + { name: 'barStyle/dimension-condition', vseed: config_31 }, + { name: 'barStyle/gradient', vseed: config_32 }, + { name: 'barStyle/partial-datum', vseed: config_33 }, + { name: 'barStyle/value', vseed: config_34 }, + { name: 'bodyCellStyle/pivotTable-background-scale-with-total', vseed: config_35 }, + { name: 'bodyCellStyle/pivotTable-background-scale', vseed: config_36 }, + { name: 'bodyCellStyle/table-background-scale', vseed: config_37 }, + { name: 'bodyCellStyle/table-background-with-total', vseed: config_38 }, + { name: 'bodyCellStyle/表格条件样式---全局样式', vseed: config_39 }, + { name: 'bodyCellStyle/表格条件样式---多个条件', vseed: config_40 }, + { name: 'bodyCellStyle/表格条件样式---根据度量值设置', vseed: config_41 }, + { name: 'bodyCellStyle/表格条件样式', vseed: config_42 }, + { name: 'bodyCellStyle/透视表条件样式---全局样式', vseed: config_43 }, + { name: 'bodyCellStyle/透视表条件样式---根据度量值设置', vseed: config_44 }, + { name: 'bodyCellStyle/透视表条件样式---符合条件', vseed: config_45 }, + { name: 'brush/enable', vseed: config_46 }, + { name: 'brush/removeonclick', vseed: config_47 }, + { name: 'centerText/defaults', vseed: config_48 }, + { name: 'centerText/empty', vseed: config_49 }, + { name: 'centerText/pivot', vseed: config_50 }, + { name: 'color/colormapping', vseed: config_51 }, + { name: 'color/colorscheme', vseed: config_52 }, + { name: 'dataset/单指标-单维度', vseed: config_53 }, + { name: 'dataset/单指标-多维度', vseed: config_54 }, + { name: 'dataset/单指标-零维度', vseed: config_55 }, + { name: 'dataset/多指标-单维度', vseed: config_56 }, + { name: 'dataset/多指标-多维度', vseed: config_57 }, + { name: 'dataset/多指标-零维度', vseed: config_58 }, + { name: 'dataset/数据维度与指标配置', vseed: config_59 }, + { name: 'dataset/自动选择', vseed: config_60 }, + { name: 'dimensions/列维度', vseed: config_61 }, + { name: 'dimensions/普通维度', vseed: config_62 }, + { name: 'dimensions/行维度', vseed: config_63 }, + { name: 'dimensions/透视维度', vseed: config_64 }, + { name: 'dynamicFilter/annotation-horizontal-line', vseed: config_65 }, + { name: 'dynamicFilter/annotation-point', vseed: config_66 }, + { name: 'dynamicFilter/annotation-vertical-line', vseed: config_67 }, + { name: 'dynamicFilter/area-line-point-style', vseed: config_68 }, + { name: 'dynamicFilter/column-bar-style', vseed: config_69 }, + { name: 'dynamicFilter/pivot-table-cell-style', vseed: config_70 }, + { name: 'dynamicFilter/table-dynamic-cell-style', vseed: config_71 }, + { name: 'formatter/base-dim-formatter-bar', vseed: config_72 }, + { name: 'formatter/base-dim-formatter-dualAxis', vseed: config_73 }, + { name: 'formatter/base-dim-formatter-heatmap', vseed: config_74 }, + { name: 'formatter/base-dim-formatter-pie', vseed: config_75 }, + { name: 'formatter/base-dim-formatter-pivotChart', vseed: config_76 }, + { name: 'formatter/base-dim-formatter-pivotTable', vseed: config_77 }, + { name: 'formatter/base-dim-formatter-radar', vseed: config_78 }, + { name: 'formatter/base-dim-formatter-scatter', vseed: config_79 }, + { name: 'formatter/base-dim-formatter-table', vseed: config_80 }, + { name: 'formatter/base-dim-formatter-treemap', vseed: config_81 }, + { name: 'i18n/en-us', vseed: config_82 }, + { name: 'i18n/zh-cn', vseed: config_83 }, + { name: 'label/enable', vseed: config_84 }, + { name: 'legend/border', vseed: config_85 }, + { name: 'legend/enable', vseed: config_86 }, + { name: 'legend/labelcolor', vseed: config_87 }, + { name: 'legend/labelfontsize', vseed: config_88 }, + { name: 'legend/labelfontweight', vseed: config_89 }, + { name: 'legend/maxsize', vseed: config_90 }, + { name: 'legend/position', vseed: config_91 }, + { name: 'legend/static', vseed: config_92 }, + { name: 'measures/指标组', vseed: config_93 }, + { name: 'numFormat/autoformat', vseed: config_94 }, + { name: 'numFormat/fractiondigits', vseed: config_95 }, + { name: 'numFormat/ratio-&-symbol', vseed: config_96 }, + { name: 'numFormat/roundingmode', vseed: config_97 }, + { name: 'numFormat/roundingpriority', vseed: config_98 }, + { name: 'numFormat/significantdigits', vseed: config_99 }, + { name: 'numFormat/suffix-&-prefix', vseed: config_100 }, + { name: 'numFormat/thousandseparator', vseed: config_101 }, + { name: 'numFormat/type', vseed: config_102 }, + { name: 'pieStyle/compact-donut', vseed: config_103 }, + { name: 'pieStyle/half-pie', vseed: config_104 }, + { name: 'pointStyle/active-point', vseed: config_105 }, + { name: 'pointStyle/dimension-condition', vseed: config_106 }, + { name: 'pointStyle/measure-condition', vseed: config_107 }, + { name: 'pointStyle/partial-datum', vseed: config_108 }, + { name: 'pointStyle/point-array', vseed: config_109 }, + { name: 'pointStyle/value', vseed: config_110 }, + { name: 'polynomial/column-示例', vseed: config_111 }, + { name: 'polynomial/scatter-示例', vseed: config_112 }, + { name: 'sort/图例自身排序', vseed: config_113 }, + { name: 'sort/指标排序-1', vseed: config_114 }, + { name: 'sort/指标排序', vseed: config_115 }, + { name: 'sort/维度排序-1', vseed: config_116 }, + { name: 'sort/维度排序', vseed: config_117 }, + { name: 'sort/自定义排序(图例id)', vseed: config_118 }, + { name: 'sort/自定义排序(图例名称)', vseed: config_119 }, + { name: 'sort/自定义排序', vseed: config_120 }, + { name: 'totals/columnTotal', vseed: config_121 }, + { name: 'totals/rowTotal', vseed: config_122 }, + { name: 'totals/singleIndicator', vseed: config_123 } ] describe('features', () => { diff --git a/packages/vseed/tests/unit/builder/annotationAreaRangeRender.test.ts b/packages/vseed/tests/unit/builder/annotationAreaRangeRender.test.ts index 1db4df96ee..9ce8d91c06 100644 --- a/packages/vseed/tests/unit/builder/annotationAreaRangeRender.test.ts +++ b/packages/vseed/tests/unit/builder/annotationAreaRangeRender.test.ts @@ -2,6 +2,7 @@ import { afterEach, beforeAll, describe, expect, test } from 'vitest' import VChart, { type ICartesianSeries, type IScatterChartSpec, type ISpec } from '@visactor/vchart' import { Builder, registerAll } from '@visactor/vseed' import type { AnnotationArea, Scatter, VSeed } from '@visactor/vseed' +import fourQuadrants from '../../examples/features/annotationArea/scatter-four-quadrants.json' const charts: VChart[] = [] const seed = (annotationArea?: AnnotationArea): Scatter => ({ @@ -38,9 +39,16 @@ const render = (spec: ISpec) => { return chart } -type RenderedMarker = { _markerComponent: { attribute: { points: Array<{ x: number; y: number }> } } } -const points = (chart: VChart) => - (chart.getChart().getComponentsByKey('markArea')[0] as unknown as RenderedMarker)._markerComponent.attribute.points +type RenderedMarker = { + _markerComponent: { + attribute: { points: Array<{ x: number; y: number }> } + getLabel: () => { attribute: { x: number; y: number } } + } +} +const marker = (chart: VChart, index = 0) => + (chart.getChart().getComponentsByKey('markArea')[index] as unknown as RenderedMarker)._markerComponent +const points = (chart: VChart, index = 0) => + marker(chart, index).attribute.points describe('annotationArea rendered coordinate ranges', () => { beforeAll(registerAll) @@ -49,6 +57,45 @@ describe('annotationArea rendered coordinate ranges', () => { document.body.replaceChildren() }) + test('renders the four-quadrant example as a complete 2×2 partition', () => { + const spec = Builder.from(fourQuadrants.vseed as VSeed).build() as ISpec + const chart = render({ ...spec, width: 600, height: 400, autoFit: false, animation: false }) + const relative = chart.getChart().getAllSeries()[0] as ICartesianSeries + const origin = relative.getRegion().getLayoutStartPoint() + const xAxis = relative.getXAxisHelper() + const yAxis = relative.getYAxisHelper() + const xMin = xAxis.dataToPosition([0]) + origin.x + const xMiddle = xAxis.dataToPosition([50]) + origin.x + const xMax = xAxis.dataToPosition([100]) + origin.x + const yMax = yAxis.dataToPosition([100]) + origin.y + const yMiddle = yAxis.dataToPosition([50]) + origin.y + const yMin = yAxis.dataToPosition([0]) + origin.y + const rectangle = (left: number, right: number, top: number, bottom: number) => [ + { x: left, y: top }, + { x: right, y: top }, + { x: right, y: bottom }, + { x: left, y: bottom }, + ] + + expect(chart.getChart().getComponentsByKey('markArea')).toHaveLength(4) + const areas = [0, 1, 2, 3].map((index) => points(chart, index)) + expect(areas).toEqual([ + rectangle(xMin, xMiddle, yMax, yMiddle), + rectangle(xMiddle, xMax, yMax, yMiddle), + rectangle(xMin, xMiddle, yMiddle, yMin), + rectangle(xMiddle, xMax, yMiddle, yMin), + ]) + expect([0, 1, 2, 3].map((index) => { + const { x, y } = marker(chart, index).getLabel().attribute + return { x, y } + })).toEqual( + areas.map(([topLeft, , bottomRight]) => ({ + x: (topLeft.x + bottomRight.x) / 2, + y: (topLeft.y + bottomRight.y) / 2, + })), + ) + }) + test('renders exact coordinates and recomputes them on resize', async () => { const chart = render(specFor({ range: { x: { min: 0, max: 100 }, y: { min: 0.2, max: 0.4 } } })) const verify = () => { @@ -108,7 +155,7 @@ describe('annotationArea rendered coordinate ranges', () => { ], dimensions: [{ id: 'group', encoding: 'xAxis' }], measures: [{ id: 'value', encoding: 'yAxis' }], - annotationArea: { range: { y: { min: 10, max: 'axisMax' } } }, + annotationArea: { range: { y: { min: 10, max: 'axisMax' } }, text: '高风险', textPosition: 'middle' }, } as VSeed).build() as ISpec const chart = render({ ...spec, width: 600, height: 400, autoFit: false, animation: false }) const relative = chart.getChart().getAllSeries()[0] as ICartesianSeries @@ -124,6 +171,11 @@ describe('annotationArea rendered coordinate ranges', () => { { x: origin.x + width, y: yAxis.dataToPosition([10]) + origin.y }, { x: origin.x, y: yAxis.dataToPosition([10]) + origin.y }, ]) + const { x, y } = marker(chart).getLabel().attribute + expect({ x, y }).toEqual({ + x: (markerPoints[0].x + markerPoints[2].x) / 2, + y: (markerPoints[0].y + markerPoints[2].y) / 2, + }) }) test('renders a histogram window against its numeric x axis', () => {