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
|
import { createAsset } from 'use-asset';
import prettyBytes from './pretty-bytes';
export const chartJSResource = createAsset(() => {
return import('~/misc/chart-lib');
});
export const commonDataSetProps = { borderWidth: 1, pointRadius: 0, tension: 0.2, fill: true };
export const commonChartOptions: import('chart.js').ChartOptions<'line'> = {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: { labels: { boxWidth: 20 } },
},
scales: {
x: { display: false, type: 'category' },
y: {
type: 'linear',
display: true,
grid: {
display: true,
color: '#555',
drawTicks: false,
},
border: {
dash: [3, 6],
},
ticks: {
maxTicksLimit: 5,
callback(value: number) {
return prettyBytes(value) + '/s ';
},
},
},
},
};
export const chartStyles = [
{
down: {
backgroundColor: 'rgba(81, 168, 221, 0.5)',
borderColor: 'rgb(81, 168, 221)',
},
up: {
backgroundColor: 'rgba(219, 77, 109, 0.5)',
borderColor: 'rgb(219, 77, 109)',
},
},
{
up: {
backgroundColor: 'rgba(245,78,162,0.6)',
borderColor: 'rgba(245,78,162,1)',
},
down: {
backgroundColor: 'rgba(123,59,140,0.6)',
borderColor: 'rgba(66,33,142,1)',
},
},
{
up: {
backgroundColor: 'rgba(94, 175, 223, 0.3)',
borderColor: 'rgb(94, 175, 223)',
},
down: {
backgroundColor: 'rgba(139, 227, 195, 0.3)',
borderColor: 'rgb(139, 227, 195)',
},
},
{
up: {
backgroundColor: 'rgba(242, 174, 62, 0.3)',
borderColor: 'rgb(242, 174, 62)',
},
down: {
backgroundColor: 'rgba(69, 154, 248, 0.3)',
borderColor: 'rgb(69, 154, 248)',
},
},
];
|
