From 78886693b9c67a1e92b16cd750242c66efc9187f Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Mon, 26 Feb 2024 11:05:43 -0500
Subject: [PATCH] fix: hostd metrics data add decimals

---
 .changeset/cold-fireants-flash.md                   |  6 ++++++
 apps/hostd/components/Home/HomeBandwidth.tsx        |  4 ++--
 apps/hostd/components/Home/HomeContracts.tsx        |  6 +++---
 apps/hostd/components/Home/HomeOperations.tsx       |  4 ++--
 apps/hostd/components/Home/HomeStorage.tsx          |  6 +++---
 .../design-system/src/app/DatumCardConfigurable.tsx | 13 +++++++++----
 libs/design-system/src/components/DatumCard.tsx     |  4 +++-
 7 files changed, 28 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/cold-fireants-flash.md

diff --git a/.changeset/cold-fireants-flash.md b/.changeset/cold-fireants-flash.md
new file mode 100644
index 000000000..8cadc7ed9
--- /dev/null
+++ b/.changeset/cold-fireants-flash.md
@@ -0,0 +1,6 @@
+---
+'hostd': minor
+---
+
+Siacoin metric cards now show the dynamic units with two decimal places. Closes https://github.com/SiaFoundation/hostd/issues/217
+
diff --git a/apps/hostd/components/Home/HomeBandwidth.tsx b/apps/hostd/components/Home/HomeBandwidth.tsx
index 97c3a7358..dec277fc0 100644
--- a/apps/hostd/components/Home/HomeBandwidth.tsx
+++ b/apps/hostd/components/Home/HomeBandwidth.tsx
@@ -21,7 +21,7 @@ export function HomeBandwidth() {
           value={bandwidth.stats['ingress']}
           defaultMode="total"
           isLoading={bandwidth.isLoading}
-          format={humanBytes}
+          valueFormat={humanBytes}
         />
         <DatumCardConfigurable
           category="bandwidth"
@@ -30,7 +30,7 @@ export function HomeBandwidth() {
           value={bandwidth.stats['egress']}
           defaultMode="total"
           isLoading={bandwidth.isLoading}
-          format={humanBytes}
+          valueFormat={humanBytes}
         />
       </DatumScrollArea>
       <ChartXY
diff --git a/apps/hostd/components/Home/HomeContracts.tsx b/apps/hostd/components/Home/HomeContracts.tsx
index b9399ca92..de85a3742 100644
--- a/apps/hostd/components/Home/HomeContracts.tsx
+++ b/apps/hostd/components/Home/HomeContracts.tsx
@@ -19,7 +19,7 @@ export function HomeContracts() {
           label="Active contracts"
           color={contracts.config.data['active'].color}
           value={contracts.stats['active']}
-          format={(v) => v.toFixed(0)}
+          valueFormat={(v) => v.toFixed(0)}
           defaultMode="latest"
           isLoading={contracts.isLoading}
           enabledModes={['latest', 'average']}
@@ -29,7 +29,7 @@ export function HomeContracts() {
           label="Successful contracts"
           color={contracts.config.data['successful'].color}
           value={contracts.stats['successful']}
-          format={(v) => v.toFixed(0)}
+          valueFormat={(v) => v.toFixed(0)}
           defaultMode="latest"
           isLoading={contracts.isLoading}
           enabledModes={['latest', 'average']}
@@ -39,7 +39,7 @@ export function HomeContracts() {
           label="Failed contracts"
           color={contracts.config.data['failed'].color}
           value={contracts.stats['failed']}
-          format={(v) => v.toFixed(0)}
+          valueFormat={(v) => v.toFixed(0)}
           defaultMode="latest"
           isLoading={contracts.isLoading}
           enabledModes={['latest', 'average']}
diff --git a/apps/hostd/components/Home/HomeOperations.tsx b/apps/hostd/components/Home/HomeOperations.tsx
index 10d8a657a..6c8c66169 100644
--- a/apps/hostd/components/Home/HomeOperations.tsx
+++ b/apps/hostd/components/Home/HomeOperations.tsx
@@ -23,7 +23,7 @@ export function HomeOperations() {
             defaultMode="total"
             isLoading={operations.isLoading}
             enabledModes={['total', 'average', 'latest']}
-            format={humanNumber}
+            valueFormat={humanNumber}
           />
           <DatumCardConfigurable
             category="operations"
@@ -33,7 +33,7 @@ export function HomeOperations() {
             defaultMode="total"
             isLoading={operations.isLoading}
             enabledModes={['total', 'average', 'latest']}
-            format={humanNumber}
+            valueFormat={humanNumber}
           />
         </DatumScrollArea>
         <ChartXY
diff --git a/apps/hostd/components/Home/HomeStorage.tsx b/apps/hostd/components/Home/HomeStorage.tsx
index 9da9edad5..a770ea3bd 100644
--- a/apps/hostd/components/Home/HomeStorage.tsx
+++ b/apps/hostd/components/Home/HomeStorage.tsx
@@ -22,7 +22,7 @@ export function HomeStorage() {
           defaultMode="latest"
           isLoading={storage.isLoading}
           enabledModes={['latest', 'average']}
-          format={humanBytes}
+          valueFormat={humanBytes}
         />
         <DatumCardConfigurable
           category="storage"
@@ -32,7 +32,7 @@ export function HomeStorage() {
           defaultMode="latest"
           isLoading={storage.isLoading}
           enabledModes={['latest', 'average']}
-          format={humanBytes}
+          valueFormat={humanBytes}
         />
         <DatumCardConfigurable
           category="storage"
@@ -42,7 +42,7 @@ export function HomeStorage() {
           defaultMode="latest"
           isLoading={storage.isLoading}
           enabledModes={['latest', 'average']}
-          format={humanBytes}
+          valueFormat={humanBytes}
         />
       </DatumScrollArea>
       <ChartXY
diff --git a/libs/design-system/src/app/DatumCardConfigurable.tsx b/libs/design-system/src/app/DatumCardConfigurable.tsx
index f1b7cf66c..66910e19f 100644
--- a/libs/design-system/src/app/DatumCardConfigurable.tsx
+++ b/libs/design-system/src/app/DatumCardConfigurable.tsx
@@ -23,6 +23,7 @@ type Props = {
     diff: number
     change: number
   }
+  scFixed?: number
   value?: {
     total: number
     average: number
@@ -30,8 +31,8 @@ type Props = {
     diff: number
     change: number
   }
+  valueFormat?: (val: number) => string
   extendedSuffix?: string
-  format?: (val: number) => string
   defaultMode: Mode
   enabledModes?: Mode[]
   showChange?: boolean
@@ -49,9 +50,10 @@ export function DatumCardConfigurable({
   label,
   color,
   sc,
+  scFixed = 2,
   value,
   extendedSuffix,
-  format = (val) => val.toFixed(2),
+  valueFormat = (val) => val.toFixed(2),
   defaultMode,
   enabledModes = ['total', 'average', 'latest'],
   isLoading,
@@ -80,9 +82,12 @@ export function DatumCardConfigurable({
         </Select>
       }
       sc={sc?.[mode] !== undefined ? new BigNumber(sc[mode]) : undefined}
+      scFixed={scFixed}
       extendedSuffix={extendedSuffix}
       value={
-        value?.[mode] !== undefined && format ? format(value[mode]) : undefined
+        value?.[mode] !== undefined && valueFormat
+          ? valueFormat(value[mode])
+          : undefined
       }
       comment={
         sc ? (
@@ -111,7 +116,7 @@ export function DatumCardConfigurable({
             <div className="flex items-center gap-4">
               <ValueNum
                 tooltip="Net change over time range:"
-                format={(val) => format(val.toNumber())}
+                format={(val) => valueFormat(val.toNumber())}
                 value={new BigNumber(value.diff)}
               />
               {showChange && value.change !== undefined && (
diff --git a/libs/design-system/src/components/DatumCard.tsx b/libs/design-system/src/components/DatumCard.tsx
index 94332c60c..79bfb1d7e 100644
--- a/libs/design-system/src/components/DatumCard.tsx
+++ b/libs/design-system/src/components/DatumCard.tsx
@@ -20,6 +20,7 @@ type Props = {
   entityType?: EntityType
   entityValue?: string
   sc?: BigNumber
+  scFixed?: number
   sf?: number
   comment?: React.ReactNode
   commentTip?: React.ReactNode
@@ -39,6 +40,7 @@ export function DatumCard({
   extendedSuffix,
   hash,
   sc,
+  scFixed = 2,
   sf,
   comment,
   commentTip,
@@ -77,7 +79,7 @@ export function DatumCard({
                     scaleSize={scaleSize}
                     variant="value"
                     value={sc}
-                    fixed={0}
+                    fixed={scFixed}
                   />
                 )}
                 {sf !== undefined && (