-
-
Notifications
You must be signed in to change notification settings - Fork 656
/
LineChart.tsx
45 lines (41 loc) · 1.18 KB
/
LineChart.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
import { lazy } from 'react';
import type { ScriptableContext } from 'chart.js';
import { Typography } from '@mui/material';
export const LineChart = lazy(() => import('./LineChartComponent'));
export const fillGradient =
(a: string, b: string) => (context: ScriptableContext<'line'>) => {
const chart = context.chart;
const { ctx, chartArea } = chart;
if (!chartArea) {
return;
}
const gradient = ctx.createLinearGradient(
0,
chartArea.bottom,
0,
chartArea.top,
);
gradient.addColorStop(0, a);
gradient.addColorStop(1, b);
return gradient;
};
export const fillGradientPrimary = fillGradient(
'rgba(129, 122, 254, 0)',
'rgba(129, 122, 254, 0.12)',
);
export const NotEnoughData = () => (
<>
<Typography
variant='body1'
component='h4'
sx={(theme) => ({
paddingBottom: theme.spacing(1),
})}
>
Not enough data
</Typography>
<Typography variant='body2'>
Two or more weeks of data are needed to show a chart.
</Typography>
</>
);