orgchart 4.0.1 → 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 (77) hide show
  1. package/.github/workflows/publish.yml +32 -0
  2. package/README.md +205 -89
  3. package/README.zh-cn.md +221 -68
  4. package/README.zh-tw.md +221 -68
  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 +100 -0
  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 +7 -4
  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 +31 -20
  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} +210 -78
  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} +210 -78
  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/demo/multiple-layers.html +0 -128
  73. package/dist/css/jquery.orgchart.min.css +0 -1
  74. package/dist/js/jquery.orgchart.js +0 -1686
  75. package/dist/js/jquery.orgchart.min.js +0 -5
  76. package/dist/js/jquery.orgchart.min.js.map +0 -1
  77. package/src/js/jquery.orgchart.js +0 -1686
package/demo/integrate-map.html CHANGED
@@ -2,12 +2,18 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Map Integration Demo</title>
6
6
  <link rel="icon" href="img/logo.png">
7
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.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
+ #map {
12
+ position: fixed;
13
+ inset: 0;
14
+ z-index: 0;
15
+ }
16
+
11
17
  #chart-container {
12
18
  position: absolute;
13
19
  top: 10px;
@@ -25,39 +31,37 @@
25
31
  </style>
26
32
  </head>
27
33
  <body id="pageBody">
34
+ <section class="demo-notes demo-notes--overlay">
35
+ <h1>Map Integration Demo</h1>
36
+ <p>This demo overlays the org chart on a map and recenters the map view when users click a node with geographic coordinates.</p>
37
+ </section>
38
+ <div id="map"></div>
28
39
  <div id="chart-container"></div>
29
40
 
30
41
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js"></script>
31
- <script type="text/javascript" src="js/jquery.min.js"></script>
32
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
42
+ <script type="text/javascript" src="js/orgchart.js"></script>
33
43
  <script type="text/javascript">
