/
typedCharts.ts
83 lines (71 loc) 路 1.97 KB
/
typedCharts.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
import { defineComponent, shallowRef, h } from 'vue'
import type { ChartType, ChartComponentLike, DefaultDataPoint } from 'chart.js'
import {
Chart as ChartJS,
BarController,
BubbleController,
DoughnutController,
LineController,
PieController,
PolarAreaController,
RadarController,
ScatterController
} from 'chart.js'
import type { TypedChartComponent, ChartComponentRef } from './types.js'
import { CommonProps } from './props.js'
import { Chart } from './chart.js'
import { compatProps } from './utils.js'
export function createTypedChart<
TType extends ChartType = ChartType,
TData = DefaultDataPoint<TType>,
TLabel = unknown
>(
type: TType,
registerables: ChartComponentLike
): TypedChartComponent<TType, TData, TLabel> {
ChartJS.register(registerables)
return defineComponent({
props: CommonProps,
setup(props, { expose }) {
const ref = shallowRef<ChartJS | null>(null)
const reforwardRef = (chartRef: ChartComponentRef) => {
ref.value = chartRef?.chart
}
expose({ chart: ref })
return () => {
return h(
Chart,
compatProps(
{
ref: reforwardRef as any
},
{
type,
...props
}
)
)
}
}
}) as any
}
export const Bar = /* #__PURE__ */ createTypedChart('bar', BarController)
export const Doughnut = /* #__PURE__ */ createTypedChart(
'doughnut',
DoughnutController
)
export const Line = /* #__PURE__ */ createTypedChart('line', LineController)
export const Pie = /* #__PURE__ */ createTypedChart('pie', PieController)
export const PolarArea = /* #__PURE__ */ createTypedChart(
'polarArea',
PolarAreaController
)
export const Radar = /* #__PURE__ */ createTypedChart('radar', RadarController)
export const Bubble = /* #__PURE__ */ createTypedChart(
'bubble',
BubbleController
)
export const Scatter = /* #__PURE__ */ createTypedChart(
'scatter',
ScatterController
)