From fadb03ad27bf9a7a89586d0149808aca6f8a69ad Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 17 Mar 2026 09:12:01 -0700
Subject: [PATCH] Enhancement: better support for raw values in block
 highlighting (#6434)

---
 src/components/services/widget/block.jsx      |  6 +--
 src/components/services/widget/block.test.jsx | 23 +++++++++
 src/widgets/adguard/component.jsx             |  1 +
 src/widgets/beszel/component.jsx              | 19 ++++++--
 src/widgets/deluge/component.jsx              |  4 +-
 src/widgets/docker/component.jsx              | 10 ++--
 src/widgets/dockhand/component.jsx            | 12 ++++-
 src/widgets/downloadstation/component.jsx     |  4 +-
 src/widgets/filebrowser/component.jsx         | 15 ++++--
 src/widgets/flood/component.jsx               |  4 +-
 src/widgets/fritzbox/component.jsx            | 36 +++++++++++---
 src/widgets/gamedig/component.jsx             |  2 +-
 src/widgets/gatus/component.jsx               |  2 +-
 src/widgets/jdownloader/component.jsx         | 13 ++++-
 src/widgets/kubernetes/component.jsx          | 13 ++++-
 src/widgets/mikrotik/component.jsx            | 12 ++++-
 src/widgets/myspeed/component.jsx             |  1 +
 src/widgets/nextcloud/component.jsx           | 15 +++++-
 src/widgets/nzbget/component.jsx              | 13 ++++-
 src/widgets/openwrt/methods/interface.jsx     |  4 +-
 src/widgets/opnsense/component.jsx            | 18 +++++--
 src/widgets/peanut/component.jsx              | 12 ++++-
 src/widgets/pfsense/component.jsx             | 15 +++++-
 src/widgets/proxmox/component.jsx             | 12 ++++-
 src/widgets/proxmoxbackupserver/component.jsx | 18 +++++--
 src/widgets/proxmoxvm/component.jsx           |  8 +++-
 src/widgets/pyload/component.jsx              |  6 ++-
 src/widgets/qbittorrent/component.jsx         | 12 ++++-
 src/widgets/rutorrent/component.jsx           |  4 +-
 src/widgets/speedtest/component.jsx           |  1 +
 src/widgets/strelaysrv/component.jsx          |  7 ++-
 src/widgets/tdarr/component.jsx               |  2 +-
 src/widgets/transmission/component.jsx        |  4 +-
 src/widgets/unraid/component.jsx              | 48 ++++++++++++++-----
 src/widgets/uptimekuma/component.jsx          |  2 +-
 35 files changed, 300 insertions(+), 78 deletions(-)

diff --git a/src/components/services/widget/block.jsx b/src/components/services/widget/block.jsx
index c61dd5d54..e78123ea8 100644
--- a/src/components/services/widget/block.jsx
+++ b/src/components/services/widget/block.jsx
@@ -6,7 +6,7 @@ import { BlockHighlightContext } from "./highlight-context";
 
 import { evaluateHighlight, getHighlightClass } from "utils/highlights";
 
-export default function Block({ value, label, field }) {
+export default function Block({ value, highlightValue, label, field }) {
   const { t } = useTranslation();
   const highlightConfig = useContext(BlockHighlightContext);
 
@@ -20,12 +20,12 @@ export default function Block({ value, label, field }) {
     }
 
     for (const candidate of candidates) {
-      const result = evaluateHighlight(candidate, value, highlightConfig);
+      const result = evaluateHighlight(candidate, highlightValue ?? value, highlightConfig);
       if (result) return result;
     }
 
     return null;
-  }, [field, label, value, highlightConfig]);
+  }, [field, label, value, highlightValue, highlightConfig]);
 
   const highlightClass = useMemo(() => {
     if (!highlight?.level) return undefined;
diff --git a/src/components/services/widget/block.test.jsx b/src/components/services/widget/block.test.jsx
index ece7518a7..38ee0d137 100644
--- a/src/components/services/widget/block.test.jsx
+++ b/src/components/services/widget/block.test.jsx
@@ -38,4 +38,27 @@ describe("components/services/widget/block", () => {
     expect(el.getAttribute("data-highlight-level")).toBe("danger");
     expect(el.className).toContain("danger-class");
   });
+
+  it("prefers highlightValue over the rendered value for numeric highlighting", () => {
+    const highlightConfig = {
+      levels: { warn: "warn-class" },
+      fields: {
+        foo: {
+          numeric: { when: "gt", value: 5, level: "warn" },
+        },
+      },
+    };
+
+    const { container } = renderWithProviders(
+      <BlockHighlightContext.Provider value={highlightConfig}>
+        <Block label="foo.label" field="foo" value="5.791 ms" highlightValue={5.791} />
+      </BlockHighlightContext.Provider>,
+      { settings: {} },
+    );
+
+    const el = container.querySelector(".service-block");
+    expect(el).not.toBeNull();
+    expect(el.getAttribute("data-highlight-level")).toBe("warn");
+    expect(el.className).toContain("warn-class");
+  });
 });
diff --git a/src/widgets/adguard/component.jsx b/src/widgets/adguard/component.jsx
index e5a7670a5..47980e11b 100644
--- a/src/widgets/adguard/component.jsx
+++ b/src/widgets/adguard/component.jsx
@@ -37,6 +37,7 @@ export default function Component({ service }) {
       <Block
         label="adguard.latency"
         value={t("common.ms", { value: adguardData.avg_processing_time * 1000, style: "unit", unit: "millisecond" })}
+        highlightValue={adguardData.avg_processing_time * 1000}
       />
     </Container>
   );
