balkan-orgchart-react 9.1.68 → 9.1.80

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 (5) hide show
  1. package/index.es.d.ts +344 -292
  2. package/index.es.js +19066 -3773
  3. package/index.umd.js +303 -115
  4. package/package.json +60 -58
  5. package/readme.md +103 -13
package/package.json CHANGED
@@ -1,58 +1,60 @@
1
- {
2
- "name": "balkan-orgchart-react",
3
- "type": "module",
4
- "types": "./index.es.d.ts",
5
- "main": "./index.umd.js",
6
- "exports": {
7
- ".": {
8
- "types": "./index.es.d.ts",
9
- "import": "./index.es.js",
10
- "require": "./index.umd.js"
11
- }
12
- },
13
- "peerDependencies": {
14
- "react": ">=17",
15
- "react-dom": ">=17"
16
- },
17
- "files": [
18
- "index.es.js",
19
- "index.umd.js",
20
- "index.es.d.ts",
21
- "package.json",
22
- "readme.md"
23
- ],
24
- "author": {
25
- "name": "BALKAN App <support@balkan.app> (https://balkan.app)"
26
- },
27
- "sideEffects": false,
28
- "bugs": {
29
- "email": "support@balkan.app",
30
- "url": "https://github.com/BALKANGraph/OrgChartReact/issues"
31
- },
32
- "deprecated": false,
33
- "description": "React organizational chart library for visualizing hierarchy, company structure, and team relationships with interactive diagrams.",
34
- "homepage": "https://balkan.app/",
35
- "keywords": [
36
- "react-organizational-chart",
37
- "react-orgchart",
38
- "reactorgchart",
39
- "react-org-chart",
40
- "react-hierarchy",
41
- "react-tree",
42
- "react-hierarchical-data",
43
- "react-tree-visualization",
44
- "react-data-visualization",
45
- "react-diagram",
46
- "react-employee-chart",
47
- "react-company-structure",
48
- "react-hierarchy-chart",
49
- "react-chart-library"
50
- ],
51
- "license": "FREE Trial",
52
- "repository": {
53
- "type": "git",
54
- "url": "git+https://github.com/BALKANGraph/OrgChartReact.git"
55
- },
56
- "dependencies": {},
57
- "version": "9.1.68"
58
- }
1
+ {
2
+ "name": "balkan-orgchart-react",
3
+ "type": "module",
4
+ "types": "./index.es.d.ts",
5
+ "main": "./index.umd.js",
6
+ "exports": {
7
+ ".": {
8
+ "types": "./index.es.d.ts",
9
+ "import": "./index.es.js",
10
+ "require": "./index.umd.js"
11
+ }
12
+ },
13
+ "peerDependencies": {
14
+ "react": ">=17",
15
+ "react-dom": ">=17"
16
+ },
17
+ "files": [
18
+ "index.es.js",
19
+ "index.umd.js",
20
+ "index.es.d.ts",
21
+ "package.json",
22
+ "readme.md"
23
+ ],
24
+ "author": {
25
+ "name": "BALKAN App <support@balkan.app> (https://balkan.app)"
26
+ },
27
+ "sideEffects": false,
28
+ "bugs": {
29
+ "email": "support@balkan.app",
30
+ "url": "https://github.com/BALKANGraph/OrgChartReact/issues"
31
+ },
32
+ "deprecated": false,
33
+ "description": "React organizational chart library for visualizing hierarchy, company structure, and team relationships with interactive diagrams.",
34
+ "homepage": "https://balkan.app/",
35
+ "keywords": [
36
+ "react-organizational-chart",
37
+ "react-orgchart",
38
+ "reactorgchart",
39
+ "react-org-chart",
40
+ "react-hierarchy",
41
+ "react-tree",
42
+ "react-hierarchical-data",
43
+ "react-tree-visualization",
44
+ "react-data-visualization",
45
+ "react-diagram",
46
+ "react-employee-chart",
47
+ "react-company-structure",
48
+ "react-hierarchy-chart",
49
+ "react-chart-library"
50
+ ],
51
+ "license": "FREE Trial",
52
+ "repository": {
53
+ "type": "git",
54
+ "url": "git+https://github.com/BALKANGraph/OrgChartReact.git"
55
+ },
56
+ "dependencies": {
57
+ "balkan-orgchart-js": "^9.1.80"
58
+ },
59
+ "version": "9.1.80"
60
+ }
package/readme.md CHANGED
@@ -37,28 +37,118 @@ yarn add balkan-orgchart-react
37
37
 
