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
|
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 memoryChartOptions: 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: 3,
callback(value: number) {
return prettyBytes(value);
},
},
},
},
};
export const chartStyles = [
{
inuse: {
backgroundColor: 'rgba(81, 168, 221, 0.5)',
borderColor: 'rgb(81, 168, 221)',
},
},
{
inuse: {
backgroundColor: 'rgba(245,78,162,0.6)',
borderColor: 'rgba(245,78,162,1)',
},
},
{
inuse: {
backgroundColor: 'rgba(94, 175, 223, 0.3)',
borderColor: 'rgb(94, 175, 223)',
},
},
{
inuse: {
backgroundColor: 'rgba(242, 174, 62, 0.3)',
borderColor: 'rgb(242, 174, 62)',
},
},
];
|
