Simple, high-performance react component for d3 org chart
npm install @xinyu910/react-org-chartperson to entity throughout the codebase
department
subTitle text element under the title.
getName, getTitle, getSubTitle, getCount)
onNameClick, onTitleClick, onSubTitleClick, onCountClick)
nameFontSize, titleFontSize, subTitleFontSize, countFontSize)
nameTruncateLength, titleTruncateLength, subTitleTruncateLength)
Object | Required | Nested data model with some of all the employees in the company | See sample below |
Function | Required | To set the latest config to state on change | See usage below |
Function | Required | Pass latest config from state to OrgChart | See usage below |
Function | Optional | Function to get custom formatting / values for the name. Called with (data) arguments | See usage below |
Function | Optional | Function to get custom formatting / values for the title. Called with (data) arguments | See usage below |
Function | Optional | Function to get custom formatting / values for the sub title. Called with (data) arguments | See usage below |
Function | Optional | Function to get custom formatting / values for the count. Called with (data) arguments | See usage below |
Function | Optional | Function to call on click of the name. Called with (data) arguments | See usage below |
Function | Optional | Function to call on click of the title. Called with (data) arguments | See usage below |
Function | Optional | Function to call on click of the sub title. Called with (data) arguments | See usage below |
Function | Optional | Function to call on click of the count. Called with (data) arguments | See usage below |
Number | Optional | The font size of the name text element | 14 |
Number | Optional | The font size of the title text element | 13 |
Number | Optional | The font size of the title text element | 14 |
Number | Optional | The font size of the count text element | 14 |
Number | Optional | Width of the component for each individual | 180 |
Number | Optional | Height of the component for each individual | 100 |
Number | Optional | Spacing between each of the nodes in the chart | 12 |
Number | Optional | Duration of the animations in milliseconds | 350 |
String | Optional | Type of line that connects the nodes to each other | “angle” “curve” |
String | Optional | Id of the DOM element that, on click, will trigger the download of the org chart as PNG. OrgChart will bind the click event to the DOM element with this ID | "download-image" (default) |
String | Optional | Id of the DOM element that, on click, will trigger the download of the org chart as PDF. OrgChart will bind the click event to the DOM element with this ID | "download-pdf" (default) |
String | Optional | Id of the DOM element that, on click, will trigger a zoom of the org chart. OrgChart will bind the click event to the DOM element with this ID | "zoom-in" (default) |
String | Optional | Id of the DOM element that, on click, will trigger the zoom out of the org chart. OrgChart will bind the click event to the DOM element with this ID | "zoom-out" (default) |
String | Optional |Id of the DOM element that, on click, will display whole org chart svg fit to screen. OrgChart will bind the click event to the DOM element with this ID(Optional) | "zoom-extent" (default) |
Function | Optional | Load parent with one level of children | See usage below |
Function | Optional | Load the children of particular node | See usage below |
Function | Optional | To get image of person on API call | See usage below |
jsx
{
id: 1,
entity: {
id: 1,
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg',
name: 'Jane Doe',
title: 'IT',
subTitle: 'CEO',
totalReports: 5
},
hasChild: true,
hasParent: false,
isHighlight: true,
children: [
{
id: 2,
entity: {
id: 2,
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg',
name: 'John Foo',
title: 'CTO',
totalReports: 0
},
hasChild: false,
hasParent: true,
isHighlight: false,
children: []
},
...
]
}
`
$3
You have a complete working example in the examples/ folder
`jsx
import React from 'react'
import OrgChart from '@unicef/react-org-chart'
handleLoadConfig = () => {
const { config } = this.state
return config
}
render(){
return (
tree={tree}
downloadImageId="download-image"
downloadPdfId="download-pdf"
onConfigChange={config => {
// Setting latest config to state
this.setState({ config: config })
}}
loadConfig={d => {
// Called from d3 to get latest version of the config.
const config = this.handleLoadConfig(d)
return config
}}
loadParent={personData => {
// getParentData(): To get the parent data from API
const loadedParent = this.getParentData(personData)
return Promise.resolve(loadedParent)
}}
loadChildren={personData => {
// getChildrenData(): To get the children data from API
const loadedChildren = this.getChildrenData(personData)
return Promise.resolve(loadedChildren)
}}
loadImage={personData => {
// getImage(): To get the image from API
const image = getImage(personData.email)
return Promise.resolve(image)
}}
// getTitle / getSubTitle / getCount work the same way & with the same args
getName={(data, truncate, truncateLength) => The great ${data.person.name}${truncate}}
// onTitleClick / onSubTitleClick / onCountClick work the same way & with the same arg
onNameClick={data => console.log(data.person.name)}
/>
)
}
`
Development
`bash
git clone https://github.com/unicef/react-org-chart.git
cd react-org-chart
npm install
`
To build in watch mode:
`bash
npm start
`
To build for production
`bash
npm run build
`
Running the example:
`bash
cd example/
npm install # Only first time
npm start
`
To deploy the example to gh-pages site
`bash
npm run deploy
``