diff --git a/src/widgets/beszel/component.jsx b/src/widgets/beszel/component.jsx
index bbcaeb0b7..18ed67d27 100644
--- a/src/widgets/beszel/component.jsx
+++ b/src/widgets/beszel/component.jsx
@@ -51,12 +51,25 @@ export default function Component({ service }) {
         <Block label="beszel.name" value={system.name} />
         <Block label="beszel.status" value={t(`beszel.${system.status}`)} />
         <Block label="beszel.updated" value={t("common.relativeDate", { value: system.updated })} />
-        <Block label="beszel.cpu" value={t("common.percent", { value: system.info.cpu, maximumFractionDigits: 2 })} />
-        <Block label="beszel.memory" value={t("common.percent", { value: system.info.mp, maximumFractionDigits: 2 })} />
-        <Block label="beszel.disk" value={t("common.percent", { value: system.info.dp, maximumFractionDigits: 2 })} />
+        <Block
+          label="beszel.cpu"
+          value={t("common.percent", { value: system.info.cpu, maximumFractionDigits: 2 })}
+          highlightValue={system.info.cpu}
+        />
+        <Block
+          label="beszel.memory"
+          value={t("common.percent", { value: system.info.mp, maximumFractionDigits: 2 })}
+          highlightValue={system.info.mp}
+        />
+        <Block
+          label="beszel.disk"
+          value={t("common.percent", { value: system.info.dp, maximumFractionDigits: 2 })}
+          highlightValue={system.info.dp}
+        />
         <Block
           label="beszel.network"
           value={t("common.byterate", { value: system.info.bb, maximumFractionDigits: 2 })}
+          highlightValue={system.info.bb}
         />
       </Container>
     );
diff --git a/src/widgets/deluge/component.jsx b/src/widgets/deluge/component.jsx
index eb6ddfaa1..1707eb6ce 100644
--- a/src/widgets/deluge/component.jsx
+++ b/src/widgets/deluge/component.jsx
@@ -52,9 +52,9 @@ export default function Component({ service }) {
     <>
       <Container service={service}>
         <Block label="deluge.leech" value={t("common.number", { value: leech })} />
-        <Block label="deluge.download" value={t("common.byterate", { value: rateDl })} />
+        <Block label="deluge.download" value={t("common.byterate", { value: rateDl })} highlightValue={rateDl} />
         <Block label="deluge.seed" value={t("common.number", { value: completed })} />
-        <Block label="deluge.upload" value={t("common.byterate", { value: rateUl })} />
+        <Block label="deluge.upload" value={t("common.byterate", { value: rateUl })} highlightValue={rateUl} />
       </Container>
       {widget?.enableLeechProgress &&
         leechTorrents.map((queueEntry) => (
diff --git a/src/widgets/docker/component.jsx b/src/widgets/docker/component.jsx
index 6e05454f8..b1d8e1255 100644
--- a/src/widgets/docker/component.jsx
+++ b/src/widgets/docker/component.jsx
@@ -41,17 +41,19 @@ export default function Component({ service }) {
   }
 
   const { rxBytes, txBytes } = calculateThroughput(statsData.stats);
+  const cpuPercent = calculateCPUPercent(statsData.stats);
+  const usedMemory = calculateUsedMemory(statsData.stats);
 
   return (
     <Container service={service}>
-      <Block label="docker.cpu" value={t("common.percent", { value: calculateCPUPercent(statsData.stats) })} />
+      <Block label="docker.cpu" value={t("common.percent", { value: cpuPercent })} highlightValue={cpuPercent} />
       {statsData.stats.memory_stats.usage && (
-        <Block label="docker.mem" value={t("common.bytes", { value: calculateUsedMemory(statsData.stats) })} />
+        <Block label="docker.mem" value={t("common.bytes", { value: usedMemory })} highlightValue={usedMemory} />
       )}
       {statsData.stats.networks && (
         <>
-          <Block label="docker.rx" value={t("common.bytes", { value: rxBytes })} />
-          <Block label="docker.tx" value={t("common.bytes", { value: txBytes })} />
+          <Block label="docker.rx" value={t("common.bytes", { value: rxBytes })} highlightValue={rxBytes} />
+          <Block label="docker.tx" value={t("common.bytes", { value: txBytes })} highlightValue={txBytes} />
         </>
       )}
     </Container>
diff --git a/src/widgets/dockhand/component.jsx b/src/widgets/dockhand/component.jsx
index 50ccff180..d3c97bd01 100644
--- a/src/widgets/dockhand/component.jsx
+++ b/src/widgets/dockhand/component.jsx
@@ -105,8 +105,16 @@ export default function Component({ service }) {
       <Block label="dockhand.paused" value={t("common.number", { value: paused ?? 0 })} />
       <Block label="dockhand.pending_updates" value={t("common.number", { value: pendingUpdates ?? 0 })} />
       <Block label="dockhand.total" value={t("common.number", { value: totalContainers })} />
-      <Block label="dockhand.cpu" value={t("common.percent", { value: cpuPercent, maximumFractionDigits: 1 })} />
-      <Block label="dockhand.memory" value={t("common.percent", { value: memoryPercent, maximumFractionDigits: 1 })} />
+      <Block
+        label="dockhand.cpu"
+        value={t("common.percent", { value: cpuPercent, maximumFractionDigits: 1 })}
+        highlightValue={cpuPercent}
+      />
+      <Block
+        label="dockhand.memory"
+        value={t("common.percent", { value: memoryPercent, maximumFractionDigits: 1 })}
+        highlightValue={memoryPercent}
+      />
       <Block label="dockhand.images" value={t("common.number", { value: imagesTotal ?? 0 })} />
       <Block label="dockhand.volumes" value={t("common.number", { value: volumesTotal ?? 0 })} />
       <Block
diff --git a/src/widgets/downloadstation/component.jsx b/src/widgets/downloadstation/component.jsx
index 016f4953a..489669a7d 100644
--- a/src/widgets/downloadstation/component.jsx
+++ b/src/widgets/downloadstation/component.jsx
@@ -33,9 +33,9 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="downloadstation.leech" value={t("common.number", { value: leech })} />
-      <Block label="downloadstation.download" value={t("common.byterate", { value: rateDl })} />
+      <Block label="downloadstation.download" value={t("common.byterate", { value: rateDl })} highlightValue={rateDl} />
       <Block label="downloadstation.seed" value={t("common.number", { value: completed })} />
-      <Block label="downloadstation.upload" value={t("common.byterate", { value: rateUl })} />
+      <Block label="downloadstation.upload" value={t("common.byterate", { value: rateUl })} highlightValue={rateUl} />
     </Container>
   );
 }
diff --git a/src/widgets/filebrowser/component.jsx b/src/widgets/filebrowser/component.jsx
index cf5a28000..53b6d89b9 100644
--- a/src/widgets/filebrowser/component.jsx
+++ b/src/widgets/filebrowser/component.jsx
@@ -25,14 +25,21 @@ export default function Component({ service }) {
     );
   }
 
+  const available = (usage?.total ?? 0) - (usage?.used ?? 0);
+
   return (
     <Container service={service}>
+      <Block label="filebrowser.available" value={t("common.bytes", { value: available })} highlightValue={available} />
       <Block
-        label="filebrowser.available"
-        value={t("common.bytes", { value: (usage?.total ?? 0) - (usage?.used ?? 0) })}
+        label="filebrowser.used"
+        value={t("common.bytes", { value: usage?.used ?? 0 })}
+        highlightValue={usage?.used ?? 0}
+      />
+      <Block
+        label="filebrowser.total"
+        value={t("common.bytes", { value: usage?.total ?? 0 })}
+        highlightValue={usage?.total ?? 0}
       />
-      <Block label="filebrowser.used" value={t("common.bytes", { value: usage?.used ?? 0 })} />
-      <Block label="filebrowser.total" value={t("common.bytes", { value: usage?.total ?? 0 })} />
     </Container>
   );
 }
diff --git a/src/widgets/flood/component.jsx b/src/widgets/flood/component.jsx
index 92a2b61a0..973f8a6fd 100644
--- a/src/widgets/flood/component.jsx
+++ b/src/widgets/flood/component.jsx
@@ -45,9 +45,9 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="flood.leech" value={t("common.number", { value: leech })} />
-      <Block label="flood.download" value={t("common.byterate", { value: rateDl })} />
+      <Block label="flood.download" value={t("common.byterate", { value: rateDl })} highlightValue={rateDl} />
       <Block label="flood.seed" value={t("common.number", { value: completed })} />
-      <Block label="flood.upload" value={t("common.byterate", { value: rateUl })} />
+      <Block label="flood.upload" value={t("common.byterate", { value: rateUl })} highlightValue={rateUl} />
     </Container>
   );
 }
