feat: data related component added

ArweaveTeam · Nov 20, 2023 · b19224b · b19224b
1 parent b2bef12
commit b19224b
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 13 deletions.
diff --git a/renderer/components/Asset.tsx b/renderer/components/Asset.tsx
@@ -1,7 +1,9 @@
 const WalletSvg = "../wallet.svg";
 const ArweaveLogo = "../arweave_logo.svg";
+const ArrowSvg = "../arrow.svg";
 
 export const ASSET = {
   WalletSvg,
   ArweaveLogo,
+  ArrowSvg,
 };
diff --git a/renderer/components/Charts/DataRelated.tsx b/renderer/components/Charts/DataRelated.tsx
@@ -1,14 +1,15 @@
 import { BottomArrow, TopArrow } from "./Arrows";
-import { useDataPacked, useStorageAvailable, useWeaveSize } from "../../store/metricsSliceHooks";
 
-export default function DataRelatedChart() {
-  const { dataPacked } = useDataPacked();
-  const { storageAvailable } = useStorageAvailable();
-  const { weaveSize } = useWeaveSize();
+interface Props {
+  weaveSize: number;
+  storageAvailable: number;
+  dataPacked: number;
+}
 
+export default function DataRelatedChart({ weaveSize, storageAvailable, dataPacked }: Props) {
   // NOTE maybe this component should pick all stuff from storage directly
   return (
-    <div className="w-96 h-20 flex items-center mt-20">
+    <div className="w-full h-16 flex items-center mt-20">
       <div
         className="bg-[#7BF05E] hover:bg-[#6ad050] h-full cursor-pointer relative group"
         style={{

diff --git a/renderer/components/DataRelated.tsx b/renderer/components/DataRelated.tsx
@@ -0,0 +1,105 @@
+import DataRelatedChart from "./Charts/DataRelated";
+import { ASSET } from "./Asset";
+import { useDataPacked, useStorageAvailable, useWeaveSize } from "../store/metricsSliceHooks";
+import { filesize } from "filesize/dist/filesize.esm.js";
+import React from "react";
+
+export default function DataRelated() {
+  const { dataPacked } = useDataPacked();
+  const { storageAvailable } = useStorageAvailable();
+  const { weaveSize } = useWeaveSize();
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const handleOpen = React.useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+
+  const calculateSize = React.useCallback(
+    (size: number | undefined): string => {
+      return filesize(size || 0, { standard: "si" });
+    },
+    [dataPacked, storageAvailable, weaveSize],
+  );
+
+  return (
+    <div id="sub-section-1-1" className={` border-black ${isOpen ? "" : "border-b"}`}>
+      <div className="border border-b-0 border-black py-2 px-4 flex items-center justify-between">
+        <h3 className="text-lg font-normal mb-2">Data Related</h3>
+
+        <button className="border border-black px-5 rounded-full bg-white" onClick={handleOpen}>
+          <img
+            src={ASSET.ArrowSvg}
+            alt="arrow"
+            className={`w-4 h-4 transform duration-300 ${isOpen ? "rotate-0" : "rotate-180"}`}
+          />
+        </button>
+      </div>
+
+      <div
+        className={`w-full flex transition-all duration-300 ${
+          isOpen ? "h-auto  opacity-100" : "h-0 overflow-hidden opacity-0"
+        }`}
+      >
+        <div className="w-2/5 flex flex-col items-center px-10">
+          <DataRelatedChart
+            dataPacked={dataPacked || 0}
+            storageAvailable={storageAvailable || 0}
+            weaveSize={weaveSize || 0}
+          />
+        </div>
+
+        <div className="w-3/5 border border-b-0 border-black flex">
+          <div className="w-1/2">
+            <div className="border-r border-b border-black flex items-center pl-2 py-1 bg-white">
+              <div className="h-3 w-3 bg-[#7BF05E] mr-2 rounded-sm"></div>
+              <h3 className="text-sm">Data Packed</h3>
+            </div>
+            <div className="border-r border-b border-black">
+              <div className="w-full flex h-20 bg-white">
+                <span className="w-full h-full flex items-center justify-center text-xl">
+                  {calculateSize(dataPacked)}
+                </span>
+                <span className="w-full h-full flex items-center justify-center border-l border-dashed border-black text-xl">
+                  ~ 2%
+                </span>
+              </div>
+
+              <div className="w-full h-20 border-black border-t flex items-center pl-2">
+                <span className="h-3 w-3 bg-[#989797] mr-2 rounded-sm"></span>
+                <span className="h-full flex items-center justify-center text-sm">
+                  Total Weave Size
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="w-1/2">
+            <div className="border-b border-black flex items-center pl-2 py-1 bg-white">
+              <div className="h-3 w-3 bg-[#1D2988] mr-2 rounded-sm"></div>
+              <h3 className="text-sm">Storage Available</h3>
+            </div>
+            <div className="border-b border-black">
+              <div className="w-full flex h-20 bg-white">
+                <span className="w-full h-full flex items-center justify-center text-xl">
+                  {calculateSize(storageAvailable)}
+                </span>
+                <span className="w-full h-full flex items-center justify-center border-l border-dashed border-black text-xl">
+                  ~ 4%
+                </span>
+              </div>
+
+              <div className="w-full flex h-20 border-t border-black">
+                <span className="w-full h-full flex items-center justify-center text-xl">
+                  {calculateSize(weaveSize)}
+                </span>
+                <span className="w-full h-full flex items-center justify-center border-l border-dashed border-black text-xl">
+                  ~ 4%
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/pages/dashboard.tsx b/renderer/pages/dashboard.tsx
@@ -2,10 +2,10 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import ScrollSpy from "react-ui-scrollspy";
 import { useEarnings, useHashRate } from "../store/metricsSliceHooks";
-import DataRelatedChart from "../components/Charts/DataRelated";
 import { MainLayout } from "../layouts";
 import { setMetricsState } from "../store/metricsSlice";
 import { SetMetricsStateActionPayload } from "../../types/metrics";
+import DataRelated from "../components/DataRelated";
 
 interface MenuItems {
   label: string;
@@ -126,19 +126,17 @@ export default function DashboardPage() {
           </nav>
         </div>
 
-        <div className="md:w-3/4 px-4 border-l border-gray-300 pt-8">
+        <div className="w-full px-4 border-l border-gray-300 pt-8">
           <ScrollSpy
             useBoxMethod={true}
             activeClass={"active-scrollspy-menu"}
             onUpdateCallback={handleScrollUpdate}
           >
             <section id="section-1" className="mb-8">
               <h2 className="text-2xl font-bold mb-4">Core</h2>
+
               <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>
-                  <DataRelatedChart />
-                </div>
+                <DataRelated />
                 <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>
                   {typeof hashRate === "number" && (

diff --git a/renderer/public/arrow.svg b/renderer/public/arrow.svg
diff --git a/renderer/tailwind.config.js b/renderer/tailwind.config.js
@@ -3,7 +3,11 @@
 module.exports = {
   content: ["./renderer/pages/**/*.{js,ts,jsx,tsx}", "./renderer/components/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      borderWidth: {
+        DEFAULT: "0.2px",
+      },
+    },
   },
   plugins: [],
 };