fix: correct network monitoring chart labels and units

Network chart showed values labeled as KB/s, but the underlying data
is MB totals accumulated since boot. Convert to GB and relabel as
Network Total (since Boot).

Fixes #5115
This commit is contained in:
Mauricio Siu
2026-08-27 01:44:49 -06:00
parent 71816d0853
commit a822db5967
@@ -19,6 +19,11 @@ interface NetworkChartProps {
data: any[]; data: any[];
} }
function formatNetworkGB(valueInMB: number) {
if (Number.isNaN(valueInMB)) return "0";
return (valueInMB / 1024).toFixed(1);
}
const chartConfig = { const chartConfig = {
networkIn: { networkIn: {
label: "Network In", label: "Network In",
@@ -38,8 +43,8 @@ export function NetworkChart({ data }: NetworkChartProps) {
<CardHeader className="border-b py-5"> <CardHeader className="border-b py-5">
<CardTitle>Network</CardTitle> <CardTitle>Network</CardTitle>
<CardDescription> <CardDescription>
Network Traffic: ↑ {latestData.networkOut} KB/s ↓{" "} Network Total: ↑ {formatNetworkGB(latestData.networkOut)} GB ↓{" "}
{latestData.networkIn} KB/s {formatNetworkGB(latestData.networkIn)} GB (since Boot)
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6"> <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
@@ -83,7 +88,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
minTickGap={32} minTickGap={32}
tickFormatter={(value) => formatTimestamp(value)} tickFormatter={(value) => formatTimestamp(value)}
/> />
<YAxis tickFormatter={(value) => `${value} KB/s`} /> <YAxis tickFormatter={(value) => `${formatNetworkGB(value)} GB`} />
<ChartTooltip <ChartTooltip
cursor={false} cursor={false}
content={({ active, payload, label }) => { content={({ active, payload, label }) => {
@@ -105,8 +110,8 @@ export function NetworkChart({ data }: NetworkChartProps) {
Network Network
</span> </span>
<span className="font-bold"> <span className="font-bold">
↑ {data.networkOut} KB/s ↑ {formatNetworkGB(data.networkOut)} GB
<br />↓ {data.networkIn} KB/s <br />↓ {formatNetworkGB(data.networkIn)} GB
</span> </span>
</div> </div>
</div> </div>