diff --git a/src/widgets/fritzbox/component.jsx b/src/widgets/fritzbox/component.jsx
index d7928c20b..405975059 100644
--- a/src/widgets/fritzbox/component.jsx
+++ b/src/widgets/fritzbox/component.jsx
@@ -47,12 +47,36 @@ export default function Component({ service }) {
     <Container service={service}>
       <Block label="fritzbox.connectionStatus" value={t(`fritzbox.connectionStatus${fritzboxData.connectionStatus}`)} />
       <Block label="fritzbox.uptime" value={t("common.duration", { value: fritzboxData.uptime })} />
-      <Block label="fritzbox.maxDown" value={t("common.byterate", { value: fritzboxData.maxDown / 8, decimals: 1 })} />
-      <Block label="fritzbox.maxUp" value={t("common.byterate", { value: fritzboxData.maxUp / 8, decimals: 1 })} />
-      <Block label="fritzbox.down" value={t("common.byterate", { value: fritzboxData.down, decimals: 1 })} />
-      <Block label="fritzbox.up" value={t("common.byterate", { value: fritzboxData.up, decimals: 1 })} />
-      <Block label="fritzbox.received" value={t("common.bytes", { value: fritzboxData.received })} />
-      <Block label="fritzbox.sent" value={t("common.bytes", { value: fritzboxData.sent })} />
+      <Block
+        label="fritzbox.maxDown"
+        value={t("common.byterate", { value: fritzboxData.maxDown / 8, decimals: 1 })}
+        highlightValue={fritzboxData.maxDown / 8}
+      />
+      <Block
+        label="fritzbox.maxUp"
+        value={t("common.byterate", { value: fritzboxData.maxUp / 8, decimals: 1 })}
+        highlightValue={fritzboxData.maxUp / 8}
+      />
+      <Block
+        label="fritzbox.down"
+        value={t("common.byterate", { value: fritzboxData.down, decimals: 1 })}
+        highlightValue={fritzboxData.down}
+      />
+      <Block
+        label="fritzbox.up"
+        value={t("common.byterate", { value: fritzboxData.up, decimals: 1 })}
+        highlightValue={fritzboxData.up}
+      />
+      <Block
+        label="fritzbox.received"
+        value={t("common.bytes", { value: fritzboxData.received })}
+        highlightValue={fritzboxData.received}
+      />
+      <Block
+        label="fritzbox.sent"
+        value={t("common.bytes", { value: fritzboxData.sent })}
+        highlightValue={fritzboxData.sent}
+      />
       <Block label="fritzbox.externalIPAddress" value={fritzboxData.externalIPAddress} />
       <Block label="fritzbox.externalIPv6Address" value={fritzboxData.externalIPv6Address} />
       <Block label="fritzbox.externalIPv6Prefix" value={fritzboxData.externalIPv6Prefix} />
diff --git a/src/widgets/gamedig/component.jsx b/src/widgets/gamedig/component.jsx
index b76002b51..2efea5631 100644
--- a/src/widgets/gamedig/component.jsx
+++ b/src/widgets/gamedig/component.jsx
@@ -58,7 +58,7 @@ export default function Component({ service }) {
       <Block label="gamedig.players" value={players} />
       <Block label="gamedig.maxPlayers" value={maxPlayers} />
       <Block label="gamedig.bots" value={bots} />
-      <Block label="gamedig.ping" value={ping} />
+      <Block label="gamedig.ping" value={ping} highlightValue={serverData.online ? serverData.ping : undefined} />
     </Container>
   );
 }
