Skip to content

Commit 8da53b8

Browse files
lxfu1liufu.lf
lxfu1
and
liufu.lf
authored
feat: 完善散点图功能、新增测试用例 (#1322)
* feat: scatter * feat: 完善散点图 adaptor 和添加部分单测 * feat: 完善散点图 adaptor 和添加部分单测 * 删除demos无用代码 * 删除 includeKeys * review 修改 * review 修改 * review 修复 * 去掉 size string 类型 * 修改test文案 * 修复 scatter 单测精度问题 * feat: scatter * feat: 完善散点图 adaptor 和添加部分单测 * feat: 完善散点图 adaptor 和添加部分单测 * 删除demos无用代码 * 删除 includeKeys * review 修改 * review 修改 * review 修复 * 去掉 size string 类型 * 修改test文案 * 修复 scatter 单测精度问题 * rebase Co-authored-by: liufu.lf <[email protected]>
1 parent 83b67f4 commit 8da53b8

File tree

11 files changed

+1128
-25
lines changed

11 files changed

+1128
-25
lines changed

‎__tests__/data/gender.ts

+509
Large diffs are not rendered by default.

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Scatter } from '../../../../src';
2+
import { data } from '../../../data/gender';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('scatter', () => {
6+
it('axis: axis options', () => {
7+
const scatter = new Scatter(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
appendPadding: 10,
11+
data,
12+
xField: 'weight',
13+
yField: 'height',
14+
shape: ['circle', 'square'],
15+
xAxis: {
16+
nice: true,
17+
label: {
18+
formatter: (text: string, item: any, index: number) => {
19+
return text;
20+
},
21+
style: {
22+
fill: 'green',
23+
fontSize: 16,
24+
},
25+
},
26+
},
27+
});
28+
29+
scatter.render();
30+
31+
const geometry = scatter.chart.geometries[0];
32+
const elements = geometry.elements;
33+
34+
expect(elements.length).toBe(507);
35+
// @ts-ignore
36+
expect(scatter.chart.options.axes.weight.label.style.fill).toBe('green');
37+
// @ts-ignore
38+
expect(scatter.chart.options.axes.weight.label.style.fontSize).toBe(16);
39+
});
40+
});

‎__tests__/unit/plots/scatter/color-spec.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Scatter } from '../../../../src';
2+
import { data } from '../../../data/gender';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('scatter', () => {
6+
it('color: string options', () => {
7+
const scatter = new Scatter(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
appendPadding: 10,
11+
data,
12+
xField: 'weight',
13+
yField: 'height',
14+
color: 'red',
15+
xAxis: {
16+
nice: true,
17+
},
18+
});
19+
20+
scatter.render();
21+
22+
const geometry = scatter.chart.geometries[0];
23+
const elements = geometry.elements;
24+
25+
expect(elements.length).toBe(507);
26+
expect(elements[0].getModel().color).toBe('red');
27+
});
28+
29+
it('color: string array options', () => {
30+
const scatter = new Scatter(createDiv(), {
31+
width: 400,
32+
height: 300,
33+
appendPadding: 10,
34+
data,
35+
xField: 'weight',
36+
yField: 'height',
37+
color: ['#e764ff', '#2b0033'],
38+
xAxis: {
39+
nice: true,
40+
},
41+
});
42+
43+
scatter.render();
44+
45+
const geometry = scatter.chart.geometries[0];
46+
const elements = geometry.elements;
47+
48+
// @ts-ignore
49+
expect(geometry.attributeOption.color.values.length).toBe(2);
50+
expect(elements.length).toBe(507);
51+
expect(elements[0].getModel().color).not.toBe('red');
52+
});
53+
});

