Skip to content

Commit 9f6bf33

Browse files
hustcchustcc
committed
docs(ring-progress): add tiny ring progress demos
1 parent 6b3f6a0 commit 9f6bf33

File tree

19 files changed

+268
-199
lines changed

19 files changed

+268
-199
lines changed

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

Lines changed: 101 additions & 115 deletions
Large diffs are not rendered by default.

‎examples/ring-progress/basic/demo/meta.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"title": {
3+
"zh": "中文分类",
4+
"en": "Category"
5+
},
6+
"demos": [
7+
{
8+
"filename": "ring-progress.ts",
9+
"title": {
10+
"zh": "迷你进度环图",
11+
"en": "basic Ring chart"
12+
},
13+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
14+
},
15+
{
16+
"filename": "ring-progress-style.ts",
17+
"title": {
18+
"zh": "迷你进度环图样式",
19+
"en": "Tiny Ring style"
20+
},
21+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
22+
},
23+
{
24+
"filename": "ring-progress-style-callback.ts",
25+
"title": {
26+
"zh": "迷你进度环图回调样式",
27+
"en": "Tiny Ring style callback"
28+
},
29+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ"
30+
},
31+
{
32+
"filename": "ring-progress-radius.ts",
33+
"title": {
34+
"zh": "迷你进度环图半径大小",
35+
"en": "Tiny Ring scale"
36+
},
37+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
38+
}
39+
]
40+
}

‎examples/ring-progress/basic/demo/ring-progress-radius.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { RingProgress } from '@antv/g2plot';
2+
3+
const ringProgress = new RingProgress('container', {
4+
height: 100,
5+
width: 100,
6+
autoFit: false,
7+
percent: 0.7,
8+
innerRadius: 0.95,
9+
radius: 0.95,
10+
});
11+
12+
ringProgress.render();

‎examples/ring-progress/basic/demo/ring-progress-style-callback.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { RingProgress } from '@antv/g2plot';
2+
3+
const ringProgress = new RingProgress('container', {
4+
height: 100,
5+
width: 100,
6+
autoFit: false,
7+
percent: 0.7,
8+
progressStyle: (percent: number, type: string) => {
9+
if (type === 'current') {
10+
return { fill: 'green' };
11+
}
12+
return { fill: '#999', lineDash: [1, 1], stroke: '#333' };
13+
},
14+
});
15+
16+
ringProgress.render();

‎examples/ring-progress/basic/demo/ring-progress-style.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { RingProgress } from '@antv/g2plot';
2+
3+
const ringProgress = new RingProgress('container', {
4+
height: 100,
5+
width: 100,
6+
autoFit: false,
7+
percent: 0.7,
8+
progressStyle: {
9+
stroke: 'grey',
10+
lineDash: [4, 4],
11+
lineWidth: 1,
12+
},
13+
});
14+
15+
ringProgress.render();

‎examples/ring-progress/basic/demo/ring-progress.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { RingProgress } from '@antv/g2plot';
2+
3+
const ringProgress = new RingProgress('container', {
4+
height: 100,
5+
width: 100,
6+
autoFit: false,
7+
percent: 0.7,
8+
});
9+
10+
ringProgress.render();

‎examples/ring-progress/basic/design.en.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: 设计规范
3+
---
4+
5+
设计规范

‎examples/ring-progress/basic/design.zh.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: 设计规范
3+
---
4+
5+
设计规范

‎examples/ring-progress/basic/index.en.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 进度环图
3+
order: 0
4+
---

‎examples/ring-progress/basic/index.zh.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 进度环图
3+
order: 0
4+
---

