Skip to content

Commit 3bb1113

Browse files
author
aiyin.lzy
committed
feat: 补充测试用例
1 parent 25c1c2a commit 3bb1113

File tree

9 files changed

+267
-47
lines changed

9 files changed

+267
-47
lines changed

‎__tests__/data/treemap.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export const TREEMAP = {
2+
name: 'root',
3+
children: [
4+
{ name: '分类 1', value: 560 },
5+
{ name: '分类 2', value: 500 },
6+
{ name: '分类 3', value: 150 },
7+
{ name: '分类 4', value: 140 },
8+
{ name: '分类 5', value: 115 },
9+
{ name: '分类 6', value: 95 },
10+
{ name: '分类 7', value: 90 },
11+
{ name: '分类 8', value: 75 },
12+
{ name: '分类 9', value: 98 },
13+
{ name: '分类 10', value: 60 },
14+
{ name: '分类 11', value: 45 },
15+
{ name: '分类 12', value: 40 },
16+
{ name: '分类 13', value: 40 },
17+
{ name: '分类 14', value: 35 },
18+
{ name: '分类 15', value: 40 },
19+
{ name: '分类 16', value: 40 },
20+
{ name: '分类 17', value: 40 },
21+
{ name: '分类 18', value: 30 },
22+
{ name: '分类 19', value: 28 },
23+
{ name: '分类 20', value: 16 },
24+
],
25+
};

‎__tests__/unit/plots/treemap/axis-spec.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Treemap } from '../../../../src';
2+
import { createDiv } from '../../../utils/dom';
3+
import { TREEMAP } from '../../../data/treemap';
4+
5+
describe('treemap axis', () => {
6+
it('treemap axis', () => {
7+
const treemapPlot = new Treemap(createDiv(), {
8+
data: TREEMAP,
9+
colorField: 'name',
10+
});
11+
12+
treemapPlot.render();
13+
14+
// @ts-ignore
15+
expect(treemapPlot.chart.getController('axis').option).toBeFalsy();
16+
17+
treemapPlot.destroy();
18+
});
19+
});

‎__tests__/unit/plots/treemap/basic-spec.ts

+13-29
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,6 @@
11
import { Treemap } from '../../../../src';
22
import { createDiv } from '../../../utils/dom';
3-
4-
const data = {
5-
name: 'root',
6-
children: [
7-
{ name: '分类 1', value: 560 },
8-
{ name: '分类 2', value: 500 },
9-
{ name: '分类 3', value: 150 },
10-
{ name: '分类 4', value: 140 },
11-
{ name: '分类 5', value: 115 },
12-
{ name: '分类 6', value: 95 },
13-
{ name: '分类 7', value: 90 },
14-
{ name: '分类 8', value: 75 },
15-
{ name: '分类 9', value: 98 },
16-
{ name: '分类 10', value: 60 },
17-
{ name: '分类 11', value: 45 },
18-
{ name: '分类 12', value: 40 },
19-
{ name: '分类 13', value: 40 },
20-
{ name: '分类 14', value: 35 },
21-
{ name: '分类 15', value: 40 },
22-
{ name: '分类 16', value: 40 },
23-
{ name: '分类 17', value: 40 },
24-
{ name: '分类 18', value: 30 },
25-
{ name: '分类 19', value: 28 },
26-
{ name: '分类 20', value: 16 },
27-
],
28-
};
3+
import { TREEMAP } from '../../../data/treemap';
294

