Skip to content

Commit e6647ef

Browse files
hustcchustcc
authored
feat(liquid): add outline, wave options for customize (#2099)
1 parent 7c76edb commit e6647ef

File tree

13 files changed

+245
-67
lines changed

13 files changed

+245
-67
lines changed

‎.github/ISSUE_TEMPLATE.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
* **G2Plot Version**:
2+
* **Platform**:
3+
* **Mini Showcase(like screenshots)**:
4+
* **CodePen Link**:
5+
6+
<!-- Describe your bugs below ^_^ -->
7+

‎.github/PULL_REQUEST_TEMPLATE.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
### PR includes
2+
<!-- Add completed items in this PR, and change [ ] to [x]. -->
3+
4+
- [ ] fixed #0
5+
- [ ] add / modify test cases
6+
- [ ] documents, demos
7+
8+
### Screenshot
9+
10+
| Before | After |
11+
|----|----|
12+
| ❌ | ✅ |

‎__tests__/bugs/issue-1909-spec.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('#1909', () => {
1212
liquidPlot.render();
1313

1414
// @ts-ignore
15-
expect(liquidPlot.chart.geometries[0].container.getChildren()[0].getChildren()[0].attr('opacity')).toBe(0.6);
15+
expect(liquidPlot.chart.geometries[0].container.getChildren()[1].getChildren()[0].attr('opacity')).toBe(0.2);
1616

1717
liquidPlot.update({
1818
liquidStyle: {
@@ -21,7 +21,10 @@ describe('#1909', () => {
2121
});
2222

2323
// @ts-ignore
24-
expect(liquidPlot.chart.geometries[0].container.getChildren()[0].getChildren()[0].attr('opacity')).toBe(0.06);
24+
expect(liquidPlot.chart.geometries[0].container.getChildren()[1].getChildren()[0].attr('opacity')).toBeCloseTo(
25+
0.02,
26+
5
27+
);
2528

2629
liquidPlot.destroy();
2730
});

‎__tests__/bugs/issue-charts-367-spec.ts

+2
Original file line numberDiff line numberDiff line change
@@ -59,5 +59,7 @@ describe('charts #367', () => {
5959
.getChildren()
6060
.map((v) => v.attr('text'))
6161
).toEqual(LABELS);
62+
63+
gauge.destroy();
6264
});
6365
});

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

+53-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('liquid', () => {
77
width: 600,
88
height: 300,
99
autoFit: false,
10-
percent: 0.75,
10+
percent: 0.45,
1111
});
1212

1313
liquid.render();
@@ -16,16 +16,65 @@ describe('liquid', () => {
1616
expect(liquid.options.radius).toBe(0.9);
1717

1818
// @ts-ignore
19-
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('r')).toBe(135);
19+
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('r')).toBe(135);
2020

2121
// 宽 < 高，按照高度来设置 radius
2222
liquid.changeSize(300, 500);
23-
2423
// @ts-ignore
25-
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('r')).toBe(135); // circle
24+
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('r')).toBe(135);
25+
// 宽 < 高，按照高度来设置 radius
26+
liquid.changeSize(500, 500);
27+
// @ts-ignore
28+
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('r')).toBe(225);
2629

2730
liquid.destroy();
2831
});
32+
33+
it('outline & wave', () => {
34+
const liquid = new Liquid(createDiv(), {
35+
width: 600,
36+
height: 300,
37+
autoFit: false,
38+
percent: 0.3,
39+
});
40+
41+
liquid.render();
42+
expect(liquid.options.outline).toEqual({ border: 2, distance: 0 });
43+
expect(liquid.options.wave).toEqual({ count: 3, length: 192 });
44+
45+
expect(liquid.chart.middleGroup.findAllByName('wrap')[0].attr('r')).toBe(135);
46+
expect(liquid.chart.middleGroup.findAllByName('wrap')[0].attr('lineWidth')).toBe(2);
47+
expect(liquid.chart.middleGroup.findAllByName('waterwave-path').length).toBe(3);
48+
expect(liquid.chart.middleGroup.findAllByName('waterwave-path')[0].get('animations')[0].toAttrs.matrix[6]).toBe(
49+
192
50+
);
51+
expect(liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('r')).toBe(135);
52+
53+
liquid.update({
54+
outline: {
55+
border: 4,
56+
distance: 8,
57+
},
58+
wave: {
59+
count: 5,
60+
length: 128,
61+
},
62+
});
63+
64+
expect(liquid.options.outline).toEqual({ border: 4, distance: 8 });
65+
expect(liquid.options.wave).toEqual({ count: 5, length: 128 });
66+
67+
expect(liquid.chart.middleGroup.findAllByName('wrap')[0].attr('r')).toBe(135);
68+
expect(liquid.chart.middleGroup.findAllByName('wrap')[0].attr('lineWidth')).toBe(4);
69+
expect(liquid.chart.middleGroup.findAllByName('waterwave-path').length).toBe(5);
70+
expect(liquid.chart.middleGroup.findAllByName('waterwave-path')[0].get('animations')[0].toAttrs.matrix[6]).toBe(
71+
128
72+
);
73+
expect(liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('r')).toBe(127);
74+
75+
liquid.destroy();
76+
});
77+
2978
it('change data', () => {
3079
const liquid = new Liquid(createDiv(), {
3180
width: 600,

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ describe('liquid', () => {
1818
liquid.render();
1919

2020
// @ts-ignore
21-
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].attr('stroke')).toBe('blue'); // circle
21+
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].attr('stroke')).toBe('blue'); // circle
2222
// @ts-ignore
23-
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill')).toBe('green'); // wave path
23+
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].getChildren()[0].attr('fill')).toBe('green'); // wave path
2424

