fixed display issues -- frank

atms-api/src/main/java/pwc/taxtech/atms/controller/OrganizationHKController.java

@@ -10,6 +10,7 @@ import pwc.taxtech.atms.common.message.ErrorMessage;
 import pwc.taxtech.atms.dto.OperationResultDto;
 import pwc.taxtech.atms.dto.navtree.NavTreeDto;
 import pwc.taxtech.atms.exception.ApplicationException;
+import pwc.taxtech.atms.organization.dpo.OrgShareholderTreeDataDto;
 import pwc.taxtech.atms.organization.dpo.OrganizationDirectorDto;
 import pwc.taxtech.atms.organization.dpo.OrganizationHKDto;
 import pwc.taxtech.atms.organization.dpo.OrganizationShareholderDto;
@@ -179,4 +180,11 @@ public class OrganizationHKController {
 //        return organizationHKService.getShareholders(orgId);
 //    }
 
+    @RequestMapping(value = "getOrgTreeData", method = RequestMethod.GET)
+    public @ResponseBody
+    OperationResultDto<List<OrgShareholderTreeDataDto>> getOrgTreeData(@RequestParam("orgId") Long orgId) {
+        logger.info("POST /api/v1/orgHK/getOrgTreeData");
+        return organizationHKService.getOrgTreeData(orgId);
+    }
+
 }

atms-api/src/main/java/pwc/taxtech/atms/service/impl/OrganizationHKServiceImpl.java

@@ -645,4 +645,24 @@ public class OrganizationHKServiceImpl {
         resultDto.setResult(true);
         return resultDto;
     }
+
+    public OperationResultDto<List<OrgShareholderTreeDataDto>> getOrgTreeData(Long orgId) {
+        OperationResultDto<List<OrgShareholderTreeDataDto>> resultDto = new OperationResultDto<>();
+        List<OrgShareholderTreeDataDto> orgShareholderTreeDataDtos = new ArrayList<>();
+
+        List<ShareholderDto> shareholderDtos = organizationShareholderExtMapper.selectShareholder(orgId);
+
+
+
+
+        return resultDto;
+    }
+
+    private OrgShareholderTreeDataDto buildShareTreeNode(ShareholderDto shareholderDto){
+        OrgShareholderTreeDataDto orgShareholderTreeDataDto = new OrgShareholderTreeDataDto();
+        orgShareholderTreeDataDto.setName(shareholderDto.getEntityName());
+        orgShareholderTreeDataDto.setPercent(shareholderDto.getVotingPercentage());
+        orgShareholderTreeDataDto.setLevel(1);
+        return orgShareholderTreeDataDto;
+    }
 }

atms-dao/src/main/java/pwc/taxtech/atms/organization/dpo/OrgShareholderTreeDataDto.java

+package pwc.taxtech.atms.organization.dpo;
+
+import lombok.Getter;
+import lombok.Setter;
+import lombok.ToString;
+
+import java.util.List;
+
+@Getter
+@Setter
+@ToString
+public class OrgShareholderTreeDataDto {
+    String name;
+    Integer level;
+    String percent;
+    List<OrgShareholderTreeDataDto> children;
+}

atms-web/src/main/webapp/app/common/controls/org-shareholder-structure/org-shareholder-structure.ctrl.js

