Skip to content

Commit 921deb6

Browse files
yp0413150120沈建斌
yp0413150120
and
沈建斌
authored
feat: 迷你折线图和迷你柱形图重写changeData && 添加单测 (#2177)
* feat: 重写迷你柱状图的changedata方法 && 添加单元测试 * feat: 迷你折线图重写changeData && 添加单测 * fix: tinyLine去掉console * fix: 抽离tinyLine生成data方法 && 添加单测 * fix: 迷你图数据处理抽离成公共方法 * feat: 迷你折线图使用getTinyData方法获取数据 * fix: 修改单测文件名 * fix: 调整迷你图获取data方法的目录 * fix: 迷你区域图使用统一的迷你图获取data方法 * fix: 迷你柱状图使用统一的迷你图获取data方法 Co-authored-by: 沈建斌 <[email protected]>
1 parent b46e6b3 commit 921deb6

File tree

10 files changed

+291
-13
lines changed

10 files changed

+291
-13
lines changed

‎__tests__/unit/plots/tiny-column/change-data-spec.ts

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { partySupport } from '../../../data/party-support';
2+
import { TinyColumn } from '../../../../src';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('tiny-column', () => {
6+
it('change data', () => {
7+
const data = partySupport
8+
.filter((o) => o.type === 'FF')
9+
.map((item) => {
10+
return item.value;
11+
});
12+
const tinyColumn = new TinyColumn(createDiv(), {
13+
width: 200,
14+
height: 100,
15+
meta: {
16+
y: {
17+
min: 0,
18+
max: 5000,
19+
},
20+
},
21+
data,
22+
autoFit: false,
23+
});
24+
25+
tinyColumn.render();
26+
27+
expect(tinyColumn.chart.geometries[0].elements.length).toEqual(data.length);
28+
expect(tinyColumn.options.data).toEqual(data);
29+
30+
const newData = partySupport
31+
.filter((o) => ['FF', 'SF'].includes(o.type))
32+
.map((item) => {
33+
return item.value;
34+
});
35+
tinyColumn.changeData(newData);
36+
37+
expect(tinyColumn.chart.geometries[0].elements.length).toEqual(newData.length);
38+
expect(tinyColumn.options.data).toEqual(newData);
39+
40+
tinyColumn.destroy();
41+
});
42+
43+
it('add data', () => {
44+
const data = partySupport
45+
.filter((o) => o.type === 'FF')
46+
.map((item) => {
47+
return item.value;
48+
});
49+
const tinyColumn = new TinyColumn(createDiv(), {
50+
width: 200,
51+
height: 100,
52+
meta: {
53+
y: {
54+
min: 0,
55+
max: 5000,
56+
},
57+
},
58+
data,
59+
autoFit: false,
60+
});
61+
62+
tinyColumn.render();
63+
64+
expect(tinyColumn.chart.geometries[0].elements.length).toEqual(data.length);
65+
expect(tinyColumn.options.data).toEqual(data);
66+
67+
const newData = [...data, 1900, 2000];
68+
tinyColumn.changeData(newData);
69+
70+
expect(tinyColumn.chart.geometries[0].elements.length).toEqual(newData.length);
71+
expect(tinyColumn.options.data).toEqual(newData);
72+
73+
tinyColumn.destroy();
74+
});
75+
76+
it('change empty data', () => {
77+
const data = partySupport
78+
.filter((o) => o.type === 'FF')
79+
.map((item) => {
80+
return item.value;
81+
});
82+
const tinyColumn = new TinyColumn(createDiv(), {
83+
width: 200,
84+
height: 100,
85+
meta: {
86+
y: {
87+
min: 0,
88+
max: 5000,
89+
},
90+
},
91+
data,
92+
autoFit: false,
93+
});
94+
95+
tinyColumn.render();
96+
97+
expect(tinyColumn.chart.geometries[0].elements.length).toEqual(data.length);
98+
expect(tinyColumn.options.data).toEqual(data);
99+
100+
const newData = [];
101+
tinyColumn.changeData(newData);
102+
103+
expect(tinyColumn.chart.geometries[0].elements.length).toEqual(newData.length);
104+
expect(tinyColumn.options.data).toEqual(newData);
105+
106+
tinyColumn.destroy();
107+
});
108+
});

‎__tests__/unit/plots/tiny-line/change-data-spec.ts

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { partySupport } from '../../../data/party-support';
2+
import { TinyLine } from '../../../../src';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('tiny-line', () => {
6+
it('change data', () => {
7+
const data = partySupport
8+
.filter((o) => o.type === 'FF')
9+
.map((item) => {
10+
return item.value;
11+
});
12+
const tinyLine = new TinyLine(createDiv(), {
13+
width: 200,
14+
height: 100,
15+
meta: {
16+
y: {
17+
min: 0,
18+
max: 5000,
19+
},
20+
},
21+
data,
22+
autoFit: false,
23+
});
24+
25+
tinyLine.render();
26+
27+
expect(tinyLine.options.data).toEqual(data);
28+
29+
const newData = partySupport
30+
.filter((o) => ['FF', 'SF'].includes(o.type))
31+
.map((item) => {
32+
return item.value;
33+
});
34+
tinyLine.changeData(newData);
35+
36+
expect(tinyLine.options.data).toEqual(newData);
37+
38+
tinyLine.destroy();
39+
});
40+
41+
it('add data', () => {
42+
const data = partySupport
43+
.filter((o) => o.type === 'FF')
44+
.map((item) => {
45+
return item.value;
46+
});
47+
const tinyLine = new TinyLine(createDiv(), {
48+
width: 200,
49+
height: 100,
50+
meta: {
51+
y: {
52+
min: 0,
53+
max: 5000,
54+
},
55+
},
56+
data,
57+
autoFit: false,
58+
});
59+
60+
tinyLine.render();
61+
expect(tinyLine.options.data).toEqual(data);
62+
63+
const newData = [...data, 1900, 2000, 2200];
64+
tinyLine.changeData(newData);
65+
66+
expect(tinyLine.options.data).toEqual(newData);
67+
68+
tinyLine.destroy();
69+
});
70+
71+
it('change empty data', () => {
72+
const data = partySupport
73+
.filter((o) => o.type === 'FF')
74+
.map((item) => {
75+
return item.value;
76+
});
77+
const tinyLine = new TinyLine(createDiv(), {
78+
width: 200,
79+
height: 100,
80+
meta: {
81+
y: {
82+
min: 0,
83+
max: 5000,
84+
},
85+
},
86+
data,
87+
autoFit: false,
88+
});
89+
90+
tinyLine.render();
91+
92+
expect(tinyLine.options.data).toEqual(data);
93+
94+
const newData = [];
95+
tinyLine.changeData(newData);
96+
97+
expect(tinyLine.options.data).toEqual(newData);
98+
99+
tinyLine.destroy();
100+
});
101+
});

‎__tests__/unit/plots/tiny-line/get-tiny-data-spec.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { getTinyData } from '../../../../src/plots/tiny-line/utils';
2+
3+
describe('tiny-data', () => {
4+
it('normal data', () => {
5+
const originalData = [100, 200, 0, -100, -200];
6+
const data = getTinyData(originalData);
7+
8+
expect(data.length).toEqual(originalData.length);
9+
expect(data).toEqual([
10+
{ x: '0', y: 100 },
11+
{ x: '1', y: 200 },
12+
{ x: '2', y: 0 },
13+
{ x: '3', y: -100 },
14+
{ x: '4', y: -200 },
15+
]);
16+
});
17+
18+
it('contain Nil element', () => {
19+
const originalData = [100, undefined, 0, null, -200];
20+
const data = getTinyData(originalData);
21+
22+
expect(data.length).toEqual(originalData.length);
23+
expect(data).toEqual([
24+
{ x: '0', y: 100 },
25+
{ x: '1', y: undefined },
26+
{ x: '2', y: 0 },
27+
{ x: '3', y: null },
28+
{ x: '4', y: -200 },
29+
]);
30+
});
31+
32+
it('empty data', () => {
33+
const originalData = [];
34+
const data = getTinyData(originalData);
35+
36+
expect(data.length).toEqual(0);
37+
});
38+
39+
it('invalid data', () => {
40+
const inValidData_1 = getTinyData(undefined);
41+
expect(inValidData_1).toEqual([]);
42+
43+
const inValidData_2 = getTinyData(null);
44+
expect(inValidData_2).toEqual([]);
45+
});
46+
});

‎src/plots/tiny-area/adaptor.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Params } from '../../core/adaptor';
33
import { flow, deepAssign } from '../../utils';
44
import { area, line, point } from '../../adaptor/geometries';
55
import { X_FIELD, Y_FIELD } from '../tiny-line/constants';
6+
import { getTinyData } from '../tiny-line/utils';
67
import { adjustYMetaByZero } from '../../utils/data';
78
import { TinyAreaOptions } from './types';
89

