More percents

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

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

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

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

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

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

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

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"