From 0d34a550d6f174cbadbd83a849d01819a5724167 Mon Sep 17 00:00:00 2001
From: Data-Name-ID <data.name.id@yandex.ru>
Date: Tue, 2 Apr 2024 15:38:10 +0300
Subject: [PATCH] [feat] trees

---
 frontend/package-lock.json                  |  6 +++++
 frontend/package.json                       |  1 +
 frontend/src/App.tsx                        |  2 --
 frontend/src/components/pages/Tree/Tree.jsx | 21 ++++++++++++++++
 frontend/src/mytree.jsx                     | 28 +++++++++++++++++++++
 5 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/pages/Tree/Tree.jsx
 create mode 100644 frontend/src/mytree.jsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5f8e88d..6b417fe 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "skill-hub",
       "version": "0.0.0",
       "dependencies": {
+        "@balkangraph/orgchart.js": "^8.14.19",
         "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -90,6 +91,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@balkangraph/orgchart.js": {
+      "version": "8.14.19",
+      "resolved": "https://registry.npmjs.org/@balkangraph/orgchart.js/-/orgchart.js-8.14.19.tgz",
+      "integrity": "sha512-pa4km/5mTWmMcVLBIsHcuC73s4y1La9BOx4AU9ilGetQwlAbWfrFcSU7hf8FO49otmk1AysfBhPrcBoRl2i46w=="
+    },
     "node_modules/@esbuild/darwin-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index cadf074..0d708c9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@balkangraph/orgchart.js": "^8.14.19",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5195a52..f9e5a5a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,8 +7,6 @@ import {
 } from "react-router-dom";
 import Landing from "./components/pages/Landing/Landing";
 import Main from "./components/pages/Main/Main";
-import Teams from "./components/pages/Teams/Teams";
-import MyTeams from "./components/pages/MyTeams/MyTeams";
 import Successful from "./components/pages/Successful/Successful";
 import AdminPage from "./components/pages/Admin/Admin";
 
diff --git a/frontend/src/components/pages/Tree/Tree.jsx b/frontend/src/components/pages/Tree/Tree.jsx
new file mode 100644
index 0000000..353e8e8
--- /dev/null
+++ b/frontend/src/components/pages/Tree/Tree.jsx
@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import OrgChart from "../../../mytree.jsx";
+
+const Tree = () => {
+  return (
+    <div style={{ height: "100%" }}>
+      <OrgChart
+        nodes={[
+          { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
+          { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
+          { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
+          { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg" },
+          { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://cdn.balkan.app/shared/6.jpg" },
+          { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://cdn.balkan.app/shared/7.jpg" },
+          { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://cdn.balkan.app/shared/8.jpg" },
+        ]}
+      />
+    </div>
+  );
+};
+export default Tree;
diff --git a/frontend/src/mytree.jsx b/frontend/src/mytree.jsx
new file mode 100644
index 0000000..d8d366a
--- /dev/null
+++ b/frontend/src/mytree.jsx
@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import OrgChart from "@balkangraph/orgchart.js";
+
+export default class Chart extends Component {
+  constructor(props) {
+    super(props);
+    this.divRef = React.createRef();
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentDidMount() {
+    this.chart = new OrgChart(this.divRef.current, {
+      nodes: this.props.nodes,
+
+      nodeBinding: {
+        field_0: "name",
+        img_0: "img",
+      },
+    });
+  }
+
+  render() {
+    return <div id="tree" ref={this.divRef}></div>;
+  }
+}