feat: Add new memory area chart component

pacholoamit · Oct 13, 2024 · 640fc10 · 640fc10
1 parent 2d71826
commit 640fc10
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 27 deletions.
diff --git a/src/components/stats-ring2.tsx b/src/components/stats-ring2.tsx
@@ -1,17 +1,4 @@
-import {
-  Box,
-  Center,
-  DefaultMantineColor,
-  Divider,
-  Grid,
-  Group,
-  rem,
-  RingProgress,
-  Stack,
-  Text,
-  Title,
-  useMantineTheme,
-} from "@mantine/core";
+import { Center, DefaultMantineColor, RingProgress, Stack, Text } from "@mantine/core";
 import { IconCpu, TablerIconsProps } from "@tabler/icons-react";
 
 interface StatsRingProps {

diff --git a/src/contants.ts b/src/contants.ts
@@ -1,6 +1,6 @@
 import { MantineThemeOverride } from "@mantine/core";
 
-export const VIEWABLE_ELEMENT_COUNT = 60 * 30; // Viewable elements in the chart (60 seconds * 30 )
+export const VIEWABLE_ELEMENT_COUNT = 60; // Viewable elements in the chart (60 seconds * 30 )
 
 export const DEFAULT_TITLEBAR_COLOR = "#09090b";
 

diff --git a/src/features/metrics/components/memory/memory.area-chart.tsx b/src/features/metrics/components/memory/memory.area-chart.tsx
@@ -1,13 +1,17 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
 import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import Card from "@/components/card";
+import StatsRing from "@/components/stats-ring2";
 import useMemorySelectors from "@/features/metrics/stores/memory.store";
 import formatBytes from "@/features/metrics/utils/format-bytes";
-import { useMantineTheme } from "@mantine/core";
+import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
+import { Grid, useMantineTheme } from "@mantine/core";
+import { IconChartArea } from "@tabler/icons-react";
 
 const MemoryAreaChart: React.FC = ({}) => {
   const memory = useMemorySelectors.use.metrics();
+  const latestMemory = useMemorySelectors.use.latest();
   const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
@@ -27,6 +31,12 @@ const MemoryAreaChart: React.FC = ({}) => {
     },
   });
 
+  const available = latestMemory.total;
+  const used = latestMemory.used;
+  const progress = latestMemory.usedPercentage;
+
+  const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
+
   useEffect(() => {
     setChartOptions({
       series: [
@@ -41,8 +51,21 @@ const MemoryAreaChart: React.FC = ({}) => {
   }, [memory]);
 
   return (
-    <Card style={{ height: "380px" }}>
-      <AreaChart options={chartOptions} />
+    <Card style={{ height: "196px" }}>
+      <Grid justify="center" align="stretch">
+        <Grid.Col span={2} h={"190px"}>
+          <StatsRing
+            color={other.charts.statsRing.memory}
+            Icon={IconChartArea}
+            stats={stats}
+            label="MEMORY USAGE"
+            progress={progress}
+          />
+        </Grid.Col>
+        <Grid.Col span={10} h={"190px"}>
+          <AreaChart options={chartOptions} />
+        </Grid.Col>
+      </Grid>
     </Card>
   );
 };

diff --git a/src/features/metrics/components/swap/swap.area-chart.tsx b/src/features/metrics/components/swap/swap.area-chart.tsx
@@ -1,15 +1,26 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
 import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import Card from "@/components/card";
+import StatsRing from "@/components/stats-ring2";
 import useSwapSelectors from "@/features/metrics/stores/swap.store";
 import formatBytes from "@/features/metrics/utils/format-bytes";
-import { useMantineTheme } from "@mantine/core";
+import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
+import { Grid, useMantineTheme } from "@mantine/core";
+import { IconFile } from "@tabler/icons-react";
 
 const SwapAreaChart: React.FC = ({}) => {
   const swap = useSwapSelectors.use.metrics();
+  const latestSwap = useSwapSelectors.use.latest();
 
   const { other } = useMantineTheme();
+
+  const available = latestSwap.total;
+  const used = latestSwap.used;
+  const progress = latestSwap.usedPercentage;
+
+  const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
+
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
       text: "SWAP Usage",
@@ -42,8 +53,21 @@ const SwapAreaChart: React.FC = ({}) => {
   }, [swap]);
 
   return (
-    <Card style={{ height: "380px" }}>
-      <AreaChart options={chartOptions} />
+    <Card style={{ height: "190px" }}>
+      <Grid justify="center" align="stretch">
+        <Grid.Col span={2} h={"190px"}>
+          <StatsRing
+            color={other.charts.statsRing.swap}
+            stats={stats}
+            label="SWAP USAGE"
+            Icon={IconFile}
+            progress={progress}
+          />
+        </Grid.Col>
+        <Grid.Col span={10} h={"190px"}>
+          <AreaChart options={chartOptions} />
+        </Grid.Col>
+      </Grid>
     </Card>
   );
 };

diff --git a/src/features/metrics/pages/dashboard.page.tsx b/src/features/metrics/pages/dashboard.page.tsx
@@ -39,7 +39,7 @@ const MemorySection = () => {
   return (
     <>
       <Grid.Col md={6} sm={12}>
-        <MemoryAreaChart />
+        <SwapAreaChart />
       </Grid.Col>
       <Grid.Col md={6} sm={12}>
         <SwapAreaChart />
@@ -51,11 +51,12 @@ const MemorySection = () => {
 const CpuSection = () => {
   return (
     <>
-      <Grid.Col xl={7.5} lg={6} md={12}>
+      <Grid.Col md={6} sm={12}>
         <GlobalCpuAreaChart />
       </Grid.Col>
-      <Grid.Col xl={4.5} lg={6} md={12}>
-        <CpusBarChart />
+      <Grid.Col md={6} sm={12}>
+        {/* <CpusBarChart /> */}
+        <MemoryAreaChart />
       </Grid.Col>
     </>
   );