@performant-software/visualize 0.6.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Performant Software Solutions LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build/index.js

@@ -0,0 +1,2 @@
+!function(){"use strict";var e={n:function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,{a:n}),n},d:function(t,n){for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{TreeGraph:function(){return B},withZoom:function(){return k}});var n=require("@visx/group"),r=require("@visx/hierarchy"),o=require("@visx/responsive"),a=require("@visx/shape"),i=require("d3-shape"),l=require("react"),c=e.n(l),u=require("underscore"),s=e.n(u),d=require("@visx/event"),f=require("@visx/zoom"),p=require("i18next"),m=e.n(p),h={en:{translation:JSON.parse('{"Zoom":{"buttons":{"center":"Center","clear":"Clear","reset":"Reset","zoomIn":"+","zoomOut":"-"}}}')}},y=m().createInstance();y.init({debug:!0,fallbackLng:"en",lng:"en",interpolation:{escapeValue:!1},resources:h});var b=y;function g(){return g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},g.apply(this,arguments)}var v={scaleX:1,scaleY:1,translateX:0,translateY:0,skewX:0,skewY:0},k=function(e){return function(t){var n=t.parentWidth,r=t.parentHeight,o=t.scaleXMin,a=void 0===o?.5:o,i=t.scaleXMax,u=void 0===i?4:i,s=t.scaleYMin,p=void 0===s?.5:s,m=t.scaleYMax,h=void 0===m?4:m,y=t.initialTransform,k=void 0===y?v:y,x=(0,l.useCallback)((function(e){return c().createElement("rect",{width:n,height:r,rx:14,fill:"transparent",onTouchStart:e.dragStart,onTouchMove:e.dragMove,onTouchEnd:e.dragEnd,onMouseDown:e.dragStart,onMouseMove:e.dragMove,onMouseUp:e.dragEnd,onMouseLeave:function(){e.isDragging&&e.dragEnd()},onDoubleClick:function(t){var n=(0,d.localPoint)(t)||{x:0,y:0};e.scale({scaleX:1.1,scaleY:1.1,point:n})}})}),[n,r]);return c().createElement(f.Zoom,{width:n,height:r,scaleXMin:a,scaleXMax:u,scaleYMin:p,scaleYMax:h,initialTransformMatrix:k},(function(n){return c().createElement("div",{className:"zoom"},c().createElement(e,g({},t,{renderZoomContainer:x.bind(void 0,n),zoom:n})),c().createElement("div",{className:"controls"},c().createElement("button",{type:"button",className:"btn btn-zoom",onClick:function(){return n.scale({scaleX:1.2,scaleY:1.2})}},b.t("Zoom.buttons.zoomIn")),c().createElement("button",{type:"button",className:"btn btn-zoom btn-bottom",onClick:function(){return n.scale({scaleX:.8,scaleY:.8})}},b.t("Zoom.buttons.zoomOut")),c().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.center},b.t("Zoom.buttons.center")),c().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.reset},b.t("Zoom.buttons.reset")),c().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.clear},b.t("Zoom.buttons.clear"))))}))}},x=void 0;function E(e,t){if(e){if("string"==typeof e)return C(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?C(e,t):void 0}}function C(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function T(){return T=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},T.apply(this,arguments)}var M="polar",w="curve",S="line",z="step",A="vertical",N=function(e){return c().createElement("circle",T({r:e.radius},e))},L=function(e){return c().createElement("rect",e)},O=function(e){var t=(0,l.useRef)(),o=e.parentWidth-e.margin.left-e.margin.right,u=e.parentHeight-e.margin.top-e.margin.bottom,d=(0,l.useMemo)((function(){return e.layout===M?e.linkType===z?a.LinkRadialStep:e.linkType===w?a.LinkRadialCurve:e.linkType===S?a.LinkRadialLine:a.LinkRadial:e.orientation===A?e.linkType===z?a.LinkVerticalStep:e.linkType===w?a.LinkVerticalCurve:e.linkType===S?a.LinkVerticalLine:a.LinkVertical:e.linkType===z?a.LinkHorizontalStep:e.linkType===w?a.LinkHorizontalCurve:e.linkType===S?a.LinkHorizontalLine:a.LinkHorizontal}),[e.layout,e.linkType,e.orientation]),f=(0,l.useCallback)((function(e,t){var n=t;return e.isExpanded&&(n=s().max(s().map(e.children,(function(e){return f(e,t+1)})))),n}),[]),p=(0,l.useCallback)((function(t,n){var r,o,a,l;if(e.layout===M){var c=(a=(0,i.pointRadial)(t,n),l=2,function(e){if(Array.isArray(e))return e}(a)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw o}}return a}}(a,l)||E(a,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),u=c[0];r=c[1],o=u}else e.orientation===A?(r=n,o=t):(r=t,o=n);return{top:r,left:o}}),[e.layout,e.orientation]),m=(0,l.useMemo)((function(){var t,n,r,a=f(e.data,1);return e.layout===M?(r={x:o/2,y:u/2},t=2*Math.PI,n=Math.min(o,u)/2*(a/2)):(r={x:0,y:0},e.orientation===A?(t=o,n=u):(t=u,n=o)),{sizeWidth:t,sizeHeight:n,origin:r}}),[f,u,o,e.data,e.layout,e.orientation]),h=(0,l.useCallback)((function(t){return e.renderNode?e.renderNode(t.data):0===t.depth?c().createElement(N,{fill:"#FF4A4A",onClick:e.onClick&&e.onClick.bind(x,t.data)}):c().createElement(L,{fill:"#272b4d",stroke:t.data.children?"#03c0dc":"#26deb0",strokeWidth:1,strokeDasharray:t.data.children?"0":"2,2",strokeOpacity:t.data.children?1:.6,rx:t.data.children?0:10,onClick:e.onClick&&e.onClick.bind(x,t.data)})}),[e.onClick,e.renderNode]),y=(0,l.useCallback)((function(t){return e.renderText?e.renderText(t.data):c().createElement("text",{dy:"0.33em",fontSize:e.fontSize,textAnchor:"middle",fill:e.textColor},t.data.name)}),[e.renderText]),b=(0,l.useCallback)((function(e,t){var r=p(e.x,e.y),o=r.top,a=r.left;return c().createElement(n.Group,{top:o,left:a,key:t},h(e),y(e))}),[h,y,e.layout,e.orientation]);return(0,l.useEffect)((function(){var n=t.current;if(n){var r=n.getElementsByTagName("g");s().each(r,(function(t){var n,r=s().first(t.getElementsByTagName("circle")),o=s().first(t.getElementsByTagName("rect")),a=s().first(t.getElementsByTagName("text")),i=a.getBBox().height;if(!a.getElementsByTagName("tspan").length){for(var l=a.innerHTML.split(/\s+/),c=[],u=0,d=0;d<l.length;d+=1)if(c[u]||(c[u]=[]),c[u].push(l[d]),d<l.length-1){var f=a.cloneNode();f.innerHTML=[].concat((n=c[u],function(e){if(Array.isArray(e))return C(e)}(n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(n)||E(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),[l[d+1]]).join(" "),t.append(f),f.getBBox().width>e.nodeWidth&&(u+=1),f.remove()}s().each(c,(function(e,t){var n=document.createElementNS("http://www.w3.org/2000/svg","tspan");n.setAttribute("x","0"),t>0&&n.setAttribute("dy","".concat(i,"px")),n.appendChild(document.createTextNode(e.join(" "))),0===t?a.replaceChildren(n):a.appendChild(n)}));var p=a.getBBox();r&&a?(r.setAttribute("x",p.x-15),r.setAttribute("y",p.y-15),r.setAttribute("r",p.width/2+15)):o&&a&&(o.setAttribute("x",p.x-15),o.setAttribute("y",p.y-15),o.setAttribute("width",p.width+30),o.setAttribute("height",p.height+30))}}))}}),[e.data]),c().createElement("div",{className:"tree-graph",ref:t,style:{display:"flex",flexGrow:"1"}},c().createElement("svg",{width:e.parentWidth,height:e.parentHeight-e.offset,ref:e.zoom.containerRef},e.renderZoomContainer(),c().createElement(n.Group,{top:e.margin.top,left:e.margin.left,transform:e.zoom.toString()},c().createElement(r.Tree,{root:(0,r.hierarchy)(e.data,(function(e){return e.isExpanded?e.children:null})),size:[m.sizeWidth,m.sizeHeight],separation:function(e,t){return(e.parent===t.parent?1:2)/e.depth}},(function(t){return c().createElement(n.Group,{top:m.origin.y,left:m.origin.x},t.links().map((function(t,n){return c().createElement(d,{key:n,data:t,percent:e.stepPercent,stroke:e.linkColor,strokeWidth:e.linkWidth,fill:"none"})})),s().map(t.descendants(),b))})))))};O.defaultProps={fontSize:12,layout:"cartesian",linkColor:"#B2B09B",linkType:S,linkWidth:1,margin:{top:30,left:30,right:30,bottom:70},nodeWidth:75,offset:0,orientation:"horizontal",stepPercent:.5,textColor:"#FFFFFF"};var j=(0,o.withParentSize)(k(O));j.Circle=N,j.Rectangle=L;var B=j;module.exports=t}();
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@performant-software/visualize/webpack/bootstrap","webpack://@performant-software/visualize/webpack/runtime/compat get default export","webpack://@performant-software/visualize/webpack/runtime/define property getters","webpack://@performant-software/visualize/webpack/runtime/hasOwnProperty shorthand","webpack://@performant-software/visualize/webpack/runtime/make namespace object","webpack://@performant-software/visualize/external commonjs \"@visx/group\"","webpack://@performant-software/visualize/external commonjs \"@visx/hierarchy\"","webpack://@performant-software/visualize/external commonjs \"@visx/responsive\"","webpack://@performant-software/visualize/external commonjs \"@visx/shape\"","webpack://@performant-software/visualize/external commonjs \"d3-shape\"","webpack://@performant-software/visualize/external commonjs2 \"react\"","webpack://@performant-software/visualize/external commonjs \"underscore\"","webpack://@performant-software/visualize/external commonjs \"@visx/event\"","webpack://@performant-software/visualize/external commonjs \"@visx/zoom\"","webpack://@performant-software/visualize/external commonjs \"i18next\"","webpack://@performant-software/visualize/./src/i18n/i18n.js","webpack://@performant-software/visualize/./src/hooks/Zoom.js","webpack://@performant-software/visualize/./src/components/TreeGraph.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/group\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/hierarchy\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/responsive\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/shape\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"d3-shape\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"underscore\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/event\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/zoom\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"i18next\");","import i18next from 'i18next';\n\nimport en from './en.json';\n\nconst resources = {\n  en: {\n    translation: en\n  }\n};\n\nconst i18n = i18next.createInstance();\n\ni18n\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    lng: 'en',\n    interpolation: {\n      escapeValue: false,\n    },\n    resources\n  });\n\nexport default i18n;\n","// @flow\n\nimport React, { useCallback, type ComponentType, type Element } from 'react';\nimport { localPoint } from '@visx/event';\nimport { Zoom } from '@visx/zoom';\nimport i18n from '../i18n/i18n';\nimport './Zoom.css';\n\ntype Props = {\n  initialTransform?: {\n    skewX: number,\n    skewY: number,\n    scaleX: number,\n    scaleY: number,\n    translateX: number,\n    translateY: number\n  },\n  parentHeight: number,\n  parentWidth: number,\n  scaleXMax?: number,\n  scaleXMin?: number,\n  scaleYMax?: number,\n  scaleYMin?: number\n};\n\ntype WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => Element<any>;\n\nconst DEFAULT_INITIAL_TRANSFORM = {\n  scaleX: 1,\n  scaleY: 1,\n  translateX: 0,\n  translateY: 0,\n  skewX: 0,\n  skewY: 0,\n};\n\nconst withZoom: WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => {\n  const { parentWidth: width, parentHeight: height } = props;\n  const { scaleXMin = 1 / 2, scaleXMax = 4 } = props;\n  const { scaleYMin = 1 / 2, scaleYMax = 4 } = props;\n  const { initialTransform = DEFAULT_INITIAL_TRANSFORM } = props;\n\n  /**\n   * Renders the container with zoom controls.\n   *\n   * @type {unknown}\n   */\n  const renderZoomContainer = useCallback((zoom) => (\n    <rect\n      width={width}\n      height={height}\n      rx={14}\n      fill='transparent'\n      onTouchStart={zoom.dragStart}\n      onTouchMove={zoom.dragMove}\n      onTouchEnd={zoom.dragEnd}\n      onMouseDown={zoom.dragStart}\n      onMouseMove={zoom.dragMove}\n      onMouseUp={zoom.dragEnd}\n      onMouseLeave={() => {\n        if (zoom.isDragging) zoom.dragEnd();\n      }}\n      onDoubleClick={(event) => {\n        const point = localPoint(event) || { x: 0, y: 0 };\n        zoom.scale({ scaleX: 1.1, scaleY: 1.1, point });\n      }}\n    />\n  ), [width, height]);\n\n  return (\n    <Zoom\n      width={width}\n      height={height}\n      scaleXMin={scaleXMin}\n      scaleXMax={scaleXMax}\n      scaleYMin={scaleYMin}\n      scaleYMax={scaleYMax}\n      initialTransformMatrix={initialTransform}\n    >\n      { (zoom) => (\n        <div\n          className='zoom'\n        >\n          <WrappedComponent\n            {...props}\n            renderZoomContainer={renderZoomContainer.bind(this, zoom)}\n            zoom={zoom}\n          />\n          <div\n            className='controls'\n          >\n            <button\n              type='button'\n              className='btn btn-zoom'\n              onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}\n            >\n              { i18n.t('Zoom.buttons.zoomIn') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-zoom btn-bottom'\n              onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}\n            >\n              { i18n.t('Zoom.buttons.zoomOut') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.center}\n            >\n              { i18n.t('Zoom.buttons.center') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.reset}\n            >\n              { i18n.t('Zoom.buttons.reset') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.clear}\n            >\n              { i18n.t('Zoom.buttons.clear') }\n            </button>\n          </div>\n        </div>\n      )}\n    </Zoom>\n  );\n};\n\nexport default withZoom;\n\nexport type ZoomProps = {\n  renderZoomContainer: () => Element<any>,\n  zoom: typeof Zoom\n};\n","// @flow\n\nimport { Group } from '@visx/group';\nimport { hierarchy, Tree } from '@visx/hierarchy';\nimport { withParentSize } from '@visx/responsive';\nimport {\n  LinkHorizontal,\n  LinkHorizontalCurve,\n  LinkHorizontalLine,\n  LinkHorizontalStep,\n  LinkRadial,\n  LinkRadialCurve,\n  LinkRadialLine,\n  LinkRadialStep,\n  LinkVertical,\n  LinkVerticalCurve,\n  LinkVerticalLine,\n  LinkVerticalStep\n} from '@visx/shape';\nimport { pointRadial } from 'd3-shape';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentType,\n  type Element\n} from 'react';\nimport _ from 'underscore';\nimport withZoom, { type ZoomProps } from '../hooks/Zoom';\nimport './TreeGraph.css';\n\ntype Props = ZoomProps & {\n  data: any,\n  fontSize: number,\n  layout: string,\n  linkType: string,\n  offset: number,\n  orientation: string,\n  parentHeight: number,\n  parentWidth: number,\n  linkColor: string,\n  linkWidth: number,\n  margin: {\n    top: number,\n    right: number,\n    bottom: number,\n    left: number\n  },\n  nodeWidth: number,\n  onClick?: (data: any) => void,\n  renderNode?: (data: any) => Element<any>,\n  renderText?: (data: any) => Element<any>,\n  stepPercent: number,\n  textColor: string\n};\n\nconst Layout = {\n  cartesian: 'cartesian',\n  polar: 'polar'\n};\n\nconst LinkType = {\n  curve: 'curve',\n  line: 'line',\n  step: 'step'\n};\n\nconst Orientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical'\n};\n\nconst Circle: ComponentType<any> = (props: any) => (\n  <circle\n    r={props.radius}\n    {...props}\n  />\n);\n\nconst Rectangle: ComponentType<any> = (props: any) => (\n  <rect\n    {...props}\n  />\n);\n\nconst TreeGraph = (props: Props) => {\n  const ref = useRef();\n\n  const innerWidth = props.parentWidth - props.margin.left - props.margin.right;\n  const innerHeight = props.parentHeight - props.margin.top - props.margin.bottom;\n\n  /**\n   * Sets the link component based on the layout, linkType, and orientation props.\n   *\n   * @type {*}\n   */\n  const LinkComponent = useMemo(() => {\n    let value;\n\n    if (props.layout === Layout.polar) {\n      if (props.linkType === LinkType.step) {\n        value = LinkRadialStep;\n      } else if (props.linkType === LinkType.curve) {\n        value = LinkRadialCurve;\n      } else if (props.linkType === LinkType.line) {\n        value = LinkRadialLine;\n      } else {\n        value = LinkRadial;\n      }\n    } else if (props.orientation === Orientation.vertical) {\n      if (props.linkType === LinkType.step) {\n        value = LinkVerticalStep;\n      } else if (props.linkType === LinkType.curve) {\n        value = LinkVerticalCurve;\n      } else if (props.linkType === LinkType.line) {\n        value = LinkVerticalLine;\n      } else {\n        value = LinkVertical;\n      }\n    } else if (props.linkType === LinkType.step) {\n      value = LinkHorizontalStep;\n    } else if (props.linkType === LinkType.curve) {\n      value = LinkHorizontalCurve;\n    } else if (props.linkType === LinkType.line) {\n      value = LinkHorizontalLine;\n    } else {\n      value = LinkHorizontal;\n    }\n\n    return value;\n  }, [props.layout, props.linkType, props.orientation]);\n\n  /**\n   * Returns the depth of the last expanded node.\n   *\n   * @type {function(*, *): *}\n   */\n  const getMaxDepth = useCallback((node, depth) => {\n    let max = depth;\n\n    if (node.isExpanded) {\n      max = _.max(_.map(node.children, (child) => getMaxDepth(child, depth + 1)));\n    }\n\n    return max;\n  }, []);\n\n  /**\n   * Returns the node position for the passed coordinates.\n   *\n   * @type {function(*, *): {top: *, left: *}}\n   */\n  const getNodePosition = useCallback((x, y) => {\n    let top;\n    let left;\n\n    if (props.layout === Layout.polar) {\n      const [radialX, radialY] = pointRadial(x, y);\n      top = radialY;\n      left = radialX;\n    } else if (props.orientation === Orientation.vertical) {\n      top = y;\n      left = x;\n    } else {\n      top = x;\n      left = y;\n    }\n\n    return {\n      top,\n      left\n    };\n  }, [props.layout, props.orientation]);\n\n  /**\n   * Returns the position and size of the root node.\n   *\n   * @type {{sizeWidth: *, origin: *, sizeHeight: *}}\n   */\n  const root = useMemo(() => {\n    let sizeWidth;\n    let sizeHeight;\n    let origin;\n\n    const depth = getMaxDepth(props.data, 1);\n\n    if (props.layout === Layout.polar) {\n      origin = {\n        x: innerWidth / 2,\n        y: innerHeight / 2,\n      };\n      sizeWidth = 2 * Math.PI;\n      sizeHeight = (Math.min(innerWidth, innerHeight) / 2) * (depth / 2);\n    } else {\n      origin = { x: 0, y: 0 };\n      if (props.orientation === Orientation.vertical) {\n        sizeWidth = innerWidth;\n        sizeHeight = innerHeight;\n      } else {\n        sizeWidth = innerHeight;\n        sizeHeight = innerWidth;\n      }\n    }\n\n    return {\n      sizeWidth,\n      sizeHeight,\n      origin\n    };\n  }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);\n\n  /**\n   * Renders the passed node. If provided, only the \"renderNode\" prop is called.\n   *\n   * @type {(function(*): (*))|*}\n   */\n  const renderNode = useCallback((node) => {\n    if (props.renderNode) {\n      return props.renderNode(node.data);\n    }\n\n    if (node.depth === 0) {\n      return (\n        <Circle\n          fill='#FF4A4A'\n          onClick={props.onClick && props.onClick.bind(this, node.data)}\n        />\n      );\n    }\n\n    return (\n      <Rectangle\n        fill='#272b4d'\n        stroke={node.data.children ? '#03c0dc' : '#26deb0'}\n        strokeWidth={1}\n        strokeDasharray={node.data.children ? '0' : '2,2'}\n        strokeOpacity={node.data.children ? 1 : 0.6}\n        rx={node.data.children ? 0 : 10}\n        onClick={props.onClick && props.onClick.bind(this, node.data)}\n      />\n    );\n  }, [props.onClick, props.renderNode]);\n\n  /**\n   * Renders the text for the passed node.\n   *\n   * @type {(function(*): (*))|*}\n   */\n  const renderText = useCallback((node) => {\n    if (props.renderText) {\n      return props.renderText(node.data);\n    }\n\n    return (\n      <text\n        dy='0.33em'\n        fontSize={props.fontSize}\n        textAnchor='middle'\n        fill={props.textColor}\n      >\n        { node.data.name }\n      </text>\n    );\n  }, [props.renderText]);\n\n  /**\n   * Renders the group element for the passed node.\n   *\n   * @type {unknown}\n   */\n  const renderGroup = useCallback((node, key) => {\n    const { top, left } = getNodePosition(node.x, node.y);\n\n    return (\n      <Group\n        top={top}\n        left={left}\n        key={key}\n      >\n        { renderNode(node) }\n        { renderText(node) }\n      </Group>\n    );\n  }, [renderNode, renderText, props.layout, props.orientation]);\n\n  /**\n   * Resizes the \"circle\" and \"rect\" elements based on the text contained in the group. This effect will also\n   * convert text into multiple lines.\n   */\n  useEffect(() => {\n    const { current } = ref;\n    if (current) {\n      const padding = 15;\n      const groups = current.getElementsByTagName('g');\n      _.each(groups, (group) => {\n        const circle = _.first(group.getElementsByTagName('circle'));\n        const rect = _.first(group.getElementsByTagName('rect'));\n\n        const text = _.first(group.getElementsByTagName('text'));\n        const { height } = text.getBBox();\n\n        if (!text.getElementsByTagName('tspan').length) {\n          const words = text.innerHTML.split(/\\s+/);\n\n          const lines = [];\n          let lineIndex = 0;\n\n          for (let i = 0; i < words.length; i += 1) {\n            // Initialize the line array for the current line\n            if (!lines[lineIndex]) {\n              lines[lineIndex] = [];\n            }\n\n            // Add the current word to the current line\n            lines[lineIndex].push(words[i]);\n\n            // Look ahead to the next word and increment the line index if necessary\n            if (i < words.length - 1) {\n              const testElement = text.cloneNode();\n              testElement.innerHTML = [...lines[lineIndex], words[i + 1]].join(' ');\n              group.append(testElement);\n\n              if (testElement.getBBox().width > props.nodeWidth) {\n                lineIndex += 1;\n              }\n\n              testElement.remove();\n            }\n          }\n\n          // Append the lines to the text element\n          _.each(lines, (line, index) => {\n            const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n            tspan.setAttribute('x', '0');\n            if (index > 0) {\n              tspan.setAttribute('dy', `${height}px`);\n            }\n            tspan.appendChild(document.createTextNode(line.join(' ')));\n\n            if (index === 0) {\n              text.replaceChildren(tspan);\n            } else {\n              text.appendChild(tspan);\n            }\n          });\n\n          // Set the shape attributes based on the text size\n          const bbox = text.getBBox();\n          if (circle && text) {\n            circle.setAttribute('x', bbox.x - padding);\n            circle.setAttribute('y', bbox.y - padding);\n            circle.setAttribute('r', (bbox.width / 2) + padding);\n          } else if (rect && text) {\n            rect.setAttribute('x', bbox.x - padding);\n            rect.setAttribute('y', bbox.y - padding);\n            rect.setAttribute('width', bbox.width + 2 * padding);\n            rect.setAttribute('height', bbox.height + 2 * padding);\n          }\n        }\n      });\n    }\n  }, [props.data]);\n\n  return (\n    <div\n      className='tree-graph'\n      ref={ref}\n      style={{\n        display: 'flex',\n        flexGrow: '1'\n      }}\n    >\n      <svg\n        width={props.parentWidth}\n        height={props.parentHeight - props.offset}\n        ref={props.zoom.containerRef}\n      >\n        { props.renderZoomContainer() }\n        <Group\n          top={props.margin.top}\n          left={props.margin.left}\n          transform={props.zoom.toString()}\n        >\n          <Tree\n            root={hierarchy(props.data, (d) => (d.isExpanded ? d.children : null))}\n            size={[root.sizeWidth, root.sizeHeight]}\n            separation={(a, b) => (a.parent === b.parent ? 1 : 2) / a.depth}\n          >\n            { (tree) => (\n              <Group\n                top={root.origin.y}\n                left={root.origin.x}\n              >\n                { tree.links().map((link, i) => (\n                  <LinkComponent\n                    key={i}\n                    data={link}\n                    percent={props.stepPercent}\n                    stroke={props.linkColor}\n                    strokeWidth={props.linkWidth}\n                    fill='none'\n                  />\n                ))}\n                { _.map(tree.descendants(), renderGroup) }\n              </Group>\n            )}\n          </Tree>\n        </Group>\n      </svg>\n    </div>\n  );\n};\n\nTreeGraph.defaultProps = {\n  fontSize: 12,\n  layout: Layout.cartesian,\n  linkColor: '#B2B09B',\n  linkType: LinkType.line,\n  linkWidth: 1,\n  margin: {\n    top: 30,\n    left: 30,\n    right: 30,\n    bottom: 70\n  },\n  nodeWidth: 75,\n  offset: 0,\n  orientation: Orientation.horizontal,\n  stepPercent: 0.5,\n  textColor: '#FFFFFF'\n};\n\ntype TreeGraphType = ComponentType<any> & {\n  Circle: typeof Circle,\n  Rectangle: typeof Rectangle\n};\n\nconst TreeGraphComponent: TreeGraphType = withParentSize(withZoom(TreeGraph));\nTreeGraphComponent.Circle = Circle;\nTreeGraphComponent.Rectangle = Rectangle;\n\nexport default TreeGraphComponent;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","resources","en","translation","i18n","i18next","init","debug","fallbackLng","lng","interpolation","escapeValue","DEFAULT_INITIAL_TRANSFORM","scaleX","scaleY","translateX","translateY","skewX","skewY","WrappedComponent","props","width","parentWidth","height","parentHeight","scaleXMin","scaleXMax","scaleYMin","scaleYMax","initialTransform","renderZoomContainer","useCallback","zoom","rx","fill","onTouchStart","dragStart","onTouchMove","dragMove","onTouchEnd","dragEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","isDragging","onDoubleClick","event","point","localPoint","x","y","scale","Zoom","initialTransformMatrix","className","bind","type","onClick","center","reset","clear","Layout","LinkType","Orientation","Circle","r","radius","Rectangle","TreeGraph","ref","useRef","innerWidth","margin","left","right","innerHeight","top","bottom","LinkComponent","useMemo","layout","linkType","LinkRadialStep","LinkRadialCurve","LinkRadialLine","LinkRadial","orientation","LinkVerticalStep","LinkVerticalCurve","LinkVerticalLine","LinkVertical","LinkHorizontalStep","LinkHorizontalCurve","LinkHorizontalLine","LinkHorizontal","getMaxDepth","node","depth","max","isExpanded","_","children","child","getNodePosition","pointRadial","radialX","root","sizeWidth","sizeHeight","origin","data","Math","PI","min","renderNode","stroke","strokeWidth","strokeDasharray","strokeOpacity","renderText","dy","fontSize","textAnchor","textColor","name","renderGroup","Group","useEffect","current","groups","getElementsByTagName","group","circle","rect","text","getBBox","length","words","innerHTML","split","lines","lineIndex","i","push","testElement","cloneNode","join","append","nodeWidth","remove","line","index","tspan","document","createElementNS","setAttribute","appendChild","createTextNode","replaceChildren","bbox","style","display","flexGrow","offset","containerRef","transform","toString","Tree","hierarchy","size","separation","b","parent","tree","links","map","link","percent","stepPercent","linkColor","linkWidth","descendants","defaultProps","TreeGraphComponent","withParentSize","withZoom"],"sourceRoot":""}

