Nashe

client/package.json

@@ -12,6 +12,7 @@
     "@types/node": "^16.10.3",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "d3": "^7.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

client/src/App.js

@@ -20,8 +20,8 @@ function App() {
 
   return (
     <Fragment>
-      <div className="flex flex-row h-screen w-screen">
-        <ul className="flex flex-col bg-gray-100 h-1/2 w-1/6">
+      <div className="flex flex-row min-h-screen w-screen">
+        <ul className="flex flex-col bg-gray-100 w-1/6">
           <li className="bg-green-100 p-1 hover:bg-green-300 text-center cursor-pointer">
             <input id="Home"
                    className="bg-transparent"
@@ -44,7 +44,7 @@ function App() {
                    value="Graph"/>
           </li>
         </ul>
-        <div className="bg-gray-200 flex-auto h-1/2 p-10">
+        <div className="bg-gray-200 flex-auto p-10 ">
           <Content view={view} />
         </div>
       </div>

client/src/Graph/Graph.jsx

@@ -23,11 +23,20 @@ async function fetchData(host) {
   return data;
 }
 
+const showData = () => {
+  fetchData('http://localhost:5000/api').then((data) => {
+    // const ans = Object.values(data[3]);
+    console.log(data);
+  });
+};
+
 function Graph(){
   return (
-    <p>
-      Graph is work!
-    </p>
+
+    <button className="bg-blue-400 px-2 py-4"
+      onClick={showData}>
+      Graph the info
+    </button>
   )
 }
 

server/generate_data/entry_point.py

@@ -13,7 +13,7 @@
 
 
 class HelloWorld(Resource):
-    json = pd.read_json('outj.json')
+    json = pd.read_json('outj2.json')
     to_json = json.to_dict()
     @cross_origin()
     def get(self):