diff --git a/src/widgets/gatus/component.jsx b/src/widgets/gatus/component.jsx
index 25aae239e..3a30b7e2b 100644
--- a/src/widgets/gatus/component.jsx
+++ b/src/widgets/gatus/component.jsx
@@ -45,7 +45,7 @@ export default function Component({ service }) {
     <Container service={service}>
       <Block label="gatus.up" value={t("common.number", { value: sitesUp })} />
       <Block label="gatus.down" value={t("common.number", { value: sitesDown })} />
-      <Block label="gatus.uptime" value={t("common.percent", { value: uptime })} />
+      <Block label="gatus.uptime" value={t("common.percent", { value: uptime })} highlightValue={Number(uptime)} />
     </Container>
   );
 }
diff --git a/src/widgets/jdownloader/component.jsx b/src/widgets/jdownloader/component.jsx
index a7722c7c4..c352902e4 100644
--- a/src/widgets/jdownloader/component.jsx
+++ b/src/widgets/jdownloader/component.jsx
@@ -31,12 +31,21 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="jdownloader.downloadCount" value={t("common.number", { value: jdownloaderData.downloadCount })} />
-      <Block label="jdownloader.downloadTotalBytes" value={t("common.bytes", { value: jdownloaderData.totalBytes })} />
+      <Block
+        label="jdownloader.downloadTotalBytes"
+        value={t("common.bytes", { value: jdownloaderData.totalBytes })}
+        highlightValue={jdownloaderData.totalBytes}
+      />
       <Block
         label="jdownloader.downloadBytesRemaining"
         value={t("common.bytes", { value: jdownloaderData.bytesRemaining })}
+        highlightValue={jdownloaderData.bytesRemaining}
+      />
+      <Block
+        label="jdownloader.downloadSpeed"
+        value={t("common.byterate", { value: jdownloaderData.totalSpeed })}
+        highlightValue={jdownloaderData.totalSpeed}
       />
-      <Block label="jdownloader.downloadSpeed" value={t("common.byterate", { value: jdownloaderData.totalSpeed })} />
     </Container>
   );
 }
diff --git a/src/widgets/kubernetes/component.jsx b/src/widgets/kubernetes/component.jsx
index d3587a59a..e008411ec 100644
--- a/src/widgets/kubernetes/component.jsx
+++ b/src/widgets/kubernetes/component.jsx
@@ -43,14 +43,23 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       {(statsData.stats.cpuLimit && (
-        <Block label="docker.cpu" value={t("common.percent", { value: statsData.stats.cpuUsage })} />
+        <Block
+          label="docker.cpu"
+          value={t("common.percent", { value: statsData.stats.cpuUsage })}
+          highlightValue={statsData.stats.cpuUsage}
+        />
       )) || (
         <Block
           label="docker.cpu"
           value={t("common.number", { value: statsData.stats.cpu, maximumFractionDigits: 4 })}
+          highlightValue={statsData.stats.cpu}
         />
       )}
-      <Block label="docker.mem" value={t("common.bytes", { value: statsData.stats.mem })} />
+      <Block
+        label="docker.mem"
+        value={t("common.bytes", { value: statsData.stats.mem })}
+        highlightValue={statsData.stats.mem}
+      />
     </Container>
   );
 }
diff --git a/src/widgets/mikrotik/component.jsx b/src/widgets/mikrotik/component.jsx
index 4bab67926..fd7365d80 100644
--- a/src/widgets/mikrotik/component.jsx
+++ b/src/widgets/mikrotik/component.jsx
@@ -35,8 +35,16 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="mikrotik.uptime" value={statsData.uptime} />
-      <Block label="mikrotik.cpuLoad" value={t("common.percent", { value: statsData["cpu-load"] })} />
-      <Block label="mikrotik.memoryUsed" value={t("common.percent", { value: memoryUsed })} />
+      <Block
+        label="mikrotik.cpuLoad"
+        value={t("common.percent", { value: statsData["cpu-load"] })}
+        highlightValue={statsData["cpu-load"]}
+      />
+      <Block
+        label="mikrotik.memoryUsed"
+        value={t("common.percent", { value: memoryUsed })}
+        highlightValue={memoryUsed}
+      />
       <Block label="mikrotik.numberOfLeases" value={t("common.number", { value: numberOfLeases })} />
     </Container>
   );
