feat: auto set limitInPlot based on yAxis config (#2009)

* feat: auto set limitInPlot based on yAxis config * fix: more unit test for limitInPlot
antvis · Nov 25, 2020 · c4a1794 · c4a1794
1 parent ef87448
commit c4a1794
Show file tree

Hide file tree

Showing 10 changed files with 338 additions and 11 deletions.
diff --git a/__tests__/bugs/issue-1882-spec.ts b/__tests__/bugs/issue-1882-spec.ts
@@ -27,10 +27,10 @@ describe('#1882', () => {
 
     area.render();
 
-    expect(area.chart.limitInPlot).toBeUndefined();
-    expect(area.chart.middleGroup.get('clipShape')).not.toBeDefined();
+    expect(area.chart.limitInPlot).toBe(true);
+    expect(area.chart.middleGroup.get('clipShape')).toBeDefined();
     // 大于一个 xAxis 的高度
-    // expect(area.chart.middleGroup.get('clipShape').getBBox().minY > 5).toBe(true);
+    expect(area.chart.middleGroup.get('clipShape').getBBox().minY > 5).toBe(true);
 
     area.destroy();
   });

diff --git a/__tests__/unit/plots/area/limit-in-plot-spec.ts b/__tests__/unit/plots/area/limit-in-plot-spec.ts
@@ -0,0 +1,72 @@
+import { Area } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+const DATA = [
+  {
+    type: 'A',
+    value: 0,
+  },
+  {
+    type: 'B',
+    value: 10,
+  },
+  {
+    type: 'C',
+    value: 5,
+  },
+  {
+    type: 'D',
+    value: 20,
+  },
+];
+
+describe('line limitInPlot', () => {
+  const plot = new Area(createDiv(), {
+    data: DATA,
+    xField: 'type',
+    yField: 'value',
+  });
+
+  it('limitInPlot false', () => {
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+  });
+
+  it('limitInPlot true', () => {
+    plot.update({
+      yAxis: {
+        minLimit: 6,
+      },
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeTruthy();
+  });
+
+  it('limitInPlot false', () => {
+    plot.update({
+      yAxis: {
+        minLimit: undefined,
+      },
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+  });
+
+  it('user config', () => {
+    plot.update({
+      yAxis: {
+        minLimit: 6,
+      },
+      limitInPlot: false,
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+
+    plot.update({
+      yAxis: false,
+      limitInPlot: true,
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeTruthy();
+  });
+});
diff --git a/__tests__/unit/plots/bar/limit-in-plot-spec.ts b/__tests__/unit/plots/bar/limit-in-plot-spec.ts
@@ -0,0 +1,72 @@
+import { Bar } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+const DATA = [
+  {
+    type: 'A',
+    value: 0,
+  },
+  {
+    type: 'B',
+    value: 10,
+  },
+  {
+    type: 'C',
+    value: 5,
+  },
+  {
+    type: 'D',
+    value: 20,
+  },
+];
+
+describe('line limitInPlot', () => {
+  const plot = new Bar(createDiv(), {
+    data: DATA,
+    yField: 'type',
+    xField: 'value',
+  });
+
+  it('limitInPlot false', () => {
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+  });
+
+  it('limitInPlot true', () => {
+    plot.update({
+      xAxis: {
+        minLimit: 6,
+      },
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeTruthy();
+  });
+
+  it('limitInPlot false', () => {
+    plot.update({
+      xAxis: {
+        minLimit: undefined,
+      },
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+  });
+
+  it('user config', () => {
+    plot.update({
+      yAxis: {
+        minLimit: 6,
+      },
+      limitInPlot: false,
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+
+    plot.update({
+      yAxis: false,
+      limitInPlot: true,
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeTruthy();
+  });
+});
diff --git a/__tests__/unit/plots/column/limit-in-plot-spec.ts b/__tests__/unit/plots/column/limit-in-plot-spec.ts
@@ -0,0 +1,72 @@
+import { Column } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+const DATA = [
+  {
+    type: 'A',
+    value: 0,
+  },
+  {
+    type: 'B',
+    value: 10,
+  },
+  {
+    type: 'C',
+    value: 5,
+  },
+  {
+    type: 'D',
+    value: 20,
+  },
+];
+
+describe('line limitInPlot', () => {
+  const plot = new Column(createDiv(), {
+    data: DATA,
+    xField: 'type',
+    yField: 'value',
+  });
+
+  it('limitInPlot false', () => {
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+  });
+
+  it('limitInPlot true', () => {
+    plot.update({
+      yAxis: {
+        minLimit: 6,
+      },
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeTruthy();
+  });
+
+  it('limitInPlot false', () => {
+    plot.update({
+      yAxis: {
+        minLimit: undefined,
+      },
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+  });
+
+  it('user config', () => {
+    plot.update({
+      yAxis: {
+        minLimit: 6,
+      },
+      limitInPlot: false,
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+
+    plot.update({
+      yAxis: false,
+      limitInPlot: true,
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeTruthy();
+  });
+});
diff --git a/__tests__/unit/plots/line/limit-in-plot-spec.ts b/__tests__/unit/plots/line/limit-in-plot-spec.ts
@@ -0,0 +1,75 @@
+import { Line } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+const DATA = [
+  {
+    type: 'A',
+    value: 0,
+  },
+  {
+    type: 'B',
+    value: 10,
+  },
+  {
+    type: 'C',
+    value: 5,
+  },
+  {
+    type: 'D',
+    value: 20,
+  },
+];
+
+describe('line limitInPlot', () => {
+  const plot = new Line(createDiv(), {
+    data: DATA,
+    xField: 'type',
+    yField: 'value',
+    point: {
+      size: 10,
+    },
+  });
+
+  it('limitInPlot false', () => {
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+  });
+
+  it('limitInPlot true', () => {
+    plot.update({
+      yAxis: {
+        minLimit: 6,
+      },
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeTruthy();
+  });
+
+  it('limitInPlot false', () => {
+    plot.update({
+      yAxis: {
+        minLimit: undefined,
+      },
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+  });
+
+  it('user config', () => {
+    plot.update({
+      yAxis: {
+        minLimit: 6,
+      },
+      limitInPlot: false,
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeFalsy();
+
+    plot.update({
+      yAxis: false,
+      limitInPlot: true,
+    });
+    plot.render();
+    expect(plot.chart.limitInPlot).toBeTruthy();
+  });
+});
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@antv/event-emitter": "^0.1.2",
-    "@antv/g2": "^4.1.0-beta.20",
+    "@antv/g2": "^4.1.0-beta.21",
     "d3-hierarchy": "^2.0.0",
     "d3-regression": "^1.3.5",
     "dayjs": "^1.8.36",

diff --git a/src/adaptor/common.ts b/src/adaptor/common.ts
@@ -1,5 +1,5 @@
 import { Geometry } from '@antv/g2';
-import { each } from '@antv/util';
+import { each, isNil } from '@antv/util';
 import { Params } from '../core/adaptor';
 import { Options } from '../types';
 import { Interaction } from '../types/interaction';
@@ -183,3 +183,26 @@ export function annotation(annotationOptions?: Options['annotations']) {
     return params;
   };
 }
+
+/**
+ * 自动设置 limitInPlot
+ * @param params
+ */
+export function limitInPlot(params: Params<Options>): Params<Options> {
+  const { chart, options } = params;
+  const { yAxis, limitInPlot } = options;
+
+  let value = limitInPlot;
+
+  // 用户没有设置 limitInPlot，则自动根据 yAxis 是否有 min/max 来设置 limitInPlot
+  if (typeof yAxis !== 'boolean' && isNil(limitInPlot)) {
+    if (!isNil(yAxis.min) || !isNil(yAxis.max) || !isNil(yAxis.minLimit) || !isNil(yAxis.maxLimit)) {
+      value = true;
+    } else {
+      value = false;
+    }
+  }
+  chart.limitInPlot = value;
+
+  return params;
+}
diff --git a/src/plots/area/adaptor.ts b/src/plots/area/adaptor.ts
@@ -1,6 +1,6 @@
 import { Geometry } from '@antv/g2';
 import { each } from '@antv/util';
-import { tooltip, slider, interaction, animation, theme, annotation } from '../../adaptor/common';
+import { tooltip, slider, interaction, animation, theme, annotation, limitInPlot } from '../../adaptor/common';
 import { findGeometry } from '../../utils';
 import { Params } from '../../core/adaptor';
 import { area, point, line } from '../../adaptor/geometries';
@@ -124,6 +124,7 @@ export function adaptor(params: Params<AreaOptions>) {
     slider,
     annotation(),
     interaction,
-    animation
+    animation,
+    limitInPlot
   )(params);
 }
diff --git a/src/plots/column/adaptor.ts b/src/plots/column/adaptor.ts
@@ -1,6 +1,16 @@
 import { Params } from '../../core/adaptor';
 import { findGeometry } from '../../utils';
-import { tooltip, slider, interaction, animation, theme, scale, annotation, scrollbar } from '../../adaptor/common';
+import {
+  tooltip,
+  slider,
+  interaction,
+  animation,
+  theme,
+  scale,
+  annotation,
+  scrollbar,
+  limitInPlot,
+} from '../../adaptor/common';
 import { conversionTag } from '../../adaptor/conversion-tag';
 import { connectedArea } from '../../adaptor/connected-area';
 import { interval } from '../../adaptor/geometries';
@@ -191,6 +201,7 @@ export function adaptor(params: Params<ColumnOptions>, isBar = false) {
     animation,
     annotation(),
     conversionTag<ColumnOptions>(options.yField, !isBar, !!seriesField), // 有拆分的时候禁用转化率
-    connectedArea<ColumnOptions>(!options.isStack)
+    connectedArea<ColumnOptions>(!options.isStack),
+    limitInPlot
   )(params);
 }