refactor: Remove commented-out code and improve CPU stats display

pacholoamit · Oct 10, 2024 · f84edc3 · f84edc3
1 parent 3c28521
commit f84edc3
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 19 deletions.
diff --git a/src/components/area-chart.tsx b/src/components/area-chart.tsx
@@ -35,17 +35,19 @@ export const useAreaChartState = (
     accessibility: {
       enabled: false,
     },
-    title: {
-      text: opts.title.text,
-      style: {
-        fontFamily: "Geist Variable, Roboto, Arial, sans-serif",
-        fontWeight: "bold",
-        fontSize: "16px",
-        color: "#dce1e8",
-      },
-    },
+    // title: {
+
+    //   text: opts.title.text,
+    //   style: {
+    //     fontFamily: "Geist Variable, Roboto, Arial, sans-serif",
+    //     fontWeight: "bold",
+    //     fontSize: "16px",
+    //     color: "#dce1e8",
+    //   },
+    // },
     // This is the rectangle box that u can use to navigate
     navigator: {
+      enabled: false,
       adaptToUpdatedData: true,
       maskFill: other.charts.area.default.navigator.maskFill,
       handles: {
@@ -129,6 +131,8 @@ export const useAreaChartState = (
     // This is the calendar thing on the top right
     rangeSelector: {
       inputEnabled: false,
+      allButtonsEnabled: false,
+      enabled: false,
       floating: true,
 
       labelStyle: {
@@ -176,8 +180,7 @@ export const useAreaChartState = (
     },
     boost: {
       enabled: true,
-      useGPUTranslations: false,
-      allowForce: true,
+      useGPUTranslations: true,
     },
     chart: {
       ignoreHiddenSeries: true,

diff --git a/src/contants.ts b/src/contants.ts
@@ -108,9 +108,9 @@ export const themes: Record<THEME_OPTION, MantineThemeOverride> = {
       titlebar: commonColors.slate.titlebar,
       charts: {
         statsRing: {
-          cpu: "blue",
+          cpu: "red",
           memory: "cyan",
-          swap: "red",
+          swap: "blue",
           disk: "grape",
         },
         area: {
@@ -185,9 +185,9 @@ export const themes: Record<THEME_OPTION, MantineThemeOverride> = {
       titlebar: commonColors.midnight.titlebar,
       charts: {
         statsRing: {
-          cpu: "blue",
+          cpu: "red",
           memory: "cyan",
-          swap: "red",
+          swap: "blue",
           disk: "grape",
         },
         area: {

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
@@ -1,17 +1,64 @@
-import { useEffect } from "react";
+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 useGlobalCpuSelectors from "@/features/metrics/stores/global-cpu.store";
 import fromNumberToPercentageString from "@/features/metrics/utils/from-number-to-percentage-string";
-import { useMantineTheme } from "@mantine/core";
+import {
+  Box,
+  Center,
+  DefaultMantineColor,
+  Divider,
+  Grid,
+  Group,
+  rem,
+  RingProgress,
+  Stack,
+  Text,
+  Title,
+  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 (
+    <Group noWrap>
+      <RingProgress
+        size={60}
+        roundCaps
+        thickness={6.5}
+        sections={[{ value: props.progress, color: props.color }]}
+        label={
+          <Center>
+            <props.Icon style={{ width: rem(20), height: rem(20) }} stroke={1.5} />
+          </Center>
+        }
+      />
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <Text fw={700} size={"lg"} sx={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}>
+          {props.stats}
+        </Text>
+      </Box>
+    </Group>
+  );
+};
+
 const GlobalCpuAreaChart: React.FC = ({}) => {
   const metrics = useGlobalCpuSelectors.use.metrics();
+  const globalCpu = useGlobalCpuSelectors.use.latest();
   const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
@@ -32,6 +79,9 @@ const GlobalCpuAreaChart: React.FC = ({}) => {
     },
   });
 
+  const progress = globalCpu.usage;
+  const stats = React.useMemo(() => fromNumberToPercentageString(progress), [progress]);
+
   useEffect(() => {
     setChartOptions({
       series: [
@@ -46,8 +96,45 @@ const GlobalCpuAreaChart: React.FC = ({}) => {
   }, [metrics]);
 
   return (
-    <Card style={{ height: "380px" }}>
-      <AreaChart options={chartOptions} />
+    <Card style={{ height: "196px" }}>
+      <Grid justify="center" align="stretch">
+        <Grid.Col
+          span={3}
+          h={"190px"}
+          style={{
+            backgroundColor: "transparent",
+            backdropFilter: "blur(15px)",
+            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>
+        </Grid.Col>
+
+        <Grid.Col span={9} h={"190px"}>
+          <AreaChart options={chartOptions} />
+        </Grid.Col>
+      </Grid>
     </Card>
   );
 };