@balkangraph/orgchart.js 8.16.2 → 8.16.4

package/orgchart.d.ts

@@ -2785,17 +2785,45 @@ declare namespace OrgChart {
 
     
     interface filterUI {
+        /**
+         * @ignore
+         */
         init(instance: OrgChart): void;   
+
+        /**
+         * @ignore
+         */
         update(): void;
+
         /**
          * Opens filter Tab 
+         * ```typescript
+         * let chart = new OrgChart("#tree", {
+         * })
+         * chart.onInit(() => {
+         *  chart.filterUI.show("city")
+         * })
+         * chart.load(nodes)
+         * ```
          * @param filterTabName the name of the filter tab
          */
         show(filterTabName: string): void;
+
         /**
-         * Hides the filter tabs
+         * Opens filter Tab 
+         * ```typescript
+         * chart.element.addEventListener('click', function(event){
+         *  if (event.target == chart.getSvg()){
+         *      chart.filterUI.hide();
+         *  }
+         * });
+         * ```
          */
         hide(): void;
+
+        /**
+         * @ignore
+         */
         addFilterTag(data: object): boolean;
                 /**
          * The on() method of the filterUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
@@ -2803,6 +2831,22 @@ declare namespace OrgChart {
          * @param type A case-sensitive string representing the event type to listen for.
          * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
          */
+
+        /**
+         * Opens filter Tab 
+         * ```typescript
+         * let chart = new OrgChart("#tree", {
+         * })
+         * chart.filterUI.on('add-filter', function(sender, args){
+         *  let names = Object.keys(sender.filterBy);
+         *  let index = names.indexOf(args.name);
+         *  if (index == names.length - 1) {
+         *      args.html += `<div data-btn-reset style="color: #039BE5;">reset</div>`;
+         *  } 
+         * });
+         * chart.load(nodes)
+         * ```
+         */
         on(type: "update" | "add-item" | "add-filter" | "show-items" , listener: (sender: filterUI, args: any, args1: any, args2: any) => void | boolean): filterUI;
         filterBy?: any;
         element: HTMLElement;
@@ -3370,6 +3414,19 @@ declare namespace OrgChart {
         btn?: string,
         vlidators?: { required?: string, email?: string }
     }
+
+    /**
+     * Defines a Slink or Clink.
+     * ```typescript     
+     * let chart = new OrgChart('#tree', {
+     *   clinks: [
+     *       { from: 4, to: 0, label: 'text' }, 
+     *       { from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
+     *       { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
+     *   ]
+     * });
+     * ```
+     */
     interface link {
         from?: string | number,
         to?: string | number,
@@ -3387,15 +3444,50 @@ declare namespace OrgChart {
         opacity?: number,
         except?: Array<string | number>
     }
+
+    /**
+     * Node object that shows a secondary connection
+     * ```typescript
+     * let chart = new OrgChart('#tree', {
+     *  dottedLines: [
+     *      { from: 5, to: 1 }
+     *  ]
+     * });
+     * ```
+     * {@link https://balkan.app/OrgChartJS/Docs/DottedLine | See doc...}
+     */
     interface dottedLine {
         from?: string | number,
         to?: string | number,
         tags?: Array<string>
     }
+
+    /**
+     * The orderBy contains the field name and the *desc* value   
+     * ```typescript       
+     * let chart = new OrgChart('#tree', {
+     *   orderBy: [
+     *      { field: 'name', desc: false },
+     *      { field: 'surname', desc: true },
+     *  ]
+     * });
+     * ```      
+     */
     interface orderBy {
         field?: string,
         desc?: boolean
     }
+
+    /**
+     * Contains the move position
+     * ```typescript
+     * document.getElementById('btn_left').addEventListener('mousedown', function(){
+     *  chart.moveStart({
+     *      left: true
+     *  });
+     * });
+     * ```
+     */
     interface move {
         left?: boolean,
         right?: boolean,
@@ -4416,11 +4508,11 @@ declare namespace OrgChart {
         /**
          * Adds curved link.
          * ```typescript     
-         * var chart = new OrgChart('#tree', {
+         * let chart = new OrgChart('#tree', {
          *   clinks: [
-         *       from: 4, to: 0, label: 'text'}, 
-         *       {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
-         *       {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
+         *       { from: 4, to: 0, label: 'text'}, 
+         *       { from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
+         *       { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
          *   ]
          * });
          * ```
@@ -4429,11 +4521,11 @@ declare namespace OrgChart {
         /**
          * Adds second link.
          * ```typescript     
-         * var chart = new OrgChart('#tree', {
+         * let chart = new OrgChart('#tree', {
          *   slinks: [
-         *       from: 4, to: 0, label: 'text'}, 
-         *       {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
-         *       {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
+         *       { from: 4, to: 0, label: 'text' }, 
+         *       { from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
+         *       { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
          *   ]
          * });
          * ```