balkan-orgchart-js 9.1.32
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 +148 -0
- package/orgchart.d.ts +5984 -0
- package/orgchart.js +1 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
#  BALKAN OrgChart JS
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
**BALKAN OrgChart JS** 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.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## [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)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<br>
|
|
13
|
+
|
|
14
|
+
## Overview
|
|
15
|
+
|
|
16
|
+
**OrgChart JS** is FREE Trial, available under [EULA](https://balkan.app/OrgChartJS/Legal/EULA), 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 Standalone.
|
|
17
|
+
|
|
18
|
+
<br>
|
|
19
|
+
|
|
20
|
+
## NPM Installation and Usage
|
|
21
|
+
|
|
22
|
+
### Step 1 - Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install balkan‑orgchart‑js
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
or with yarn:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
yarn add balkan‑orgchart‑js
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Step 2 - Import it in your code
|
|
35
|
+
|
|
36
|
+
```javascript
|
|
37
|
+
import OrgChart from "balkan‑orgchart‑js";
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
or with CommonJS:
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
const { OrgChart } = require("balkan‑orgchart‑js");
|
|
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
|
+
<br>
|
|
63
|
+
|
|
64
|
+
## CDN Installation and Usage
|
|
65
|
+
|
|
66
|
+
### Step 1 - Import it in your code
|
|
67
|
+
|
|
68
|
+
Add in your HTML page
|
|
69
|
+
```html
|
|
70
|
+
<script src="https://cdn.balkan.app/orgchart.js"></script>
|
|
71
|
+
<div id="tree"></div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Step 2 - Usage
|
|
75
|
+
Add in your javascipt page
|
|
76
|
+
```javascipt
|
|
77
|
+
|
|
78
|
+
const chart = new OrgChart(document.getElementById("tree"), {
|
|
79
|
+
nodeBinding: {
|
|
80
|
+
field_0: "name",
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
chart.load([
|
|
85
|
+
{ id: 1, name: "CEO" },
|
|
86
|
+
{ id: 2, pid: 1, name: "Manager" },
|
|
87
|
+
{ id: 3, pid: 1, name: "Designer" }
|
|
88
|
+
]);
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
<br>
|
|
92
|
+
|
|
93
|
+
## Standalone Installation and Usage
|
|
94
|
+
|
|
95
|
+
### Step 1 - Installation
|
|
96
|
+
|
|
97
|
+
Download orgchart.zip file from here: https://balkan.app/OrgChartJS/Download
|
|
98
|
+
|
|
99
|
+
### Step 2 - Import it in your code
|
|
100
|
+
|
|
101
|
+
Unzip the file and add orgchart.js and orgchart.d.ts to your root directory and add the code below to your html page:
|
|
102
|
+
```html
|
|
103
|
+
<script src="orgchart.js"></script>
|
|
104
|
+
<div id="tree"></div>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Step 3 - Usage
|
|
108
|
+
|
|
109
|
+
In your javascript file add:
|
|
110
|
+
|
|
111
|
+
```javascript
|
|
112
|
+
/// <reference path="OrgChart.d.ts" />
|
|
113
|
+
|
|
114
|
+
const chart = new OrgChart(document.getElementById("tree"), {
|
|
115
|
+
nodeBinding: {
|
|
116
|
+
field_0: "name",
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
chart.load([
|
|
121
|
+
{ id: 1, name: "CEO" },
|
|
122
|
+
{ id: 2, pid: 1, name: "Manager" },
|
|
123
|
+
{ id: 3, pid: 1, name: "Designer" }
|
|
124
|
+
]);
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
OrgChart.d.ts is for intellisense (autocomplete)
|
|
128
|
+
|
|
129
|
+
<br>
|
|
130
|
+
|
|
131
|
+
## Other Framework-Specific OrgChart JS Libraries
|
|
132
|
+
- Community - MIT License
|
|
133
|
+
- [balkan-orgchart-js-community](https://www.npmjs.com/package/balkan-orgchart-js-community)
|
|
134
|
+
- [balkan-orgchart-react-community](https://www.npmjs.com/package/balkan-orgchart-react-community)
|
|
135
|
+
- [balkan-orgchart-vue-community](https://www.npmjs.com/package/balkan-orgchart-vue-community)
|
|
136
|
+
- [balkan-orgchart-angular-community](https://www.npmjs.com/package/balkan-orgchart-angular-community)
|
|
137
|
+
- Commercial - FREE Trial License
|
|
138
|
+
- [balkan-orgchart-react](https://www.npmjs.com/package/balkan-orgchart-react)
|
|
139
|
+
- [balkan-orgchart-vue](https://www.npmjs.com/package/balkan-orgchart-vue)
|
|
140
|
+
- [balkan-orgchart-angular](https://www.npmjs.com/package/balkan-orgchart-angular)
|
|
141
|
+
|
|
142
|
+
<br>
|
|
143
|
+
|
|
144
|
+
## [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)
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|