walkthrough pie

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

@@ -6,25 +6,6 @@ describe('pie', () => {
   const data = POSITIVE_NEGATIVE_DATA.filter((o) => o.value > 0).map((d, idx) =>
     idx === 1 ? { ...d, type: 'item1' } : d
   );
-  it('angleField: single color', () => {
-    const pie = new Pie(createDiv(), {
-      width: 400,
-      height: 300,
-      data,
-      angleField: 'value',
-      radius: 0.8,
-    });
-
-    pie.render();
-
-    const geometry = pie.chart.geometries[0];
-    const elements = geometry.elements;
-
-    expect(elements.length).toBe(data.length);
-    expect(elements[0].getModel().color).toBe(elements[1].getModel().color);
-
-    pie.destroy();
-  });
 
   it('angleField with colorField: multiple colors', () => {
     const pie = new Pie(createDiv(), {

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

@@ -1,5 +1,5 @@
 import { IGroup } from '@antv/g-base';
-import { getGeometryLabel } from '@antv/g2';
+import { flatten } from '@antv/util';
 import { Pie } from '../../../../src';
 import { POSITIVE_NEGATIVE_DATA } from '../../../data/common';
 import { createDiv } from '../../../utils/dom';
@@ -19,40 +19,20 @@ describe('pie label', () => {
     label: {},
   };
 
-  it('label: visible', () => {
-    const pie = new Pie(createDiv(), config);
-
-    pie.render();
+  const pie = new Pie(createDiv(), config);
+  pie.render();
 
+  it('label: visible', () => {
     const geometry = pie.chart.geometries[0];
     const elements = geometry.elements;
     const labelGroups = geometry.labelsContainer.getChildren();
 
     expect(elements.length).toBe(data.length);
     expect(labelGroups.length).toBe(data.length);
-
-    pie.destroy();
-  });
-
-  it.skip('label: single color(todo-hustcc: 没有 color 字段，label 显示错误)', () => {
-    const pie = new Pie(createDiv(), {
-      ...config,
-      colorField: null,
-    });
-
-    pie.render();
-
-    const geometry = pie.chart.geometries[0];
-    const labelGroups = geometry.labelsContainer.getChildren();
-
-    expect(labelGroups.length).toBe(data.length);
-
-    pie.destroy();
   });
 
   it('label: custom content & support percent', () => {
-    const pie = new Pie(createDiv(), {
-      ...config,
+    pie.update({
       data: [
         { type: 'item1', value: 1 },
         { type: 'item2', value: 2 },
@@ -69,8 +49,6 @@ describe('pie label', () => {
       },
     });
 
-    pie.render();
-
     const geometry = pie.chart.geometries[0];
     const labelGroups = geometry.labelsContainer.getChildren();
     expect(labelGroups.length).toBe(3);
@@ -80,13 +58,11 @@ describe('pie label', () => {
     expect(label1[0].attr('text')).toBe('hello');
     const label2 = (labelGroups[1] as IGroup).getChildren();
     expect(label2[0].attr('text')).toBe('item2: 2(40%)');
-
-    pie.destroy();
   });
 
   it('label: custom callback', () => {
-    const pie = new Pie(createDiv(), {
-      ...config,
+    pie.update({
+      data,
       label: {
         callback: (value, type) => {
           return {
@@ -95,9 +71,6 @@ describe('pie label', () => {
         },
       },
     });
-
-    pie.render();
-
     const geometry = pie.chart.geometries[0];
     const labelGroups = geometry.labelsContainer.getChildren();
 
@@ -106,7 +79,29 @@ describe('pie label', () => {
     const label3 = (labelGroups[2] as IGroup).getChildren();
     expect(label1[0].attr('text')).toBe(`${data[0].type}: ${data[0].value}`);
     expect(label3[0].attr('text')).toBe(`${data[2].type}: ${data[2].value}`);
+  });
+
+  it('label: offset adaptor', () => {
+    pie.update({ label: { type: 'inner', offset: -10 } });
+    let geometry = pie.chart.geometries[0];
+    // @ts-ignore
+    let labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray));
+    expect(parseFloat(labelItems[0].offset)).toBeLessThan(0);
+
+    pie.update({ label: { type: 'outer' } });
+    geometry = pie.chart.geometries[0];
+    // @ts-ignore
+    labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray));
+    expect(parseFloat(labelItems[0].offset)).not.toBeLessThan(0);
+
+    pie.update({ label: { type: 'inner' } });
+    geometry = pie.chart.geometries[0];
+    // @ts-ignorelabelGroups
+    labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray));
+    expect(parseFloat(labelItems[0].offset)).toBe(-10);
+  });
 
+  afterAll(() => {
     pie.destroy();
   });
 });
@@ -144,9 +139,3 @@ describe('support template string formatter', () => {
 
   pie.destroy();
 });
-
-describe('inner label', () => {
-  it('自定义注册饼图 inner label', () => {
-    expect(getGeometryLabel('pie-inner')).toBeDefined();
-  });
-});

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

@@ -1,4 +1,4 @@
-import { getTotalValue, parsePercentageToNumber } from '../../../../src/plots/pie/utils';
+import { adaptOffset, getTotalValue } from '../../../../src/plots/pie/utils';
 
 describe('utils of pie plot', () => {
   const data = [
@@ -48,13 +48,14 @@ describe('utils of pie plot', () => {
     ).toBe(null);
   });
 
-  it('将 字符串百分比 转换为 数值型百分比', () => {
-    // @ts-ignore 不合法的入参
-    expect(parsePercentageToNumber(null)).toBe(null);
-    // @ts-ignore 不合法的入参
-    expect(parsePercentageToNumber(100)).toBe(100);
-    expect(parsePercentageToNumber('0.35')).toBe(0.35);
-    expect(parsePercentageToNumber('34%')).toBe(0.34);
-    expect(parsePercentageToNumber('0%')).toBe(0);
+  it('offset adaptor', () => {
+    expect(adaptOffset('inner', '-30%')).toBe('-30%');
+    expect(parseFloat(adaptOffset('inner', '30%') as string)).toBeLessThan(0);
+    expect(adaptOffset('inner', NaN)).not.toBe(NaN);
+    expect(parseFloat(adaptOffset('inner', NaN) as string)).toBeLessThan(0);
+    expect(adaptOffset('outer', '-30%')).not.toBe('-30%');
+    expect(parseFloat(adaptOffset('outer', '-30%') as string)).not.toBeLessThan(0);
+    expect(adaptOffset('spider', '30%')).toBe('30%');
+    expect(adaptOffset('spider', NaN)).toBe(NaN);
   });
 });

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

@@ -15,15 +15,3 @@ Configure label style.
 #### annotations
 
 `markdown:docs/common/annotations.en.md`
-
-#### theme
-
-`markdown:docs/common/theme.en.md`
-
-### Event
-
-`markdown:docs/common/events.en.md`
-
-### Plot Method
-
-`markdown:docs/common/chart-methods.en.md`

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

@@ -2,28 +2,15 @@
 
 `markdown:docs/common/tooltip.zh.md`
 
-#### label
-
-标签文本
+#### 标签文本
 
 `markdown:docs/common/label.zh.md`
 
-#### legend
+#### 图例
 
 `markdown:docs/common/legend.zh.md`
 
-#### annotations
+#### 图表标注
 
 `markdown:docs/common/annotations.zh.md`
 
-#### theme
-
-`markdown:docs/common/theme.zh.md`
-
-### 事件
-
-`markdown:docs/common/events.zh.md`
-
-### 图表方法
-
-`markdown:docs/common/chart-methods.zh.md`

docs/common/component-polygon.zh.md

@@ -2,7 +2,7 @@
 
 `markdown:docs/common/tooltip.zh.md`
 
-#### annotations
+#### 图表标注
 
 `markdown:docs/common/annotations.zh.md`
 

docs/common/component-progress.zh.md

@@ -2,7 +2,7 @@
 
 `markdown:docs/common/tooltip.zh.md`
 
-#### annotations
+#### 图表标注
 
 `markdown:docs/common/annotations.zh.md`
 

docs/common/component-tiny.zh.md

@@ -8,7 +8,7 @@ xAxis、yAxis 配置相同。
 
 `markdown:docs/common/axis.zh.md`
 
-#### annotations
+#### 图表标注
 
 `markdown:docs/common/annotations.zh.md`
 

docs/common/component.zh.md

@@ -12,10 +12,10 @@ xAxis、yAxis 配置相同（由于 DualAxes 是双轴， yAxis 类型是数组
 
 `markdown:docs/common/axis.zh.md`
 
-#### legend
+#### 图例
 
 `markdown:docs/common/legend.zh.md`
 
-#### annotations
+#### 图表标注
 
 `markdown:docs/common/annotations.zh.md`

docs/common/label.en.md

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

docs/common/label.zh.md

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

docs/common/legend.en.md

@@ -32,10 +32,10 @@ legend: {
 
 背景框配置项。_LegendBackgroundCfg_ 配置如下：
 
-| 参数名  | 类型                | 是否必选 | 默认值 | 描述           |
-| ------- | ------------------- | -------- | ------ | -------------- |
-| padding | number \| number[]  |          | -      | 背景的留白     |
-| style   | object 参考绘图属性 |          | -      | 背景样式配置项 |
+| 参数名  | 类型                 | 默认值 | 描述           |
+| ------- | ------------------- | ------ | -------------- |
+| padding | number \| number[] | -      | 背景的留白     |
+| style   | object 参考绘图属性  | -      | 背景样式配置项 |
 
 ##### flipPage
 

docs/common/legend.zh.md

@@ -32,10 +32,10 @@ legend: {
 
 背景框配置项。_LegendBackgroundCfg_ 配置如下：
 
-| 参数名  | 类型                | 是否必选 | 默认值 | 描述           |
-| ------- | ------------------- | -------- | ------ | -------------- |
-| padding | number \| number[]  |          | -      | 背景的留白     |
-| style   | object 参考绘图属性 |          | -      | 背景样式配置项 |
+| 参数名  | 类型                | 默认值 | 描述           |
+| ------- | ------------------- | ------ | -------------- |
+| padding | number \| number[]  | -      | 背景的留白     |
+| style   | object 参考绘图属性 | -      | 背景样式配置项 |
 
 ##### flipPage
 

docs/manual/plots/liquid.en.md

@@ -44,3 +44,15 @@ order: 12
 ### Plot Components
 
 `markdown:docs/common/component-no-axis.en.md`
+
+### Event
+
+`markdown:docs/common/events.en.md`
+
+### Plot Method
+
+`markdown:docs/common/chart-methods.en.md`
+
+### theme
+
+`markdown:docs/common/theme.en.md`

docs/manual/plots/liquid.zh.md

@@ -44,3 +44,15 @@ order: 12
 ### 图表组件
 
 `markdown:docs/common/component-no-axis.zh.md`
+
+### 事件
+
+`markdown:docs/common/events.zh.md`
+
+### 图表方法
+
+`markdown:docs/common/chart-methods.zh.md`
+
+#### 图表主题
+
+`markdown:docs/common/theme.zh.md`

docs/manual/plots/pie.en.md

@@ -55,7 +55,7 @@ piePlot.render();
 
 #### colorField 
 
-<description>**optional** _string_</description>
+<description>**required** _string_</description>
 
 扇形颜色映射对应的数据字段名。
 
@@ -65,7 +65,7 @@ piePlot.render();
 
 <description>**optional** _number_</description>
 
-饼图的半径，原点为画布中心。配置值域为 [0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。
+饼图的半径，原点为画布中心。配置值域为 (0,1]，1 代表饼图撑满绘图区域。
 
 `markdown:docs/common/color.en.md`
 
@@ -79,8 +79,18 @@ piePlot.render();
 
 ### Plot Components
 
-<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*93XzToUe1OQAAAAAAAAAAABkARQnAQ" alt="加载失败" width="600">
-
-### Plot Components
+<img src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*TBHtTY6RmHIAAAAAAAAAAAAAARQnAQ" alt="加载失败" width="600">
 
 `markdown:docs/common/component-no-axis.en.md`
+
+### Event
+
+`markdown:docs/common/events.en.md`
+
+### Plot Method
+
+`markdown:docs/common/chart-methods.en.md`
+
+### theme
+
+`markdown:docs/common/theme.en.md`