@fluentui/react-charting 5.13.4 → 5.13.6

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

@@ -26,7 +26,7 @@ var StandardTree = /** @class */ (function () {
         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) {
+        if (styleClass) {
             tspan.attr('class', styleClass);
         }
         var line = [];
@@ -49,25 +49,33 @@ var StandardTree = /** @class */ (function () {
     };
     // Append node elements
     // nodeId to create unique key
-    StandardTree.prototype.addNodeShapetoSVG = function (name, subname, metricName, xCoordinate, yCoordinate, fillColor, rectangleWidth, rectangleHeight, nodeId, parentInfo) {
+    StandardTree.prototype.addNodeShapetoSVG = function (name, subname, bodytext, metricName, xCenterCoordinate, 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) {
+        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 (metricName !== undefined) {
-            metricName = this.truncateText(metricName, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectmetricText);
+        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 !== 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));
-        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));
+        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 !== 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 },
+            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));
         }
@@ -75,8 +83,21 @@ var StandardTree = /** @class */ (function () {
     // 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
-        var path = "M" + childX + "," + (childY - gap) + " H" + (childXMax + rectWidth) + " M" + (parentX + rectWidth / 2) + "," + (childY - gap) + "\n    V" + (parentY + rectHeight + gap / 2);
-        var leafpath = "M" + (parentX + rectWidth / 2) + "," + (parentY + rectHeight + gap / 2) + " V" + (parentY + gap * 5) + " H" + parentX + " H" + (parentX + rectWidth);
+        /*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;
     };
@@ -99,15 +120,8 @@ var LayeredTree = /** @class */ (function (_super) {
         return _this;
     }
     LayeredTree.prototype.createTree = function (givenLayoutWidth, screenWidth) {
-        var _a, _b, _c, _d, _e;
-        if (givenLayoutWidth !== undefined) {
-            if (givenLayoutWidth < 65) {
-                givenLayoutWidth = 65;
-            }
-            if (givenLayoutWidth > 90) {
-                givenLayoutWidth = 90;
-            }
-        }
+        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;
@@ -115,13 +129,13 @@ var LayeredTree = /** @class */ (function (_super) {
         // 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 treemap = d3_hierarchy_1.tree()
+        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 = treemap(root);
+        var treeData = treeChart(root);
         // Compute the new tree layout.
         var nodes = treeData.descendants();
         // Normalize for fixed-depth and width
@@ -129,7 +143,7 @@ var LayeredTree = /** @class */ (function (_super) {
         // 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 / 3;
+            d.x += screenWidth / 2;
         });
         // <------------------ Traversal section ------------------>
         // Create tree data structure
@@ -144,6 +158,7 @@ var LayeredTree = /** @class */ (function (_super) {
                 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,
@@ -170,56 +185,61 @@ var LayeredTree = /** @class */ (function (_super) {
                 : "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 newWidth = (rectWidth - gap) / 2;
-                var newHeight = rectHeight;
+                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 dx1 = (_b = treeDataStructure[d.parentID]) === null || _b === void 0 ? void 0 : _b.x;
-                var dx2 = ((_c = treeDataStructure[d.parentID]) === null || _c === void 0 ? void 0 : _c.x) + newWidth + gap;
-                var dy = (_d = children[0]) === null || _d === void 0 ? void 0 : _d.y;
+                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.metricName, itr % 2 === 0 ? dx1 : dx2, dy, child.data.fill, children.length === 1 ? rectWidth : newWidth, rectHeight, child.id, parentInfo);
+                            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 += newHeight + gap;
+                                dy += compactNodeHeight + gap;
                             }
                         }
                         // For long compostion
                         else {
-                            this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, dx1, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
-                            dy += newHeight + gap;
+                            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.metricName, itr % 2 === 0 ? dx1 : dx2, dy, child.data.fill, children.length === 1 ? rectWidth : newWidth, rectHeight, child.id, parentInfo);
+                            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 += newHeight + gap;
+                                dy += compactNodeHeight + gap;
                             }
                         }
                         else {
-                            this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, dx1, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
-                            dy += newHeight + gap;
+                            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 ------------------>
-                this.addNodeShapetoSVG(d.dataName, d.subName, d.metricName, d.x, d.y, d.fill, rectWidth, rectHeight, d.id, parentInfo);
+                // 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 = (_e = treeDataStructure[d.id]) === null || _e === void 0 ? void 0 : _e.children;
+                    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);
@@ -278,17 +298,10 @@ var TreeChartBase = /** @class */ (function (_super) {
     TreeChartBase.prototype.createTreeChart = function () {
         var nodeElements = [];
         var linkElements = [];
-        // Create styleClass object to access it in parent class
-        var styleClassNames = {
-            link: this._classNames.link,
-            rectNode: this._classNames.rectNode,
-            rectText: this._classNames.rectText,
-            rectSubText: this._classNames.rectSubText,
-            rectmetricText: this._classNames.rectMetricText,
-        };
         // Instantiate inherited class and call createTree function for the object
-        var treeObject = new LayeredTree(this._treeData, this._composition, styleClassNames, nodeElements, linkElements, this._treeTraversal);
-        treeObject.createTree(this.props.layoutWidth, this._width);
+        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;
     };

package/lib-commonjs/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 { 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: {\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    childXMax: number,\n  ): string {\n    // gap adds ratio for parent.y to child.y\n\n    const path = `M${childX},${childY - gap} H${childXMax + rectWidth} M${parentX + rectWidth / 2},${childY - gap}\n    V${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    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: { 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 && 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: 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"]}
+{"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-commonjs/components/TreeChart/TreeChart.styles.js

@@ -25,6 +25,7 @@ var getStyles = function (props) {
         },
         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),
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TreeChart.styles.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAAsB;IAC9C,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,OAAO;YACnB,cAAc;YACd,KAAK,CAAC,SAAS;YACf;gBACE,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,KAAK;SACnB;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,KAAK;YAClB,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,EAAE,EAAE,KAAK;SACV;QACD,QAAQ,qBACN,IAAI,EAAE,OAAO,IACV,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,KAAK,CAC5B;QACD,WAAW,qBACT,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;QACD,cAAc,qBACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;KACF,CAAC;AACJ,CAAC,CAAC;AAlCW,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"]}
+{"version":3,"file":"TreeChart.styles.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAAsB;IAC9C,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,OAAO;YACnB,cAAc;YACd,KAAK,CAAC,SAAS;YACf;gBACE,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,KAAK;SACnB;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,KAAK;YAClB,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,EAAE,EAAE,KAAK;SACV;QACD,QAAQ,qBACN,IAAI,EAAE,OAAO,IACV,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,KAAK,CAC5B;QACD,WAAW,qBACT,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;QACD,YAAY,qBACV,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;QACD,cAAc,qBACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;KACF,CAAC;AACJ,CAAC,CAAC;AAtCW,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-commonjs/components/TreeChart/TreeChart.types.d.ts

@@ -8,11 +8,15 @@ export interface ITreeChartDataPoint {
     /**
      * Subtext value (optional)
      */
-    subname?: string | undefined;
+    subname?: string;
+    /**
+     * Bodytext value (optional)
+     */
+    bodytext?: string;
     /**
      * Metric text value (optional)
      */
-    metric?: string | undefined;
+    metric?: string;
     /**
      * Color of the rectangular box
      */
@@ -50,12 +54,12 @@ export interface ITreeProps {
     /**
      * compostion for three layer chart, long: composition = 1; compact: composition = 0
      */
-    composition?: NodesComposition.long | NodesComposition.compact | undefined;
+    composition?: NodesComposition.long | NodesComposition.compact;
     /**
      * Node Width Size for the Tree Layout
      * * @default 75
      */
-    layoutWidth?: number | undefined;
+    layoutWidth?: number;
     /**
      * traversal order for tree chart, preOrder = 1, levelOrder = 0
      */
@@ -125,11 +129,15 @@ export interface ITreeDataStructure {
     /**
      * Subtext value (optional)
      */
-    subName?: string | undefined;
+    subName?: string;
+    /**
+     * Bodytext value (optional)
+     */
+    bodyText?: string;
     /**
      * Metric text value (optional)
      */
-    metricName?: string | undefined;
+    metricName?: string;
     /**
      * Color of the rectangular box
      */
@@ -178,6 +186,10 @@ export interface ITreeStyles {
      *  Style for the node sub Text
      */
     rectSubText: IStyle;
+    /**
+     *  Style for the node body Text
+     */
+    rectBodyText: IStyle;
     /**
      *  Style for the node metric value Text
      */

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

@@ -1 +1 @@
-{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":";;;AA0BA,IAAY,gBASX;AATD,WAAY,gBAAgB;IAC1B;;OAEG;IACH,uDAAQ,CAAA;IACR;;OAEG;IACH,6DAAW,CAAA;AACb,CAAC,EATW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAS3B;AAED,IAAY,YASX;AATD,WAAY,YAAY;IACtB;;OAEG;IACH,uDAAY,CAAA;IACZ;;OAEG;IACH,2DAAc,CAAA;AAChB,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: Array<ITreeDataStructure>;\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"]}
+{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":";;;AA8BA,IAAY,gBASX;AATD,WAAY,gBAAgB;IAC1B;;OAEG;IACH,uDAAQ,CAAA;IACR;;OAEG;IACH,6DAAW,CAAA;AACb,CAAC,EATW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAS3B;AAED,IAAY,YASX;AATD,WAAY,YAAY;IACtB;;OAEG;IACH,uDAAY,CAAA;IACZ;;OAEG;IACH,2DAAc,CAAA;AAChB,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;\n  /**\n   * Bodytext value (optional)\n   */\n  bodytext?: string;\n  /**\n   * Metric text value (optional)\n   */\n  metric?: string;\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;\n  /**\n   * Node Width Size for the Tree Layout\n   * * @default 75\n   */\n  layoutWidth?: number;\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: Array<ITreeDataStructure>;\n  /**\n   * Node main text\n   */\n  dataName: string;\n  /**\n   * Subtext value (optional)\n   */\n  subName?: string;\n  /**\n   * Bodytext value (optional)\n   */\n  bodyText?: string;\n  /**\n   * Metric text value (optional)\n   */\n  metricName?: string;\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 body Text\n   */\n  rectBodyText: IStyle;\n  /**\n   *  Style for the node metric value Text\n   */\n  rectMetricText: IStyle;\n}\n"]}

package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js

@@ -47,7 +47,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 });
             var linePath = d3_shape_1.line()
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                .x(function (d) { return (!isNumericAxis ? xBarScale(d.index) + 0.5 * _this._barWidth : xScale(d.x)); })
+                .x(function (d) { return (!isNumericAxis ? xBarScale(d.x) + 0.5 * xBarScale.bandwidth() : xScale(d.x)); })
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 .y(function (d) { return yScale(d.y); });
             var shouldHighlight = true;
@@ -63,7 +63,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             line.push(React.createElement("path", { opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3, stroke: lineLegendColor }));
             var dots = lineData.map(function (item, index) {
                 var _a;
-                return (React.createElement("circle", { key: index, cx: !isNumericAxis ? xBarScale(item.index) + 0.5 * _this._barWidth : xScale(item.x), cy: yScale(item.y), onMouseOver: _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: 8, stroke: lineLegendColor, fill: _this.props.theme.palette.white, strokeWidth: 3, visibility: _this.state.activeXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide, onClick: (_a = item.point.lineData) === null || _a === void 0 ? void 0 : _a.onClick }));
+                return (React.createElement("circle", { key: index, cx: !isNumericAxis ? xBarScale(item.x) + 0.5 * xBarScale.bandwidth() : xScale(item.x), cy: yScale(item.y), onMouseOver: _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: 8, stroke: lineLegendColor, fill: _this.props.theme.palette.white, strokeWidth: 3, visibility: _this.state.activeXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide, onClick: (_a = item.point.lineData) === null || _a === void 0 ? void 0 : _a.onClick }));
             });
             return (React.createElement(React.Fragment, null,
                 line,
@@ -179,8 +179,9 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         _this._getScales = function (containerHeight, containerWidth, isNumericScale) {
             if (isNumericScale) {
                 var xMax = d3_array_1.max(_this._points, function (point) { return point.x; });
+                var xMin = d3_array_1.min(_this._points, function (point) { return point.x; });
                 var xBarScale = d3_scale_1.scaleLinear()
-                    .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
+                    .domain(_this._isRtl ? [xMax, xMin] : [xMin, xMax])
                     .nice()
                     .range([
                     _this.margins.left + _this._barWidth / 2,