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/common-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/common-chart.tsx
@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { LineChartSeries } from "@mantine/charts";
+import { LineChart } from "@mantine/charts";
+import { Card, Center, Group, Loader, Stack, Text, useMantineColorScheme, useMantineTheme } from "@mantine/core";
+import { useElementSize, useHover, useMergedRef } from "@mantine/hooks";
+import type { TooltipProps, YAxisProps } from "recharts";
+
+import { useRequiredBoard } from "@homarr/boards/context";
+
+export const CommonChart = ({
+  data,
+  dataKey,
+  series,
+  title,
+  tooltipProps,
+  yAxisProps,
+  lastValue,
+}: {
+  data: Record<string, any>[];
+  dataKey: string;
+  series: LineChartSeries[];
+  title: string;
+  tooltipProps?: TooltipProps<number, any>;
+  yAxisProps?: Omit<YAxisProps, "ref">;
+  lastValue?: string;
+}) => {
+  const { ref: elementSizeRef, height } = useElementSize();
+  const theme = useMantineTheme();
+  const scheme = useMantineColorScheme();
+  const board = useRequiredBoard();
+  const { hovered, ref: hoverRef } = useHover();
+  const ref = useMergedRef(elementSizeRef, hoverRef);
+
+  const opacity = board.opacity / 100;
+  const backgroundColor =
+    scheme.colorScheme === "dark" ? `rgba(57, 57, 57, ${opacity})` : `rgba(246, 247, 248, ${opacity})`;
+
+  return (
+    <Card
+      ref={ref}
+      h={"100%"}
+      pos={"relative"}
+      style={{ overflow: "visible" }}
+      p={0}
+      bg={data.length <= 1 ? backgroundColor : undefined}
+      radius={board.itemRadius}
+    >
+      {data.length > 1 && height > 40 && !hovered && (
+        <Group
+          pos={"absolute"}
+          top={0}
+          left={0}
+          p={8}
+          pt={6}
+          gap={5}
+          wrap={"nowrap"}
+          style={{ zIndex: 2, pointerEvents: "none" }}
+        >
+          <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"}>
+            {title}
+          </Text>
+          {lastValue && (
+            <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} lineClamp={1}>
+              {lastValue}
+            </Text>
+          )}
+        </Group>
+      )}
+      {data.length <= 1 ? (
+        <Center pos="absolute" w="100%" h="100%">
+          <Stack px={"xs"} align={"center"}>
+            <Loader type="bars" size={height > 100 ? "md" : "xs"} color={"rgba(94, 94, 94, 1)"} />
+          </Stack>
+        </Center>
+      ) : (
+        <LineChart
+          data={data}
+          dataKey={dataKey}
+          h={"100%"}
+          series={series}
+          curveType="monotone"
+          tickLine="none"
+          gridAxis="none"
+          withXAxis={false}
+          withYAxis={false}
+          withDots={false}
+          bg={backgroundColor}
+          styles={{ root: { padding: 5, borderRadius: theme.radius[board.itemRadius] } }}
+          tooltipAnimationDuration={200}
+          tooltipProps={tooltipProps}
+          withTooltip={height >= 64}
+          yAxisProps={yAxisProps}
+        />
+      )}
+    </Card>
+  );
+};