Skip to content

Commit 83b67f4

Browse files
connonoyinshi.wyl
connono
and
yinshi.wyl
authored
feat: add progress (#1317)
* feat: add progress * fix: 修改progress type * fix: 修改progress type * fix: 修改单测shapestyle为function * fix: innerRadius & radius 增加默认值 * fix: 修改默认值 Co-authored-by: yinshi.wyl <[email protected]>
1 parent d827312 commit 83b67f4

File tree

9 files changed

+690
-0
lines changed

9 files changed

+690
-0
lines changed

‎__tests__/unit/plots/progress/index-spec.ts

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import { Progress } from '../../../../src';
2+
import { createDiv } from '../../../utils/dom';
3+
4+
describe('progress', () => {
5+
it('data', () => {
6+
const progress = new Progress(createDiv(), {
7+
width: 200,
8+
height: 100,
9+
percent: 0.6,
10+
autoFit: false,
11+
});
12+
13+
progress.render();
14+
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
15+
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
16+
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
17+
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
18+
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
19+
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
20+
21+
progress.update({
22+
width: 200,
23+
height: 100,
24+
percent: 0.5,
25+
autoFit: false,
26+
});
27+
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
28+
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
29+
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
30+
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
31+
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.5);
32+
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
33+
});
34+
35+
it('data with color', () => {
36+
const progress = new Progress(createDiv(), {
37+
width: 200,
38+
height: 100,
39+
percent: 0.6,
40+
color: ['#123456', '#654321'],
41+
autoFit: false,
42+
});
43+
44+
progress.render();
45+
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
46+
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
47+
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456');
48+
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
49+
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
50+
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
51+
52+
progress.update({
53+
width: 200,
54+
height: 100,
55+
percent: 0.6,
56+
color: () => ['#654321', '#123456'],
57+
autoFit: false,
58+
});
59+
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
60+
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
61+
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321');
62+
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
63+
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
64+
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456');
65+
});
66+
67+
it('data with progressStyle', () => {
68+
const progress = new Progress(createDiv(), {
69+
width: 200,
70+
height: 100,
71+
percent: 0.6,
72+
progressStyle: {
73+
stroke: '#123456',
74+
lineWidth: 2,
75+
lineDash: [2, 2],
76+
},
77+
autoFit: false,
78+
});
79+
80+
progress.render();
81+
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
82+
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
83+
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
84+
expect(progress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456');
85+
expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);
86+
expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]);
87+
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
88+
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
89+
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
90+
expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
91+
expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
92+
expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
93+
94+
const progressStyle = (x, percent, type) => {
95+
if (type === 'current') {
96+
return percent > 0.5
97+
? {
98+
stroke: '#654321',
99+
lineWidth: 4,
100+
lineDash: [4, 4],
101+
}
102+
: {
103+
stroke: '#123456',
104+
lineWidth: 4,
105+
lineDash: [4, 4],
106+
};
107+
} else if (type === 'target') {
108+
return percent >= 0.5
109+
? {
110+
stroke: '#654321',
111+
lineWidth: 4,
112+
lineDash: [4, 4],
113+
}
114+
: {
115+
stroke: '#123456',
116+
lineWidth: 4,
117+
lineDash: [4, 4],
118+
};
119+
}
120+
};
121+
122+
progress.update({
123+
width: 200,
124+
height: 100,
125+
percent: 0.6,
126+
progressStyle,
127+
autoFit: false,
128+
});
129+
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
130+
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
131+
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
132+
expect(progress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#654321');
133+
expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
134+
expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
135+
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
136+
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
137+
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
138+
expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
139+
expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
140+
expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
141+
142+
progress.update({
143+
width: 200,
144+
height: 100,
145+
percent: 0.4,
146+
progressStyle,
147+
autoFit: false,
148+
});
149+
150+
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
151+
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.4);
152+
expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
153+
expect(progress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456');
154+
expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
155+
expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
156+
expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
157+
expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.6);
158+
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
159+
expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321');
160+
expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
161+
expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
162+
});
163+
});

‎__tests__/unit/plots/ring-progress/index-spec.ts

