orgchart 5.0.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/.github/workflows/publish.yml +32 -0
  2. package/README.md +172 -93
  3. package/README.zh-cn.md +163 -74
  4. package/README.zh-tw.md +163 -74
  5. package/bower.json +6 -9
  6. package/demo/10000-nodes.html +139 -0
  7. package/demo/ajax-datasource.html +46 -45
  8. package/demo/bottom2top.html +12 -9
  9. package/demo/center-on-selected-node.html +21 -17
  10. package/demo/color-coded.html +12 -9
  11. package/demo/css/style.css +28 -0
  12. package/demo/custom-icons.html +12 -9
  13. package/demo/custom-template.html +12 -9
  14. package/demo/data-prop-compact.html +11 -8
  15. package/demo/data-prop-hybrid.html +79 -50
  16. package/demo/default-collapsed.html +12 -9
  17. package/demo/drag-drop-hybrid-chart.html +17 -14
  18. package/demo/drag-drop.html +21 -16
  19. package/demo/edit-chart.html +148 -94
  20. package/demo/edit-hybrid-chart.html +178 -135
  21. package/demo/expand-to-given-depth.html +30 -22
  22. package/demo/export-chart-pdf.html +12 -9
  23. package/demo/export-chart-with-pictures.html +19 -12
  24. package/demo/export-chart.html +12 -9
  25. package/demo/family-tree.html +14 -11
  26. package/demo/familytree-custom-properties.html +108 -0
  27. package/demo/filter-node.html +104 -57
  28. package/demo/get-hierarchy.html +17 -12
  29. package/demo/get-related-nodes.html +27 -17
  30. package/demo/index.html +5 -2
  31. package/demo/integrate-map.html +32 -27
  32. package/demo/left2right.html +12 -9
  33. package/demo/level-offset.html +16 -15
  34. package/demo/link-node.html +12 -9
  35. package/demo/local-datasource.html +11 -8
  36. package/demo/minimap.html +224 -0
  37. package/demo/nodes-of-different-widths.html +11 -8
  38. package/demo/ondemand-loading-data.html +88 -91
  39. package/demo/option-createNode.html +28 -17
  40. package/demo/pan-zoom.html +20 -11
  41. package/demo/reload-data.html +17 -14
  42. package/demo/report-path.html +59 -29
  43. package/demo/responsive-design.html +14 -11
  44. package/demo/right2left.html +12 -9
  45. package/demo/toggle-sibs-resp.html +12 -9
  46. package/demo/ul-datasource.html +11 -8
  47. package/demo/vertical-level.html +12 -9
  48. package/dist/css/{jquery.orgchart.css → orgchart.css} +143 -80
  49. package/dist/css/orgchart.min.css +1 -0
  50. package/dist/js/orgchart.js +4101 -0
  51. package/dist/js/orgchart.min.js +2 -0
  52. package/dist/js/orgchart.min.js.map +1 -0
  53. package/gulpfile.js +37 -26
  54. package/package.json +32 -32
  55. package/src/css/{jquery.orgchart.css → orgchart.css} +143 -80
  56. package/src/js/orgchart.js +4101 -0
  57. package/test/cypress/e2e/demo-interactions.cy.js +91 -0
  58. package/test/cypress/e2e/demo-rendering.cy.js +100 -0
  59. package/test/cypress/e2e/drag-drop-hybrid-chart.cy.js +22 -0
  60. package/test/cypress/e2e/edit-chart.cy.js +20 -0
  61. package/test/cypress/e2e/level-offset.cy.js +21 -0
  62. package/test/cypress/e2e/minimap.cy.js +66 -0
  63. package/test/cypress/e2e/pan-zoom.cy.js +165 -0
  64. package/test/cypress/e2e/report-path.cy.js +20 -0
  65. package/test/cypress/e2e/vertical-vevel.cy.js +5 -3
  66. package/test/e2e/local-datasource/test.js +1 -1
  67. package/test/integration/init-tests.js +168 -62
  68. package/test/integration/tests.js +1034 -56
  69. package/test/unit/lifecycle-builders-export.tests.js +1426 -0
  70. package/test/unit/minimap.tests.js +210 -0
  71. package/test/unit/tests.js +2372 -252
  72. package/dist/css/jquery.orgchart.min.css +0 -1
  73. package/dist/js/jquery.orgchart.js +0 -1741
  74. package/dist/js/jquery.orgchart.min.js +0 -5
  75. package/dist/js/jquery.orgchart.min.js.map +0 -1
  76. package/src/js/jquery.orgchart.js +0 -1741
