@fluentui/react-charting 5.16.24 → 5.16.25

package/lib-amd/components/TreeChart/TreeChart.base.js

@@ -0,0 +1,314 @@
+define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react/lib/Utilities", "d3-selection", "@fluentui/react-focus", "d3-array"], function (require, exports, tslib_1, React, d3_hierarchy_1, Utilities_1, d3_selection_1, react_focus_1, d3_array_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TreeChartBase = void 0;
+    var getClassNames = Utilities_1.classNamesFunction();
+    // Create a parent class for common tree components
+    var StandardTree = /** @class */ (function () {
+        function StandardTree(treeData, styleClassNames, _nodeElements, _linkElements) {
+            if (_nodeElements === void 0) { _nodeElements = []; }
+            if (_linkElements === void 0) { _linkElements = []; }
+            this._nodeElements = [];
+            this._linkElements = [];
+            this.treeData = treeData;
+            this.styleClassNames = styleClassNames;
+            this._nodeElements = _nodeElements;
+            this._linkElements = _linkElements;
+        }
+        StandardTree.prototype.truncateText = function (text, rectangleWidth, padding, styleClass) {
+            var truncatedText = '';
+            var words = text.split(/\s+/).reverse();
+            var word = '';
+            var tspan = d3_selection_1.select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);
+            if (styleClass) {
+                tspan.attr('class', styleClass);
+            }
+            var line = [];
+            while ((word = words.pop())) {
+                line.push(word);
+                tspan.text(line.join(' ') + ' ');
+                if (tspan.node() !== null) {
+                    var w = tspan.node().getComputedTextLength();
+                    if (w > rectangleWidth - padding) {
+                        line.pop();
+                        line.push('...');
+                        break;
+                    }
+                }
+            }
+            truncatedText = line.join(' ') + ' ';
+            tspan.text(null);
+            d3_selection_1.selectAll('.tempText').remove();
+            return truncatedText;
+        };
+        // Append node elements
+        // nodeId to create unique key
+        StandardTree.prototype.addNodeShapetoSVG = function (name, subname, bodytext, metricName, xCenterCoordinate, yCoordinate, fillColor, rectangleWidth, rectangleHeight, nodeId, parentInfo) {
+            var ariaLabel = "nodeId: " + nodeId + " \nnodeMainText: " + name + "\nsubText " + subname + " " + parentInfo;
+            var xCoordinate = xCenterCoordinate - rectangleWidth / 2;
+            if (metricName || nodeId !== 0 || !bodytext) {
+                this._nodeElements.push(React.createElement("rect", { width: rectangleWidth, height: rectangleHeight, x: xCoordinate, y: yCoordinate, tabIndex: 0, role: 'text', "data-is-focusable": true, "aria-label": ariaLabel, className: this.styleClassNames.rectNode, stroke: fillColor, key: "" + nodeId + this.styleClassNames.rectNode }));
+            }
+            if (subname) {
+                subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);
+            }
+            if (bodytext) {
+                bodytext = this.truncateText(bodytext, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectBodyText);
+            }
+            if (metricName) {
+                metricName = this.truncateText(metricName, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectMetricText);
+            }
+            name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);
+            // Text position y = y + rectHeight/2, 2 is ratio for depth
+            // Text position x = x + rectWidth/2, 2 is ratio for length
+            // Sub-text position x = x + rectWidth/2, 2 is ratio for length
+            var subValue = metricName ? (React.createElement("tspan", { className: this.styleClassNames.rectMetricText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, metricName)) : bodytext ? (React.createElement(React.Fragment, null,
+                React.createElement("tspan", { className: this.styleClassNames.rectSubText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, subname),
+                React.createElement("tspan", { className: this.styleClassNames.rectBodyText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, bodytext))) : (React.createElement("tspan", { className: this.styleClassNames.rectSubText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, subname));
+            if (!subname && !metricName && !bodytext) {
+                this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: this.styleClassNames.rectMetricText, dy: yCoordinate + rectangleHeight / 1.6, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText }, name));
+            }
+            else {
+                this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: metricName ? this.styleClassNames.rectSubText : this.styleClassNames.rectText, dy: metricName ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText },
+                    name,
+                    subValue));
+            }
+        };
+        // Create a rectangular path from parent to the child nodes
+        StandardTree.prototype.createPathLink = function (parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap, childXMax) {
+            // gap adds ratio for parent.y to child.y
+            /*Below code is used to draw lines(___|) to show the parent child relation i.e a vertical line
+              emerging from the parent and
+              then a horzontal line encompassing all the its children which are
+              shown below it .so it gives a visual representation of tree branches.
+        
+              So for making this path firstly we are moving to the childX which is the mid point of the node and then
+              we are subtracting the half of rectwidth to move the complete width of the rectangle and
+              we are subtracting gap from y cordinate as we are making this line at a little gap from node.
+              Then we are building that line horizonatlly till childXmax, again adding half rectwidth to complete
+              the line till end as childXmax will be midpoint.
+              Then last part is for making line vertical for that we move to the parentx position and
+              then draw the vertical till parenty + rectHeight + gap/2
+              We have seperate path for leaf node as we are using different composition like compact, long etc.*/
+            var path = "M" + (childX - rectWidth / 2) + "," + (childY - gap) + " H" + (childXMax + rectWidth / 2) + " M" + parentX + "," + (childY - gap) + "\n    V" + (parentY + rectHeight + gap / 2);
+            var leafpath = "M" + parentX + "," + (parentY + rectHeight + gap / 2) + " V" + (parentY + gap * 5) + "\n    H" + (parentX - rectWidth / 2) + " H" + (parentX + rectWidth / 2);
+            // based on the type of node return leafpath or path element
+            return leaf ? leafpath : path;
+        };
+        // Append path link element
+        StandardTree.prototype.addLinktoSVG = function (nodeId, parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap, childXMax) {
+            if (childXMax === void 0) { childXMax = 0; }
+            this._linkElements.push(React.createElement("path", { className: this.styleClassNames.link, d: this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap, childXMax), key: "" + nodeId + this.styleClassNames.link }));
+        };
+        return StandardTree;
+    }());
+    // Create child class to Add Tree component based on treeHeight
+    var LayeredTree = /** @class */ (function (_super) {
+        tslib_1.__extends(LayeredTree, _super);
+        function LayeredTree(treeData, composition, styleClassNames, _nodeElements, _linkElements, _treeTraversal) {
+            if (_nodeElements === void 0) { _nodeElements = []; }
+            if (_linkElements === void 0) { _linkElements = []; }
+            var _this = _super.call(this, treeData, styleClassNames, _nodeElements, _linkElements) || this;
+            _this.composition = composition;
+            _this._treeTraversal = _treeTraversal;
+            return _this;
+        }
+        LayeredTree.prototype.createTree = function (givenLayoutWidth, screenWidth) {
+            var _a, _b, _c, _d, _e, _f;
+            givenLayoutWidth = givenLayoutWidth < 65 ? 65 : givenLayoutWidth > 90 ? 90 : givenLayoutWidth;
+            var layoutWidth = givenLayoutWidth || 75;
+            var root = d3_hierarchy_1.hierarchy(this.treeData, function (d) {
+                return d.children;
+            });
+            // Find tree Height
+            var treeHeight = (root === null || root === void 0 ? void 0 : root.height) + 1;
+            // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation
+            var treeChart = d3_hierarchy_1.tree()
+                .nodeSize([layoutWidth, layoutWidth / 1.5])
+                .separation(function (a, b) {
+                return a.parent === root && b.parent === root ? 3.5 : 1;
+            });
+            // Assigns the x and y position for the nodes
+            var treeData = treeChart(root);
+            // Compute the new tree layout.
+            var nodes = treeData.descendants();
+            // Normalize for fixed-depth and width
+            // Normalise y coordinate by depth of each node by a factor of 130
+            // Normalise x coordinate by start coordinate 0 with screenSize/3
+            nodes.forEach(function (d) {
+                d.y = d.depth === 0 ? 10 : d.depth * 130;
+                d.x += screenWidth / 2;
+            });
+            // <------------------ Traversal section ------------------>
+            // Create tree data structure
+            var treeDataStructure = [];
+            var TreeID = 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var createTreeDataStructure = function (d) {
+                var _a, _b;
+                d.id = TreeID;
+                treeDataStructure.push({
+                    id: TreeID,
+                    children: d.children,
+                    dataName: d.data.name,
+                    subName: d.data.subname,
+                    bodyText: d.data.bodytext,
+                    metricName: (_a = d.data) === null || _a === void 0 ? void 0 : _a.metric,
+                    fill: d.data.fill,
+                    x: d.x,
+                    y: d.y,
+                    parentID: (_b = d.parent) === null || _b === void 0 ? void 0 : _b.id,
+                });
+                TreeID++;
+            };
+            this._treeTraversal === 0
+                ? root.each(function (d) {
+                    createTreeDataStructure(d);
+                })
+                : root.eachBefore(function (d) {
+                    createTreeDataStructure(d);
+                });
+            var rectWidth = layoutWidth * 3;
+            var rectHeight = rectWidth / 3.45;
+            var gap = 20;
+            var parentSet = new Set();
+            for (var _i = 0, treeDataStructure_1 = treeDataStructure; _i < treeDataStructure_1.length; _i++) {
+                var d = treeDataStructure_1[_i];
+                var parentInfo = d.id === 0
+                    ? 'Root Node'
+                    : "Parent info parentId: " + d.parentID + "\n      " + treeDataStructure[d.parentID].dataName + "\n      " + treeDataStructure[d.parentID].subName;
+                // check for leaf nodes
+                if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {
+                    var compactNodeWidth = (rectWidth - gap) / 2;
+                    var compactNodeHeight = rectHeight;
+                    parentSet.add(d.parentID);
+                    // <------------------ Links section ------------------>
+                    this.addLinktoSVG(d.id, treeDataStructure[d.parentID].x, treeDataStructure[d.parentID].y, treeDataStructure[d.id].x, treeDataStructure[d.id].y, true, rectWidth, rectHeight, gap);
+                    // <------------------ Nodes section ------------------>
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var children = (_a = treeDataStructure[d.parentID]) === null || _a === void 0 ? void 0 : _a.children;
+                    var compactNodeCenterX1 = ((_b = treeDataStructure[d.parentID]) === null || _b === void 0 ? void 0 : _b.x) - compactNodeWidth / 2 - gap / 2;
+                    var compactNodeCenterX2 = ((_c = treeDataStructure[d.parentID]) === null || _c === void 0 ? void 0 : _c.x) + compactNodeWidth / 2 + gap / 2;
+                    var longNodeCenterX = (_d = treeDataStructure[d.parentID]) === null || _d === void 0 ? void 0 : _d.x;
+                    var dy = (_e = children[0]) === null || _e === void 0 ? void 0 : _e.y;
+                    for (var itr = 0; itr < children.length; ++itr) {
+                        var child = children[itr];
+                        // Given Composition
+                        if (this.composition !== undefined) {
+                            // For compact compostion
+                            if (this.composition === 0) {
+                                this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.bodytext, child.data.metricName, 
+                                // If the leaf node count is 1 ,
+                                //irrespective of provided composition we should always use long composition
+                                itr % 2 === 0 ? (children.length === 1 ? longNodeCenterX : compactNodeCenterX1) : compactNodeCenterX2, dy, child.data.fill, children.length === 1 ? rectWidth : compactNodeWidth, rectHeight, child.id, parentInfo);
+                                if (itr % 2 === 1) {
+                                    dy += compactNodeHeight + gap;
+                                }
+                            }
+                            // For long compostion
+                            else {
+                                this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.bodytext, child.data.metricName, longNodeCenterX, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
+                                dy += compactNodeHeight + gap;
+                            }
+                        }
+                        // Automatic Node Composition
+                        else {
+                            if (children.length > 2) {
+                                this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.bodytext, child.data.metricName, itr % 2 === 0 ? compactNodeCenterX1 : compactNodeCenterX2, dy, child.data.fill, children.length === 1 ? rectWidth : compactNodeWidth, rectHeight, child.id, parentInfo);
+                                if (itr % 2 === 1) {
+                                    dy += compactNodeHeight + gap;
+                                }
+                            }
+                            else {
+                                this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.bodytext, child.data.metricName, longNodeCenterX, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
+                                dy += compactNodeHeight + gap;
+                            }
+                        }
+                    }
+                }
+                if (d.children || treeHeight <= 2) {
+                    // <------------------ Nodes section ------------------>
+                    // Since the height <=2 we will be using long compositon.
+                    this.addNodeShapetoSVG(d.dataName, d.subName, d.bodyText, d.metricName, d.x, d.y, d.fill, rectWidth, rectHeight, d.id, parentInfo);
+                    // <------------------ Links section ------------------>
+                    if (d.id === 0 && d.children) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        var children = (_f = treeDataStructure[d.id]) === null || _f === void 0 ? void 0 : _f.children;
+                        var childXMin = d3_array_1.min(children, function (child) { return child.x; });
+                        var childXMax = d3_array_1.max(children, function (child) { return child.x; });
+                        this.addLinktoSVG(d.id, d.x, d.y, childXMin, d.children[0].y, false, rectWidth, rectHeight, gap, childXMax);
+                    }
+                }
+            }
+        };
+        return LayeredTree;
+    }(StandardTree));
+    var TreeChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(TreeChartBase, _super);
+        function TreeChartBase(props) {
+            var _a;
+            var _this = _super.call(this, props) || this;
+            _this._nodeElements = [];
+            _this._linkElements = [];
+            _this._margin = { top: 30, right: 20, bottom: 30, left: 50 };
+            _this._width = _this.props.width || 1500;
+            _this._height = _this.props.height || 700;
+            _this._treeData = _this.props.treeData;
+            _this._composition = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.composition;
+            _this._treeTraversal = _this.props.treeTraversal;
+            _this.state = {
+                _width: _this._width,
+                _height: _this._height,
+            };
+            return _this;
+        }
+        TreeChartBase.prototype.componentDidMount = function () {
+            var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
+            // Get classNames to create component styling
+            this._classNames = getClassNames(styles, {
+                theme: theme,
+                className: className,
+            });
+            // Call createTreeChart function in componentDidMount
+            this.createTreeChart();
+            this.setState({
+                _width: this.props.width || 1500,
+                _height: this.props.height || 700,
+            });
+        };
+        TreeChartBase.prototype.componentDidUpdate = function (prevProps) {
+            if (prevProps.layoutWidth !== this.props.layoutWidth) {
+                var svgText = d3_selection_1.selectAll('text');
+                var svgRect = d3_selection_1.selectAll('rect');
+                var svgLink = d3_selection_1.selectAll('path');
+                if (this._nodeElements.length === 0 && this._linkElements.length === 0) {
+                    svgText.remove();
+                    svgRect.remove();
+                    svgLink.remove();
+                }
+                this.createTreeChart();
+            }
+        };
+        TreeChartBase.prototype.createTreeChart = function () {
+            var nodeElements = [];
+            var linkElements = [];
+            // Instantiate inherited class and call createTree function for the object
+            var treeObject = new LayeredTree(this._treeData, this._composition, this._classNames, nodeElements, linkElements, this._treeTraversal);
+            var width = this.state._width - this._margin.left - this._margin.right;
+            treeObject.createTree(this.props.layoutWidth, width);
+            this._nodeElements = nodeElements;
+            this._linkElements = linkElements;
+        };
+        TreeChartBase.prototype.render = function () {
+            var _a;
+            return (React.createElement(react_focus_1.FocusZone, null,
+                React.createElement("div", { className: (_a = this._classNames) === null || _a === void 0 ? void 0 : _a.root },
+                    React.createElement("svg", { className: "svgTree", width: this.state._width - this._margin.left - this._margin.right, height: this.state._height - this._margin.top - this._margin.bottom },
+                        React.createElement("g", { className: "svgNode" }, this._nodeElements.map(function (element) { return element; })),
+                        React.createElement("g", { className: "svgLink" }, this._linkElements.map(function (element) { return element; }))))));
+        };
+        return TreeChartBase;
+    }(React.Component));
+    exports.TreeChartBase = TreeChartBase;
+});
+//# sourceMappingURL=TreeChart.base.js.map

