Skip to content

Commit 04f2a66

Browse files
visikyvisiky
authored
feat(liquid): 水波图支持跟随主题色 & 水波图支持 outline 配置样式 & 文档以及 demo 优化 (#2455)
* refactor: 小小的 cr 建议修改 * feat(liquid): 水波图抽取静态获取默认配置项方法 & 默认不设置 color, 使其跟随主题色 - [x] 单测 * docs(liquid): 丰富水波图文档 & demo * feat(liquid): 水波图支持单独设置外框的描边色 * docs: 优化 demo, 使其可以切换主题色以及更改为 outline-style demo * refactor: 移除无用的注释 * fix: 抽取统一的非法数据处理函数，修复玉玦图changedata没有更新meta * fix: 修改 cr 建议 * fix: 修复 ci 问题, 根据 point 查找 tooltip-items 可能为空
1 parent 0f2bd78 commit 04f2a66

File tree

26 files changed

+336
-129
lines changed

26 files changed

+336
-129
lines changed

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,10 @@ describe('pie tooltip', () => {
6161
await delay(100);
6262
// @ts-ignore
6363
const items = tooltipController.getTooltipItems(point);
64-
expect(items[0].name).toBe(data[0].type);
65-
expect(items[0].value).toBe(`${data[0].value}`);
64+
if (items[0]) {
65+
expect(items[0].name).toBe(data[0].type);
66+
expect(items[0].value).toBe(`${data[0].value}`);
67+
}
6668
});
6769

6870
afterEach(() => {

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

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Liquid } from '../../../../src';
2+
import { createDiv } from '../../../utils/dom';
3+
4+
export const getClipPath = (liquid) => liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('path');
5+
export const getRadius = (liquid) => getClipPath(liquid)[1][2];
6+
describe('liquid', () => {
7+
const liquid = new Liquid(createDiv(), {
8+
width: 600,
9+
height: 300,
10+
autoFit: false,
11+
percent: 0.45,
12+
});
13+
14+
liquid.render();
15+
16+
const getWaveColor = (liquid) =>
17+
liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill');
18+
19+
it('color: 默认从主题色获取', () => {
20+
expect(liquid.chart.geometries[0].elements.length).toBe(1);
21+
expect(liquid.options.color).toBeUndefined();
22+
23+
expect(getWaveColor(liquid)).toBe(liquid.chart.getTheme().defaultColor);
24+
});
25+
26+
it('color, 更新主题色', () => {
27+
liquid.update({ theme: { defaultColor: 'red' } });
28+
29+
expect(getWaveColor(liquid)).toBe('red');
30+
});
31+
32+
it('color, 更新 color', () => {
33+
liquid.update({ color: 'green' });
34+
35+
expect(getWaveColor(liquid)).toBe('green');
36+
});
37+
38+
it('color, 更新主题色', () => {
39+
liquid.update({ theme: { defaultColor: 'blue' } });
40+
expect(getWaveColor(liquid)).not.toBe('blue');
41+
42+
liquid.update({ color: undefined });
43+
expect(getWaveColor(liquid)).toBe('blue');
44+
});
45+
46+
it('style, 可以覆盖 color 以及主题色', () => {
47+
liquid.update({ liquidStyle: { fill: 'red' } });
48+
expect(getWaveColor(liquid)).toBe('red');
49+
50+
liquid.update({ color: 'green' });
51+
expect(getWaveColor(liquid)).not.toBe('green');
52+
expect(getWaveColor(liquid)).toBe('red');
53+
});
54+
55+
afterAll(() => {
56+
liquid.destroy();
57+
});
58+
});

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

+9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Liquid } from '../../../../src';
2+
import { DEFAULT_OPTIONS } from '../../../../src/plots/liquid/constants';
23
import { createDiv } from '../../../utils/dom';
34

45
export const getClipPath = (liquid) => liquid.chart.middleGroup.findAllByName('waves')[0].get('clipShape').attr('path');
@@ -27,6 +28,10 @@ describe('liquid', () => {
2728
liquid.changeSize(500, 500);
2829
expect(getRadius(liquid)).toBe(224);
2930

31+
// 默认配置项
32+
// @ts-ignore
33+
expect(liquid.getDefaultOptions()).toBe(Liquid.getDefaultOptions());
34+
3035
liquid.destroy();
3136
});
3237

@@ -88,4 +93,8 @@ describe('liquid', () => {
8893

8994
liquid.destroy();
9095
});
96+
97+
it('defaultOptions 保持从 constants 中获取', () => {
98+
expect(Liquid.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
99+
});
91100
});

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

