fix(tiny): 迷你三个图的 yAxis.min/max 设置不生效 (#2022)

antvis · Nov 27, 2020 · 56ae9f3 · 56ae9f3
1 parent f19ad50
commit 56ae9f3
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 12 deletions.
diff --git a/__tests__/bugs/issue-2021-spec.ts b/__tests__/bugs/issue-2021-spec.ts
@@ -0,0 +1,102 @@
+import { TinyLine, TinyArea, TinyColumn } from '../../src';
+import { CountryEconomy } from '../data/country-economy';
+import { createDiv } from '../utils/dom';
+
+const DATA = [
+  264,
+  417,
+  438,
+  887,
+  309,
+  397,
+  550,
+  575,
+  563,
+  430,
+  525,
+  592,
+  492,
+  467,
+  513,
+  546,
+  983,
+  340,
+  539,
+  243,
+  226,
+  192,
+];
+
+describe('#2021', () => {
+  it('TinyLine', () => {
+    const line = new TinyLine(createDiv(), {
+      width: 400,
+      height: 300,
+      data: DATA,
+    });
+
+    line.render();
+
+    expect(line.chart.getYScales()[0].min).toBe(0);
+
+    line.update({
+      yAxis: {
+        max: 6000,
+        min: 20,
+      },
+    });
+
+    expect(line.chart.getYScales()[0].min).toBe(20);
+    expect(line.chart.getYScales()[0].max).toBe(6000);
+
+    line.destroy();
+  });
+
+  it('TinyArea', () => {
+    const area = new TinyArea(createDiv(), {
+      width: 400,
+      height: 300,
+      data: DATA,
+    });
+
+    area.render();
+
+    expect(area.chart.getYScales()[0].min).toBe(0);
+
+    area.update({
+      yAxis: {
+        max: 6000,
+        min: 20,
+      },
+    });
+
+    expect(area.chart.getYScales()[0].min).toBe(20);
+    expect(area.chart.getYScales()[0].max).toBe(6000);
+
+    area.destroy();
+  });
+
+  it('TinyColumn', () => {
+    const column = new TinyColumn(createDiv(), {
+      width: 400,
+      height: 300,
+      data: DATA,
+    });
+
+    column.render();
+
+    expect(column.chart.getYScales()[0].min).toBe(0);
+
+    column.update({
+      yAxis: {
+        max: 6000,
+        min: 20,
+      },
+    });
+
+    expect(column.chart.getYScales()[0].min).toBe(20);
+    expect(column.chart.getYScales()[0].max).toBe(6000);
+
+    column.destroy();
+  });
+});
diff --git a/src/plots/tiny-area/adaptor.ts b/src/plots/tiny-area/adaptor.ts
@@ -2,6 +2,8 @@ import { theme, scale, animation, annotation, tooltip } from '../../adaptor/comm
 import { Params } from '../../core/adaptor';
 import { flow, deepAssign } from '../../utils';
 import { area, line, point } from '../../adaptor/geometries';
+import { X_FIELD, Y_FIELD } from '../tiny-line/constants';
+import { adjustYMetaByZero } from '../../utils/data';
 import { TinyAreaOptions } from './types';
 
 /**
@@ -10,7 +12,7 @@ import { TinyAreaOptions } from './types';
  */
 function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
   const { chart, options } = params;
-  const { data, color, areaStyle, point: pointOptions, line: lineOptions } = options;
+  const { data, xAxis, yAxis, color, areaStyle, point: pointOptions, line: lineOptions } = options;
 
   const seriesData = data.map((y: number, x: number) => {
     return { x, y };
@@ -20,8 +22,8 @@ function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
 
   const p = deepAssign({}, params, {
     options: {
-      xField: 'x',
-      yField: 'y',
+      xField: X_FIELD,
+      yField: Y_FIELD,
       area: { color, style: areaStyle },
       line: lineOptions,
       point: pointOptions,
@@ -35,6 +37,20 @@ function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
   chart.axis(false);
   chart.legend(false);
 
+  // scale
+  scale(
+    {
+      [X_FIELD]: xAxis,
+      [Y_FIELD]: yAxis,
+    },
+    {
+      [X_FIELD]: {
+        type: 'cat',
+      },
+      [Y_FIELD]: adjustYMetaByZero(seriesData, Y_FIELD),
+    }
+  )(params);
+
   return params;
 }
 
@@ -44,5 +60,5 @@ function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
  * @param options
  */
 export function adaptor(params: Params<TinyAreaOptions>) {
-  return flow(geometry, scale({}), tooltip, theme, animation, annotation())(params);
+  return flow(geometry, tooltip, theme, animation, annotation())(params);
 }
diff --git a/src/plots/tiny-column/adaptor.ts b/src/plots/tiny-column/adaptor.ts
@@ -2,14 +2,16 @@ import { theme, scale, animation, annotation, tooltip } from '../../adaptor/comm
 import { Params } from '../../core/adaptor';
 import { flow, deepAssign } from '../../utils';
 import { interval } from '../../adaptor/geometries';
+import { X_FIELD, Y_FIELD } from '../tiny-line/constants';
+import { adjustYMetaByZero } from '../../utils/data';
 import { TinyColumnOptions } from './types';
 /**
  * 字段
  * @param params
  */
 function geometry(params: Params<TinyColumnOptions>): Params<TinyColumnOptions> {
   const { chart, options } = params;
-  const { data, color, columnStyle, columnWidthRatio } = options;
+  const { data, xAxis, yAxis, color, columnStyle, columnWidthRatio } = options;
 
   const seriesData = data.map((y: number, x: number) => {
     return { x: `${x}`, y };
@@ -19,8 +21,8 @@ function geometry(params: Params<TinyColumnOptions>): Params<TinyColumnOptions>
 
   const p = deepAssign({}, params, {
     options: {
-      xField: 'x',
-      yField: 'y',
+      xField: X_FIELD,
+      yField: Y_FIELD,
       widthRatio: columnWidthRatio,
       interval: {
         style: columnStyle,
@@ -34,6 +36,20 @@ function geometry(params: Params<TinyColumnOptions>): Params<TinyColumnOptions>
   chart.legend(false);
   chart.interaction('element-active');
 
+  // scale
+  scale(
+    {
+      [X_FIELD]: xAxis,
+      [Y_FIELD]: yAxis,
+    },
+    {
+      [X_FIELD]: {
+        type: 'cat',
+      },
+      [Y_FIELD]: adjustYMetaByZero(seriesData, Y_FIELD),
+    }
+  )(params);
+
   return params;
 }
 
@@ -43,5 +59,5 @@ function geometry(params: Params<TinyColumnOptions>): Params<TinyColumnOptions>
  * @param options
  */
 export function adaptor(params: Params<TinyColumnOptions>) {
-  return flow(geometry, scale({}), tooltip, theme, animation, annotation())(params);
+  return flow(geometry, tooltip, theme, animation, annotation())(params);
 }
diff --git a/src/plots/tiny-line/adaptor.ts b/src/plots/tiny-line/adaptor.ts
@@ -2,15 +2,17 @@ import { Params } from '../../core/adaptor';
 import { flow, deepAssign } from '../../utils';
 import { scale, theme, animation, annotation, tooltip } from '../../adaptor/common';
 import { line, point } from '../../adaptor/geometries';
+import { adjustYMetaByZero } from '../../utils/data';
 import { TinyLineOptions } from './types';
+import { X_FIELD, Y_FIELD } from './constants';
 
 /**
  * 字段
  * @param params
  */
 function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   const { chart, options } = params;
-  const { data, color, lineStyle, point: pointMapping } = options;
+  const { data, xAxis, yAxis, color, lineStyle, point: pointMapping } = options;
 
   const seriesData = data.map((y: number, x: number) => {
     return { x, y };
@@ -21,8 +23,8 @@ function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   // line geometry 处理
   const p = deepAssign({}, params, {
     options: {
-      xField: 'x',
-      yField: 'y',
+      xField: X_FIELD,
+      yField: Y_FIELD,
       line: {
         color,
         style: lineStyle,
@@ -37,6 +39,20 @@ function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   chart.axis(false);
   chart.legend(false);
 
+  // scale
+  scale(
+    {
+      [X_FIELD]: xAxis,
+      [Y_FIELD]: yAxis,
+    },
+    {
+      [X_FIELD]: {
+        type: 'cat',
+      },
+      [Y_FIELD]: adjustYMetaByZero(seriesData, Y_FIELD),
+    }
+  )(params);
+
   return params;
 }
 
@@ -46,5 +62,5 @@ function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
  * @param options
  */
 export function adaptor(params: Params<TinyLineOptions>) {
-  return flow(geometry, scale({}), theme, tooltip, animation, annotation())(params);
+  return flow(geometry, theme, tooltip, animation, annotation())(params);
 }
diff --git a/src/plots/tiny-line/constants.ts b/src/plots/tiny-line/constants.ts
@@ -1,5 +1,8 @@
 import { get } from '@antv/util';
 
+export const X_FIELD = 'x';
+export const Y_FIELD = 'y';
+
 export const DEFAULT_TOOLTIP_OPTIONS = {
   showTitle: false,
   shared: true,