dabeng/react-orgchart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

jQuery Version

ES6 Version

Web Components Version

Vue.js Version

Angular Version

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

Name	Type	Default	Description
chartClass	string		A css class to apply to the chart DOM node.
containerClass	string		Add an optional extra class name to .orgchart-container It could end up looking like class="orgchart-container xxx yyy".
collapsible	boolean	true	Allows expanding/collapsing the nodes.
datasource	object		datasource usded to build out structure of orgchart.
draggable	boolean	false	Allows dragging/dropping the nodes to the hierarchy of chart.
multipleSelect	boolean	false	If true, user can select multiple nodes by mouse clicking.
NodeTemplate	elementType		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.
onClickChart	function		A callback fired when the orgchart is clicking.
onClickNode	function		A callback fired when the node is clicking.
pan	boolean	false	If true, the chart can be panned.
zoom	boolean	false	If true, the chart can be zoomed.
zoominLimit	number	7	User can zoom the chart at different scales(0.5~7).
zoomoutLimit	number	0.5	User can zoom the chart at different scales(0.5~7).

Methods

Name	Description
expandAllNodes	User can use this method to expand all the nodes. Sample code: orgchartRef.current.expandAllNodes()
exportTo	User can use this method to export orgchart to png org pdf file. Sample code: orgchartRef.current.exportTo(filename, fileextension)

Install

npm install @dabeng/react-orgchart

Demo

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

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

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

react-orgchart's Issues

removeNewNode deletes two nodes instead of one

When using the +/- buttons of edit-chart under New Nodes clicking minus removes two nodes instead of one. Please advise

关于datasource中子节点展开

我看到jquery版本的有一个 'collapsed': true,可以控制是否展示子节点，但是在react版本中，此配置不生效

Drag and drop without children

Is there any way to drag and drop the parent nodes without children nodes?

warning, unique key prop for chartnode

why it is warning?

Warning: Each child in a list should have a unique "key" prop.
in ChartNode (created by ChartNode)
in ChartNode (created by ForwardRef)
in ul (created by ForwardRef)
in div (created by ForwardRef)
in div (created by ForwardRef)

Check the render method of ChartNode. See https://fb.me/react-warning-keys for more information.

Level / Depth When First Show

Hayy, thanks to created react version.
I have problem, how to set level or depth my org chart? I have 10 level, but i just want to show 3 level then i can expand manual.

Sorry for my bad english.
Thanks.

Feature Suggestion : Support for Hybrid (vertical + horizontal) layout

Hi @dabeng ,
Thanks for creating a wonderful library with multiple customization options.
I would like to request and suggest if you could add a feature for supporting hybrid layouts for more space saving Organization charts, it would be really helpful.
Thanks in advance
Hoping for your reply soon :-)

how to props style ?

I wona change node width .oc-heding to 30px;
how to props that?

images and large org data does not export properly

I have added some images in org but it shows empty and some of the org cards disappear if it has large data

Left 2 Right, Right 2 LeftL

Are you planning to implement l2r and r2l also in this version ?
If not, have you got some advice on how to performe this operation in react component ?
Thank you

color-coded chart

I am trying to implement color-coded chart but className values in the datasource are not applied to the elements.
like provided example as follow https://dabeng.github.io/OrgChart/color-coded.html

可否调整框的大小，感觉有点太宽了，数据很多的时候蔓延的很长

Jest + react-testing-library failures

I'm trying to do a simple unit test with Jest + react-testing-library but I'm getting errors when trying to render your component.

To reproduce: Write any simple test case for initializing your component using Jest + react-testing-library

Do I need to set up any mocks in order to use this component in a jest environment?

I'm getting this error in the console

ReferenceError: regeneratorRuntime

Hello, I have a very basic project based off the Pan and zoom example in the codesandbox.
https://codesandbox.io/s/react-orgchart-demo-o3nf6

The page won't even load, react catches the error before the page loads.

