diff --git a/__tests__/bugs/issue-2021-spec.ts b/__tests__/bugs/issue-2021-spec.ts new file mode 100644 index 0000000000..f72bcba861 --- /dev/null +++ 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 index 3556f024c5..52ee7b98eb 100644 --- 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): Params { 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): Params { 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): Params { 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): Params { * @param options */ export function adaptor(params: Params) { - 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 index ba293662a4..5c5010732d 100644 --- a/src/plots/tiny-column/adaptor.ts +++ b/src/plots/tiny-column/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 { interval } from '../../adaptor/geometries'; +import { X_FIELD, Y_FIELD } from '../tiny-line/constants'; +import { adjustYMetaByZero } from '../../utils/data'; import { TinyColumnOptions } from './types'; /** * 字段 @@ -9,7 +11,7 @@ import { TinyColumnOptions } from './types'; */ function geometry(params: Params): Params { 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): Params 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): Params 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): Params * @param options */ export function adaptor(params: Params) { - 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 index 1d1cdb1762..69f3ed66ba 100644 --- a/src/plots/tiny-line/adaptor.ts +++ b/src/plots/tiny-line/adaptor.ts @@ -2,7 +2,9 @@ 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'; /** * 字段 @@ -10,7 +12,7 @@ import { TinyLineOptions } from './types'; */ function geometry(params: Params): Params { 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): Params { // 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): Params { 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): Params { * @param options */ export function adaptor(params: Params) { - 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 index c3414630b4..31d352f741 100644 --- 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,