/
VSparkline.tsx
82 lines (67 loc) 路 2.1 KB
/
VSparkline.tsx
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
// Components
import { makeVBarlineProps, VBarline } from './VBarline'
import { makeVMultiTrendProps, VMultiTrend } from './VMultiTrend'
import { makeVTrendlineProps, VTrendline } from './VTrendline'
// Composables
import { useTextColor } from '@/composables/color'
// Utilities
import { computed, toRef } from 'vue'
import { genericComponent, propsFactory, useRender } from '@/util'
// Types
import type { PropType } from 'vue'
// Types
export const makeVSparklineProps = propsFactory({
type: {
type: String as PropType<'trend' | 'bar' | 'multi'>,
default: 'trend',
},
...makeVBarlineProps(),
...makeVMultiTrendProps(),
...makeVTrendlineProps(),
}, 'VSparkline')
export type VSparklineSlots = {
default: void
label: { index: number, value: string }
}
export const VSparkline = genericComponent<VSparklineSlots>()({
name: 'VSparkline',
props: makeVSparklineProps(),
setup (props, { slots }) {
const { textColorClasses, textColorStyles } = useTextColor(
Array.isArray(props.color)
? toRef(props, 'color[0]')
: toRef(props, 'color')
)
const hasLabels = computed(() => {
return Boolean(
props.showLabels ||
props.labels.length > 0 ||
!!slots?.label
)
})
const totalHeight = computed(() => {
let height = parseInt(props.height, 10)
if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5
return height
})
useRender(() => {
const Tag = props.type === 'trend' ? VTrendline : props.type === 'bar' ? VBarline : VMultiTrend
const lineProps = props.type === 'trend'
? VTrendline.filterProps(props)
: props.type === 'bar'
? VBarline.filterProps(props)
: VMultiTrend.filterProps(props)
return (
<Tag
key={ props.type }
class={ textColorClasses.value }
style={ textColorStyles.value }
viewBox={ `0 0 ${props.width} ${parseInt(totalHeight.value, 10)}` }
{ ...lineProps }
v-slots={ slots }
/>
)
})
},
})
export type VSparkline = InstanceType<typeof VSparkline>