From ef76a32c153bedf8c91e9a9b3a65d8c3291869a2 Mon Sep 17 00:00:00 2001
From: pacholoamit <pacholoamit.tech@gmail.com>
Date: Sun, 13 Oct 2024 09:40:32 +0800
Subject: [PATCH] feat: Add formatStats util function

---
 .../metrics/components/memory/memory.area-chart.tsx      | 3 ++-
 src/features/metrics/components/swap/swap.area-chart.tsx | 3 ++-
 src/features/metrics/utils/format-stats.ts               | 9 +++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/features/metrics/utils/format-stats.ts

diff --git a/src/features/metrics/components/memory/memory.area-chart.tsx b/src/features/metrics/components/memory/memory.area-chart.tsx
index 2419d38a..4b4704da 100644
--- a/src/features/metrics/components/memory/memory.area-chart.tsx
+++ b/src/features/metrics/components/memory/memory.area-chart.tsx
@@ -6,6 +6,7 @@ import StatsRing from "@/components/stats-ring2";
 import useMemorySelectors from "@/features/metrics/stores/memory.store";
 import formatBytes from "@/features/metrics/utils/format-bytes";
 import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
+import formatStats from "@/features/metrics/utils/format-stats";
 import { Grid, useMantineTheme } from "@mantine/core";
 import { IconChartArea } from "@tabler/icons-react";
 
@@ -35,7 +36,7 @@ const MemoryAreaChart: React.FC = ({}) => {
   const used = latestMemory.used;
   const progress = latestMemory.usedPercentage;
 
-  const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
+  const stats = React.useMemo(() => formatStats(used), [used]);
 
   useEffect(() => {
     setChartOptions({
diff --git a/src/features/metrics/components/swap/swap.area-chart.tsx b/src/features/metrics/components/swap/swap.area-chart.tsx
index 12a7a937..b30d0c33 100644
--- a/src/features/metrics/components/swap/swap.area-chart.tsx
+++ b/src/features/metrics/components/swap/swap.area-chart.tsx
@@ -6,6 +6,7 @@ import StatsRing from "@/components/stats-ring2";
 import useSwapSelectors from "@/features/metrics/stores/swap.store";
 import formatBytes from "@/features/metrics/utils/format-bytes";
 import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
+import formatStats from "@/features/metrics/utils/format-stats";
 import { Grid, useMantineTheme } from "@mantine/core";
 import { IconFile } from "@tabler/icons-react";
 
@@ -19,7 +20,7 @@ const SwapAreaChart: React.FC = ({}) => {
   const used = latestSwap.used;
   const progress = latestSwap.usedPercentage;
 
-  const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
+  const stats = React.useMemo(() => formatStats(used), [used]);
 
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
diff --git a/src/features/metrics/utils/format-stats.ts b/src/features/metrics/utils/format-stats.ts
new file mode 100644
index 00000000..b83285ba
--- /dev/null
+++ b/src/features/metrics/utils/format-stats.ts
@@ -0,0 +1,9 @@
+import formatBytes from "./format-bytes";
+
+const formatStats = (used: number, toFixed: number = 2) => {
+  const usedFormatted = formatBytes(used, toFixed);
+
+  return `${usedFormatted}`;
+};
+
+export default formatStats;