@fluentui/react-charting 5.12.1 → 5.12.2

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

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy", "@fluentui/react/lib/Utilities", "@fluentui/react-focus"], function (require, exports, tslib_1, React, d3_selection_1, d3_hierarchy_1, Utilities_1, react_focus_1) {
+define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react/lib/Utilities", "d3-selection", "@fluentui/react-focus"], function (require, exports, tslib_1, React, d3_hierarchy_1, Utilities_1, d3_selection_1, react_focus_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.TreeChartBase = void 0;
@@ -15,18 +15,56 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             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 !== undefined) {
+                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, metricName, xCoordinate, yCoordinate, fillColor, rectangleWidth, rectangleHeight, nodeId, parentInfo) {
             var ariaLabel = "nodeId: " + nodeId + " \nnodeMainText: " + name + "\nsubText " + subname + " " + parentInfo;
             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 !== undefined) {
+                subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);
+            }
+            if (metricName !== undefined) {
+                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 !== undefined ? (React.createElement("tspan", { className: this.styleClassNames.rectmetricText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, metricName)) : (React.createElement("tspan", { className: this.styleClassNames.rectSubText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, subname));
-            this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText, dy: metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText },
-                name,
-                subValue));
+            if (subname === undefined && metricName === undefined) {
+                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 !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText, dy: metricName !== undefined ? 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) {
@@ -53,16 +91,25 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             _this._treeTraversal = _treeTraversal;
             return _this;
         }
-        LayeredTree.prototype.createTree = function () {
+        LayeredTree.prototype.createTree = function (givenLayoutWidth, screenWidth) {
             var _a, _b, _c, _d;
+            if (givenLayoutWidth !== undefined) {
+                if (givenLayoutWidth < 65) {
+                    givenLayoutWidth = 65;
+                }
+                if (givenLayoutWidth > 90) {
+                    givenLayoutWidth = 90;
+                }
+            }
+            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: 70, height: 90 and add node separation
+            // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation
             var treemap = d3_hierarchy_1.tree()
-                .nodeSize([75, 50])
+                .nodeSize([layoutWidth, layoutWidth / 1.5])
                 .separation(function (a, b) {
                 return a.parent === root && b.parent === root ? 3.5 : 1;
             });
@@ -72,10 +119,10 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             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 450
+            // 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 += 400;
+                d.x += screenWidth / 3;
             });
             // <------------------ Traversal section ------------------>
             // Create tree data structure
@@ -105,8 +152,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
                 : root.eachBefore(function (d) {
                     createTreeDataStructure(d);
                 });
-            var rectHeight = 70;
-            var rectWidth = 220;
+            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++) {
@@ -117,7 +164,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
                 // check for leaf nodes
                 if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {
                     var newWidth = (rectWidth - gap) / 2;
-                    var newHeight = 70;
+                    var newHeight = 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);
@@ -179,14 +226,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             _this._nodeElements = [];
             _this._linkElements = [];
             _this._margin = { top: 30, right: 20, bottom: 30, left: 50 };
-            _this._width = _this.props.width || 1200;
+            _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 || 1000,
-                _height: _this._height || 700,
+                _width: _this._width,
+                _height: _this._height,
             };
             return _this;
         }
@@ -199,18 +246,27 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
             });
             // Call createTreeChart function in componentDidMount
             this.createTreeChart();
-            var reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;
             this.setState({
-                _width: (this._rootElem && this._rootElem.offsetWidth),
-                _height: (this._rootElem && this._rootElem.offsetHeight - reducedHeight),
+                _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 svg = d3_selection_1.select('.svgTree');
-            // Set SVG width and height
-            svg
-                .attr('width', this.state._width - this._margin.left - this._margin.right)
-                .attr('height', this.state._height - this._margin.top - this._margin.bottom);
+            var nodeElements = [];
+            var linkElements = [];
             // Create styleClass object to access it in parent class
             var styleClassNames = {
                 link: this._classNames.link,
@@ -220,14 +276,16 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-hierarchy",
                 rectmetricText: this._classNames.rectMetricText,
             };
             // Instantiate inherited class and call createTree function for the object
-            var treeObject = new LayeredTree(this._treeData, this._composition, styleClassNames, this._nodeElements, this._linkElements, this._treeTraversal);
-            treeObject.createTree();
+            var treeObject = new LayeredTree(this._treeData, this._composition, styleClassNames, nodeElements, linkElements, this._treeTraversal);
+            treeObject.createTree(this.props.layoutWidth, this._width);
+            this._nodeElements = nodeElements;
+            this._linkElements = linkElements;
         };
         TreeChartBase.prototype.render = function () {
-            var _this = this;
+            var _a;
             return (React.createElement(react_focus_1.FocusZone, null,
-                React.createElement("div", { className: "svgTreeDiv", ref: function (rootElem) { return (_this._rootElem = rootElem); } },
-                    React.createElement("svg", { className: "svgTree" },
+                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; }))))));
         };

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

