Skip to content

Commit a74f13c

Browse files
mrsaifullah52mrsaifullah52
authored
Merge pull request #13 from ArweaveTeam/dashboard-ui-saif
Data related ui
2 parents f0cc4a1 + b19224b commit a74f13c

File tree

12 files changed

+149
-34
lines changed

12 files changed

+149
-34
lines changed

‎package-lock.json

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"arweave": "^1.14.4",
3838
"electron-serve": "^1.1.0",
3939
"electron-store": "^8.1.0",
40+
"filesize": "^10.1.0",
4041
"next-redux-wrapper": "^8.1.0",
4142
"parse-prometheus-text-format": "^1.1.1",
4243
"react-redux": "^8.1.3",

‎renderer/components/Asset.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
const WalletSvg = "../wallet.svg";
22
const ArweaveLogo = "../arweave_logo.svg";
3+
const ArrowSvg = "../arrow.svg";
34

45
export const ASSET = {
56
WalletSvg,
67
ArweaveLogo,
8+
ArrowSvg,
79
};

‎renderer/components/Charts/Arrows.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,45 @@
11
import React from "react";
2-
import { fmtSize } from "../../util/minor";
2+
import { filesize } from "filesize/dist/filesize.esm.js";
33

44
interface ArrowProps {
55
value: number | null;
66
color: string;
77
}
88

99
export function TopArrow({ value, color }: ArrowProps) {
10-
const { value: displayValue, unit } = fmtSize(value || 0);
1110
return (
1211
<div className="absolute -top-5 left-1/2 flex">
1312
<div className="w-[1px] h-5 bg-gray-500"></div>
14-
1513
<div className="w-[1px] h-[20px] bg-gray-500 transform rotate-90 ml-[9px] -mt-[10px]"></div>
16-
1714
<div
1815
className="w-[10px] h-[20px] bg-[#A7A7A7] ml-[15px] -mt-[10px] group-hover:w-[15px]
1916
transition-all duration-300"
2017
style={{ backgroundColor: color }}
2118
></div>
22-
2319
<div className="w-fit text-xs flex items-center gap-2 -mt-[20px] ml-[5px]">
24-
<span>{displayValue}</span> <span>{unit}</span>
20+
<span className="inline-block w-20">
21+
{typeof value === "number" && filesize(value, { standard: "si" })}
22+
</span>
2523
</div>
2624
</div>
2725
);
2826
}
2927