2525
// @ts-ignore
2626
liquid.chart.getController('annotation').clear(true);
@@ -34,7 +34,7 @@ describe('liquid', () => {
3434

3535
// G2 chart.clear 的时候，geometry 销毁了，但是 container 还保留的，内存泄露。
3636
// @ts-ignore
37-
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill')).toBe('red'); // wave path
37+
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[1].getChildren()[0].attr('fill')).toBe('red'); // wave path
3838

3939
liquid.destroy();
4040
});

‎docs/manual/plots/liquid.en.md

+22
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,28 @@ Liguid graphic style.
3333

3434
`markdown:docs/common/color.en.md`
3535

36+
#### outline
37+
38+
<description>**optional** _Outline_</description>
39+
40+
The ouline configure for liquid plot, includes:
41+
42+
| Attr | Type | Desc |
43+
| ------------ | -------------- | ----------------------------------------------------- |
44+
| border | number | border width of ouline, default 2px |
45+
| disatance | number | disatance between ouline and wave, default 0px |
46+
47+
#### wave
48+
49+
<description>**optional** _Wave_</description>
50+
51+
The wave configure for liquid plot, includes:
52+
53+
| Attr | Type | Desc |
54+
| ------------ | -------------- | ----------------------------------------------------- |
55+
| count | number | wave count, default 3 |
56+
| length | number | wave length, default is 192px |
57+
3658
### Plot Components
3759

3860
#### statistic

‎docs/manual/plots/liquid.zh.md

+23-1
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,34 @@ order: 12
2727

2828
<description>**optional** _StyleAttr | Function_</description>
2929

30-
水波图的样式。
30+
水波图的配色样式。
3131

3232
`markdown:docs/common/shape-style.zh.md`
3333

3434
`markdown:docs/common/color.zh.md`
3535

36+
#### outline
37+
38+
<description>**optional** _Outline_</description>
39+
40+
水波图的外框容器配置。主要包含以下内容：
41+
42+
| 属性名 | 类型 | 介绍 |
43+
| ------------ | -------------- | -------------------------------------------- |
44+
| border | number | 外框容器的 border 宽度，默认为 2 像素 |
45+
| disatance | number | 外框容器和内部波形的间距，默认为 0 像素 |
46+
47+
#### wave
48+
49+
<description>**optional** _Wave_</description>
50+
51+
水波图的波形配置。主要包含以下内容：
52+
53+
| 属性名 | 类型 | 介绍 |
54+
| ------------ | -------------- | -------------------------------------------- |
55+
| count | number | 水波的个数，默认为 3 个 |
56+
| length | number | 水波的波长度，默认为 192 像素 |
57+
3658
### 图表组件
3759

3860
#### statistic ✨

‎examples/liquid/basic/demo/basic.ts

+7-18
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
1-
import { Liquid, measureTextWidth } from '@antv/g2plot';
1+
import { Liquid } from '@antv/g2plot';
22

33
const liquidPlot = new Liquid('container', {
44
percent: 0.25,
5-
statistic: {
6-
content: {
7-
style: {
8-
fontSize: 60,
9-
fill: 'black',
10-
},
11-
customHtml: (container, view, { percent }) => {
12-
const { width, height } = container.getBoundingClientRect();
13-
const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
14-
const text = `${(percent * 100).toFixed(0)}%`;
15-
const textWidth = measureTextWidth(text, { fontSize: 60 });
16-
const scale = Math.min(d / textWidth, 1);
17-
return `<div style="width:${d}px;height:${d}px;display:flex;align-items:center;justify-content:center;font-size:${scale}em;line-height:${
18-
scale <= 1 ? 1 : 'inherit'
19-
}">${text}</div>`;
20-
},
21-
},
5+
outline: {
6+
border: 4,
7+
distance: 8,
8+
},
9+
wave: {
10+
length: 128,
2211
},
2312
});
2413
liquidPlot.render();

‎src/plots/liquid/adaptor.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const CAT_VALUE = 'liquid';
1414
*/
1515
function geometry(params: Params<LiquidOptions>): Params<LiquidOptions> {
1616
const { chart, options } = params;
17-
const { percent, color, liquidStyle, radius } = options;
17+
const { percent, color, liquidStyle, radius, outline, wave } = options;
1818

1919
const data = [{ percent, type: CAT_VALUE }];
2020

@@ -47,6 +47,8 @@ function geometry(params: Params<LiquidOptions>): Params<LiquidOptions> {
4747
// 将 radius 传入到自定义 shape 中
4848
geometry.customInfo({
4949
radius,
50+
outline,
51+
wave,
5052
});
5153

5254
// 关闭组件

‎src/plots/liquid/index.ts

+8
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ export class Liquid extends Plot<LiquidOptions> {
2929
},
3030
},
3131
},
32+
outline: {
33+
border: 2,
34+
distance: 0,
35+
},
36+
wave: {
37+
count: 3,
38+
length: 192,
39+
},
3240
};
3341
}
3442

0 commit comments

Comments
 (0)