‎gatsby-config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,14 @@ module.exports = {
159159
en: 'Tiny Column',
160160
},
161161
},
162+
{
163+
slug: 'ring-progress',
164+
icon: 'ring',
165+
title: {
166+
zh: '进度环图',
167+
en: 'Ring Progress',
168+
},
169+
},
162170
// OTHERS
163171
{
164172
slug: 'general',

‎src/plots/ring-progress/adaptor.ts

Lines changed: 27 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { isFunction } from '@antv/util';
1+
import { isFunction, isArray } from '@antv/util';
22
import { Params } from '../../core/adaptor';
33
import { flow } from '../../utils';
4-
import { scale } from '../../adaptor/common';
4+
import { scale, animation, theme } from '../../adaptor/common';
55
import { RingProgressOptions } from './types';
66

77
/**
@@ -10,7 +10,7 @@ import { RingProgressOptions } from './types';
1010
*/
1111
function field(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
1212
const { chart, options } = params;
13-
const { percent, color } = options;
13+
const { percent, color, progressStyle, innerRadius, radius } = options;
1414

1515
const data = [
1616
{
@@ -25,81 +25,36 @@ function field(params: Params<RingProgressOptions>): Params<RingProgressOptions>
2525

2626
chart.data(data);
2727

28-
const geometry = chart.interval().position('1*percent').adjust('stack');
29-
const values = isFunction(color) ? color(percent) : color || ['#FAAD14', '#E8EDF3'];
30-
31-
geometry.color('type', values);
32-
33-
return params;
34-
}
35-
36-
/**
37-
* axis 配置
38-
* @param params
39-
*/
40-
function axis(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
41-
const { chart } = params;
42-
43-
chart.axis(false);
44-
45-
return params;
46-
}
47-
48-
/**
49-
* legend 配置
50-
* @param params
51-
*/
52-
function legend(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
53-
const { chart } = params;
54-
55-
chart.legend(false);
56-
57-
return params;
58-
}
59-
60-
/**
61-
* tooltip 配置
62-
* @param params
63-
*/
64-
function tooltip(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
65-
const { chart } = params;
66-
67-
chart.tooltip(false);
68-
69-
return params;
70-
}
28+
// coordinate
29+
chart.coordinate('theta', {
30+
innerRadius,
31+
radius,
32+
});
7133

72-
/**
73-
* 样式
74-
* @param params
75-
*/
76-
function style(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
77-
const { chart, options } = params;
78-
const { progressStyle } = options;
34+
// geometry
35+
const geometry = chart.interval().position('1*percent').adjust('stack');
7936

80-
const geometry = chart.geometries[0];
81-
if (progressStyle && geometry) {
82-
if (isFunction(progressStyle)) {
83-
geometry.style('1*percent*type', progressStyle);
37+
// color
38+
if (color) {
39+
if (isArray(color)) {
40+
geometry.color('type', color);
8441
} else {
85-
geometry.style(progressStyle);
42+
geometry.color('type', (type: string): string => {
43+
return isFunction(color) ? color(percent, type) : color;
44+
});
8645
}
8746
}
88-
return params;
89-
}
9047

91-
/**
92-
* coordinate 配置
93-
* @param params
94-
*/
95-
function coordinate(params: Params<RingProgressOptions>): Params<RingProgressOptions> {
96-
const { chart, options } = params;
97-
const { innerRadius = 0.8, radius = 1 } = options;
48+
// style
49+
if (progressStyle) {
50+
geometry.style('percent*type', (percent: number, type: string) => {
51+
return isFunction(progressStyle) ? progressStyle(percent, type) : progressStyle;
52+
});
53+
}
9854

99-
chart.coordinate('theta', {
100-
innerRadius,
101-
radius,
102-
});
55+
chart.tooltip(false);
56+
chart.axis(false);
57+
chart.legend(false);
10358

10459
return params;
10560
}
@@ -110,5 +65,5 @@ function coordinate(params: Params<RingProgressOptions>): Params<RingProgressOpt
11065
* @param options
11166
*/
11267
export function adaptor(params: Params<RingProgressOptions>) {
113-
return flow(field, scale({}), axis, legend, tooltip, style, coordinate)(params);
68+
return flow(field, scale({}), animation, theme)(params);
11469
}

‎src/plots/ring-progress/index.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,16 @@ export { RingProgressOptions };
77

88
export class RingProgress extends Plot<RingProgressOptions> {
99
/** 图表类型 */
10-
public type: string = 'process';
10+
public type: string = 'ring-process';
11+
12+
protected getDefaultOptions() {
13+
return {
14+
percent: 0.2,
15+
innerRadius: 0.8,
16+
radius: 0.98,
17+
color: ['#FAAD14', '#E8EDF3'],
18+
};
19+
}
1120

1221
/**
1322
* 获取 环形进度图 的适配器

‎src/plots/ring-progress/types.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import { Options } from '../../types';
22
import { ShapeStyle } from '../../types/style';
33

44
/** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
5-
export interface RingProgressOptions extends Omit<Options, 'data' | 'color'> {
5+
export interface RingProgressOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label' | 'color'> {
66
/** 进度百分比 */
77
readonly percent: number;
88
/** 外环的半径 */
99
readonly radius?: number;
1010
/** 内环的半径 */
1111
readonly innerRadius?: number;
1212
/** 进度条颜色 */
13-
readonly color?: string[] | ((percent: number) => string[]);
13+
readonly color?: string | string[] | ((percent: number, type: string) => string);
1414
/** 进度条样式 */
15-
readonly progressStyle?: ShapeStyle | ((x?: any, percent?: number, type?: string) => ShapeStyle);
15+
readonly progressStyle?: ShapeStyle | ((percent: number, type: string) => ShapeStyle);
1616
}

‎src/plots/tiny-area/adaptor.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { isFunction } from '@antv/util';
2-
import { theme, scale } from '../../adaptor/common';
2+
import { theme, scale, animation } from '../../adaptor/common';
33
import { Params } from '../../core/adaptor';
44
import { flow } from '../../utils';
55
import { TinyTooltipOption } from '../../types';
@@ -82,5 +82,5 @@ export function tooltip(params: Params<TinyAreaOptions>): Params<TinyAreaOptions
8282
* @param options
8383
*/
8484
export function adaptor(params: Params<TinyAreaOptions>) {
85-
return flow(geometry, scale({}), tooltip, theme)(params);
85+
return flow(geometry, scale({}), tooltip, theme, animation)(params);
8686
}

‎src/plots/tiny-area/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ShapeStyle } from '../../types/style';
33
import { TinyTooltipOption } from '../../types/tooltip';
44

55
/** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
6-
export interface TinyAreaOptions extends Omit<Options, 'data'> {
6+
export interface TinyAreaOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label'> {
77
/** 具体的数据 */
88
readonly data: number[];
99
/** 是否平滑 */

‎src/plots/tiny-column/adaptor.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { isFunction, isNil } from '@antv/util';
2-
import { theme, scale } from '../../adaptor/common';
2+
import { theme, scale, animation } from '../../adaptor/common';
33
import { Params } from '../../core/adaptor';
44
import { flow } from '../../utils';
55
import { TinyTooltipOption } from '../../types';
@@ -70,5 +70,5 @@ export function tooltip(params: Params<TinyColumnOptions>): Params<TinyColumnOpt
7070
* @param options
7171
*/
7272
export function adaptor(params: Params<TinyColumnOptions>) {
73-
return flow(geometry, scale({}), tooltip, theme)(params);
73+
return flow(geometry, scale({}), tooltip, theme, animation)(params);
7474
}

‎src/plots/tiny-column/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ShapeStyle } from '../../types/style';
33
import { TinyTooltipOption } from '../../types/tooltip';
44

55
/** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
6-
export interface TinyColumnOptions extends Omit<Options, 'data'> {
6+
export interface TinyColumnOptions extends Omit<Options, 'data' | 'tooltip' | 'legend' | 'label'> {
77
/** 具体的数据 */
88
readonly data: number[];
99
/** 柱状图宽度占比 [0-1] */

‎src/plots/tiny-line/adaptor.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { isFunction } from '@antv/util';
22
import { Params } from '../../core/adaptor';
33
import { flow } from '../../utils';
4-
import { scale, theme } from '../../adaptor/common';
4+
import { scale, theme, animation } from '../../adaptor/common';
55
import { TinyTooltipOption } from '../../types';
66
import { TinyLineOptions } from './types';
77

@@ -68,5 +68,5 @@ export function tooltip(params: Params<TinyLineOptions>): Params<TinyLineOptions
6868
* @param options
6969
*/
7070
export function adaptor(params: Params<TinyLineOptions>) {
71-
return flow(geometry, scale({}), theme, tooltip)(params);
71+
return flow(geometry, scale({}), theme, tooltip, animation)(params);
7272
}

0 commit comments

Comments
 (0)