-
Notifications
You must be signed in to change notification settings - Fork 604
/
layer.ts
123 lines (106 loc) · 2.79 KB
/
layer.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import * as _ from '@antv/util';
import { registerPlotType } from '../../base/global';
import { LayerConfig } from '../../base/layer';
import { getGeom } from '../../geoms/factory';
import TinyLayer, { TinyViewConfig } from '../tiny-layer';
import * as EventParser from './event';
export interface ProgressViewConfig extends TinyViewConfig {
stackField?: number;
progressStyle?: any; // FIXME:
percent?: number; // FIXME:
}
export interface ProgressLayerConfig extends ProgressViewConfig, LayerConfig {}
const G2_GEOM_MAP = {
progress: 'interval',
};
const PLOT_GEOM_MAP = {
interval: 'progress',
};
const DEFAULT_COLOR = ['#55A6F3', '#E8EDF3'];
export default class ProgressLayer<T extends ProgressLayerConfig = ProgressLayerConfig> extends TinyLayer<T> {
/**
* 将进度条配置项转为堆叠条形图配置项
*/
public type: string = 'progress';
public processProps() {
this.getSize();
let props = this.options;
props.data = this.processData();
const cfg = {
padding: [0, 0, 0, 0],
xField: 'value',
yField: '1',
stackField: 'type',
barSize: this.getSize(),
barStyle: props.progressStyle,
color: this.parseColorProps(props) || DEFAULT_COLOR,
} as any;
props = _.mix(props, cfg);
}
public init() {
this.processProps();
super.init();
}
public update(value) {
const props = this.options;
props.percent = value;
this.changeData(this.processData());
}
protected geometryParser(dim: string, type: string): string {
if (dim === 'g2') {
return G2_GEOM_MAP[type];
}
return PLOT_GEOM_MAP[type];
}
protected coord() {
const coordConfig = {
actions: [['transpose']],
};
this.setConfig('coord', coordConfig);
}
protected addGeometry() {
const props = this.options;
const bar = getGeom('interval', 'main', {
positionFields: [props.yField, props.xField],
plot: this,
});
bar.adjust = [
{
type: 'stack',
},
];
this.setConfig('element', bar);
}
protected parserEvents(eventParser) {
super.parserEvents(EventParser);
}
protected parseColorProps(props) {
if (props.color) {
if (_.isString(props.color)) {
const color = _.clone(DEFAULT_COLOR);
color[0] = props.color;
return color;
}
if (_.isFunction(props.color)) {
return props.color(props.percent);
}
}
return props.color;
}
protected processData() {
const props = this.options;
const data = [
{ type: 'current', value: props.percent },
{ type: 'rest', value: 1.0 - props.percent },
];
return data;
}
private getSize() {
const { height } = this;
if (height >= 50) {
return 10;
}
return 4;
}
}
registerPlotType('progress', ProgressLayer);