-commonModule.controller('orgShareholderStructureController', ['$scope', '$log', '$translate', function ($scope, $log, $translate) {
+commonModule.controller('orgShareholderStructureController', ['$scope', '$log', '$translate', 'orgHKService', function ($scope, $log, $translate, orgHKService) {
     'use strict';
 
     var initParams = function () {
     };
 
     var init = function () {
+        orgHKService.getOrgTreeData($scope.selectedOrgId).success(function (res) {
+
+        });
+
+
+        //todo:构造数据
         var westData = {
             'name': 'Cayman 1 LP',
-            'wins': '1',
+            'level': '1',
             'children': [
                 {
-                    'name': 'Cayman 2 Limited', 'wins': '2',
+                    'name': 'Cayman 2 Limited', 'level': '2',
                     'children': [
-                        {
-                            'name': 'BVI 1 Limited', 'wins': '3'
-                        },
-                        {'name': 'Hong Kong 1 Limited', 'wins': '4'}
+                        {'name': 'BVI 1 Limited', 'level': '3'},
+                        {'name': 'Hong Kong 1 Limited', 'level': '3'}
                     ]
                 }
             ]
@@ -26,7 +30,7 @@ commonModule.controller('orgShareholderStructureController', ['$scope', '$log',
             'nodeContent': 'name',
             'direction': 't2b',
             'createNode': function ($node, data) {
-                if (data.wins === "1") {
+                if (data.level === "1") {
                     $node.children('.title').html('<img src="/app-resources/images/A.png" style="width:100%">');
                     // $node.hide();
                 }

atms-web/src/main/webapp/app/common/controls/org-shareholder-structure/org-shareholder-structure.js

@@ -7,6 +7,7 @@ commonModule.directive('orgShareholderStructure', ['$log', function ($log) {
         replace: true,
         controller: 'orgShareholderStructureController',
         scope: {
+            selectedOrgId: '=?'
         },
         link: function (scope, element) {
         }

atms-web/src/main/webapp/app/common/webservices/organizationHK.svc.js

@@ -47,14 +47,17 @@ webservices.factory('orgHKService', ['$http', 'apiConfig', function ($http, apiC
         attachmentDelete: function (attachmentId) {
             return $http.delete('/orgHK/downloadAttachment?attachmentId=' + attachmentId, apiConfig.create());
         },
-        getShareholders: function (orgId) {
-            return $http.get('/orgHk/getShareholders?orgId=' + orgId, apiConfig.create());
-        },
-        getSubsidaries: function (orgId) {
-            return $http.get('/orgHK/getSubsidaries?orgId=' + orgId, apiConfig.create());
-        },
-        getDirectors: function (orgId) {
-            return $http.get('/orgHK/getDirectors?orgId=' + orgId, apiConfig.create());
+        // getShareholders: function (orgId) {
+        //     return $http.get('/orgHk/getShareholders?orgId=' + orgId, apiConfig.create());
+        // },
+        // getSubsidaries: function (orgId) {
+        //     return $http.get('/orgHK/getSubsidaries?orgId=' + orgId, apiConfig.create());
+        // },
+        // getDirectors: function (orgId) {
+        //     return $http.get('/orgHK/getDirectors?orgId=' + orgId, apiConfig.create());
+        // },
+        getOrgTreeData: function (orgId) {
+            return $http.get('/orgHK/getOrgTreeData?orgId=' + orgId, apiConfig.create());
         }
     }
 }]);
\ No newline at end of file

atms-web/src/main/webapp/dist2/data/data.json

+{
+  "id": "0",
+  "name": "Jack",
+  "age": 30,
+  "city": "New York",
+  "_children": [
+    {
+      "id": "1",
+      "name": "John",
+      "age": 30,
+      "city": "New York",
+      "_children": [
+        {
+          "id": "3",
+          "name": "Simon",
+          "age": 30,
+          "city": "New York",
+          "_children": [],
+          "_parents": []
+        },
+        {
+          "id": "4",
+          "name": "Kelly",
+          "age": 30,
+          "city": "New York",
+          "_children": [],
+          "_parents": []
+        }
+      ],
+      "_parents": []
+    },
+    {
+      "id": "2",
+      "name": "Jane",
+      "age": 20,
+      "city": "San Francisco",
+      "_children": [],
+      "_parents": []
+    }
+  ],
+  "_parents": [
+    {
+      "id": "5",
+      "name": "Eddie",
+      "age": 30,
+      "city": "New York",
+      "_children": [],
+      "_parents": []
+    },
+    {
+      "id": "6",
+      "name": "Jacob",
+      "age": 30,
+      "city": "New York",
+      "_children": [],
+      "_parents": []
+    }
+  ]
+}
\ No newline at end of file

atms-web/src/main/webapp/dist2/demo2.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+    body {
+        text-align: center;
+    }
+
+    svg {
+        margin-top: 32px;
+        border: 1px solid #aaa;
+    }
+
+    .person rect {
+        fill: #fff;
+        stroke: steelblue;
+        stroke-width: 1px;
+    }
+
+    .person {
+        font: 14px sans-serif;
+        cursor: pointer;
+    }
+
+    .link {
+        fill: none;
+        stroke: #ccc;
+        stroke-width: 1.5px;
+    }
+</style>
+<body>
+<script src="./d3.min.js"></script>
+<script>
+    var boxWidth = 150,
+        boxHeight = 40,
+        nodeWidth = 100,
+        nodeHeight = 200,
+
+        // duration of transitions in ms
+        duration = 750,
+
+        // d3 multiplies the node size by this value
+        // to calculate the distance between nodes
+        separation = .5;
+
+    /**
+     * For the sake of the examples, I want the setup code to be at the top.
+     * However, since it uses a class (Tree) which is defined later, I wrap
+     * the setup code in a function at call it at the end of the example.
+     * Normally you would extract the entire Tree class defintion into a
+     * separate file and include it before this script tag.
+     */
+    function setup() {
+        // Setup zoom and pan
+        var zoom = d3.behavior.zoom()
+            .scaleExtent([.1, 1])
+            .on('zoom', function () {
+                svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
+            })
+            // Offset so that first pan and zoom does not jump back to the origin
+            .translate([400, 200]);
+
+        var svg = d3.select("body").append("svg")
+            .attr('width', 1000)
+            .attr('height', 500)
+            .call(zoom)
+            .append('g')
+
+            // Left padding of tree so that the whole root node is on the screen.
+            // TODO: find a better way
+            .attr("transform", "translate(400,200)");
+
+
+        // One tree to display the ancestors
+        var ancestorTree = new Tree(svg, 'ancestor', 1);
+        ancestorTree.children(function (person) {
+            // If the person is collapsed then tell d3
+            // that they don't have any ancestors.
+            if (person.collapsed) {
+                return;
+            } else {
+                return person._parents;
+            }
+        });
+
+        // Use a separate tree to display the descendants
+        var descendantsTree = new Tree(svg, 'descendant', -1);
+        descendantsTree.children(function (person) {
+            if (person.collapsed) {
+                return;
+            } else {
+                return person._children;
+            }
+        });
+
+        d3.json('data/data.json', function (error, json) {
+
+            if (error) {
+                return console.error(error);
+            }
+
+            // D3 modifies the objects by setting properties such as
+            // coordinates, parent, and children. Thus the same node
+            // node can't exist in two trees. But we need the root to
+            // be in both so we create proxy nodes for the root only.
+            var ancestorRoot = rootProxy(json);
+            var descendantRoot = rootProxy(json);
+
+            // Start with only the first few generations of ancestors showing
+            ancestorRoot._parents.forEach(function (parents) {
+                parents._parents.forEach(collapse);
+            });
+
+            // Start with only one generation of descendants showing
+            descendantRoot._children.forEach(collapse);
+
+            // Set the root nodes
+            ancestorTree.data(ancestorRoot);
+            descendantsTree.data(descendantRoot);
+
+            // Draw the tree
+            ancestorTree.draw(ancestorRoot);
+            descendantsTree.draw(descendantRoot);
+
+        });
+    }
+
+    function rootProxy(root) {
+        return {
+            name: root.name,
+            id: root.id,
+            x0: 0,
+            y0: 0,
+            _children: root._children,
+            _parents: root._parents,
+            collapsed: false
+        };
+    }
+
+    /**
+     * Shared code for drawing ancestors or descendants.
+     * `selector` is a class that will be applied to links
+     * and nodes so that they can be queried later when
+     * the tree is redrawn.
+     * `direction` is either 1 (forward) or -1 (backward).
+     */
+    var Tree = function (svg, selector, direction) {
+        this.svg = svg;
+        this.selector = selector;
+        this.direction = direction;
+
+        this.tree = d3.layout.tree()
+
+        // Using nodeSize we are able to control
+        // the separation between nodes. If we used
+        // the size parameter instead then d3 would
+        // calculate the separation dynamically to fill
+        // the available space.
+            .nodeSize([nodeWidth, nodeHeight])
+
+            // By default, cousins are drawn further apart than siblings.
+            // By returning the same value in all cases, we draw cousins
+            // the same distance apart as siblings.
+            .separation(function () {
+                return separation;
+            });
+    };
+
+    /**
+     * Set the `children` function for the tree
+     */
+    Tree.prototype.children = function (fn) {
+        this.tree.children(fn);
+        return this;
+    };
+    /**
+     * Set the root of the tree
+     */
+    Tree.prototype.data = function (data) {
+        this.root = data;
+        return this;
+    };
+
+    /**
+     * Draw/redraw the tree
+     */
+    Tree.prototype.draw = function (source) {
+        if (this.root) {
+            var nodes = this.tree.nodes(this.root),
+                links = this.tree.links(nodes);
+            this.drawLinks(links, source);
+            this.drawNodes(nodes, source);
+        } else {
+            throw new Error('Missing root');
+        }
+        return this;
+    };
+    /**
+     * Draw/redraw the connecting lines
+     */
+    Tree.prototype.drawLinks = function (links, source) {
+        console.log("links",links);
+        console.log("source",source);
+        var self = this;
+
+        // Update links
+        var link = self.svg.selectAll("path.link." + self.selector)
+
+        // The function we are passing provides d3 with an id
+        // so that it can track when data is being added and removed.
+        // This is not necessary if the tree will only be drawn once
+        // as in the basic example.
+            .data(links, function (d) {
+                return d.target.id;
+            });
+
+        // Add new links
+        // Transition new links from the source's
+        // old position to the links final position
+        link.enter().append("path")
+            .attr("class", "link " + self.selector)
+            .attr("d", function () {
+                var o = {x: source.x0, y: self.direction * (source.y0 + boxHeight / 2)};
+                console.log("enter source", source);
+                console.log("enter o", o);
+                return transitionElbow({source: o, target: o});
+            });
+
+        // Update the old links positions
+        link.transition()
+            .duration(duration)
+            .attr("d", function (d) {
+                console.log("update");
+                console.log("d", d);
+                return elbow(d, self.direction);
+            });
+
+        // Remove any links we don't need anymore
+        // if part of the tree was collapsed
+        // Transition exit links from their current position
+        // to the source's new position
+        link.exit()
+            .transition()
+            .duration(duration)
+            .attr("d", function () {
+                var o = {x: source.x, y: self.direction * (source.y + boxHeight / 2)};
+                console.log("exit source", source);
+                console.log("exit o", o);
+                return transitionElbow({source: o, target: o});
+            })
+            .remove();
+    };
+
+    /**
+     * Draw/redraw the person boxes.
+     */
+    Tree.prototype.drawNodes = function (nodes, source) {
+
+        var self = this;
+
+        // Update nodes
+        var node = self.svg.selectAll("g.person." + self.selector)
+
+        // The function we are passing provides d3 with an id
+        // so that it can track when data is being added and removed.
+        // This is not necessary if the tree will only be drawn once
+        // as in the basic example.
+            .data(nodes, function (person) {
+                return person.id;
+            });
+
+        // Add any new nodes
+        var nodeEnter = node.enter().append("g")
+            .attr("class", "person " + self.selector)
+
+            // Add new nodes at the right side of their child's box.
+            // They will be transitioned into their proper position.
+            .attr('transform', function (person) {
+                return 'translate(' + (source.y0 + boxHeight / 2) + ',' + self.direction * source.x0 + ')';
+            })
+            .on('click', function (person) {
+                self.togglePerson(person);
+            });
+        // Draw the rectangle person boxes.
+        // Start new boxes with 0 size so that
+        // we can transition them to their proper size.
+        nodeEnter.append("rect")
+            .attr({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0
+            });
+        // Draw the person's name and position it inside the box
+        nodeEnter.append("text")
+            .attr("dx", 0)
+            .attr("dy", 0)
+            .attr("text-anchor", "start")
+            .attr('class', 'name')
+            .text(function (d) {
+                return d.name;
+            })
+            .style('fill-opacity', 0);
+
+        // Update the position of both old and new nodes
+        var nodeUpdate = node.transition()
+            .duration(duration)
+            .attr("transform", function (d) {
+                return "translate(" + self.direction * d.x * 4 + "," + (self.direction * d.y / 1.5) + ")";
+            });
+
+        // Grow boxes to their proper size
+        nodeUpdate.select('rect')
+            .attr({
+                x: -(boxWidth / 2),
+                y: -(boxHeight / 2),
+                width: boxWidth,
+                height: boxHeight
+            });
+
+        // Move text to it's proper position
+        nodeUpdate.select('text')
+            .attr("dx", -(boxWidth / 2) + 10)
+            .style('fill-opacity', 1);
+
+        // Remove nodes we aren't showing anymore
+        var nodeExit = node.exit()
+            .transition()
+            .duration(duration)
+
+            // Transition exit nodes to the source's position
+            .attr("transform", function (d) {
+                return "translate(" + (self.direction * (source.y + boxHeight / 2)) + "," + source.x + ")";
+            })
+            .remove();
+
+        // Shrink boxes as we remove them
+        nodeExit.select('rect')
+            .attr({
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0
+            });
+
+        // Fade out the text as we remove it
+        nodeExit.select('text')
+            .style('fill-opacity', 0)
+            .attr('dx', 0);
+
+        // Stash the old positions for transition.
+        nodes.forEach(function (person) {
+            person.x0 = person.x;
+            person.y0 = person.y;
+        });
+
+    };
+    /**
+     * Update a person's state when they are clicked.
+     */
+    Tree.prototype.togglePerson = function (person) {
+
+        // Don't allow the root to be collapsed because that's
+        // silly (it also makes our life easier)
+        if (person === this.root) {
+            return;
+        }
+
+        // Non-root nodes
+        else {
+
+            if (person.collapsed) {
+                person.collapsed = false;
+            } else {
+                collapse(person);
+            }
+
+            this.draw(person);
+        }
+    };
+
+    /**
+     * Collapse person (hide their ancestors). We recursively
+     * collapse the ancestors so that when the person is
+     * expanded it will only reveal one generation. If we don't
+     * recursively collapse the ancestors then when
+     * the person is clicked on again to expand, all ancestors
+     * that were previously showing will be shown again.
+     * If you want that behavior then just remove the recursion
+     * by removing the if block.
+     */
+    function collapse(person) {
+        person.collapsed = true;
+        if (person._parents) {
+            person._parents.forEach(collapse);
+        }
+        if (person._children) {
+            person._children.forEach(collapse);
+        }
+    }
+
+    /**
+     * Custom path function that creates straight connecting
+     * lines. Calculate start and end position of links.
+     * Instead of drawing to the center of the node,
+     * draw to the border of the person profile box.
+     * That way drawing order doesn't matter. In other
+     * words, if we draw to the center of the node
+     * then we have to draw the links first and the
+     * draw the boxes on top of them.
+     */
+    function elbow(d, direction) {
+        // var sourceX = d.source.x,
+        //     sourceY = d.source.y + (boxHeight / 2),
+        //     targetX = d.target.x / 2,
+        //     targetY = 2 * d.target.y;
+
+        console.log("d",d);
+        console.log("direction",direction);
+
+        return "M" + d.source.x + "," + d.source.y + (boxHeight / 2)
+            + "V" + (direction * (d.source.y + (3 * boxHeight / 2)))
+            + "H" + direction *(d.target.x + boxWidth / 2)
+            + "V" + (direction * (d.source.y + 2 * boxHeight));
+    }
+
+    /**
+     * Use a different elbow function for enter
+     * and exit nodes. This is necessary because
+     * the function above assumes that the nodes
+     * are stationary along the x axis.
+     */
+    function transitionElbow(d) {
+        return "M" + d.source.y + "," + d.source.x
+            + "V" + d.source.y
+            + "H" + d.source.x
+            + "V" + d.source.y;
+    }
+
+    setup();
+</script>
+</body>
\ No newline at end of file

atms-web/src/main/webapp/dist2/index.html

@@ -8,7 +8,7 @@
 </head>
 <body>
 <div id="tree"></div>
-<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
+<script src="./orgchart.js"></script>
 <script src="./script.js"></script>
 </body>
 </html>
\ No newline at end of file

atms-web/src/main/webapp/dist2/script.js

+OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.mery);
+OrgChart.templates.myTemplate.size = [400, 400];
+OrgChart.templates.myTemplate.node = '<rect width="400" height="200" style="fill:rgb(255,119,48);stroke-width:3px;stroke:rgba(153,10,10,0.01)" />';
+OrgChart.templates.myTemplate.ripple = {
+    radius: 100,
+    color: "#0890D3",
+    rect: null
+};
 
+OrgChart.templates.myTemplate.field_0 = '<text style="font-size: 24px;" fill="#ffffff" x="100" y="90" text-anchor="middle">{val}</text>';
+OrgChart.templates.myTemplate.field_1 = '<text style="font-size: 16px;" fill="#ffffff" x="100" y="60" text-anchor="middle">{val}</text>';
 
-window.onload = function () {
-    var chart = new OrgChart(document.getElementById("tree"), {
-        template: "olivia",
-        enableDragDrop: true,
-        nodeMouseClick: OrgChart.action.edit,
-        nodeMenu: {
-            details: { text: "Details" },
-            edit: { text: "Edit" },
-            add: { text: "Add" },
-            remove: { text: "Remove" }
-        },
-        dragDropMenu: {
-            addInGroup: { text: "Add in group" },
-            addAsChild: { text: "Add as child" }
-        },
-        nodeBinding: {
-            field_0: "name",
-            field_1: "title",
-            img_0: "img"
-        },
-        tags: {
-            Directors: {
-                group: true,
-                groupName: "Directors",
-                groupState: OrgChart.EXPAND,
-                template: "group_grey"
-            },
-            HRs: {
-                group: true,
-                groupName: "HR Team",
-                groupState: OrgChart.COLLAPSE,
+OrgChart.templates.myTemplate.img_0 = '<clipPath id="ulaImg"><circle cx="100" cy="150" r="0"></circle></clipPath>' +
+    '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#ulaImg)" xlink:href="{val}" x="60" y="110"  width="0" height="0"></image>';
+OrgChart.templates.myTemplate.link = '<path stroke="#686868" stroke-width="1px" fill="none" link-id="[{id}][{child-id}]" d="M{xa},{ya} L{xb},{yb} {xc},{yc} {xd},{yd}" />';
+OrgChart.templates.myTemplate.edge = '<path stroke="#686868" stroke-width="1px" fill="none" edge-id="[{id}][{child-id}]" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}"/>';
 
-                template: "group_grey"
-            },
-            Sales: {
-                group: true,
-                groupName: "Sales Team",
-                groupState: OrgChart.EXPAND,
-                template: "group_grey"
-            },
-            Devs: {
-                group: true,
-                groupName: "Dev Team",
-                groupState: OrgChart.EXPAND,
-                template: "group_grey"
-            }
-        },
-        nodes: [
-            { id: 1, tags: ["Directors"], name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
-            { id: 2, tags: ["Directors"], name: "Marley Wilson", title: "Director", img: "https://balkangraph.com/js/img/3.jpg" },
-            { id: 3, tags: ["Directors"], name: "Bennie Shelton", title: "Shareholder", img: "https://balkangraph.com/js/img/4.jpg" },
+OrgChart.templates.myTemplate.plus =
+    '<rect x="0" y="0" width="36" height="36" rx="12" ry="12" fill="#2E2E2E" stroke="#aeaeae" stroke-width="1"></rect>'
+    + '<line x1="4" y1="18" x2="32" y2="18" stroke-width="1" stroke="#aeaeae"></line>'
+    + '<line x1="18" y1="4" x2="18" y2="32" stroke-width="1" stroke="#aeaeae"></line>';
 
-            { id: 4, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" },
+OrgChart.templates.myTemplate.minus =
+    '<rect x="0" y="0" width="36" height="36" rx="12" ry="12" fill="#2E2E2E" stroke="#aeaeae" stroke-width="1"></rect>'
+    + '<line x1="4" y1="18" x2="32" y2="18" stroke-width="1" stroke="#aeaeae"></line>';
 
-            { id: 5, pid: 1, tags: ["HRs"], name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" },
-            { id: 6, pid: 1, tags: ["HRs"], name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" },
+OrgChart.templates.myTemplate.expandCollapseSize = 36;
 
-            { id: 7, pid: 1, name: "Skye Terrell", title: "Manager", img: "https://balkangraph.com/js/img/12.jpg" },
+OrgChart.templates.myTemplate.nodeMenuButton = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,93,15)" control-node-menu-id="{id}">' +
+    '<rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>' +
+    '<line x1="0" y1="0" x2="0" y2="10" stroke-width="2" stroke="#0890D3" />' +
+    '<line x1="7" y1="0" x2="7" y2="10" stroke-width="2" stroke="#0890D3" />' +
+    '<line x1="14" y1="0" x2="14" y2="10" stroke-width="2" stroke="#0890D3" /></g>';
 
-            { id: 8, pid: 4, tags: ["Devs"], name: "Jordan Harris", title: "JS Developer", img: "https://balkangraph.com/js/img/6.jpg" },
-            { id: 9, pid: 4, tags: ["Devs"], name: "Will Woods", title: "JS Developer", img: "https://balkangraph.com/js/img/7.jpg" },
-            { id: 10, pid: 4, tags: ["Devs"], name: "Skylar Parrish", title: "node.js Developer", img: "https://balkangraph.com/js/img/8.jpg" },
-            { id: 11, pid: 4, tags: ["Devs"], name: "Ashton Koch", title: "C# Developer", img: "https://balkangraph.com/js/img/9.jpg" },
+OrgChart.templates.myTemplate.exportMenuButton = '<div style="position:absolute;right:{p}px;top:{p}px; width:40px;height:50px;cursor:pointer;" control-export-menu="">' +
+    '<hr style="background-color: #0890D3; height: 3px; border: none;">' +
+    '<hr style="background-color: #0890D3; height: 3px; border: none;">' +
+    '<hr style="background-color: #0890D3; height: 3px; border: none;"></div>';
 
-            { id: 12, pid: 7, tags: ["Sales"], name: "Bret Fraser", title: "Sales", img: "https://balkangraph.com/js/img/13.jpg" },
-            { id: 13, pid: 7, tags: ["Sales"], name: "Steff Haley", title: "Sales", img: "https://balkangraph.com/js/img/14.jpg" }
+OrgChart.templates.myTemplate.pointer = '<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)">' +
+    '<g transform="matrix(0.3,0,0,0.3,-17,-17)">' +
+    '<polygon fill="#0890D3" points="53.004,173.004 53.004,66.996 0,120"/>' +
+    '<polygon fill="#0890D3" points="186.996,66.996 186.996,173.004 240,120"/>' +
+    '<polygon fill="#0890D3" points="66.996,53.004 173.004,53.004 120,0"/>' +
+    '<polygon fill="#0890D3" points="120,240 173.004,186.996 66.996,186.996"/>' +
+    '<circle fill="#0890D3" cx="120" cy="120" r="30"/></g></g>';
+OrgChart.templates.ana.field_0 = '<text class="field_0"  style="font-size: 20px;" fill="#ffffff" x="125" y="60" text-anchor="middle">{val}</text>';
+var chart = new OrgChart(document.getElementById("tree"), {
+    enableSearch: false,
+    // nodeMenu: {
+    //     add: {text: "Add"},
+    //     edit: {text: "Edit"},
+    //     remove: {text: "Remove"}
+    // },
+    // menu: {
+    //     pdf: {text: "Export PDF"},
+    //     png: {text: "Export PNG"},
+    //     svg: {text: "Export SVG"},
+    //     csv: {text: "Export CSV"}
+    // },
+    linkBinding: {
+        link_field_0: "percent"
+    },
+    nodeBinding: {
+        field_0: "name",
+        // field_1: "title",
+        // img_0: "img"
+    },
+    nodes: [
+        {id: 1, name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg",percent:"100%"},
+        {id: 2, pid: 1, name: "Ava Field", title: "IT Manager", img: "//balkangraph.com/js/img/2.jpg", mobile: "0878108255",percent:"100%"},
+        {id: 3, pid: 1, name: "Peter Stevens", title: "HR Manager", img: "//balkangraph.com/js/img/3.jpg",percent:"100%"}
     ]
-    });
-};
+});
\ No newline at end of file