Quick sizing handling fix (#2577)

* quick fix and improvement

* edge case

* edge case
This commit is contained in:
ameer2468 2024-07-02 00:41:43 +03:00 committed by GitHub
parent 28f98fd550
commit b9ccf3540b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 12 deletions

View file

@ -1,6 +1,6 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { humanizeSize } from '@sd/client';
import { Card, CircularProgress, cva, tw } from '@sd/ui';
import { Card, CircularProgress, tw } from '@sd/ui';
import { Icon } from '~/components';
import { useIsDark, useLocale } from '~/hooks';
@ -20,17 +20,16 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
const isDark = useIsDark();
// Returns the value in a simpler form and unit i.e 2.5 TB
const totalSpaceSingle = humanizeSize(stats.totalSpace);
//TODO: Improve this
const totalSpaceSingleValue = humanizeSize(stats.totalSpace);
const { totalSpace, freeSpace, usedSpaceSpace } = useMemo(() => {
// Returns the value in thousands format
const totalSpace = humanizeSize(stats.totalSpace, {
return_thousands: true
no_thousands: false
});
const freeSpace = stats.freeSpace == null ? totalSpace : humanizeSize(stats.freeSpace);
return {
totalSpace,
freeSpace,
@ -85,7 +84,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
{freeSpace.value !== totalSpace.value && (
<>
{freeSpace.value} {t(`size_${freeSpace.unit.toLowerCase()}`)}{' '}
{t('free_of')} {totalSpaceSingle.value}{' '}
{t('free_of')} {totalSpaceSingleValue.value}{' '}
{t(`size_${totalSpace.unit.toLowerCase()}`)}
</>
)}

View file

@ -86,7 +86,7 @@ export interface ByteSizeOpts {
precision?: number;
base_unit?: 'decimal' | 'binary';
use_plural?: boolean;
return_thousands?: boolean;
no_thousands?: boolean;
}
/**
@ -99,7 +99,7 @@ export interface ByteSizeOpts {
* @param options.precision - Number of decimal places. Defaults to `1`.
* @param options.base_unit - The base unit to use. Defaults to `'decimal'`.
* @param options.use_plural - Use plural unit names when necessary. Defaults to `true`.
* @param options.return_thousands - Return the value in thousands. Defaults to `false`.
* @param options.no_thousands - Do not convert TB to thousands. Defaults to `true`.
*/
export const humanizeSize = (
value: null | string | number | bigint | string[] | number[] | bigint[] | undefined,
@ -109,7 +109,7 @@ export const humanizeSize = (
locales,
base_unit = 'decimal',
use_plural = true,
return_thousands = false
no_thousands = true
}: ByteSizeOpts = {}
) => {
if (value == null) value = 0n;
@ -138,11 +138,18 @@ export const humanizeSize = (
: Number((bytes * BigInt(precisionFactor)) / unit.from) / precisionFactor;
const plural = use_plural && value !== 1 ? 's' : '';
//TODO: Improve this
// Convert to thousands when short is TB to show correct progress value
//i.e 2.5 TB = 2500
if (unit.short === "TB" && !no_thousands) {
value = value * 1000;
}
return {
unit: is_bit ? BYTE_TO_BIT[unit.short as keyof typeof BYTE_TO_BIT] : unit.short,
long: is_bit ? BYTE_TO_BIT[unit.long as keyof typeof BYTE_TO_BIT] : unit.long,
bytes,
value: (isNegative ? -1 : 1) * (return_thousands ? value * 1000 : value),
value: (isNegative ? -1 : 1) * value,
toString() {
return `${defaultFormat.format(this.value)} ${this.unit}${plural}`;
}