diff --git a/src/widgets/myspeed/component.jsx b/src/widgets/myspeed/component.jsx
index e0967d471..8db5ecd0e 100644
--- a/src/widgets/myspeed/component.jsx
+++ b/src/widgets/myspeed/component.jsx
@@ -54,6 +54,7 @@ export default function Component({ service }) {
           style: "unit",
           unit: "millisecond",
         })}
+        highlightValue={data[0].ping}
       />
     </Container>
   );
diff --git a/src/widgets/nextcloud/component.jsx b/src/widgets/nextcloud/component.jsx
index d1f1cac9b..fe78bf3db 100755
--- a/src/widgets/nextcloud/component.jsx
+++ b/src/widgets/nextcloud/component.jsx
@@ -56,12 +56,23 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       {showCpuLoad && (
-        <Block label="nextcloud.cpuload" value={t("common.percent", { value: nextcloudInfo.system.cpuload[0] })} />
+        <Block
+          label="nextcloud.cpuload"
+          value={t("common.percent", { value: nextcloudInfo.system.cpuload[0] })}
+          highlightValue={nextcloudInfo.system.cpuload[0]}
+        />
+      )}
+      {showMemoryUsage && (
+        <Block
+          label="nextcloud.memoryusage"
+          value={t("common.percent", { value: memoryUsage })}
+          highlightValue={memoryUsage}
+        />
       )}
-      {showMemoryUsage && <Block label="nextcloud.memoryusage" value={t("common.percent", { value: memoryUsage })} />}
       <Block
         label="nextcloud.freespace"
         value={t("common.bbytes", { value: nextcloudInfo.system.freespace, maximumFractionDigits: 1 })}
+        highlightValue={nextcloudInfo.system.freespace}
       />
       <Block label="nextcloud.activeusers" value={t("common.number", { value: activeUsers.last24hours })} />
       <Block label="nextcloud.numfiles" value={t("common.number", { value: nextcloudInfo.storage.num_files })} />
diff --git a/src/widgets/nzbget/component.jsx b/src/widgets/nzbget/component.jsx
index a11ac9da1..401010f8d 100644
--- a/src/widgets/nzbget/component.jsx
+++ b/src/widgets/nzbget/component.jsx
@@ -27,11 +27,20 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="nzbget.rate" value={t("common.byterate", { value: statusData.DownloadRate })} />
-      <Block label="nzbget.remaining" value={t("common.bytes", { value: statusData.RemainingSizeMB * 1024 * 1024 })} />
+      <Block
+        label="nzbget.rate"
+        value={t("common.byterate", { value: statusData.DownloadRate })}
+        highlightValue={statusData.DownloadRate}
+      />
+      <Block
+        label="nzbget.remaining"
+        value={t("common.bytes", { value: statusData.RemainingSizeMB * 1024 * 1024 })}
+        highlightValue={statusData.RemainingSizeMB * 1024 * 1024}
+      />
       <Block
         label="nzbget.downloaded"
         value={t("common.bytes", { value: statusData.DownloadedSizeMB * 1024 * 1024 })}
+        highlightValue={statusData.DownloadedSizeMB * 1024 * 1024}
       />
     </Container>
   );
diff --git a/src/widgets/openwrt/methods/interface.jsx b/src/widgets/openwrt/methods/interface.jsx
index b746bc7e4..99e66ea2d 100644
--- a/src/widgets/openwrt/methods/interface.jsx
+++ b/src/widgets/openwrt/methods/interface.jsx
@@ -21,8 +21,8 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="widget.status" value={up ? t("openwrt.up") : t("openwrt.down")} />
-      <Block label="openwrt.bytesTx" value={t("common.bytes", { value: bytesTx })} />
-      <Block label="openwrt.bytesRx" value={t("common.bytes", { value: bytesRx })} />
+      <Block label="openwrt.bytesTx" value={t("common.bytes", { value: bytesTx })} highlightValue={bytesTx} />
+      <Block label="openwrt.bytesRx" value={t("common.bytes", { value: bytesRx })} highlightValue={bytesRx} />
     </Container>
   );
 }
diff --git a/src/widgets/opnsense/component.jsx b/src/widgets/opnsense/component.jsx
index 1caaab472..17c765fc9 100644
--- a/src/widgets/opnsense/component.jsx
+++ b/src/widgets/opnsense/component.jsx
@@ -36,10 +36,22 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="opnsense.cpu" value={t("common.percent", { value: cpu.toFixed(2) })} />
+      <Block label="opnsense.cpu" value={t("common.percent", { value: cpu.toFixed(2) })} highlightValue={cpu} />
       <Block label="opnsense.memory" value={memory} />
-      {wan && <Block label="opnsense.wanUpload" value={t("common.bytes", { value: wan["bytes transmitted"] })} />}
-      {wan && <Block label="opnsense.wanDownload" value={t("common.bytes", { value: wan["bytes received"] })} />}
+      {wan && (
+        <Block
+          label="opnsense.wanUpload"
+          value={t("common.bytes", { value: wan["bytes transmitted"] })}
+          highlightValue={wan["bytes transmitted"]}
+        />
+      )}
+      {wan && (
+        <Block
+          label="opnsense.wanDownload"
+          value={t("common.bytes", { value: wan["bytes received"] })}
+          highlightValue={wan["bytes received"]}
+        />
+      )}
     </Container>
   );
 }
