@visactor/vseed 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dataReshape/constant.d.ts +2 -0
- package/dist/index.cjs +740 -288
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +733 -286
- package/dist/index.js.map +1 -1
- package/dist/pipeline/advanced/chart/pipes/encoding/bar.d.ts +1 -19
- package/dist/pipeline/advanced/chart/pipes/encoding/column.d.ts +1 -19
- package/dist/pipeline/advanced/chart/pipes/encoding/dualAxis.d.ts +1 -19
- package/dist/pipeline/advanced/chart/pipes/encoding/encodingAdapter.d.ts +2 -0
- package/dist/pipeline/advanced/chart/pipes/encoding/funnel.d.ts +1 -17
- package/dist/pipeline/advanced/chart/pipes/encoding/heatmap.d.ts +1 -19
- package/dist/pipeline/advanced/chart/pipes/encoding/index.d.ts +11 -9
- package/dist/pipeline/advanced/chart/pipes/encoding/line.d.ts +1 -18
- package/dist/pipeline/advanced/chart/pipes/encoding/pie.d.ts +1 -18
- package/dist/pipeline/advanced/chart/pipes/encoding/radar.d.ts +1 -19
- package/dist/pipeline/advanced/chart/pipes/encoding/rose.d.ts +1 -19
- package/dist/pipeline/advanced/chart/pipes/encoding/scatter.d.ts +1 -18
- package/dist/pipeline/advanced/chart/pipes/measures/utils.d.ts +7 -1
- package/dist/pipeline/spec/chart/pipes/tooltip/index.d.ts +2 -0
- package/dist/pipeline/spec/chart/pipes/tooltip/tooltip.d.ts +21 -1
- package/dist/pipeline/spec/chart/pipes/tooltip/tooltipHeatmap.d.ts +15 -0
- package/dist/pipeline/spec/chart/pipes/tooltip/tooltipScatter.d.ts +15 -0
- package/dist/types/chartType/area/area.d.ts +7 -27
- package/dist/types/chartType/areaPercent/areaPercent.d.ts +7 -27
- package/dist/types/chartType/bar/bar.d.ts +8 -29
- package/dist/types/chartType/barParallel/barParallel.d.ts +8 -29
- package/dist/types/chartType/barPercent/barPercent.d.ts +8 -29
- package/dist/types/chartType/column/column.d.ts +8 -29
- package/dist/types/chartType/columnParallel/columnParallel.d.ts +9 -30
- package/dist/types/chartType/columnPercent/columnPercent.d.ts +8 -29
- package/dist/types/chartType/donut/donut.d.ts +7 -27
- package/dist/types/chartType/dualAxis/dualAxis.d.ts +9 -29
- package/dist/types/chartType/funnel/funnel.d.ts +7 -26
- package/dist/types/chartType/heatmap/heatmap.d.ts +8 -29
- package/dist/types/chartType/line/line.d.ts +7 -27
- package/dist/types/chartType/pie/pie.d.ts +7 -27
- package/dist/types/chartType/pivotTable/pivotTable.d.ts +4 -7
- package/dist/types/chartType/radar/radar.d.ts +7 -29
- package/dist/types/chartType/rose/rose.d.ts +8 -29
- package/dist/types/chartType/roseParallel/roseParallel.d.ts +8 -29
- package/dist/types/chartType/scatter/scatter.d.ts +7 -28
- package/dist/umd/index.js +736 -288
- package/dist/umd/index.js.map +1 -1
- package/package.json +2 -2
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Locale } from '../../i18n';
|
2
|
-
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, BackgroundColor, BarStyle, Color, CrosshairRect, Dataset, Dimensions, Label, Legend, StackCornerRadius, Theme, Tooltip, XBandAxis, YLinearAxis, MeasureTree, Sort, SortLegend
|
2
|
+
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, BackgroundColor, BarStyle, Color, CrosshairRect, Dataset, Dimensions, Label, Legend, StackCornerRadius, Theme, Tooltip, XBandAxis, YLinearAxis, MeasureTree, Sort, SortLegend } from '../../properties';
|
3
3
|
/**
|
4
4
|
* @description 柱状图,适用于纵向数据对比场景,X轴为类目轴(分类数据),Y轴为数值轴(连续数据),柱子纵向排列
|
5
5
|
* 适用场景:
|
@@ -7,22 +7,13 @@ import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, Annotat
|
|
7
7
|
* - 需要直观比较不同类别的数值大小
|
8
8
|
* - 展示时间序列数据变化趋势
|
9
9
|
* @encoding
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
* 维度映射规则:
|
19
|
-
* 1. 用户指定的xAxis维度映射至X轴, 支持多个维度; 若未指定, 则默认映射第一个维度
|
20
|
-
* 2. 用户指定的color维度映射至颜色通道, 支持多个维度; 若未指定, 则默认映射指标名称
|
21
|
-
* 3. 用户指定的detail维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
22
|
-
* 指标映射规则:
|
23
|
-
* 1. 指标未配置encoding, 则默认映射至Y轴;
|
24
|
-
* 2. 用户指定的yAxis指标映射至Y轴, 支持多个指标;
|
25
|
-
* 3. 所有指标均映射到Tooltip
|
10
|
+
* 柱状图支持以下视觉通道:
|
11
|
+
* `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴
|
12
|
+
* `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴
|
13
|
+
* `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用
|
14
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
15
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
16
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
26
17
|
* @warning
|
27
18
|
* 数据要求:
|
28
19
|
* - 至少1个数值字段(度量)
|
@@ -47,18 +38,6 @@ export interface Column {
|
|
47
38
|
* @example [{category:'A', value:100}, {category:'B', value:200}]
|
48
39
|
*/
|
49
40
|
dataset: Dataset;
|
50
|
-
/**
|
51
|
-
* @description 编码配置, 堆叠柱状图的视觉通道, 包括: x通道, color通道, detail通道, label通道, tooltip通道
|
52
|
-
* - x: 映射到X轴的字段, 支持放入多个维度
|
53
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
54
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
55
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
56
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
57
|
-
*
|
58
|
-
* @tip 特殊的:
|
59
|
-
* - y: measures会直接映射到Y轴通道
|
60
|
-
*/
|
61
|
-
encoding?: Pick<Encoding, 'x' | 'color' | 'detail' | 'label' | 'tooltip'>;
|
62
41
|
/**
|
63
42
|
* @description 柱状图的第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示
|
64
43
|
* @type {Dimensions}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Locale } from '../../i18n';
|
2
|
-
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, BackgroundColor, BarStyle, Color, CrosshairRect, Dataset, Dimensions, Label, Legend, StackCornerRadius, Theme, Tooltip, XBandAxis, YLinearAxis, MeasureTree, SortLegend, Sort
|
2
|
+
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, BackgroundColor, BarStyle, Color, CrosshairRect, Dataset, Dimensions, Label, Legend, StackCornerRadius, Theme, Tooltip, XBandAxis, YLinearAxis, MeasureTree, SortLegend, Sort } from '../../properties';
|
3
3
|
/**
|
4
4
|
* @description 并列柱状图,适用于多指标并行对比场景,多个柱子并列排列展示不同指标值
|
5
5
|
* 适用场景:
|
@@ -7,22 +7,13 @@ import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, Annotat
|
|
7
7
|
* - 多维度数据的横向比较
|
8
8
|
* - 指标间关联性分析
|
9
9
|
* @encoding
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
* 维度映射规则:
|
19
|
-
* 1. 用户指定的xAxis维度映射至X轴, 支持多个维度; 若未指定, 则默认映射第一个维度
|
20
|
-
* 2. 用户指定的color维度映射至颜色通道, 支持多个维度; 若未指定, 则默认映射指标名称
|
21
|
-
* 3. 用户指定的detail维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
22
|
-
* 指标映射规则:
|
23
|
-
* 1. 指标未配置encoding, 则默认映射至Y轴;
|
24
|
-
* 2. 用户指定的yAxis指标映射至Y轴, 支持多个指标;
|
25
|
-
* 3. 所有指标均映射到Tooltip
|
10
|
+
* 并列柱状图支持以下视觉通道:
|
11
|
+
* `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴
|
12
|
+
* `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴
|
13
|
+
* `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用
|
14
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
15
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
16
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
26
17
|
* @warning
|
27
18
|
* 数据要求:
|
28
19
|
* - 至少1个指标字段(度量)
|
@@ -45,18 +36,6 @@ export interface ColumnParallel {
|
|
45
36
|
* @example [{category:'A', value1:100, value2:200}, {category:'B', value1:150, value2:250}]
|
46
37
|
*/
|
47
38
|
dataset: Dataset;
|
48
|
-
/**
|
49
|
-
* @description 编码配置, 并列柱状图的视觉通道, 包括: x通道, color通道, detail通道, label通道, tooltip通道
|
50
|
-
* - x: 映射到X轴的字段, 支持放入多个维度
|
51
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
52
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
53
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
54
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
55
|
-
*
|
56
|
-
* @tip 特殊的:
|
57
|
-
* - y: measures会直接映射到Y轴通道
|
58
|
-
*/
|
59
|
-
encoding?: Pick<Encoding, 'x' | 'color' | 'detail' | 'label' | 'tooltip'>;
|
60
39
|
/**
|
61
40
|
* @description 维度, 第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示.
|
62
41
|
* @type {Dimensions}
|
@@ -66,7 +45,7 @@ export interface ColumnParallel {
|
|
66
45
|
/**
|
67
46
|
* @description 指标, 并列柱状图的所有指标会自动合并为一个指标, 映射到Y轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示.
|
68
47
|
* @type {DimensionTree}
|
69
|
-
|
48
|
+
Axis * @example [{id: 'value1', alias: '指标1'}, {id: 'value2', alias: '指标2'}]
|
70
49
|
*/
|
71
50
|
measures?: MeasureTree;
|
72
51
|
/**
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Locale } from '../../i18n';
|
2
|
-
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, BackgroundColor, BarStyle, Color, CrosshairRect, Dataset, Dimensions, Label, Legend, StackCornerRadius, Theme, Tooltip, XBandAxis, YLinearAxis, MeasureTree, Sort, SortLegend
|
2
|
+
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, BackgroundColor, BarStyle, Color, CrosshairRect, Dataset, Dimensions, Label, Legend, StackCornerRadius, Theme, Tooltip, XBandAxis, YLinearAxis, MeasureTree, Sort, SortLegend } from '../../properties';
|
3
3
|
/**
|
4
4
|
* @description 百分比柱状图,适用于展示各类别占比关系的场景,Y轴以百分比形式展示数据占比
|
5
5
|
* 适用场景:
|
@@ -7,22 +7,13 @@ import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, Annotat
|
|
7
7
|
* - 多维度数据的构成分析
|
8
8
|
* - 时间序列的占比变化趋势
|
9
9
|
* @encoding
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
* 维度映射规则:
|
19
|
-
* 1. 用户指定的xAxis维度映射至X轴, 支持多个维度; 若未指定, 则默认映射第一个维度
|
20
|
-
* 2. 用户指定的color维度映射至颜色通道, 支持多个维度; 若未指定, 则默认映射指标名称
|
21
|
-
* 3. 用户指定的detail维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
22
|
-
* 指标映射规则:
|
23
|
-
* 1. 指标未配置encoding, 则默认映射至Y轴;
|
24
|
-
* 2. 用户指定的yAxis指标映射至Y轴, 支持多个指标;
|
25
|
-
* 3. 所有指标均映射到Tooltip
|
10
|
+
* 百分比柱状图支持以下视觉通道:
|
11
|
+
* `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴
|
12
|
+
* `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴
|
13
|
+
* `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用
|
14
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
15
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
16
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
26
17
|
* @warning
|
27
18
|
* 数据要求:
|
28
19
|
* - 至少1个指标字段(度量)
|
@@ -49,18 +40,6 @@ export interface ColumnPercent {
|
|
49
40
|
* @example [{category:'A', value:30}, {category:'B', value:70}]
|
50
41
|
*/
|
51
42
|
dataset: Dataset;
|
52
|
-
/**
|
53
|
-
* @description 编码配置, 百分比柱状图的视觉通道, 包括: x通道, color通道, detail通道, label通道, tooltip通道
|
54
|
-
* - x: 映射到X轴的字段, 支持放入多个维度
|
55
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
56
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
57
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
58
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
59
|
-
*
|
60
|
-
* @tip 特殊的:
|
61
|
-
* - y: measures会直接映射到Y轴通道
|
62
|
-
*/
|
63
|
-
encoding?: Pick<Encoding, 'x' | 'color' | 'detail' | 'label' | 'tooltip'>;
|
64
43
|
/**
|
65
44
|
* 维度
|
66
45
|
* @description 第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示.
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { type Locale } from '../../i18n';
|
2
|
-
import type { BackgroundColor, Color, Dataset, Dimensions,
|
2
|
+
import type { BackgroundColor, Color, Dataset, Dimensions, Label, Legend, MeasureTree, Theme, Tooltip } from '../../properties';
|
3
3
|
/**
|
4
4
|
* @description 环形图,适用于展示单一维度数据的占比关系,中心留有空白区域可展示汇总信息
|
5
5
|
* 适用场景:
|
@@ -7,21 +7,12 @@ import type { BackgroundColor, Color, Dataset, Dimensions, Encoding, Label, Lege
|
|
7
7
|
* - 强调数据的整体与部分关系
|
8
8
|
* - 中心区域需要展示关键指标或标题
|
9
9
|
* @encoding
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
* 维度映射规则:
|
18
|
-
* 2. 用户指定的`color`维度映射至颜色通道, 支持多个维度; 若未指定, 则默认将指标名称映射至颜色通道, 作为图例展示
|
19
|
-
* 3. 用户指定的`detail`维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
20
|
-
* 指标映射规则:
|
21
|
-
* 1. 指标未配置`encoding`, 则默认映射至angle轴;
|
22
|
-
* 2. 用户指定的`angle`指标映射至angle轴, 支持多个指标;
|
23
|
-
* 3. 用户指定的`color`指标映射至color通道, 支持多个指标;
|
24
|
-
* 3. 所有指标均映射到Tooltip
|
10
|
+
* 环形图支持以下视觉通道:
|
11
|
+
* `angle` : 角度通道, 支持`多个指标`, 按指标值映射至扇形角度
|
12
|
+
* `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用
|
13
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
14
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
15
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
25
16
|
* @warning
|
26
17
|
* 数据要求:
|
27
18
|
* - 至少1个指标字段(度量)
|
@@ -48,17 +39,6 @@ export interface Donut {
|
|
48
39
|
* @example [{category:'A', value:30}, {category:'B', value:70}]
|
49
40
|
*/
|
50
41
|
dataset: Dataset;
|
51
|
-
/**
|
52
|
-
* @description 编码配置, 环形图的视觉通道, 包括: color通道, detail通道, label通道, tooltip通道
|
53
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
54
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
55
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
56
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
57
|
-
*
|
58
|
-
* @tip 特殊的:
|
59
|
-
* - angle: measures会直接映射到角度通道
|
60
|
-
*/
|
61
|
-
encoding?: Pick<Encoding, 'color' | 'detail' | 'label' | 'tooltip'>;
|
62
42
|
/**
|
63
43
|
* 维度
|
64
44
|
* @description 环形图的所有维度会与指标名称(存在多个指标时)合并成1个维度, 映射到饼图的角度, 并作为图例项展示.
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Locale } from '../../i18n';
|
2
|
-
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, AreaStyle, BackgroundColor, BarStyle, Color, CrosshairRect, Dataset, Dimensions, DualChartType, DualMeasures,
|
2
|
+
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, AreaStyle, BackgroundColor, BarStyle, Color, CrosshairRect, Dataset, Dimensions, DualChartType, DualMeasures, Label, Legend, LineStyle, MeasureTree, PointStyle, Sort, SortLegend, Theme, Tooltip, YLinearAxis } from '../../properties';
|
3
3
|
/**
|
4
4
|
* @description 双轴图,适用于展示两个不同量级或不同单位指标的对比关系,包含主坐标轴和次坐标轴
|
5
5
|
* 适用场景:
|
@@ -8,22 +8,14 @@ import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, Annotat
|
|
8
8
|
* - 需要同时展示数值和增长率等复合指标
|
9
9
|
* - 支持不同类型图表组合(如折线图+柱状图/ 折线图+面积图/ 面积图+柱状图)
|
10
10
|
* @encoding
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
* 维度映射规则:
|
20
|
-
* 1. 用户指定的`xAxis`维度映射至X轴, 支持多个维度; 若未指定, 则默认将第一个维度映射至X轴
|
21
|
-
* 2. 用户指定的`color`维度映射至颜色通道, 支持多个维度; 若未指定, 则默认将指标名称映射至颜色通道, 作为图例展示
|
22
|
-
* 3. 用户指定的`detail`维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
23
|
-
* 指标映射规则:
|
24
|
-
* 1. 指标未配置encoding, 则第一个指标默认映射至Y轴, 其余指标默认映射至次Y轴
|
25
|
-
* 2. 用户指定的yAxis指标映射至主Y轴或次Y轴, 支持多个指标;
|
26
|
-
* 3. 所有指标均映射到Tooltip
|
11
|
+
* 双轴图支持以下视觉通道:
|
12
|
+
* `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴
|
13
|
+
* `primaryYAxis` : 主轴y轴通道, 支持`多个指标`, 将指标映射至主轴
|
14
|
+
* `secondaryYAxis` : 次轴y轴通道, 支持`多个指标`, 将指标映射至次轴
|
15
|
+
* `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用
|
16
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
17
|
+
* `tooltip` : 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
18
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
27
19
|
* @warning
|
28
20
|
* 数据要求:
|
29
21
|
* - 至少1个指标字段(度量)
|
@@ -47,18 +39,6 @@ export interface DualAxis {
|
|
47
39
|
* @example [{month:'1月', value:100, growth:0.2}, {month:'2月', value:150, growth:0.5}]
|
48
40
|
*/
|
49
41
|
dataset: Dataset;
|
50
|
-
/**
|
51
|
-
* @description 编码配置, 双轴图的视觉通道, 包括: x通道, color通道, detail通道, label通道, tooltip通道
|
52
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
53
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
54
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
55
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
56
|
-
*
|
57
|
-
* @tip 特殊的:
|
58
|
-
* - primaryY: measures会直接映射到主Y轴通道
|
59
|
-
* - secondaryY: measures会直接映射到次Y轴通道
|
60
|
-
*/
|
61
|
-
encoding?: Pick<Encoding, 'x' | 'color' | 'detail' | 'label' | 'tooltip'>;
|
62
42
|
/**
|
63
43
|
* @description 维度, 第一个维度会放至X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示.
|
64
44
|
* @example [{id: 'month', alias: '月份'}]
|
@@ -1,25 +1,17 @@
|
|
1
1
|
import type { Locale } from '../../i18n';
|
2
|
-
import type { BackgroundColor, ColorLegend, Dataset, Dimensions,
|
2
|
+
import type { BackgroundColor, ColorLegend, Dataset, Dimensions, Label, LinearColor, MeasureTree, Theme, Tooltip } from '../../properties';
|
3
3
|
/**
|
4
4
|
* @description 漏斗图,用于展示单一维度数据的占比关系
|
5
5
|
* 适用场景:
|
6
6
|
* 漏斗图适用场景:
|
7
7
|
* - 适合用来分析具有多个连续、规范化步骤的流程,并清晰地展示在每个环节的数据流失或转化情况
|
8
8
|
* @encoding
|
9
|
-
*
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
* 维度映射规则:
|
17
|
-
* 1. 用户指定的`color`维度映射至颜色通道, 支持多个维度; 若未指定, 则默认将指标名称映射至颜色通道, 作为图例展示
|
18
|
-
* 2. 用户指定的`detail`维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
19
|
-
* 指标映射规则:
|
20
|
-
* 1. 指标未配置`encoding`, 则默认映射至size通道;
|
21
|
-
* 2. 用户指定的`size`指标映射至size通道, 支持多个指标;
|
22
|
-
* 3. 所有指标均映射到Tooltip
|
9
|
+
* 漏斗图支持以下视觉通道:
|
10
|
+
* `size` : 大小通道, 支持`多个指标`, 按指标值映射至漏斗宽度
|
11
|
+
* `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用
|
12
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
13
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
14
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
23
15
|
* @warning
|
24
16
|
* 数据要求:
|
25
17
|
* - 至少1个数值字段(指标)
|
@@ -46,17 +38,6 @@ export interface Funnel {
|
|
46
38
|
* @example [{category:'A', value:30}, {category:'B', value:70}]
|
47
39
|
*/
|
48
40
|
dataset: Dataset;
|
49
|
-
/**
|
50
|
-
* @description 编码配置,漏斗图的视觉通道, 包括: color通道, detail通道, label通道, tooltip通道
|
51
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
52
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
53
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
54
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
55
|
-
*
|
56
|
-
* @tip 特殊的:
|
57
|
-
* - size: measures会直接映射到尺寸通道
|
58
|
-
*/
|
59
|
-
encoding?: Pick<Encoding, 'color' | 'detail' | 'label' | 'tooltip'>;
|
60
41
|
/**
|
61
42
|
* 维度
|
62
43
|
* @description 漏斗图的所有维度会与指标名称(存在多个指标时)合并成一个维度,并作为图例项展示
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { type Locale } from '../../i18n';
|
2
|
-
import type { ColorLegend,
|
2
|
+
import type { ColorLegend, LinearColor, MeasureTree } from '../../properties';
|
3
3
|
import { type BackgroundColor, type Dataset, type Dimensions, type Label, type Theme, type Tooltip } from '../../properties';
|
4
4
|
/**
|
5
5
|
* @description 热力图,通过二维矩阵的颜色深浅展示数据的分布和强弱关系
|
@@ -8,22 +8,13 @@ import { type BackgroundColor, type Dataset, type Dimensions, type Label, type T
|
|
8
8
|
* - 分类与数值的关联分析
|
9
9
|
* - 时间序列与类别的交叉对比
|
10
10
|
* @encoding
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
* 2. tooltip: 全部指标映射至Tooltip
|
19
|
-
*
|
20
|
-
* 维度映射规则:
|
21
|
-
* 1. 用户指定的`color`维度映射至颜色通道, 支持多个维度; 若未指定, 则默认将指标名称映射至颜色通道, 作为图例展示
|
22
|
-
* 2. 用户指定的`detail`维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
23
|
-
* 指标映射规则:
|
24
|
-
* 1. 指标未配置`encoding`, 则默认映射至color通道, 只有一个指标时才会映射至color通道
|
25
|
-
* 2. 用户指定的`detail`指标映射至Detail通道, 支持多个指标;
|
26
|
-
* 3. 所有指标均映射到Tooltip
|
11
|
+
* 热力图支持以下视觉通道:
|
12
|
+
* `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴
|
13
|
+
* `yAxis` : y轴通道, 支持`多个维度`, 按维度值映射至y轴
|
14
|
+
* `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用
|
15
|
+
* `color` : 颜色通道, 支持`一个指标`, 按指标值映射至颜色
|
16
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
17
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
27
18
|
* @warning
|
28
19
|
* 数据要求:
|
29
20
|
* - 至少2个维度字段,用于确定热力图的行和列
|
@@ -50,18 +41,6 @@ export interface Heatmap {
|
|
50
41
|
* @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}]
|
51
42
|
*/
|
52
43
|
dataset: Dataset;
|
53
|
-
/**
|
54
|
-
* @description 编码配置, 热力图的视觉通道, 包括: x通道, y通道, color通道, label通道, tooltip通道
|
55
|
-
* - x: x轴映射通道, 支持放入多个维度
|
56
|
-
* - y: y轴映射通道, 支持放入多个维度
|
57
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
58
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
59
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
60
|
-
*
|
61
|
-
* @tip 特殊的:
|
62
|
-
* - value: measures会直接映射到数值通道
|
63
|
-
*/
|
64
|
-
encoding?: Pick<Encoding, 'color' | 'x' | 'y' | 'label' | 'tooltip'>;
|
65
44
|
/**
|
66
45
|
* 维度
|
67
46
|
* @description 热力图的第一个维度被映射到角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示.
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Locale } from '../../i18n';
|
2
|
-
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, BackgroundColor, Color, Dataset, Dimensions, Label, Legend, LineStyle, PointStyle, Theme, Tooltip, CrosshairLine, XBandAxis, YLinearAxis, MeasureTree, Sort, SortLegend
|
2
|
+
import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, AnnotationVerticalLine, BackgroundColor, Color, Dataset, Dimensions, Label, Legend, LineStyle, PointStyle, Theme, Tooltip, CrosshairLine, XBandAxis, YLinearAxis, MeasureTree, Sort, SortLegend } from '../../properties';
|
3
3
|
/**
|
4
4
|
* @description 折线图,适用于展示数据随时间或有序类别变化的趋势,通过线段连接数据点形成趋势线
|
5
5
|
* 适用场景:
|
@@ -7,20 +7,12 @@ import type { AnnotationArea, AnnotationHorizontalLine, AnnotationPoint, Annotat
|
|
7
7
|
* - 比较多个数据系列的趋势对比
|
8
8
|
* - 分析数据的增长或下降规律
|
9
9
|
* @encoding
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
* 维度映射规则:
|
18
|
-
* 1. 用户指定的xAxis维度映射至X轴, 支持多个维度; 若未指定, 则默认将第一个维度映射至X轴
|
19
|
-
* 2. 用户指定的color维度映射至颜色通道, 支持多个维度; 若未指定, 则默认将指标名称映射至颜色通道, 作为图例展示
|
20
|
-
* 指标映射规则:
|
21
|
-
* 1. 指标未配置encoding, 则默认映射至Y轴;
|
22
|
-
* 2. 用户指定的yAxis指标映射至Y轴, 支持多个指标;
|
23
|
-
* 3. 所有指标均映射到Tooltip
|
10
|
+
* 折线图支持以下视觉通道:
|
11
|
+
* `x` : x轴通道, 支持`多个维度`, 按维度值映射至x轴
|
12
|
+
* `y` : y轴通道, 支持`多个指标`, 按指标值映射至y轴
|
13
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
14
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
15
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
24
16
|
* @warning
|
25
17
|
* 数据要求:
|
26
18
|
* - 至少1个数值字段(度量)
|
@@ -45,18 +37,6 @@ export interface Line {
|
|
45
37
|
* @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}]
|
46
38
|
*/
|
47
39
|
dataset: Dataset;
|
48
|
-
/**
|
49
|
-
* @description 编码配置, 折线图的视觉通道, 包括: x通道, color通道, detail通道, label通道, tooltip通道
|
50
|
-
* - x: 映射到X轴的字段, 支持放入多个维度
|
51
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
52
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
53
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
54
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
55
|
-
*
|
56
|
-
* @tip 特殊的:
|
57
|
-
* - y: measures会直接映射到Y轴通道
|
58
|
-
*/
|
59
|
-
encoding?: Pick<Encoding, 'x' | 'color' | 'detail' | 'label' | 'tooltip'>;
|
60
40
|
/**
|
61
41
|
* @description 维度, 折线图的第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示
|
62
42
|
* @type {Dimensions}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Locale } from '../../i18n';
|
2
|
-
import type { BackgroundColor, Color, Dataset, Dimensions,
|
2
|
+
import type { BackgroundColor, Color, Dataset, Dimensions, Label, Legend, MeasureTree, Theme, Tooltip } from '../../properties';
|
3
3
|
/**
|
4
4
|
* @description 饼图,适用于展示单一维度数据的占比关系,通过扇形面积大小表示各类别占比
|
5
5
|
* 适用场景:
|
@@ -7,21 +7,12 @@ import type { BackgroundColor, Color, Dataset, Dimensions, Encoding, Label, Lege
|
|
7
7
|
* - 强调数据的整体与部分关系
|
8
8
|
* - 类别数量较少(建议不超过6个)的占比分析
|
9
9
|
* @encoding
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
* 维度映射规则:
|
18
|
-
* 2. 用户指定的`color`维度映射至颜色通道, 支持多个维度; 若未指定, 则默认将指标名称映射至颜色通道, 作为图例展示
|
19
|
-
* 3. 用户指定的`detail`维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
20
|
-
* 指标映射规则:
|
21
|
-
* 1. 指标未配置`encoding`, 则默认映射至angle轴;
|
22
|
-
* 2. 用户指定的`angle`指标映射至angle轴, 支持多个指标;
|
23
|
-
* 3. 用户指定的`color`指标映射至color通道, 支持多个指标;
|
24
|
-
* 3. 所有指标均映射到Tooltip
|
10
|
+
* 饼图支持以下视觉通道:
|
11
|
+
* `angle` : 角度通道, 支持`多个指标`, 按指标值映射至扇形角度
|
12
|
+
* `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用
|
13
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
14
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
15
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
25
16
|
* @warning
|
26
17
|
* 数据要求:
|
27
18
|
* - 至少1个数值字段(度量)
|
@@ -48,17 +39,6 @@ export interface Pie {
|
|
48
39
|
* @example [{category:'A', value:30}, {category:'B', value:70}]
|
49
40
|
*/
|
50
41
|
dataset: Dataset;
|
51
|
-
/**
|
52
|
-
* @description 编码配置, 饼图的视觉通道, 包括: color通道, detail通道, label通道, tooltip通道
|
53
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
54
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
55
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
56
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
57
|
-
*
|
58
|
-
* @tip 特殊的:
|
59
|
-
* - angle: measures会直接映射到角度通道
|
60
|
-
*/
|
61
|
-
encoding?: Pick<Encoding, 'color' | 'detail' | 'label' | 'tooltip'>;
|
62
42
|
/**
|
63
43
|
* 维度
|
64
44
|
* @description 饼图的所有维度会与指标名称(存在多个指标时)合并成一个维度, 映射到角度, 并作为图例项展示
|
@@ -8,13 +8,10 @@ import { type BackgroundColor, type Dataset, type Dimensions, type Theme } from
|
|
8
8
|
* - 数据钻取与聚合展示
|
9
9
|
* - 业务报表生成与数据探索
|
10
10
|
* @encoding
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
* 存在`encoding`配置:
|
16
|
-
* - 用户指定的`row`与`column`维度, 精准映射到行维度与列维度, 若未指定row和column, 则交替映射到列维度和行维度
|
17
|
-
* - 用户指定的`detail`指标, 精准映射到detail通道, 若未指定detail, 则依旧映射到detail通道
|
11
|
+
* 透视表支持以下视觉通道:
|
12
|
+
* `row` : 行维度, 支持`多个维度`, 按维度值在行上进行分组
|
13
|
+
* `column` : 列维度, 支持`多个维度`, 按维度值在列上进行分组
|
14
|
+
* `detail` : 细分通道, 支持`多个指标`, 在单元格中展示指标值
|
18
15
|
* @warning
|
19
16
|
* 数据要求:
|
20
17
|
* - 至少1个行维度 或 1个列维度 或 1个指标
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { type Locale } from '../../i18n';
|
2
|
-
import type { AreaStyle,
|
2
|
+
import type { AreaStyle, LineStyle, MeasureTree, PointStyle } from '../../properties';
|
3
3
|
import { type BackgroundColor, type Color, type Dataset, type Dimensions, type Label, type Legend, type Theme, type Tooltip } from '../../properties';
|
4
4
|
/**
|
5
5
|
* @description 雷达图,适用于多维度数据的对比分析,通过多轴坐标系展示各维度的数值分布
|
@@ -8,22 +8,12 @@ import { type BackgroundColor, type Color, type Dataset, type Dimensions, type L
|
|
8
8
|
* - 多个对象在多个指标上的性能评估
|
9
9
|
* - 分类数据的多维度特征展示
|
10
10
|
* @encoding
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
* 2. tooltip: 全部指标映射至Tooltip
|
18
|
-
*
|
19
|
-
* 维度映射规则:
|
20
|
-
* 1. 用户指定的`angle`维度映射至angle轴, 支持多个维度; 若未指定, 则默认将第一个维度映射至angle轴
|
21
|
-
* 2. 用户指定的`color`维度映射至颜色通道, 支持多个维度; 若未指定, 则默认将指标名称映射至颜色通道, 作为图例展示
|
22
|
-
* 3. 用户指定的`detail`维度映射至Detail通道, 支持多个维度; 若未指定, 则默认将指标名称映射至Detail通道
|
23
|
-
* 指标映射规则:
|
24
|
-
* 1. 指标未配置`encoding`, 则默认映射至radius轴;
|
25
|
-
* 2. 用户指定的`radius`指标映射至radius轴, 支持多个指标;
|
26
|
-
* 3. 所有指标均映射到Tooltip
|
11
|
+
* 雷达图支持以下视觉通道:
|
12
|
+
* `angle` : 角度通道, 支持`多个维度`, 按维度值映射至角度轴
|
13
|
+
* `radius` : 半径通道, 支持`多个指标`, 按指标值映射至半径轴
|
14
|
+
* `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
|
15
|
+
* `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示
|
16
|
+
* `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签
|
27
17
|
* @warning
|
28
18
|
* 数据要求:
|
29
19
|
* - 至少1个数值字段(度量)
|
@@ -50,18 +40,6 @@ export interface Radar {
|
|
50
40
|
* @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}]
|
51
41
|
*/
|
52
42
|
dataset: Dataset;
|
53
|
-
/**
|
54
|
-
* @description 编码配置, 雷达图的视觉通道, 包括: angle通道, color通道, detail通道, label通道, tooltip通道
|
55
|
-
* - angle: 映射到角度的字段, 支持放入多个维度
|
56
|
-
* - detail: 细分映射通道, 支持放入多个维度
|
57
|
-
* - tooltip: 提示映射通道, 支持放入多个维度 和 多个指标
|
58
|
-
* - color: 颜色映射通道, 支持放入多个维度 或 1个 指标
|
59
|
-
* - label: 标签映射通道, 支持放入 多个维度 或 多个指标
|
60
|
-
*
|
61
|
-
* @tip 特殊的:
|
62
|
-
* - radius: measures会直接映射到半径通道
|
63
|
-
*/
|
64
|
-
encoding?: Pick<Encoding, 'angle' | 'color' | 'detail' | 'label' | 'tooltip'>;
|
65
43
|
/**
|
66
44
|
* 维度
|
67
45
|
* @description 雷达图的第一个维度被映射到角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示.
|