@fluentui/react-charting 5.19.17 → 5.19.19

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

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "d3-sankey", "d3-shape", "d3-array", "../../index", "@fluentui/react/lib/Callout", "d3-selection", "@fluentui/react-focus"], function (require, exports, tslib_1, React, Utilities_1, d3_sankey_1, d3_shape_1, d3_array_1, index_1, Callout_1, d3_selection_1, react_focus_1) {
+define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react/lib/Callout", "@fluentui/react/lib/Utilities", "d3-array", "d3-sankey", "d3-selection", "d3-shape", "react", "../../index"], function (require, exports, tslib_1, react_focus_1, Callout_1, Utilities_1, d3_array_1, d3_sankey_1, d3_selection_1, d3_shape_1, React, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.SankeyChartBase = void 0;
@@ -25,12 +25,167 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
     var NON_SELECTED_STREAM_BORDER_OPACITY = 0.5;
     var DEFAULT_TEXT_COLOR = '#323130';
     var NON_SELECTED_TEXT_COLOR = '#FFFFFF';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function getSelectedNodes(selectedLinks) {
+        var nodes = [];
+        selectedLinks.forEach(function (link) {
+            nodes.push(link.target);
+            if (nodes.indexOf(link.source) === -1) {
+                nodes.push(link.source);
+            }
+        });
+        return nodes;
+    }
+    function getSelectedLinks(singleNode) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-array-constructor
+        var q = new Array();
+        var finalLinks = new Set();
+        singleNode.sourceLinks.forEach(function (link) {
+            q.push(link);
+            finalLinks.add(link);
+        });
+        while (q.length > 0) {
+            var poppedLink = q.shift();
+            var node = poppedLink.target;
+            if (node && node.sourceLinks) {
+                node.sourceLinks.forEach(function (link) {
+                    finalLinks.add(link);
+                    q.push(link);
+                });
+            }
+        }
+        if (singleNode.targetLinks) {
+            singleNode.targetLinks.forEach(function (link) {
+                q.push(link);
+                finalLinks.add(link);
+            });
+        }
+        while (q.length > 0) {
+            var poppedLink = q.shift();
+            var node = poppedLink.source;
+            if (node && node.targetLinks) {
+                node.targetLinks.forEach(function (link) {
+                    finalLinks.add(link);
+                    q.push(link);
+                });
+            }
+        }
+        return finalLinks;
+    }
+    function getSelectedLinksforStreamHover(singleLink) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-array-constructor
+        var q = new Array();
+        var finalLinks = new Set();
+        var finalNodes = new Set();
+        q.push(singleLink.source);
+        finalLinks.add(singleLink);
+        while (q.length > 0) {
+            var poppedNode = q.shift();
+            finalNodes.add(poppedNode);
+            if (poppedNode.targetLinks && poppedNode.targetLinks.length > 0) {
+                poppedNode.targetLinks.forEach(function (link) {
+                    q.push(link.source);
+                    finalLinks.add(link);
+                });
+            }
+        }
+        q.push(singleLink.target);
+        while (q.length > 0) {
+            var poppedNode = q.shift();
+            finalNodes.add(poppedNode);
+            if (poppedNode.sourceLinks && poppedNode.sourceLinks.length > 0) {
+                poppedNode.sourceLinks.forEach(function (link) {
+                    q.push(link.target);
+                    finalLinks.add(link);
+                });
+            }
+        }
+        return {
+            selectedLinks: finalLinks,
+            selectedNodes: finalNodes,
+        };
+    }
+    /**
+     * This is used to group nodes by column index.
+     */
+    function populateNodeInColumns(graph, sankey) {
+        sankey(graph);
+        var nodesInColumn = {};
+        graph.nodes.forEach(function (node) {
+            var columnId = node.layer;
+            if (nodesInColumn[columnId]) {
+                nodesInColumn[columnId].push(node);
+            }
+            else {
+                nodesInColumn[columnId] = [node];
+            }
+        });
+        return nodesInColumn;
+    }
+    /**
+     * This is used to normalize the nodes value whose value is less than 1% of the total column value.
+     */
+    function adjustOnePercentHeightNodes(nodesInColumn) {
+        var totalColumnValue = Object.values(nodesInColumn).map(function (column) {
+            return (0, d3_array_1.sum)(column, function (node) { return node.value; });
+        });
+        totalColumnValue.forEach(function (columnValue, index) {
+            var totalPercentage = 0;
+            nodesInColumn[index].forEach(function (node) {
+                var nodePercentage = (node.value / columnValue) * 100;
+                node.actualValue = node.value;
+                //if the value is less than 1% then we are making it as 1% of total .
+                if (nodePercentage < 1) {
+                    node.value = 0.01 * columnValue;
+                    totalPercentage = totalPercentage + 1;
+                }
+                else {
+                    totalPercentage = totalPercentage + nodePercentage;
+                }
+            });
+            //since we have adjusted the value to be 1% but we need to keep the sum of the percentage value under 100.
+            var scalingRatio = totalPercentage !== 0 ? totalPercentage / 100 : 1;
+            if (scalingRatio > 1) {
+                nodesInColumn[index].forEach(function (node) {
+                    node.value = node.value / scalingRatio;
+                    changeColumnValue(node, node.actualValue, node.value);
+                });
+            }
+        });
+    }
+    /**
+     * This is used for normalizing each links value for reflecting the normalized node value.
+     */
+    function changeColumnValue(node, originalValue, normalizedValue) {
+        node.sourceLinks.forEach(function (link) {
+            link.unnormalizedValue = link.value;
+            var linkRatio = link.value / originalValue;
+            link.value = normalizedValue * linkRatio;
+        });
+        node.targetLinks.forEach(function (link) {
+            link.unnormalizedValue = link.value;
+            var linkRatio = link.value / originalValue;
+            link.value = normalizedValue * linkRatio;
+        });
+    }
+    /**
+     * This is used for calculating the node non normalized value based on link non normalized value.
+     */
+    function populateNodeActualValue(data) {
+        data.links.forEach(function (link) {
+            if (!link.unnormalizedValue) {
+                link.unnormalizedValue = link.value;
+            }
+        });
+        data.nodes.forEach(function (node) {
+            node.actualValue = Math.max((0, d3_array_1.sum)(node.sourceLinks, function (link) { return link.unnormalizedValue; }), (0, d3_array_1.sum)(node.targetLinks, function (link) { return link.unnormalizedValue; }));
+        });
+    }
     var SankeyChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(SankeyChartBase, _super);
         function SankeyChartBase(props) {
             var _this = _super.call(this, props) || this;
             _this._isRtl = (0, Utilities_1.getRTL)();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             _this._onCloseCallout = function () {
                 _this.setState({
                     isCalloutVisible: false,
@@ -41,27 +196,27 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             _this._onBlur = function () {
                 /**/
             };
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             _this._fillNodeColors = function (singleNode) {
-                if (!_this.state.selectedState) {
+                var state = _this.state;
+                if (!state.selectedState) {
                     return singleNode.color;
                 }
-                else if (_this.state.selectedState && _this.state.selectedNodes.has(singleNode.index) && _this.state.selectedNode) {
-                    return _this.state.selectedNode.color;
+                else if (state.selectedState && state.selectedNodes.has(singleNode.index) && state.selectedNode) {
+                    return state.selectedNode.color;
                 }
-                else if (_this.state.selectedState && !_this.state.selectedNode) {
+                else if (state.selectedState && !state.selectedNode) {
                     return singleNode.color;
                 }
             };
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             _this._fillNodeBorder = function (singleNode) {
-                if (!_this.state.selectedState) {
+                var state = _this.state;
+                if (!state.selectedState) {
                     return singleNode.borderColor;
                 }
-                else if (_this.state.selectedState && _this.state.selectedNodes.has(singleNode.index) && _this.state.selectedNode) {
-                    return _this.state.selectedNode.borderColor;
+                else if (state.selectedState && state.selectedNodes.has(singleNode.index) && state.selectedNode) {
+                    return state.selectedNode.borderColor;
                 }
-                else if (_this.state.selectedState && _this.state.selectedNodes.has(singleNode.index)) {
+                else if (state.selectedState && state.selectedNodes.has(singleNode.index)) {
                     return singleNode.borderColor;
                 }
                 return singleNode.borderColor;
@@ -98,148 +253,70 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             var _this = this;
             if (!this._isChartEmpty()) {
                 var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles, pathColor = _a.pathColor;
-                this._classNames = getClassNames(styles, {
+                var state = this.state;
+                var classNames = getClassNames(styles, {
                     theme: theme,
-                    width: this.state.containerWidth,
-                    height: this.state.containerHeight,
+                    width: state.containerWidth,
+                    height: state.containerHeight,
                     pathColor: pathColor,
                     className: className,
                 });
                 // We are using the this._margins.left and this._margins.top in sankey extent while constructing the layout
                 var _b = this._preRenderLayout(), height = _b.height, width = _b.width;
-                this._normalizeData(this.props.data.SankeyChartData);
+                var sankeyChartData = this.props.data.SankeyChartData;
+                this._normalizeData(sankeyChartData);
                 var nodePadding = 8;
                 nodePadding = this._adjustPadding(this._sankey, height - 6, this._nodesInColumn);
                 this._sankey.nodePadding(nodePadding);
-                this._sankey(this.props.data.SankeyChartData);
-                this._populateNodeActualValue(this.props.data.SankeyChartData);
+                this._sankey(sankeyChartData);
+                populateNodeActualValue(sankeyChartData);
                 this._assignNodeColors();
-                var nodeData = this._createNodes(width);
+                var nodeData = this._createNodes(classNames);
                 var linkData = this._createLinks();
                 var calloutProps = {
-                    isCalloutVisible: this.state.isCalloutVisible,
+                    isCalloutVisible: state.isCalloutVisible,
                     directionalHint: Callout_1.DirectionalHint.topAutoEdge,
                     id: "toolTip".concat(this._calloutId),
-                    target: this.state.refSelected,
-                    color: this.state.color,
-                    XValue: this.state.xCalloutValue,
-                    YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,
-                    descriptionMessage: this.state.descriptionMessage,
+                    target: state.refSelected,
+                    color: state.color,
+                    XValue: state.xCalloutValue,
+                    YValue: state.yCalloutValue ? state.yCalloutValue : state.dataForHoverCard,
+                    descriptionMessage: state.descriptionMessage,
                     isBeakVisible: false,
                     gapSpace: 15,
                     onDismiss: this._onCloseCallout,
-                    className: this._classNames.calloutContentRoot,
+                    className: classNames.calloutContentRoot,
                     preventDismissOnLostFocus: true,
                 };
-                return (React.createElement("div", { className: this._classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this._onCloseCallout },
+                return (React.createElement("div", { className: classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this._onCloseCallout },
                     React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.bidirectional, isCircularNavigation: true, handleTabKey: react_focus_1.FocusZoneTabbableElements.all },
                         React.createElement("svg", { width: width, height: height, id: (0, Utilities_1.getId)('sankeyChart') },
-                            React.createElement("g", { className: this._classNames.links, strokeOpacity: 1 }, linkData),
-                            React.createElement("g", { className: this._classNames.nodes }, nodeData),
+                            React.createElement("g", { className: classNames.links, strokeOpacity: 1 }, linkData),
+                            React.createElement("g", { className: classNames.nodes }, nodeData),
                             calloutProps.isCalloutVisible && (React.createElement(Callout_1.Callout, tslib_1.__assign({}, calloutProps),
                                 React.createElement(index_1.ChartHoverCard, { XValue: calloutProps.XValue, YValue: calloutProps.YValue, color: calloutProps.color, descriptionMessage: calloutProps.descriptionMessage ? calloutProps.descriptionMessage : '' })))))));
             }
             return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
         };
         SankeyChartBase.prototype._preRenderLayout = function () {
-            var width = this.state.containerWidth - this._margins.right;
-            var height = this.state.containerHeight - this._margins.bottom > 0 ? this.state.containerHeight - this._margins.bottom : 0;
+            var _a = this.state, containerHeight = _a.containerHeight, containerWidth = _a.containerWidth;
+            var _b = this._margins, left = _b.left, right = _b.right, top = _b.top, bottom = _b.bottom;
+            var width = containerWidth - right;
+            var height = containerHeight - bottom > 0 ? containerHeight - bottom : 0;
             this._sankey = (0, d3_sankey_1.sankey)()
                 .nodeWidth(124)
                 .extent([
-                [this._margins.left, this._margins.top],
+                [left, top],
                 [width - 1, height - 6],
             ])
                 .nodeAlign(this._isRtl ? d3_sankey_1.sankeyRight : d3_sankey_1.sankeyJustify);
             return { height: height, width: width };
         };
-        /**
-         * This is used for calculating the node non normalized value based on link non normalized value.
-         *
-         */
-        SankeyChartBase.prototype._populateNodeActualValue = function (data) {
-            data.links.forEach(function (link) {
-                if (!link.unnormalizedValue) {
-                    link.unnormalizedValue = link.value;
-                }
-            });
-            data.nodes.forEach(function (node) {
-                node.actualValue = Math.max((0, d3_array_1.sum)(node.sourceLinks, function (link) { return link.unnormalizedValue; }), (0, d3_array_1.sum)(node.targetLinks, function (link) { return link.unnormalizedValue; }));
-            });
-        };
         SankeyChartBase.prototype._normalizeSankeyData = function (data) {
-            this._nodesInColumn = this._populateNodeInColumns(data, this._sankey);
-            this._adjustOnePercentHeightNodes(this._nodesInColumn);
+            var nodesInColumn = (this._nodesInColumn = populateNodeInColumns(data, this._sankey));
+            adjustOnePercentHeightNodes(nodesInColumn);
         };
         /**
-         *
-         * This is used to group nodes by column index.
-         */
-        SankeyChartBase.prototype._populateNodeInColumns = function (graph, sankey) {
-            sankey(graph);
-            var nodesInColumn = {};
-            graph.nodes.forEach(function (node) {
-                var columnId = node.layer;
-                if (nodesInColumn[columnId]) {
-                    nodesInColumn[columnId].push(node);
-                }
-                else {
-                    nodesInColumn[columnId] = [node];
-                }
-            });
-            return nodesInColumn;
-        };
-        /**
-         * This is used to normalize the nodes value whose value is less than 1% of the total column value.
-         *
-         */
-        SankeyChartBase.prototype._adjustOnePercentHeightNodes = function (nodesInColumn) {
-            var _this = this;
-            var totalColumnValue = Object.values(nodesInColumn).map(function (column) {
-                return (0, d3_array_1.sum)(column, function (node) { return node.value; });
-            });
-            totalColumnValue.forEach(function (columnValue, index) {
-                var totalPercentage = 0;
-                nodesInColumn[index].forEach(function (node) {
-                    var nodePercentage = (node.value / columnValue) * 100;
-                    node.actualValue = node.value;
-                    //if the value is less than 1% then we are making it as 1% of total .
-                    if (nodePercentage < 1) {
-                        node.value = 0.01 * columnValue;
-                        totalPercentage = totalPercentage + 1;
-                    }
-                    else {
-                        totalPercentage = totalPercentage + nodePercentage;
-                    }
-                });
-                //since we have adjusted the value to be 1% but we need to keep the sum of the percentage value under 100.
-                var scalingRatio = totalPercentage !== 0 ? totalPercentage / 100 : 1;
-                if (scalingRatio > 1) {
-                    nodesInColumn[index].forEach(function (node) {
-                        node.value = node.value / scalingRatio;
-                        _this._changeColumnValue(node, node.actualValue, node.value);
-                    });
-                }
-            });
-        };
-        /**
-         *
-         * This is used for normalizing each links value for reflecting the normalized node value.
-         */
-        SankeyChartBase.prototype._changeColumnValue = function (node, originalValue, normalizedValue) {
-            node.sourceLinks.forEach(function (link) {
-                link.unnormalizedValue = link.value;
-                var linkRatio = link.value / originalValue;
-                link.value = normalizedValue * linkRatio;
-            });
-            node.targetLinks.forEach(function (link) {
-                link.unnormalizedValue = link.value;
-                var linkRatio = link.value / originalValue;
-                link.value = normalizedValue * linkRatio;
-            });
-        };
-        /**
-         *
          * This is used to introduce dynamic padding for cases where the number of nodes in a column is huge
          * so that we maintain a node to space ratio for such columns as if we fail to do so the
          * chart is devoid of nodes and only shows links.
@@ -261,8 +338,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
         SankeyChartBase.prototype._createLinks = function () {
             var _this = this;
             var links = [];
-            if (this.props.data.SankeyChartData) {
-                this.props.data.SankeyChartData.links.forEach(function (singleLink, index) {
+            var sankeyChartData = this.props.data.SankeyChartData;
+            if (sankeyChartData) {
+                var linkId_1 = this._linkId;
+                sankeyChartData.links.forEach(function (singleLink, index) {
                     var onMouseOut = function () {
                         _this._onStreamLeave(singleLink);
                     };
@@ -283,10 +362,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         .y1(function (p) { return p.y1; })
                         .curve(d3_shape_1.curveBumpX);
-                    var gradientUrl = "url(#gradient-".concat(_this._linkId, "-").concat(index, ")");
-                    var link = (React.createElement("g", { key: "".concat(_this._linkId, "-").concat(index) },
+                    var gradientUrl = "url(#gradient-".concat(linkId_1, "-").concat(index, ")");
+                    var link = (React.createElement("g", { key: "".concat(linkId_1, "-").concat(index) },
                         React.createElement("defs", null,
-                            React.createElement("linearGradient", { id: "gradient-".concat(_this._linkId, "-").concat(index), x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                            React.createElement("linearGradient", { id: "gradient-".concat(linkId_1, "-").concat(index), x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
                                 React.createElement("stop", { offset: "0", stopColor: singleLink.source.color }),
                                 React.createElement("stop", { offset: "100%", stopColor: singleLink.target.color }))),
                         React.createElement("path", { d: linkArea(dataPoints), id: (0, Utilities_1.getId)('link'), fill: _this._fillStreamColors(singleLink, gradientUrl), stroke: _this._fillStreamBorder(singleLink, gradientUrl), strokeWidth: "2", strokeOpacity: _this._getOpacityStreamBorder(singleLink), onMouseOver: _this._onStreamHover.bind(_this, singleLink), onMouseOut: onMouseOut, onFocus: _this._onFocusLink.bind(_this, singleLink), onBlur: _this._onBlur, fillOpacity: _this._getOpacityStream(singleLink), "data-is-focusable": true, "aria-label": 'link from' +
@@ -300,12 +379,13 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             }
             return links;
         };
-        SankeyChartBase.prototype._createNodes = function (width) {
+        SankeyChartBase.prototype._createNodes = function (classNames) {
             var _this = this;
             var nodes = [];
-            if (this.props.data.SankeyChartData) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.props.data.SankeyChartData.nodes.forEach(function (singleNode, index) {
+            var sankeyChartData = this.props.data.SankeyChartData;
+            if (sankeyChartData) {
+                var state_1 = this.state;
+                sankeyChartData.nodes.forEach(function (singleNode, index) {
                     var onMouseOut = function () {
                         _this._onLeave(singleNode);
                     };
@@ -330,28 +410,21 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     var truncatedname = _this._truncateText(singleNode.name, 116, padding);
                     var isTruncated = truncatedname.slice(-3) === '...';
                     var id = (0, Utilities_1.getId)('tooltip');
-                    var div = (0, d3_selection_1.select)('body')
-                        .append('div')
-                        .attr('id', id)
-                        .attr('class', _this._classNames.toolTip)
-                        .style('opacity', 0);
+                    var div = (0, d3_selection_1.select)('body').append('div').attr('id', id).attr('class', classNames.toolTip).style('opacity', 0);
                     var nodeId = (0, Utilities_1.getId)('nodeBar');
+                    // TODO: Should the `aria-label` be localized?
                     var node = (React.createElement("g", { key: index, id: (0, Utilities_1.getId)('nodeGElement') },
                         React.createElement("rect", { x: singleNode.x0, y: singleNode.y0, height: height, width: singleNode.x1 - singleNode.x0, fill: _this._fillNodeColors(singleNode), id: nodeId, onMouseOver: _this._onHover.bind(_this, singleNode), onMouseOut: onMouseOut, onFocus: _this._onCloseCallout.bind(_this), stroke: _this._fillNodeBorder(singleNode), strokeWidth: "2", opacity: "1", "data-is-focusable": true, "aria-label": 'node' + "".concat(singleNode.name) + 'with weight' + "".concat(singleNode.actualValue), role: "img" }),
-                        singleNode.y1 - singleNode.y0 > MIN_HEIGHT_FOR_TYPE && (React.createElement("g", { className: _this._classNames.nodeTextContainer },
+                        singleNode.y1 - singleNode.y0 > MIN_HEIGHT_FOR_TYPE && (React.createElement("g", { className: classNames.nodeTextContainer },
                             React.createElement("g", { className: "nodeName" },
-                                React.createElement("text", { id: "".concat(nodeId, "-name"), x: singleNode.x0, y: singleNode.y0, dy: '1.2em', dx: '0.4em', textAnchor: _this._isRtl ? 'end' : 'start', fontWeight: "regular", "aria-hidden": "true", fill: !(!_this.state.selectedState ||
-                                        (_this.state.selectedState &&
-                                            _this.state.selectedNodes.has(singleNode.index) &&
-                                            _this.state.selectedNode) ||
-                                        (_this.state.selectedState && !_this.state.selectedNode))
+                                React.createElement("text", { id: "".concat(nodeId, "-name"), x: singleNode.x0, y: singleNode.y0, dy: '1.2em', dx: '0.4em', textAnchor: _this._isRtl ? 'end' : 'start', fontWeight: "regular", "aria-hidden": "true", fill: !(!state_1.selectedState ||
+                                        (state_1.selectedState && state_1.selectedNodes.has(singleNode.index) && state_1.selectedNode) ||
+                                        (state_1.selectedState && !state_1.selectedNode))
                                         ? DEFAULT_TEXT_COLOR
                                         : NON_SELECTED_TEXT_COLOR, fontSize: 10, onMouseOver: _this._showTooltip.bind(_this, singleNode.name, isTruncated, div), onMouseOut: _this._hideTooltip.bind(_this, div) }, truncatedname)),
-                            React.createElement("text", { x: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? singleNode.x0 : singleNode.x1 - textLengthForNodeWeight - 8, y: singleNode.y0, dy: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? '2em' : '1em', dx: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? '0.4em' : '0em', textAnchor: _this._isRtl ? 'end' : 'start', fontWeight: "bold", "aria-hidden": "true", fill: !(!_this.state.selectedState ||
-                                    (_this.state.selectedState &&
-                                        _this.state.selectedNodes.has(singleNode.index) &&
-                                        _this.state.selectedNode) ||
-                                    (_this.state.selectedState && !_this.state.selectedNode))
+                            React.createElement("text", { x: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? singleNode.x0 : singleNode.x1 - textLengthForNodeWeight - 8, y: singleNode.y0, dy: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? '2em' : '1em', dx: height > MIN_HEIGHT_FOR_DOUBLINE_TYPE ? '0.4em' : '0em', textAnchor: _this._isRtl ? 'end' : 'start', fontWeight: "bold", "aria-hidden": "true", fill: !(!state_1.selectedState ||
+                                    (state_1.selectedState && state_1.selectedNodes.has(singleNode.index) && state_1.selectedNode) ||
+                                    (state_1.selectedState && !state_1.selectedNode))
                                     ? DEFAULT_TEXT_COLOR
                                     : NON_SELECTED_TEXT_COLOR, fontSize: 14 }, singleNode.actualValue)))));
                     nodes.push(node);
@@ -359,7 +432,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 return nodes;
             }
         };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         SankeyChartBase.prototype._onLeave = function (singleNode) {
             if (this.state.selectedState) {
                 this.setState({
@@ -370,13 +442,12 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 });
             }
         };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         SankeyChartBase.prototype._onHover = function (singleNode, mouseEvent) {
             mouseEvent.persist();
             this._onCloseCallout();
             if (!this.state.selectedState) {
-                var selectedLinks = this._getSelectedLinks(singleNode);
-                var selectedNodes = this._getSelectedNodes(selectedLinks);
+                var selectedLinks = getSelectedLinks(singleNode);
+                var selectedNodes = getSelectedNodes(selectedLinks);
                 selectedNodes.push(singleNode);
                 this.setState({
                     selectedState: true,
@@ -392,12 +463,11 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 });
             }
         };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         SankeyChartBase.prototype._onStreamHover = function (singleLink, mouseEvent) {
             mouseEvent.persist();
             this._onCloseCallout();
             if (!this.state.selectedState) {
-                var _a = this._getSelectedLinksforStreamHover(singleLink), selectedLinks = _a.selectedLinks, selectedNodes = _a.selectedNodes;
+                var _a = getSelectedLinksforStreamHover(singleLink), selectedLinks = _a.selectedLinks, selectedNodes = _a.selectedNodes;
                 this.setState({
                     selectedState: true,
                     selectedNodes: new Set(Array.from(selectedNodes).map(function (node) { return node.index; })),
@@ -408,7 +478,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     color: singleLink.source.color,
                     xCalloutValue: singleLink.target.name,
                     yCalloutValue: singleLink.unnormalizedValue.toString(),
-                    descriptionMessage: 'from ' + singleLink.source.name,
+                    descriptionMessage: 'from ' + singleLink.source.name, // TODO: Does this need to be localized?
                 });
             }
         };
@@ -433,7 +503,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 xCalloutValue: singleLink.target.name,
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 yCalloutValue: singleLink.source.actualValue,
-                descriptionMessage: 'from ' + singleLink.source.name,
+                descriptionMessage: 'from ' + singleLink.source.name, // TODO: Does this need to be localized?
             });
         };
         /**
@@ -443,9 +513,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
         SankeyChartBase.prototype._assignNodeColors = function () {
             var colors;
             var borders;
-            if (this.props.colorsForNodes && this.props.borderColorsForNodes) {
-                colors = this.props.colorsForNodes;
-                borders = this.props.borderColorsForNodes;
+            var _a = this.props, colorsForNodes = _a.colorsForNodes, borderColorsForNodes = _a.borderColorsForNodes;
+            if (colorsForNodes && borderColorsForNodes) {
+                colors = colorsForNodes;
+                borders = borderColorsForNodes;
             }
             else {
                 colors = DEFAULT_NODE_COLORS.map(function (color) { return color.fillColor; });
@@ -466,126 +537,43 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 currentIndex = (currentIndex + 1) % colors.length;
             });
         };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         SankeyChartBase.prototype._fillStreamColors = function (singleLink, gradientUrl) {
-            if (this.state.selectedState && this.state.selectedLinks.has(singleLink.index) && this.state.selectedNode) {
-                return this.state.selectedNode.color;
+            var state = this.state;
+            if (state.selectedState && state.selectedLinks.has(singleLink.index) && state.selectedNode) {
+                return state.selectedNode.color;
             }
-            else if (this.state.selectedState && this.state.selectedLinks.has(singleLink.index)) {
+            else if (state.selectedState && state.selectedLinks.has(singleLink.index)) {
                 return gradientUrl;
             }
         };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         SankeyChartBase.prototype._fillStreamBorder = function (singleLink, gradientUrl) {
-            if (!this.state.selectedState) {
+            var state = this.state;
+            if (!state.selectedState) {
                 return NON_SELECTED_NODE_AND_STREAM_COLOR;
             }
-            else if (this.state.selectedState && this.state.selectedLinks.has(singleLink.index) && this.state.selectedNode) {
-                return this.state.selectedNode.borderColor;
+            else if (state.selectedState && state.selectedLinks.has(singleLink.index) && state.selectedNode) {
+                return state.selectedNode.borderColor;
             }
-            else if (this.state.selectedState && this.state.selectedLinks.has(singleLink.index)) {
+            else if (state.selectedState && state.selectedLinks.has(singleLink.index)) {
                 return gradientUrl;
             }
             return NON_SELECTED_NODE_AND_STREAM_COLOR;
         };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        SankeyChartBase.prototype._getSelectedNodes = function (selectedLinks) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var nodes = [];
-            selectedLinks.forEach(function (link) {
-                nodes.push(link.target);
-                if (nodes.indexOf(link.source) === -1) {
-                    nodes.push(link.source);
-                }
-            });
-            return nodes;
-        };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        SankeyChartBase.prototype._getSelectedLinks = function (singleNode) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-array-constructor
-            var q = new Array();
-            var finalLinks = new Set();
-            singleNode.sourceLinks.forEach(function (link) {
-                q.push(link);
-                finalLinks.add(link);
-            });
-            while (q.length > 0) {
-                var poppedLink = q.shift();
-                var node = poppedLink.target;
-                if (node && node.sourceLinks) {
-                    node.sourceLinks.forEach(function (link) {
-                        finalLinks.add(link);
-                        q.push(link);
-                    });
-                }
-            }
-            if (singleNode.targetLinks) {
-                singleNode.targetLinks.forEach(function (link) {
-                    q.push(link);
-                    finalLinks.add(link);
-                });
-            }
-            while (q.length > 0) {
-                var poppedLink = q.shift();
-                var node = poppedLink.source;
-                if (node && node.targetLinks) {
-                    node.targetLinks.forEach(function (link) {
-                        finalLinks.add(link);
-                        q.push(link);
-                    });
-                }
-            }
-            return finalLinks;
-        };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        SankeyChartBase.prototype._getSelectedLinksforStreamHover = function (singleLink) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-array-constructor
-            var q = new Array();
-            var finalLinks = new Set();
-            var finalNodes = new Set();
-            q.push(singleLink.source);
-            finalLinks.add(singleLink);
-            while (q.length > 0) {
-                var poppedNode = q.shift();
-                finalNodes.add(poppedNode);
-                if (poppedNode.targetLinks && poppedNode.targetLinks.length > 0) {
-                    poppedNode.targetLinks.forEach(function (link) {
-                        q.push(link.source);
-                        finalLinks.add(link);
-                    });
-                }
-            }
-            q.push(singleLink.target);
-            while (q.length > 0) {
-                var poppedNode = q.shift();
-                finalNodes.add(poppedNode);
-                if (poppedNode.sourceLinks && poppedNode.sourceLinks.length > 0) {
-                    poppedNode.sourceLinks.forEach(function (link) {
-                        q.push(link.target);
-                        finalLinks.add(link);
-                    });
-                }
-            }
-            return {
-                selectedLinks: finalLinks,
-                selectedNodes: finalNodes,
-            };
-        };
         SankeyChartBase.prototype._getOpacityStream = function (singleLink) {
-            if (this.state.selectedState) {
-                if (!this.state.selectedLinks.has(singleLink.index)) {
+            var state = this.state;
+            if (state.selectedState) {
+                if (!state.selectedLinks.has(singleLink.index)) {
                     return NON_SELECTED_OPACITY;
                 }
-                else if (this.state.selectedState &&
-                    this.state.selectedLinks.has(singleLink.index) &&
-                    !this.state.selectedNode) {
+                else if (state.selectedLinks.has(singleLink.index) && !state.selectedNode) {
                     return SELECTED_STREAM_OPACITY;
                 }
             }
             return REST_STREAM_OPACITY;
         };
         SankeyChartBase.prototype._getOpacityStreamBorder = function (singleLink) {
-            if (this.state.selectedState && !this.state.selectedLinks.has(singleLink.index) && !this.state.selectedNode) {
+            var state = this.state;
+            if (state.selectedState && !state.selectedLinks.has(singleLink.index) && !state.selectedNode) {
                 return NON_SELECTED_STREAM_BORDER_OPACITY;
             }
             return NON_SELECTED_OPACITY;
@@ -607,7 +595,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             });
         };
         /**
-         *
          * @param text is the text which we are trying to truncate
          * @param rectangleWidth is the width of the rectangle which will contain the text
          * @param padding is the space we need to leave between the rect lines and other text
@@ -666,10 +653,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             div.style('opacity', 0);
         };
         SankeyChartBase.prototype._isChartEmpty = function () {
-            return !(this.props.data &&
-                this.props.data.SankeyChartData &&
-                this.props.data.SankeyChartData.nodes.length > 0 &&
-                this.props.data.SankeyChartData.links.length > 0);
+            var _a;
+            var sankeyChartData = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.SankeyChartData;
+            return !(sankeyChartData && sankeyChartData.nodes.length > 0 && sankeyChartData.links.length > 0);
         };
         return SankeyChartBase;
     }(React.Component));