balkan-orgchart-react 9.1.82 → 9.1.83

package/index.es.js

@@ -9858,7 +9858,7 @@ var o = a, s = { divToEmployees: function(e) {
 			l.current = i, e.onUpdateNode && i.onUpdateNode(e.onUpdateNode);
 		}
 	}, []), t(() => {
-		l.current && e.data;
+		l.current && e.data && e.data.length > 0 && l.current.load(e.data);
 	}, [e.data]), /* @__PURE__ */ i("div", {
 		ref: c,
 		style: {

package/index.umd.js

@@ -452,4 +452,4 @@ Please report this to https://github.com/markedjs/marked.`,e){let e=`<p>An error
                         </div>`},u.events.publish(`add-item`,[m,l]),d+=l.html}o=document.createElement(`div`);var g=u.filterUI.textFilterBy;o.innerHTML=`<fieldset>
                                                     <legend>${g} ${t}:</legend>
                                                     ${d}
-                                                </fieldset>`,o.setAttribute(`data-filter-menu`,t),o.classList.add(`boc-filter-menu`),e.target.parentNode.parentNode.appendChild(o);for(var _=o.querySelectorAll(`input`),r=0;r<_.length;r++)_[r].addEventListener(`change`,function(e){for(var t=e.target;t&&!t.hasAttribute(`data-filter-menu`);)t=t.parentNode;if(t){var n=t.getAttribute(`data-filter-menu`);if(e.target.hasAttribute(`data-all`)){for(var r=e.target.parentNode.parentNode.querySelectorAll(`input`),i=0;i<r.length;i++)if(r[i]!=e.target)for(var a in r[i].checked=e.target.checked,m.filterBy[n])m.filterBy[n][a].checked=e.target.checked}else if(m.filterBy[n][this.name]!=null&&(m.filterBy[n][this.name].checked=this.checked),this.checked){for(var o=m.instance.config.nodes,s=0;s<o.length;s++)if(o[s][n]==this.name){for(var c=o[s];c;)if(u.isNEU(c.stpid))c=u.isNEU(c.pid)?null:m.instance._get(c.pid);else if(c=m.instance._get(c.stpid),c[n]){var l=e.target.parentNode.parentNode.querySelector(`[name="`+c[n]+`"]`);l?(l.checked=this.checked,m.filterBy[n][c[n]].checked=this.checked):console.error(`Cannot find element with selector: [name="`+c[n]+`"]`)}}}var d=!0;for(var f in m.filterBy[n])m.filterBy[n][f].checked||(d=!1);var p=t.querySelector(`[data-all]`);p.checked=d,m.instance.draw()}})}o.style.display=`block`,e.target.classList.add(`filter-field-selected`),a=document.createElement(`div`),a.classList.add(`close`),a.innerHTML=`x`,a.setAttribute(`data-filter-close`,``),e.target.parentNode.appendChild(a),u.events.publish(`show-items`,[m,{name:t}])}}),this.instance.element.appendChild(this.element),u.events.publish(`update`,[this,{}])}},u.filterUI.prototype.on=function(e,t){return u.events.on(e,t,this._event_id),this},u.filterUI.textFilterBy=`Filter by`,u.filterUI.all=`[All]`,u===void 0&&(u={}),u.remote===void 0&&(u.remote={}),u.LIMIT_NODES=!0,u.remote._fromResDTO=function(e,t,n,r,i){var a=t[e.id];e.x=a.p[0],e.y=a.p[1],e.w=a.p[2],e.h=a.p[3],a.ln!=null&&(e.leftNeighbor=i[a.ln]),a.rn!=null&&(e.rightNeighbor=i[a.rn]),a.tl&&(e.treeList={},e.treeList.pinnedIds=a.tl[0],e.treeList.scrollTop=a.tl[1],e.treeList.scrollTopMax=a.tl[2],e.treeList.maxHeight=a.tl[3]);for(var o=0;o<e.stChildren.length;o++)u.remote._fromResDTO(e.stChildren[o],t,n,r,i);for(var o=0;o<e.children.length;o++)u.remote._fromResDTO(e.children[o],t,n,r,i)},u.remote._toReqDTO=function(e,t){var n={p:[e.id,e.parent==null?null:e.parent.id,e.stParent==null?null:e.stParent.id,e.w,e.h]};e.children.length>0&&(n.c=u.remote._convertToIdArray(e.children)),e.stChildren.length>0&&(n.v=u.remote._convertToIdArray(e.stChildren)),e.layout!=null&&e.layout!=0&&(n.l=e.layout),e.isAssistant&&(n.a=1),e.isSplit&&(n.s=e.isSplit),e.isMirror&&(n.im=e.isMirror),e.padding&&(n.q=e.padding),e.lcn&&(n.k=e.lcn),e.stContainerNodes&&(n.b=u.remote._convertToIdArray(e.stContainerNodes)),e.isPartner&&(n.i=e.isPartner),e.hasPartners&&(n.g=e.hasPartners),e.partnerSeparation&&(n.e=e.partnerSeparation),e.treeList&&(n.z=[e.treeList.scrollTop,e.treeList.maxHeight]),t.push(n);for(var r=0;r<e.stChildren.length;r++)u.remote._toReqDTO(e.stChildren[r],t);for(var r=0;r<e.children.length;r++)u.remote._toReqDTO(e.children[r],t)},u.remote._toReqLayoutConfigsDTO=function(e){var t={};for(var n in e){var r=e[n];t[n]||(t[n]=[]),t[n][0]=r.orientation,t[n][1]=r.levelSeparation,t[n][2]=r.mixedHierarchyNodesSeparation,t[n][3]=r.subtreeSeparation,t[n][4]=r.siblingSeparation,t[n][5]=r.layout,t[n][6]=r.columns,t[n][7]=r.collapse,t[n][8]=r.assistantSeparation,t[n][9]=r.partnerNodeSeparation}return t},u.remote._convertToIdArray=function(e){for(var t=[],n=0;n<e.length;n++)t.push(e[n].id);return t},u.remote._setPositions=function(e,t,n,r){for(var i=[],a=[],o=u.remote._toReqLayoutConfigsDTO(t),s=0;s<e.length;s++)a.push(e[s].id),u.remote._toReqDTO(e[s],i);var c={n:i,c:o,r:a,v:`9.00.19`};if(u.LIMIT_NODES||(c.l=!0),u.remote._fromReqDTO!=null)u.remote._fromReqDTO(c.n,c.r,c.c,function(t){for(var i=0;i<e.length;i++)u.remote._fromResDTO(e[i],t,0,e,r);n()});else{c=JSON.stringify(c);var l=u.localStorage.getItem(c);l&&=JSON.parse(l),l&&!l.limit?u.remote._proceed(e,l,r,n):u.remote._findRegion(function(t){u._ajax(t,`post`,c,`json`,function(t){t.error?n(2):(u.remote._proceed(e,t,r,n),u.localStorage.setItem(c,JSON.stringify(t)))})})}},u.remote._proceed=function(e,t,n,r){if(typeof t==`string`&&(t=JSON.parse(t)),t.limit&&t.limit==1)r(t.limit);else{for(var i=0;i<e.length;i++)u.remote._fromResDTO(e[i],t,0,e,n);r()}},u.remote._findRegion=function(e){var t=u.localStorage.getItem(u.FUNC_URL_NAME);if(t)e(t);else{for(var n=[`defunc2`,`cusfunc2`,`bsfunc2`,`acfunc2`,`kcfunc2`,`safunc2`,`wifunc2`],r=[],i=0;i<n.length;i++)r.push(new XMLHttpRequest);for(var i=0;i<n.length;i++)(function(){var t=`https://`+n[i]+u.SERVER_PREFIX,a=r[i];a.onreadystatechange=function(){if(this.readyState==4&&this.status==200){u.localStorage.setItem(u.FUNC_URL_NAME,t),e(t);for(var n=0;n<r.length;n++)r[n].abort()}},a.open(`GET`,t,!0),a.send()})()}};var d=u,f={divToEmployees:function(e){let t=[],n=1;function r(e,i){let a=n++,o={id:a};i!==void 0&&(o.pid=i),Array.from(e.attributes).forEach(e=>{let t=e.name.replace(`data-`,``),n=e.value;t===`assistant`||t===`partner`?n===`true`&&(o.tags||=[],o.tags.push(t)):o[t]=n}),t.push(o),Array.from(e.children).forEach(e=>{r(e,a)})}return Array.from(e.children).forEach(e=>r(e)),t}},p=function({children:e,title:t,name:r,photo:i,assistant:a,partner:o,...s}){return(0,n.jsx)(`div`,{...Object.keys(s).reduce((e,t)=>(e[`data-${t}`]=s[t],e),{}),"data-title":t,"data-name":r,"data-photo":i,"data-assistant":a,"data-partner":o,children:e})},m=(0,t.forwardRef)((e,r)=>{let i=(0,t.useRef)(null),a=(0,t.useRef)(null);return(0,t.useImperativeHandle)(r,()=>({get instance(){return a.current}})),(0,t.useEffect)(()=>{if(i.current&&!a.current){let t=f.divToEmployees(i.current),n=e?.data;t&&!n&&(n=t);let r={...e,nodes:n},o=new d(i.current,r);a.current=o,e.onUpdateNode&&o.onUpdateNode(e.onUpdateNode)}},[]),(0,t.useEffect)(()=>{a.current&&e.data},[e.data]),(0,n.jsx)(`div`,{ref:i,style:{width:`100%`,height:`600px`,...e?.style},children:e?.children})});m.displayName=`OrgChart`,e.Employee=p,e.OrgChart=m});
+                                                </fieldset>`,o.setAttribute(`data-filter-menu`,t),o.classList.add(`boc-filter-menu`),e.target.parentNode.parentNode.appendChild(o);for(var _=o.querySelectorAll(`input`),r=0;r<_.length;r++)_[r].addEventListener(`change`,function(e){for(var t=e.target;t&&!t.hasAttribute(`data-filter-menu`);)t=t.parentNode;if(t){var n=t.getAttribute(`data-filter-menu`);if(e.target.hasAttribute(`data-all`)){for(var r=e.target.parentNode.parentNode.querySelectorAll(`input`),i=0;i<r.length;i++)if(r[i]!=e.target)for(var a in r[i].checked=e.target.checked,m.filterBy[n])m.filterBy[n][a].checked=e.target.checked}else if(m.filterBy[n][this.name]!=null&&(m.filterBy[n][this.name].checked=this.checked),this.checked){for(var o=m.instance.config.nodes,s=0;s<o.length;s++)if(o[s][n]==this.name){for(var c=o[s];c;)if(u.isNEU(c.stpid))c=u.isNEU(c.pid)?null:m.instance._get(c.pid);else if(c=m.instance._get(c.stpid),c[n]){var l=e.target.parentNode.parentNode.querySelector(`[name="`+c[n]+`"]`);l?(l.checked=this.checked,m.filterBy[n][c[n]].checked=this.checked):console.error(`Cannot find element with selector: [name="`+c[n]+`"]`)}}}var d=!0;for(var f in m.filterBy[n])m.filterBy[n][f].checked||(d=!1);var p=t.querySelector(`[data-all]`);p.checked=d,m.instance.draw()}})}o.style.display=`block`,e.target.classList.add(`filter-field-selected`),a=document.createElement(`div`),a.classList.add(`close`),a.innerHTML=`x`,a.setAttribute(`data-filter-close`,``),e.target.parentNode.appendChild(a),u.events.publish(`show-items`,[m,{name:t}])}}),this.instance.element.appendChild(this.element),u.events.publish(`update`,[this,{}])}},u.filterUI.prototype.on=function(e,t){return u.events.on(e,t,this._event_id),this},u.filterUI.textFilterBy=`Filter by`,u.filterUI.all=`[All]`,u===void 0&&(u={}),u.remote===void 0&&(u.remote={}),u.LIMIT_NODES=!0,u.remote._fromResDTO=function(e,t,n,r,i){var a=t[e.id];e.x=a.p[0],e.y=a.p[1],e.w=a.p[2],e.h=a.p[3],a.ln!=null&&(e.leftNeighbor=i[a.ln]),a.rn!=null&&(e.rightNeighbor=i[a.rn]),a.tl&&(e.treeList={},e.treeList.pinnedIds=a.tl[0],e.treeList.scrollTop=a.tl[1],e.treeList.scrollTopMax=a.tl[2],e.treeList.maxHeight=a.tl[3]);for(var o=0;o<e.stChildren.length;o++)u.remote._fromResDTO(e.stChildren[o],t,n,r,i);for(var o=0;o<e.children.length;o++)u.remote._fromResDTO(e.children[o],t,n,r,i)},u.remote._toReqDTO=function(e,t){var n={p:[e.id,e.parent==null?null:e.parent.id,e.stParent==null?null:e.stParent.id,e.w,e.h]};e.children.length>0&&(n.c=u.remote._convertToIdArray(e.children)),e.stChildren.length>0&&(n.v=u.remote._convertToIdArray(e.stChildren)),e.layout!=null&&e.layout!=0&&(n.l=e.layout),e.isAssistant&&(n.a=1),e.isSplit&&(n.s=e.isSplit),e.isMirror&&(n.im=e.isMirror),e.padding&&(n.q=e.padding),e.lcn&&(n.k=e.lcn),e.stContainerNodes&&(n.b=u.remote._convertToIdArray(e.stContainerNodes)),e.isPartner&&(n.i=e.isPartner),e.hasPartners&&(n.g=e.hasPartners),e.partnerSeparation&&(n.e=e.partnerSeparation),e.treeList&&(n.z=[e.treeList.scrollTop,e.treeList.maxHeight]),t.push(n);for(var r=0;r<e.stChildren.length;r++)u.remote._toReqDTO(e.stChildren[r],t);for(var r=0;r<e.children.length;r++)u.remote._toReqDTO(e.children[r],t)},u.remote._toReqLayoutConfigsDTO=function(e){var t={};for(var n in e){var r=e[n];t[n]||(t[n]=[]),t[n][0]=r.orientation,t[n][1]=r.levelSeparation,t[n][2]=r.mixedHierarchyNodesSeparation,t[n][3]=r.subtreeSeparation,t[n][4]=r.siblingSeparation,t[n][5]=r.layout,t[n][6]=r.columns,t[n][7]=r.collapse,t[n][8]=r.assistantSeparation,t[n][9]=r.partnerNodeSeparation}return t},u.remote._convertToIdArray=function(e){for(var t=[],n=0;n<e.length;n++)t.push(e[n].id);return t},u.remote._setPositions=function(e,t,n,r){for(var i=[],a=[],o=u.remote._toReqLayoutConfigsDTO(t),s=0;s<e.length;s++)a.push(e[s].id),u.remote._toReqDTO(e[s],i);var c={n:i,c:o,r:a,v:`9.00.19`};if(u.LIMIT_NODES||(c.l=!0),u.remote._fromReqDTO!=null)u.remote._fromReqDTO(c.n,c.r,c.c,function(t){for(var i=0;i<e.length;i++)u.remote._fromResDTO(e[i],t,0,e,r);n()});else{c=JSON.stringify(c);var l=u.localStorage.getItem(c);l&&=JSON.parse(l),l&&!l.limit?u.remote._proceed(e,l,r,n):u.remote._findRegion(function(t){u._ajax(t,`post`,c,`json`,function(t){t.error?n(2):(u.remote._proceed(e,t,r,n),u.localStorage.setItem(c,JSON.stringify(t)))})})}},u.remote._proceed=function(e,t,n,r){if(typeof t==`string`&&(t=JSON.parse(t)),t.limit&&t.limit==1)r(t.limit);else{for(var i=0;i<e.length;i++)u.remote._fromResDTO(e[i],t,0,e,n);r()}},u.remote._findRegion=function(e){var t=u.localStorage.getItem(u.FUNC_URL_NAME);if(t)e(t);else{for(var n=[`defunc2`,`cusfunc2`,`bsfunc2`,`acfunc2`,`kcfunc2`,`safunc2`,`wifunc2`],r=[],i=0;i<n.length;i++)r.push(new XMLHttpRequest);for(var i=0;i<n.length;i++)(function(){var t=`https://`+n[i]+u.SERVER_PREFIX,a=r[i];a.onreadystatechange=function(){if(this.readyState==4&&this.status==200){u.localStorage.setItem(u.FUNC_URL_NAME,t),e(t);for(var n=0;n<r.length;n++)r[n].abort()}},a.open(`GET`,t,!0),a.send()})()}};var d=u,f={divToEmployees:function(e){let t=[],n=1;function r(e,i){let a=n++,o={id:a};i!==void 0&&(o.pid=i),Array.from(e.attributes).forEach(e=>{let t=e.name.replace(`data-`,``),n=e.value;t===`assistant`||t===`partner`?n===`true`&&(o.tags||=[],o.tags.push(t)):o[t]=n}),t.push(o),Array.from(e.children).forEach(e=>{r(e,a)})}return Array.from(e.children).forEach(e=>r(e)),t}},p=function({children:e,title:t,name:r,photo:i,assistant:a,partner:o,...s}){return(0,n.jsx)(`div`,{...Object.keys(s).reduce((e,t)=>(e[`data-${t}`]=s[t],e),{}),"data-title":t,"data-name":r,"data-photo":i,"data-assistant":a,"data-partner":o,children:e})},m=(0,t.forwardRef)((e,r)=>{let i=(0,t.useRef)(null),a=(0,t.useRef)(null);return(0,t.useImperativeHandle)(r,()=>({get instance(){return a.current}})),(0,t.useEffect)(()=>{if(i.current&&!a.current){let t=f.divToEmployees(i.current),n=e?.data;t&&!n&&(n=t);let r={...e,nodes:n},o=new d(i.current,r);a.current=o,e.onUpdateNode&&o.onUpdateNode(e.onUpdateNode)}},[]),(0,t.useEffect)(()=>{a.current&&e.data&&e.data.length>0&&a.current.load(e.data)},[e.data]),(0,n.jsx)(`div`,{ref:i,style:{width:`100%`,height:`600px`,...e?.style},children:e?.children})});m.displayName=`OrgChart`,e.Employee=p,e.OrgChart=m});

package/package.json

@@ -54,5 +54,5 @@
     "url": "git+https://github.com/BALKANGraph/OrgChartReact.git"
   },
   "dependencies": {},
-  "version": "9.1.82"
+  "version": "9.1.83"
 }

package/readme.md

@@ -38,27 +38,83 @@ yarn add balkan-orgchart-react
 ```js
 
 
-import {OrgChart, Employee} from "balkan-orgchart-react";
+import {OrgChart, Employee} from "../src/OrgChart.tsx";
 
-function App() {
-  return (
-    <>
-     <OrgChart nodeBinding={{ field_0: 'name', field_1: 'title' }} >
+export const ChartExample = () => {
+  return   <OrgChart nodeBinding={{ field_0: 'name', field_1: 'title' }} style={{width: '100%', height: '100%'}} enableSearch={false}>
       <Employee name='Denny Curtis' title='CEO'>
         <Employee name='Lexie Cole' title='QA Lead'></Employee>
         <Employee name='Janae Barrett' title='Technical Director'></Employee>
         <Employee name='Aaliyah Webb' title='Assistant' assistant={true}></Employee>
       </Employee>
      </OrgChart>
-    </>
-  )
 }
 
-export default App
+```
+
+
+## Load form JSON
+
+```js
+
+import {OrgChart} from "../src/OrgChart.tsx";
+
+export const ChartExample = () => {
+  const [jsonData, setJsonData] = useState([]);
+
+  useEffect(() => {
+    fetch('/data.json')
+      .then((response) => response.json())
+      .then((data) => {
+        setJsonData(data)
+      })
+      .catch((error) => {
+        console.error('Error loading data:', error)
+      })
+  }, []);
+
+  return  <OrgChart style={{width: '100%', height: '100%'}} data={jsonData}  nodeBinding={{ field_0: 'name', field_1: 'title' }} enableSearch={false}></OrgChart>
+}
+
+```
+
+
+
+
+## API Call
+
+
+```js
+
+import { OrgChart, Employee, OrgChartRef } from "../src/OrgChart.tsx";
+
+export const ChartExample = () => {
+  const chartRef = useRef<OrgChartRef>(null);
+
+  const handleExport = () => {
+    chartRef.current?.instance?.exportToPDF();
+  };
+
+  return (
+    <>
+      <button onClick={handleExport} style={{ fontSize: "24px"}}>Export PDF</button>
+
+      <OrgChart ref={chartRef} nodeBinding={{ field_0: "name", field_1: "title" }} style={{width: '100%', height: '100%'}} enableSearch={false}>
+        <Employee name="Denny Curtis" title="CEO">
+          <Employee name="Lexie Cole" title="QA Lead" />
+          <Employee name="Janae Barrett" title="Technical Director" />
+          <Employee name="Aaliyah Webb" title="Assistant" assistant />
+        </Employee>
+      </OrgChart>
+    </>
+  );
+};
 
 ```
 
 
+You can call any API method from [here](https://balkan.app/OrgChartJS/API/classes/OrgChart)
+
 
 
 <br>