From 08a3b8b015f20517bf7643a3d697a16eaf7e122e Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Mon, 1 Jul 2024 18:41:43 +0300
Subject: [PATCH] [ENG-1610] Fix overview devices graph render (#2576)

Fix overview devices graph render
---
 .../app/$libraryId/overview/StatCard.tsx      | 19 ++++++++++++++-----
 packages/client/src/lib/humanizeSize.ts       |  7 +++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/interface/app/$libraryId/overview/StatCard.tsx b/interface/app/$libraryId/overview/StatCard.tsx
index fba54bccf..75460cb9e 100644
--- a/interface/app/$libraryId/overview/StatCard.tsx
+++ b/interface/app/$libraryId/overview/StatCard.tsx
@@ -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()}`)}
 							</>
 						)}
diff --git a/packages/client/src/lib/humanizeSize.ts b/packages/client/src/lib/humanizeSize.ts
index 0da066abc..43c6328e6 100644
--- a/packages/client/src/lib/humanizeSize.ts
+++ b/packages/client/src/lib/humanizeSize.ts
@@ -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}`;
 		}