diff --git a/src/widgets/peanut/component.jsx b/src/widgets/peanut/component.jsx
index 54a293adb..f2c8491dd 100644
--- a/src/widgets/peanut/component.jsx
+++ b/src/widgets/peanut/component.jsx
@@ -52,8 +52,16 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="peanut.battery_charge" value={t("common.percent", { value: upsData.battery_charge })} />
-      <Block label="peanut.ups_load" value={t("common.percent", { value: upsData.ups_load })} />
+      <Block
+        label="peanut.battery_charge"
+        value={t("common.percent", { value: upsData.battery_charge })}
+        highlightValue={upsData.battery_charge}
+      />
+      <Block
+        label="peanut.ups_load"
+        value={t("common.percent", { value: upsData.ups_load })}
+        highlightValue={upsData.ups_load}
+      />
       <Block label="peanut.ups_status" value={status} />
     </Container>
   );
diff --git a/src/widgets/pfsense/component.jsx b/src/widgets/pfsense/component.jsx
index 69a862b44..06285ed78 100644
--- a/src/widgets/pfsense/component.jsx
+++ b/src/widgets/pfsense/component.jsx
@@ -51,14 +51,25 @@ export default function Component({ service }) {
         label="pfsense.load"
         value={version === 1 ? systemData.data.load_avg[0] : systemData.data.cpu_load_avg[0]}
       />
-      <Block label="pfsense.memory" value={t("common.percent", { value: memUsage.toFixed(2) })} />
+      <Block
+        label="pfsense.memory"
+        value={t("common.percent", { value: memUsage.toFixed(2) })}
+        highlightValue={memUsage}
+      />
       <Block
         label="pfsense.temp"
         value={t("common.number", { value: systemData.data.temp_c, style: "unit", unit: "celsius" })}
+        highlightValue={systemData.data.temp_c}
       />
       <Block label="pfsense.wanStatus" value={wan.status === "up" ? t("pfsense.up") : t("pfsense.down")} />
       {showWanIP && <Block label="pfsense.wanIP" value={wan.ipaddr} />}
-      {showDiskUsage && <Block label="pfsense.disk" value={t("common.percent", { value: diskUsage.toFixed(2) })} />}
+      {showDiskUsage && (
+        <Block
+          label="pfsense.disk"
+          value={t("common.percent", { value: diskUsage.toFixed(2) })}
+          highlightValue={diskUsage}
+        />
+      )}
     </Container>
   );
 }
diff --git a/src/widgets/proxmox/component.jsx b/src/widgets/proxmox/component.jsx
index 51762a737..ddab5bc51 100644
--- a/src/widgets/proxmox/component.jsx
+++ b/src/widgets/proxmox/component.jsx
@@ -67,8 +67,16 @@ export default function Component({ service }) {
     <Container service={service}>
       <Block label="proxmox.vms" value={`${runningVMs} / ${vms.length}`} />
       <Block label="proxmox.lxc" value={`${runningLXC} / ${lxc.length}`} />
-      <Block label="resources.cpu" value={t("common.percent", { value: (usedCpu / maxCpu) * 100 })} />
-      <Block label="resources.mem" value={t("common.percent", { value: (usedMemory / maxMemory) * 100 })} />
+      <Block
+        label="resources.cpu"
+        value={t("common.percent", { value: (usedCpu / maxCpu) * 100 })}
+        highlightValue={(usedCpu / maxCpu) * 100}
+      />
+      <Block
+        label="resources.mem"
+        value={t("common.percent", { value: (usedMemory / maxMemory) * 100 })}
+        highlightValue={(usedMemory / maxMemory) * 100}
+      />
     </Container>
   );
 }
diff --git a/src/widgets/proxmoxbackupserver/component.jsx b/src/widgets/proxmoxbackupserver/component.jsx
index b13f87565..0af1134be 100644
--- a/src/widgets/proxmoxbackupserver/component.jsx
+++ b/src/widgets/proxmoxbackupserver/component.jsx
@@ -47,10 +47,22 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="proxmoxbackupserver.datastore_usage" value={t("common.percent", { value: datastoreUsage })} />
+      <Block
+        label="proxmoxbackupserver.datastore_usage"
+        value={t("common.percent", { value: datastoreUsage })}
+        highlightValue={datastoreUsage}
+      />
       <Block label="proxmoxbackupserver.failed_tasks_24h" value={failedTasks} />
-      <Block label="proxmoxbackupserver.cpu_usage" value={t("common.percent", { value: cpuUsage })} />
-      <Block label="proxmoxbackupserver.memory_usage" value={t("common.percent", { value: memoryUsage })} />
+      <Block
+        label="proxmoxbackupserver.cpu_usage"
+        value={t("common.percent", { value: cpuUsage })}
+        highlightValue={cpuUsage}
+      />
+      <Block
+        label="proxmoxbackupserver.memory_usage"
+        value={t("common.percent", { value: memoryUsage })}
+        highlightValue={memoryUsage}
+      />
     </Container>
   );
 }
