@fluentui/react-charting 5.21.28 → 5.21.29

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

@@ -0,0 +1,222 @@
+import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
+import { IFocusZoneProps } from '@fluentui/react-focus';
+import { ILegendsProps } from '../Legends/index';
+export interface IStackedBarChart {
+}
+import { IChartProps, IChartDataPoint } from './index';
+/**
+ * Stacked Bar Chart properties
+ * {@docCategory StackedBarChart}
+ */
+export interface IStackedBarChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: IChartProps;
+    /**
+     * Benchmark Data to render in the chart.
+     */
+    benchmarkData?: IChartDataPoint;
+    /**
+     * Target Data to render in the chart.
+     */
+    targetData?: IChartDataPoint;
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * Height of each bar in the chart.
+     */
+    barHeight?: number;
+    /**
+     * Do not show the legend at the bottom of chart
+     * when there are more than two datapoints
+     *
+     * @default false
+     */
+    hideLegend?: boolean;
+    /**
+     * Do not show number/ratio on top of bar
+     *
+     * @default false
+     */
+    hideNumberDisplay?: boolean;
+    /**
+     * Do not show tooltips in chart
+     *
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IStackedBarChartStyleProps, IStackedBarChartStyles>;
+    /**
+     * Color setting of bar background color, this will show while all data points value is 0
+     */
+    barBackgroundColor?: string;
+    /**
+     * Url that the data-viz needs to redirect to upon clicking on it
+     */
+    href?: string;
+    /**
+     * If this value is set, the fixed display pattern for less than 2 data points chart will be ignore
+     */
+    ignoreFixStyle?: boolean;
+    /**
+     * If this value is set to true the denominator will not be shown for the ratio above the chart
+     */
+    hideDenominator?: boolean;
+    /**
+     * Enable the legends to wrap lines if there is not enough space to show all legends on a single line
+     */
+    enabledLegendsWrapLines?: boolean;
+    /**
+     * overflow props for the legend
+     */
+    legendsOverflowProps?: Partial<IOverflowSetProps>;
+    /**
+     * text for overflow legends string
+     */
+    legendsOverflowText?: string;
+    /**
+     * focus zone props in hover card for legends
+     */
+    focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;
+    /**
+     * props for the legends in the chart
+     */
+    legendProps?: Partial<ILegendsProps>;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps>;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+/**
+ * Stacked Bar Chart style properties
+ * {@docCategory StackedBarChart}
+ */
+export interface IStackedBarChartStyleProps {
+    /**
+     * Theme (provided through customization.)
+     */
+    theme: ITheme;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * Height of bar in the chart.
+     */
+    barHeight?: number;
+    /**
+     * prop to show data of the chart with appropriate legend color
+     */
+    legendColor?: string;
+    /**
+     * prop to check if the chart is selcted or hovered upon to determine opacity
+     */
+    shouldHighlight?: boolean;
+    /**
+     * prop to check which specific section of the stacked bar chart is selected or hovered upon
+     */
+    isChartSelected?: boolean;
+    /**
+     * prop to check to decide cursor type
+     */
+    href?: string;
+    /**
+     * the color for the benchmark triangle
+     */
+    benchmarkColor?: string;
+    /**
+     * the ratio position for the benchmark triangle
+     */
+    benchmarkRatio?: number;
+    /**
+     * the color for the target triangle
+     */
+    targetColor?: string;
+    /**
+     * the ratio position for the target triangle
+     */
+    targetRatio?: number;
+    /**
+     * prop to check if benchmark data or target data is provided
+     */
+    showTriangle?: boolean;
+}
+/**
+ * Stacked Bar Chart styles
+ * {@docCategory StackedBarChart}
+ */
+export interface IStackedBarChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root: IStyle;
+    /**
+     * Style for the chart.
+     */
+    chart: IStyle;
+    /**
+     * Style for the chart Title.
+     */
+    chartTitle: IStyle;
+    /**
+     * Style for left side text of the chart title
+     */
+    chartTitleLeft: IStyle;
+    /**
+     * Style for the legend container div
+     */
+    legendContainer: IStyle;
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover: IStyle;
+    /**
+     * Style for the chart ratio numerator
+     */
+    ratioNumerator: IStyle;
+    /**
+     * Style for the chart ratio denominator
+     */
+    ratioDenominator: IStyle;
+    /**
+     * Style for the benchmark container
+     */
+    benchmarkContainer: IStyle;
+    /**
+     * Style for the benchmark triangle
+     */
+    benchmark: IStyle;
+    /**
+     * Style for the target triangle
+     */
+    target: IStyle;
+}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=StackedBarChart.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { ILegendsProps } from '../Legends/index';\n\nexport interface IStackedBarChart {}\nimport { IChartProps, IChartDataPoint } from './index';\n\n/**\n * Stacked Bar Chart properties\n * {@docCategory StackedBarChart}\n */\nexport interface IStackedBarChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IChartProps;\n\n  /**\n   * Benchmark Data to render in the chart.\n   */\n  benchmarkData?: IChartDataPoint;\n\n  /**\n   * Target Data to render in the chart.\n   */\n  targetData?: IChartDataPoint;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of each bar in the chart.\n   */\n  barHeight?: number;\n\n  /**\n   * Do not show the legend at the bottom of chart\n   * when there are more than two datapoints\n   *\n   * @default false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show number/ratio on top of bar\n   *\n   * @default false\n   */\n  hideNumberDisplay?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IStackedBarChartStyleProps, IStackedBarChartStyles>;\n\n  /**\n   * Color setting of bar background color, this will show while all data points value is 0\n   */\n  barBackgroundColor?: string;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * If this value is set, the fixed display pattern for less than 2 data points chart will be ignore\n   */\n  ignoreFixStyle?: boolean;\n\n  /**\n   * If this value is set to true the denominator will not be shown for the ratio above the chart\n   */\n  hideDenominator?: boolean;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /**\n   * overflow props for the legend\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * text for overflow legends string\n   */\n  legendsOverflowText?: string;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\n/**\n * Stacked Bar Chart style properties\n * {@docCategory StackedBarChart}\n */\nexport interface IStackedBarChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of bar in the chart.\n   */\n  barHeight?: number;\n\n  /**\n   * prop to show data of the chart with appropriate legend color\n   */\n  legendColor?: string;\n\n  /**\n   * prop to check if the chart is selcted or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check which specific section of the stacked bar chart is selected or hovered upon\n   */\n  isChartSelected?: boolean;\n\n  /**\n   * prop to check to decide cursor type\n   */\n  href?: string;\n\n  /**\n   * the color for the benchmark triangle\n   */\n  benchmarkColor?: string;\n\n  /**\n   * the ratio position for the benchmark triangle\n   */\n  benchmarkRatio?: number;\n\n  /**\n   * the color for the target triangle\n   */\n  targetColor?: string;\n\n  /**\n   * the ratio position for the target triangle\n   */\n  targetRatio?: number;\n\n  /**\n   * prop to check if benchmark data or target data is provided\n   */\n  showTriangle?: boolean;\n}\n\n/**\n * Stacked Bar Chart styles\n * {@docCategory StackedBarChart}\n */\nexport interface IStackedBarChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style for left side text of the chart title\n   */\n  chartTitleLeft: IStyle;\n\n  /**\n   * Style for the legend container div\n   */\n  legendContainer: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover: IStyle;\n\n  /**\n   * Style for the chart ratio numerator\n   */\n  ratioNumerator: IStyle;\n\n  /**\n   * Style for the chart ratio denominator\n   */\n  ratioDenominator: IStyle;\n\n  /**\n   * Style for the benchmark container\n   */\n  benchmarkContainer: IStyle;\n\n  /**\n   * Style for the benchmark triangle\n   */\n  benchmark: IStyle;\n\n  /**\n   * Style for the target triangle\n   */\n  target: IStyle;\n}\n"]}

