Skip to content

Commit d88a3fa

Browse files
visikyvisiky
authored
walkthrough pie (#1879)
* refactor(docs): 饼图 & 玫瑰图文案和demo走查 * refactor(pie-label): 移除饼图 inner-label 自定义；G2 内置对 string offset 处理 详细：antvis/G2#2981 * docs(pie): 饼图 colorField 为必选,同时显式说明饼图label type有哪些类型 * feat(pie-label): 饼图 label offset 适配，自动根据标签 type 调整 offset * refactor(docs): 文档优化 * refactor(docs): 文档走查 * feat(testcases): 修复单测
1 parent 5454d86 commit d88a3fa

34 files changed

+181
-211
lines changed

‎__tests__/unit/plots/pie/index-spec.ts

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,6 @@ describe('pie', () => {
66
const data = POSITIVE_NEGATIVE_DATA.filter((o) => o.value > 0).map((d, idx) =>
77
idx === 1 ? { ...d, type: 'item1' } : d
88
);
9-
it('angleField: single color', () => {
10-
const pie = new Pie(createDiv(), {
11-
width: 400,
12-
height: 300,
13-
data,
14-
angleField: 'value',
15-
radius: 0.8,
16-
});
17-
18-
pie.render();
19-
20-
const geometry = pie.chart.geometries[0];
21-
const elements = geometry.elements;
22-
23-
expect(elements.length).toBe(data.length);
24-
expect(elements[0].getModel().color).toBe(elements[1].getModel().color);
25-
26-
pie.destroy();
27-
});
289

2910
it('angleField with colorField: multiple colors', () => {
3011
const pie = new Pie(createDiv(), {

‎__tests__/unit/plots/pie/label-spec.ts

Lines changed: 29 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { IGroup } from '@antv/g-base';
2-
import { getGeometryLabel } from '@antv/g2';
2+
import { flatten } from '@antv/util';
33
import { Pie } from '../../../../src';
44
import { POSITIVE_NEGATIVE_DATA } from '../../../data/common';
55
import { createDiv } from '../../../utils/dom';
@@ -19,40 +19,20 @@ describe('pie label', () => {
1919
label: {},
2020
};
2121

22-
it('label: visible', () => {
23-
const pie = new Pie(createDiv(), config);
24-
25-
pie.render();
22+
const pie = new Pie(createDiv(), config);
23+
pie.render();
2624

25+
it('label: visible', () => {
2726
const geometry = pie.chart.geometries[0];
2827
const elements = geometry.elements;
2928
const labelGroups = geometry.labelsContainer.getChildren();
3029

3130
expect(elements.length).toBe(data.length);
3231
expect(labelGroups.length).toBe(data.length);
33-
34-
pie.destroy();
35-
});
36-
37-
it.skip('label: single color(todo-hustcc: 没有 color 字段，label 显示错误)', () => {
38-
const pie = new Pie(createDiv(), {
39-
...config,
40-
colorField: null,
41-
});
42-
43-
pie.render();
44-
45-
const geometry = pie.chart.geometries[0];
46-
const labelGroups = geometry.labelsContainer.getChildren();
47-
48-
expect(labelGroups.length).toBe(data.length);
49-
50-
pie.destroy();
5132
});
5233

5334
it('label: custom content & support percent', () => {
54-
const pie = new Pie(createDiv(), {
55-
...config,
35+
pie.update({
5636
data: [
5737
{ type: 'item1', value: 1 },
5838
{ type: 'item2', value: 2 },
@@ -69,8 +49,6 @@ describe('pie label', () => {
6949
},
7050
});
7151

72-
pie.render();
73-
7452
const geometry = pie.chart.geometries[0];
7553
const labelGroups = geometry.labelsContainer.getChildren();
7654
expect(labelGroups.length).toBe(3);
@@ -80,13 +58,11 @@ describe('pie label', () => {
8058
expect(label1[0].attr('text')).toBe('hello');
8159
const label2 = (labelGroups[1] as IGroup).getChildren();
8260
expect(label2[0].attr('text')).toBe('item2: 2(40%)');
83-
84-
pie.destroy();
8561
});
8662

8763
it('label: custom callback', () => {
88-
const pie = new Pie(createDiv(), {
89-
...config,
64+
pie.update({
65+
data,
9066
label: {
9167
callback: (value, type) => {
9268
return {
@@ -95,9 +71,6 @@ describe('pie label', () => {
9571
},
9672
},
9773
});
98-
99-
pie.render();
100-
10174
const geometry = pie.chart.geometries[0];
10275
const labelGroups = geometry.labelsContainer.getChildren();
10376

@@ -106,7 +79,29 @@ describe('pie label', () => {
10679
const label3 = (labelGroups[2] as IGroup).getChildren();
10780
expect(label1[0].attr('text')).toBe(`${data[0].type}: ${data[0].value}`);
10881
expect(label3[0].attr('text')).toBe(`${data[2].type}: ${data[2].value}`);
82+
});
83+
84+
it('label: offset adaptor', () => {
85+
pie.update({ label: { type: 'inner', offset: -10 } });
86+
let geometry = pie.chart.geometries[0];
87+
// @ts-ignore
88+
let labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray));
89+
expect(parseFloat(labelItems[0].offset)).toBeLessThan(0);
90+
91+
pie.update({ label: { type: 'outer' } });
92+
geometry = pie.chart.geometries[0];
93+
// @ts-ignore
94+
labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray));
95+
expect(parseFloat(labelItems[0].offset)).not.toBeLessThan(0);
96+
97+
pie.update({ label: { type: 'inner' } });
98+
geometry = pie.chart.geometries[0];
99+
// @ts-ignorelabelGroups
100+
labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray));
101+
expect(parseFloat(labelItems[0].offset)).toBe(-10);
102+
});
109103

104+
afterAll(() => {
110105
pie.destroy();
111106
});
112107
});
@@ -144,9 +139,3 @@ describe('support template string formatter', () => {
144139

145140
pie.destroy();
146141
});
147-
148-
describe('inner label', () => {
149-
it('自定义注册饼图 inner label', () => {
150-
expect(getGeometryLabel('pie-inner')).toBeDefined();
151-
});
152-
});

‎__tests__/unit/plots/pie/utils-spec.ts

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getTotalValue, parsePercentageToNumber } from '../../../../src/plots/pie/utils';
1+
import { adaptOffset, getTotalValue } from '../../../../src/plots/pie/utils';
22

33
describe('utils of pie plot', () => {
44
const data = [
@@ -48,13 +48,14 @@ describe('utils of pie plot', () => {
4848
).toBe(null);
4949
});
5050

51-
it('将 字符串百分比 转换为 数值型百分比', () => {
52-
// @ts-ignore 不合法的入参
53-
expect(parsePercentageToNumber(null)).toBe(null);
54-
// @ts-ignore 不合法的入参
55-
expect(parsePercentageToNumber(100)).toBe(100);
56-
expect(parsePercentageToNumber('0.35')).toBe(0.35);
57-
expect(parsePercentageToNumber('34%')).toBe(0.34);
58-
expect(parsePercentageToNumber('0%')).toBe(0);
51+
it('offset adaptor', () => {
52+
expect(adaptOffset('inner', '-30%')).toBe('-30%');
53+
expect(parseFloat(adaptOffset('inner', '30%') as string)).toBeLessThan(0);
54+
expect(adaptOffset('inner', NaN)).not.toBe(NaN);
55+
expect(parseFloat(adaptOffset('inner', NaN) as string)).toBeLessThan(0);
56+
expect(adaptOffset('outer', '-30%')).not.toBe('-30%');
57+
expect(parseFloat(adaptOffset('outer', '-30%') as string)).not.toBeLessThan(0);
58+
expect(adaptOffset('spider', '30%')).toBe('30%');
59+
expect(adaptOffset('spider', NaN)).toBe(NaN);
5960
});
6061
});

‎docs/common/component-no-axis.en.md

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,3 @@ Configure label style.
1515
#### annotations
1616

1717
`markdown:docs/common/annotations.en.md`
18-
19-
#### theme
20-
21-
`markdown:docs/common/theme.en.md`
22-
23-
### Event
24-
25-
`markdown:docs/common/events.en.md`
26-
27-
### Plot Method
28-
29-
`markdown:docs/common/chart-methods.en.md`

‎docs/common/component-no-axis.zh.md

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,15 @@
22

33
`markdown:docs/common/tooltip.zh.md`
44

5-
#### label
6-
7-
标签文本
5+
#### 标签文本
86

97
`markdown:docs/common/label.zh.md`
108

11-
#### legend
9+
#### 图例
1210

1311
`markdown:docs/common/legend.zh.md`
1412

15-
#### annotations
13+
#### 图表标注
1614

1715
`markdown:docs/common/annotations.zh.md`
1816

19-
#### theme
20-
21-
`markdown:docs/common/theme.zh.md`
22-
23-
### 事件
24-
25-
`markdown:docs/common/events.zh.md`
26-
27-
### 图表方法
28-
29-
`markdown:docs/common/chart-methods.zh.md`

‎docs/common/component-polygon.zh.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
`markdown:docs/common/tooltip.zh.md`
44

5-
#### annotations
5+
#### 图表标注
66

77
`markdown:docs/common/annotations.zh.md`
88

‎docs/common/component-progress.zh.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
`markdown:docs/common/tooltip.zh.md`
44

5-
#### annotations
5+
#### 图表标注
66

77
`markdown:docs/common/annotations.zh.md`
88

‎docs/common/component-tiny.zh.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ xAxis、yAxis 配置相同。
88

99
`markdown:docs/common/axis.zh.md`
1010

11-
#### annotations
11+
#### 图表标注
1212

1313
`markdown:docs/common/annotations.zh.md`
1414

‎docs/common/component.zh.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ xAxis、yAxis 配置相同（由于 DualAxes 是双轴， yAxis 类型是数组
1212

1313
`markdown:docs/common/axis.zh.md`
1414

15-
#### legend
15+
#### 图例
1616

1717
`markdown:docs/common/legend.zh.md`
1818

19-
#### annotations
19+
#### 图表标注
2020

2121
`markdown:docs/common/annotations.zh.md`

‎docs/common/label.en.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
| 属性名 | 类型 | 介绍 |
44
| ------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
5-
| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染 |
5+
| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）|
66
| offset | number | label 的偏移量 |
77
| offsetX | number | label 相对于数据点在 X 方向的偏移距离 |
88
| offsetY | number | label 相对于数据点在 Y 方向的偏移距离 |

‎docs/common/label.zh.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
| 属性名 | 类型 | 介绍 |
44
| ------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
5-
| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染 |
5+
| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）|
66
| offset | number | label 的偏移量 |
77
| offsetX | number | label 相对于数据点在 X 方向的偏移距离 |
88
| offsetY | number | label 相对于数据点在 Y 方向的偏移距离 |

‎docs/common/legend.en.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ legend: {
3232

3333
背景框配置项。_LegendBackgroundCfg_ 配置如下：
3434

35-
| 参数名 | 类型 | 是否必选 | 默认值 | 描述 |
36-
| ------- | ------------------- | -------- | ------ | -------------- |
37-
| padding | number \| number[] | | - | 背景的留白 |
38-
| style | object 参考绘图属性 | | - | 背景样式配置项 |
35+
| 参数名 | 类型 | 默认值 | 描述 |
36+
| ------- | ------------------- | ------ | -------------- |
37+
| padding | number \| number[] | - | 背景的留白 |
38+
| style | object 参考绘图属性 | - | 背景样式配置项 |
3939

4040
##### flipPage
4141

‎docs/common/legend.zh.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ legend: {
3232

3333
背景框配置项。_LegendBackgroundCfg_ 配置如下：
3434

35-
| 参数名 | 类型 | 是否必选 | 默认值 | 描述 |
36-
| ------- | ------------------- | -------- | ------ | -------------- |
37-
| padding | number \| number[] | | - | 背景的留白 |
38-
| style | object 参考绘图属性 | | - | 背景样式配置项 |
35+
| 参数名 | 类型 | 默认值 | 描述 |
36+
| ------- | ------------------- | ------ | -------------- |
37+
| padding | number \| number[] | - | 背景的留白 |
38+
| style | object 参考绘图属性 | - | 背景样式配置项 |
3939

4040
##### flipPage
4141

‎docs/manual/plots/liquid.en.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,15 @@ order: 12
4444
### Plot Components
4545

4646
`markdown:docs/common/component-no-axis.en.md`
47+
48+
### Event
49+
50+
`markdown:docs/common/events.en.md`
51+
52+
### Plot Method
53+
54+
`markdown:docs/common/chart-methods.en.md`
55+
56+
### theme
57+
58+
`markdown:docs/common/theme.en.md`

‎docs/manual/plots/liquid.zh.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,15 @@ order: 12
4444
### 图表组件
4545

4646
`markdown:docs/common/component-no-axis.zh.md`
47+
48+
### 事件
49+
50+
`markdown:docs/common/events.zh.md`
51+
52+
### 图表方法
53+
54+
`markdown:docs/common/chart-methods.zh.md`
55+
56+
#### 图表主题
57+
58+
`markdown:docs/common/theme.zh.md`

‎docs/manual/plots/pie.en.md

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ piePlot.render();
5555

5656
#### colorField
5757

58-
<description>**optional** _string_</description>
58+
<description>**required** _string_</description>
5959

6060
扇形颜色映射对应的数据字段名。
6161

@@ -65,7 +65,7 @@ piePlot.render();
6565

6666
<description>**optional** _number_</description>
6767

68-
饼图的半径，原点为画布中心。配置值域为 [0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。
68+
饼图的半径，原点为画布中心。配置值域为 (0,1]，1 代表饼图撑满绘图区域。
6969

7070
`markdown:docs/common/color.en.md`
7171

@@ -79,8 +79,18 @@ piePlot.render();
7979

8080
### Plot Components
8181

82-
<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*93XzToUe1OQAAAAAAAAAAABkARQnAQ" alt="加载失败" width="600">
83-
84-
### Plot Components
82+
<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*TBHtTY6RmHIAAAAAAAAAAAAAARQnAQ" alt="加载失败" width="600">
8583

8684
`markdown:docs/common/component-no-axis.en.md`
85+
86+
### Event
87+
88+
`markdown:docs/common/events.en.md`
89+
90+
### Plot Method
91+
92+
`markdown:docs/common/chart-methods.en.md`
93+
94+
### theme
95+
96+
`markdown:docs/common/theme.en.md`

0 commit comments

Comments
 (0)