‎__tests__/unit/plots/scatter/shape-spec.ts

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Scatter } from '../../../../src';
2+
import { data } from '../../../data/gender';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('scatter', () => {
6+
it('shpae: string options', () => {
7+
const scatter = new Scatter(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
appendPadding: 10,
11+
data,
12+
xField: 'weight',
13+
yField: 'height',
14+
shape: 'hollow-diamond',
15+
xAxis: {
16+
nice: true,
17+
},
18+
});
19+
20+
scatter.render();
21+
22+
const geometry = scatter.chart.geometries[0];
23+
const elements = geometry.elements;
24+
25+
expect(elements.length).toBe(507);
26+
expect(elements[0].getModel().shape).toBe('hollow-diamond');
27+
expect(elements[elements.length - 1].getModel().shape).toBe('hollow-diamond');
28+
});
29+
30+
it('shape: string array options', () => {
31+
const scatter = new Scatter(createDiv(), {
32+
width: 400,
33+
height: 300,
34+
appendPadding: 10,
35+
data,
36+
xField: 'weight',
37+
yField: 'height',
38+
shape: ['circle', 'square'],
39+
xAxis: {
40+
nice: true,
41+
},
42+
});
43+
44+
scatter.render();
45+
const geometry = scatter.chart.geometries[0];
46+
const elements = geometry.elements;
47+
const shapeArr = [];
48+
elements.forEach((ele) => {
49+
shapeArr.push(ele.getModel().shape);
50+
});
51+
const set = new Set(shapeArr);
52+
53+
// @ts-ignore
54+
expect(geometry.attributeOption.shape.values.length).toBe(2);
55+
expect(elements.length).toBe(507);
56+
expect(set.size).toBe(2);
57+
});
58+
59+
it('shape: callback options', () => {
60+
const scatter = new Scatter(createDiv(), {
61+
width: 400,
62+
height: 300,
63+
appendPadding: 10,
64+
data,
65+
xField: 'weight',
66+
yField: 'height',
67+
shapeField: 'gender',
68+
size: 10,
69+
shape: (gender: string) => {
70+
if (gender === 'female') {
71+
return 'square';
72+
}
73+
return 'circle';
74+
},
75+
xAxis: {
76+
nice: true,
77+
},
78+
});
79+
80+
scatter.render();
81+
const geometry = scatter.chart.geometries[0];
82+
const elements = geometry.elements;
83+
const shapeArr = [];
84+
elements.forEach((ele) => {
85+
shapeArr.push(ele.getModel().shape);
86+
});
87+
88+
// @ts-ignore
89+
expect(geometry.attributeOption.shape.callback).toBeFunction();
90+
expect(elements.length).toBe(507);
91+
expect(shapeArr).toContain('circle');
92+
expect(shapeArr).toContain('square');
93+
});
94+
});

