Merge pull request #120 from pacholoamit/feat/add-themes

feat/add themes

README.md

@@ -63,14 +63,14 @@ Pachtop is built with what I'd like to call the **"VRRTT"** stack (Vite, Rust, R
 - **SysInfo** is a Rust crate that provides system information. This crate is used to get information about the system's CPU, memory, disks, network, and processes. This is what Pachtop uses to get the system metrics on different operating systems.
 
 # Features & Roadmap
-
+- [x] Themes & Color Schemes
 - [x] Aggregate CPU usage & per-core CPU usage metrics
 - [x] Memory Usage
 - [x] Network Usage
 - [x] System Information
 - [x] Processes
 - [x] Disk Usage
-- [x] Persistent metrics over time
+- [ ] Persistent metrics over time
 - [ ] Battery Usage?
 - [ ] GPU Usage?
 

src/components/area-chart.tsx

@@ -2,7 +2,8 @@ import * as Highcharts from "highcharts/highstock";
 import HighchartsReact from "highcharts-react-official";
 import { Dispatch, SetStateAction, useEffect, useRef } from "react";
 import { useState } from "react";
-import { useViewportSize } from "@mantine/hooks";
+import { useColorScheme, useViewportSize } from "@mantine/hooks";
+import { useMantineTheme } from "@mantine/core";
 
 export interface InitialAreaChatStateInput {
   title: {
@@ -23,6 +24,7 @@ export interface InitialAreaChatStateInput {
 export const useAreaChartState = (
   opts: InitialAreaChatStateInput
 ): [Highcharts.Options, Dispatch<SetStateAction<Highcharts.Options>>] => {
+  const theme = useMantineTheme();
   const [chartOptions, setChartOptions] = useState<Highcharts.Options>({
     title: {
       text: opts.title.text,

src/components/page-wrapper.tsx

@@ -3,11 +3,12 @@ import { Stack, Title } from "@mantine/core";
 interface PageWrapperProps {
   name: string;
   children: React.ReactNode;
+  height?: number | string;
 }
 
-const PageWrapper: React.FC<PageWrapperProps> = ({ children, name }) => {
+const PageWrapper: React.FC<PageWrapperProps> = ({ children, name, height }) => {
   return (
-    <Stack spacing="lg">
+    <Stack spacing="lg" h={height}>
       <Title order={2}>{name}</Title>
       {children}
     </Stack>

src/features/metrics/components/disks/disk.stats-ring.tsx

@@ -4,9 +4,11 @@ import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
 import React from "react";
 
 import { IconCpu2 } from "@tabler/icons-react";
+import { useMantineTheme } from "@mantine/core";
 
 const DiskStatsRing: React.FC = ({}) => {
   const { disks } = useServerEventsContext();
+  const { other } = useMantineTheme();
 
   const disk = disks[0];
 
@@ -18,7 +20,9 @@ const DiskStatsRing: React.FC = ({}) => {
   const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
   const label = `Disk ${disk?.data?.at(-1)?.name}`;
 
-  return <StatsRing color="grape" Icon={IconCpu2} stats={stats} label={label} progress={progress} />;
+  return (
+    <StatsRing color={other.charts.statsRing.disk} Icon={IconCpu2} stats={stats} label={label} progress={progress} />
+  );
 };
 
 export default DiskStatsRing;

src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx

@@ -3,13 +3,15 @@ import Card from "@/components/card";
 import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import useServerEventsContext from "@/hooks/useServerEventsContext";
 import { useEffect } from "react";
+import { useMantineTheme } from "@mantine/core";
 
 // TODO: Remove Luxon and ChartJS
 // TODO: Make timestamp work automatically
 // TODO: fix time
 
 const GlobalCpuAreaChart: React.FC = ({}) => {
   const { globalCpu } = useServerEventsContext();
+  const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
       text: "CPU Usage",
@@ -34,13 +36,7 @@ const GlobalCpuAreaChart: React.FC = ({}) => {
           name: "CPU Usage",
           type: "area",
           data: globalCpu.map((cpu) => [cpu.timestamp, cpu.usage]),
-          color: {
-            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
-            stops: [
-              [0, "rgba(255, 99, 132, 1)"],
-              [1, "rgba(255, 99, 132, 0.45)"],
-            ],
-          },
+          color: other.charts.area.globalCpu.color,
         },
       ],
     });

src/features/metrics/components/global-cpu/global-cpu.stats-ring.tsx

@@ -4,14 +4,16 @@ import fromNumberToPercentageString from "@/features/metrics/utils/from-number-t
 import React from "react";
 
 import { IconCpu } from "@tabler/icons-react";
+import { useMantineTheme } from "@mantine/core";
 
 const GlobalCpuStatsRing: React.FC = ({}) => {
   const { globalCpu } = useServerEventsContext();
+  const { other } = useMantineTheme();
 
   const progress = globalCpu.at(-1)?.usage || 0;
   const stats = React.useMemo(() => fromNumberToPercentageString(progress), [progress]);
 
-  return <StatsRing color="blue" Icon={IconCpu} stats={stats} label="CPU" progress={progress} />;
+  return <StatsRing color={other.charts.statsRing.cpu} Icon={IconCpu} stats={stats} label="CPU" progress={progress} />;
 };
 
 export default GlobalCpuStatsRing;

src/features/metrics/components/memory/memory.area-chart.tsx

@@ -3,9 +3,11 @@ import formatBytes from "@/features/metrics/utils/format-bytes";
 import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import useServerEventsContext from "@/hooks/useServerEventsContext";
 import { useEffect } from "react";
+import { useMantineTheme } from "@mantine/core";
 
 const MemoryAreaChart: React.FC = ({}) => {
   const { memory } = useServerEventsContext();
+  const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
       text: "Ram Usage",
@@ -31,13 +33,7 @@ const MemoryAreaChart: React.FC = ({}) => {
           name: "RAM Usage",
           type: "area",
           data: memory.map((mem) => [mem.timestamp, mem.used]),
-          color: {
-            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
-            stops: [
-              [0, "rgba(10, 167, 147, 1)"],
-              [1, "rgba(10, 167, 147, 0.45)"],
-            ],
-          },
+          color: other.charts.area.memory.color,
         },
       ],
     });

src/features/metrics/components/memory/memory.stats-ring.tsx

@@ -4,17 +4,21 @@ import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
 import React from "react";
 
 import { IconCpu2 } from "@tabler/icons-react";
+import { useMantineTheme } from "@mantine/core";
 
 const MemoryStatsRing: React.FC = ({}) => {
   const { memory } = useServerEventsContext();
+  const { other } = useMantineTheme();
 
   const available = memory?.at(-1)?.total || 0;
   const used = memory?.at(-1)?.used || 0;
   const progress = memory?.at(-1)?.usedPercentage || 0;
 
   const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
 
-  return <StatsRing color="cyan" Icon={IconCpu2} stats={stats} label="Memory" progress={progress} />;
+  return (
+    <StatsRing color={other.charts.statsRing.memory} Icon={IconCpu2} stats={stats} label="Memory" progress={progress} />
+  );
 };
 
 export default MemoryStatsRing;

src/features/metrics/components/networks/networks.area-chart.tsx

@@ -4,13 +4,15 @@ import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import useServerEventsContext from "@/hooks/useServerEventsContext";
 import { useEffect, useState } from "react";
 import { SeriesOptionsType } from "highcharts";
+import { useMantineTheme } from "@mantine/core";
 
 // TODO: Remove Luxon and ChartJS
 // TODO: Make timestamp work automatically
 // TODO: fix time
 
 const NetworksAreaChart: React.FC = ({}) => {
   const { networks } = useServerEventsContext();
+  const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
       text: "Network Received",
@@ -40,12 +42,11 @@ const NetworksAreaChart: React.FC = ({}) => {
         name: `${network.id}`,
         type: "area",
         data: network.data.map((net) => [net.timestamp, net.received]),
+        color: other.charts.area.networkReceived.color,
       })),
     });
   }, [JSON.stringify(networks)]);
 
-
-
   return (
     <Card style={{ height: "450px" }}>
       <AreaChart options={chartOptions} />

src/features/metrics/components/swap/swap.area-chart.tsx

@@ -3,9 +3,11 @@ import formatBytes from "@/features/metrics/utils/format-bytes";
 import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import useServerEventsContext from "@/hooks/useServerEventsContext";
 import { useEffect } from "react";
+import { useMantineTheme } from "@mantine/core";
 
 const SwapAreaChart: React.FC = ({}) => {
   const { swap } = useServerEventsContext();
+  const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
       text: "Swap Memory Usage",
@@ -31,13 +33,7 @@ const SwapAreaChart: React.FC = ({}) => {
           name: "Swap Usage",
           type: "area",
           data: swap.map((swap) => [swap.timestamp, swap.used]),
-          color: {
-            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
-            stops: [
-              [0, "rgba(53, 162, 235, 0.45)"],
-              [1, "rgba(53, 162, 235)"],
-            ],
-          },
+          color: other.charts.area.swap.color,
         },
       ],
     });

src/features/metrics/components/swap/swap.stats-ring.tsx

@@ -4,17 +4,21 @@ import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
 import React from "react";
 
 import { IconCpu2 } from "@tabler/icons-react";
+import { useMantineTheme } from "@mantine/core";
 
 const SwapStatsRing: React.FC = ({}) => {
   const { swap } = useServerEventsContext();
+  const { other } = useMantineTheme();
 
   const available = swap?.at(-1)?.total || 0;
   const used = swap?.at(-1)?.used || 0;
   const progress = swap?.at(-1)?.usedPercentage || 0;
 
   const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
 
-  return <StatsRing color="red" Icon={IconCpu2} stats={stats} label="Swap" progress={progress} />;
+  return (
+    <StatsRing color={other.charts.statsRing.swap} Icon={IconCpu2} stats={stats} label="Swap" progress={progress} />
+  );
 };
 
 export default SwapStatsRing;

src/features/settings/pages/settings.page.tsx

@@ -1,27 +1,30 @@
 import React from "react";
-import AutoStartSettingsView from "@/features/settings/views/autostart.view";
+import GeneralSettingsView from "@/features/settings/views/general.view";
 import AboutView from "@/features/settings/views/about.view";
 import PageWrapper from "@/components/page-wrapper";
 import Card from "@/components/card";
 
-import { Icon24Hours, IconGitBranch } from "@tabler/icons-react";
+import { IconGitBranch, IconSettings2 } from "@tabler/icons-react";
 import { Center, Grid, NavLink } from "@mantine/core";
 import { useState } from "react";
 
 const settings = [
-  { icon: Icon24Hours, label: "Auto Start", view: <AutoStartSettingsView /> },
-  {
-    icon: IconGitBranch,
-    label: "About",
-    view: <AboutView />,
-  },
+  { icon: IconSettings2, label: "General", view: <GeneralSettingsView /> },
+
+  // TODO: FIX responsiveness
+  // {
+  //   icon: IconGitBranch,
+  //   label: "About",
+  //   view: <AboutView />,
+  // },
 ];
 
 const SettingsPage = () => {
   const [active, setActive] = useState(0);
+
   const items = settings.map((item, index) => (
     <React.Fragment key={item.label}>
-      <Grid.Col span={4}>
+      <Grid.Col span={3}>
         <NavLink
           key={item.label}
           active={index === active}
@@ -37,10 +40,10 @@ const SettingsPage = () => {
   ));
 
   return (
-    <PageWrapper name="Settings">
+    <PageWrapper name="Settings" height={"94vh"}>
       <Center>
-        <Card>
-          <Grid style={{ width: "45rem" }}>{items}</Grid>
+        <Card style={{ height: "85vh" }}>
+          <Grid style={{ width: "50rem" }}>{items}</Grid>
         </Card>
       </Center>
     </PageWrapper>