@@ -14,9 +15,7 @@ function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
1415
const { chart, options } = params;
1516
const { data, xAxis, yAxis, color, areaStyle, point: pointOptions, line: lineOptions } = options;
1617

17-
const seriesData = data.map((y: number, x: number) => {
18-
return { x, y };
19-
});
18+
const seriesData = getTinyData(data);
2019

2120
chart.data(seriesData);
2221

‎src/plots/tiny-area/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Plot } from '../../core/plot';
22
import { Adaptor } from '../../core/adaptor';
33
import { DEFAULT_TOOLTIP_OPTIONS } from '../tiny-line/constants';
4+
import { getTinyData } from '../tiny-line/utils';
45
import { TinyAreaOptions } from './types';
56
import { adaptor } from './adaptor';
67

@@ -41,7 +42,6 @@ export class TinyArea extends Plot<TinyAreaOptions> {
4142
*/
4243
public changeData(data: TinyAreaOptions['data']) {
4344
this.updateOption({ data });
44-
const newData = data.map((y: number, x: number) => ({ x, y }));
45-
return this.chart.changeData(newData);
45+
return this.chart.changeData(getTinyData(data));
4646
}
4747
}

‎src/plots/tiny-column/adaptor.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Params } from '../../core/adaptor';
33
import { flow, deepAssign } from '../../utils';
44
import { interval } from '../../adaptor/geometries';
55
import { X_FIELD, Y_FIELD } from '../tiny-line/constants';
6+
import { getTinyData } from '../tiny-line/utils';
67
import { adjustYMetaByZero } from '../../utils/data';
78
import { TinyColumnOptions } from './types';
89
/**
@@ -13,9 +14,7 @@ function geometry(params: Params<TinyColumnOptions>): Params<TinyColumnOptions>
1314
const { chart, options } = params;
1415
const { data, xAxis, yAxis, color, columnStyle, columnWidthRatio } = options;
1516

16-
const seriesData = data.map((y: number, x: number) => {
17-
return { x: `${x}`, y };
18-
});
17+
const seriesData = getTinyData(data);
1918

2019
chart.data(seriesData);
2120

‎src/plots/tiny-column/index.ts

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { Plot } from '../../core/plot';
1+
import { map } from '@antv/util';
22
import { Adaptor } from '../../core/adaptor';
3+
import { Plot } from '../../core/plot';
4+
import { getTinyData } from '../tiny-line/utils';
5+
import { adaptor } from './adaptor';
36
import { DEFAULT_TOOLTIP_OPTIONS } from './constants';
47
import { TinyColumnOptions } from './types';
5-
import { adaptor } from './adaptor';
68

79
export { TinyColumnOptions };
810

@@ -25,4 +27,13 @@ export class TinyColumn extends Plot<TinyColumnOptions> {
2527
protected getSchemaAdaptor(): Adaptor<TinyColumnOptions> {
2628
return adaptor;
2729
}
30+
31+
/**
32+
* @override
33+
* @param data
34+
*/
35+
public changeData(data: TinyColumnOptions['data']) {
36+
this.updateOption({ data });
37+
this.chart.changeData(getTinyData(data));
38+
}
2839
}