package/lib-amd/components/StackedBarChart/index.d.ts

@@ -0,0 +1,5 @@
+export * from './StackedBarChart';
+export * from './MultiStackedBarChart';
+export * from './StackedBarChart.types';
+export * from './MultiStackedBarChart.types';
+export * from '../../types/index';

package/lib-amd/components/StackedBarChart/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./StackedBarChart", "./MultiStackedBarChart", "./StackedBarChart.types", "./MultiStackedBarChart.types", "../../types/index"], function (require, exports, tslib_1, StackedBarChart_1, MultiStackedBarChart_1, StackedBarChart_types_1, MultiStackedBarChart_types_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(StackedBarChart_1, exports);
+    tslib_1.__exportStar(MultiStackedBarChart_1, exports);
+    tslib_1.__exportStar(StackedBarChart_types_1, exports);
+    tslib_1.__exportStar(MultiStackedBarChart_types_1, exports);
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/StackedBarChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/StackedBarChart/index.ts"],"names":[],"mappings":";;;IAAA,iDAAkC;IAClC,sDAAuC;IACvC,uDAAwC;IACxC,4DAA6C;IAC7C,uCAAkC","sourcesContent":["export * from './StackedBarChart';\nexport * from './MultiStackedBarChart';\nexport * from './StackedBarChart.types';\nexport * from './MultiStackedBarChart.types';\nexport * from '../../types/index';\n"]}

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ITreeProps, ITreeState } from '../../index';
+export declare class TreeChartBase extends React.Component<ITreeProps, ITreeState> {
+    private _treeData;
+    private _width;
+    private _height;
+    private _composition;
+    private _classNames;
+    private _margin;
+    private _nodeElements;
+    private _linkElements;
+    private _treeTraversal;
+    constructor(props: ITreeProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ITreeProps): void;
+    createTreeChart(): void;
+    render(): JSX.Element;
+}

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

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