You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
import React, { useLayoutEffect, useRef, useEffect } from 'react';
|
|
import { OrgChart } from 'd3-org-chart';
|
|
import * as d3 from 'd3';
|
|
|
|
export const OrgChartComponent = (props, ref) => {
|
|
const d3Container = useRef(null);
|
|
let chart = null;
|
|
|
|
function addNode(node) {
|
|
chart.addNode(node);
|
|
}
|
|
|
|
props.setClick(addNode);
|
|
|
|
|
|
// We need to manipulate DOM
|
|
useLayoutEffect(() => {
|
|
if (props.data && d3Container.current) {
|
|
if (!chart) {
|
|
chart = new OrgChart();
|
|
}
|
|
props.setChart(chart)
|
|
try {
|
|
chart
|
|
.container(d3Container.current)
|
|
.data(props.data)
|
|
.nodeWidth(props.nodeWidth)
|
|
.nodeHeight(props.nodeHeight)
|
|
.layout("left")
|
|
|
|
.linkUpdate(function(d, i, arr) {
|
|
d3.select(this)
|
|
.attr("stroke", "#66BAF5")
|
|
.attr("stroke-width", 1)
|
|
.style("stroke-dasharray", ("3, 3"))
|
|
})
|
|
.onNodeClick((d, i, arr) => {
|
|
console.log(d, 'Id of clicked node ');
|
|
props.onNodeClick(d);
|
|
})
|
|
.buttonContent(props.buttonContent)
|
|
.nodeContent(props.nodeContent)
|
|
.render();
|
|
|
|
chart.expandAll()
|
|
} catch(err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
}, [props.data, d3Container.current]);
|
|
|
|
|
|
return (
|
|
<div>
|
|
<div ref={d3Container} />
|
|
</div>
|
|
);
|
|
};
|