package/lib-amd/components/TreeChart/TreeChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChart.base.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { hierarchy, tree } from 'd3-hierarchy';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { select, selectAll } from 'd3-selection';\nimport { FocusZone } from '@fluentui/react-focus';\nimport { max as d3Max, min as d3Min } from 'd3-array';\n\nimport {\n  ITreeProps,\n  ITreeState,\n  ITreeDataStructure,\n  ITreeChartDataPoint,\n  ITreeStyleProps,\n  ITreeStyles,\n} from '../../index';\n\nconst getClassNames = classNamesFunction<ITreeStyleProps, ITreeStyles>();\n\n// Create a parent class for common tree components\nclass StandardTree {\n  public treeData: ITreeChartDataPoint;\n  public styleClassNames: IProcessedStyleSet<ITreeStyles>;\n\n  private _nodeElements: JSX.Element[] = [];\n  private _linkElements: JSX.Element[] = [];\n\n  constructor(\n    treeData: ITreeChartDataPoint,\n    styleClassNames: IProcessedStyleSet<ITreeStyles>,\n    _nodeElements: JSX.Element[] = [],\n    _linkElements: JSX.Element[] = [],\n  ) {\n    this.treeData = treeData;\n    this.styleClassNames = styleClassNames;\n    this._nodeElements = _nodeElements;\n    this._linkElements = _linkElements;\n  }\n\n  public truncateText(text: string, rectangleWidth: number, padding: number, styleClass: string | undefined) {\n    let truncatedText = '';\n    const words = text.split(/\\s+/).reverse();\n    let word: string = '';\n    const tspan = select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);\n\n    if (styleClass) {\n      tspan.attr('class', styleClass);\n    }\n\n    const line: string[] = [];\n    while ((word = words.pop()!)) {\n      line.push(word);\n      tspan.text(line.join(' ') + ' ');\n      if (tspan.node() !== null) {\n        const w = tspan.node()!.getComputedTextLength();\n        if (w > rectangleWidth - padding) {\n          line.pop();\n          line.push('...');\n          break;\n        }\n      }\n    }\n\n    truncatedText = line.join(' ') + ' ';\n    tspan.text(null);\n    selectAll('.tempText').remove();\n    return truncatedText;\n  }\n\n  // Append node elements\n  // nodeId to create unique key\n  public addNodeShapetoSVG(\n    name: string,\n    subname: string | undefined,\n    bodytext: string | undefined,\n    metricName: string | undefined,\n    xCenterCoordinate: number,\n    yCoordinate: number,\n    fillColor: string,\n    rectangleWidth: number,\n    rectangleHeight: number,\n    nodeId: number,\n    parentInfo: string,\n  ) {\n    const ariaLabel = `nodeId: ${nodeId} \\nnodeMainText: ${name}\\nsubText ${subname} ${parentInfo}`;\n    const xCoordinate = xCenterCoordinate - rectangleWidth / 2;\n    if (metricName || nodeId !== 0 || !bodytext) {\n      this._nodeElements.push(\n        <rect\n          width={rectangleWidth}\n          height={rectangleHeight}\n          x={xCoordinate}\n          y={yCoordinate}\n          tabIndex={0}\n          role={'text'}\n          data-is-focusable={true}\n          aria-label={ariaLabel}\n          className={this.styleClassNames.rectNode}\n          stroke={fillColor}\n          key={`${nodeId}${this.styleClassNames.rectNode}`}\n        />,\n      );\n    }\n\n    if (subname) {\n      subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);\n    }\n    if (bodytext) {\n      bodytext = this.truncateText(bodytext, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectBodyText);\n    }\n    if (metricName) {\n      metricName = this.truncateText(\n        metricName,\n        rectangleWidth,\n        rectangleWidth / 4,\n        this.styleClassNames.rectMetricText,\n      );\n    }\n    name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);\n\n    // Text position y = y + rectHeight/2, 2 is ratio for depth\n    // Text position x = x + rectWidth/2, 2 is ratio for length\n    // Sub-text position x = x + rectWidth/2, 2 is ratio for length\n\n    const subValue = metricName ? (\n      <tspan className={this.styleClassNames.rectMetricText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n        {metricName}\n      </tspan>\n    ) : bodytext ? (\n      <>\n        <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n          {subname}\n        </tspan>\n        <tspan className={this.styleClassNames.rectBodyText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n          {bodytext}\n        </tspan>\n      </>\n    ) : (\n      <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n        {subname}\n      </tspan>\n    );\n\n    if (!subname && !metricName && !bodytext) {\n      this._nodeElements.push(\n        <text\n          textAnchor=\"middle\"\n          className={this.styleClassNames.rectMetricText}\n          dy={yCoordinate + rectangleHeight / 1.6}\n          x={xCoordinate + rectangleWidth / 2}\n          key={`${nodeId}${this.styleClassNames.rectText}`}\n        >\n          {name}\n        </text>,\n      );\n    } else {\n      this._nodeElements.push(\n        <text\n          textAnchor=\"middle\"\n          className={metricName ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}\n          dy={metricName ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2}\n          x={xCoordinate + rectangleWidth / 2}\n          key={`${nodeId}${this.styleClassNames.rectText}`}\n        >\n          {name}\n          {subValue}\n        </text>,\n      );\n    }\n  }\n  // Create a rectangular path from parent to the child nodes\n  public createPathLink(\n    parentX: number,\n    parentY: number,\n    childX: number,\n    childY: number,\n    leaf: boolean,\n    rectWidth: number,\n    rectHeight: number,\n    gap: number,\n    childXMax: number,\n  ): string {\n    // gap adds ratio for parent.y to child.y\n\n    /*Below code is used to draw lines(___|) to show the parent child relation i.e a vertical line\n      emerging from the parent and\n      then a horzontal line encompassing all the its children which are\n      shown below it .so it gives a visual representation of tree branches.\n\n      So for making this path firstly we are moving to the childX which is the mid point of the node and then\n      we are subtracting the half of rectwidth to move the complete width of the rectangle and\n      we are subtracting gap from y cordinate as we are making this line at a little gap from node.\n      Then we are building that line horizonatlly till childXmax, again adding half rectwidth to complete\n      the line till end as childXmax will be midpoint.\n      Then last part is for making line vertical for that we move to the parentx position and\n      then draw the vertical till parenty + rectHeight + gap/2\n      We have seperate path for leaf node as we are using different composition like compact, long etc.*/\n\n    const path = `M${childX - rectWidth / 2},${childY - gap} H${childXMax + rectWidth / 2} M${parentX},${childY - gap}\n    V${parentY + rectHeight + gap / 2}`;\n\n    const leafpath = `M${parentX},${parentY + rectHeight + gap / 2} V${parentY + gap * 5}\n    H${parentX - rectWidth / 2} H${parentX + rectWidth / 2}`;\n\n    // based on the type of node return leafpath or path element\n    return leaf ? leafpath : path;\n  }\n\n  // Append path link element\n  public addLinktoSVG(\n    nodeId: number,\n    parentX: number,\n    parentY: number,\n    childX: number,\n    childY: number,\n    leaf: boolean,\n    rectWidth: number,\n    rectHeight: number,\n    gap: number,\n    childXMax: number = 0,\n  ) {\n    this._linkElements.push(\n      <path\n        className={this.styleClassNames.link}\n        d={this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap, childXMax)}\n        key={`${nodeId}${this.styleClassNames.link}`}\n      />,\n    );\n  }\n}\n\n// Create child class to Add Tree component based on treeHeight\nclass LayeredTree extends StandardTree {\n  public composition: number | undefined;\n  private _treeTraversal: number | undefined;\n  constructor(\n    treeData: ITreeChartDataPoint,\n    composition: number | undefined,\n    styleClassNames: IProcessedStyleSet<ITreeStyles>,\n    _nodeElements: JSX.Element[] = [],\n    _linkElements: JSX.Element[] = [],\n    _treeTraversal: number | undefined,\n  ) {\n    super(treeData, styleClassNames, _nodeElements, _linkElements);\n    this.composition = composition;\n    this._treeTraversal = _treeTraversal;\n  }\n  public createTree(givenLayoutWidth: number | undefined, screenWidth: number) {\n    givenLayoutWidth = givenLayoutWidth! < 65 ? 65 : givenLayoutWidth! > 90 ? 90 : givenLayoutWidth;\n    const layoutWidth = givenLayoutWidth || 75;\n    const root = hierarchy(this.treeData, d => {\n      return d.children;\n    });\n\n    // Find tree Height\n    const treeHeight = root?.height + 1;\n\n    // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation\n    const treeChart = tree()\n      .nodeSize([layoutWidth, layoutWidth / 1.5])\n      .separation((a, b) => {\n        return a.parent === root && b.parent === root ? 3.5 : 1;\n      });\n\n    // Assigns the x and y position for the nodes\n    const treeData = treeChart(root);\n\n    // Compute the new tree layout.\n    const nodes = treeData.descendants();\n\n    // Normalize for fixed-depth and width\n    // Normalise y coordinate by depth of each node by a factor of 130\n    // Normalise x coordinate by start coordinate 0 with screenSize/3\n    nodes.forEach(d => {\n      d.y = d.depth === 0 ? 10 : d.depth * 130;\n      d.x += screenWidth / 2;\n    });\n\n    // <------------------ Traversal section ------------------>\n\n    // Create tree data structure\n    const treeDataStructure: Array<ITreeDataStructure> = [];\n    let TreeID: number = 0;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const createTreeDataStructure = (d: any) => {\n      d.id = TreeID;\n      treeDataStructure.push({\n        id: TreeID,\n        children: d.children,\n        dataName: d.data.name,\n        subName: d.data.subname,\n        bodyText: d.data.bodytext,\n        metricName: d.data?.metric,\n        fill: d.data.fill,\n        x: d.x,\n        y: d.y,\n        parentID: d.parent?.id,\n      });\n      TreeID++;\n    };\n\n    this._treeTraversal === 0\n      ? root.each(d => {\n          createTreeDataStructure(d);\n        })\n      : root.eachBefore(d => {\n          createTreeDataStructure(d);\n        });\n\n    const rectWidth = layoutWidth * 3;\n    const rectHeight = rectWidth / 3.45;\n    const gap: number = 20;\n    const parentSet = new Set();\n\n    for (const d of treeDataStructure) {\n      const parentInfo =\n        d.id === 0\n          ? 'Root Node'\n          : `Parent info parentId: ${d.parentID}\n      ${treeDataStructure[d.parentID].dataName}\n      ${treeDataStructure[d.parentID].subName}`;\n\n      // check for leaf nodes\n      if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {\n        const compactNodeWidth = (rectWidth - gap) / 2;\n        const compactNodeHeight = rectHeight;\n        parentSet.add(d.parentID);\n\n        // <------------------ Links section ------------------>\n        this.addLinktoSVG(\n          d.id,\n          treeDataStructure[d.parentID].x,\n          treeDataStructure[d.parentID].y,\n          treeDataStructure[d.id].x,\n          treeDataStructure[d.id].y,\n          true,\n          rectWidth,\n          rectHeight,\n          gap,\n        );\n\n        // <------------------ Nodes section ------------------>\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const children: any = treeDataStructure[d.parentID]?.children;\n\n        const compactNodeCenterX1: number = treeDataStructure[d.parentID]?.x - compactNodeWidth / 2 - gap / 2;\n        const compactNodeCenterX2: number = treeDataStructure[d.parentID]?.x + compactNodeWidth / 2 + gap / 2;\n        const longNodeCenterX: number = treeDataStructure[d.parentID]?.x;\n        let dy: number = children[0]?.y;\n\n        for (let itr = 0; itr < children.length; ++itr) {\n          const child = children[itr];\n\n          // Given Composition\n          if (this.composition !== undefined) {\n            // For compact compostion\n            if (this.composition === 0) {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.bodytext,\n                child.data.metricName,\n                // If the leaf node count is 1 ,\n                //irrespective of provided composition we should always use long composition\n                itr % 2 === 0 ? (children.length === 1 ? longNodeCenterX : compactNodeCenterX1) : compactNodeCenterX2,\n                dy,\n                child.data.fill,\n                children.length === 1 ? rectWidth : compactNodeWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              if (itr % 2 === 1) {\n                dy += compactNodeHeight + gap;\n              }\n            }\n            // For long compostion\n            else {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.bodytext,\n                child.data.metricName,\n                longNodeCenterX,\n                dy,\n                child.data.fill,\n                rectWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              dy += compactNodeHeight + gap;\n            }\n          }\n\n          // Automatic Node Composition\n          else {\n            if (children.length > 2) {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.bodytext,\n                child.data.metricName,\n                itr % 2 === 0 ? compactNodeCenterX1 : compactNodeCenterX2,\n                dy,\n                child.data.fill,\n                children.length === 1 ? rectWidth : compactNodeWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              if (itr % 2 === 1) {\n                dy += compactNodeHeight + gap;\n              }\n            } else {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.bodytext,\n                child.data.metricName,\n                longNodeCenterX,\n                dy,\n                child.data.fill,\n                rectWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              dy += compactNodeHeight + gap;\n            }\n          }\n        }\n      }\n\n      if (d.children || treeHeight <= 2) {\n        // <------------------ Nodes section ------------------>\n        // Since the height <=2 we will be using long compositon.\n        this.addNodeShapetoSVG(\n          d.dataName,\n          d.subName,\n          d.bodyText,\n          d.metricName,\n          d.x,\n          d.y,\n          d.fill,\n          rectWidth,\n          rectHeight,\n          d.id,\n          parentInfo,\n        );\n\n        // <------------------ Links section ------------------>\n        if (d.id === 0 && d.children) {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          const children: any = treeDataStructure[d.id]?.children;\n          const childXMin = d3Min(children, (child: ITreeDataStructure) => child.x as number)!;\n          const childXMax = d3Max(children, (child: ITreeDataStructure) => child.x as number)!;\n          this.addLinktoSVG(d.id, d.x, d.y, childXMin, d.children[0].y, false, rectWidth, rectHeight, gap, childXMax);\n        }\n      }\n    }\n  }\n}\n\nexport class TreeChartBase extends React.Component<ITreeProps, ITreeState> {\n  private _treeData: ITreeChartDataPoint;\n  private _width: number;\n  private _height: number;\n  private _composition: number | undefined;\n  private _classNames: IProcessedStyleSet<ITreeStyles>;\n  private _margin: { left: number; right: number; top: number; bottom: number };\n  private _nodeElements: JSX.Element[] = [];\n  private _linkElements: JSX.Element[] = [];\n  private _treeTraversal: number | undefined;\n\n  constructor(props: ITreeProps) {\n    super(props);\n    this._margin = { top: 30, right: 20, bottom: 30, left: 50 };\n    this._width = this.props.width || 1500;\n    this._height = this.props.height || 700;\n    this._treeData = this.props.treeData;\n    this._composition = this.props?.composition;\n    this._treeTraversal = this.props.treeTraversal;\n\n    this.state = {\n      _width: this._width,\n      _height: this._height,\n    };\n  }\n\n  public componentDidMount() {\n    const { theme, className, styles } = this.props;\n\n    // Get classNames to create component styling\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n\n    // Call createTreeChart function in componentDidMount\n    this.createTreeChart();\n\n    this.setState({\n      _width: this.props.width || 1500,\n      _height: this.props.height || 700,\n    });\n  }\n\n  public componentDidUpdate(prevProps: ITreeProps): void {\n    if (prevProps.layoutWidth !== this.props.layoutWidth) {\n      const svgText = selectAll('text');\n      const svgRect = selectAll('rect');\n      const svgLink = selectAll('path');\n\n      if (this._nodeElements.length === 0 && this._linkElements.length === 0) {\n        svgText.remove();\n        svgRect.remove();\n        svgLink.remove();\n      }\n\n      this.createTreeChart();\n    }\n  }\n  public createTreeChart() {\n    const nodeElements: JSX.Element[] = [];\n    const linkElements: JSX.Element[] = [];\n\n    // Instantiate inherited class and call createTree function for the object\n    const treeObject = new LayeredTree(\n      this._treeData,\n      this._composition,\n      this._classNames,\n      nodeElements,\n      linkElements,\n      this._treeTraversal,\n    );\n    const width = this.state._width - this._margin.left - this._margin.right;\n    treeObject.createTree(this.props.layoutWidth, width);\n    this._nodeElements = nodeElements;\n    this._linkElements = linkElements;\n  }\n\n  public render(): JSX.Element {\n    return (\n      <FocusZone>\n        <div className={this._classNames?.root}>\n          <svg\n            className=\"svgTree\"\n            width={this.state._width - this._margin.left - this._margin.right}\n            height={this.state._height - this._margin.top - this._margin.bottom}\n          >\n            <g className=\"svgNode\">{this._nodeElements.map(element => element)}</g>\n            <g className=\"svgLink\">{this._linkElements.map(element => element)}</g>\n          </svg>\n        </div>\n      </FocusZone>\n    );\n  }\n}\n"]}

