added graph library

keyko-io · May 16, 2023 · 54f2ed7 · 54f2ed7
1 parent 2197983
commit 54f2ed7
Show file tree

Hide file tree

Showing 12 changed files with 243 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Fil+ metrics</title>
+    <title>Fil+ Metrics</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git 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
diff --git a/src/assets/bug.svg b/src/assets/bug.svg
diff --git a/src/assets/user.svg b/src/assets/user.svg
diff --git 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
@@ -0,0 +1,67 @@
+export const CubeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+    />
+  </svg>
+)
+
+export const UserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+    />
+  </svg>
+)
+
+export const BugIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082"
+    />
+  </svg>
+)
+
+export const InfoIcon = ({ style }: { style?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className={`w-6 h-6 ${style}`}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+    />
+  </svg>
+)
diff --git 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 <div>Blockchain</div>
+  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 (
+    <div className="bg-white rounded-md flex flex-col p-4">
+      <div className="flex justify-between px-10">
+        <h4 className="text-lg font-semibold">Proposal</h4>
+
+        <InfoIcon />
+      </div>
+
+      <ReactEcharts option={option} />
+    </div>
+  )
 }
 
 export default Blockchain
diff --git 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 <div>hello i am bugs page</div>
 }
 

diff --git a/src/routes/Root.tsx b/src/routes/Root.tsx
@@ -1,53 +1,62 @@
-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: <CubeIcon />,
   },
   {
     name: "User",
     to: "user",
-    svg: user,
+    svg: <UserIcon />,
   },
   {
     name: "Bugs",
     to: "bugs",
-    svg: bug,
+    svg: <BugIcon />,
   },
 ]
 
 function Root() {
   return (
     <section className="flex">
       <nav className="w-64 min-h-screen shadow-md">
-        <img
-          src={logo}
-          alt="logo"
-          className="h-16 w-full cursor-pointer my-4"
-        />
-        <div className="flex flex-col px-6">
+        <NavLink to="/">
+          <img
+            src={logo}
+            alt="logo"
+            className="h-16 w-full cursor-pointer my-4"
+          />
+        </NavLink>
+
+        <div className="flex flex-col">
           {navigationItems.map((item) => {
             return (
-              <Link
+              <NavLink
+                key={item.name}
                 to={item.to}
-                className="flex h-6 items-center w-full space-x-4 py-6 cursor-pointer"
+                className={({ isActive }) =>
+                  `flex items-center w-full space-x-4 py-3 px-6 cursor-pointer ${
+                    isActive &&
+                    "bg-gradient-to-r from-cyan-500 to-blue-500 text-white"
+                  }`
+                }
               >
-                <img src={item.svg} alt="blockchain" className="h-6" />
+                {item.svg}
                 <span>{item.name}</span>
-              </Link>
+              </NavLink>
             )
           })}
         </div>
       </nav>
 
-      <main className="bg-[#E7E7E7] flex-1">
-        <Outlet />
+      <main className="bg-[#E7E7E7] flex-1 p-8">
+        <div className="max-w-[1200px]">
+          <Outlet />
+        </div>
       </main>
     </section>
   )

diff --git a/src/routes/User.tsx b/src/routes/User.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 const User = () => {
   return <div>User</div>
 }