@fluentui/react-charting 5.23.60 → 5.23.62

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

@@ -1,232 +0,0 @@
-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;
-    /**
-     * @default false
-     * The prop used to enable gradient fill color for the chart.
-     */
-    enableGradient?: boolean;
-    /**
-     * @default false
-     * The prop used to enable rounded corners for the chart.
-     */
-    roundCorners?: boolean;
-}
-/**
- * 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-commonjs/components/StackedBarChart/StackedBarChart.types.js

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

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

@@ -1 +0,0 @@
-{"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   * @default false\n   * The prop used to enable gradient fill color for the chart.\n   */\n  enableGradient?: boolean;\n\n  /**\n   * @default false\n   * The prop used to enable rounded corners for the chart.\n   */\n  roundCorners?: boolean;\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-commonjs/components/StackedBarChart/index.d.ts

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

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./StackedBarChart"), exports);
-tslib_1.__exportStar(require("./MultiStackedBarChart"), exports);
-tslib_1.__exportStar(require("./StackedBarChart.types"), exports);
-tslib_1.__exportStar(require("./MultiStackedBarChart.types"), exports);
-tslib_1.__exportStar(require("../../types/index"), exports);
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/StackedBarChart/index.ts"],"names":[],"mappings":";;;AAAA,4DAAkC;AAClC,iEAAuC;AACvC,kEAAwC;AACxC,uEAA6C;AAC7C,4DAAkC","sourcesContent":["export * from './StackedBarChart';\nexport * from './MultiStackedBarChart';\nexport * from './StackedBarChart.types';\nexport * from './MultiStackedBarChart.types';\nexport * from '../../types/index';\n"]}

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

@@ -1,18 +0,0 @@
-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-commonjs/components/TreeChart/TreeChart.base.js

@@ -1,324 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeChartBase = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var d3_hierarchy_1 = require("d3-hierarchy");
-var Utilities_1 = require("@fluentui/react/lib/Utilities");
-var d3_selection_1 = require("d3-selection");
-var react_focus_1 = require("@fluentui/react-focus");
-var d3_array_1 = require("d3-array");
-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 _a, _b, _c, _d, _e;
-        var _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