@performant-software/visualize 1.0.2 → 1.0.3-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.js +1 -1
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!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
|
|
1
|
+
!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 O},withZoom:function(){return x}});var n=require("@visx/group"),r=require("@visx/hierarchy"),a=require("@visx/responsive"),o=require("@visx/shape"),i=require("d3-shape"),l=require("react"),s=e.n(l),c=require("underscore"),d=e.n(c),u=require("@visx/event"),p=require("@visx/zoom"),m=require("i18next"),h=e.n(m);const g={en:{translation:JSON.parse('{"Zoom":{"buttons":{"center":"Center","clear":"Clear","reset":"Reset","zoomIn":"+","zoomOut":"-"}}}')}},b=h().createInstance();b.init({debug:!0,fallbackLng:"en",lng:"en",interpolation:{escapeValue:!1},resources:g});var f=b;function y(){return y=Object.assign?Object.assign.bind():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},y.apply(this,arguments)}const k={scaleX:1,scaleY:1,translateX:0,translateY:0,skewX:0,skewY:0};var x=e=>t=>{const{parentWidth:n,parentHeight:r}=t,{scaleXMin:a=.5,scaleXMax:o=4}=t,{scaleYMin:i=.5,scaleYMax:c=4}=t,{initialTransform:d=k}=t,m=(0,l.useCallback)((e=>s().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:()=>{e.isDragging&&e.dragEnd()},onDoubleClick:t=>{const n=(0,u.localPoint)(t)||{x:0,y:0};e.scale({scaleX:1.1,scaleY:1.1,point:n})}})),[n,r]);return s().createElement(p.Zoom,{width:n,height:r,scaleXMin:a,scaleXMax:o,scaleYMin:i,scaleYMax:c,initialTransformMatrix:d},(n=>s().createElement("div",{className:"zoom"},s().createElement(e,y({},t,{renderZoomContainer:m.bind(void 0,n),zoom:n})),s().createElement("div",{className:"controls"},s().createElement("button",{type:"button",className:"btn btn-zoom",onClick:()=>n.scale({scaleX:1.2,scaleY:1.2})},f.t("Zoom.buttons.zoomIn")),s().createElement("button",{type:"button",className:"btn btn-zoom btn-bottom",onClick:()=>n.scale({scaleX:.8,scaleY:.8})},f.t("Zoom.buttons.zoomOut")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.center},f.t("Zoom.buttons.center")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.reset},f.t("Zoom.buttons.reset")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.clear},f.t("Zoom.buttons.clear"))))))};function v(){return v=Object.assign?Object.assign.bind():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},v.apply(this,arguments)}const E="polar",C="curve",T="line",M="step",z="vertical",w=e=>s().createElement("circle",v({r:e.radius},e)),N=e=>s().createElement("rect",e),L=e=>{const t=(0,l.useRef)(),a=e.parentWidth-e.margin.left-e.margin.right,c=e.parentHeight-e.margin.top-e.margin.bottom,u=(0,l.useMemo)((()=>{let t;return t=e.layout===E?e.linkType===M?o.LinkRadialStep:e.linkType===C?o.LinkRadialCurve:e.linkType===T?o.LinkRadialLine:o.LinkRadial:e.orientation===z?e.linkType===M?o.LinkVerticalStep:e.linkType===C?o.LinkVerticalCurve:e.linkType===T?o.LinkVerticalLine:o.LinkVertical:e.linkType===M?o.LinkHorizontalStep:e.linkType===C?o.LinkHorizontalCurve:e.linkType===T?o.LinkHorizontalLine:o.LinkHorizontal,t}),[e.layout,e.linkType,e.orientation]),p=(0,l.useCallback)(((e,t)=>{let n=t;return e.isExpanded&&(n=d().max(d().map(e.children,(e=>p(e,t+1))))),n}),[]),m=(0,l.useCallback)(((t,n)=>{let r,a;if(e.layout===E){const[e,o]=(0,i.pointRadial)(t,n);r=o,a=e}else e.orientation===z?(r=n,a=t):(r=t,a=n);return{top:r,left:a}}),[e.layout,e.orientation]),h=(0,l.useMemo)((()=>{let t,n,r;const o=p(e.data,1);return e.layout===E?(r={x:a/2,y:c/2},t=2*Math.PI,n=Math.min(a,c)/2*(o/2)):(r={x:0,y:0},e.orientation===z?(t=a,n=c):(t=c,n=a)),{sizeWidth:t,sizeHeight:n,origin:r}}),[p,c,a,e.data,e.layout,e.orientation]),g=(0,l.useCallback)((t=>e.renderNode?e.renderNode(t.data):0===t.depth?s().createElement(w,{fill:"#FF4A4A",onClick:e.onClick&&e.onClick.bind(void 0,t.data)}):s().createElement(N,{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(void 0,t.data)})),[e.onClick,e.renderNode]),b=(0,l.useCallback)((t=>e.renderText?e.renderText(t.data):s().createElement("text",{dy:"0.33em",fontSize:e.fontSize,textAnchor:"middle",fill:e.textColor},t.data.name)),[e.renderText]),f=(0,l.useCallback)(((e,t)=>{const{top:r,left:a}=m(e.x,e.y);return s().createElement(n.Group,{top:r,left:a,key:t},g(e),b(e))}),[g,b,e.layout,e.orientation]);return(0,l.useEffect)((()=>{const{current:n}=t;if(n){const t=15,r=n.getElementsByTagName("g");d().each(r,(n=>{const r=d().first(n.getElementsByTagName("circle")),a=d().first(n.getElementsByTagName("rect")),o=d().first(n.getElementsByTagName("text")),{height:i}=o.getBBox();if(!o.getElementsByTagName("tspan").length){const l=o.innerHTML.split(/\s+/),s=[];let c=0;for(let t=0;t<l.length;t+=1)if(s[c]||(s[c]=[]),s[c].push(l[t]),t<l.length-1){const r=o.cloneNode();r.innerHTML=[...s[c],l[t+1]].join(" "),n.append(r),r.getBBox().width>e.nodeWidth&&(c+=1),r.remove()}d().each(s,((e,t)=>{const n=document.createElementNS("http://www.w3.org/2000/svg","tspan");n.setAttribute("x","0"),t>0&&n.setAttribute("dy",`${i}px`),n.appendChild(document.createTextNode(e.join(" "))),0===t?o.replaceChildren(n):o.appendChild(n)}));const u=o.getBBox();r&&o?(r.setAttribute("x",u.x-t),r.setAttribute("y",u.y-t),r.setAttribute("r",u.width/2+t)):a&&o&&(a.setAttribute("x",u.x-t),a.setAttribute("y",u.y-t),a.setAttribute("width",u.width+2*t),a.setAttribute("height",u.height+2*t))}}))}}),[e.data]),s().createElement("div",{className:"tree-graph",ref:t,style:{display:"flex",flexGrow:"1"}},s().createElement("svg",{width:e.parentWidth,height:e.parentHeight-e.offset,ref:e.zoom.containerRef},e.renderZoomContainer(),s().createElement(n.Group,{top:e.margin.top,left:e.margin.left,transform:e.zoom.toString()},s().createElement(r.Tree,{root:(0,r.hierarchy)(e.data,(e=>e.isExpanded?e.children:null)),size:[h.sizeWidth,h.sizeHeight],separation:(e,t)=>(e.parent===t.parent?1:2)/e.depth},(t=>s().createElement(n.Group,{top:h.origin.y,left:h.origin.x},t.links().map(((t,n)=>s().createElement(u,{key:n,data:t,percent:e.stepPercent,stroke:e.linkColor,strokeWidth:e.linkWidth,fill:"none"}))),d().map(t.descendants(),f)))))))};L.defaultProps={fontSize:12,layout:"cartesian",linkColor:"#B2B09B",linkType:T,linkWidth:1,margin:{top:30,left:30,right:30,bottom:70},nodeWidth:75,offset:0,orientation:"horizontal",stepPercent:.5,textColor:"#FFFFFF"};const S=(0,a.withParentSize)(x(L));S.Circle=w,S.Rectangle=N;var O=S;module.exports=t}();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":""}
|
|
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","parentWidth","width","parentHeight","height","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","radialX","radialY","pointRadial","root","sizeWidth","sizeHeight","origin","data","Math","PI","min","renderNode","stroke","strokeWidth","strokeDasharray","strokeOpacity","renderText","dy","fontSize","textAnchor","textColor","name","renderGroup","Group","useEffect","current","padding","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":""}
|