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