orgchart 4.0.0 → 5.0.0

package/README.md

@@ -1,16 +1,18 @@
-![OrgChart](http://dabeng.github.io/OrgChart/img/heading.svg)
+![OrgChart](http://dabeng.github.io/OrgChart/img/heading.png)
 
-# Read this in other languages: [简体中文](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md), [繁體中文](https://github.com/dabeng/OrgChart/blob/master/README.zh-tw.md)
+# [简体文档](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md), [繁體文档](https://github.com/dabeng/OrgChart/blob/master/README.zh-tw.md)
 
 # [ES6 Version](http://github.com/dabeng/OrgChart.js)
 # [Web Components Version](http://github.com/dabeng/OrgChart-Webcomponents)
 # [Vue.js Version](https://github.com/dabeng/vue-orgchart)
-# [Angular Version -- the most space-saving solution](https://github.com/dabeng/ng-orgchart)
+# [Angular Version](https://github.com/dabeng/ng-orgchart)
 # [React Version](https://github.com/dabeng/react-orgchart)
 
 ## Foreword
-First of all, thanks a lot for [wesnolte](https://github.com/wesnolte)'s great work:blush: -- [jOrgChart](https://github.com/wesnolte/jOrgChart). The thought that using nested tables to build out the tree-like orgonization chart is amazing. This idea is more simple and direct than its counterparts based on svg
-Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo. **Since version 3.0, we use nested ul to construct tree-like chart instead of nested table.**
+First of all, thanks a lot for [wesnolte](https://github.com/wesnolte)'s great work:blush: -- [jOrgChart](https://github.com/wesnolte/jOrgChart). The thought that using nested tables to build out the tree-like organization chart is amazing. This idea is more simple and direct than its counterparts based on svg
+Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo. 
+- Since version 3.0, we use nested ul to construct tree-like chart instead of nested table.
+- Since version 4.0, users build up the ajax datasoure by themselves.
 
 ## Features
 - Supports both local data and remote data (JSON).
@@ -21,7 +23,7 @@ Unfortunately, it's long time not to see the update of jOrgChart. on the other h
 - Supports exporting chart as a picture or pdf document.
 - Supports pan and zoom.
 - Allows user to customize the internal structure for every node.
-- Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections).
+- Users can adopt multiple solutions to build up a huge organization chart(please refer hybrid layout sections).
 - touch-enabled plugin for mobile device.
 
 ## CDN
@@ -45,7 +47,7 @@ $ npm install orgchart
 require('orgchart') will load orgchart plugin onto the jQuery object. The orgchart module itself does not export anything.
 
 ## [Demos on github pages](https://dabeng.github.io/OrgChart/)
-## [Demos based on nested ul](https://codepen.io/collection/nWqvzY)
+## [Demos based on nested ul](https://codepen.io/collection/xKmPeK)
 ## [Demos based on nested table](https://codepen.io/collection/AWxGVb/) (obsolete)
 
 ### online demos
@@ -117,10 +119,6 @@ That's where getHierarchy() comes in.
 
 It's a so easy task, we just need to append id or className property to node data.
 
-- [I want a multiple-layers chart](https://dabeng.github.io/OrgChart/multiple-layers.html)
-
-In fact, this is a wonderful solution to display a orgchart which includes a huge number of node data.
-
 - [I want a hybrid(horizontal + vertical) chart](https://dabeng.github.io/OrgChart/vertical-level.html)
 
 This feature is inspired by the issues([Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)). Thank [mfahadi](https://github.com/mfahadi) and [Destructrix](https://github.com/Destructrix) for their constructive suggestions:blush: Special thanks to [tedliang](https://github.com/tedliang) for his wonderful hybrid mode solution.
@@ -167,6 +165,47 @@ You need the solution based on new datasource structure with **levelOffset data
 
 **compact data property** is designed for your use case. Once node data includes a "compact" prop with truthy value, itself and its descendant nodes will be arranged with compact mode.
 
+- [ I want to visualize genealogy/pedigree/family tree information](https://dabeng.github.io/OrgChart/family-tree.html)
+
+![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
+
+We use the following two-dimensional array datasource to build up the Family Tree.
+```
+var datascource = [
+  [
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+    { 
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+      'children': [
+        [
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+        ],
+        [
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+            'children': [
+              [
+              
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                  'children': [
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                  ]
+                },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+              ]
+            ]
+          },
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+        ],
+        [
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+        ]
+      ]
+    }
+  ]
+];
+```
+
 ### how to start up demos locally
 
 - you have to install node.js v6+ because our unit tests are based on jsdom v11

package/README.zh-cn.md

@@ -105,10 +105,6 @@ $ npm install orgchart
 
 我们只需要把css的样式与数据源中的id字段或css类字段关联起来就好。
 
-- [我想实现一个多层级（而非深度）的组织结构图](https://dabeng.github.io/OrgChart/multiple-layers.html)
-
-如果你的组织层级很多，二每个层级下的节点也很多，那么上面的方案可以采纳尝试。
-
 - [我想构造一个混合布局的（水平方向 + 垂直方向）组织结构图](https://dabeng.github.io/OrgChart/vertical-level.html)
 
 这个特性的灵感来源于这两个话题的讨论--[Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)。感谢[mfahadi](https://github.com/mfahadi)和[Destructrix](https://github.com/Destructrix)建设性的讨论:blush:尤其感谢[tedliang](https://github.com/tedliang)提供了非常棒的混合布局的解决方案。
@@ -125,6 +121,74 @@ $ npm install orgchart
 
 没问题，我们推荐使用ES6的模版字符串。
 
+- [我想将节点安置在特定的层级. 咋做 ?](https://dabeng.github.io/OrgChart/level-offset.html)
+
+![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)
+
+你需要的是一个复合的解决方案： **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
+
+- [我想构造一个组织结构图，每个节点宽度都可以不同的](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
+
+![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)
+
+- [我想在混合布局中实现拖/放功能](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
+
+- [我想指定从某一分支开始，其下所有子节点都以垂直样式显示](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
+
+![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
+
+**hybrid data property** 就派上用场了. 在数据源的某个节点中提供"hybrid"属性，那么它的所有后代节点都会垂直布局.
+
+- [我想用Font Awesome图标代替内置的图标](https://dabeng.github.io/OrgChart/custom-icons.html)
+
+- [子节点众多的时候，我想以一种压缩起来的展示方式尽可能节省空间](https://dabeng.github.io/OrgChart/data-prop-compact.html)
+
+![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)
+
+**compact data property** 就派上用场了. 在数据源的某个节点里提供了"compact"属性，并赋为真值，那么它和它的子节点就会展示为压缩模式。
+
+- [我想构造族谱，家谱，宗谱的关系图](https://dabeng.github.io/OrgChart/family-tree.html)
+
+![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
+
+我们使用如下的二维数组数据源来构建家谱。“outsider”代表外姓人。
+
+```
+var datascource = [
+  [
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+    { 
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+      'children': [
+        [
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+        ],
+        [
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+            'children': [
+              [
+              
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                  'children': [
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                  ]
+                },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+              ]
+            ]
+          },
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+        ],
+        [
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+        ]
+      ]
+    }
+  ]
+];
+```
+
 ### 本地运行orgchart
 
 - 必须安装node.js v6+，因为我们的单元测试是基于jsdom v11。

package/README.zh-tw.md

@@ -105,10 +105,6 @@ $ npm install orgchart
 
 我們只需要把css的樣式與數據源中的id字段或css類字段關聯起來就好。
 
-- [我想實現一個多層級（而非深度）的組織結構圖](https://dabeng.github.io/OrgChart/multiple-layers.html)
-
-如果你的組織層級很多，二每個層級下的節點也很多，那麽上面的方案可以采納嘗試。
-
 - [我想構造一個混合布局的（水平方向 + 垂直方向）組織結構圖](https://dabeng.github.io/OrgChart/vertical-level.html)
 
 這個特性的靈感來源于這兩個話題的討論--[Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)。感謝[mfahadi](https://github.com/mfahadi)和[Destructrix](https://github.com/Destructrix)建設性的討論:blush:尤其感謝[tedliang](https://github.com/tedliang)提供了非常棒的混合布局的解決方案。
@@ -125,6 +121,74 @@ $ npm install orgchart
 
 沒問題，我們推薦使用ES6的模版字符串。
 
+- [我想將節點安置在特定的層級。 咋做 ?](https://dabeng.github.io/OrgChart/level-offset.html)
+
+![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)
+
+你需要的是一個復合的解決方案： **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
+
+- [我想構造一個組織結構圖，每個節點寬度都可以不同的](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
+
+![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)
+
+- [我想在混合布局中實現拖/放功能](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
+
+- [我想指定從某一分支開始，其下所有子節點都以垂直樣式顯示](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
+
+![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
+
+**hybrid data property** 就派上用場了。 在數據源的某個節點中提供"hybrid"屬性，那麽它的所有後代節點都會垂直布局。
+
+- [我想用Font Awesome圖標代替內置的圖標](https://dabeng.github.io/OrgChart/custom-icons.html)
+
+- [子節點眾多的時候，我想以一種壓縮起來的展示方式盡可能節省空間](https://dabeng.github.io/OrgChart/data-prop-compact.html)
+
+![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)
+
+**compact data property** 就派上用場了。在數據源的某個節點裏提供了"compact"屬性，並賦為真值，那麽它和它的子節點就會展示為壓縮模式。
+
+- [我想構造族譜，家譜，宗譜的關系圖](https://dabeng.github.io/OrgChart/family-tree.html)
+
+![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
+
+我們使用如下的二維數組數據源來構建家譜。“outsider”代表外姓人。
+
+```
+var datascource = [
+  [
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+    { 
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+      'children': [
+        [
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+        ],
+        [
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+            'children': [
+              [
+              
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                  'children': [
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                  ]
+                },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+              ]
+            ]
+          },
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+        ],
+        [
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+        ]
+      ]
+    }
+  ]
+];
+```
+
 ### 本地運行orgchart
 
 - 必須安裝node.js v6+，因爲我們的單元測試是基于jsdom v11。

package/demo/export-chart-with-pictures.html

@@ -18,7 +18,8 @@
     }
     .orgchart .node .content {
       text-align: left;
-      padding: 5px;
+      padding: 0 5px;
+      width: 150px;
     }
     .orgchart .node .content .symbol {
       color: #aaa;

package/demo/family-tree.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Organization Chart Plugin</title>
+  <link rel="icon" href="img/logo.png">
+  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/style.css">
+  <style type="text/css">
+    .orgchart { background: #fff; }
+    #chart-container {
+      height: 850px;
+    }
+    .orgchart .node {
+      padding: 3px 8px;
+    }
+    .orgchart .node .avatar {
+      border-radius: 60px;
+      box-shadow: rgba(99, 99, 99, 0.8) 0px 2px 8px 0px;
+    }
+    .orgchart .couple:has(> .nodes) > .node:first-child::after {
+      top: 148px;
+    }
+    .orgchart .couple::after  {
+      top: 148px;
+      width: 30px;
+      left: calc(50% - 15px);
+    }
+    .orgchart .couple:first-child:not(:only-child)::before {
+      width: calc(100% - 74px);
+      left: 74px;
+    }
+    .orgchart .hierarchy.couple:only-child::before {
+      width: 152px;
+      left: calc(50% - 76px);
+    }
+    .orgchart .couple:last-child:not(:only-child)::before {
+      width: calc(50% + 76px);
+    }
+  </style>
+</head>
+<body>
+  <div id="chart-container"></div>
+
+  <script type="text/javascript" src="js/jquery.min.js"></script>
+  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
+  <script type="text/javascript">
+    $(function() {
+
+      var datascource = [
+        [
+          { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+          { 
+            'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+            'children': [
+              [
+                { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+              ],
+              [
+                { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+                  'children': [
+                    [
+                    
+                      { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                        'children': [
+                          [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
+                          [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                        ]
+                      },
+                      { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+                    ]
+                  ]
+                },
+                { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+              ],
+              [
+                { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+              ]
+            ]
+          }
+        ]
+      ];
+
+    var oc = $('#chart-container').orgchart({
+      'data' : datascource,
+      'nodeContent': 'title',
+      'nodeID': 'id',
+      'createNode': function($node, data) {
+        $node.prepend(`<img class="avatar" src="https://dabeng.github.io/OrgChart/img/avatar/${data.id}.jpg" crossorigin="anonymous" />`);
+      }
+    });
+
+
+  });
+  </script>
+  </body>
+</html>

package/demo/index.html

@@ -13,7 +13,7 @@
       background-color: #000;
     }
     section {
-      width: 30rem;
+      width: 36rem;
       margin-top: 200px;
       margin-left: auto;
       margin-right: auto;
@@ -130,7 +130,6 @@
     <li><a href="get-hierarchy.html" target="_blank">getHierarchy() method</a></li>
     <li><a href="integrate-map.html" target="_blank">itegrate orgchart with map info</a></li>
     <li><a href="local-datasource.html" target="_blank">local datasource</a></li>
-    <li><a href="multiple-layers.html" target="_blank">multiple-layers chart</a></li>
     <li><a href="ondemand-loading-data.html" target="_blank">load data on-demand</a></li>
     <li><a href="option-createNode.html" target="_blank">createNode callback</a></li>
     <li><a href="pan-zoom.html" target="_blank">pan and zoom the chart</a></li>
@@ -148,6 +147,7 @@
     <li><a href="data-prop-hybrid.html" target="_blank">create hybrid chart with data prop "hybrid"</a></li>
     <li><a href="custom-icons.html" target="_blank">use fontawesome icons instead of built-in icons</a></li>
     <li><a href="data-prop-compact.html" target="_blank">layout for children which is too many</a></li>
+    <li><a href="family-tree.html" target="_blank">visualize genealogy/pedigree/family tree information</a></li>
   </ol>
   </section>
 </body>

package/demo/nodes-of-different-widths.html

@@ -7,12 +7,13 @@
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
-    .orgchart .nodes {
-      justify-content: center;
-    }
     .orgchart .node .title {
       width: auto;
     }
+    .orgchart .node .content {
+      width: auto;
+      padding: 0 3px;
+    }
   </style>
 </head>
 <body>

package/demo/option-createNode.html

@@ -21,12 +21,12 @@
     .orgchart .node .second-menu {
       display: none;
       position: absolute;
-      top: 0;
-      right: -70px;
+      bottom: -35px;
+      right: 0;
       border-radius: 35px;
       box-shadow: 0 0 10px 1px #999;
       background-color: #fff;
-      z-index: 1;
+      z-index: 3;
     }
     .orgchart .node .second-menu .avatar {
       width: 60px;