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} /> 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} /> 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({ } 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({
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 && (