feat: system resources widget (#3538)

* feat: add system resources widget * Update packages/widgets/src/system-resources/index.ts Co-authored-by: Andre Silva <32734153+Aandree5@users.noreply.github.com> * fix: system resources not updating * refactor: improve logic in component * fix: tooltip overflow * feat: add label with last value * feat: hide label when hovering * fix: formatting * fix: lint * fix: formatting * fix: wrong redis channel used for opnsense --------- Co-authored-by: Andre Silva <32734153+Aandree5@users.noreply.github.com> Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
2025-08-04 20:12:28 +00:00
parent 1b5ccb5293
commit 3ee408bf53
24 changed files with 512 additions and 26 deletions
--- a/packages/widgets/src/system-resources/chart/memory-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/memory-chart.tsx
@@ -0,0 +1,50 @@
+import { Paper, Text } from "@mantine/core";
+
+import { humanFileSize } from "@homarr/common";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { CommonChart } from "./common-chart";
+
+export const SystemResourceMemoryChart = ({
+  memoryUsageOverTime,
+  totalCapacityInBytes,
+}: {
+  memoryUsageOverTime: number[];
+  totalCapacityInBytes: number;
+}) => {
+  const chartData = memoryUsageOverTime.map((usage, index) => ({ index, usage }));
+  const t = useScopedI18n("widget.systemResources.card");
+
+  const percentageUsed =
+    memoryUsageOverTime.length > 0
+      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        memoryUsageOverTime[memoryUsageOverTime.length - 1]! / totalCapacityInBytes
+      : undefined;
+
+  return (
+    <CommonChart
+      data={chartData}
+      dataKey={"index"}
+      series={[{ name: "usage", color: "red.6" }]}
+      title={t("memory")}
+      yAxisProps={{ domain: [0, totalCapacityInBytes] }}
+      lastValue={percentageUsed !== undefined ? `${Math.round(percentageUsed * 100)}%` : undefined}
+      tooltipProps={{
+        content: ({ payload }) => {
+          if (!payload) {
+            return null;
+          }
+          const value = payload[0] ? Number(payload[0].value) : 0;
+          return (
+            <Paper px={3} py={2} withBorder shadow="md" radius="md">
+              <Text c="dimmed" size="xs">
+                {humanFileSize(value)} / {humanFileSize(totalCapacityInBytes)} (
+                {Math.round((value / totalCapacityInBytes) * 100)}%)
+              </Text>
+            </Paper>
+          );
+        },
+      }}
+    />
+  );
+};