@fluentui/react-charting 5.14.42 → 5.15.0

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

@@ -1,16 +1,85 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "d3-sankey"], function (require, exports, tslib_1, React, Utilities_1, d3Sankey) {
+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, d3Sankey, d3_shape_1, d3_array_1, index_1, Callout_1, d3_selection_1, react_focus_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.SankeyChartBase = void 0;
     var getClassNames = Utilities_1.classNamesFunction();
+    var PADDING_PERCENTAGE = 0.3;
+    var NON_SELECTED_NODE_AND_STREAM_COLOR = '#757575';
+    var DEFAULT_NODE_COLORS = [
+        { fillColor: '#00758F', borderColor: '#002E39' },
+        { fillColor: '#77004D', borderColor: '#43002C' },
+        { fillColor: '#4F6BED', borderColor: '#3B52B4' },
+        { fillColor: '#937600', borderColor: '#6D5700' },
+        { fillColor: '#286EA8', borderColor: '#00457E' },
+        { fillColor: '#A43FB1', borderColor: '#7C158A' },
+        { fillColor: '#CC3595', borderColor: '#7F215D' },
+        { fillColor: '#0E7878', borderColor: '#004E4E' },
+        { fillColor: '#8764B8', borderColor: '#4B3867' },
+        { fillColor: '#9C663F', borderColor: '#6D4123' },
+    ];
+    var MIN_HEIGHT_FOR_DOUBLINE_TYPE = 36;
+    var MIN_HEIGHT_FOR_TYPE = 24;
+    var REST_STREAM_OPACITY = 1;
+    var NON_SELECTED_OPACITY = 1;
+    var SELECTED_STREAM_OPACITY = 0.3;
+    var NON_SELECTED_STREAM_BORDER_OPACITY = 0.5;
+    var DEFAULT_TEXT_COLOR = '#323130';
+    var NON_SELECTED_TEXT_COLOR = '#FFFFFF';
     var SankeyChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(SankeyChartBase, _super);
         function SankeyChartBase(props) {
             var _this = _super.call(this, props) || this;
+            _this._isRtl = Utilities_1.getRTL();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._onCloseCallout = function () {
+                _this.setState({
+                    isCalloutVisible: false,
+                    refSelected: undefined,
+                    descriptionMessage: '',
+                });
+            };
+            _this._onBlur = function () {
+                /**/
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._fillNodeColors = function (singleNode) {
+                if (!_this.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 (_this.state.selectedState && !_this.state.selectedNode) {
+                    return singleNode.color;
+                }
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._fillNodeBorder = function (singleNode) {
+                if (!_this.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 (_this.state.selectedState && _this.state.selectedNodes.has(singleNode.index)) {
+                    return singleNode.borderColor;
+                }
+                return singleNode.borderColor;
+            };
             _this.state = {
-                containerHeight: 0,
-                containerWidth: 0,
+                containerHeight: 468,
+                containerWidth: 912,
+                selectedState: false,
+                selectedLinks: new Set(),
+                selectedNodes: new Set(),
+                shouldOverflow: false,
+                isCalloutVisible: false,
             };
+            _this._calloutId = Utilities_1.getId('callout');
+            _this._linkId = Utilities_1.getId('link');
+            _this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
+            _this._preRenderLayout();
+            _this._normalizeData = Utilities_1.memoizeFunction(function (data) { return _this._normalizeSankeyData(data); });
             return _this;
         }
         SankeyChartBase.prototype.componentDidMount = function () {
@@ -34,58 +103,491 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 pathColor: pathColor,
                 className: className,
             });
-            var margin = { top: 10, right: 0, bottom: 10, left: 0 };
-            var width = this.state.containerWidth - margin.left - margin.right;
-            var height = this.state.containerHeight - margin.top - margin.bottom > 0
-                ? this.state.containerHeight - margin.top - margin.bottom
-                : 0;
-            var sankey = d3Sankey
+            // 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 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._assignNodeColors();
+            var nodeData = this._createNodes(width);
+            var linkData = this._createLinks();
+            var calloutProps = {
+                isCalloutVisible: this.state.isCalloutVisible,
+                directionalHint: Callout_1.DirectionalHint.topAutoEdge,
+                id: "toolTip" + 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,
+                isBeakVisible: false,
+                gapSpace: 15,
+                onDismiss: this._onCloseCallout,
+                className: this._classNames.calloutContentRoot,
+                preventDismissOnLostFocus: true,
+            };
+            return (React.createElement("div", { className: this._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: Utilities_1.getId('sankeyChart') },
+                        React.createElement("g", { className: this._classNames.links, strokeOpacity: 1 }, linkData),
+                        React.createElement("g", { className: this._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 : '' })))))));
+        };
+        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;
+            this._sankey = d3Sankey
                 .sankey()
