forked from blakeblackshear/frigate
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathStorageGraph.tsx
More file actions
120 lines (114 loc) · 2.77 KB
/
StorageGraph.tsx
File metadata and controls
120 lines (114 loc) · 2.77 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
108
109
110
111
112
113
114
115
116
117
118
119
120
import { useTheme } from "@/context/theme-provider";
import { useEffect, useMemo } from "react";
import Chart from "react-apexcharts";
const getUnitSize = (MB: number) => {
if (MB === null || isNaN(MB) || MB < 0) return "Invalid number";
if (MB < 1024) return `${MB.toFixed(2)} MiB`;
if (MB < 1048576) return `${(MB / 1024).toFixed(2)} GiB`;
return `${(MB / 1048576).toFixed(2)} TiB`;
};
type StorageGraphProps = {
graphId: string;
used: number;
total: number;
};
export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
const { theme, systemTheme } = useTheme();
const options = useMemo(() => {
return {
chart: {
id: graphId,
background: (systemTheme || theme) == "dark" ? "#404040" : "#E5E5E5",
selection: {
enabled: false,
},
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
grid: {
show: false,
padding: {
bottom: -40,
top: -60,
left: -20,
right: 0,
},
},
legend: {
show: false,
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
horizontal: true,
},
},
states: {
active: {
filter: {
type: "none",
},
},
hover: {
filter: {
type: "none",
},
},
},
tooltip: {
enabled: false,
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
min: 0,
max: 100,
},
} as ApexCharts.ApexOptions;
}, [graphId, systemTheme, theme]);
useEffect(() => {
ApexCharts.exec(graphId, "updateOptions", options, true, true);
}, [graphId, options]);
return (
<div className="flex w-full flex-col gap-2.5">
<div className="flex w-full items-center justify-between gap-1">
<div className="flex items-center gap-1">
<div className="text-xs text-primary">{getUnitSize(used)}</div>
<div className="text-xs text-primary">/</div>
<div className="text-xs text-muted-foreground">
{getUnitSize(total)}
</div>
</div>
<div className="text-xs text-primary">
{Math.round((used / total) * 100)}%
</div>
</div>
<div className="h-5 overflow-hidden rounded-md">
<Chart
type="bar"
options={options}
series={[
{ data: [{ x: "storage", y: Math.round((used / total) * 100) }] },
]}
height="100%"
/>
</div>
</div>
);
}