Merge pull request #13 from ArweaveTeam/dashboard-ui-saif

Data related ui
ArweaveTeam · Nov 21, 2023 · a74f13c · a74f13c
2 parents f0cc4a1 + b19224b
commit a74f13c
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "arweave": "^1.14.4",
     "electron-serve": "^1.1.0",
     "electron-store": "^8.1.0",
+    "filesize": "^10.1.0",
     "next-redux-wrapper": "^8.1.0",
     "parse-prometheus-text-format": "^1.1.1",
     "react-redux": "^8.1.3",

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/Arrows.tsx b/renderer/components/Charts/Arrows.tsx
@@ -1,48 +1,45 @@
 import React from "react";
-import { fmtSize } from "../../util/minor";
+import { filesize } from "filesize/dist/filesize.esm.js";
 
 interface ArrowProps {
   value: number | null;
   color: string;
 }
 
 export function TopArrow({ value, color }: ArrowProps) {
-  const { value: displayValue, unit } = fmtSize(value || 0);
   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>{displayValue}</span> <span>{unit}</span>
+        <span className="inline-block w-20">
+          {typeof value === "number" && filesize(value, { standard: "si" })}
+        </span>
       </div>
     </div>
   );
 }
 
 export function BottomArrow({ value, color }: ArrowProps) {
-  const { value: displayValue, unit } = fmtSize(value || 0);
   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>{displayValue}</span> <span>{unit}</span>
+        <span className="inline-block w-20">
+          {typeof value === "number" && filesize(value, { standard: "si" })}
+        </span>
       </div>
     </div>
   );

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: [],
 };
diff --git a/renderer/tsconfig.json b/renderer/tsconfig.json
@@ -1,14 +1,5 @@
 {
   "extends": "../tsconfig.json",
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "compilerOptions": {
-    "module": "esnext"
-  }
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../types"],
+  "exclude": ["node_modules"]
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,6 +9,7 @@
     "noEmit": true,
     "incremental": true,
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "resolveJsonModule": true,

diff --git a/types/modules.d.ts b/types/modules.d.ts
@@ -1 +1,4 @@
 declare module "parse-prometheus-text-format";
+declare module "filesize/dist/filesize.esm.js" {
+  export { filesize } from "filesize";
+}