react-tree-graph/dist/index.min.js

A react library for generating a graphical tree from data using d3

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@babel/runtime/helpers/extends"),require("d3-ease"),require("prop-types"),require("react"),require("d3-hierarchy")):"function"==typeof define&&define.amd?define(["exports","@babel/runtime/helpers/extends","d3-ease","prop-types","react","d3-hierarchy"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactTreeGraph={},e._extends,e.d3,e.PropTypes,e.React,e.d3)}(this,(function(e,t,r,i,a,d){"use strict";function s(e){return e&&e.__esModule?e:{default:e}}var n=s(t),o=s(i),u=s(a);function l(e){const t=e.margins||{bottom:10,left:"rtl"!==e.direction?20:150,right:"rtl"!==e.direction?150:20,top:10},r=e.width-t.left-t.right,i=e.height-t.top-t.bottom,a=d.hierarchy(e.data,e.getChildren),s=d.tree().size([i,r])(a);return{links:s.links().map((t=>({...t,source:{...t.source,x:"rtl"!==e.direction?t.source.y:r-t.source.y,y:t.source.x},target:{...t.target,x:"rtl"!==e.direction?t.target.y:r-t.target.y,y:t.target.x}}))),margins:t,nodes:s.descendants().map((t=>({...t,x:"rtl"!==e.direction?t.y:r-t.y,y:t.x})))}}const p=/on[A-Z]/;function f(e,t){return r=>e(r,...t)}function c(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),i=1;i<t;i++)r[i-1]=arguments[i];const a=Object.keys(e).filter((t=>p.test(t)&&"function"==typeof e[t])),d=a.reduce(((t,i)=>(t[i]=f(e[i],r),t)),{});return{...e,...d}}function g(e){const t=c(e.pathProps,e.source.data[e.keyProp],e.target.data[e.keyProp]),r=e.pathFunc(e.x1,e.y1,e.x2,e.y2);return u.default.createElement("path",n.default({},t,{d:r}))}function h(e){let t=.5,r=e.nodeProps;switch(e.shape){case"circle":r={r:5,...r},t+=r.r;break;case"image":case"rect":r={height:10,width:10,...r},r={x:-r.width/2,y:-r.height/2,...r},t+=r.width/2}"rtl"===e.direction&&(t=-t);const i=c(r,e[e.keyProp]),a=c(e.gProps,e[e.keyProp]),d=c(e.textProps,e[e.keyProp]),s="string"==typeof e[e.labelProp]?u.default.createElement("text",n.default({dx:t,dy:5},d),e[e.labelProp]):u.default.createElement("g",n.default({transform:`translate(${t}, 5)`},d),e[e.labelProp]);return u.default.createElement("g",n.default({},a,{transform:`translate(${e.x}, ${e.y})`,direction:"rtl"===e.direction?"rtl":null}),u.default.createElement(e.shape,i),s)}function P(e){return u.default.createElement("svg",n.default({},e.svgProps,{height:e.height,width:e.width}),e.children,u.default.createElement("g",{transform:`translate(${e.margins.left}, ${e.margins.top})`},e.links.map((t=>u.default.createElement(g,{key:t.target.data[e.keyProp],keyProp:e.keyProp,pathFunc:e.pathFunc,source:t.source,target:t.target,x1:t.source.x,x2:t.target.x,y1:t.source.y,y2:t.target.y,pathProps:{...e.pathProps,...t.target.data.pathProps}}))),e.nodes.map((t=>u.default.createElement(h,n.default({key:t.data[e.keyProp],keyProp:e.keyProp,labelProp:e.labelProp,direction:e.direction,shape:e.nodeShape,x:t.x,y:t.y},t.data,{nodeProps:{...e.nodeProps,...t.data.nodeProps},gProps:{...e.gProps,...t.data.gProps},textProps:{...e.textProps,...t.data.textProps}}))))))}function y(e){const t=e.nodes[0].x,r=e.nodes[0].y,[i,d]=a.useState({nodes:e.nodes.map((e=>({...e,x:t,y:r}))),links:e.links.map((e=>({source:{...e.source,x:t,y:r},target:{...e.target,x:t,y:r}})))}),[s,o]=a.useState(null);function l(t,r,i){let a=t;for(;a;){let t=i.nodes.find((e=>p(a,e)));if(t)return t;a=r.nodes.find((t=>(e.getChildren(t)||[]).some((e=>p(a,e)))))}return i.nodes[0]}function p(t,r){return t.data[e.keyProp]===r.data[e.keyProp]}function f(t,r){return t.source.data[e.keyProp]===r.source.data[e.keyProp]&&t.target.data[e.keyProp]===r.target.data[e.keyProp]}function c(t,r,i){return t+(r-t)*e.easing(i)}return a.useEffect((function(){clearInterval(s);let t=0;const r=function(e,t){const r=t.nodes.filter((t=>e.nodes.every((e=>!p(t,e))))).map((r=>({base:r,old:l(r,t,e),new:r}))),i=t.nodes.filter((t=>e.nodes.some((e=>p(t,e))))).map((t=>({base:t,old:e.nodes.find((e=>p(t,e))),new:t}))),a=e.nodes.filter((e=>t.nodes.every((t=>!p(e,t))))).map((r=>({base:r,old:r,new:l(r,e,t)}))),d=t.links.filter((t=>e.links.every((e=>!f(t,e))))).map((r=>({base:r,old:l(r.target,t,e),new:r}))),s=t.links.filter((t=>e.links.some((e=>f(t,e))))).map((t=>({base:t,old:e.links.find((e=>f(t,e))),new:t}))),n=e.links.filter((e=>t.links.every((t=>!f(e,t))))).map((r=>({base:r,old:r,new:l(r.target,e,t)})));return{nodes:i.concat(r).concat(a),links:s.concat(d).concat(n)}}(i,e),a=setInterval((()=>{if(t++,t===e.steps)return clearInterval(a),void d({nodes:e.nodes,links:e.links});d(function(e,t){return{nodes:e.nodes.map((e=>function(e,t,r,i){return{...e,x:c(t.x,r.x,i),y:c(t.y,r.y,i)}}(e.base,e.old,e.new,t))),links:e.links.map((e=>function(e,t,r,i){return{source:{...e.source,x:c(t.source?t.source.x:t.x,r.source?r.source.x:r.x,i),y:c(t.source?t.source.y:t.y,r.source?r.source.y:r.y,i)},target:{...e.target,x:c(t.target?t.target.x:t.x,r.target?r.target.x:r.x,i),y:c(t.target?t.target.y:t.y,r.target?r.target.y:r.y,i)}}}(e.base,e.old,e.new,t)))}}(r,t/e.steps))}),e.duration/e.steps);return o(a),()=>clearInterval(s)}),[e.nodes,e.links]),u.default.createElement(P,n.default({},e,i))}function b(e){return u.default.createElement(y,n.default({duration:e.duration,easing:e.easing,getChildren:e.getChildren,direction:e.direction,height:e.height,keyProp:e.keyProp,labelProp:e.labelProp,nodeShape:e.nodeShape,nodeProps:e.nodeProps,pathFunc:e.pathFunc,steps:e.steps,width:e.width,gProps:{className:"node",...e.gProps},pathProps:{className:"link",...e.pathProps},svgProps:e.svgProps,textProps:e.textProps},l(e)),e.children)}function m(e){return u.default.createElement(P,n.default({getChildren:e.getChildren,direction:e.direction,height:e.height,keyProp:e.keyProp,labelProp:e.labelProp,nodeShape:e.nodeShape,nodeProps:e.nodeProps,pathFunc:e.pathFunc,width:e.width,gProps:{className:"node",...e.gProps},pathProps:{className:"link",...e.pathProps},svgProps:e.svgProps,textProps:e.textProps},l(e)),e.children)}g.propTypes={source:o.default.object.isRequired,target:o.default.object.isRequired,keyProp:o.default.string.isRequired,x1:o.default.number.isRequired,x2:o.default.number.isRequired,y1:o.default.number.isRequired,y2:o.default.number.isRequired,pathFunc:o.default.func.isRequired,pathProps:o.default.object.isRequired},g.defaultProps={pathFunc:function(e,t,r,i){return`M${e},${t}C${(e+r)/2},${t} ${(e+r)/2},${i} ${r},${i}`}},h.propTypes={x:o.default.number.isRequired,y:o.default.number.isRequired,keyProp:o.default.string.isRequired,labelProp:o.default.string.isRequired,direction:o.default.oneOf(["ltr","rtl"]).isRequired,shape:o.default.string.isRequired,nodeProps:o.default.object.isRequired,gProps:o.default.object.isRequired,textProps:o.default.object.isRequired},P.propTypes={children:o.default.node,direction:o.default.oneOf(["ltr","rtl"]).isRequired,height:o.default.number.isRequired,keyProp:o.default.string.isRequired,labelProp:o.default.string.isRequired,links:o.default.array.isRequired,margins:o.default.shape({left:o.default.number.isRequired,top:o.default.number.isRequired}).isRequired,nodes:o.default.array.isRequired,nodeClassName:o.default.string,nodeShape:o.default.string.isRequired,nodeProps:o.default.object.isRequired,pathFunc:o.default.func,width:o.default.number.isRequired,gProps:o.default.object.isRequired,pathProps:o.default.object.isRequired,svgProps:o.default.object.isRequired,textProps:o.default.object.isRequired},y.propTypes={getChildren:o.default.func.isRequired,keyProp:o.default.string.isRequired,links:o.default.array.isRequired,nodes:o.default.array.isRequired,duration:o.default.number.isRequired,easing:o.default.func.isRequired,steps:o.default.number.isRequired},b.propTypes={data:o.default.object.isRequired,children:o.default.node,direction:o.default.oneOf(["ltr","rtl"]).isRequired,duration:o.default.number.isRequired,easing:o.default.func.isRequired,steps:o.default.number.isRequired,height:o.default.number.isRequired,width:o.default.number.isRequired,keyProp:o.default.string.isRequired,labelProp:o.default.string.isRequired,getChildren:o.default.func.isRequired,margins:o.default.shape({bottom:o.default.number.isRequired,left:o.default.number.isRequired,right:o.default.number.isRequired,top:o.default.number.isRequired}),pathFunc:o.default.func,nodeShape:o.default.oneOf(["circle","image","polygon","rect"]).isRequired,nodeProps:o.default.object.isRequired,gProps:o.default.object.isRequired,pathProps:o.default.object.isRequired,svgProps:o.default.object.isRequired,textProps:o.default.object.isRequired},b.defaultProps={direction:"ltr",duration:500,easing:r.easeQuadOut,getChildren:e=>e.children,steps:20,keyProp:"name",labelProp:"name",nodeShape:"circle",nodeProps:{},gProps:{},pathProps:{},svgProps:{},textProps:{}},m.propTypes={data:o.default.object.isRequired,children:o.default.node,direction:o.default.oneOf(["ltr","rtl"]).isRequired,height:o.default.number.isRequired,width:o.default.number.isRequired,keyProp:o.default.string.isRequired,labelProp:o.default.string.isRequired,getChildren:o.default.func.isRequired,margins:o.default.shape({bottom:o.default.number.isRequired,left:o.default.number.isRequired,right:o.default.number.isRequired,top:o.default.number.isRequired}),pathFunc:o.default.func,nodeShape:o.default.oneOf(["circle","image","polygon","rect"]).isRequired,nodeProps:o.default.object.isRequired,gProps:o.default.object.isRequired,pathProps:o.default.object.isRequired,svgProps:o.default.object.isRequired,textProps:o.default.object.isRequired},m.defaultProps={direction:"ltr",getChildren:e=>e.children,keyProp:"name",labelProp:"name",nodeShape:"circle",nodeProps:{},gProps:{},pathProps:{},svgProps:{},textProps:{}},e.AnimatedTree=b,e.Tree=m,Object.defineProperty(e,"__esModule",{value:!0})}));