diff --git a/src/widgets/proxmoxvm/component.jsx b/src/widgets/proxmoxvm/component.jsx
index 75593642c..4cc0f8730 100644
--- a/src/widgets/proxmoxvm/component.jsx
+++ b/src/widgets/proxmoxvm/component.jsx
@@ -25,8 +25,12 @@ export default function ProxmoxVM({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="resources.cpu" value={t("common.percent", { value: data.cpu * 100 })} />
-      <Block label="resources.mem" value={t("common.bytes", { value: data.mem })} />
+      <Block
+        label="resources.cpu"
+        value={t("common.percent", { value: data.cpu * 100 })}
+        highlightValue={data.cpu * 100}
+      />
+      <Block label="resources.mem" value={t("common.bytes", { value: data.mem })} highlightValue={data.mem} />
     </Container>
   );
 }
diff --git a/src/widgets/pyload/component.jsx b/src/widgets/pyload/component.jsx
index f618f75e5..13ee32a92 100644
--- a/src/widgets/pyload/component.jsx
+++ b/src/widgets/pyload/component.jsx
@@ -26,7 +26,11 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="pyload.speed" value={t("common.byterate", { value: pyloadData.speed })} />
+      <Block
+        label="pyload.speed"
+        value={t("common.byterate", { value: pyloadData.speed })}
+        highlightValue={pyloadData.speed}
+      />
       <Block label="pyload.active" value={t("common.number", { value: pyloadData.active })} />
       <Block label="pyload.queue" value={t("common.number", { value: pyloadData.queue })} />
       <Block label="pyload.total" value={t("common.number", { value: pyloadData.total })} />
diff --git a/src/widgets/qbittorrent/component.jsx b/src/widgets/qbittorrent/component.jsx
index 73dfacb5c..0f0fa3af3 100644
--- a/src/widgets/qbittorrent/component.jsx
+++ b/src/widgets/qbittorrent/component.jsx
@@ -74,9 +74,17 @@ export default function Component({ service }) {
     <>
       <Container service={service}>
         <Block label="qbittorrent.leech" value={t("common.number", { value: leech })} />
-        <Block label="qbittorrent.download" value={t("common.bibyterate", { value: rateDl, decimals: 1 })} />
+        <Block
+          label="qbittorrent.download"
+          value={t("common.bibyterate", { value: rateDl, decimals: 1 })}
+          highlightValue={rateDl}
+        />
         <Block label="qbittorrent.seed" value={t("common.number", { value: completedCount })} />
-        <Block label="qbittorrent.upload" value={t("common.bibyterate", { value: rateUl, decimals: 1 })} />
+        <Block
+          label="qbittorrent.upload"
+          value={t("common.bibyterate", { value: rateUl, decimals: 1 })}
+          highlightValue={rateUl}
+        />
       </Container>
       {widget?.enableLeechProgress &&
         leechTorrents.map((queueEntry) => (
diff --git a/src/widgets/rutorrent/component.jsx b/src/widgets/rutorrent/component.jsx
index 245a786cb..8f744b520 100644
--- a/src/widgets/rutorrent/component.jsx
+++ b/src/widgets/rutorrent/component.jsx
@@ -34,8 +34,8 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="rutorrent.active" value={active.length} />
-      <Block label="rutorrent.upload" value={t("common.byterate", { value: upload })} />
-      <Block label="rutorrent.download" value={t("common.byterate", { value: download })} />
+      <Block label="rutorrent.upload" value={t("common.byterate", { value: upload })} highlightValue={upload} />
+      <Block label="rutorrent.download" value={t("common.byterate", { value: download })} highlightValue={download} />
     </Container>
   );
 }
diff --git a/src/widgets/speedtest/component.jsx b/src/widgets/speedtest/component.jsx
index 7be00aa22..bc579b76a 100644
--- a/src/widgets/speedtest/component.jsx
+++ b/src/widgets/speedtest/component.jsx
@@ -54,6 +54,7 @@ export default function Component({ service }) {
           style: "unit",
           unit: "millisecond",
         })}
+        highlightValue={speedtestData.data.ping}
       />
     </Container>
   );
diff --git a/src/widgets/strelaysrv/component.jsx b/src/widgets/strelaysrv/component.jsx
index 026e19b70..e79345c42 100644
--- a/src/widgets/strelaysrv/component.jsx
+++ b/src/widgets/strelaysrv/component.jsx
@@ -29,10 +29,15 @@ export default function Component({ service }) {
     <Container service={service}>
       <Block label="strelaysrv.numActiveSessions" value={t("common.number", { value: statsData.numActiveSessions })} />
       <Block label="strelaysrv.numConnections" value={t("common.number", { value: statsData.numConnections })} />
-      <Block label="strelaysrv.dataRelayed" value={t("common.bytes", { value: statsData.bytesProxied })} />
+      <Block
+        label="strelaysrv.dataRelayed"
+        value={t("common.bytes", { value: statsData.bytesProxied })}
+        highlightValue={statsData.bytesProxied}
+      />
       <Block
         label="strelaysrv.transferRate"
         value={t("common.bitrate", { value: statsData.kbps10s1m5m15m30m60m[5] })}
+        highlightValue={statsData.kbps10s1m5m15m30m60m[5]}
       />
     </Container>
   );