package/build/main.css

@@ -0,0 +1,43 @@
+.zoom .btn {
+  margin: 0;
+  text-align: center;
+  border: none;
+  background: #2f2f2f;
+  color: #d3d3d3;
+  padding: 0 4px;
+  border-top: 1px solid #0a0a0a;
+}
+.zoom .btn-lg {
+  font-size: 1em;
+  line-height: 1;
+  padding: 7px;
+}
+.zoom .btn-zoom {
+  width: 30px;
+  font-size: 2em;
+}
+.zoom .btn-bottom {
+  font-size: 2em;
+  margin-bottom: 1rem;
+}
+.zoom .controls {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.tree-graph {
+  position: relative;
+  height: 100%;
+}
+.tree-graph circle,
+.tree-graph rectangle {
+  cursor: pointer;
+}
+.tree-graph text {
+  pointer-events: none;
+}
+

package/index.js

@@ -0,0 +1 @@
+module.exports = require('./build/index');

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@performant-software/visualize",
+  "version": "0.6.0-beta.1",
+  "description": "A package of components used for data visualization",
+  "license": "MIT",
+  "private": false,
+  "main": "./build/index.js",
+  "style": "./build/main.css",
+  "scripts": {
+    "build": "webpack --mode production && flow-copy-source -v src types"
+  },
+  "dependencies": {
+    "@visx/event": "^2.6.0",
+    "@visx/group": "^2.10.0",
+    "@visx/hierarchy": "^2.10.0",
+    "@visx/responsive": "^2.10.0",
+    "@visx/shape": "^2.12.2",
+    "@visx/zoom": "^2.10.0",
+    "d3-shape": "^3.1.0",
+    "i18next": "^21.9.1",
+    "underscore": "^1.13.2"
+  },
+  "peerDependencies": {
+    "react": ">= 16.13.1 < 18.0.0",
+    "react-dom": ">= 16.13.1 < 18.0.0"
+  },
+  "devDependencies": {
+    "@performant-software/webpack-config": "^1.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/src/components/TreeGraph.css

@@ -0,0 +1,13 @@
+.tree-graph {
+  position: relative;
+  height: 100%;
+}
+
+.tree-graph circle,
+.tree-graph rectangle {
+  cursor: pointer;
+}
+
+.tree-graph text {
+  pointer-events: none;
+}

package/src/components/TreeGraph.js

@@ -0,0 +1,443 @@
+// @flow
+
+import { Group } from '@visx/group';
+import { hierarchy, Tree } from '@visx/hierarchy';
+import { withParentSize } from '@visx/responsive';
+import {
+  LinkHorizontal,
+  LinkHorizontalCurve,
+  LinkHorizontalLine,
+  LinkHorizontalStep,
+  LinkRadial,
+  LinkRadialCurve,
+  LinkRadialLine,
+  LinkRadialStep,
+  LinkVertical,
+  LinkVerticalCurve,
+  LinkVerticalLine,
+  LinkVerticalStep
+} from '@visx/shape';
+import { pointRadial } from 'd3-shape';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ComponentType,
+  type Element
+} from 'react';
+import _ from 'underscore';
+import withZoom, { type ZoomProps } from '../hooks/Zoom';
+import './TreeGraph.css';
+
+type Props = ZoomProps & {
+  data: any,
+  fontSize: number,
+  layout: string,
+  linkType: string,
+  offset: number,
+  orientation: string,
+  parentHeight: number,
+  parentWidth: number,
+  linkColor: string,
+  linkWidth: number,
+  margin: {
+    top: number,
+    right: number,
+    bottom: number,
+    left: number
+  },
+  nodeWidth: number,
+  onClick?: (data: any) => void,
+  renderNode?: (data: any) => Element<any>,
+  renderText?: (data: any) => Element<any>,
+  stepPercent: number,
+  textColor: string
+};
+
+const Layout = {
+  cartesian: 'cartesian',
+  polar: 'polar'
+};
+
+const LinkType = {
+  curve: 'curve',
+  line: 'line',
+  step: 'step'
+};
+
+const Orientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+
+const Circle: ComponentType<any> = (props: any) => (
+  <circle
+    r={props.radius}
+    {...props}
+  />
+);
+
+const Rectangle: ComponentType<any> = (props: any) => (
+  <rect
+    {...props}
+  />
+);
+
+const TreeGraph = (props: Props) => {
+  const ref = useRef();
+
+  const innerWidth = props.parentWidth - props.margin.left - props.margin.right;
+  const innerHeight = props.parentHeight - props.margin.top - props.margin.bottom;
+
+  /**
+   * Sets the link component based on the layout, linkType, and orientation props.
+   *
+   * @type {*}
+   */
+  const LinkComponent = useMemo(() => {
+    let value;
+
+    if (props.layout === Layout.polar) {
+      if (props.linkType === LinkType.step) {
+        value = LinkRadialStep;
+      } else if (props.linkType === LinkType.curve) {
+        value = LinkRadialCurve;
+      } else if (props.linkType === LinkType.line) {
+        value = LinkRadialLine;
+      } else {
+        value = LinkRadial;
+      }
+    } else if (props.orientation === Orientation.vertical) {
+      if (props.linkType === LinkType.step) {
+        value = LinkVerticalStep;
+      } else if (props.linkType === LinkType.curve) {
+        value = LinkVerticalCurve;
+      } else if (props.linkType === LinkType.line) {
+        value = LinkVerticalLine;
+      } else {
+        value = LinkVertical;
+      }
+    } else if (props.linkType === LinkType.step) {
+      value = LinkHorizontalStep;
+    } else if (props.linkType === LinkType.curve) {
+      value = LinkHorizontalCurve;
+    } else if (props.linkType === LinkType.line) {
+      value = LinkHorizontalLine;
+    } else {
+      value = LinkHorizontal;
+    }
+
+    return value;
+  }, [props.layout, props.linkType, props.orientation]);
+
+  /**
+   * Returns the depth of the last expanded node.
+   *
+   * @type {function(*, *): *}
+   */
+  const getMaxDepth = useCallback((node, depth) => {
+    let max = depth;
+
+    if (node.isExpanded) {
+      max = _.max(_.map(node.children, (child) => getMaxDepth(child, depth + 1)));
+    }
+
+    return max;
+  }, []);
+
+  /**
+   * Returns the node position for the passed coordinates.
+   *
+   * @type {function(*, *): {top: *, left: *}}
+   */
+  const getNodePosition = useCallback((x, y) => {
+    let top;
+    let left;
+
+    if (props.layout === Layout.polar) {
+      const [radialX, radialY] = pointRadial(x, y);
+      top = radialY;
+      left = radialX;
+    } else if (props.orientation === Orientation.vertical) {
+      top = y;
+      left = x;
+    } else {
+      top = x;
+      left = y;
+    }
+
+    return {
+      top,
+      left
+    };
+  }, [props.layout, props.orientation]);
+
+  /**
+   * Returns the position and size of the root node.
+   *
+   * @type {{sizeWidth: *, origin: *, sizeHeight: *}}
+   */
+  const root = useMemo(() => {
+    let sizeWidth;
+    let sizeHeight;
+    let origin;
+
+    const depth = getMaxDepth(props.data, 1);
+
+    if (props.layout === Layout.polar) {
+      origin = {
+        x: innerWidth / 2,
+        y: innerHeight / 2,
+      };
+      sizeWidth = 2 * Math.PI;
+      sizeHeight = (Math.min(innerWidth, innerHeight) / 2) * (depth / 2);
+    } else {
+      origin = { x: 0, y: 0 };
+      if (props.orientation === Orientation.vertical) {
+        sizeWidth = innerWidth;
+        sizeHeight = innerHeight;
+      } else {
+        sizeWidth = innerHeight;
+        sizeHeight = innerWidth;
+      }
+    }
+
+    return {
+      sizeWidth,
+      sizeHeight,
+      origin
+    };
+  }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);
+
+  /**
+   * Renders the passed node. If provided, only the "renderNode" prop is called.
+   *
+   * @type {(function(*): (*))|*}
+   */
+  const renderNode = useCallback((node) => {
+    if (props.renderNode) {
+      return props.renderNode(node.data);
+    }
+
+    if (node.depth === 0) {
+      return (
+        <Circle
+          fill='#FF4A4A'
+          onClick={props.onClick && props.onClick.bind(this, node.data)}
+        />
+      );
+    }
+
+    return (
+      <Rectangle
+        fill='#272b4d'
+        stroke={node.data.children ? '#03c0dc' : '#26deb0'}
+        strokeWidth={1}
+        strokeDasharray={node.data.children ? '0' : '2,2'}
+        strokeOpacity={node.data.children ? 1 : 0.6}
+        rx={node.data.children ? 0 : 10}
+        onClick={props.onClick && props.onClick.bind(this, node.data)}
+      />
+    );
+  }, [props.onClick, props.renderNode]);
+
+  /**
+   * Renders the text for the passed node.
+   *
+   * @type {(function(*): (*))|*}
+   */
+  const renderText = useCallback((node) => {
+    if (props.renderText) {
+      return props.renderText(node.data);
+    }
+
+    return (
+      <text
+        dy='0.33em'
+        fontSize={props.fontSize}
+        textAnchor='middle'
+        fill={props.textColor}
+      >
+        { node.data.name }
+      </text>
+    );
+  }, [props.renderText]);
+
+  /**
+   * Renders the group element for the passed node.
+   *
+   * @type {unknown}
+   */
+  const renderGroup = useCallback((node, key) => {
+    const { top, left } = getNodePosition(node.x, node.y);
+
+    return (
+      <Group
+        top={top}
+        left={left}
+        key={key}
+      >
+        { renderNode(node) }
+        { renderText(node) }
+      </Group>
+    );
+  }, [renderNode, renderText, props.layout, props.orientation]);
+
+  /**
+   * Resizes the "circle" and "rect" elements based on the text contained in the group. This effect will also
+   * convert text into multiple lines.
+   */
+  useEffect(() => {
+    const { current } = ref;
+    if (current) {
+      const padding = 15;
+      const groups = current.getElementsByTagName('g');
+      _.each(groups, (group) => {
+        const circle = _.first(group.getElementsByTagName('circle'));
+        const rect = _.first(group.getElementsByTagName('rect'));
+
+        const text = _.first(group.getElementsByTagName('text'));
+        const { height } = text.getBBox();
+
+        if (!text.getElementsByTagName('tspan').length) {
+          const words = text.innerHTML.split(/\s+/);
+
+          const lines = [];
+          let lineIndex = 0;
+
+          for (let i = 0; i < words.length; i += 1) {
+            // Initialize the line array for the current line
+            if (!lines[lineIndex]) {
+              lines[lineIndex] = [];
+            }
+
+            // Add the current word to the current line
+            lines[lineIndex].push(words[i]);
+
+            // Look ahead to the next word and increment the line index if necessary
+            if (i < words.length - 1) {
+              const testElement = text.cloneNode();
+              testElement.innerHTML = [...lines[lineIndex], words[i + 1]].join(' ');
+              group.append(testElement);
+
+              if (testElement.getBBox().width > props.nodeWidth) {
+                lineIndex += 1;
+              }
+
+              testElement.remove();
+            }
+          }
+
+          // Append the lines to the text element
+          _.each(lines, (line, index) => {
+            const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+            tspan.setAttribute('x', '0');
+            if (index > 0) {
+              tspan.setAttribute('dy', `${height}px`);
+            }
+            tspan.appendChild(document.createTextNode(line.join(' ')));
+
+            if (index === 0) {
+              text.replaceChildren(tspan);
+            } else {
+              text.appendChild(tspan);
+            }
+          });
+
+          // Set the shape attributes based on the text size
+          const bbox = text.getBBox();
+          if (circle && text) {
+            circle.setAttribute('x', bbox.x - padding);
+            circle.setAttribute('y', bbox.y - padding);
+            circle.setAttribute('r', (bbox.width / 2) + padding);
+          } else if (rect && text) {
+            rect.setAttribute('x', bbox.x - padding);
+            rect.setAttribute('y', bbox.y - padding);
+            rect.setAttribute('width', bbox.width + 2 * padding);
+            rect.setAttribute('height', bbox.height + 2 * padding);
+          }
+        }
+      });
+    }
+  }, [props.data]);
+
+  return (
+    <div
+      className='tree-graph'
+      ref={ref}
+      style={{
+        display: 'flex',
+        flexGrow: '1'
+      }}
+    >
+      <svg
+        width={props.parentWidth}
+        height={props.parentHeight - props.offset}
+        ref={props.zoom.containerRef}
+      >
+        { props.renderZoomContainer() }
+        <Group
+          top={props.margin.top}
+          left={props.margin.left}
+          transform={props.zoom.toString()}
+        >
+          <Tree
+            root={hierarchy(props.data, (d) => (d.isExpanded ? d.children : null))}
+            size={[root.sizeWidth, root.sizeHeight]}
+            separation={(a, b) => (a.parent === b.parent ? 1 : 2) / a.depth}
+          >
+            { (tree) => (
+              <Group
+                top={root.origin.y}
+                left={root.origin.x}
+              >
+                { tree.links().map((link, i) => (
+                  <LinkComponent
+                    key={i}
+                    data={link}
+                    percent={props.stepPercent}
+                    stroke={props.linkColor}
+                    strokeWidth={props.linkWidth}
+                    fill='none'
+                  />
+                ))}
+                { _.map(tree.descendants(), renderGroup) }
+              </Group>
+            )}
+          </Tree>
+        </Group>
+      </svg>
+    </div>
+  );
+};
+
+TreeGraph.defaultProps = {
+  fontSize: 12,
+  layout: Layout.cartesian,
+  linkColor: '#B2B09B',
+  linkType: LinkType.line,
+  linkWidth: 1,
+  margin: {
+    top: 30,
+    left: 30,
+    right: 30,
+    bottom: 70
+  },
+  nodeWidth: 75,
+  offset: 0,
+  orientation: Orientation.horizontal,
+  stepPercent: 0.5,
+  textColor: '#FFFFFF'
+};
+
+type TreeGraphType = ComponentType<any> & {
+  Circle: typeof Circle,
+  Rectangle: typeof Rectangle
+};
+
+const TreeGraphComponent: TreeGraphType = withParentSize(withZoom(TreeGraph));
+TreeGraphComponent.Circle = Circle;
+TreeGraphComponent.Rectangle = Rectangle;
+
+export default TreeGraphComponent;