305
const color = [
316
'#5B8FF9',
@@ -50,10 +25,10 @@ const color = [
5025
'#FFE0ED',
5126
];
5227

53-
describe('treemap', () => {
28+
describe('treemap basic', () => {
5429
it('basic treemap', () => {
5530
const treemapPlot = new Treemap(createDiv(), {
56-
data,
31+
data: TREEMAP,
5732
colorField: 'name',
5833
color,
5934
});
@@ -62,17 +37,26 @@ describe('treemap', () => {
6237

6338
const geometry = treemapPlot.chart.geometries[0];
6439
expect(geometry.type).toBe('polygon');
40+
41+
// label
6542
// @ts-ignore
6643
expect(geometry.attributeOption.color.fields).toEqual(['name']);
44+
6745
// @ts-ignore
6846
expect(geometry.attributeOption.color.values).toEqual(color);
47+
48+
// label
49+
// @ts-ignore
50+
expect(geometry.labelOption.fields).toEqual(['name']);
51+
52+
// position
6953
const positionFields = geometry.getAttribute('position').getFields();
7054
expect(geometry.elements.length).toBe(geometry.data.length);
7155
expect(positionFields).toHaveLength(2);
7256
expect(positionFields).toEqual(['x', 'y']);
7357

7458
// @ts-ignore
75-
expect(treemapPlot.chart.getController('axis').option).toBeFalsy();
59+
// expect(treemapPlot.chart.getController('axis').option).toBeFalsy();
7660

7761
treemapPlot.destroy();
7862
});

‎__tests__/unit/plots/treemap/legend-spec.ts

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Treemap } from '../../../../src';
2+
import { createDiv } from '../../../utils/dom';
3+
import { TREEMAP } from '../../../data/treemap';
4+
5+
describe('treemap legend', () => {
6+
let treemapPlot;
7+
8+
const options = {
9+
data: TREEMAP,
10+
colorField: 'name',
11+
};
12+
13+
beforeAll(() => {
14+
treemapPlot = new Treemap(createDiv(''), options);
15+
treemapPlot.render();
16+
});
17+
18+
afterAll(() => {
19+
treemapPlot.destroy();
20+
});
21+
22+
it('treemap legend default', () => {
23+
const legendComponent = treemapPlot.chart.getController('legend').getComponents()[0];
24+
25+
expect(legendComponent.direction).toBe('bottom');
26+
expect(legendComponent.component.cfg.items.length).toBe(TREEMAP.children.length);
27+
});
28+
29+
it('treemap legend custom', () => {
30+
treemapPlot.update({
31+
...options,
32+
legend: {
33+
position: 'top',
34+
},
35+
});
36+
37+
expect(treemapPlot.chart.getController('legend').getComponents()[0].direction).toBe('top');
38+
});
39+
40+
it('treemap legend false', () => {
41+
treemapPlot.update({
42+
...options,
43+
legend: false,
44+
});
45+
46+
expect(treemapPlot.chart.getController('legend').getComponents().length).toBe(0);
47+
});
48+
});

‎__tests__/unit/plots/treemap/tooltip-spec.ts

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Treemap } from '../../../../src';
2+
import { createDiv } from '../../../utils/dom';
3+
import { TREEMAP } from '../../../data/treemap';
4+
import { TREEMAP_CHILDREN } from '../../../data/treemap-nest';
5+
6+
describe('treemap tooltip', () => {
7+
let treemapPlot;
8+
9+
const options = {
10+
data: TREEMAP,
11+
colorField: 'name',
12+
};
13+
14+
beforeAll(() => {
15+
treemapPlot = new Treemap(createDiv(''), options);
16+
treemapPlot.render();
17+
});
18+
19+
afterAll(() => {
20+
treemapPlot.destroy();
21+
});
22+
23+
it('treemap tooltip default', () => {
24+
const tooltipOption = treemapPlot.chart.options.tooltip;
25+
expect(tooltipOption.showMarkers).toBe(false);
26+
expect(tooltipOption.showTitle).toBe(false);
27+
expect(tooltipOption.fields).toEqual(['name', 'value', 'name']);
28+
expect(tooltipOption.formatter(TREEMAP.children[0])).toEqual({ name: '分类 1', value: 560 });
29+
});
30+
31+
it('treemap tooltip custom', () => {
32+
treemapPlot.update({
33+
data: TREEMAP_CHILDREN,
34+
colorField: 'brand',
35+
tooltip: {
36+
showTitle: true,
37+
title: 'test',
38+
},
39+
});
40+
41+
const customTooltipOption = treemapPlot.chart.options.tooltip;
42+
43+
expect(customTooltipOption.showTitle).toBe(true);
44+
expect(customTooltipOption.title).toBe('test');
45+
});
46+
47+
it('treemap tooltip false', () => {
48+
treemapPlot.update({
49+
tooltip: false,
50+
});
51+
52+
expect(treemapPlot.chart.options.tooltip).toBe(false);
53+
expect(treemapPlot.chart.getComponents().find((co) => co.type === 'tooltip')).toBe(undefined);
54+
});
55+
});

‎__tests__/unit/plots/treemap/treemap-nest-spec.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const color = [
1717
'#D3EEF9',
1818
];
1919

20-
describe('treemap', () => {
20+
describe('treemap nest', () => {
2121
it('basic treemap', () => {
2222
const treemapPlot = new Treemap(createDiv(), {
2323
data: TREEMAP_CHILDREN,
@@ -46,6 +46,8 @@ describe('treemap', () => {
4646
expect(treemapPlot.chart.getController('axis').option).toBeFalsy();
4747
// @ts-ignore
4848
expect(geometry.labelOption.cfg.layout.type).toBe('limit-in-shape');
49+
// @ts-ignore
50+
expect(geometry.labelOption.fields).toEqual(['name']);
4951

5052
treemapPlot.destroy();
5153
});

‎__tests__/unit/plots/treemap/utils-spec.ts

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { transformData } from '../../../../src/plots/treemap/utils';
2+
3+
const data1 = {
4+
name: 'root',
5+
children: [
6+
{
7+
name: '分类 1',
8+
value: 100,
9+
},
10+
{
11+
name: '分类 2',
12+
value: 50,
13+
},
14+
{
15+
name: '分类 3',
16+
value: 50,
17+
},
18+
],
19+
};
20+
21+
const data2 = {
22+
name: 'root',
23+
children: [
24+
{
25+
name: '三星',
26+
children: [
27+
{
28+
name: '三星1',
29+
value: 100,
30+
},
31+
{
32+
name: '三星2',
33+
value: 50,
34+
},
35+
],
36+
},
37+
{
38+
name: '小米',
39+
children: [
40+
{
41+
name: '小米1',
42+
value: 10,
43+
},
44+
{
45+
name: '小米2',
46+
value: 20,
47+
},
48+
],
49+
},
50+
],
51+
};
52+
53+
describe('treemap transformData', () => {
54+
it('transformData, basic treemap', () => {
55+
const data = transformData({
56+
data: data1,
57+
colorField: 'name',
58+
});
59+
60+
const areaArr = data.map((dt) => {
61+
const w = dt.x[1] - dt.x[0];
62+
const h = dt.y[1] - dt.y[2];
63+
return Number((w * h).toFixed(3));
64+
});
65+
66+
expect(data.length).toBe(3);
67+
expect(areaArr[1] / areaArr[0]).toEqual(data1.children[1].value / data1.children[0].value);
68+
expect(areaArr[2] / areaArr[1]).toEqual(data1.children[2].value / data1.children[1].value);
69+
});
70+
71+
it('transformData, nest treemap', () => {
72+
const data = transformData({
73+
data: data2,
74+
colorField: 'name',
75+
});
76+
77+
const areaArr = data.map((dt) => {
78+
const w = dt.x[1] - dt.x[0];
79+
const h = dt.y[1] - dt.y[2];
80+
return Number((w * h).toFixed(3));
81+
});
82+
83+
expect(data.length).toBe(4);
84+
expect((areaArr[1] / areaArr[0]).toFixed(1)).toEqual(
85+
(data2.children[0].children[1].value / data2.children[0].children[0].value).toFixed(1)
86+
);
87+
expect((areaArr[3] / areaArr[2]).toFixed(1)).toEqual(
88+
(data2.children[1].children[1].value / data2.children[1].children[0].value).toFixed(1)
89+
);
90+
expect((areaArr[3] / areaArr[1]).toFixed(1)).toEqual(
91+
(data2.children[1].children[1].value / data2.children[0].children[1].value).toFixed(1)
92+
);
93+
});
94+
});

‎examples/more-plots/treemap/demo/treemap-nest.ts

+10-15
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
import { Treemap } from '@antv/g2plot';
22

3-
function processData(data) {
4-
// 会通过子节点累加 value 值，所以设置为 0
5-
return {
6-
name: 'root',
7-
children: data.map((mobile) => {
3+
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/mobile.json')
4+
.then((res) => res.json())
5+
.then((fetchData) => {
6+
fetchData.forEach((mobile) => {
87
mobile.value = null;
9-
return mobile;
10-
}),
11-
};
12-
}
8+
});
139

14-
fetch('https://gw.alipayobjects.com/os/basement_prod/be471bfc-b37f-407e-833b-0f489bd3fdb2.json')
15-
.then((res) => res.json())
16-
.then((data) => {
17-
// 对数据进行预处理
18-
const mobileData = processData(data);
10+
const data = {
11+
name: 'root',
12+
children: fetchData,
13+
};
1914
const treemapPlot = new Treemap('container', {
20-
data: mobileData,
15+
data,
2116
colorField: 'brand',
2217
});
2318
treemapPlot.render();

‎src/plots/treemap/adaptor.ts

-2
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,7 @@ function defaultOptions(params: Params<TreemapOptions>): Params<TreemapOptions>
2323
},
2424
},
2525
tooltip: {
26-
shared: true,
2726
showMarkers: false,
28-
offset: 20,
2927
showTitle: false,
3028
fields: ['name', 'value', colorField],
3129
formatter: (data) => {

0 commit comments

Comments
 (0)