package/lib-amd/components/TreeChart/TreeChart.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITreeProps } from './TreeChart.types';
+export declare const TreeChart: React.FunctionComponent<ITreeProps>;

package/lib-amd/components/TreeChart/TreeChart.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "@fluentui/react/lib/Utilities", "./TreeChart.base", "./TreeChart.styles"], function (require, exports, Utilities_1, TreeChart_base_1, TreeChart_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TreeChart = void 0;
+    exports.TreeChart = Utilities_1.styled(TreeChart_base_1.TreeChartBase, TreeChart_styles_1.getStyles);
+});
+//# sourceMappingURL=TreeChart.js.map

package/lib-amd/components/TreeChart/TreeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChart.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.tsx"],"names":[],"mappings":";;;;IAMa,QAAA,SAAS,GAAwC,kBAAM,CAClE,8BAAa,EACb,4BAAS,CACV,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ITreeStyles, ITreeProps, ITreeStyleProps } from './TreeChart.types';\nimport { TreeChartBase } from './TreeChart.base';\nimport { getStyles } from './TreeChart.styles';\n\nexport const TreeChart: React.FunctionComponent<ITreeProps> = styled<ITreeProps, ITreeStyleProps, ITreeStyles>(\n  TreeChartBase,\n  getStyles,\n);\n"]}

