/
rect.ts
62 lines (58 loc) 路 1.34 KB
/
rect.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
import Vue, { VNode } from 'vue'
import { Prop } from 'vue/types/options'
import { Boundary, Point } from '../VSparkline'
export default Vue.extend({
props: [
'id',
'smooth',
'boundary',
'lineWidth',
'gradient',
'autoDrawDuration',
'autoDraw',
'points',
'offsetX'
] as any as {
id: Prop<string>
smooth: Prop<boolean | number>
boundary: Prop<Boundary>
lineWidth: Prop<number>
gradient: Prop<string[]>
autoDrawDuration: Prop<number>
autoDraw: Prop<boolean>
points: Prop<Point[]>
offsetX: Prop<number>
},
render (h): VNode {
const { maxY } = this.boundary
const rounding = typeof this.smooth === 'number'
? this.smooth
: this.smooth ? 2 : 0
return h('clipPath', {
attrs: {
id: `${this.id}-clip`
}
}, this.points.map((item, index) =>
h('rect', {
attrs: {
x: item.x - this.offsetX,
y: 0,
width: this.lineWidth,
height: maxY - item.y,
rx: rounding,
ry: rounding
}
}, [
this.autoDraw ? h('animate', {
attrs: {
attributeName: 'height',
from: 0,
to: maxY - item.y,
dur: `${this.autoDrawDuration}ms`,
fill: 'freeze'
}
}) : undefined as never
])
))
}
})