-
-
Notifications
You must be signed in to change notification settings - Fork 656
/
createChartOptions.ts
82 lines (81 loc) · 2.37 KB
/
createChartOptions.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
import { Theme } from '@mui/material';
import { ILocationSettings } from 'hooks/useLocationSettings';
import { TooltipState } from './ChartTooltip/ChartTooltip';
import { createTooltip } from './createTooltip';
import { legendOptions } from './legendOptions';
export const createOptions = (
theme: Theme,
locationSettings: ILocationSettings,
setTooltip: React.Dispatch<React.SetStateAction<TooltipState | null>>,
isPlaceholder?: boolean,
localTooltip?: boolean,
) =>
({
responsive: true,
...(isPlaceholder
? {
animation: {
duration: 0,
},
}
: {}),
plugins: {
legend: {
...legendOptions,
display: !isPlaceholder,
},
tooltip: {
enabled: false,
position: 'nearest',
external: createTooltip(setTooltip),
},
},
locale: locationSettings.locale,
interaction: {
intersect: false,
axis: 'x',
mode: 'index',
},
elements: {
point: {
radius: 0,
hitRadius: 15,
},
},
// cubicInterpolationMode: 'monotone',
tension: 0.1,
color: theme.palette.text.secondary,
scales: {
y: {
beginAtZero: true,
type: 'linear',
grid: {
color: theme.palette.divider,
borderColor: theme.palette.divider,
},
ticks: {
color: theme.palette.text.secondary,
display: !isPlaceholder,
precision: 0,
},
},
x: {
type: 'time',
time: {
unit: 'week',
tooltipFormat: 'PPP',
},
grid: {
color: 'transparent',
borderColor: 'transparent',
},
ticks: {
color: theme.palette.text.secondary,
display: !isPlaceholder,
source: 'data',
maxRotation: 90,
minRotation: 23.5,
},
},
},
}) as const;