package/lib-amd/components/TreeChart/TreeChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';
+export declare const getStyles: (props: ITreeStyleProps) => ITreeStyles;

package/lib-amd/components/TreeChart/TreeChart.styles.js

@@ -0,0 +1,34 @@
+define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        return {
+            root: [
+                props.theme.spacing,
+                'ms-TreeChart',
+                props.className,
+                {
+                    overflow: 'scroll',
+                },
+            ],
+            link: {
+                fill: 'none',
+                stroke: '#A1A1A1',
+                strokeWidth: '2px',
+            },
+            rectNode: {
+                strokeWidth: '2px',
+                fill: 'white',
+                padding: '10px',
+                rx: '2px',
+            },
+            rectText: tslib_1.__assign({ fill: 'black' }, props.theme.fonts.large),
+            rectSubText: tslib_1.__assign({ fill: '#484644' }, props.theme.fonts.medium),
+            rectBodyText: tslib_1.__assign({ fill: '#808080' }, props.theme.fonts.xSmall),
+            rectMetricText: tslib_1.__assign({ fill: '#000000' }, props.theme.fonts.xLarge),
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=TreeChart.styles.js.map

package/lib-amd/components/TreeChart/TreeChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeChart.styles.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAsB;QAC9C,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,OAAO;gBACnB,cAAc;gBACd,KAAK,CAAC,SAAS;gBACf;oBACE,QAAQ,EAAE,QAAQ;iBACnB;aACF;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,KAAK;aACnB;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,MAAM;gBACf,EAAE,EAAE,KAAK;aACV;YACD,QAAQ,qBACN,IAAI,EAAE,OAAO,IACV,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,KAAK,CAC5B;YACD,WAAW,qBACT,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;YACD,YAAY,qBACV,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;YACD,cAAc,qBACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;SACF,CAAC;IACJ,CAAC,CAAC;IAtCW,QAAA,SAAS,aAsCpB","sourcesContent":["import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';\n\nexport const getStyles = (props: ITreeStyleProps): ITreeStyles => {\n  return {\n    root: [\n      props.theme.spacing,\n      'ms-TreeChart',\n      props.className,\n      {\n        overflow: 'scroll',\n      },\n    ],\n    link: {\n      fill: 'none',\n      stroke: '#A1A1A1',\n      strokeWidth: '2px',\n    },\n    rectNode: {\n      strokeWidth: '2px',\n      fill: 'white',\n      padding: '10px',\n      rx: '2px',\n    },\n    rectText: {\n      fill: 'black',\n      ...props.theme!.fonts.large,\n    },\n    rectSubText: {\n      fill: '#484644',\n      ...props.theme!.fonts.medium,\n    },\n    rectBodyText: {\n      fill: '#808080',\n      ...props.theme!.fonts.xSmall,\n    },\n    rectMetricText: {\n      fill: '#000000',\n      ...props.theme!.fonts.xLarge,\n    },\n  };\n};\n"]}

package/lib-amd/components/TreeChart/TreeChart.types.d.ts

@@ -0,0 +1,197 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+export interface ITreeChartDataPoint {
+    /**
+     * Node main text
+     */
+    name: string;
+    /**
+     * Subtext value (optional)
+     */
+    subname?: string;
+    /**
+     * Bodytext value (optional)
+     */
+    bodytext?: string;
+    /**
+     * Metric text value (optional)
+     */
+    metric?: string;
+    /**
+     * Color of the rectangular box
+     */
+    fill: string;
+    /**
+     * Recursive datastructure for child node object
+     */
+    children?: Array<ITreeChartDataPoint>;
+}
+export declare enum NodesComposition {
+    /**
+     * NodeComposition enum val for long: number = 1
+     */
+    long = 1,
+    /**
+     * NodeComposition enum val for compact: number = 0
+     */
+    compact = 0
+}
+export declare enum TreeTraverse {
+    /**
+     * TreeTraverse enum val for preOrder: number = 1
+     */
+    preOrder = 1,
+    /**
+     * TreeTraverse enum val for levelOrder: number = 0
+     */
+    levelOrder = 0
+}
+export interface ITreeProps {
+    /**
+     * An object of chart data points for the Tree chart
+     */
+    treeData: ITreeChartDataPoint;
+    /**
+     * compostion for three layer chart, long: composition = 1; compact: composition = 0
+     */
+    composition?: NodesComposition.long | NodesComposition.compact;
+    /**
+     * Node Width Size for the Tree Layout
+     * * @default 75
+     */
+    layoutWidth?: number;
+    /**
+     * traversal order for tree chart, preOrder = 1, levelOrder = 0
+     */
+    treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;
+    /**
+     * Width of SVG tree chart
+     * * @default 1500
+     */
+    width?: number;
+    /**
+     * Height of SVG tree chart
+     * * @default 700
+     */
+    height?: number;
+    /**
+     * Margin for the SVG tree chart
+     */
+    marign?: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;
+    /**
+     * Additional CSS class(es) to apply to the TreeChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+}
+export interface ITreeState {
+    /**
+     * Width of SVG tree chart
+     * * @default 1500
+     */
+    _width: number;
+    /**
+     * Height of SVG tree chart
+     * * @default 700
+     */
+    _height: number;
+    /**
+     * Layout Width of SVG tree chart
+     * * @default 75
+     */
+    _layoutWidth?: number;
+}
+export interface ITreeDataStructure {
+    /**
+     * Node id of each node
+     */
+    id: number;
+    /**
+     * Children node object
+     */
+    children: Array<ITreeDataStructure>;
+    /**
+     * Node main text
+     */
+    dataName: string;
+    /**
+     * Subtext value (optional)
+     */
+    subName?: string;
+    /**
+     * Bodytext value (optional)
+     */
+    bodyText?: string;
+    /**
+     * Metric text value (optional)
+     */
+    metricName?: string;
+    /**
+     * Color of the rectangular box
+     */
+    fill: string;
+    /**
+     * X-coordindate of node
+     */
+    x: number;
+    /**
+     * Y-coordindate of node
+     */
+    y: number;
+    /**
+     * Node id of each node's parent
+     */
+    parentID: number;
+}
+export interface ITreeStyleProps {
+    /**
+     * Theme (provided through customization.)
+     */
+    theme: ITheme;
+    /**
+     * Additional CSS class(es) to apply to the TreeChart.
+     */
+    className?: string;
+}
+export interface ITreeStyles {
+    /**
+     *  Style for the root element.
+     */
+    root: IStyle;
+    /**
+     *  Style for the Link/Path element.
+     */
+    link: IStyle;
+    /**
+     *  Style for rectangular Node
+     */
+    rectNode: IStyle;
+    /**
+     *  Style for the node main Text
+     */
+    rectText: IStyle;
+    /**
+     *  Style for the node sub Text
+     */
+    rectSubText: IStyle;
+    /**
+     *  Style for the node body Text
+     */
+    rectBodyText: IStyle;
+    /**
+     *  Style for the node metric value Text
+     */
+    rectMetricText: IStyle;
+}