Uncaught ReferenceError: regeneratorRuntime is not defined
 at react-dom.development.js:25012
    at react-dom.development.js:25012
    at renderWithHooks (react-dom.development.js:18331)
    at updateForwardRef (react-dom.development.js:20338)
    at beginWork (react-dom.development.js:22103)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3596)
    at Object.invokeGuardedCallbackDev (radial-gradient.ts:22)
    at invokeGuardedCallback (-prefix-radial-gradient.ts:70)
    at beginWork$1 (react-dom.development.js:25012)
    at performUnitOfWork (react-dom.development.js:25012)

react-dom.development.js:22984 The above error occurred in the <ForwardRef> component:
    in ForwardRef
    in Unknown
    in Route
    in Routes
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Unknown

Here is a minimal reproduced project:
https://github.com/zacharytyhacz/react-orgchart-bug

Question: Multi-Parent Support

Is there a way to have multiple siblings be the parent for children nodes?

i.e. Three founders having the rest of the company listed under them

Canvas Size

This is less of an issue and more of a question. How can I change the size of the canvas in the browser? It takes 100% of the width but only 744 of the height. Can I get some direction on where these settings would be for the height?

Thanks

How to access click event from NodeTemplate custom node in react

Hi @dabeng
I want to achieve this kind of functionally. Can you please help me out. I'm new to react & unable to find any solution.