38
38
  ```js
39
39
 
40
+ import {OrgChartReact, Employee} from "balkan-orgchart-react";
41
+
42
+ export const ChartExample = () => {
43
+ return <OrgChartReact nodeBinding={{ field_0: 'name', field_1: 'title', img_0: 'photo'}} >
44
+ <Employee name='Denny Curtis' title='CEO' photo='https://cdn.balkan.app/shared/a/6.jpg'>
45
+ <Employee name='Lexie Cole' title='QA Lead' photo='https://cdn.balkan.app/shared/a/5.jpg'></Employee>
46
+ <Employee name='Janae Barrett' title='Technical Director' photo='https://cdn.balkan.app/shared/a/4.jpg'></Employee>
47
+ <Employee name='Aaliyah Webb' title='Assistant' photo='https://cdn.balkan.app/shared/a/3.jpg'></Employee>
48
+ </Employee>
49
+ </OrgChartReact>
50
+ }
40
51
 
41
- import {OrgChart, Employee} from "balkan-orgchart-react";
52
+ ```
42
53
 
43
- function App() {
44
- return (
45
- <>
46
- <OrgChart nodeBinding={{ field_0: 'name', field_1: 'title' }} >
47
- <Employee name='Denny Curtis' title='CEO'>
48
- <Employee name='Lexie Cole' title='QA Lead'></Employee>
49
- <Employee name='Janae Barrett' title='Technical Director'></Employee>
50
- <Employee name='Aaliyah Webb' title='Assistant' assistant={true}></Employee>
54
+
55
+ ## Load form JSON
56
+
57
+ ```js
58
+
59
+ import {OrgChartReact} from "balkan-orgchart-react";
60
+
61
+ export const ChartExample = () => {
62
+ const [jsonData, setJsonData] = useState([]);
63
+
64
+ useEffect(() => {
65
+ fetch('/data.json')
66
+ .then((response) => response.json())
67
+ .then((data) => {
68
+ setJsonData(data)
69
+ })
70
+ .catch((error) => {
71
+ console.error('Error loading data:', error)
72
+ })
73
+ }, []);
74
+
75
+ return <OrgChartReact data={jsonData} nodeBinding={{ field_0: 'name', field_1: 'title' }}></OrgChartReact>
76
+ }
77
+
78
+
79
+ ```
80
+
81
+ ## Custom Template
82
+
83
+ ```js
84
+ import {OrgChartReact, Employee, Template} from "balkan-orgchart-react";
85
+
86
+ export const ChartExample = () => {
87
+ return <OrgChartReact template='myTemplate1'>
88
+
89
+ <Template name='myTemplate1' nodeWidth={200} nodeHeight={100} baseTemplateName='ana' renderNode={(node, data) => {
90
+ return <>
91
+ <rect x="0" y="0" height={node.h} width={node.w} fill="#fff" stroke="#aeaeae" strokeWidth={1} rx={10} ry={10}> </rect>
92
+
93
+ <text x={node.w ? node.w / 2 : 0} y={node.h ? node.h / 2 + 10: 0} fill="#aeaeae" fontSize="20" textAnchor="middle">
94
+ {data.employeeName}
95
+ </text>
96
+ </>
97
+ }}>
98
+ </Template>
99
+
100
+ <Template name='myTemplate2' nodeWidth={500} nodeHeight={500} baseTemplateName='myTemplate1'></Template>
101
+
102
+ <Employee employeeName='Denny Curtis' >
103
+ <Employee employeeName='Lexie Cole'></Employee>
104
+ <Employee employeeName='Janae Barrett' template='myTemplate2'></Employee>
105
+ <Employee employeeName='Aaliyah Webb'></Employee>
51
106
  </Employee>
52
- </OrgChart>
53
- </>
54
- )
107
+ </OrgChartReact>
55
108
  }
56
109
 
57
- export default App
58
110
 
59
111
  ```
60
112
 
61
113
 
114
+ ## API Call
115
+
116
+
117
+ ```js
118
+
119
+ import { OrgChartReact, Employee, OrgChartJS } from "balkan-orgchart-react";
120
+
121
+ export const ChartExample = () => {
122
+ const chartRef = useRef<OrgChartJS>(null);
123
+
124
+ const handleExport = () => {
125
+ if (chartRef.current) {
126
+ chartRef.current.exportToPDF();
127
+ }
128
+ };
129
+
130
+ return (
131
+ <>
132
+ <button onClick={handleExport} style={{ fontSize: "24px"}}>Export PDF</button>
133
+
134
+ <OrgChartReact ref={chartRef} nodeBinding={{ field_0: "name", field_1: "title", img_0: "photo" }} >
135
+ <Employee name="Denny Curtis" title="CEO" photo="https://cdn.balkan.app/shared/a/6.jpg">
136
+ <Employee name="Lexie Cole" title="QA Lead" />
137
+ <Employee name="Janae Barrett" title="Technical Director" />
138
+ <Employee name="Aaliyah Webb" title="Assistant" />
139
+ </Employee>
140
+ </OrgChartReact>
141
+ </>
142
+ );
143
+ };
144
+
145
+ ```
146
+
147
+
148
+
149
+
150
+ You can call any API method from [here](https://balkan.app/OrgChartJS/API/classes/OrgChart)
151
+
62
152
 
63
153
 
64
154
  <br>