3028
export function BottomArrow({ value, color }: ArrowProps) {
31-
const { value: displayValue, unit } = fmtSize(value || 0);
3229
return (
3330
<div className="absolute -bottom-7 left-1/2 flex">
3431
<div className="w-[1px] h-5 bg-gray-500 mt-5"></div>
3532

3633
<div className="w-[1px] h-[20px] bg-gray-500 transform rotate-90 ml-[9px] mt-[30px]"></div>
37-
3834
<div
3935
className="w-[10px] h-[20px] ml-[15px] mt-[30px] group-hover:w-[15px]
4036
transition-all duration-300"
4137
style={{ backgroundColor: color }}
4238
></div>
43-
4439
<div className="w-fit text-xs flex items-center gap-2 mt-[30px] ml-[5px]">
45-
<span>{displayValue}</span> <span>{unit}</span>
40+
<span className="inline-block w-20">
41+
{typeof value === "number" && filesize(value, { standard: "si" })}
42+
</span>
4643
</div>
4744
</div>
4845
);

‎renderer/components/Charts/DataRelated.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { BottomArrow, TopArrow } from "./Arrows";
2-
import { useDataPacked, useStorageAvailable, useWeaveSize } from "../../store/metricsSliceHooks";
32

4-
export default function DataRelatedChart() {
5-
const { dataPacked } = useDataPacked();
6-
const { storageAvailable } = useStorageAvailable();
7-
const { weaveSize } = useWeaveSize();
3+
interface Props {
4+
weaveSize: number;
5+
storageAvailable: number;
6+
dataPacked: number;
7+
}
88

9+
export default function DataRelatedChart({ weaveSize, storageAvailable, dataPacked }: Props) {
910
// NOTE maybe this component should pick all stuff from storage directly
1011
return (
11-
<div className="w-96 h-20 flex items-center mt-20">
12+
<div className="w-full h-16 flex items-center mt-20">
1213
<div
1314
className="bg-[#7BF05E] hover:bg-[#6ad050] h-full cursor-pointer relative group"
1415
style={{

‎renderer/components/DataRelated.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import DataRelatedChart from "./Charts/DataRelated";
2+
import { ASSET } from "./Asset";
3+
import { useDataPacked, useStorageAvailable, useWeaveSize } from "../store/metricsSliceHooks";
4+
import { filesize } from "filesize/dist/filesize.esm.js";
5+
import React from "react";
6+
7+
export default function DataRelated() {
8+
const { dataPacked } = useDataPacked();
9+
const { storageAvailable } = useStorageAvailable();
10+
const { weaveSize } = useWeaveSize();
11+
12+
const [isOpen, setIsOpen] = React.useState<boolean>(false);
13+
const handleOpen = React.useCallback(() => {
14+
setIsOpen(!isOpen);
15+
}, [isOpen]);
16+
17+
const calculateSize = React.useCallback(
18+
(size: number | undefined): string => {
19+
return filesize(size || 0, { standard: "si" });
20+
},
21+
[dataPacked, storageAvailable, weaveSize],
22+
);
23+
24+
return (
25+
<div id="sub-section-1-1" className={` border-black ${isOpen ? "" : "border-b"}`}>
26+
<div className="border border-b-0 border-black py-2 px-4 flex items-center justify-between">
27+
<h3 className="text-lg font-normal mb-2">Data Related</h3>
28+
29+
<button className="border border-black px-5 rounded-full bg-white" onClick={handleOpen}>
30+
<img
31+
src={ASSET.ArrowSvg}
32+
alt="arrow"
33+
className={`w-4 h-4 transform duration-300 ${isOpen ? "rotate-0" : "rotate-180"}`}
34+
/>
35+
</button>
36+
</div>
37+
38+
<div
39+
className={`w-full flex transition-all duration-300 ${
40+
isOpen ? "h-auto opacity-100" : "h-0 overflow-hidden opacity-0"
41+
}`}
42+
>
43+
<div className="w-2/5 flex flex-col items-center px-10">
44+
<DataRelatedChart
45+
dataPacked={dataPacked || 0}
46+
storageAvailable={storageAvailable || 0}
47+
weaveSize={weaveSize || 0}
48+
/>
49+
</div>
50+
51+
<div className="w-3/5 border border-b-0 border-black flex">
52+
<div className="w-1/2">
53+
<div className="border-r border-b border-black flex items-center pl-2 py-1 bg-white">
54+
<div className="h-3 w-3 bg-[#7BF05E] mr-2 rounded-sm"></div>
55+
<h3 className="text-sm">Data Packed</h3>
56+
</div>
57+
<div className="border-r border-b border-black">
58+
<div className="w-full flex h-20 bg-white">
59+
<span className="w-full h-full flex items-center justify-center text-xl">
60+
{calculateSize(dataPacked)}
61+
</span>
62+
<span className="w-full h-full flex items-center justify-center border-l border-dashed border-black text-xl">
63+
~ 2%
64+
</span>
65+
</div>
66+
67+
<div className="w-full h-20 border-black border-t flex items-center pl-2">
68+
<span className="h-3 w-3 bg-[#989797] mr-2 rounded-sm"></span>
69+
<span className="h-full flex items-center justify-center text-sm">
70+
Total Weave Size
71+
</span>
72+
</div>
73+
</div>
74+
</div>
75+
76+
<div className="w-1/2">
77+
<div className="border-b border-black flex items-center pl-2 py-1 bg-white">
78+
<div className="h-3 w-3 bg-[#1D2988] mr-2 rounded-sm"></div>
79+
<h3 className="text-sm">Storage Available</h3>
80+
</div>
81+
<div className="border-b border-black">
82+
<div className="w-full flex h-20 bg-white">
83+
<span className="w-full h-full flex items-center justify-center text-xl">
84+
{calculateSize(storageAvailable)}
85+
</span>
86+
<span className="w-full h-full flex items-center justify-center border-l border-dashed border-black text-xl">
87+
~ 4%
88+
</span>
89+
</div>
90+
91+
<div className="w-full flex h-20 border-t border-black">
92+
<span className="w-full h-full flex items-center justify-center text-xl">
93+
{calculateSize(weaveSize)}
94+
</span>
95+
<span className="w-full h-full flex items-center justify-center border-l border-dashed border-black text-xl">
96+
~ 4%
97+
</span>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
);
105+
}

‎renderer/pages/dashboard.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React, { useCallback, useEffect, useState } from "react";
22
import { useDispatch } from "react-redux";
33
import ScrollSpy from "react-ui-scrollspy";
44
import { useEarnings, useHashRate } from "../store/metricsSliceHooks";
5-
import DataRelatedChart from "../components/Charts/DataRelated";
65
import { MainLayout } from "../layouts";
76
import { setMetricsState } from "../store/metricsSlice";
87
import { SetMetricsStateActionPayload } from "../../types/metrics";
8+
import DataRelated from "../components/DataRelated";
99

1010
interface MenuItems {
1111
label: string;
@@ -126,19 +126,17 @@ export default function DashboardPage() {
126126
</nav>
127127
</div>
128128

129-
<div className="md:w-3/4 px-4 border-l border-gray-300 pt-8">
129+
<div className="w-full px-4 border-l border-gray-300 pt-8">
130130
<ScrollSpy
131131
useBoxMethod={true}
132132
activeClass={"active-scrollspy-menu"}
133133
onUpdateCallback={handleScrollUpdate}
134134
>
135135
<section id="section-1" className="mb-8">
136136
<h2 className="text-2xl font-bold mb-4">Core</h2>
137+
137138
<div className="space-y-4">
138-
<div id="sub-section-1-1" className="bg-gray-100 p-4 rounded-lg h-64">
139-
<h3 className="text-lg font-medium mb-2">Data Related</h3>
140-
<DataRelatedChart />
141-
</div>
139+
<DataRelated />
142140
<div id="sub-section-1-2" className="bg-gray-100 p-4 rounded-lg h-64">
143141
<h3 className="text-lg font-medium mb-2">Hash Rate</h3>
144142
{typeof hashRate === "number" && (

‎renderer/public/arrow.svg

Lines changed: 3 additions & 0 deletions
Loading

‎renderer/tailwind.config.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
module.exports = {
44
content: ["./renderer/pages/**/*.{js,ts,jsx,tsx}", "./renderer/components/**/*.{js,ts,jsx,tsx}"],
55
theme: {
6-
extend: {},
6+
extend: {
7+
borderWidth: {
8+
DEFAULT: "0.2px",
9+
},
10+
},
711
},
812
plugins: [],
913
};

‎renderer/tsconfig.json

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
11
{
22
"extends": "../tsconfig.json",
3-
"include": [
4-
"next-env.d.ts",
5-
"**/*.ts",
6-
"**/*.tsx"
7-
],
8-
"exclude": [
9-
"node_modules"
10-
],
11-
"compilerOptions": {
12-
"module": "esnext"
13-
}
3+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../types"],
4+
"exclude": ["node_modules"]
145
}

‎tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"noEmit": true,
1010
"incremental": true,
1111
"esModuleInterop": true,
12+
"allowSyntheticDefaultImports": true,
1213
"module": "NodeNext",
1314
"moduleResolution": "NodeNext",
1415
"resolveJsonModule": true,

‎types/modules.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
declare module "parse-prometheus-text-format";
2+
declare module "filesize/dist/filesize.esm.js" {
3+
export { filesize } from "filesize";
4+
}

0 commit comments

Comments
 (0)