// parent class
const ParentClass = () => {
const showForm = (event) => {
console.log('showForm');
};

return(
   <OrganizationChart
       ref={orgchart}
       datasource={ds
       NodeTemplate={MyNode}
   </>
);

}

// NodeTemplate class
const MyNode = () => {

Show Form

// want to click a button event
}

MyNode.propTypes = propTypes;
export default MyNode;

Thanks in advance.

onClick event

Is it possible to have On click event (to click on node and then get the node information).

Thanks

Manifest: Line: 1, column: 1, Syntax error.

This error happened at once in the browser console after the command npm run start

filter feature ?

is there a filter feature for the react version ? the only way i found is to filter the data source but its just replacing org chart with another

default collapsed example doesn't work in React version

Collapsing nodes by default using collapsed: true & className: 'slide-up' as done in https://dabeng.github.io/OrgChart/default-collapsed.html, doesn't work in react version.

codeSandboxFork: https://codesandbox.io/s/react-orgchart-demo-forked-8k6dd?file=/src/default-chart/default-chart.js

Any workaround to get this working? Please help.

Direction support for react?

Is there a way to do direction like the way you have for other versions of this library ?
for example from here

// sample of core source code let orgchart = new OrgChart({ 'data' : datascource, 'nodeContent': 'title', 'direction': 'r2l' }); document.querySelector('#chart-container').appendChild(orgchart);

Is there any documentation which explains how to instantiate react-orgchart? data structure of the properties and all

React orgchart verticalLevel or verticalDepth

I installed React orgchart npm install @dabeng/react-orgchart vs 1.0.0;
verticalLevel or verticalDepth feature is not working.

but later I've tried npm i orgchart vs 3.1.1;
but i think there is no 3.1.1 react version...

now i must use jquery version ? or is there any other solution ?

Is there any APIs to hide the children or siblings of a node based on id ?

in jquery version of this package, APIs are there to hide child or siblings of a node based on id value of node.Can we have same type apis in react version also?

From Database

My data is returned from the database.
How do I create the datasource with my data?

Action in Button Expand Node

Can i create custom action when i click expand node? If can, how i do that?
Thanks

After adding child node to a selected element drag & drop is not working

Hi @dabeng
I'm getting this error -
SyntaxError: Failed to execute 'querySelector' on 'Document': '#562bebec-9002-4228-b3da-1a3a589323d1' is not a valid selector.

Can you please look into this. Thanks in advance.

react Implementation for Mendix

Sorry to post this here, Xuebin Dong! Couldn't find an email to reach out to you.
Could you image to do a paid conversation of this widget for Mendix?
Mendix is a low code platform based on react/typescript.
And the datasource connection would be 'specific' to hook it into the drag and drop environment of Mendix. For an expert like you, it should be a matter of a couple of hours.
Let me know if you are interested - I really could use org charts for one of my Mendix projects.
[email protected]

[Feature suggestion]: Expand to certain level when start

Hi @dabeng dabeng

Thanks for creating a wonderful module.
I would like to know if it is possible to config a certain level of expansion on start? If it is not available, please consider it as a feature suggestion.

Thanks,

Uncaught SyntaxError: Unexpected token '<'

This error happened in the browser console at once after npm run start

Report path with a collapsed attribute?

Hi there,

I want to do a report path (like here) but can't find any attribute to tell to hide or collapse a node. Am I missing anything ?

Cheers

无法正常启动

直接启动，在3000端口访问页面会显示异常
重新用create-react-app创建工程再把代码拷进去是可用的
估计现有的create-react-app版本不匹配

Uncaught TypeError: Cannot read property 'parentNode' of null

While dragging the graph very first sometimes I'm getting this error Uncaught TypeError: Cannot read property 'parentNode' of null

I'll be thankful for Any suggestions or help.

react typescript的环境支持

请问有对ts编写react的环境进行支持吗？ts环境下会报项目缺少类型检查，需要自己写描述文件

Any targets for the release?

Hello.
Im using the ES6 version on a react project with succeess but the full react would be better.
Any code ready in this implementation or need help on it?

npm install does not work behind a proxy because of ssh

we have problems with ssh because we are behind a proxy.

Can you change the package so that dependencies are not downloaded via ssh?

On demand data

Any answer for on demand data, click the node, get the data based on api result, update to the state?

Nexjs & Error importing CSS files within node_modules

Description
Error importing CSS files within node_modules and compatibility with Nextjs app.

Reproduce

1. Have a running Nextjs app.
2. yarn add @dabeng/react-orgchart
3. Add Organization chart to an empty page

//

import OrganizationChart from "@dabeng/react-orgchart"
import React from "react"

const DnDChart = () => {
  const ds = {
    id: "n1",
    name: "Lao Lao",
    title: "general manager",
    children: [
      {id: "n2", name: "Bo Miao", title: "department manager"},
      {
        id: "n3",
        name: "Su Miao",
        title: "department manager",
        children: [
          {id: "n4", name: "Tie Hua", title: "senior engineer"},
          {
            id: "n5",
            name: "Hei Hei",
            title: "senior engineer",
            children: [
              {id: "n6", name: "Dan Dan", title: "engineer"},
              {id: "n7", name: "Xiang Xiang", title: "engineer"}
            ]
          },
          {id: "n8", name: "Pang Pang", title: "senior engineer"}
        ]
      },
      {id: "n9", name: "Hong Miao", title: "department manager"},
      {
        id: "n10",
        name: "Chun Miao",
        title: "department manager",
        children: [{id: "n11", name: "Yue Yue", title: "senior engineer"}]
      }
    ]
  }

  return <OrganizationChart datasource={ds} draggable={true} />
}

export default DnDChart

Error

Cause
With Next.js importing CSS files within node_modules cannot be supported because we cannot know the correct behavior:

• Should the file be consumed as Global CSS or CSS Modules?
• If Global, in what order does the file need to be injected?
• If Modules, what are the emitted class names? As-is, camel-case, snake case?
• Etc.

More details: https://nextjs.org/docs/messages/css-npm

Uncaught TypeError: Cannot read property 'parentNode' of null

Hi @dabeng
In React Orgchart When I'm moving the graph haphazardly or doing hover on that somehow return parent node getting undefined or null. So I have added an if condition in ChartNode.js file after that the functionality is working smoothly.

I have found a solution but for that, I have to change in the node module's ChartNode.js file. So, if you can update your package & release a new version then it will be very helpful for me

Filename: node_modules@dabeng\react-orgchart\dist\ChartNode.js
in var addArrows = function.
line number 140 add the line if (!node) return false;

Thanks in advance

Feature: when does it support Orientation

className not applied

The className values in the datasource are not applied to the elements.

Export new datasource

Hi, is there a way to export the datasource upon adding/deleting/updating the chart?
I saw on the jQuery version that there is a method called getHierarchy(), which is what I am looking for. But there is no such method in this react version. Does anyone have any suggestion?
Thanks.

react 版本没有verticalLevel 这个属性吗，我想要水平垂直的功能

Package dependencies