From d141f46a308e518b227637418e88399cbd8673a1 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 16 Mar 2026 18:39:26 -0700
Subject: [PATCH] percents, bytes

---
 src/widgets/docker/component.jsx              | 10 ++--
 src/widgets/dockhand/component.jsx            | 12 ++++-
 src/widgets/kubernetes/component.jsx          | 13 ++++-
 src/widgets/proxmox/component.jsx             | 12 ++++-
 src/widgets/proxmoxbackupserver/component.jsx | 18 +++++--
 src/widgets/proxmoxvm/component.jsx           |  8 +++-
 src/widgets/unraid/component.jsx              | 48 ++++++++++++++-----
 7 files changed, 94 insertions(+), 27 deletions(-)

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/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/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/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>
   );