feat: 面积图支持 startOnZero (#2444)

* feat: 面积图支持 startOnZero * docs: 美化文档 * fix: 添加 series field 判断 Co-authored-by: liufu.lf <liufu.lf@antfin.com>
antvis · Mar 23, 2021 · 1cdea55 · 1cdea55
1 parent 33dfa3b
commit 1cdea55
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 2 deletions.
diff --git a/__tests__/unit/plots/area/percent-spec.ts b/__tests__/unit/plots/area/percent-spec.ts
@@ -51,4 +51,21 @@ describe('area', () => {
     expect(currenData[0].g2plot_percent).toBeUndefined();
     area.destroy();
   });
+  it('percent area with no series field', () => {
+    const area = new Area(createDiv('percent*area', document.body, 'percent_container'), {
+      width: 400,
+      height: 300,
+      data: percentData,
+      xField: 'year',
+      yField: 'value',
+      isPercent: true,
+    });
+
+    area.render();
+
+    // render
+    expect(area.options.isPercent).toBe(true);
+    expect(area.chart.geometries[0].getAdjust('stack')).toBeUndefined();
+    area.destroy();
+  });
 });
diff --git a/__tests__/unit/plots/area/stack-spec.ts b/__tests__/unit/plots/area/stack-spec.ts
@@ -32,6 +32,23 @@ describe('area', () => {
     // @ts-ignore
     expect(area.chart.getOptions().legends.type.position).toBe('top-left');
 
+    area.destroy();
+  });
+  it('stack area with no series field', () => {
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      isStack: true,
+    });
+
+    area.render();
+
+    expect(area.options.isStack).toBe(true);
+    expect(area.chart.geometries[0].getAdjust('stack')).toBeUndefined();
+
     area.destroy();
   });
 });
diff --git a/__tests__/unit/plots/area/start-on-zero-spec.ts b/__tests__/unit/plots/area/start-on-zero-spec.ts
@@ -0,0 +1,35 @@
+import { Area } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+describe('area', () => {
+  it('start on zero', () => {
+    const data = [
+      { date: '19/05/2006', type: 'FF', value: 3600 },
+      { date: '19/06/2006', type: 'FG', value: 2500 },
+      { date: '19/07/2006', type: 'Lab', value: -2000 },
+      { date: '19/08/2006', type: 'SF', value: 800 },
+      { date: '19/09/2006', type: 'Ind/Oth', value: 1700 },
+    ];
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      data,
+      xField: 'date',
+      yField: 'value',
+      startOnZero: false,
+      isStack: false,
+    });
+
+    area.render();
+    const geometry = area.chart.geometries[0];
+    // @ts-ignore
+    expect(geometry.startOnZero).toBeFalsy();
+    expect(area.chart.getScaleByField('value').min).toBe(-2000);
+    area.update({
+      startOnZero: true,
+    });
+    // @ts-ignore
+    expect(area.chart.geometries[0].startOnZero).toBeTruthy();
+    area.destroy();
+  });
+});
diff --git a/docs/api/plots/area.en.md b/docs/api/plots/area.en.md
@@ -47,6 +47,16 @@ Whether the plot is Stacked Area.
 
 Whether the plot is Percent Area. When the plot is Percent Area, isStack is `true` by default.
 
+#### startOnZero
+
+<description>**optional** _boolean_ _default:_ `true`</description>
+
+Whether the plot is filled from 0 datum，isStack must be false when used.
+
+| true                                                                                                                | false                                                                                                                |
+| ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| <img alt='startOnZero-true' width='300' src='https://gw.alipayobjects.com/zos/rmsportal/ZQqwUCczalrKqGgagOVp.png'/> | <img alt='startOnZero-false' width='300' src='https://gw.alipayobjects.com/zos/rmsportal/yPswkaXvUpCYOdhocGwB.png'/> |
+
 #### areaStyle
 
 <description>**optional** _StyleAttr | Function_</description>

diff --git a/docs/api/plots/area.zh.md b/docs/api/plots/area.zh.md
@@ -47,6 +47,16 @@ order: 1
 
 是否百分比面积图，百分比时默认开启 isStack。
 
+#### startOnZero
+
+<description>**optional** _boolean_ _default:_ `true`</description>
+
+积图是否从 0 基准线开始填充，使用时 isStack 需为 false。
+
+| true                                                                                                                | false                                                                                                                |
+| ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| <img alt='startOnZero-true' width='300' src='https://gw.alipayobjects.com/zos/rmsportal/ZQqwUCczalrKqGgagOVp.png'/> | <img alt='startOnZero-false' width='300' src='https://gw.alipayobjects.com/zos/rmsportal/yPswkaXvUpCYOdhocGwB.png'/> |
+
 #### areaStyle
 
 <description>**optional** _StyleAttr | Function_</description>

diff --git a/src/plots/area/adaptor.ts b/src/plots/area/adaptor.ts
@@ -29,6 +29,7 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
     yField,
     tooltip,
     seriesField,
+    startOnZero,
   } = options;
   const pointState = pointMapping?.state;
 
@@ -60,6 +61,9 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
       tooltip: tooltipOptions,
       // label 不传递给各个 geometry adaptor，由 label adaptor 处理
       label: undefined,
+      args: {
+        startOnZero,
+      },
     },
   });
   const second = deepAssign({}, primary, { options: { tooltip: false } });
@@ -112,8 +116,8 @@ function label(params: Params<AreaOptions>): Params<AreaOptions> {
  */
 function adjust(params: Params<AreaOptions>): Params<AreaOptions> {
   const { chart, options } = params;
-  const { isStack, isPercent } = options;
-  if (isPercent || isStack) {
+  const { isStack, isPercent, seriesField } = options;
+  if ((isPercent || isStack) && seriesField) {
     each(chart.geometries, (g: Geometry) => {
       g.adjust('stack');
     });

diff --git a/src/plots/area/types.ts b/src/plots/area/types.ts
@@ -22,4 +22,6 @@ export interface AreaOptions extends Options {
   readonly line?: LineGeometryOptions['line'];
   /** 面积图数据点图形样式 */
   readonly point?: PointGeometryOptions['point'] & Pick<PointGeometryOptions, 'state'>;
+  /** 积图是否从 0 基准线开始填充 */
+  readonly startOnZero?: boolean;
 }