balkan-orgchart-js-community 9.1.3 → 9.1.4
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.
- package/README.md +125 -10
- package/orgchart.d.ts +2 -2
- package/orgchart.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,22 +1,137 @@
|
|
|
1
|
-
#  BALKAN OrgChart JS Community
|
|
2
2
|
|
|
3
|
-
|
|
4
|
+
|
|
5
|
+
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
**BALKAN OrgChart JS Community** is a powerful JavaScript library for building **interactive organizational charts
|
|
9
|
-
|
|
10
|
-
Create responsive org charts for **company structures, HR systems, dashboards, and internal tools** with minimal code and full customization.
|
|
8
|
+
**BALKAN OrgChart JS Community** is a powerful **JavaScript library** for building **interactive organizational charts and hierarchy diagrams**. Create responsive org charts for **company structures, HR systems, dashboards, and internal tools** with minimal code and full customization.
|
|
11
9
|
|
|
12
10
|
|
|
13
11
|
|
|
14
|
-
|
|
12
|
+
## [Demos](https://balkan.app/OrgChartJS/Demos/BasicUsage) [Docs](https://balkan.app/OrgChartJS/Docs/GettingStarted) [Download](https://balkan.app/OrgChartJS/Download) [Support](https://balkan.app/OrgChartJS/Support)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## Overview
|
|
17
|
+
|
|
18
|
+
**OrgChart JS Community** is free, available under the MIT license, and comes with all of the core features expected from a JavaScript Organizational chart, including [Expand/Collapse](https://balkan.app/OrgChartJS/Docs/ExpandCollapse), [Custom Template](https://balkan.app/OrgChartJS/Docs/CreatingCustomTemplate), [Minimize/Maximize](https://balkan.app/OrgChartJS/Docs/MinMax), [CSS Customization](https://balkan.app/OrgChartJS/Docs/CSSCustomization) and more. You have 3 options to install OrgChart JS, from NPM, form CDN or Standaolone.
|
|
19
|
+
|
|
20
|
+
## NPM Installation and Usage
|
|
21
|
+
|
|
22
|
+
### Step 1 - Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install balkan‑orgchart‑js‑community
|
|
26
|
+
```
|
|
15
27
|
|
|
16
|
-
|
|
28
|
+
or with yarn:
|
|
17
29
|
|
|
18
30
|
```bash
|
|
19
|
-
|
|
31
|
+
yarn add balkan‑orgchart‑js‑community
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Step 2 - Import it in your code
|
|
35
|
+
|
|
36
|
+
```javascript
|
|
37
|
+
import OrgChart from "balkan‑orgchart‑js‑community";
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
or with CommonJS:
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
const { OrgChart } = require("balkan‑orgchart‑js‑community");
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Step 3 - Usage
|
|
47
|
+
|
|
48
|
+
```javascript
|
|
49
|
+
const chart = new OrgChart(document.getElementById("tree"), {
|
|
50
|
+
nodeBinding: {
|
|
51
|
+
field_0: "name",
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
chart.load([
|
|
56
|
+
{ id: 1, name: "CEO" },
|
|
57
|
+
{ id: 2, pid: 1, name: "Manager" },
|
|
58
|
+
{ id: 3, pid: 1, name: "Designer" }
|
|
59
|
+
]);
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## CDN Installation and Usage
|
|
63
|
+
|
|
64
|
+
### Step 1 - Import it in your code
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<script src="https://cdn.balkan.app/orgchart-community.js"></script>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Step 2 - Usage
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<div id="tree" style="width: 100%; height: 600px;"></div>
|
|
74
|
+
<script>
|
|
75
|
+
const chart = new OrgChart(document.getElementById("tree"), {
|
|
76
|
+
nodeBinding: {
|
|
77
|
+
field_0: "name",
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
chart.load([
|
|
82
|
+
{ id: 1, name: "CEO" },
|
|
83
|
+
{ id: 2, pid: 1, name: "Manager" },
|
|
84
|
+
{ id: 3, pid: 1, name: "Designer" }
|
|
85
|
+
]);
|
|
86
|
+
</script>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Standalone Installation and Usage
|
|
90
|
+
|
|
91
|
+
### Step 1 - Installation
|
|
92
|
+
|
|
93
|
+
Download orgchart.js from here: https://balkan.app/OrgChartJS/Download
|
|
94
|
+
|
|
95
|
+
### Step 2 - Import it in your code
|
|
96
|
+
|
|
97
|
+
Unzip the file and add it to your root directory. And add the code below to your html page:
|
|
98
|
+
```html
|
|
99
|
+
<script src="https://cdn.balkan.app/orgchart-community.js"></script>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Step 3 - Usage
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<div id="tree" style="width: 100%; height: 600px;"></div>
|
|
106
|
+
<script>
|
|
107
|
+
const chart = new OrgChart(document.getElementById("tree"), {
|
|
108
|
+
nodeBinding: {
|
|
109
|
+
field_0: "name",
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
chart.load([
|
|
114
|
+
{ id: 1, name: "CEO" },
|
|
115
|
+
{ id: 2, pid: 1, name: "Manager" },
|
|
116
|
+
{ id: 3, pid: 1, name: "Designer" }
|
|
117
|
+
]);
|
|
118
|
+
</script>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
## Other OrgChart JS Editions
|
|
123
|
+
- Framework-Specific Libraries (MIT Licenses)
|
|
124
|
+
- [balkan-orgchart-rect-community](https://www.npmjs.com/package/balkan-orgchart-rect-community)
|
|
125
|
+
- [balkan-orgchart-vue-community](https://www.npmjs.com/package/balkan-orgchart-vue-community)
|
|
126
|
+
- [balkan-orgchart-angular-community](https://www.npmjs.com/package/balkan-orgchart-angular-community)
|
|
127
|
+
- Framework-Specific Libraries (Commercial License)
|
|
128
|
+
- [balkan-orgchart-js](https://www.npmjs.com/package/balkan-orgchart-js)
|
|
129
|
+
- [balkan-orgchart-rect](https://www.npmjs.com/package/balkan-orgchart-rect)
|
|
130
|
+
- [balkan-orgchart-vue](https://www.npmjs.com/package/balkan-orgchart-vue)
|
|
131
|
+
- [balkan-orgchart-angular](https://www.npmjs.com/package/balkan-orgchart-angular)
|
|
132
|
+
|
|
133
|
+
## [Demos](https://balkan.app/OrgChartJS/Demos/BasicUsage) [Docs](https://balkan.app/OrgChartJS/Docs/GettingStarted) [Download](https://balkan.app/OrgChartJS/Download) [Support](https://balkan.app/OrgChartJS/Support)
|
|
134
|
+
|
|
20
135
|
|
|
21
136
|
|
|
22
137
|
|
package/orgchart.d.ts
CHANGED
package/orgchart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/* eslint-disable */
|
|
1
|
+
/* eslint-disable */
|
package/package.json
CHANGED