-                .nodeWidth(5)
-                .nodePadding(6)
+                .nodeWidth(124)
                 .extent([
-                [1, 1],
+                [this._margins.left, this._margins.top],
                 [width - 1, height - 6],
-            ]);
-            sankey(this.props.data.SankeyChartData);
-            var nodeData = this._createNodes(width);
-            var linkData = this._createLinks();
-            return (React.createElement("div", { className: this._classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); } },
-                React.createElement("svg", { width: width, height: height, id: Utilities_1.getId('sankeyChart') },
-                    React.createElement("g", { className: this._classNames.nodes }, nodeData),
-                    React.createElement("g", { className: this._classNames.links, strokeOpacity: 0.2 }, linkData))));
+            ])
+                .nodeAlign(this._isRtl ? d3Sankey.sankeyRight : d3Sankey.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(d3_array_1.sum(node.sourceLinks, function (link) { return link.unnormalizedValue; }), 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);
+        };
+        /**
+         *
+         * 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 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.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        SankeyChartBase.prototype._adjustPadding = function (sankey, height, nodesInColumn) {
+            var padding = this._sankey.nodePadding();
+            Object.values(nodesInColumn).forEach(function (column) {
+                var minPadding = PADDING_PERCENTAGE * height;
+                var toatlPaddingInColumn = height - d3_array_1.sum(column, function (node) { return node.y1 - node.y0; });
+                if (minPadding < toatlPaddingInColumn) {
+                    //Here we are calculating the min of default and calculated padding, we will not increase the padding
+                    //in any scenario.
+                    padding = Math.min(padding, minPadding / (column.length - 1));
+                }
+            });
+            return padding;
         };
         SankeyChartBase.prototype._createLinks = function () {
+            var _this = this;
             var links = [];
             if (this.props.data.SankeyChartData) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.props.data.SankeyChartData.links.forEach(function (singleLink, index) {
-                    var path = d3Sankey.sankeyLinkHorizontal();
-                    var pathValue = path(singleLink);
-                    var link = (React.createElement("path", { key: index, d: pathValue ? pathValue : undefined, strokeWidth: Math.max(1, singleLink.width), id: Utilities_1.getId('link') },
-                        React.createElement("title", null,
-                            React.createElement("text", null, singleLink.source.name + ' → ' + singleLink.target.name + '\n' + singleLink.value))));
+                    var onMouseOut = function () {
+                        _this._onStreamLeave(singleLink);
+                    };
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var data = function (d) {
+                        return [
+                            { x: d.source.x1, y0: d.y0 + d.width / 2, y1: d.y0 - d.width / 2 },
+                            { x: d.target.x0, y0: d.y1 + d.width / 2, y1: d.y1 - d.width / 2 },
+                        ];
+                    };
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var dataPoints = data(singleLink);
+                    var linkArea = d3_shape_1.area()
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        .x(function (p) { return p.x; })
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        .y0(function (p) { return p.y0; })
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        .y1(function (p) { return p.y1; })
+                        .curve(d3_shape_1.curveBumpX);
+                    var gradientUrl = "url(#gradient-" + _this._linkId + "-" + index + ")";
+                    var link = (React.createElement("g", { key: _this._linkId + "-" + index },
+                        React.createElement("defs", null,
+                            React.createElement("linearGradient", { id: "gradient-" + _this._linkId + "-" + 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: 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' +
+                                singleLink.source.name +
+                                'to' +
+                                singleLink.target.name +
+                                'with weight' +
+                                singleLink.unnormalizedValue, role: "img" })));
                     links.push(link);
                 });
             }
             return links;
         };
         SankeyChartBase.prototype._createNodes = function (width) {
+            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 onMouseOut = function () {
+                        _this._onLeave(singleNode);
+                    };
                     var height = singleNode.y1 - singleNode.y0 > 0 ? singleNode.y1 - singleNode.y0 : 0;
-                    var node = (React.createElement("g", { id: Utilities_1.getId('nodeGElement'), key: index },
-                        React.createElement("rect", { x: singleNode.x0, y: singleNode.y0, height: height, width: singleNode.x1 - singleNode.x0, fill: singleNode.color, id: Utilities_1.getId('nodeBar') }),
-                        React.createElement("text", { x: singleNode.x0 < width / 2 ? singleNode.x1 + 6 : singleNode.x0 - 6, y: (singleNode.y1 + singleNode.y0) / 2, dy: '0.35em', textAnchor: singleNode.x0 < width / 2 ? 'start' : 'end' }, singleNode.name),
-                        React.createElement("title", null,
-                            React.createElement("text", null, singleNode.name + '\n' + singleNode.value))));
+                    var padding = 8;
+                    var textLengthForNodeWeight = 0;
+                    // If the nodeWeight is in the same line as node description an extra padding
+                    // of 6 px is required between node description and node weight.
+                    if (height < MIN_HEIGHT_FOR_DOUBLINE_TYPE) {
+                        padding = padding + 6;
+                        var tspan = d3_selection_1.select('.nodeName').append('text').attr('class', 'tempText').append('tspan').text(null);
+                        tspan.text(singleNode.actualValue);
+                        if (tspan.node() !== null) {
+                            textLengthForNodeWeight = tspan.node().getComputedTextLength();
+                            padding = padding + textLengthForNodeWeight;
+                        }
+                        tspan.text(null);
+                        d3_selection_1.selectAll('.tempText').remove();
+                    }
+                    // Since the total width of the node is 124 and we are giving margin of 8px from the left .
+                    //So the actual value on which it will be truncated is 124-8=116.
+                    var truncatedname = _this._truncateText(singleNode.name, 116, padding);
+                    var isTruncated = truncatedname.slice(-3) === '...';
+                    var id = Utilities_1.getId('tooltip');
+                    var div = d3_selection_1.select('body')
+                        .append('div')
+                        .attr('id', id)
+                        .attr('class', _this._classNames.toolTip)
+                        .style('opacity', 0);
+                    var nodeId = Utilities_1.getId('nodeBar');
+                    var node = (React.createElement("g", { key: index, id: 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' + ("" + singleNode.name) + 'with weight' + ("" + singleNode.actualValue), role: "img" }),
+                        singleNode.y1 - singleNode.y0 > MIN_HEIGHT_FOR_TYPE && (React.createElement("g", { className: _this._classNames.nodeTextContainer },
+                            React.createElement("g", { className: "nodeName" },
+                                React.createElement("text", { id: 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))
+                                        ? 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))
+                                    ? DEFAULT_TEXT_COLOR
+                                    : NON_SELECTED_TEXT_COLOR, fontSize: 14 }, singleNode.actualValue)))));
                     nodes.push(node);
                 });
                 return nodes;
             }
         };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        SankeyChartBase.prototype._onLeave = function (singleNode) {
+            if (this.state.selectedState) {
+                this.setState({
+                    selectedState: false,
+                    selectedNodes: new Set(),
+                    selectedLinks: new Set(),
+                    selectedNode: undefined,
+                });
+            }
+        };
+        // 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);
+                selectedNodes.push(singleNode);
+                this.setState({
+                    selectedState: true,
+                    selectedNodes: new Set(Array.from(selectedNodes).map(function (node) { return node.index; })),
+                    selectedLinks: new Set(Array.from(selectedLinks).map(function (link) { return link.index; })),
+                    selectedNode: singleNode,
+                    refSelected: mouseEvent,
+                    isCalloutVisible: singleNode.y1 - singleNode.y0 < MIN_HEIGHT_FOR_TYPE,
+                    color: singleNode.color,
+                    xCalloutValue: singleNode.name,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    yCalloutValue: singleNode.actualValue,
+                });
+            }
+        };
+        // 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;
+                this.setState({
+                    selectedState: true,
+                    selectedNodes: new Set(Array.from(selectedNodes).map(function (node) { return node.index; })),
+                    selectedLinks: new Set(Array.from(selectedLinks).map(function (link) { return link.index; })),
+                    refSelected: mouseEvent,
+                    selectedLink: singleLink,
+                    isCalloutVisible: true,
+                    color: singleLink.source.color,
+                    xCalloutValue: singleLink.target.name,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    yCalloutValue: singleLink.source.actualValue,
+                    descriptionMessage: 'from ' + singleLink.source.name,
+                });
+            }
+        };
+        SankeyChartBase.prototype._onStreamLeave = function (singleLink) {
+            if (this.state.selectedState) {
+                this.setState({
+                    selectedState: false,
+                    selectedNodes: new Set(),
+                    selectedLinks: new Set(),
+                    selectedLink: undefined,
+                });
+            }
+        };
+        SankeyChartBase.prototype._onFocusLink = function (singleLink, element) {
+            element.persist();
+            this._onCloseCallout();
+            this.setState({
+                refSelected: element.currentTarget,
+                selectedLink: singleLink,
+                isCalloutVisible: true,
+                color: singleLink.source.color,
+                xCalloutValue: singleLink.target.name,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                yCalloutValue: singleLink.source.actualValue,
+                descriptionMessage: 'from ' + singleLink.source.name,
+            });
+        };
+        /**
+         * This is used to assign node fillcolors and borderColor cyclically when the user doesnt
+         * provide color to  individual node.
+         */
+        SankeyChartBase.prototype._assignNodeColors = function () {
+            var colors;
+            var borders;
+            if (this.props.colorsForNodes && this.props.borderColorsForNodes) {
+                colors = this.props.colorsForNodes;
+                borders = this.props.borderColorsForNodes;
+            }
+            else {
+                colors = DEFAULT_NODE_COLORS.map(function (color) { return color.fillColor; });
+                borders = DEFAULT_NODE_COLORS.map(function (color) { return color.borderColor; });
+            }
+            var currentIndex = 0;
+            this.props.data.SankeyChartData.nodes.forEach(function (node) {
+                if (!node.color && !node.borderColor) {
+                    node.color = colors[currentIndex];
+                    node.borderColor = borders[currentIndex];
+                }
+                else if (node.color && !node.borderColor) {
+                    node.borderColor = '#757575';
+                }
+                else if (node.borderColor && !node.color) {
+                    node.color = '#F5F5F5';
+                }
+                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;
+            }
+            else if (this.state.selectedState && this.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) {
+                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 (this.state.selectedState && this.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)) {
+                    return NON_SELECTED_OPACITY;
+                }
+                else if (this.state.selectedState &&
+                    this.state.selectedLinks.has(singleLink.index) &&
+                    !this.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) {
+                return NON_SELECTED_STREAM_BORDER_OPACITY;
+            }
+            return NON_SELECTED_OPACITY;
+        };
         SankeyChartBase.prototype._fitParentContainer = function () {
             var _this = this;
             var _a = this.state, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight;
@@ -102,6 +604,65 @@ 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
+         * @param nodeWeight is the text if present needs to be accomodate in the same line as text.
+         * @returns the truncated text , if truncated given the above parameters.
+         */
+        SankeyChartBase.prototype._truncateText = function (text, rectangleWidth, padding) {
+            var textLengthForNodeName = rectangleWidth - padding;
+            var elipsisLength = 0;
+            var tspan = d3_selection_1.select('.nodeName')
+                .append('text')
+                .attr('class', 'tempText')
+                .attr('font-size', '10')
+                .append('tspan')
+                .text(null);
+            tspan.text(text);
+            if (tspan.node() !== null && tspan.node().getComputedTextLength() <= textLengthForNodeName) {
+                return text;
+            }
+            tspan.text(null);
+            tspan.text('...');
+            if (tspan.node() !== null) {
+                elipsisLength = tspan.node().getComputedTextLength();
+            }
+            tspan.text(null);
+            var line = '';
+            for (var i = 0; i < text.length; i++) {
+                line += text[i];
+                tspan.text(line);
+                if (tspan.node() !== null) {
+                    var w = tspan.node().getComputedTextLength();
+                    if (w >= textLengthForNodeName - elipsisLength) {
+                        line = line.slice(0, -1);
+                        line += '...';
+                        break;
+                    }
+                }
+            }
+            tspan.text(null);
+            d3_selection_1.selectAll('.tempText').remove();
+            return line;
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        SankeyChartBase.prototype._showTooltip = function (text, checkTrcuncated, div, evt) {
+            if (checkTrcuncated) {
+                //Fixing tooltip position by attaching it to the element rather than page
+                div.style('opacity', 0.9);
+                div
+                    .html(text)
+                    .style('left', evt.pageX + 'px')
+                    .style('top', evt.pageY - 28 + 'px');
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        SankeyChartBase.prototype._hideTooltip = function (div) {
+            div.style('opacity', 0);
+        };
         return SankeyChartBase;
     }(React.Component));
     exports.SankeyChartBase = SankeyChartBase;