Skip to content

Commit 3ded3a3

Browse files
hustcchustcc
committed
docs(progress): add tiny progress demos
1 parent 9f6bf33 commit 3ded3a3

File tree

17 files changed

+185
-112
lines changed

17 files changed

+185
-112
lines changed

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

+20-17
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,8 @@ describe('progress', () => {
1919
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
2020

2121
progress.update({
22-
width: 200,
23-
height: 100,
22+
...progress.options,
2423
percent: 0.5,
25-
autoFit: false,
2624
});
2725
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
2826
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
@@ -50,11 +48,8 @@ describe('progress', () => {
5048
expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
5149

5250
progress.update({
53-
width: 200,
54-
height: 100,
55-
percent: 0.6,
56-
color: () => ['#654321', '#123456'],
57-
autoFit: false,
51+
...progress.options,
52+
color: ['#654321', '#123456'],
5853
});
5954
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
6055
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
@@ -91,7 +86,7 @@ describe('progress', () => {
9186
expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
9287
expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
9388

94-
const progressStyle = (x, percent, type) => {
89+
const progressStyle = (percent, type) => {
9590
if (type === 'current') {
9691
return percent > 0.5
9792
? {
@@ -120,11 +115,8 @@ describe('progress', () => {
120115
};
121116

122117
progress.update({
123-
width: 200,
124-
height: 100,
125-
percent: 0.6,
118+
...progress.options,
126119
progressStyle,
127-
autoFit: false,
128120
});
129121
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
130122
expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
@@ -140,11 +132,8 @@ describe('progress', () => {
140132
expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
141133

142134
progress.update({
143-
width: 200,
144-
height: 100,
135+
...progress.options,
145136
percent: 0.4,
146-
progressStyle,
147-
autoFit: false,
148137
});
149138

150139
expect(progress.chart.geometries[0].elements[0].getData().type).toBe('current');
@@ -160,4 +149,18 @@ describe('progress', () => {
160149
expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
161150
expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([4, 4]);
162151
});
152+
153+
it('barWidthRatio', () => {
154+
const progress = new Progress(createDiv(), {
155+
width: 200,
156+
height: 100,
157+
percent: 0.6,
158+
barWidthRatio: 0.2,
159+
autoFit: false,
160+
});
161+
162+
progress.render();
163+
164+
expect(progress.chart.getTheme().columnWidthRatio).toBe(0.1);
165+
});
163166
});

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

-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ describe('ring-progress', () => {
1717
expect(ringProgress.chart.geometries[0].coordinate.radius).toBe(1);
1818
expect(ringProgress.chart.geometries[0].coordinate.innerRadius).toBe(0.5);
1919

20-
console.log(ringProgress.options.color);
21-
2220
expect(ringProgress.chart.geometries[0].elements[0].getData().type).toBe('current');
2321
expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
2422
expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');

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

+40
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": "progress.ts",
9+
"title": {
10+
"zh": "迷你进度条图",
11+
"en": "basic Progress chart"
12+
},
13+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
14+
},
15+
{
16+
"filename": "progress-style.ts",
17+
"title": {
18+
"zh": "迷你进度条图样式",
19+
"en": "Tiny Progress style"
20+
},
21+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fQihRrLMIWsAAAAAAAAAAABkARQnAQ"
22+
},
23+
{
24+
"filename": "progress-style-callback.ts",
25+
"title": {
26+
"zh": "迷你进度条图回调样式",
27+
"en": "Tiny Progress style callback"
28+
},
29+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lSOiS4lGCaIAAAAAAAAAAABkARQnAQ"
30+
},
31+
{
32+
"filename": "progress-width.ts",
33+
"title": {
34+
"zh": "迷你进度条图大小",
35+
"en": "Tiny Progress width"
36+
},
37+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
38+
}
39+
]
40+
}

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Progress } from '@antv/g2plot';
2+
3+
const progress = new Progress('container', {
4+
height: 100,
5+
width: 300,
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+
progress.render();

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

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

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Progress } from '@antv/g2plot';
2+
3+
const progress = new Progress('container', {
4+
height: 100,
5+
width: 300,
6+
autoFit: false,
7+
percent: 0.7,
8+
barWidthRatio: 0.1,
9+
});
10+
11+
progress.render();

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

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

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

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

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

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

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

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

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 进度条图
3+
order: 0
4+
---

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"filename": "ring-progress-radius.ts",
3333
"title": {
3434
"zh": "迷你进度环图半径大小",
35-
"en": "Tiny Ring scale"
35+
"en": "Tiny Ring radius"
3636
},
3737
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*4NmuSaVRZ44AAAAAAAAAAABkARQnAQ"
3838
}

‎gatsby-config.js

+8
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,14 @@ module.exports = {
167167
en: 'Ring Progress',
168168
},
169169
},
170+
{
171+
slug: 'progress',
172+
icon: 'other',
173+
title: {
174+
zh: '进度条图',
175+
en: 'Tiny Progress',
176+
},
177+
},
170178
// OTHERS
171179
{
172180
slug: 'general',

‎src/plots/progress/adaptor.ts

+14-80
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,35 @@
1-
import { isFunction } from '@antv/util';
1+
import { isNil } 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';
5+
import { geometry } from '../ring-progress/adaptor';
56
import { ProgressOptions } from './types';
67

78
/**
8-
* 字段
9-
* @param params
10-
*/
11-
function field(params: Params<ProgressOptions>): Params<ProgressOptions> {
12-
const { chart, options } = params;
13-
const { percent, color } = options;
14-
15-
const data = [
16-
{
17-
type: 'current',
18-
percent: percent,
19-
},
20-
{
21-
type: 'target',
22-
percent: 1 - percent,
23-
},
24-
];
25-
26-
chart.data(data);
27-
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<ProgressOptions>): Params<ProgressOptions> {
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<ProgressOptions>): Params<ProgressOptions> {
53-
const { chart } = params;
54-
55-
chart.legend(false);
56-
57-
return params;
58-
}
59-
60-
/**
61-
* tooltip 配置
9+
* coordinate 配置
6210
* @param params
6311
*/
64-
function tooltip(params: Params<ProgressOptions>): Params<ProgressOptions> {
12+
function coordinate(params: Params<ProgressOptions>): Params<ProgressOptions> {
6513
const { chart } = params;
6614

67-
chart.tooltip(false);
15+
chart.coordinate('rect').transpose();
6816

6917
return params;
7018
}
7119

7220
/**
73-
* 样式
21+
* widthRatio 配置
7422
* @param params
7523
*/
76-
function style(params: Params<ProgressOptions>): Params<ProgressOptions> {
24+
function widthRatio(params: Params<ProgressOptions>): Params<ProgressOptions> {
7725
const { chart, options } = params;
78-
const { progressStyle } = options;
26+
const { barWidthRatio } = options;
7927

80-
const geometry = chart.geometries[0];
81-
if (progressStyle && geometry) {
82-
if (isFunction(progressStyle)) {
83-
geometry.style('1*percent*type', progressStyle);
84-
} else {
85-
geometry.style(progressStyle);
86-
}
28+
if (!isNil(widthRatio)) {
29+
chart.theme({
30+
columnWidthRatio: barWidthRatio,
31+
});
8732
}
88-
return params;
89-
}
90-
91-
/**
92-
* coordinate 配置
93-
* @param params
94-
*/
95-
function coordinate(params: Params<ProgressOptions>): Params<ProgressOptions> {
96-
const { chart } = params;
97-
98-
chart.coordinate('rect').transpose();
9933

10034
return params;
10135
}
@@ -106,5 +40,5 @@ function coordinate(params: Params<ProgressOptions>): Params<ProgressOptions> {
10640
* @param options
10741
*/
10842
export function adaptor(params: Params<ProgressOptions>) {
109-
return flow(field, scale({}), axis, legend, tooltip, style, coordinate)(params);
43+
return flow(geometry, scale({}), coordinate, widthRatio, animation, theme)(params);
11044
}

‎src/plots/progress/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ export class Progress extends Plot<ProgressOptions> {
99
/** 图表类型 */
1010
public type: string = 'process';
1111

12+
protected getDefaultOptions() {
13+
return {
14+
percent: 0.2,
15+
color: ['#FAAD14', '#E8EDF3'],
16+
};
17+
}
18+
1219
/**
1320
* 获取 进度图 的适配器
1421
*/

‎src/plots/progress/types.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import { ShapeStyle } from '../../types/style';
55
export interface ProgressOptions extends Omit<Options, 'data' | 'color'> {
66
/** 进度百分比 */
77
readonly percent: number;
8+
/** 条图宽度占比 [0-1] */
9+
readonly barWidthRatio?: number;
810
/** 进度条颜色 */
9-
readonly color?: string[] | ((percent: number) => string[]);
11+
readonly color?: string | string[] | ((percent: number, type: string) => string);
1012
/** 进度条样式 */
11-
readonly progressStyle?: ShapeStyle | ((x?: any, percent?: number, type?: string) => ShapeStyle);
13+
readonly progressStyle?: ShapeStyle | ((percent: number, type: string) => ShapeStyle);
1214
}

0 commit comments

Comments
 (0)