+203
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
import { RingProgress } from '../../../../src';
2+
import { createDiv } from '../../../utils/dom';
3+
4+
describe('ring-progress', () => {
5+
it('data', () => {
6+
const ringGrogress = new RingProgress(createDiv(), {
7+
radius: 1,
8+
innerRadius: 0.5,
9+
width: 200,
10+
height: 100,
11+
percent: 0.6,
12+
autoFit: false,
13+
});
14+
15+
ringGrogress.render();
16+
expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta');
17+
expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1);
18+
expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.5);
19+
expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
20+
expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
21+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
22+
expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
23+
expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
24+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
25+
26+
ringGrogress.update({
27+
radius: 1,
28+
innerRadius: 0.5,
29+
width: 200,
30+
height: 100,
31+
percent: 0.5,
32+
autoFit: false,
33+
});
34+
expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta');
35+
expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1);
36+
expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.5);
37+
expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
38+
expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
39+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
40+
expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
41+
expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.5);
42+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
43+
});
44+
45+
it('data with color', () => {
46+
const ringGrogress = new RingProgress(createDiv(), {
47+
radius: 1,
48+
innerRadius: 0.5,
49+
width: 200,
50+
height: 100,
51+
percent: 0.6,
52+
color: ['#123456', '#654321'],
53+
autoFit: false,
54+
});
55+
56+
ringGrogress.render();
57+
expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
58+
expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
59+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456');
60+
expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
61+
expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
62+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
63+
64+
ringGrogress.update({
65+
radius: 1,
66+
innerRadius: 0.5,
67+
width: 200,
68+
height: 100,
69+
percent: 0.6,
70+
color: () => ['#654321', '#123456'],
71+
autoFit: false,
72+
});
73+
expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
74+
expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
75+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321');
76+
expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
77+
expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
78+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456');
79+
});
80+
81+
it('data with progressStyle', () => {
82+
const ringGrogress = new RingProgress(createDiv(), {
83+
radius: 1,
84+
innerRadius: 0.5,
85+
width: 200,
86+
height: 100,
87+
percent: 0.6,
88+
progressStyle: {
89+
stroke: '#123456',
90+
lineWidth: 2,
91+
lineDash: [2, 2],
92+
},
93+
autoFit: false,
94+
});
95+
96+
ringGrogress.render();
97+
expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
98+
expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
99+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
100+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456');
101+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);
102+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]);
103+
expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
104+
expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
105+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
106+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
107+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
108+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
109+
110+
const progressStyle = (x, percent, type) => {
111+
if (type === 'current') {
112+
return percent > 0.5
113+
? {
114+
stroke: '#654321',
115+
lineWidth: 4,
116+
lineDash: [4, 4],
117+
}
118+
: {
119+
stroke: '#123456',
120+
lineWidth: 4,
121+
lineDash: [4, 4],
122+
};
123+
} else if (type === 'target') {
124+
return percent >= 0.5
125+
? {
126+
stroke: '#654321',
127+
lineWidth: 4,
128+
lineDash: [4, 4],
129+
}
130+
: {
131+
stroke: '#123456',
132+
lineWidth: 4,
133+
lineDash: [4, 4],
134+
};
135+
}
136+
};
137+
138+
ringGrogress.update({
139+
radius: 1,
140+
innerRadius: 0.5,
141+
width: 200,
142+
height: 100,
143+
percent: 0.6,
144+
progressStyle,
145+
autoFit: false,
146+
});
147+
expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
148+
expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
149+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
150+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#654321');
151+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
152+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
153+
expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
154+
expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
155+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
156+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
157+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
158+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
159+
160+
ringGrogress.update({
161+
radius: 1,
162+
innerRadius: 0.5,
163+
width: 200,
164+
height: 100,
165+
percent: 0.4,
166+
progressStyle,
167+
autoFit: false,
168+
});
169+
170+
expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
171+
expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.4);
172+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
173+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('stroke')).toBe('#123456');
174+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
175+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
176+
expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
177+
expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.6);
178+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
179+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321');
180+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
181+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
182+
});
183+
184+
it('data without radius', () => {
185+
const ringGrogress = new RingProgress(createDiv(), {
186+
width: 200,
187+
height: 100,
188+
percent: 0.6,
189+
autoFit: false,
190+
});
191+
192+
ringGrogress.render();
193+
expect(ringGrogress.chart.geometries[0].coordinate.type).toBe('theta');
194+
expect(ringGrogress.chart.geometries[0].coordinate.radius).toBe(1);
195+
expect(ringGrogress.chart.geometries[0].coordinate.innerRadius).toBe(0.8);
196+
expect(ringGrogress.chart.geometries[0].elements[0].getData().type).toBe('current');
197+
expect(ringGrogress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
198+
expect(ringGrogress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
199+
expect(ringGrogress.chart.geometries[0].elements[1].getData().type).toBe('target');
200+
expect(ringGrogress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
201+
expect(ringGrogress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
202+
});
203+
});

‎src/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,9 @@ export { TinyColumn, TinyColumnOptions } from './plots/tiny-column';
2626

2727
// 迷你面积图及类型定义
2828
export { TinyArea, TinyAreaOptions } from './plots/tiny-area';
29+
30+
// 进度图及类型定义
31+
export { Progress, ProgressOptions } from './plots/progress';
32+
33+
// 环形进度图及类型定义
34+
export { RingProgress, RingProgressOptions } from './plots/ring-progress';

0 commit comments

Comments
 (0)