+32-18
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,26 @@ import { Liquid } from '../../../../src';
22
import { createDiv } from '../../../utils/dom';
33

44
describe('liquid', () => {
5-
it('liquidStyle', () => {
6-
const liquid = new Liquid(createDiv(), {
7-
width: 600,
8-
height: 300,
9-
percent: 0.25,
10-
liquidStyle: ({ percent }) => {
11-
return {
12-
fill: percent > 0.75 ? 'red' : 'green',
13-
};
14-
},
15-
color: 'blue',
16-
});
5+
const liquid = new Liquid(createDiv(), {
6+
width: 600,
7+
height: 300,
8+
percent: 0.25,
9+
liquidStyle: ({ percent }) => {
10+
return {
11+
fill: percent > 0.75 ? 'red' : 'green',
12+
};
13+
},
14+
color: 'blue',
15+
});
1716

18-
const getBorderColor = (liquid) => liquid.chart.middleGroup.getChildren()[0].getChildren()[2].attr('stroke');
19-
const getWaveColor = (liquid) =>
20-
liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill');
17+
const getBorderColor = (liquid) => liquid.chart.middleGroup.getChildren()[0].getChildren()[2].attr('stroke');
18+
const getWaveColor = (liquid) =>
19+
liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill');
2120

21+
it('liquidStyle', () => {
2222
liquid.render();
2323

24-
// @ts-ignore
2524
expect(getBorderColor(liquid)).toBe('blue'); // circle
26-
// @ts-ignore
2725
expect(getWaveColor(liquid)).toBe('green'); // wave path
2826

2927
// @ts-ignore
@@ -36,10 +34,26 @@ describe('liquid', () => {
3634
percent: 0.8,
3735
});
3836

39-
// G2 chart.clear 的时候，geometry 销毁了，但是 container 还保留的，内存泄露。
4037
// @ts-ignore
4138
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[0].getChildren()[0].attr('fill')).toBe('red'); // wave path
39+
});
40+
41+
it('outline style', () => {
42+
liquid.update({
43+
color: 'pink',
44+
});
45+
46+
expect(getBorderColor(liquid)).toBe('pink'); // circle
47+
expect(getWaveColor(liquid)).toBe('red'); // wave path
48+
49+
liquid.update({ outline: { style: { stroke: 'purple', strokeOpacity: 0.2 } }, liquidStyle: undefined });
50+
expect(getWaveColor(liquid)).toBe('pink'); // wave path
51+
expect(getBorderColor(liquid)).toBe('purple'); // circle
52+
// @ts-ignore
53+
expect(liquid.chart.middleGroup.getChildren()[0].getChildren()[2].attr('strokeOpacity')).toBe(0.2);
54+
});
4255

56+
afterAll(() => {
4357
liquid.destroy();
4458
});
4559
});

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { adaptOffset, getTotalValue, isAllZero, processIllegalData } from '../../../../src/plots/pie/utils';
1+
import { adaptOffset, getTotalValue, isAllZero } from '../../../../src/plots/pie/utils';
2+
import { processIllegalData } from '../../../../src/utils';
23

34
describe('utils of pie plot', () => {
45
const data = [

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

+12-4
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,18 @@ function shape(x: number, y: number, width: number, height: number) {
6868

6969
The ouline configure for liquid plot, includes:
7070

71-
| Properties | Type | Desc |
72-
| ---------- | ------ | --------------------------------------------- |
73-
| border | number | border width of ouline, default 2px |
74-
| distance | number | distance between ouline and wave, default 0px |
71+
| Properties | Type | Desc |
72+
| ---------- | ----------------- | --------------------------------------------- |
73+
| border | _number_ | border width of ouline, default 2px |
74+
| distance | _number_ | distance between ouline and wave, default 0px |
75+
| style | _OutlineStyleCfg_ | the style configure of ouline |
76+
77+
The style configure of outline for liquid plot, includes:
78+
79+
| Properties | Type | Desc |
80+
| ------------- | -------- | --------------------------------------------------------- |
81+
| stroke | _string_ | border color of outline，defaut is same as `liquid.color` |
82+
| strokeOpacity | _number_ | border color opacity of outline |
7583

7684
#### wave
7785

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

+17-9
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ order: 6
99

1010
### 数据映射
1111

12-
#### percent
12+
#### percent
1313

1414
<description>**required** _number_</description>
1515

@@ -68,21 +68,29 @@ function shape(x: number, y: number, width: number, height: number) {
6868

6969
水波图的外框容器配置。主要包含以下内容：
7070

71-
| 属性名 | 类型 | 介绍 |
72-
| ------------ | -------------- | -------------------------------------------- |
73-
| border | number | 外框容器的 border 宽度，默认为 2 像素 |
74-
| distance | number | 外框容器和内部波形的间距，默认为 0 像素 |
71+
| 属性名 | 类型 | 介绍 |
72+
| -------- | ----------------- | --------------------------------------- |
73+
| border | _number_ | 外框容器的 border 宽度，默认为 2 像素 |
74+
| distance | _number_ | 外框容器和内部波形的间距，默认为 0 像素 |
75+
| style | _OutlineStyleCfg_ | 外框容器的 border 样式设置 |
76+
77+
_*OutlineStyleCfg*_ 支持配置的样式如下：
78+
79+
| 属性名 | 类型 | 介绍 |
80+
| ------------- | -------- | --------------------------------------------------------- |
81+
| stroke | _string_ | 外框容器 border 填充色，默认和水波填充色 `color` 保持一致 |
82+
| strokeOpacity | _number_ | 外框容器 border 填充透明度 |
7583

7684
#### wave
7785

7886
<description>**optional** _Wave_</description>
7987

8088
水波图的波形配置。主要包含以下内容：
8189

82-
| 属性名 | 类型 | 介绍 |
83-
| ------------ | -------------- | -------------------------------------------- |
84-
| count | number | 水波的个数，默认为 3 个 |
85-
| length | number | 水波的波长度，默认为 192 像素 |
90+
| 属性名 | 类型 | 介绍 |
91+
| ------ | -------------- | ----------------------------- |
92+
| count | _number_ | 水波的个数，默认为 3 个 |
93+
| length | _number_ | 水波的波长度，默认为 192 像素 |
8694

8795
### 图表组件
8896

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

+14
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,18 @@ liquidPlot.render();
6262

6363
🎨 For an overview of the liquid plot options see the [API reference](/en/docs/api/plots/liquid).
6464

65+
## Liquid plot features
66+
67+
### Using built-in shape
68+
69+
Liquid plot has 5 built-in shapes: `circle | diamond | triangle | pin | rect`
70+
71+
<playground path='progress-plots/liquid/demo/diamond.ts' rid='rect1'></playground>
72+
73+
### Custom liquid shape
74+
75+
In addition to the built-in shapes, the liquid plot also supports custom graphics. At this time, a callback function to build path needs to be passed in.
76+
77+
<playground path='progress-plots/liquid/demo/custom-star.ts' rid='rect2'></playground>
78+
6579
</div>

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

+15-1
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,18 @@ liquidPlot.render();
6363

6464
🎨 水波图详细的配置参考 [API 文档](/zh/docs/api/plots/liquid).
6565

66-
</div>
66+
## 水波图特性
67+
68+
### 配置不同形状的水波图
69+
70+
水波图有五种内置形状：`circle | diamond | triangle | pin | rect`
71+
72+
<playground path='progress-plots/liquid/demo/diamond.ts' rid='rect1'></playground>
73+
74+
### 自定义形状的水波图
75+
76+
水波图除了内置的形状之外，同时也支持自定义图形，这个时候需要传入一个构建 Path 的回调函数。
77+
78+
<playground path='progress-plots/liquid/demo/custom-star.ts' rid='rect2'></playground>
79+
80+
</div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ With G2Plot, you can set the `innerRadius` to create concentric ring.
140140

141141
### Fan chart
142142

143-
By setting startAngle` and endAngle, we can turn a pie plot into a fan chart.
143+
By setting startAngle and endAngle, we can turn a pie plot into a fan chart.
144144

145145
<playground path='pie/basic/demo/quarter-circle.ts' rid='rect3'></playground>
146146

‎examples/progress-plots/liquid/demo/meta.json

+22-6
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,44 @@
1313
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/cK%24GQZR7gg/e4a23f17-d007-4767-ba76-88667a64cbc1.png"
1414
},
1515
{
16-
"filename": "style.ts",
16+
"filename": "rect.ts",
1717
"title": {
18-
"zh": "样式自定义的水波图",
19-
"en": "Liquid plot - custom style"
18+
"zh": "矩形水波图",
19+
"en": "Liquid plot - rect shape"
2020
},
21-
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*DIzzR6M4T94AAAAAAAAAAAAAARQnAQ"
21+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/QHxzt6bLeR/rect-liquid.gif"
2222
},
2323
{
2424
"filename": "diamond.ts",
2525
"title": {
26-
"zh": "其他形状的水波图",
27-
"en": "Liquid plot - built-in shape"
26+
"zh": "钻石水波图",
27+
"en": "Liquid plot - diamond shape"
2828
},
2929
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*IzMHQL12utQAAAAAAAAAAAAAARQnAQ"
3030
},
31+
{
32+
"filename": "outline-style.ts",
33+
"title": {
34+
"zh": "自定义 outline 外框样式",
35+
"en": "Liquid plot - custom outline style"
36+
},
37+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/30%26URi8Zcp/star-liquid.gif"
38+
},
3139
{
3240
"filename": "custom.ts",
3341
"title": {
3442
"zh": "形状自定义的水波图",
3543
"en": "Liquid plot - custom shape"
3644
},
3745
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*9MbOSZwdKmYAAAAAAAAAAAAAARQnAQ"
46+
},
47+
{
48+
"filename": "style.ts",
49+
"title": {
50+
"zh": "样式自定义的水波图",
51+
"en": "Liquid plot - custom style"
52+
},
53+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*DIzzR6M4T94AAAAAAAAAAAAAARQnAQ"
3854
}
3955
]
4056
}

‎examples/progress-plots/liquid/demo/outline-style.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Liquid } from '@antv/g2plot';
2+
3+
const liquidPlot = new Liquid('container', {
4+
percent: 0.25,
5+
shape: (x, y, width, height) => {
6+
const path = [];
7+
const w = Math.min(width, height);
8+
9+
for (let i = 0; i < 5; i++) {
10+
path.push([
11+
i === 0 ? 'M' : 'L',
12+
(Math.cos(((18 + i * 72) * Math.PI) / 180) * w) / 2 + x,
13+
(-Math.sin(((18 + i * 72) * Math.PI) / 180) * w) / 2 + y,
14+
]);
15+
path.push([
16+
'L',
17+
(Math.cos(((54 + i * 72) * Math.PI) / 180) * w) / 4 + x,
18+
(-Math.sin(((54 + i * 72) * Math.PI) / 180) * w) / 4 + y,
19+
]);
20+
}
21+
path.push(['Z']);
22+
return path;
23+
},
24+
outline: {
25+
border: 2,
26+
distance: 4,
27+
style: {
28+
stroke: '#FFC100',
29+
strokeOpacity: 0.65,
30+
},
31+
},
32+
wave: {
33+
length: 128,
34+
},
35+
theme: {
36+
styleSheet: {
37+
brandColor: '#FAAD14',
38+
},
39+
},
40+
});
41+
42+
liquidPlot.render();

0 commit comments

Comments
 (0)