diff --git a/index.html b/index.html index 4c71c08..bd3c439 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Fil+ metrics + Fil+ Metrics
diff --git a/package-lock.json b/package-lock.json index fd39ada..7fca024 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.0.0", "dependencies": { "axios": "^1.4.0", + "echarts": "^5.4.2", + "echarts-for-react": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.1" @@ -1467,6 +1469,33 @@ "node": ">=6.0.0" } }, + "node_modules/echarts": { + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz", + "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.4.3" + } + }, + "node_modules/echarts-for-react": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-3.0.2.tgz", + "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "size-sensor": "^1.0.1" + }, + "peerDependencies": { + "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0", + "react": "^15.0.0 || >=16.0.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/electron-to-chromium": { "version": "1.4.396", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.396.tgz", @@ -1739,8 +1768,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { "version": "3.2.12", @@ -2924,6 +2952,11 @@ "node": ">=8" } }, + "node_modules/size-sensor": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.1.tgz", + "integrity": "sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA==" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -3322,6 +3355,19 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zrender": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.3.tgz", + "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } } } diff --git a/package.json b/package.json index b8fd069..f5f0e78 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ }, "dependencies": { "axios": "^1.4.0", + "echarts": "^5.4.2", + "echarts-for-react": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.1" diff --git a/src/assets/blockchain.svg b/src/assets/blockchain.svg deleted file mode 100644 index 864dbb5..0000000 --- a/src/assets/blockchain.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/bug.svg b/src/assets/bug.svg deleted file mode 100644 index dd65d0d..0000000 --- a/src/assets/bug.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/user.svg b/src/assets/user.svg deleted file mode 100644 index 54dfc0f..0000000 --- a/src/assets/user.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/config.ts b/src/config.ts index 9ccd2e8..c07edb9 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,3 +1,4 @@ export const config = { - apiUri: "http://localhost:4000", + // apiUri: "http://localhost:4000", + apiUri: "https://test.verification.rocks", } diff --git a/src/icons/index.tsx b/src/icons/index.tsx new file mode 100644 index 0000000..4ca86bf --- /dev/null +++ b/src/icons/index.tsx @@ -0,0 +1,67 @@ +export const CubeIcon = () => ( + + + +) + +export const UserIcon = () => ( + + + +) + +export const BugIcon = () => ( + + + +) + +export const InfoIcon = ({ style }: { style?: string }) => ( + + + +) diff --git a/src/routes/Blockchain.tsx b/src/routes/Blockchain.tsx index 7592303..4291aaa 100644 --- a/src/routes/Blockchain.tsx +++ b/src/routes/Blockchain.tsx @@ -1,7 +1,75 @@ -import React from "react" +import ReactEcharts from "echarts-for-react" +import { InfoIcon } from "../icons" const Blockchain = () => { - return
Blockchain
+ const data = [ + { day: "may1", positive: 28, negative: 2 }, + { day: "may2", positive: 12, negative: 3 }, + { day: "may3", positive: 19, negative: 3 }, + { day: "may4", positive: 20, negative: 3 }, + { day: "may5", positive: 21, negative: 3 }, + { day: "may6", positive: 29, negative: 3 }, + { day: "may7", positive: 30, negative: 3 }, + ] + + const chartData = data.map((item) => ({ + name: item.day, + value: [item.negative, item.positive], + })) + + const option = { + // legend: { + // data: ["Olumsuz", "Olumlu"], + // }, + tooltip: {}, + grid: { + left: "5%", + right: "5%", + top: "10%", + bottom: "10%", + }, + xAxis: { + type: "category", + data: data.map((item) => item.day), + }, + yAxis: { + type: "value", + }, + series: [ + { + name: "Olumlu", + stack: "total", + type: "bar", + data: chartData.map((item) => item.value[1]), + itemStyle: { + color: "#2196F3", + }, + barWidth: 60, + }, + { + name: "Olumsuz", + stack: "total", + type: "bar", + data: chartData.map((item) => item.value[0]), + itemStyle: { + color: "#FF5722", + }, + barWidth: 60, + }, + ], + } + + return ( +
+
+

Proposal

+ + +
+ + +
+ ) } export default Blockchain diff --git a/src/routes/Bugs.tsx b/src/routes/Bugs.tsx index a2c481d..08b75c1 100644 --- a/src/routes/Bugs.tsx +++ b/src/routes/Bugs.tsx @@ -1,4 +1,29 @@ +import axios from "axios" +import { config } from "../config" +import { isAxiosResponseSuccess } from "../utils" +import { useEffect } from "react" + const Bugs = () => { + const fetchOpenBugsCount = async () => { + try { + const url = `${config.apiUri}/stats/issues` + const response = await axios.get(url) + if (isAxiosResponseSuccess(response)) { + return response.data + } + console.log("error") + console.log(response.status) + return { count: 0 } + } catch (error) { + console.log("error") + console.log(error) + return { count: 0 } + } + } + useEffect(() => { + fetchOpenBugsCount().then((data) => console.log(data)) + }, []) + return
hello i am bugs page
} diff --git a/src/routes/Root.tsx b/src/routes/Root.tsx index 80f877f..7f23c1f 100644 --- a/src/routes/Root.tsx +++ b/src/routes/Root.tsx @@ -1,24 +1,22 @@ -import { Outlet, Link } from "react-router-dom" +import { Outlet, NavLink } from "react-router-dom" import logo from "../assets/fil-plus.svg" -import blockchain from "../assets/blockchain.svg" -import bug from "../assets/bug.svg" -import user from "../assets/user.svg" +import { BugIcon, CubeIcon, UserIcon } from "../icons" const navigationItems = [ { name: "Blockchain", to: "", - svg: blockchain, + svg: , }, { name: "User", to: "user", - svg: user, + svg: , }, { name: "Bugs", to: "bugs", - svg: bug, + svg: , }, ] @@ -26,28 +24,39 @@ function Root() { return (
-
- +
+
+ +
) diff --git a/src/routes/User.tsx b/src/routes/User.tsx index ef9dc16..74cb515 100644 --- a/src/routes/User.tsx +++ b/src/routes/User.tsx @@ -1,5 +1,3 @@ -import React from "react" - const User = () => { return
User
}