From ca9d3a982beba9e993f8124a054ba9ded074f1d9 Mon Sep 17 00:00:00 2001
From: pacholoamit <pacholoamit.tech@gmail.com>
Date: Sun, 13 Oct 2024 09:01:53 +0800
Subject: [PATCH] feat: Add StatsRing component for global CPU area chart

---
 src/components/stats-ring2.tsx                | 57 +++++++++++++++
 .../global-cpu/global-cpu.area-chart.tsx      | 72 +++----------------
 2 files changed, 66 insertions(+), 63 deletions(-)
 create mode 100644 src/components/stats-ring2.tsx

diff --git a/src/components/stats-ring2.tsx b/src/components/stats-ring2.tsx
new file mode 100644
index 00000000..a07dd678
--- /dev/null
+++ b/src/components/stats-ring2.tsx
@@ -0,0 +1,57 @@
+import {
+  Box,
+  Center,
+  DefaultMantineColor,
+  Divider,
+  Grid,
+  Group,
+  rem,
+  RingProgress,
+  Stack,
+  Text,
+  Title,
+  useMantineTheme,
+} from "@mantine/core";
+import { IconCpu, TablerIconsProps } from "@tabler/icons-react";
+
+interface StatsRingProps {
+  label: string;
+  stats: string;
+  progress: number;
+  color: DefaultMantineColor;
+  Icon: (props: TablerIconsProps) => JSX.Element;
+}
+
+const StatsRing: React.FC<StatsRingProps> = (props) => {
+  return (
+    <Center>
+      <Stack align="center">
+        <Text
+          c="dimmed"
+          size="xs"
+          tt="uppercase"
+          fw={700}
+          sx={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}
+        >
+          {props.label}
+        </Text>
+
+        <RingProgress
+          size={120}
+          roundCaps
+          thickness={6.5}
+          sections={[{ value: props.progress, color: props.color }]}
+          label={
+            <Center>
+              <Text fw={700} size={"lg"} sx={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>
+                {props.stats}
+              </Text>
+            </Center>
+          }
+        />
+      </Stack>
+    </Center>
+  );
+};
+
+export default StatsRing;
diff --git a/src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx b/src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx
index 4e7707a3..2be7cb8c 100644
--- a/src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx
+++ b/src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx
@@ -2,55 +2,16 @@ import React, { useEffect } from "react";
 
 import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import Card from "@/components/card";
-import GlobalCpuStatsRing from "@/features/metrics/components/global-cpu/global-cpu.stats-ring";
+import StatsRing from "@/components/stats-ring2";
 import useGlobalCpuSelectors from "@/features/metrics/stores/global-cpu.store";
 import fromNumberToPercentageString from "@/features/metrics/utils/from-number-to-percentage-string";
-import {
-  Box,
-  Center,
-  DefaultMantineColor,
-  Divider,
-  Grid,
-  Group,
-  rem,
-  RingProgress,
-  Stack,
-  Text,
-  Title,
-  useMantineTheme,
-} from "@mantine/core";
+import { Grid, useMantineTheme } from "@mantine/core";
 import { IconCpu, TablerIconsProps } from "@tabler/icons-react";
 
 // TODO: Remove Luxon and ChartJS
 // TODO: Make timestamp work automatically
 // TODO: fix time
 
-interface StatsRingProps {
-  label: string;
-  stats: string;
-  progress: number;
-  color: DefaultMantineColor;
-  Icon: (props: TablerIconsProps) => JSX.Element;
-}
-
-const StatsRing: React.FC<StatsRingProps> = (props) => {
-  return (
-    <RingProgress
-      size={120}
-      roundCaps
-      thickness={6.5}
-      sections={[{ value: props.progress, color: props.color }]}
-      label={
-        <Center>
-          <Text fw={700} size={"lg"} sx={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>
-            {props.stats}
-          </Text>
-        </Center>
-      }
-    />
-  );
-};
-
 const GlobalCpuAreaChart: React.FC = ({}) => {
   const metrics = useGlobalCpuSelectors.use.metrics();
   const globalCpu = useGlobalCpuSelectors.use.latest();
@@ -102,28 +63,13 @@ const GlobalCpuAreaChart: React.FC = ({}) => {
             WebkitBackdropFilter: "blur(15px)",
           }}
         >
-          <Center>
-            <Group>
-              <Stack align="center">
-                <Text
-                  c="dimmed"
-                  size="xs"
-                  tt="uppercase"
-                  fw={700}
-                  sx={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}
-                >
-                  CPU Usage
-                </Text>
-                <StatsRing
-                  color={other.charts.statsRing.cpu}
-                  Icon={IconCpu}
-                  stats={stats}
-                  label="CPU"
-                  progress={progress}
-                />
-              </Stack>
-            </Group>
-          </Center>
+          <StatsRing
+            color={other.charts.statsRing.cpu}
+            Icon={IconCpu}
+            stats={stats}
+            label="CPU USAGE"
+            progress={progress}
+          />
         </Grid.Col>
 
         <Grid.Col span={9} h={"190px"}>