fix(system-disks): format absolute storage values with shared byte helper (#6299)

packages/widgets/src/system-resources/chart/combined-network-traffic.tsx

@@ -1,7 +1,7 @@
 import { Box, Group, Paper, Stack, Text } from "@mantine/core";
 import { IconNetwork } from "@tabler/icons-react";
 
-import { humanFileSize } from "@homarr/common";
+import { formatByteRate } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { LabelDisplayModeOption } from "..";
@@ -47,7 +47,7 @@ export const CombinedNetworkTrafficChart = ({
                       {payloadData.value === undefined ? (
                         <>N/A</>
                       ) : (
-                        <>{humanFileSize(Math.round(Number(payloadData.value)))}/s</>
+                        formatByteRate(Math.round(Number(payloadData.value)))
                       )}
                     </Text>
                   </Group>

packages/widgets/src/system-resources/chart/memory-chart.tsx

@@ -1,7 +1,7 @@
 import { Paper, Text } from "@mantine/core";
 import { IconBrain } from "@tabler/icons-react";
 
-import { humanFileSize } from "@homarr/common";
+import { formatBytesPair } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { LabelDisplayModeOption } from "..";
@@ -41,11 +41,11 @@ export const SystemResourceMemoryChart = ({
       tooltipProps={{
         content: ({ payload }) => {
           const value = payload[0] ? Number(payload[0].value) : 0;
+          const memory = formatBytesPair(Math.round(value), totalCapacityInBytes);
           return (
             <Paper px={3} py={2} shadow="md">
               <Text c="dimmed" size="xs">
-                {humanFileSize(Math.round(value))} / {humanFileSize(totalCapacityInBytes)} (
-                {Math.round((value / totalCapacityInBytes) * 100)}%)
+                {memory.used} / {memory.available} ({Math.round((value / totalCapacityInBytes) * 100)}%)
               </Text>
             </Paper>
           );

packages/widgets/src/system-resources/chart/network-traffic.tsx

@@ -1,7 +1,7 @@
 import { Paper, Text } from "@mantine/core";
 import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
 
-import { humanFileSize } from "@homarr/common";
+import { formatByteRate } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { LabelDisplayModeOption } from "..";
@@ -32,7 +32,7 @@ export const NetworkTrafficChart = ({
       title={isUp ? t("up") : t("down")}
       icon={isUp ? IconArrowUp : IconArrowDown}
       yAxisProps={{ domain: [0, upperBound] }}
-      lastValue={`${humanFileSize(Math.round(max))}/s`}
+      lastValue={formatByteRate(Math.round(max))}
       chartType={hasShadow ? "area" : "line"}
       labelDisplayMode={labelDisplayMode}
       tooltipProps={{
@@ -41,7 +41,7 @@ export const NetworkTrafficChart = ({
           return (
             <Paper px={3} py={2} shadow="md">
               <Text c="dimmed" size="xs">
-                {humanFileSize(Math.round(value))}/s
+                {formatByteRate(Math.round(value))}
               </Text>
             </Paper>
           );