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

View file

@ -86,7 +86,7 @@ export interface ByteSizeOpts {
precision?: number; precision?: number;
base_unit?: 'decimal' | 'binary'; base_unit?: 'decimal' | 'binary';
use_plural?: boolean; 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.precision - Number of decimal places. Defaults to `1`.
* @param options.base_unit - The base unit to use. Defaults to `'decimal'`. * @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.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 = ( export const humanizeSize = (
value: null | string | number | bigint | string[] | number[] | bigint[] | undefined, value: null | string | number | bigint | string[] | number[] | bigint[] | undefined,
@ -109,7 +109,7 @@ export const humanizeSize = (
locales, locales,
base_unit = 'decimal', base_unit = 'decimal',
use_plural = true, use_plural = true,
return_thousands = false no_thousands = true
}: ByteSizeOpts = {} }: ByteSizeOpts = {}
) => { ) => {
if (value == null) value = 0n; if (value == null) value = 0n;
@ -138,11 +138,18 @@ export const humanizeSize = (
: Number((bytes * BigInt(precisionFactor)) / unit.from) / precisionFactor; : Number((bytes * BigInt(precisionFactor)) / unit.from) / precisionFactor;
const plural = use_plural && value !== 1 ? 's' : ''; 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 { return {
unit: is_bit ? BYTE_TO_BIT[unit.short as keyof typeof BYTE_TO_BIT] : unit.short, 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, long: is_bit ? BYTE_TO_BIT[unit.long as keyof typeof BYTE_TO_BIT] : unit.long,
bytes, bytes,
value: (isNegative ? -1 : 1) * (return_thousands ? value * 1000 : value), value: (isNegative ? -1 : 1) * value,
toString() { toString() {
return `${defaultFormat.format(this.value)} ${this.unit}${plural}`; return `${defaultFormat.format(this.value)} ${this.unit}${plural}`;
} }