pacholoamit · pacholoamit · May 16, 2024 · May 16, 2024 · May 16, 2024 · May 16, 2024
diff --git a/.yarn/cache/non.geist-npm-1.0.3-bb7fdb86fa-26ff041072.zip b/.yarn/cache/non.geist-npm-1.0.3-bb7fdb86fa-26ff041072.zip
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,8 +2,12 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/).
 
-## 0.8.0-rc
+## 0.7.1
 - Change Chart height
+- Improve font style
+- Improve reference colors for charts
+- Minor UI improvements
+
 
 ## 0.7.0
 - Improve Settings page UI

diff --git a/index.html b/index.html
@@ -40,6 +40,87 @@
       }
     </style>
 
+    <!-- LOAD GOOGLE FONTS START -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      .roboto-thin {
+        font-family: "Roboto", sans-serif;
+        font-weight: 100;
+        font-style: normal;
+      }
+
+      .roboto-light {
+        font-family: "Roboto", sans-serif;
+        font-weight: 300;
+        font-style: normal;
+      }
+
+      .roboto-regular {
+        font-family: "Roboto", sans-serif;
+        font-weight: 400;
+        font-style: normal;
+      }
+
+      .roboto-medium {
+        font-family: "Roboto", sans-serif;
+        font-weight: 500;
+        font-style: normal;
+      }
+
+      .roboto-bold {
+        font-family: "Roboto", sans-serif;
+        font-weight: 700;
+        font-style: normal;
+      }
+
+      .roboto-black {
+        font-family: "Roboto", sans-serif;
+        font-weight: 900;
+        font-style: normal;
+      }
+
+      .roboto-thin-italic {
+        font-family: "Roboto", sans-serif;
+        font-weight: 100;
+        font-style: italic;
+      }
+
+      .roboto-light-italic {
+        font-family: "Roboto", sans-serif;
+        font-weight: 300;
+        font-style: italic;
+      }
+
+      .roboto-regular-italic {
+        font-family: "Roboto", sans-serif;
+        font-weight: 400;
+        font-style: italic;
+      }
+
+      .roboto-medium-italic {
+        font-family: "Roboto", sans-serif;
+        font-weight: 500;
+        font-style: italic;
+      }
+
+      .roboto-bold-italic {
+        font-family: "Roboto", sans-serif;
+        font-weight: 700;
+        font-style: italic;
+      }
+
+      .roboto-black-italic {
+        font-family: "Roboto", sans-serif;
+        font-weight: 900;
+        font-style: italic;
+      }
+    </style>
+    <!-- LOAD GOOGLE FONTS END -->
     <title>Pachtop</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "highcharts-react-official": "^3.2.1",
     "lodash.sortby": "^4.7.0",
     "mantine-datatable": "^2.9.14",
+    "non.geist": "^1.0.3",
     "pocketbase": "^0.21.2",
     "posthog-js": "^1.131.4",
     "react": "^18.3.1",
@@ -48,4 +49,4 @@
     "vite": "^5.2.11"
   },
   "packageManager": "[email protected]"
