feat: data related chart built

renderer/components/Charts/DataRelated.tsx

@@ -0,0 +1,73 @@
+import { BottomArrow, DataRelatedChart, TopArrow } from "../../types/Charts";
+
+export default function DataRelated({
+  data_package,
+  storage_available,
+  total_size,
+}: DataRelatedChart) {
+  return (
+    <div className="w-96 h-20 flex items-center mt-20">
+      <div
+        className="bg-[#7BF05E] hover:bg-[#6ad050] h-full cursor-pointer relative group"
+        style={{
+          width: "2%",
+        }}
+      >
+        <TopArrow value={data_package.size} unit={data_package.unit} color="#7BF05E" />
+      </div>
+
+      <div
+        className="bg-[#1D2988] hover:bg-[#1d1d88c8] h-full cursor-pointer relative group"
+        style={{
+          width: "4%",
+        }}
+      >
+        <BottomArrow value={storage_available.size} unit={storage_available.unit} color="#1D2988" />
+      </div>
+
+      <div className="w-full bg-[#A7A7A7] hover:bg-[#989797] h-full cursor-pointer relative group">
+        <TopArrow value={total_size.size} unit={total_size.unit} color="#A7A7A7" />
+      </div>
+    </div>
+  );
+}
+
+function TopArrow({ value, unit, color }: TopArrow) {
+  return (
+    <div className="absolute -top-5 left-1/2 flex">
+      <div className="w-[1px] h-5 bg-gray-500"></div>
+
+      <div className="w-[1px] h-[20px] bg-gray-500 transform rotate-90 ml-[9px] -mt-[10px]"></div>
+
+      <div
+        className="w-[10px] h-[20px] bg-[#A7A7A7] ml-[15px] -mt-[10px] group-hover:w-[15px] 
+                            transition-all duration-300"
+        style={{ backgroundColor: color }}
+      ></div>
+
+      <div className="w-fit text-xs flex items-center gap-2 -mt-[20px] ml-[5px]">
+        <span>{value}</span> <span>{unit}</span>
+      </div>
+    </div>
+  );
+}
+
+function BottomArrow({ value, unit, color }: BottomArrow) {
+  return (
+    <div className="absolute -bottom-7 left-1/2 flex">
+      <div className="w-[1px] h-5 bg-gray-500 mt-5"></div>
+
+      <div className="w-[1px] h-[20px] bg-gray-500 transform rotate-90 ml-[9px] mt-[30px]"></div>
+
+      <div
+        className="w-[10px] h-[20px] ml-[15px] mt-[30px] group-hover:w-[15px] 
+                             transition-all duration-300"
+        style={{ backgroundColor: color }}
+      ></div>
+
+      <div className="w-fit text-xs flex items-center gap-2 mt-[30px] ml-[5px]">
+        <span>{value}</span> <span>{unit}</span>
+      </div>
+    </div>
+  );
+}

renderer/pages/dashboard.tsx

@@ -3,6 +3,10 @@ import { MainLayout } from "../layouts";
 import { setMinorState, selectMinorState } from "../store/minorSlice";
 import { useDispatch, useSelector } from "react-redux";
 import ScrollSpy from "react-ui-scrollspy";
+import DataRelated from "../components/Charts/DataRelated";
+import { Metrics } from "../types/Minor";
+import { DataRelatedChart } from "../types/Charts";
+import { convertToGbFromPetabytes } from "../util/minor";
 
 interface MenuItems {
   label: string;
@@ -17,6 +21,20 @@ interface SubMenuItems {
 export default function DashboardPage() {
   const minorState = useSelector(selectMinorState);
   const dispatch = useDispatch();
+  const [dataRelated, setDataRelated] = React.useState<DataRelatedChart>({
+    data_package: {
+      size: 0,
+      unit: "GB",
+    },
+    storage_available: {
+      size: 0,
+      unit: "GB",
+    },
+    total_size: {
+      size: 0,
+      unit: "TB",
+    },
+  });
 
   const [activeMenu, setActiveMenu] = React.useState<string>();
 
@@ -43,9 +61,29 @@ export default function DashboardPage() {
 
   React.useEffect(() => {
     (async () => {
-      const data = await window.ipc.requestMetrics();
+      const data: Metrics = await window.ipc.requestMetrics();
+      console.log("requestMetrics", data);
+      if (data) {
+        dispatch(setMinorState(data));
 
-      dispatch(setMinorState(data));
+        setDataRelated((prev) => {
+          return {
+            ...prev,
+            data_package: {
+              size: convertToGbFromPetabytes(data.data_packaged) || 0,
+              unit: "GB",
+            },
+            storage_available: {
+              size: convertToGbFromPetabytes(data.data_unpackaged) || 0,
+              unit: "GB",
+            },
+            total_size: {
+              size: data.data_packaged + data.data_unpackaged,
+              unit: "TB",
+            },
+          };
+        });
+      }
     })();
   }, []);
 
@@ -120,10 +158,11 @@ export default function DashboardPage() {
               <div className="space-y-4">
                 <div id="sub-section-1-1" className="bg-gray-100 p-4 rounded-lg h-64">
                   <h3 className="text-lg font-medium mb-2">Data Related</h3>
-                  <p className="text-gray-700">Data packaged: {minorState.data_packaged}</p>
-                  {minorState.data_unpackaged ? (
-                    <p className="text-gray-700">Data unpackaged: {minorState.data_unpackaged}</p>
-                  ) : null}
+                  <DataRelated
+                    data_package={dataRelated.data_package}
+                    storage_available={dataRelated.storage_available}
+                    total_size={dataRelated.total_size}
+                  />
                 </div>
                 <div id="sub-section-1-2" className="bg-gray-100 p-4 rounded-lg h-64">
                   <h3 className="text-lg font-medium mb-2">Hash Rate</h3>

renderer/types/Charts.ts

@@ -0,0 +1,26 @@
+export type DataRelatedChart = {
+  data_package: {
+    size: number;
+    unit: string;
+  };
+  storage_available: {
+    size: number;
+    unit: string;
+  };
+  total_size: {
+    size: number;
+    unit: string;
+  };
+};
+
+export type TopArrow = {
+  value: number;
+  unit: string;
+  color: string;
+};
+
+export type BottomArrow = {
+  value: number;
+  unit: string;
+  color: string;
+};

renderer/types/Minor.ts

@@ -9,3 +9,11 @@ export type MinorParser = {
     };
   }[];
 };
+
+export type Metrics = {
+  data_packaged: number;
+  data_unpackaged: number;
+  earnings: number;
+  hash_rate: number;
+  vdf_time_lower_bound: number;
+};

renderer/util/minor.ts

@@ -0,0 +1,4 @@
+export function convertToGbFromPetabytes(value: number): number {
+  const gigabytes = value * 1e9; // 1 petabyte = 1e9 gigabytes
+  return parseFloat(gigabytes.toFixed(2));
+}