Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 13:23:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed used space calculation for statCard

Browse source
This commit is contained in:
myung03 2024-05-14 17:01:05 -07:00
parent 4181fd7869
commit f566dd6106
2 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
interface/app/$libraryId/overview/StatCard.tsx
View file

@ -20,29 +20,35 @@ const Pill = tw.div`px-1.5 py-[1px] rounded text-tiny font-medium text-ink-dull
const StatCard = ({ icon, name, devices, connectionType, ...stats }: StatCardProps) => {
const [mounted, setMounted] = useState(false);
const isDark = useIsDark();
const { totalSpace, freeSpace, usedSpaceSpace } = useMemo(() => {
const { totalSpace, freeSpace, usedSpace } = useMemo(() => {
const totalSpace = humanizeSize(stats.totalSpace);
const freeSpace = stats.freeSpace == null ? totalSpace : humanizeSize(stats.freeSpace);
const usedSpaceCalculation = humanizeSize(totalSpace.value - freeSpace.value);
return {
totalSpace,
freeSpace,
usedSpaceSpace: humanizeSize(totalSpace.original - freeSpace.original)
usedSpace: usedSpaceCalculation,
};
}, [stats]);
}, [stats]);
useEffect(() => {
setMounted(true);
}, []);
usedSpace.unit = humanizeSize(Number(stats.totalSpace) - Number(stats.freeSpace)).unit;
const progress = useMemo(() => {
if (!mounted || totalSpace.original === 0) return 0;
return Math.floor((usedSpaceSpace.value / totalSpace.value) * 100);
}, [mounted, totalSpace, usedSpaceSpace]);
return Math.floor((usedSpace.value / totalSpace.value) * 100);
}, [mounted, totalSpace, usedSpace]);
const { t } = useLocale();
return (
<Card className="flex w-[280px] shrink-0 flex-col bg-app-box/50 !p-0 ">
<div className="max-h-28 flex flex-row items-center gap-5 p-4 px-6">
@ -60,9 +66,9 @@ const StatCard = ({ icon, name, devices, connectionType, ...stats }: StatCardPro
transition="stroke-dashoffset 1s ease 0s, stroke 1s ease"
>
<div className="absolute text-lg font-semibold">
{usedSpaceSpace.value}
{usedSpace.value}
<span className="ml-0.5 text-tiny opacity-60">
{usedSpaceSpace.unit}
{usedSpace.unit}
</span>
</div>
</CircularProgress>

3
interface/app/$libraryId/overview/index.tsx
View file

@ -3,8 +3,6 @@ import { useBridgeQuery, useLibraryQuery } from '@sd/client';
import { useLocale, useOperatingSystem } from '~/hooks';
import { useRouteTitle } from '~/hooks/useRouteTitle';
import { hardwareModelToIcon } from '~/util/hardware';
import { Resizable } from '@sd/ui';
import { SearchContextProvider, useSearchFromSearchParams } from '../search';
import SearchBar from '../search/SearchBar';
import { AddLocationButton } from '../settings/library/locations/AddLocationButton';
@ -76,6 +74,7 @@ export const Component = () => {
/>
<div className="mt-4 flex flex-col gap-3 pt-3">
<OverviewSection>
<LibraryStatistics></LibraryStatistics>
</OverviewSection>
<OverviewSection>
<FileKindStatistics />