‎__tests__/unit/plots/scatter/size-spec.ts

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { Scatter } from '../../../../src';
2+
import { data } from '../../../data/gender';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('scatter', () => {
6+
it('size: number options', () => {
7+
const scatter = new Scatter(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
appendPadding: 10,
11+
data,
12+
xField: 'weight',
13+
yField: 'height',
14+
sizeField: 'weight',
15+
size: [5, 10],
16+
xAxis: {
17+
nice: true,
18+
},
19+
});
20+
21+
scatter.render();
22+
23+
const geometry = scatter.chart.geometries[0];
24+
const elements = geometry.elements;
25+
const sizeArr = [];
26+
elements.forEach((ele) => {
27+
sizeArr.push(ele.getModel().size);
28+
});
29+
sizeArr.sort((a, b) => a - b);
30+
31+
expect(elements.length).toBe(507);
32+
expect(Math.floor(sizeArr[0])).toBe(5);
33+
expect(sizeArr[0]).not.toEqual(sizeArr[sizeArr.length - 1]);
34+
});
35+
36+
it('size: number array options', () => {
37+
const scatter = new Scatter(createDiv(), {
38+
width: 400,
39+
height: 300,
40+
appendPadding: 10,
41+
data,
42+
xField: 'weight',
43+
yField: 'height',
44+
size: [5, 10],
45+
xAxis: {
46+
nice: true,
47+
},
48+
});
49+
50+
scatter.render();
51+
52+
const geometry = scatter.chart.geometries[0];
53+
const elements = geometry.elements;
54+
55+
// @ts-ignore
56+
expect(geometry.attributeOption.size.values.length).toBe(2);
57+
expect(elements.length).toBe(507);
58+
expect(elements[0].getModel().size).not.toBe(elements[elements.length - 1].getModel().size);
59+
});
60+
61+
it('size: callback options', () => {
62+
const scatter = new Scatter(createDiv(), {
63+
width: 400,
64+
height: 300,
65+
appendPadding: 10,
66+
data,
67+
xField: 'weight',
68+
yField: 'height',
69+
size: (value: number) => {
70+
return Math.ceil(value / 10);
71+
},
72+
xAxis: {
73+
nice: true,
74+
},
75+
});
76+
77+
scatter.render();
78+
79+
const geometry = scatter.chart.geometries[0];
80+
const elements = geometry.elements;
81+
const sizeArr = [];
82+
elements.forEach((ele) => {
83+
sizeArr.push(ele.getModel().size);
84+
});
85+
sizeArr.sort((a, b) => a - b);
86+
87+
// @ts-ignore
88+
expect(geometry.attributeOption.size.callback).toBeFunction();
89+
expect(elements.length).toBe(507);
90+
expect(sizeArr[0] > 0).toBeTruthy();
91+
expect(sizeArr[0]).not.toEqual(sizeArr[sizeArr.length - 1]);
92+
});
93+
});

‎__tests__/unit/plots/scatter/style-spec.ts

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Scatter } from '../../../../src';
2+
import { data } from '../../../data/gender';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('scatter', () => {
6+
it('style: object options', () => {
7+
const scatter = new Scatter(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
appendPadding: 10,
11+
data,
12+
xField: 'weight',
13+
yField: 'height',
14+
sizeField: 'weight',
15+
size: [5, 10],
16+
xAxis: {
17+
nice: true,
18+
},
19+
pointStyle: {
20+
fill: 'red',
21+
stroke: 'yellow',
22+
opacity: 0.8,
23+
},
24+
});
25+
26+
scatter.render();
27+
28+
const geometry = scatter.chart.geometries[0];
29+
const elements = geometry.elements;
30+
31+
expect(elements[0].shape.attr('fill')).toBe('red');
32+
expect(elements[0].shape.attr('stroke')).toBe('yellow');
33+
expect(elements[0].shape.attr('opacity')).toBe(0.8);
34+
});
35+
36+
it('style: callback options', () => {
37+
const scatter = new Scatter(createDiv(), {
38+
width: 400,
39+
height: 300,
40+
appendPadding: 10,
41+
data,
42+
xField: 'weight',
43+
yField: 'height',
44+
sizeField: 'weight',
45+
size: [5, 10],
46+
colorField: 'gender',
47+
xAxis: {
48+
nice: true,
49+
},
50+
pointStyle: (x: number, y: number, colorField: string) => {
51+
if (colorField === 'male') {
52+
return {
53+
fill: 'green',
54+
stroke: 'yellow',
55+
opacity: 0.8,
56+
};
57+
}
58+
return {
59+
fill: 'red',
60+
stroke: 'yellow',
61+
opacity: 0.8,
62+
};
63+
},
64+
});
65+
66+
scatter.render();
67+
68+
const geometry = scatter.chart.geometries[0];
69+
const elements = geometry.elements;
70+
const colorArr = [];
71+
elements.forEach((ele) => {
72+
colorArr.push(ele.shape.attr('fill'));
73+
});
74+
75+
expect(colorArr).toContain('red');
76+
expect(colorArr).toContain('green');
77+
expect(elements[0].shape.attr('stroke')).toBe('yellow');
78+
expect(elements[0].shape.attr('opacity')).toBe(0.8);
79+
});
80+
});

0 commit comments

Comments
 (0)