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

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

@@ -1,17 +1,21 @@
 import { Box, Group, Paper, Stack, Text } from "@mantine/core";
+import { IconNetwork } from "@tabler/icons-react";
 
 import { humanFileSize } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import type { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
 
 export const CombinedNetworkTrafficChart = ({
   usageOverTime,
+  labelDisplayMode,
 }: {
   usageOverTime: {
     up: number;
     down: number;
   }[];
+  labelDisplayMode: LabelDisplayModeOption;
 }) => {
   const chartData = usageOverTime.map((usage, index) => ({ index, up: usage.up, down: usage.down }));
   const t = useScopedI18n("widget.systemResources.card");
@@ -25,7 +29,9 @@ export const CombinedNetworkTrafficChart = ({
         { name: "down", color: "yellow.5" },
       ]}
       title={t("network")}
+      icon={IconNetwork}
       yAxisProps={{ domain: [0, "dataMax"] }}
+      labelDisplayMode={labelDisplayMode}
       tooltipProps={{
         content: ({ payload }) => {
           if (!payload) {

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}

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

@@ -1,10 +1,18 @@
 import { Paper, Text } from "@mantine/core";
+import { IconCpu } from "@tabler/icons-react";
 
 import { useScopedI18n } from "@homarr/translation/client";
 
+import { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
 
-export const SystemResourceCPUChart = ({ cpuUsageOverTime }: { cpuUsageOverTime: number[] }) => {
+export const SystemResourceCPUChart = ({
+  cpuUsageOverTime,
+  labelDisplayMode,
+}: {
+  cpuUsageOverTime: number[];
+  labelDisplayMode: LabelDisplayModeOption;
+}) => {
   const chartData = cpuUsageOverTime.map((usage, index) => ({ index, usage }));
   const t = useScopedI18n("widget.systemResources.card");
 
@@ -14,11 +22,13 @@ export const SystemResourceCPUChart = ({ cpuUsageOverTime }: { cpuUsageOverTime:
       dataKey={"index"}
       series={[{ name: "usage", color: "blue.5" }]}
       title={t("cpu")}
+      icon={IconCpu}
       lastValue={
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         cpuUsageOverTime.length > 0 ? `${Math.round(cpuUsageOverTime[cpuUsageOverTime.length - 1]!)}%` : undefined
       }
       yAxisProps={{ domain: [0, 100] }}
+      labelDisplayMode={labelDisplayMode}
       tooltipProps={{
         content: ({ payload }) => {
           if (!payload) {

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

@@ -1,16 +1,20 @@
 import { Paper, Text } from "@mantine/core";
+import { IconBrain } from "@tabler/icons-react";
 
 import { humanFileSize } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import type { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
 
 export const SystemResourceMemoryChart = ({
   memoryUsageOverTime,
   totalCapacityInBytes,
+  labelDisplayMode,
 }: {
   memoryUsageOverTime: number[];
   totalCapacityInBytes: number;
+  labelDisplayMode: LabelDisplayModeOption;
 }) => {
   const chartData = memoryUsageOverTime.map((usage, index) => ({ index, usage }));
   const t = useScopedI18n("widget.systemResources.card");
@@ -27,6 +31,8 @@ export const SystemResourceMemoryChart = ({
       dataKey={"index"}
       series={[{ name: "usage", color: "red.6" }]}
       title={t("memory")}
+      icon={IconBrain}
+      labelDisplayMode={labelDisplayMode}
       yAxisProps={{ domain: [0, totalCapacityInBytes] }}
       lastValue={percentageUsed !== undefined ? `${Math.round(percentageUsed * 100)}%` : undefined}
       tooltipProps={{

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

@@ -1,11 +1,21 @@
 import { Paper, Text } from "@mantine/core";
+import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
 
 import { humanFileSize } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import type { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
 
-export const NetworkTrafficChart = ({ usageOverTime, isUp }: { usageOverTime: number[]; isUp: boolean }) => {
+export const NetworkTrafficChart = ({
+  usageOverTime,
+  isUp,
+  labelDisplayMode,
+}: {
+  usageOverTime: number[];
+  isUp: boolean;
+  labelDisplayMode: LabelDisplayModeOption;
+}) => {
   const chartData = usageOverTime.map((usage, index) => ({ index, usage }));
   const t = useScopedI18n("widget.systemResources.card");
 
@@ -18,8 +28,10 @@ export const NetworkTrafficChart = ({ usageOverTime, isUp }: { usageOverTime: nu
       dataKey={"index"}
       series={[{ name: "usage", color: "yellow.5" }]}
       title={isUp ? t("up") : t("down")}
+      icon={isUp ? IconArrowUp : IconArrowDown}
       yAxisProps={{ domain: [0, upperBound] }}
       lastValue={`${humanFileSize(Math.round(max))}/s`}
+      labelDisplayMode={labelDisplayMode}
       tooltipProps={{
         content: ({ payload }) => {
           if (!payload) {