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

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) {