fix: hostd metrics data add decimals

SiaFoundation · Feb 26, 2024 · 7888669 · 7888669
1 parent df37738
commit 7888669
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 15 deletions.
diff --git a/.changeset/cold-fireants-flash.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,15 +23,16 @@ type Props = {
     diff: number
     change: number
   }
+  scFixed?: number
   value?: {
     total: number
     average: number
     latest: number
     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
@@ -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 && (