feat(system-resources-widget): add label display mode option (#4086)

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

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ReactNode } from "react";
 import type { LineChartSeries } from "@mantine/charts";
 import { LineChart } from "@mantine/charts";
 import { Card, Center, Group, Loader, Stack, Text, useMantineColorScheme, useMantineTheme } from "@mantine/core";
@@ -6,12 +7,17 @@ import { useElementSize, useHover, useMergedRef } from "@mantine/hooks";
 import type { TooltipProps, YAxisProps } from "recharts";
 
 import { useRequiredBoard } from "@homarr/boards/context";
+import type { TablerIcon } from "@homarr/ui";
+
+import type { LabelDisplayModeOption } from "..";
 
 export const CommonChart = ({
   data,
   dataKey,
   series,
   title,
+  icon: Icon,
+  labelDisplayMode,
   tooltipProps,
   yAxisProps,
   lastValue,
@@ -19,7 +25,9 @@ export const CommonChart = ({
   data: Record<string, any>[];
   dataKey: string;
   series: LineChartSeries[];
-  title: string;
+  title: ReactNode;
+  icon: TablerIcon;
+  labelDisplayMode: LabelDisplayModeOption;
   tooltipProps?: TooltipProps<number, any>;
   yAxisProps?: Omit<YAxisProps, "ref">;
   lastValue?: string;
@@ -35,6 +43,9 @@ export const CommonChart = ({
   const backgroundColor =
     scheme.colorScheme === "dark" ? `rgba(57, 57, 57, ${opacity})` : `rgba(246, 247, 248, ${opacity})`;
 
+  const showIcon = labelDisplayMode === "icon" || labelDisplayMode === "textWithIcon";
+  const showText = labelDisplayMode === "text" || labelDisplayMode === "textWithIcon";
+
   return (
     <Card
       ref={ref}
@@ -55,10 +66,14 @@ export const CommonChart = ({
           gap={5}
           wrap={"nowrap"}
           style={{ zIndex: 2, pointerEvents: "none" }}
+          align="center"
         >
-          <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"}>
-            {title}
-          </Text>
+          {showIcon && <Icon color={"var(--mantine-color-dimmed)"} size={height > 100 ? 20 : 14} stroke={1.5} />}
+          {showText && (
+            <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"}>
+              {title}
+            </Text>
+          )}
           {lastValue && (
             <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} lineClamp={1}>
               {lastValue}