feat: Update tauri version to 2.0.3 and sysinfo to 0.30.12

src-tauri/Cargo.toml

@@ -22,8 +22,8 @@ systemicons = { path = "./ws-systemicons" }
 chrono = { version = "0.4.23", features = ["serde"] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "2.0.2", features = ["tray-icon", "devtools"] }
-sysinfo = "0.30.12"
+tauri = { version = "2.0.3", features = ["tray-icon", "devtools"] }
+sysinfo = {version = "0.30.12", default-features = false }
 
 
 log = "^0.4"
@@ -51,7 +51,7 @@ tauri-plugin-shell = { git = "https://github.com/tauri-apps/plugins-workspace",
 
 
 [target.'cfg(target_os = "macos")'.dependencies]
-cocoa = "0.25.0"
+cocoa = "0.26.0"
 objc = "0.2.7"
 
 [target.'cfg(target_os = "windows")'.dependencies]

src/components/area-chart.tsx

@@ -97,10 +97,13 @@ export const useAreaChartState = (
 
     yAxis: {
       max: opts.yAxis.max,
+
       title: {
         text: null,
       },
-      startOnTick: true,
+
+      endOnTick: true,
+
       gridLineColor: other.charts.area.default.gridLineColor,
       lineColor: other.charts.area.default.lineColor,
       labels: {
@@ -123,6 +126,7 @@ export const useAreaChartState = (
     },
     // Scrollbar at the bottom of the chart
     scrollbar: {
+      enabled: false,
       rifleColor: other.charts.area.default.scrollbar.rifleColor,
       barBackgroundColor: other.charts.area.default.scrollbar.barBackgroundColor,
       buttonBackgroundColor: other.charts.area.default.scrollbar.buttonBackgroundColor,

src/contants.ts

@@ -84,6 +84,15 @@ const areaChartThemeOptions = {
       ],
     },
   },
+  disk: {
+    color: {
+      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
+      stops: [
+        [0, "rgba(116, 52, 235, 0.75)"],
+        [1, "rgba(116, 52, 235, 0)"],
+      ],
+    },
+  },
 };
 
 export const themes: Record<THEME_OPTION, MantineThemeOverride> = {

src/features/metrics/components/disks/disk.area-chart.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+
+import AreaChart, { useAreaChartState } from "@/components/area-chart";
+import Card from "@/components/card";
+import StatsRing from "@/components/stats-ring2";
+import { VIEWABLE_ELEMENT_COUNT } from "@/contants";
+import useDisksSelectors, { FormattedDisk } from "@/features/metrics/stores/disk.store";
+import formatBytes from "@/features/metrics/utils/format-bytes";
+import { Disk } from "@/lib";
+import { Grid, useMantineTheme } from "@mantine/core";
+import { IconCpu } from "@tabler/icons-react";
+
+interface DiskAreaChartProps {
+  disk: Disk;
+}
+
+interface DiskMetricsState {
+  timestamp: number;
+  used: number;
+}
+
+const DiskAreaChart = ({ disk }: DiskAreaChartProps) => {
+  const { other } = useMantineTheme();
+  //! TODO: Use `useEnumerableStore` hook here , currently just a hack
+  const [diskMetrics, setDiskMetrics] = useState<DiskMetricsState[]>([]);
+  const [chartOptions, setChartOptions] = useAreaChartState({
+    title: {
+      text: `Disk Usage`,
+    },
+    yAxis: {
+      labels: {
+        formatter: (x) => `${formatBytes(x.value as number)}`,
+      },
+    },
+    tooltip: {
+      pointFormatter: function () {
+        return `<span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>${formatBytes(
+          this.y as number
+        )}</b><br/>`;
+      },
+    },
+  });
+
+  useEffect(() => {
+    setDiskMetrics((prev) => {
+      if (prev.length > VIEWABLE_ELEMENT_COUNT) prev.shift();
+      return [...prev, { timestamp: disk.timestamp, used: disk.used } as DiskMetricsState];
+    });
+
+    setChartOptions({
+      series: [
+        {
+          name: `Disk Usage`,
+          type: "area",
+          data: diskMetrics.map((disk) => [disk.timestamp, disk.used]),
+          color: other.charts.area.disk.color,
+        },
+      ],
+    });
+  }, [disk]);
+
+  const stats = formatBytes(disk.used);
+  const progress = disk.usedPercentage;
+
+  return (
+    <Card style={{ height: "196px" }}>
+      <Grid justify="center" align="stretch">
+        <Grid.Col span={2} h={"190px"} style={{}}>
+          <StatsRing color={"indigo"} Icon={IconCpu} stats={stats} label={`Disk ${disk.name}`} progress={progress} />
+        </Grid.Col>
+
+        <Grid.Col span={10} h={"190px"}>
+          <AreaChart options={chartOptions} />
+        </Grid.Col>
+      </Grid>
+    </Card>
+  );
+};
+
+export default DiskAreaChart;