diff --git a/src/widgets/tdarr/component.jsx b/src/widgets/tdarr/component.jsx
index 824a56b34..9dbc7e4de 100644
--- a/src/widgets/tdarr/component.jsx
+++ b/src/widgets/tdarr/component.jsx
@@ -46,7 +46,7 @@ export default function Component({ service }) {
       <Block label="tdarr.queue" value={t("common.number", { value: queue })} />
       <Block label="tdarr.processed" value={t("common.number", { value: processed })} />
       <Block label="tdarr.errored" value={t("common.number", { value: errored })} />
-      <Block label="tdarr.saved" value={t("common.bytes", { value: saved })} />
+      <Block label="tdarr.saved" value={t("common.bytes", { value: saved })} highlightValue={saved} />
     </Container>
   );
 }
diff --git a/src/widgets/transmission/component.jsx b/src/widgets/transmission/component.jsx
index 474fe69f8..06b549513 100644
--- a/src/widgets/transmission/component.jsx
+++ b/src/widgets/transmission/component.jsx
@@ -36,9 +36,9 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="transmission.leech" value={t("common.number", { value: leech })} />
-      <Block label="transmission.download" value={t("common.byterate", { value: rateDl })} />
+      <Block label="transmission.download" value={t("common.byterate", { value: rateDl })} highlightValue={rateDl} />
       <Block label="transmission.seed" value={t("common.number", { value: completed })} />
-      <Block label="transmission.upload" value={t("common.byterate", { value: rateUl })} />
+      <Block label="transmission.upload" value={t("common.byterate", { value: rateUl })} highlightValue={rateUl} />
     </Container>
   );
 }
diff --git a/src/widgets/unraid/component.jsx b/src/widgets/unraid/component.jsx
index f7b8dc5ca..1d90f34bc 100644
--- a/src/widgets/unraid/component.jsx
+++ b/src/widgets/unraid/component.jsx
@@ -58,35 +58,59 @@ export default function Component({ service }) {
   return (
     <Container service={service}>
       <Block label="unraid.status" value={t(`unraid.${data.arrayState}`)} />
-      <Block label="unraid.memoryAvailable" value={t("common.bbytes", { value: data.memoryAvailable })} />
-      <Block label="unraid.memoryUsed" value={t("common.bbytes", { value: data.memoryUsed })} />
+      <Block
+        label="unraid.memoryAvailable"
+        value={t("common.bbytes", { value: data.memoryAvailable })}
+        highlightValue={data.memoryAvailable}
+      />
+      <Block
+        label="unraid.memoryUsed"
+        value={t("common.bbytes", { value: data.memoryUsed })}
+        highlightValue={data.memoryUsed}
+      />
       <Block
         field="unraid.memoryPercent"
         label="unraid.memoryUsed"
         value={t("common.percent", { value: data.memoryUsedPercent })}
+        highlightValue={data.memoryUsedPercent}
+      />
+      <Block
+        label="unraid.cpu"
+        value={t("common.percent", { value: data.cpuPercent })}
+        highlightValue={data.cpuPercent}
       />
-      <Block label="unraid.cpu" value={t("common.percent", { value: data.cpuPercent })} />
       <Block label="unraid.notifications" value={t("common.number", { value: data.unreadNotifications })} />
       <Block
         field="unraid.arrayUsedSpace"
         label="unraid.arrayUsed"
         value={t("common.bytes", { value: data.arrayUsed })}
+        highlightValue={data.arrayUsed}
+      />
+      <Block
+        label="unraid.arrayFree"
+        value={t("common.bytes", { value: data.arrayFree })}
+        highlightValue={data.arrayFree}
       />
-      <Block label="unraid.arrayFree" value={t("common.bytes", { value: data.arrayFree })} />
       <Block
         field="unraid.arrayUsedPercent"
         label="unraid.arrayUsed"
         value={t("common.percent", { value: data.arrayUsedPercent })}
+        highlightValue={data.arrayUsedPercent}
       />
       {...POOLS.flatMap((pool) =>
-        POOL_FIELDS.map(({ param, label, valueKey, valueType }) => (
-          <Block
-            key={`${pool}-${param}`}
-            field={`unraid.${pool}${param}`}
-            label={t(`unraid.${label}`, { pool: widget?.[pool] || pool })}
-            value={t(valueType, { value: data.caches?.[widget?.[pool]]?.[valueKey] || "-" })}
-          />
-        )),
+        POOL_FIELDS.map(({ param, label, valueKey, valueType }) => {
+          const poolValue = data.caches?.[widget?.[pool]]?.[valueKey] || "-";
+
+          return (
+            <Block
+              key={`${pool}-${param}`}
+              field={`unraid.${pool}${param}`}
+              label={t(`unraid.${label}`, { pool: widget?.[pool] || pool })}
+              value={t(valueType, { value: poolValue })}
+              highlightValue={poolValue}
+            />
+          );
+        }),
       )}
     </Container>
   );
diff --git a/src/widgets/uptimekuma/component.jsx b/src/widgets/uptimekuma/component.jsx
index e8a42e48f..a660a417d 100644
--- a/src/widgets/uptimekuma/component.jsx
+++ b/src/widgets/uptimekuma/component.jsx
@@ -50,7 +50,7 @@ export default function Component({ service }) {
     <Container service={service}>
       <Block label="uptimekuma.up" value={t("common.number", { value: sitesUp })} />
       <Block label="uptimekuma.down" value={t("common.number", { value: sitesDown })} />
-      <Block label="uptimekuma.uptime" value={t("common.percent", { value: uptime })} />
+      <Block label="uptimekuma.uptime" value={t("common.percent", { value: uptime })} highlightValue={Number(uptime)} />
       {incidentTime && (
         <Block
           label="uptimekuma.incident"