‎src/plots/tiny-line/adaptor.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { flow, deepAssign } from '../../utils';
33
import { scale, theme, animation, annotation, tooltip } from '../../adaptor/common';
44
import { line, point } from '../../adaptor/geometries';
55
import { adjustYMetaByZero } from '../../utils/data';
6+
import { getTinyData } from './utils';
67
import { TinyLineOptions } from './types';
78
import { X_FIELD, Y_FIELD } from './constants';
89

@@ -14,9 +15,7 @@ function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
1415
const { chart, options } = params;
1516
const { data, xAxis, yAxis, color, lineStyle, point: pointMapping } = options;
1617

17-
const seriesData = data.map((y: number, x: number) => {
18-
return { x, y };
19-
});
18+
const seriesData = getTinyData(data);
2019

2120
chart.data(seriesData);
2221

‎src/plots/tiny-line/index.ts

+10
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Adaptor } from '../../core/adaptor';
33
import { TinyLineOptions } from './types';
44
import { adaptor } from './adaptor';
55
import { DEFAULT_TOOLTIP_OPTIONS } from './constants';
6+
import { getTinyData } from './utils';
67

78
export { TinyLineOptions };
89

@@ -25,4 +26,13 @@ export class TinyLine extends Plot<TinyLineOptions> {
2526
protected getSchemaAdaptor(): Adaptor<TinyLineOptions> {
2627
return adaptor;
2728
}
29+
30+
/**
31+
* @override
32+
* @param data
33+
*/
34+
public changeData(data: TinyLineOptions['data']) {
35+
this.updateOption({ data });
36+
this.chart.changeData(getTinyData(data));
37+
}
2838
}

‎src/plots/tiny-line/utils.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { map } from '@antv/util';
2+
3+
export function getTinyData(data: number[]) {
4+
return map(data || [], (y: number, x: number) => ({ x: `${x}`, y }));
5+
}

0 commit comments

Comments
 (0)