npm package: @nala-app/react-orgchart
Description: <img src="https://i.ibb.co/k9XP1Mr/image.png" width="700" height="300" />
Author: Nala app
Latest version: 0.0.2

# Organization Chart for nala-system

<img src="https://i.ibb.co/k9XP1Mr/image.png" width="700" height="300" />

## Features

- expand/collapse nodes
- Allows user to change orgchart structure by drag/drop nodes
- Allows user to edit orgchart
- Supports exporting chart as a picture or pdf document
- Supports pan and zoom
- Allows user to customize the internal structure for every node

## Props

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>chartClass</td>
      <td>string</td>
      <td></td>
      <td>A css class to apply to the chart DOM node.</td>
    </tr>
    <tr>
      <td>containerClass</td>
      <td>string</td>
      <td></td>
      <td>Add an optional extra class name to .orgchart-container It could end up looking like class="orgchart-container xxx yyy".</td>
    </tr>
    <tr>
      <td>collapsible</td>
      <td>boolean</td>
      <td>true</td>
      <td>Allows expanding/collapsing the nodes.</td>
    </tr>
    <tr>
      <td>datasource</td>
      <td>object</td>
      <td></td>
      <td>datasource usded to build out structure of orgchart.</td>
    </tr>
    <tr>
      <td>draggable</td>
      <td>boolean</td>
      <td>false</td>
      <td>Allows dragging/dropping the nodes to the hierarchy of chart.</td>
    </tr>
    <tr>
      <td>multipleSelect</td>
      <td>boolean</td>
      <td>false</td>
      <td>If true, user can select multiple nodes by mouse clicking.</td>
    </tr>
    <tr>
      <td>NodeTemplate</td>
      <td>elementType</td>
      <td></td>
      <td>A Component that provides the node content Markup. This is a useful prop when you want to use your own styles and markup to create a custom orgchart node.</td>
    </tr>
    <tr>
      <td>onClickChart</td>
      <td>function</td>
      <td></td>
      <td>A callback fired when the orgchart is clicking.</td>
    </tr>
    <tr>
      <td>onClickNode</td>
      <td>function</td>
      <td></td>
      <td>A callback fired when the node is clicking.</td>
    </tr>
    <tr>
      <td>pan</td>
      <td>boolean</td>
      <td>false</td>
      <td>If true, the chart can be panned.</td>
    </tr>
    <tr>
      <td>pan</td>
      <td>boolean</td>
      <td>false</td>
      <td>If true, the chart can be zoomed.</td>
    </tr>
    <tr>
      <td>zoominLimit</td>
      <td>number</td>
      <td>7</td>
      <td>User can zoom the chart at different scales(0.5~7).</td>
    </tr>
    <tr>
      <td>zoomoutLimit</td>
      <td>number</td>
      <td>0.5</td>
      <td>User can zoom the chart at different scales(0.5~7).</td>
    </tr>
  </tbody>
</table>

## Methods

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>expandAllNodes</td>
      <td>User can use this method to expand all the nodes. Sample code: orgchartRef.current.expandAllNodes()</td>
    </tr>
    <tr>
      <td>expandAllNodes</td>
      <td>User can use this method to export orgchart to png org pdf file. Sample code: orgchartRef.current.exportTo(filename, fileextension)</td>
    </tr>
  </tbody>
</table>

## Install

```
npm install @nala-app/react-orgchart
```

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br />
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run publish:npm`

To generate dist folder before of run npm publish.