@@ -1 +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 { select } from 'd3-selection';\nimport { hierarchy, tree } from 'd3-hierarchy';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { FocusZone } from '@fluentui/react-focus';\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: {\n    rectmetricText: string | undefined;\n    rectSubText: string | undefined;\n    link: string;\n    rectNode: string;\n    rectText: string;\n  };\n\n  private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n  private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n\n  constructor(\n    treeData: ITreeChartDataPoint,\n    styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n    _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n    _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n  ) {\n    this.treeData = treeData;\n    this.styleClassNames = styleClassNames;\n    this._nodeElements = _nodeElements;\n    this._linkElements = _linkElements;\n  }\n\n  // Append node elements\n  // nodeId to create unique key\n  public addNodeShapetoSVG(\n    name: string,\n    subname: string,\n    metricName: string | undefined,\n    xCoordinate: 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    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    // 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 =\n      metricName !== undefined ? (\n        <tspan className={this.styleClassNames.rectmetricText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n          {metricName}\n        </tspan>\n      ) : (\n        <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n          {subname}\n        </tspan>\n      );\n\n    this._nodeElements.push(\n      <text\n        textAnchor=\"middle\"\n        className={metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}\n        dy={metricName !== undefined ? 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  ): string {\n    // gap adds ratio for parent.y to child.y\n    const path = `M${childX + rectWidth / 2},${childY - gap} H${parentX + rectWidth / 2} V${\n      parentY + rectHeight + gap / 2\n    }`;\n    const leafpath = `M${parentX + rectWidth / 2},${parentY + rectHeight + gap / 2} V${\n      parentY + gap * 5\n    } H${parentX} H${parentX + rectWidth}`;\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  ) {\n    this._linkElements.push(\n      <path\n        className={this.styleClassNames.link}\n        d={this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap)}\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: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n    _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n    _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n    _treeTraversal: number | undefined,\n  ) {\n    super(treeData, styleClassNames, _nodeElements, _linkElements);\n    this.composition = composition;\n    this._treeTraversal = _treeTraversal;\n  }\n  public createTree() {\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: 70, height: 90 and add node separation\n    const treemap = tree()\n      .nodeSize([75, 50])\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 = treemap(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 450\n    nodes.forEach(d => {\n      d.y = d.depth === 0 ? 10 : d.depth * 130;\n      d.x += 400;\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        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 rectHeight = 70;\n    const rectWidth = 220;\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 newWidth = (rectWidth - gap) / 2;\n        const newHeight = 70;\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 dx1: number = treeDataStructure[d.parentID]?.x;\n        const dx2: number = treeDataStructure[d.parentID]?.x + newWidth + gap;\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.metricName,\n                itr % 2 === 0 ? dx1 : dx2,\n                dy,\n                child.data.fill,\n                children.length === 1 ? rectWidth : newWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              if (itr % 2 === 1) {\n                dy += newHeight + gap;\n              }\n            }\n            // For long compostion\n            else {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.metricName,\n                dx1,\n                dy,\n                child.data.fill,\n                rectWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              dy += newHeight + 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.metricName,\n                itr % 2 === 0 ? dx1 : dx2,\n                dy,\n                child.data.fill,\n                children.length === 1 ? rectWidth : newWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              if (itr % 2 === 1) {\n                dy += newHeight + gap;\n              }\n            } else {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.metricName,\n                dx1,\n                dy,\n                child.data.fill,\n                rectWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              dy += newHeight + gap;\n            }\n          }\n        }\n      }\n\n      if (d.children || treeHeight <= 2) {\n        // <------------------ Nodes section ------------------>\n        this.addNodeShapetoSVG(\n          d.dataName,\n          d.subName,\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) {\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            false,\n            rectWidth,\n            rectHeight,\n            gap,\n          );\n        }\n      }\n    }\n  }\n}\n\nexport class TreeChartBase extends React.Component<ITreeProps, ITreeState> {\n  private _treeData: ITreeChartDataPoint;\n  private _width: number | undefined;\n  private _height: number | undefined;\n  private _composition: number | undefined;\n  private _classNames: IProcessedStyleSet<ITreeStyles>;\n  private _rootElem: HTMLElement | null;\n  private _margin: { left: number; right: number; top: number; bottom: number };\n  private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n  private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\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 || 1200;\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 || 1000,\n      _height: this._height || 700,\n    };\n  }\n\n  public componentDidMount() {\n    const { theme, className, styles } = this.props;\n    // Get classNames to create component styling\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    // Call createTreeChart function in componentDidMount\n    this.createTreeChart();\n    const reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;\n    this.setState({\n      _width: (this._rootElem && this._rootElem!.offsetWidth)!,\n      _height: (this._rootElem && this._rootElem!.offsetHeight - reducedHeight!)!,\n    });\n  }\n\n  public createTreeChart() {\n    const svg = select('.svgTree');\n\n    // Set SVG width and height\n    svg\n      .attr('width', this.state._width - this._margin.left - this._margin.right)\n      .attr('height', this.state._height - this._margin.top - this._margin.bottom);\n\n    // Create styleClass object to access it in parent class\n    const styleClassNames = {\n      link: this._classNames.link,\n      rectNode: this._classNames.rectNode,\n      rectText: this._classNames.rectText,\n      rectSubText: this._classNames.rectSubText,\n      rectmetricText: this._classNames.rectMetricText,\n    };\n\n    // Instantiate inherited class and call createTree function for the object\n    const treeObject = new LayeredTree(\n      this._treeData,\n      this._composition,\n      styleClassNames,\n      this._nodeElements,\n      this._linkElements,\n      this._treeTraversal,\n    );\n    treeObject.createTree();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <FocusZone>\n        <div className=\"svgTreeDiv\" ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}>\n          <svg className=\"svgTree\">\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"]}
+{"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';\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: {\n    rectmetricText: string | undefined;\n    rectSubText: string | undefined;\n    link: string;\n    rectNode: string;\n    rectText: string;\n  };\n\n  private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n  private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n  constructor(\n    treeData: ITreeChartDataPoint,\n    styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n    _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n    _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\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 !== undefined) {\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    metricName: string | undefined,\n    xCoordinate: 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    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    if (subname !== undefined) {\n      subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);\n    }\n    if (metricName !== undefined) {\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 =\n      metricName !== undefined ? (\n        <tspan className={this.styleClassNames.rectmetricText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n          {metricName}\n        </tspan>\n      ) : (\n        <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n          {subname}\n        </tspan>\n      );\n\n    if (subname === undefined && metricName === undefined) {\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 !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}\n          dy={metricName !== undefined ? 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  ): string {\n    // gap adds ratio for parent.y to child.y\n    const path = `M${childX + rectWidth / 2},${childY - gap} H${parentX + rectWidth / 2} V${\n      parentY + rectHeight + gap / 2\n    }`;\n    const leafpath = `M${parentX + rectWidth / 2},${parentY + rectHeight + gap / 2} V${\n      parentY + gap * 5\n    } H${parentX} H${parentX + rectWidth}`;\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  ) {\n    this._linkElements.push(\n      <path\n        className={this.styleClassNames.link}\n        d={this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap)}\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: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n    _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n    _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\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    if (givenLayoutWidth !== undefined) {\n      if (givenLayoutWidth < 65) {\n        givenLayoutWidth = 65;\n      }\n      if (givenLayoutWidth > 90) {\n        givenLayoutWidth = 90;\n      }\n    }\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 treemap = 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 = treemap(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 / 3;\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        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 newWidth = (rectWidth - gap) / 2;\n        const newHeight = 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 dx1: number = treeDataStructure[d.parentID]?.x;\n        const dx2: number = treeDataStructure[d.parentID]?.x + newWidth + gap;\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.metricName,\n                itr % 2 === 0 ? dx1 : dx2,\n                dy,\n                child.data.fill,\n                children.length === 1 ? rectWidth : newWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              if (itr % 2 === 1) {\n                dy += newHeight + gap;\n              }\n            }\n            // For long compostion\n            else {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.metricName,\n                dx1,\n                dy,\n                child.data.fill,\n                rectWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              dy += newHeight + 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.metricName,\n                itr % 2 === 0 ? dx1 : dx2,\n                dy,\n                child.data.fill,\n                children.length === 1 ? rectWidth : newWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              if (itr % 2 === 1) {\n                dy += newHeight + gap;\n              }\n            } else {\n              this.addNodeShapetoSVG(\n                child.data.name,\n                child.data.subname,\n                child.data.metricName,\n                dx1,\n                dy,\n                child.data.fill,\n                rectWidth,\n                rectHeight,\n                child.id,\n                parentInfo,\n              );\n              dy += newHeight + gap;\n            }\n          }\n        }\n      }\n\n      if (d.children || treeHeight <= 2) {\n        // <------------------ Nodes section ------------------>\n        this.addNodeShapetoSVG(\n          d.dataName,\n          d.subName,\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) {\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            false,\n            rectWidth,\n            rectHeight,\n            gap,\n          );\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: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n  private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\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: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n    const linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n\n    // Create styleClass object to access it in parent class\n    const styleClassNames = {\n      link: this._classNames.link,\n      rectNode: this._classNames.rectNode,\n      rectText: this._classNames.rectText,\n      rectSubText: this._classNames.rectSubText,\n      rectmetricText: this._classNames.rectMetricText,\n    };\n    // Instantiate inherited class and call createTree function for the object\n    const treeObject = new LayeredTree(\n      this._treeData,\n      this._composition,\n      styleClassNames,\n      nodeElements,\n      linkElements,\n      this._treeTraversal,\n    );\n    treeObject.createTree(this.props.layoutWidth, this._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.styles.js

@@ -4,6 +4,14 @@ define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
     exports.getStyles = void 0;
     var getStyles = function (props) {
         return {
+            root: [
+                props.theme.spacing,
+                'ms-TreeChart',
+                props.className,
+                {
+                    overflow: 'scroll',
+                },
+            ],
             link: {
                 fill: 'none',
                 stroke: '#A1A1A1',

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

@@ -1 +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,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,cAAc,qBACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;SACF,CAAC;IACJ,CAAC,CAAC;IA1BW,QAAA,SAAS,aA0BpB","sourcesContent":["import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';\n\nexport const getStyles = (props: ITreeStyleProps): ITreeStyles => {\n  return {\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    rectMetricText: {\n      fill: '#000000',\n      ...props.theme!.fonts.xLarge,\n    },\n  };\n};\n"]}
+{"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,cAAc,qBACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;SACF,CAAC;IACJ,CAAC,CAAC;IAlCW,QAAA,SAAS,aAkCpB","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    rectMetricText: {\n      fill: '#000000',\n      ...props.theme!.fonts.xLarge,\n    },\n  };\n};\n"]}

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

@@ -1,18 +1,45 @@
 import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 export interface ITreeChartDataPoint {
+    /**
+     * Node main text
+     */
     name: string;
-    subname: string;
+    /**
+     * Subtext value (optional)
+     */
+    subname?: string | undefined;
+    /**
+     * Metric text value (optional)
+     */
     metric?: string | undefined;
+    /**
+     * 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 {
@@ -24,13 +51,18 @@ export interface ITreeProps {
      * compostion for three layer chart, long: composition = 1; compact: composition = 0
      */
     composition?: NodesComposition.long | NodesComposition.compact | undefined;
+    /**
+     * Node Width Size for the Tree Layout
+     * * @default 75
+     */
+    layoutWidth?: number | undefined;
     /**
      * traversal order for tree chart, preOrder = 1, levelOrder = 0
      */
     treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;
     /**
      * Width of SVG tree chart
-     * * @default 1200
+     * * @default 1500
      */
     width?: number;
     /**
@@ -61,28 +93,93 @@ export interface ITreeProps {
     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: unknown;
+    /**
+     * Node main text
+     */
     dataName: string;
-    subName: string;
+    /**
+     * Subtext value (optional)
+     */
+    subName?: string | undefined;
+    /**
+     * Metric text value (optional)
+     */
     metricName?: string | undefined;
+    /**
+     * 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 metric value Text
+     */
     rectMetricText: IStyle;
 }

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

@@ -4,12 +4,24 @@ define(["require", "exports"], function (require, exports) {
     exports.TreeTraverse = exports.NodesComposition = void 0;
     var NodesComposition;
     (function (NodesComposition) {
+        /**
+         * NodeComposition enum val for long: number = 1
+         */
         NodesComposition[NodesComposition["long"] = 1] = "long";
+        /**
+         * NodeComposition enum val for compact: number = 0
+         */
         NodesComposition[NodesComposition["compact"] = 0] = "compact";
     })(NodesComposition = exports.NodesComposition || (exports.NodesComposition = {}));
     var TreeTraverse;
     (function (TreeTraverse) {
+        /**
+         * TreeTraverse enum val for preOrder: number = 1
+         */
         TreeTraverse[TreeTraverse["preOrder"] = 1] = "preOrder";
+        /**
+         * TreeTraverse enum val for levelOrder: number = 0
+         */
         TreeTraverse[TreeTraverse["levelOrder"] = 0] = "levelOrder";
     })(TreeTraverse = exports.TreeTraverse || (exports.TreeTraverse = {}));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":";;;;IAWA,IAAY,gBAGX;IAHD,WAAY,gBAAgB;QAC1B,uDAAQ,CAAA;QACR,6DAAW,CAAA;IACb,CAAC,EAHW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAG3B;IAED,IAAY,YAGX;IAHD,WAAY,YAAY;QACtB,uDAAY,CAAA;QACZ,2DAAc,CAAA;IAChB,CAAC,EAHW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAGvB","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface ITreeChartDataPoint {\n  name: string;\n  subname: string;\n  metric?: string | undefined;\n  fill: string;\n  children?: Array<ITreeChartDataPoint>;\n}\n\nexport enum NodesComposition {\n  long = 1,\n  compact = 0,\n}\n\nexport enum TreeTraverse {\n  preOrder = 1,\n  levelOrder = 0,\n}\n\nexport interface ITreeProps {\n  /**\n   * An object of chart data points for the Tree chart\n   */\n  treeData: ITreeChartDataPoint;\n  /**\n   * compostion for three layer chart, long: composition = 1; compact: composition = 0\n   */\n  composition?: NodesComposition.long | NodesComposition.compact | undefined;\n  /**\n   * traversal order for tree chart, preOrder = 1, levelOrder = 0\n   */\n  treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;\n  /**\n   * Width of SVG tree chart\n   * * @default 1200\n   */\n  width?: number;\n  /**\n   * Height of SVG tree chart\n   * * @default 700\n   */\n  height?: number;\n  /**\n   * Margin for the SVG tree chart\n   */\n  marign?: { left: number; right: number; top: number; bottom: number };\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;\n  /**\n   * Additional CSS class(es) to apply to the TreeChart.\n   */\n  className?: string;\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n}\nexport interface ITreeState {\n  _width: number;\n  _height: number;\n}\n\nexport interface ITreeDataStructure {\n  id: number;\n  children: unknown;\n  dataName: string;\n  subName: string;\n  metricName?: string | undefined;\n  fill: string;\n  x: number;\n  y: number;\n  parentID: number;\n}\n\nexport interface ITreeStyleProps {\n  theme: ITheme;\n  className?: string;\n}\nexport interface ITreeStyles {\n  link: IStyle;\n  rectNode: IStyle;\n  rectText: IStyle;\n  rectSubText: IStyle;\n  rectMetricText: IStyle;\n}\n"]}
+{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":";;;;IA0BA,IAAY,gBASX;IATD,WAAY,gBAAgB;QAC1B;;WAEG;QACH,uDAAQ,CAAA;QACR;;WAEG;QACH,6DAAW,CAAA;IACb,CAAC,EATW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAS3B;IAED,IAAY,YASX;IATD,WAAY,YAAY;QACtB;;WAEG;QACH,uDAAY,CAAA;QACZ;;WAEG;QACH,2DAAc,CAAA;IAChB,CAAC,EATW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QASvB","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface ITreeChartDataPoint {\n  /**\n   * Node main text\n   */\n  name: string;\n  /**\n   * Subtext value (optional)\n   */\n  subname?: string | undefined;\n  /**\n   * Metric text value (optional)\n   */\n  metric?: string | undefined;\n  /**\n   * Color of the rectangular box\n   */\n  fill: string;\n  /**\n   * Recursive datastructure for child node object\n   */\n  children?: Array<ITreeChartDataPoint>;\n}\n\nexport enum NodesComposition {\n  /**\n   * NodeComposition enum val for long: number = 1\n   */\n  long = 1,\n  /**\n   * NodeComposition enum val for compact: number = 0\n   */\n  compact = 0,\n}\n\nexport enum TreeTraverse {\n  /**\n   * TreeTraverse enum val for preOrder: number = 1\n   */\n  preOrder = 1,\n  /**\n   * TreeTraverse enum val for levelOrder: number = 0\n   */\n  levelOrder = 0,\n}\n\nexport interface ITreeProps {\n  /**\n   * An object of chart data points for the Tree chart\n   */\n  treeData: ITreeChartDataPoint;\n  /**\n   * compostion for three layer chart, long: composition = 1; compact: composition = 0\n   */\n  composition?: NodesComposition.long | NodesComposition.compact | undefined;\n  /**\n   * Node Width Size for the Tree Layout\n   * * @default 75\n   */\n  layoutWidth?: number | undefined;\n  /**\n   * traversal order for tree chart, preOrder = 1, levelOrder = 0\n   */\n  treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;\n  /**\n   * Width of SVG tree chart\n   * * @default 1500\n   */\n  width?: number;\n  /**\n   * Height of SVG tree chart\n   * * @default 700\n   */\n  height?: number;\n  /**\n   * Margin for the SVG tree chart\n   */\n  marign?: { left: number; right: number; top: number; bottom: number };\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;\n  /**\n   * Additional CSS class(es) to apply to the TreeChart.\n   */\n  className?: string;\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n}\nexport interface ITreeState {\n  /**\n   * Width of SVG tree chart\n   * * @default 1500\n   */\n  _width: number;\n  /**\n   * Height of SVG tree chart\n   * * @default 700\n   */\n  _height: number;\n  /**\n   * Layout Width of SVG tree chart\n   * * @default 75\n   */\n  _layoutWidth?: number;\n}\n\nexport interface ITreeDataStructure {\n  /**\n   * Node id of each node\n   */\n  id: number;\n  /**\n   * Children node object\n   */\n  children: unknown;\n  /**\n   * Node main text\n   */\n  dataName: string;\n  /**\n   * Subtext value (optional)\n   */\n  subName?: string | undefined;\n  /**\n   * Metric text value (optional)\n   */\n  metricName?: string | undefined;\n  /**\n   * Color of the rectangular box\n   */\n  fill: string;\n  /**\n   * X-coordindate of node\n   */\n  x: number;\n  /**\n   * Y-coordindate of node\n   */\n  y: number;\n  /**\n   * Node id of each node's parent\n   */\n  parentID: number;\n}\n\nexport interface ITreeStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n  /**\n   * Additional CSS class(es) to apply to the TreeChart.\n   */\n  className?: string;\n}\nexport interface ITreeStyles {\n  /**\n   *  Style for the root element.\n   */\n  root: IStyle;\n  /**\n   *  Style for the Link/Path element.\n   */\n  link: IStyle;\n  /**\n   *  Style for rectangular Node\n   */\n  rectNode: IStyle;\n  /**\n   *  Style for the node main Text\n   */\n  rectText: IStyle;\n  /**\n   *  Style for the node sub Text\n   */\n  rectSubText: IStyle;\n  /**\n   *  Style for the node metric value Text\n   */\n  rectMetricText: IStyle;\n}\n"]}

package/lib-amd/version.js

@@ -1,6 +1,6 @@
 define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@fluentui/react-charting', '5.12.1');
+    set_version_1.setVersion('@fluentui/react-charting', '5.12.2');
 });
 //# sourceMappingURL=version.js.map

package/lib-amd/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,wBAAU,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.12.1');"]}
+{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,wBAAU,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.12.2');"]}

package/lib-commonjs/components/TreeChart/TreeChart.base.d.ts

@@ -6,13 +6,13 @@ export declare class TreeChartBase extends React.Component<ITreeProps, ITreeStat
     private _height;
     private _composition;
     private _classNames;
-    private _rootElem;
     private _margin;
     private _nodeElements;
     private _linkElements;
     private _treeTraversal;
     constructor(props: ITreeProps);
     componentDidMount(): void;
+    componentDidUpdate(prevProps: ITreeProps): void;
     createTreeChart(): void;
     render(): JSX.Element;
 }