add data prop 'compact'

dabeng · Jun 20, 2023 · f9d8d79 · f9d8d79
1 parent 83c1f73
commit f9d8d79
Show file tree

Hide file tree

Showing 14 changed files with 647 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -151,11 +151,11 @@ You need the solution based on new datasource structure with **levelOffset data
 
 - [I want to drag&drop in the hybrid chart](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
 
-- [ I only want specific children of a certain branch of the chart to be displayed as vertical. Is it possible to set VerticalLevel by data?](https://dabeng.github.io/OrgChart/isHybrid.html)
+- [ I only want specific children of a certain branch of the chart to be displayed as vertical. Is it possible to set VerticalLevel by data?](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
 
-![isHybrid](http://dabeng.github.io/OrgChart/img/isHybrid.png)
+![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
 
-**isVertical data property** is designed for your use case. Once a node has a "isVertical" prop with truthy value, its descendant nodes will be arranged vertically.
+**hybrid data property** is designed for your use case. Once node data includes a "hybrid" prop with truthy value, its descendant nodes will be arranged vertically.
 
 - [I want to replace built-in icons with Font Awesome icons](https://dabeng.github.io/OrgChart/custom-icons.html)
 
@@ -206,6 +206,29 @@ var oc = $('#chartContainerId').orgchart(options);
 };
 ```
 
+### Data Props
+<table>
+ <thead>
+ <tr>
+  <th>Name</th>
+  <th>Type</th>
+  <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+  <td>hybrid</td>
+  <td>truthy value</td>
+  <td>nodes will be arranged vertically if this property is set to true</td>
+ </tr>
+ <tr>
+  <td>compact</td>
+  <td>truthy value</td>
+  <td>node will be rendered with compact mode if this property is set to true</td>
+ </tr>
+ </tbody>
+</table>
+
 ### Options
 <table>
  <thead>
@@ -408,6 +431,13 @@ var oc = $('#chartContainerId').orgchart(options);
  </pre>
  </td>
  </tr>
+ <tr>
+ <td>compact</td>
+ <td>function</td>
+ <td>no</td>
+ <td></td>
+ <td>This callback is used to determine current node is wether rendered with compact mode. The node's data is passed in as a parameter. <b>Note:</b>The option "compact" has a higher priority than data prop "compact".</td>
+ </tr>
  </tbody>
 </table>
 

diff --git a/demo/custom-icons.html b/demo/custom-icons.html
@@ -110,7 +110,7 @@
  }
  ]
  },
- { 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'isHybrid': true,
+ { 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'hybrid': true,
  'children': [
  { 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
  { 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',

diff --git a/demo/data-prop-compact.html b/demo/data-prop-compact.html
@@ -0,0 +1,82 @@
+<!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">
+ #chart-container {
+ height: 500px;
+ }
+ .orgchart {
+ background: unset;
+ }
+ </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" src="js/json-digger.js"></script>
+ <script type="text/javascript">
+ $(function() {
+
+ var datasource = {
+ 'name': 'Lao Lao',
+ 'title': 'general manager',
+ 'children': [
+ { 'name': 'Bo Miao', 'title': 'department manager', 'compact': true,
+ 'children': [
+ { 'name': 'Fei Xuan', 'title': 'engineer' },
+ { 'name': 'Er Xuan', 'title': 'engineer' },
+ { 'name': 'San Xuan', 'title': 'engineer' },
+ { 'name': 'Si Xuan', 'title': 'engineer', 'compact': true,
+ 'children': [
+ { 'name': 'Feng Shou', 'title': 'engineer' },
+ { 'name': 'Er Shou', 'title': 'engineer' },
+ { 'name': 'San Shou', 'title': 'engineer' },
+ { 'name': 'Si Shou', 'title': 'engineer' }
+ ]
+ },
+ { 'name': 'Wu Xuan', 'title': 'engineer' }
+ ]
+ },
+ { 'name': 'Su Miao', 'title': 'department manager',
+ 'children': [
+ { 'name': 'Tie Hua', 'title': 'senior engineer' },
+ { 'name': 'Hei Hei', 'title': 'senior engineer',
+ 'children': [
+ { 'name': 'Dan Dan', 'title': 'engineer' },
+ { 'name': 'Er Dan', 'title': 'engineer' },
+ { 'name': 'San Dan', 'title': 'engineer' },
+ { 'name': 'Si Dan', 'title': 'engineer' },
+ { 'name': 'Wu Dan', 'title': 'engineer' },
+ { 'name': 'Liu Dan', 'title': 'engineer' },
+ { 'name': 'Qi Dan', 'title': 'engineer' },
+ { 'name': 'Ba Dan', 'title': 'engineer' },
+ { 'name': 'Jiu Dan', 'title': 'engineer' },
+ { 'name': 'Shi Dan', 'title': 'engineer' }
+ ]
+ },
+ { 'name': 'Pang Pang', 'title': 'senior engineer' }
+ ]
+ },
+ { 'name': 'Hong Miao', 'title': 'department manager' }
+ ]
+ };
+
+ $('#chart-container').orgchart({
+ 'data' : datasource,
+ 'nodeContent': 'title',
+ 'compact': function(data) {
+ return data?.children?.length >=10;
+ }
+ });
+
+ });
+ </script>
+ </body>
+</html>
diff --git a/demo/isHybrid.html → demo/data-prop-hybrid.html b/demo/isHybrid.html → demo/data-prop-hybrid.html
@@ -45,7 +45,7 @@
  }
  ]
  },
- { 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'isHybrid': true,
+ { 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'hybrid': true,
  'children': [
  { 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
  { 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',

diff --git a/demo/index.html b/demo/index.html
@@ -145,8 +145,9 @@
  <li><a href="level-offset.html" target="_blank">position node in specific level</a></li>
  <li><a href="nodes-of-different-widths.html" target="_blank">nodes of different widths</a></li>
  <li><a href="drag-drop-hybrid-chart.html" target="_blank">drag&drop in hybrid chart</a></li>
- <li><a href="isHybrid.html" target="_blank">create hybrid chart with isHybrid</a></li>
+ <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>
  </ol>
  </section>
 </body>

diff --git a/dist/css/jquery.orgchart.css b/dist/css/jquery.orgchart.css
@@ -273,6 +273,7 @@
 
 .orgchart .node .content {
  box-sizing: border-box;
+ width: 130px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
@@ -533,6 +534,157 @@
  border-width: 2px 0 0 0;
 }
 
+/* styles for compact nodes */
+.orgchart .hierarchy > .node.compact {
+ position: static;
+ display: grid;
+ width: 140px;
+ height: 50px;
+ overflow: hidden;
+ background-color: #eee;
+}
+
+.orgchart .node.compact.even,
+.orgchart .node.compact.even:hover {
+ background-color: #eee;
+}
+
+.orgchart .node.compact.odd,
+.orgchart .node.compact.odd:hover {
+ background-color: #fff;
+}
+
+.orgchart .node.compact.even > .node:hover,
+.orgchart .node.compact.even > .node.focused,
+.orgchart .node.compact.even > .node.selected {
+ background-color: #fff;
+}
+
+.orgchart .node.compact.odd > .node:hover,
+.orgchart .node.compact.odd > .node.focused,
+.orgchart .node.compact.odd > .node.selected {
+ background-color: #eee;
+}
+
+.orgchart .hierarchy > .node.compact.looseMode {
+ display: grid;
+ width: unset;
+ height: unset;
+ overflow: unset;
+}
+
+.orgchart .hierarchy > .node.compact::before {
+ top: var(--top-cross-point, -10px);
+}
+
+.orgchart .node.compact > .node.compact {
+ position: relative;
+ display: grid;
+ width: 140px;
+ height: 50px;
+ overflow: hidden;
+}
+
+.orgchart .node.compact .node.compact.looseMode {
+ width: unset;
+ height: unset;
+ overflow: unset;
+}
+
+.orgchart .hierarchy > .node.compact > .content {
+ position: absolute;
+ top: 25px;
+ left: 5px;
+}
+
+.orgchart .hierarchy > .node.compact.looseMode > .title {
+ margin-top: 5px;
+ margin-left: 5px;
+}
+
+.orgchart .hierarchy > .node.compact.looseMode > .content {
+ top: 30px;
+ left: 10px;
+}
+
+.orgchart .node.compact > .node.compact.looseMode > .title {
+ margin-top: 5px;
+ margin-left: 5px;
+}
+
+.orgchart .node.compact > .node.compact > .content {
+ position: absolute;
+ top: 23px;
+ left: 3px;
+}
+
+.orgchart .node.compact > .node.compact.looseMode > .content {
+ top: 28px;
+ left: 8px;
+}
+
+.orgchart .node.compact .node {
+ margin-bottom: 0;
+}
+
+.orgchart .node.compact .node:not(:only-child)::after {
+ content: unset;
+}
+
+.orgchart .backToCompactSymbol, .orgchart .backToLooseSymbol {
+ cursor: pointer;
+}
+
+.orgchart .hierarchy > .node.compact > .backToCompactSymbol {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+}
+
+.orgchart .hierarchy > .node.compact.looseMode > .backToCompactSymbol {
+ top: 10px;
+ left: 10px;
+}
+
+.orgchart .node.compact > .node.compact.looseMode > .backToCompactSymbol {
+ top: 8px;
+ left: 8px;
+}
+
+.orgchart .node.compact > .node.compact > .backToCompactSymbol {
+ position: absolute;
+ top: 3px;
+ left: 3px;
+}
+
+.orgchart .hierarchy > .node.compact > .backToLooseSymbol {
+ position: absolute;
+ top: 25px;
+ right: 5px;
+}
+
+.orgchart .node.compact > .node.compact > .backToLooseSymbol {
+ position: absolute;
+ top: 23px;
+ right: 3px;
+}
+
+.orgchart .node.compact .backToCompactSymbol::before {
+ border-top-color: rgba(68, 157, 68, 0.6);
+}
+
+.orgchart .node.compact .backToLooseSymbol::before {
+ border-bottom-color: rgba(68, 157, 68, 0.6);
+}
+
+.orgchart .node.compact .backToCompactSymbol:hover::before {
+ border-top-color: #449d44;
+}
+
+.orgchart .node.compact .backToLooseSymbol:hover::before {
+ border-bottom-color: #449d44;
+}
+
 /* custom icons for orgchart */
 .oci {
  display: inline-block;
@@ -600,6 +752,43 @@
  border-bottom: unset;
 }
 
+.oci-corner-top-left::before {
+ content: "";
+ display: inline-block;
+ border-top: 20px solid #000;
+ border-right: 20px solid transparent;
+}
+
+.oci-corner-top-right::before {
+ content: "";
+ display: inline-block;
+ box-sizing: border-box;
+ width: 0;
+ height: 0;
+ border-top: 20px solid #000;
+ border-left: 20px solid transparent;
+}
+
+.oci-corner-bottom-right::before {
+ content: "";
+ display: inline-block;
+ box-sizing: border-box;
+ width: 0;
+ height: 0;
+ border-bottom: 20px solid #000;
+ border-left: 20px solid transparent;
+}
+
+.oci-corner-bottom-left::before {
+ content: "";
+ display: inline-block;
+ box-sizing: border-box;
+ width: 0;
+ height: 0;
+ border-bottom: 20px solid #000;
+ border-right: 20px solid transparent;
+}
+
 .oci-plus-square::before {
  content: "﹢";
  display: inline-block;