mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-19 05:45:01 -04:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1610] Fix overview devices graph render (#2576)

Browse Source 
Fix overview devices graph render
This commit is contained in:
ameer2468
2024-07-01 18:41:43 +03:00
committed by GitHub
parent 4eadb0de25
commit 08a3b8b015
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
interface/app/$libraryId/overview/StatCard.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { humanizeSize } from '@sd/client';
import { Card, CircularProgress, tw } from '@sd/ui';
import { Card, CircularProgress, cva, tw } from '@sd/ui';
import { Icon } from '~/components';
import { useIsDark, useLocale } from '~/hooks';
@@ -20,14 +20,23 @@ 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);
const { totalSpace, freeSpace, usedSpaceSpace } = useMemo(() => {
const totalSpace = humanizeSize(stats.totalSpace);
// Returns the value in thousands format
const totalSpace = humanizeSize(stats.totalSpace, {
return_thousands: true
});
const freeSpace = stats.freeSpace == null ? totalSpace : humanizeSize(stats.freeSpace);
return {
totalSpace,
freeSpace,
usedSpaceSpace: humanizeSize(totalSpace.bytes - freeSpace.bytes)
};
}, [stats]);
useEffect(() => {
@@ -50,7 +59,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
progress={progress}
strokeWidth={6}
trackStrokeWidth={6}
strokeColor={progress > 90 ? '#E14444' : '#2599FF'}
strokeColor={progress >= 90 ? '#E14444' : progress >= 75 ? 'darkorange' : progress >= 60 ? 'yellow' : '#2599FF'}
fillColor="transparent"
trackStrokeColor={isDark ? '#252631' : '#efefef'}
strokeLinecap="square"
@@ -76,7 +85,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
{freeSpace.value !== totalSpace.value && (
<>
{freeSpace.value} {t(`size_${freeSpace.unit.toLowerCase()}`)}{' '}
{t('free_of')} {totalSpace.value}{' '}
{t('free_of')} {totalSpaceSingle.value}{' '}
{t(`size_${totalSpace.unit.toLowerCase()}`)}
</>
)}

7
packages/client/src/lib/humanizeSize.ts
View File

@@ -86,6 +86,7 @@ export interface ByteSizeOpts {
precision?: number;
base_unit?: 'decimal' | 'binary';
use_plural?: boolean;
return_thousands?: boolean;
}
/**
@@ -98,6 +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`.
*/
export const humanizeSize = (
value: null | string | number | bigint | string[] | number[] | bigint[] | undefined,
@@ -106,7 +108,8 @@ export const humanizeSize = (
precision = 1,
locales,
base_unit = 'decimal',
use_plural = true
use_plural = true,
return_thousands = false
}: ByteSizeOpts = {}
) => {
if (value == null) value = 0n;
@@ -139,7 +142,7 @@ export const humanizeSize = (
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) * value,
value: (isNegative ? -1 : 1) * (return_thousands ? value * 1000 : value),
toString() {
return `${defaultFormat.format(this.value)} ${this.unit}${plural}`;
}