package/demo/10000-nodes.html ADDED
@@ -0,0 +1,139 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>OrgChart 10,000 Nodes Demo</title>
6
+ <link rel="icon" href="img/logo.png">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
+ <link rel="stylesheet" href="css/style.css">
9
+ <style>
10
+ body {
11
+ margin: 0;
12
+ font-family: Arial, sans-serif;
13
+ background: #f3f5f7;
14
+ color: #1f2933;
15
+ }
16
+
17
+ .page-header {
18
+ position: sticky;
19
+ top: 0;
20
+ z-index: 10;
21
+ padding: 16px 20px;
22
+ background: rgba(255, 255, 255, 0.95);
23
+ border-bottom: 1px solid #d9e2ec;
24
+ backdrop-filter: blur(8px);
25
+ }
26
+
27
+ .page-header h1 {
28
+ margin: 0 0 8px;
29
+ font-size: 22px;
30
+ }
31
+
32
+ .page-header p {
33
+ margin: 0;
34
+ font-size: 14px;
35
+ line-height: 1.5;
36
+ color: #52606d;
37
+ }
38
+
39
+ #status {
40
+ margin-top: 12px;
41
+ font-weight: 700;
42
+ color: #0b6e4f;
43
+ }
44
+
45
+ #chart-container {
46
+ min-height: calc(100vh - 150px);
47
+ padding: 24px;
48
+ box-sizing: border-box;
49
+ overflow: auto;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body>
54
+ <div class="page-header">
55
+ <h1>10,000 Nodes</h1>
56
+ <p>This demo generates exactly 10,000 nodes and starts rendering immediately after the page loads. The render duration is written to the browser console after initialization completes.</p>
57
+ <p>Use this page to gauge large-chart initialization cost on your machine and compare console timings after performance-related changes.</p>
58
+ <div id="status">Preparing demo...</div>
59
+ </div>
60
+ <div id="chart-container"></div>
61
+
62
+ <script src="js/orgchart.js"></script>
63
+ <script>
64
+ document.addEventListener('DOMContentLoaded', function () {
65
+ const statusEl = document.getElementById('status');
66
+ const totalNodes = 10000;
67
+ const branchCount = 99;
68
+ const leafCountPerBranch = 100;
69
+
70
+ function createDatasource() {
71
+ const root = {
72
+ id: 'n1',
73
+ name: 'n1',
74
+ children: new Array(branchCount)
75
+ };
76
+ let nextId = 2;
77
+
78
+ for (let branchIndex = 0; branchIndex < branchCount; branchIndex++) {
79
+ const branchLabel = 'n' + nextId;
80
+ const leaves = new Array(leafCountPerBranch);
81
+ nextId += 1;
82
+
83
+ for (let leafIndex = 0; leafIndex < leafCountPerBranch; leafIndex++) {
84
+ const leafLabel = 'n' + nextId;
85
+ leaves[leafIndex] = {
86
+ id: leafLabel,
87
+ name: leafLabel
88
+ };
89
+ nextId += 1;
90
+ }
91
+
92
+ root.children[branchIndex] = {
93
+ id: branchLabel,
94
+ name: branchLabel,
95
+ children: leaves
96
+ };
97
+ }
98
+
99
+ if (nextId - 1 !== totalNodes) {
100
+ throw new Error('Unexpected node count: ' + (nextId - 1));
101
+ }
102
+
103
+ return root;
104
+ }
105
+
106
+ function runDemo() {
107
+ statusEl.textContent = 'Generating 10,000-node datasource...';
108
+
109
+ const dataBuildStart = performance.now();
110
+ const datasource = createDatasource();
111
+ const dataBuildEnd = performance.now();
112
+
113
+ statusEl.textContent = 'Datasource ready. Initializing chart...';
114
+
115
+ const renderStart = performance.now();
116
+ window.largeOrgChart = new OrgChart({
117
+ chartContainer: '#chart-container',
118
+ data: datasource,
119
+ 'verticalLevel': 3,
120
+ initCompleted: function () {
121
+ requestAnimationFrame(function () {
122
+ const renderEnd = performance.now();
123
+ const dataBuildDuration = dataBuildEnd - dataBuildStart;
124
+ const renderDuration = renderEnd - renderStart;
125
+
126
+ statusEl.textContent = 'Initialization completed. Check the browser console for timing details.';
127
+ console.log('[10000-nodes] datasource size:', totalNodes);
128
+ console.log('[10000-nodes] datasource generation time: ' + dataBuildDuration.toFixed(2) + 'ms');
129
+ console.log('[10000-nodes] orgchart render time: ' + renderDuration.toFixed(2) + 'ms');
130
+ });
131
+ }
132
+ });
133
+ }
134
+
135
+ runDemo();
136
+ });
137
+ </script>
138
+ </body>
139
+ </html>
package/demo/ajax-datasource.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Ajax Datasource Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  .spinner {
@@ -18,57 +18,58 @@
18
18
  </style>
19
19
  </head>
20
20
  <body>
21
+ <section class="demo-notes">
22
+ <h1>Ajax Datasource Demo</h1>
23
+ <p>This demo loads chart data asynchronously and initializes the org chart after the ajax-style request flow completes.</p>
24
+ </section>
21
25
  <div id="chart-container"></div>
22
-
23
- <script type="text/javascript" src="js/jquery.min.js"></script>
24
- <script type="text/javascript" src="js/jquery.mockjax.min.js"></script>
25
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
26
+ <script type="text/javascript" src="js/orgchart.js"></script>
26
27
  <script type="text/javascript">
27
- $(function() {
28
-
29
- $.mockjax({
30
- url: '/orgchart/initdata',
31
- responseTime: 1000,
32
- contentType: 'application/json',
33
- responseText: {
34
- 'name': 'Lao Lao',
35
- 'title': 'general manager',
36
- 'children': [
37
- { 'name': 'Bo Miao', 'title': 'department manager' },
38
- { 'name': 'Su Miao', 'title': 'department manager',
39
- 'children': [
40
- { 'name': 'Tie Hua', 'title': 'senior engineer' },
41
- { 'name': 'Hei Hei', 'title': 'senior engineer',
42
- 'children': [
43
- { 'name': 'Pang Pang', 'title': 'engineer' },
44
- { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
45
- ]
46
- }
47
- ]
48
- },
49
- { 'name': 'Yu Jie', 'title': 'department manager' },
50
- { 'name': 'Yu Li', 'title': 'department manager' },
51
- { 'name': 'Hong Miao', 'title': 'department manager' },
52
- { 'name': 'Yu Wei', 'title': 'department manager' },
53
- { 'name': 'Chun Miao', 'title': 'department manager' },
54
- { 'name': 'Yu Tie', 'title': 'department manager' }
55
- ]
56
- }
28
+ document.addEventListener('DOMContentLoaded', () => {
29
+ const chartContainer = document.getElementById('chart-container');
30
+ const spinner = document.createElement('i');
31
+ const initData = {
32
+ 'name': 'Lao Lao',
33
+ 'title': 'general manager',
34
+ 'children': [
35
+ { 'name': 'Bo Miao', 'title': 'department manager' },
36
+ { 'name': 'Su Miao', 'title': 'department manager',
37
+ 'children': [
38
+ { 'name': 'Tie Hua', 'title': 'senior engineer' },
39
+ { 'name': 'Hei Hei', 'title': 'senior engineer',
40
+ 'children': [
41
+ { 'name': 'Pang Pang', 'title': 'engineer' },
42
+ { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
43
+ ]
44
+ }
45
+ ]
46
+ },
47
+ { 'name': 'Yu Jie', 'title': 'department manager' },
48
+ { 'name': 'Yu Li', 'title': 'department manager' },
49
+ { 'name': 'Hong Miao', 'title': 'department manager' },
50
+ { 'name': 'Yu Wei', 'title': 'department manager' },
51
+ { 'name': 'Chun Miao', 'title': 'department manager' },
52
+ { 'name': 'Yu Tie', 'title': 'department manager' }
53
+ ]
54
+ };
55
+ const requestInitData = () => new Promise((resolve) => {
56
+ setTimeout(() => resolve(initData), 1000);
57
57
  });
58
58
 
59
- $('#chart-container').append(`<i class="oci oci-spinner spinner"></i>`);
60
- $.ajax({
61
- 'url': '/orgchart/initdata',
62
- 'dataType': 'json'
63
- })
64
- .done(function(data, textStatus, jqXHR) {
65
- $('#chart-container').orgchart({
59
+ spinner.className = 'oci oci-spinner spinner';
60
+ chartContainer.appendChild(spinner);
61
+
62
+ requestInitData()
63
+ .then((data) => {
64
+ const oc = new OrgChart({
65
+ chartContainer: '#chart-container',
66
66
  'data': data,
67
67
  'nodeContent': 'title'
68
68
  });
69
+ return oc;
69
70
  })
70
- .always(function() {
71
- $('#chart-container').children('.spinner').remove();
71
+ .finally(() => {
72
+ spinner.remove();
72
73
  });
73
74
 
74
75
  });
package/demo/bottom2top.html CHANGED
@@ -2,20 +2,22 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Bottom to Top Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  </head>
10
10
  <body>
11
+ <section class="demo-notes">
12
+ <h1>Bottom to Top Demo</h1>
13
+ <p>This demo renders the chart in bottom-to-top mode instead of the default top-to-bottom direction.</p>
14
+ </section>
11
15
  <div id="chart-container"></div>
12
-
13
- <script type="text/javascript" src="js/jquery.min.js"></script>
14
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
16
+ <script type="text/javascript" src="js/orgchart.js"></script>
15
17
  <script type="text/javascript">
16
- $(function() {
18
+ document.addEventListener('DOMContentLoaded', () => {
17
19
 
18
- var datascource = {
20
+ const datasource = {
19
21
  'name': 'Lao Lao',
20
22
  'title': 'general manager',
21
23
  'children': [
@@ -31,8 +33,9 @@
31
33
  ]
32
34
  };
33
35
 
34
- $('#chart-container').orgchart({
35
- 'data' : datascource,
36
+ const oc = new OrgChart({
37
+ chartContainer: '#chart-container',
38
+ 'data' : datasource,
36
39
  'nodeContent': 'title',
37
40
  'direction': 'b2t'
38
41
  });
package/demo/center-on-selected-node.html CHANGED
@@ -4,23 +4,25 @@
4
4
  <meta charset="utf-8">
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <title>Organization Chart Plugin</title>
7
+ <title>OrgChart Center on Selected Node Demo</title>
8
8
  <link rel="icon" href="img/logo.png">
9
- <link rel="stylesheet" href="css/jquery.orgchart.css">
9
+ <link rel="stylesheet" href="css/orgchart.css">
10
10
  <link rel="stylesheet" href="css/style.css">
11
11
  <style type="text/css">
12
12
  .orgchart { background: white; }
13
13
  </style>
14
14
  </head>
15
15
  <body>
16
+ <section class="demo-notes">
17
+ <h1>Center on Selected Node Demo</h1>
18
+ <p>This demo keeps the selected node centered in the viewport so large charts are easier to navigate.</p>
19
+ </section>
16
20
  <div id="chart-container"></div>
17
-
18
- <script type="text/javascript" src="js/jquery.min.js"></script>
19
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
21
+ <script type="text/javascript" src="js/orgchart.js"></script>
20
22
  <script type="text/javascript">
21
- $(function() {
23
+ document.addEventListener('DOMContentLoaded', () => {
22
24
 
23
- var datascource = {
25
+ const datasource = {
24
26
  'name': 'Lao Lao',
25
27
  'title': 'general manager',
26
28
  'children': [
@@ -45,19 +47,21 @@
45
47
  ]
46
48
  };
47
49
 
48
- $('#chart-container').orgchart({
50
+ const oc = new OrgChart({
51
+ chartContainer: '#chart-container',
49
52
  'visibleLevel': 2,
50
53
  'pan': true,
51
- 'data' : datascource,
54
+ 'data' : datasource,
52
55
  'nodeContent': 'title',
53
- 'createNode': function($node, data) {
54
- $node.on('click', function(event) {
55
- if (!$(event.target).is('.edge, .toggleBtn')) {
56
- var $this = $(this);
57
- var $chart = $this.closest('.orgchart');
58
- var newX = window.parseInt(($chart.outerWidth(true)/2) - ($this.offset().left - $chart.offset().left) - ($this.outerWidth(true)/2));
59
- var newY = window.parseInt(($chart.outerHeight(true)/2) - ($this.offset().top - $chart.offset().top) - ($this.outerHeight(true)/2));
60
- $chart.css('transform', 'matrix(1, 0, 0, 1, ' + newX + ', ' + newY + ')');
56
+ 'createNode': function(node) {
57
+ node.addEventListener('click', (event) => {
58
+ if (!event.target.closest('.edge, .toggleBtn')) {
59
+ const chart = node.closest('.orgchart');
60
+ const chartRect = chart.getBoundingClientRect();
61
+ const nodeRect = node.getBoundingClientRect();
62
+ const newX = window.parseInt((chartRect.width / 2) - (nodeRect.left - chartRect.left) - (nodeRect.width / 2));
63
+ const newY = window.parseInt((chartRect.height / 2) - (nodeRect.top - chartRect.top) - (nodeRect.height / 2));
64
+ chart.style.transform = 'matrix(1, 0, 0, 1, ' + newX + ', ' + newY + ')';
61
65
  }
62
66
  });
63
67
  }
package/demo/color-coded.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Color-Coded Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  .orgchart { background: #fff; }
@@ -23,14 +23,16 @@
23
23
  </style>
24
24
  </head>
25
25
  <body>
26
+ <section class="demo-notes">
27
+ <h1>Color-Coded Chart Demo</h1>
28
+ <p>This demo assigns branch-specific class names so different departments can be styled with different colors.</p>
29
+ </section>
26
30
  <div id="chart-container"></div>
27
-
28
- <script type="text/javascript" src="js/jquery.min.js"></script>
29
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
31
+ <script type="text/javascript" src="js/orgchart.js"></script>
30
32
  <script type="text/javascript">
31
- $(function() {
33
+ document.addEventListener('DOMContentLoaded', () => {
32
34
 
33
- var datascource = {
35
+ const datasource = {
34
36
  'name': 'Lao Lao',
35
37
  'title': 'general manager',
36
38
  'children': [
@@ -61,8 +63,9 @@
61
63
  ]
62
64
  };
63
65
 
64
- $('#chart-container').orgchart({
65
- 'data' : datascource,
66
+ const oc = new OrgChart({
67
+ chartContainer: '#chart-container',
68
+ 'data' : datasource,
66
69
  'nodeContent': 'title'
67
70
  });
68
71
 
package/demo/css/style.css CHANGED
@@ -11,6 +11,34 @@ body {
11
11
  color: #333333;
12
12
  }
13
13
 
14
+ .demo-notes {
15
+ margin: 0.5rem;
16
+ padding: 0.75rem 1rem;
17
+ border: 1px solid #d5dbe3;
18
+ background: #f7fafc;
19
+ line-height: 1.5;
20
+ color: #1f2933;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ .demo-notes h1 {
25
+ margin: 0 0 0.35rem;
26
+ font-size: 1.05rem;
27
+ }
28
+
29
+ .demo-notes p {
30
+ margin: 0.35rem 0 0;
31
+ }
32
+
33
+ .demo-notes--overlay {
34
+ position: absolute;
35
+ top: 0.5rem;
36
+ left: 0.5rem;
37
+ z-index: 2;
38
+ max-width: 420px;
39
+ background: rgba(247, 250, 252, 0.96);
40
+ }
41
+
14
42
  #chart-container {
15
43
  position: relative;
16
44
  height: 420px;
package/demo/custom-icons.html CHANGED
@@ -2,10 +2,10 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Custom Icons Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
7
  <link rel="stylesheet" href="css/fontawesome.min.css" >
8
- <link rel="stylesheet" href="css/jquery.orgchart.css">
8
+ <link rel="stylesheet" href="css/orgchart.css">
9
9
  <link rel="stylesheet" href="css/style.css">
10
10
  <style type="text/css">
11
11
  #chart-container { height: 540px; }
@@ -77,14 +77,16 @@
77
77
  </style>
78
78
  </head>
79
79
  <body>
80
+ <section class="demo-notes">
81
+ <h1>Custom Icons Demo</h1>
82
+ <p>This demo replaces the built-in expand, collapse, and edge icons with Font Awesome icons.</p>
83
+ </section>
80
84
  <div id="chart-container"></div>
81
-
82
- <script type="text/javascript" src="js/jquery.min.js"></script>
83
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
85
+ <script type="text/javascript" src="js/orgchart.js"></script>
84
86
  <script type="text/javascript">
85
- $(function() {
87
+ document.addEventListener('DOMContentLoaded', () => {
86
88
 
87
- var datascource = {
89
+ const datasource = {
88
90
  'id': '1',
89
91
  'name': 'Lao Lao',
90
92
  'title': 'general manager',
@@ -124,8 +126,9 @@
124
126
  ]
125
127
  };
126
128
 
127
- $('#chart-container').orgchart({
128
- 'data' : datascource,
129
+ const oc = new OrgChart({
130
+ chartContainer: '#chart-container',
131
+ 'data' : datasource,
129
132
  'nodeContent': 'title',
130
133
  'verticalLevel': 5,
131
134
  'icons': {
package/demo/custom-template.html CHANGED
@@ -2,20 +2,22 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Custom Template Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  </head>
10
10
  <body>
11
+ <section class="demo-notes">
12
+ <h1>Custom Template Demo</h1>
13
+ <p>This demo uses the nodeTemplate option to fully customize the internal markup rendered for each node.</p>
14
+ </section>
11
15
  <div id="chart-container"></div>
12
-
13
- <script type="text/javascript" src="js/jquery.min.js"></script>
14
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
16
+ <script type="text/javascript" src="js/orgchart.js"></script>
15
17
  <script type="text/javascript">
16
- $(function() {
18
+ document.addEventListener('DOMContentLoaded', () => {
17
19
 
18
- var datasource = {
20
+ const datasource = {
19
21
  'name': 'Lao Lao',
20
22
  'title': 'general manager',
21
23
  'office': '白城',
@@ -36,7 +38,7 @@
36
38
  ]
37
39
  };
38
40
 
39
- var nodeTemplate = function(data) {
41
+ const nodeTemplate = function(data) {
40
42
  return `
41
43
  <span class="office">${data.office}</span>
42
44
  <div class="title">${data.name}</div>
@@ -44,7 +46,8 @@
44
46
  `;
45
47
  };
46
48
 
47
- var oc = $('#chart-container').orgchart({
49
+ const oc = new OrgChart({
50
+ chartContainer: '#chart-container',
48
51
  'data' : datasource,
49
52
  'nodeTemplate': nodeTemplate
50
53
  });
package/demo/data-prop-compact.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Compact Layout Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
- <link rel="stylesheet" href="css/jquery.orgchart.css">
7
+ <link rel="stylesheet" href="css/orgchart.css">
8
8
  <link rel="stylesheet" href="css/style.css">
9
9
  <style type="text/css">
10
10
  #chart-container {
@@ -16,15 +16,17 @@
16
16
  </style>
17
17
  </head>
18
18
  <body>
19
+ <section class="demo-notes">
20
+ <h1>Compact Layout Demo</h1>
21
+ <p>This demo marks selected branches as compact so dense child groups consume less horizontal space.</p>
22
+ </section>
19
23
  <div id="chart-container"></div>
20
-
21
- <script type="text/javascript" src="js/jquery.min.js"></script>
22
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
24
+ <script type="text/javascript" src="js/orgchart.js"></script>
23
25
  <script type="text/javascript" src="js/json-digger.js"></script>
24
26
  <script type="text/javascript">
25
- $(function() {
27
+ document.addEventListener('DOMContentLoaded', () => {
26
28
 
27
- var datasource = {
29
+ const datasource = {
28
30
  'name': 'Lao Lao',
29
31
  'title': 'general manager',
30
32
  'children': [
@@ -68,7 +70,8 @@
68
70
  ]
69
71
  };
70
72
 
71
- $('#chart-container').orgchart({
73
+ const oc = new OrgChart({
74
+ chartContainer: '#chart-container',
72
75
  'data' : datasource,
73
76
  'nodeContent': 'title',
74
77
  'compact': function(data) {