34
- $(function() {
44
+ document.addEventListener('DOMContentLoaded', () => {
35
45
 
36
- var map = new ol.Map({
46
+ const map = new ol.Map({
37
47
  layers: [
38
48
  new ol.layer.Tile({
39
- source: new ol.source.Stamen({
40
- layer: 'watercolor'
49
+ source: new ol.source.XYZ({
50
+ attributions: '© OpenStreetMap contributors © CARTO',
51
+ crossOrigin: 'anonymous',
52
+ url: 'https://{a-d}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png'
41
53
  }),
42
54
  preload: 4
43
- }),
44
- new ol.layer.Tile({
45
- source: new ol.source.Stamen({
46
- layer: 'terrain-labels'
47
- }),
48
- preload: 1
49
55
  })
50
56
  ],
51
- target: 'pageBody',
57
+ target: 'map',
52
58
  view: new ol.View({
53
59
  center: ol.proj.transform([-87.6297980, 41.8781140], 'EPSG:4326', 'EPSG:3857'),
54
60
  zoom: 10
55
61
  })
56
62
  });
57
63
 
58
- $('body').prepend(map.getViewport());
59
-
60
- var datascource = {
64
+ const datasource = {
61
65
  'name': 'Lao Lao',
62
66
  'title': 'President Office',
63
67
  'position': [-87.6297980, 41.8781140],
@@ -73,20 +77,21 @@
73
77
  ]
74
78
  };
75
79
 
76
- $('#chart-container').orgchart({
77
- 'data' : datascource,
80
+ const oc = new OrgChart({
81
+ chartContainer: '#chart-container',
82
+ 'data' : datasource,
78
83
  'nodeContent': 'title',
79
- 'createNode': function($node, data) {
80
- $node.on('click', function() {
81
- var view = map.getView();
82
- var duration = 2000;
83
- var start = +new Date();
84
- var pan = ol.animation.pan({
84
+ 'createNode': function(node, data) {
85
+ node.addEventListener('click', () => {
86
+ const view = map.getView();
87
+ const duration = 2000;
88
+ const start = +new Date();
89
+ const pan = ol.animation.pan({
85
90
  duration: duration,
86
91
  source: view.getCenter(),
87
92
  start: start
88
93
  });
89
- var bounce = ol.animation.bounce({
94
+ const bounce = ol.animation.bounce({
90
95
  duration: duration,
91
96
  resolution: 4 * view.getResolution(),
92
97
  start: start
package/demo/left2right.html CHANGED
@@ -2,23 +2,25 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>Organization Chart Plugin</title>
5
+ <title>OrgChart Left to Right 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 { text-align: left; }
11
11
  </style>
12
12
  </head>
13
13
  <body>
14
+ <section class="demo-notes">
15
+ <h1>Left to Right Demo</h1>
16
+ <p>This demo renders the chart from left to right instead of the default top-to-bottom layout.</p>
17
+ </section>
14
18
  <div id="chart-container"></div>
15
-
16
- <script type="text/javascript" src="js/jquery.min.js"></script>
17
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
19
+ <script type="text/javascript" src="js/orgchart.js"></script>
18
20
  <script type="text/javascript">
19
- $(function() {
21
+ document.addEventListener('DOMContentLoaded', () => {
20
22
 
21
- var datascource = {
23
+ const datasource = {
22
24
  'name': 'Lao Lao',
23
25
  'title': 'general manager',
24
26
  'children': [
@@ -34,8 +36,9 @@
34
36
  ]
35
37
  };
36
38
 
37
- $('#chart-container').orgchart({
38
- 'data' : datascource,
39
+ const oc = new OrgChart({
40
+ chartContainer: '#chart-container',
41
+ 'data' : datasource,
39
42
  'nodeContent': 'title',
40
43
  'direction': 'l2r'
41
44
  });
package/demo/level-offset.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 Level Offset 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>Level Offset Demo</h1>
13
+ <p>This demo offsets selected nodes to specific levels so branches can intentionally break the default depth alignment.</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
  'children': [
@@ -35,18 +37,17 @@
35
37
  ]
36
38
  };
37
39
 
38
- $('#chart-container').orgchart({
40
+ const oc = new OrgChart({
41
+ chartContainer: '#chart-container',
39
42
  'data' : datasource,
40
43
  'nodeContent': 'title',
41
44
  'createNode': function(node, data) {
42
45
  if (data.levelOffset) {
43
- node.css({
44
- 'margin-top': (data.levelOffset * 70) + 'px',
45
- '--top': (-11 - data.levelOffset * 70) + 'px',
46
- '--height': (9 + data.levelOffset * 70) + 'px',
47
- '--top-cross-point': (-13 - data.levelOffset * 70) + 'px',
48
- '--height-cross-point': (11 + data.levelOffset * 70) + 'px'
49
- });
46
+ node.style.marginTop = (data.levelOffset * 70) + 'px';
47
+ node.style.setProperty('--top', (-11 - data.levelOffset * 70) + 'px');
48
+ node.style.setProperty('--height', (9 + data.levelOffset * 70) + 'px');
49
+ node.style.setProperty('--top-cross-point', (-13 - data.levelOffset * 70) + 'px');
50
+ node.style.setProperty('--height-cross-point', (11 + data.levelOffset * 70) + 'px');
50
51
  }
51
52
  }
52
53
  });
package/demo/link-node.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 Link Node 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 .linkNode {
@@ -25,14 +25,16 @@
25
25
  </style>
26
26
  </head>
27
27
  <body>
28
+ <section class="demo-notes">
29
+ <h1>Link Node Demo</h1>
30
+ <p>This demo inserts connector-style intermediary nodes to visualize indirect relationships inside the hierarchy.</p>
31
+ </section>
28
32
  <div id="chart-container"></div>
29
-
30
- <script type="text/javascript" src="js/jquery.min.js"></script>
31
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
33
+ <script type="text/javascript" src="js/orgchart.js"></script>
32
34
  <script type="text/javascript">
33
- $(function() {
35
+ document.addEventListener('DOMContentLoaded', () => {
34
36
 
35
- var datascource = {
37
+ const datasource = {
36
38
  'name': 'Lao Lao',
37
39
  'title': 'general manager',
38
40
  'children': [
@@ -59,8 +61,9 @@
59
61
  ]
60
62
  };
61
63
 
62
- $('#chart-container').orgchart({
63
- 'data' : datascource,
64
+ const oc = new OrgChart({
65
+ chartContainer: '#chart-container',
66
+ 'data' : datasource,
64
67
  'nodeContent': 'title'
65
68
  });
66
69
 
package/demo/local-datasource.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 Local 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
  </head>
10
10
  <body>
11
+ <section class="demo-notes">
12
+ <h1>Local Datasource Demo</h1>
13
+ <p>This demo builds the chart directly from a local JSON datasource embedded in the page.</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
  'children': [
@@ -35,7 +37,8 @@
35
37
  ]
36
38
  };
37
39
 
38
- $('#chart-container').orgchart({
40
+ const oc = new OrgChart({
41
+ chartContainer: '#chart-container',
39
42
  'data' : datasource,
40
43
  'nodeContent': 'title'
41
44
  });
package/demo/minimap.html ADDED
@@ -0,0 +1,224 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>OrgChart Minimap 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 type="text/css">
10
+ body {
11
+ padding: 0.5rem;
12
+ }
13
+ #chart-container {
14
+ height: 520px;
15
+ }
16
+ .orgchart {
17
+ background: white;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <section class="demo-notes">
23
+ <h1>Minimap Demo</h1>
24
+ <p>This demo enables the new <code>minimap</code> option and renders a live overview in the bottom-right corner of the chart container.</p>
25
+ <p>Drag the main chart to pan, use the mouse wheel or touch pinch to zoom, then check that the minimap viewport follows the visible area.</p>
26
+ <p>Drag the blue viewport rectangle inside the minimap to move the main chart. You can also zoom from inside the minimap with the mouse wheel.</p>
27
+ </section>
28
+ <div id="chart-container"></div>
29
+ <script type="text/javascript" src="js/orgchart.js"></script>
30
+ <script type="text/javascript">
31
+ document.addEventListener('DOMContentLoaded', () => {
32
+
33
+ const datasource = {
34
+ 'name': 'Lao Lao',
35
+ 'title': 'general manager',
36
+ 'children': [
37
+ {
38
+ 'name': 'Bo Miao',
39
+ 'title': 'department manager',
40
+ 'children': [
41
+ { 'name': 'Ling', 'title': 'senior engineer' },
42
+ { 'name': 'Qing', 'title': 'product designer' },
43
+ { 'name': 'Yao', 'title': 'quality engineer' }
44
+ ]
45
+ },
46
+ {
47
+ 'name': 'Su Miao',
48
+ 'title': 'department manager',
49
+ 'children': [
50
+ {
51
+ 'name': 'Tie Hua',
52
+ 'title': 'senior engineer',
53
+ 'children': [
54
+ {
55
+ 'name': 'Pang Pang',
56
+ 'title': 'engineer',
57
+ 'children': [
58
+ {
59
+ 'name': 'Ke Xin',
60
+ 'title': 'staff engineer',
61
+ 'children': [
62
+ {
63
+ 'name': 'Iris Sun',
64
+ 'title': 'technical lead',
65
+ 'children': [
66
+ {
67
+ 'name': 'Nina Wu',
68
+ 'title': 'platform engineer',
69
+ 'children': [
70
+ {
71
+ 'name': 'Ethan Lin',
72
+ 'title': 'principal engineer',
73
+ 'children': [
74
+ {
75
+ 'name': 'Mila Tan',
76
+ 'title': 'engineering manager',
77
+ 'children': [
78
+ {
79
+ 'name': 'Sophie He',
80
+ 'title': 'senior platform engineer',
81
+ 'children': [
82
+ {
83
+ 'name': 'Leo Fang',
84
+ 'title': 'platform architect',
85
+ 'children': [
86
+ {
87
+ 'name': 'Grace Qian',
88
+ 'title': 'director of engineering',
89
+ 'children': [
90
+ {
91
+ 'name': 'Victor Shen',
92
+ 'title': 'vp of infrastructure',
93
+ 'children': [
94
+ {
95
+ 'name': 'Hazel Zhou',
96
+ 'title': 'cto advisor',
97
+ 'children': [
98
+ {
99
+ 'name': 'Ryan Luo',
100
+ 'title': 'chief architect',
101
+ 'children': [
102
+ {
103
+ 'name': 'Ava Meng',
104
+ 'title': 'distinguished engineer',
105
+ 'children': [
106
+ {
107
+ 'name': 'Noah Yao',
108
+ 'title': 'innovation fellow',
109
+ 'children': [
110
+ {
111
+ 'name': 'Ella Jin',
112
+ 'title': 'research director',
113
+ 'children': [
114
+ {
115
+ 'name': 'Caleb Xu',
116
+ 'title': 'systems strategist',
117
+ 'children': [
118
+ {
119
+ 'name': 'Ruby Dai',
120
+ 'title': 'transformation lead',
121
+ 'children': [
122
+ {
123
+ 'name': 'Simon Pei',
124
+ 'title': 'program executive',
125
+ 'children': [
126
+ { 'name': 'Tina Mo', 'title': 'senior advisor' }
127
+ ]
128
+ }
129
+ ]
130
+ }
131
+ ]
132
+ }
133
+ ]
134
+ }
135
+ ]
136
+ }
137
+ ]
138
+ }
139
+ ]
140
+ }
141
+ ]
142
+ }
143
+ ]
144
+ }
145
+ ]
146
+ }
147
+ ]
148
+ }
149
+ ]
150
+ }
151
+ ]
152
+ }
153
+ ]
154
+ }
155
+ ]
156
+ },
157
+ { 'name': 'Owen Gu', 'title': 'site reliability engineer' }
158
+ ]
159
+ }
160
+ ]
161
+ }
162
+ ]
163
+ },
164
+ { 'name': 'Xiang Xiang', 'title': 'UE engineer' },
165
+ { 'name': 'Dan Dan', 'title': 'QA engineer' }
166
+ ]
167
+ },
168
+ {
169
+ 'name': 'Hei Hei',
170
+ 'title': 'senior engineer',
171
+ 'children': [
172
+ { 'name': 'Jia Jia', 'title': 'engineer' },
173
+ { 'name': 'Ming Ming', 'title': 'DevOps engineer' }
174
+ ]
175
+ }
176
+ ]
177
+ },
178
+ {
179
+ 'name': 'Hong Miao',
180
+ 'title': 'department manager',
181
+ 'children': [
182
+ { 'name': 'Fei Fei', 'title': 'product manager' },
183
+ { 'name': 'A Hui', 'title': 'data analyst' },
184
+ { 'name': 'Xiao Yu', 'title': 'support lead' }
185
+ ]
186
+ },
187
+ {
188
+ 'name': 'Yu Wei',
189
+ 'title': 'department manager',
190
+ 'children': [
191
+ { 'name': 'Lin Lin', 'title': 'solution architect' },
192
+ { 'name': 'Qiao Qiao', 'title': 'technical writer' },
193
+ { 'name': 'Ran Ran', 'title': 'operations specialist' }
194
+ ]
195
+ },
196
+ {
197
+ 'name': 'Chun Miao',
198
+ 'title': 'department manager',
199
+ 'children': [
200
+ { 'name': 'An An', 'title': 'research engineer' },
201
+ { 'name': 'Le Le', 'title': 'frontend engineer' },
202
+ { 'name': 'Tao Tao', 'title': 'backend engineer' }
203
+ ]
204
+ }
205
+ ]
206
+ };
207
+
208
+ const oc = new OrgChart({
209
+ chartContainer: '#chart-container',
210
+ 'data': datasource,
211
+ 'nodeContent': 'title',
212
+ 'pan': true,
213
+ 'zoom': true,
214
+ 'minimap': true
215
+ });
216
+
217
+ oc.chartContainer.addEventListener('touchmove', function(event) {
218
+ event.preventDefault();
219
+ }, { passive: false });
220
+
221
+ });
222
+ </script>
223
+ </body>
224
+ </html>
package/demo/nodes-of-different-widths.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 Different Width Nodes 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 .node .title {
@@ -17,14 +17,16 @@
17
17
  </style>
18
18
  </head>
19
19
  <body>
20
+ <section class="demo-notes">
21
+ <h1>Different Width Nodes Demo</h1>
22
+ <p>This demo removes fixed title and content widths so node sizing follows the actual text length.</p>
23
+ </section>
20
24
  <div id="chart-container"></div>
21
-
22
- <script type="text/javascript" src="js/jquery.min.js"></script>
23
- <script type="text/javascript" src="js/jquery.orgchart.js"></script>
25
+ <script type="text/javascript" src="js/orgchart.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': 'Lorem ipsum dolor sit amet',
30
32
  'children': [
@@ -44,7 +46,8 @@
44
46
  ]
45
47
  };
46
48
 
47
- $('#chart-container').orgchart({
49
+ const oc = new OrgChart({
50
+ chartContainer: '#chart-container',
48
51
  'data' : datasource,
49
52
  'nodeContent': 'title'
50
53
  });