-}
+}
diff --git a/src/components/area-chart.tsx b/src/components/area-chart.tsx
@@ -24,26 +24,34 @@ export interface InitialAreaChatStateInput {
 export const useAreaChartState = (
   opts: InitialAreaChatStateInput
 ): [Highcharts.Options, Dispatch<SetStateAction<Highcharts.Options>>] => {
-  const theme = useMantineTheme();
+  const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useState<Highcharts.Options>({
     title: {
       text: opts.title.text,
       style: {
-        fontFamily: "Roboto, Arial, sans-serif",
+        fontFamily: "Geist Variable, Roboto, Arial, sans-serif",
         fontWeight: "bold",
         fontSize: "18px",
         color: "#dce1e8",
       },
     },
+    // This is the rectangle box that u can use to navigate
+    navigator: {
+      adaptToUpdatedData: true,
+      maskFill: other.charts.area.default.navigator.maskFill,
+      handles: {
+        backgroundColor: other.charts.area.default.navigator.handles.backgroundColor,
+      },
+    },
+
     plotOptions: {
       series: {
         marker: {
           enabled: false,
         },
       },
-      area: {
-        stacking: "normal",
 
+      area: {
         lineWidth: 1,
         marker: {
           lineWidth: 1,
@@ -52,18 +60,21 @@ export const useAreaChartState = (
     },
     xAxis: {
       type: "datetime",
-      gridLineColor: "#263858",
-      lineColor: "#263858",
+      gridLineColor: other.charts.area.default.gridLineColor,
+      lineColor: other.charts.area.default.lineColor,
       labels: {
         step: 2,
         format: "{value:%I:%M %p}",
         style: {
-          color: "#8192ac",
+          color: other.charts.area.default.labelColor,
         },
       },
     },
     legend: {
-      enabled: false,
+      itemStyle: {
+        color: other.charts.area.default.legend.color,
+      },
+      enabled: true,
     },
     time: {
       useUTC: false,
@@ -75,8 +86,8 @@ export const useAreaChartState = (
         text: null,
       },
       startOnTick: true,
-      gridLineColor: "#263858",
-      lineColor: "#263858",
+      gridLineColor: other.charts.area.default.gridLineColor,
+      lineColor: other.charts.area.default.lineColor,
       labels: {
         formatter: opts.yAxis.labels.formatter,
         style: {
@@ -91,33 +102,35 @@ export const useAreaChartState = (
       xDateFormat: "%Y-%m-%d %I:%M:%S %p",
       pointFormatter: opts.tooltip.pointFormatter,
       style: {
-        color: "#dce1e8",
+        color: other.charts.area.default.tooltip.color,
       },
-      backgroundColor: "#263858",
+      backgroundColor: other.charts.area.default.tooltip.backgroundColor,
     },
+    // Scrollbar at the bottom of the chart
     scrollbar: {
-      rifleColor: "#324363",
-      barBackgroundColor: "#324363",
-      buttonBackgroundColor: "#324363",
-      trackBorderColor: "#324363",
+      rifleColor: other.charts.area.default.scrollbar.rifleColor,
+      barBackgroundColor: other.charts.area.default.scrollbar.barBackgroundColor,
+      buttonBackgroundColor: other.charts.area.default.scrollbar.buttonBackgroundColor,
+      trackBorderColor: other.charts.area.default.scrollbar.trackBorderColor,
     },
+    // This is the calendar thing on the top right
     rangeSelector: {
       labelStyle: {
-        color: "#8192ac",
-        backgroundColor: "#263858",
+        color: other.charts.area.default.rangeSelector.labelStyle.color,
+        backgroundColor: other.charts.area.default.rangeSelector.labelStyle.backgroundColor,
       },
 
       inputStyle: {
-        color: "#8192ac",
+        color: other.charts.area.default.rangeSelector.inputStyle.color,
       },
       buttonTheme: {
         fill: "none",
         display: "none",
         r: 8,
         style: {
           background: "none",
-          color: "#8192ac",
-          backgroundColor: "#263858",
+          color: other.charts.area.default.buttonTheme.style.color,
+          backgroundColor: other.charts.area.default.buttonTheme.style.backgroundColor,
           fontWeight: "bold",
         },
       },
@@ -142,15 +155,16 @@ export const useAreaChartState = (
           text: "All",
         },
       ],
-      // inputEnabled: false,
+
       selected: 0,
     },
-
+    boost: {
+      enabled: true,
+      useGPUTranslations: false,
+      allowForce: true,
+    },
     chart: {
       backgroundColor: "transparent",
-      style: {
-        color: "#dce1e8",
-      },
     },
   });
 

diff --git a/src/components/card.tsx b/src/components/card.tsx
@@ -2,11 +2,12 @@ import { Card as MantineCard } from "@mantine/core";
 
 interface CardProps {
   children: React.ReactNode;
+  height?: string;
   style?: React.CSSProperties;
 }
 
-const Card: React.FC<CardProps> = ({ children, style }) => {
-  const styles: React.CSSProperties = { height: "300px", ...style };
+const Card: React.FC<CardProps> = ({ children, style, height = "300px" }) => {
+  const styles: React.CSSProperties = { height, ...style };
   return (
     <MantineCard style={styles} shadow="xl" p="sm" radius={"md"} withBorder>
       {children}

diff --git a/src/components/page-wrapper.tsx b/src/components/page-wrapper.tsx
@@ -9,7 +9,7 @@ interface PageWrapperProps {
 const PageWrapper: React.FC<PageWrapperProps> = ({ children, name, height }) => {
   return (
     <Stack spacing="lg" h={height}>
-      <Title order={2}>{name}</Title>
+      <Title order={1}>{name}</Title>
       {children}
     </Stack>
   );

diff --git a/src/components/stats-ring.tsx b/src/components/stats-ring.tsx
@@ -1,5 +1,6 @@
 import { DefaultMantineColor, Paper, Group, RingProgress, Center, rem, Text } from "@mantine/core";
 import { IconArrowUpRight, IconArrowDownRight, TablerIconsProps } from "@tabler/icons-react";
+import Card from "./card";
 
 interface StatsRingProps {
   label: string;
@@ -11,7 +12,7 @@ interface StatsRingProps {
 
 const StatsRing: React.FC<StatsRingProps> = (props) => {
   return (
-    <Paper withBorder radius={"md"} p={"xs"}>
+    <Card height="100%">
       <Group>
         <RingProgress
           size={80}
@@ -33,7 +34,7 @@ const StatsRing: React.FC<StatsRingProps> = (props) => {
           </Text>
         </div>
       </Group>
-    </Paper>
+    </Card>
   );
 };
 

diff --git a/src/features/metrics/components/disks/disk.area-chart.tsx b/src/features/metrics/components/disks/disk.area-chart.tsx
@@ -13,6 +13,8 @@ const DiskAreaChart: React.FC<DiskAreaChartProps> = ({ disk }) => {
     title: {
       text: `${disk.id} Disk Usage`,
     },
+
+
     yAxis: {
       labels: {
         formatter: (x) => formatBytes(x.value as number),

diff --git a/src/features/metrics/components/disks/disk.stats-ring.tsx b/src/features/metrics/components/disks/disk.stats-ring.tsx
@@ -3,7 +3,7 @@ import StatsRing from "@/components/stats-ring";
 import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
 import React from "react";
 
-import { IconCpu2 } from "@tabler/icons-react";
+import { IconCpu2, IconFileAnalytics, IconFolders } from "@tabler/icons-react";
 import { useMantineTheme } from "@mantine/core";
 
 const DiskStatsRing: React.FC = ({}) => {
@@ -21,7 +21,7 @@ const DiskStatsRing: React.FC = ({}) => {
   const label = `Disk ${disk?.data?.at(-1)?.name}`;
 
   return (
-    <StatsRing color={other.charts.statsRing.disk} Icon={IconCpu2} stats={stats} label={label} progress={progress} />
+    <StatsRing color={other.charts.statsRing.disk} Icon={IconFolders} stats={stats} label={label} progress={progress} />
   );
 };
 

diff --git a/src/features/metrics/components/memory/memory.area-chart.tsx b/src/features/metrics/components/memory/memory.area-chart.tsx
@@ -10,7 +10,7 @@ const MemoryAreaChart: React.FC = ({}) => {
   const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
-      text: "Ram Usage",
+      text: "RAM Usage",
     },
     yAxis: {
       labels: {

diff --git a/src/features/metrics/components/memory/memory.stats-ring.tsx b/src/features/metrics/components/memory/memory.stats-ring.tsx
@@ -3,7 +3,7 @@ import StatsRing from "@/components/stats-ring";
 import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
 import React from "react";
 
-import { IconCpu2 } from "@tabler/icons-react";
+import { IconChartArea, IconCpu2 } from "@tabler/icons-react";
 import { useMantineTheme } from "@mantine/core";
 
 const MemoryStatsRing: React.FC = ({}) => {
@@ -17,7 +17,13 @@ const MemoryStatsRing: React.FC = ({}) => {
   const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
 
   return (
-    <StatsRing color={other.charts.statsRing.memory} Icon={IconCpu2} stats={stats} label="Memory" progress={progress} />
+    <StatsRing
+      color={other.charts.statsRing.memory}
+      Icon={IconChartArea}
+      stats={stats}
+      label="Memory"
+      progress={progress}
+    />
   );
 };
 

diff --git a/src/features/metrics/components/swap/swap.area-chart.tsx b/src/features/metrics/components/swap/swap.area-chart.tsx
@@ -10,7 +10,7 @@ const SwapAreaChart: React.FC = ({}) => {
   const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useAreaChartState({
     title: {
-      text: "Swap Memory Usage",
+      text: "Swap Usage",
     },
     yAxis: {
       labels: {

diff --git a/src/features/metrics/components/swap/swap.stats-ring.tsx b/src/features/metrics/components/swap/swap.stats-ring.tsx
@@ -3,7 +3,7 @@ import StatsRing from "@/components/stats-ring";
 import formatOverallStats from "@/features/metrics/utils/format-overall-stats";
 import React from "react";
 
-import { IconCpu2 } from "@tabler/icons-react";
+import { IconCpu2, IconFile } from "@tabler/icons-react";
 import { useMantineTheme } from "@mantine/core";
 
 const SwapStatsRing: React.FC = ({}) => {
@@ -17,7 +17,7 @@ const SwapStatsRing: React.FC = ({}) => {
   const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);
 
   return (
-    <StatsRing color={other.charts.statsRing.swap} Icon={IconCpu2} stats={stats} label="Swap" progress={progress} />
+    <StatsRing color={other.charts.statsRing.swap} Icon={IconFile} stats={stats} label="Swap" progress={progress} />
   );
 };