vaChartConfigs.js
2.22 KB
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
import { defineAsyncComponent, markRaw } from 'vue'
const DEFAULT_FONT_FAMILY = "'Inter', sans-serif"
export const defaultConfig = {
scales: {
x: {
ticks: {
font: {
family: DEFAULT_FONT_FAMILY,
},
},
},
y: {
ticks: {
font: {
family: DEFAULT_FONT_FAMILY,
},
},
},
},
plugins: {
legend: {
position: 'bottom',
labels: {
font: {
color: '#34495e',
family: DEFAULT_FONT_FAMILY,
size: 14,
},
usePointStyle: true,
},
},
tooltip: {
bodyFont: {
size: 14,
family: DEFAULT_FONT_FAMILY,
},
boxPadding: 4,
},
},
datasets: {
line: {
fill: 'origin',
tension: 0.3,
borderColor: 'transparent',
},
bubble: {
borderColor: 'transparent',
},
bar: {
borderColor: 'transparent',
},
},
maintainAspectRatio: false,
animation: true,
}
export const doughnutConfig = {
cutout: '80%',
scales: {
x: {
display: false,
grid: {
display: false, // Disable X-axis grid lines ("net")
},
},
y: {
display: false,
grid: {
display: false, // Disable Y-axis grid lines ("net")
},
ticks: {
display: false, // Hide Y-axis values
},
},
},
plugins: {
legend: {
display: false,
},
},
datasets: {
line: {
fill: 'origin',
tension: 0.3,
borderColor: 'transparent',
},
bubble: {
borderColor: 'transparent',
},
bar: {
borderColor: 'transparent',
},
},
maintainAspectRatio: false,
animation: true,
}
export const chartTypesMap = {
pie: markRaw(defineAsyncComponent(() => import('./chart-types/PieChart.vue'))),
doughnut: markRaw(defineAsyncComponent(() => import('./chart-types/DoughnutChart.vue'))),
bubble: markRaw(defineAsyncComponent(() => import('./chart-types/BubbleChart.vue'))),
line: markRaw(defineAsyncComponent(() => import('./chart-types/LineChart.vue'))),
bar: markRaw(defineAsyncComponent(() => import('./chart-types/BarChart.vue'))),
'horizontal-bar': markRaw(defineAsyncComponent(() => import('./chart-types/HorizontalBarChart.vue'))),
}