Skip to content

Commit 4042a25

Browse files
hlollihlolli
committed
fix: merge conflicts
2 parents 19d1979 + a74f13c commit 4042a25

File tree

12 files changed

+158
-39
lines changed

12 files changed

+158
-39
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
@@ -38,6 +38,7 @@
3838
"arweave": "^1.14.4",
3939
"electron-serve": "^1.2.0",
4040
"electron-store": "^8.1.0",
41+
"filesize": "^10.1.0",
4142
"next-redux-wrapper": "^8.1.0",
4243
"parse-prometheus-text-format": "^1.1.1",
4344
"ramda": "^0.29.1",

‎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: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { BottomArrow, TopArrow } from "./Arrows";
2-
import {
3-
useDataPacked,
4-
useStorageAvailable,
5-
useWeaveSize,
6-
} from "../../store/metricsSlice/metricsSliceHooks";
72

8-
export default function DataRelatedChart() {
9-
const { dataPacked } = useDataPacked();
10-
const { storageAvailable } = useStorageAvailable();
11-
const { weaveSize } = useWeaveSize();
3+
interface DataRelatedChartProps {
4+
weaveSize: number;
5+
storageAvailable: number;
6+
dataPacked: number;
7+
}
128

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

‎renderer/components/DataRelated.tsx

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

‎renderer/pages/dashboard.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useCallback, useEffect, useState } from "react";
22
import { useDispatch } from "react-redux";
33
import ScrollSpy from "react-ui-scrollspy";
4-
import { useEarnings, useHashRate } from "../store/metricsSlice/metricsSliceHooks";
5-
import DataRelatedChart from "../components/Charts/DataRelated";
64
import { MainLayout } from "../layouts/MainLayout";
5+
import { useEarnings, useHashRate } from "../store/metricsSlice/metricsSliceHooks";
76
import { setMetricsState } from "../store/metricsSlice/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)