/
Bar.ts
70 lines (62 loc) 路 1.74 KB
/
Bar.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
import mixins from '../../util/mixins'
import { VNode } from 'vue'
import props from './mixins/props'
import Rect from './components/rect'
import Text from './components/text'
import Gradient from './components/gradient'
import { genPoints } from './helpers/core'
export default mixins(props).extend({
name: 'bar',
props: {
autoDrawDuration: {
type: Number,
default: 500
}
},
render (h): VNode {
if (!this.data || this.data.length < 2) return undefined as never
const { width, height, padding, lineWidth } = this
const viewWidth = width || 300
const viewHeight = height || 75
const boundary = {
minX: padding,
minY: padding,
maxX: viewWidth - padding,
maxY: viewHeight - padding
}
const props = this.$props
props.points = genPoints(this.data, boundary)
const totalWidth = boundary.maxX / (props.points.length - 1)
props.boundary = boundary
props.id = 'sparkline-bar-' + this._uid
props.lineWidth = lineWidth || (totalWidth - (padding || 5))
props.offsetX = (totalWidth - props.lineWidth) / 2
return h('svg', {
attrs: {
width: width || '100%',
height: height || '25%',
viewBox: `0 0 ${viewWidth} ${viewHeight}`
}
}, [
h(Gradient, { props }),
h(Rect, { props }),
this.showLabel ? h(Text, { props }) : undefined as never,
h('g', {
attrs: {
transform: `scale(1,-1) translate(0,-${boundary.maxY})`,
'clip-path': `url(#${props.id}-clip)`,
fill: `url(#${props.id})`
}
}, [
h('rect', {
attrs: {
x: 0,
y: 0,
width: viewWidth,
height: viewHeight
}
})
])
])
}
})