@fluentui/react-charting 5.16.21 → 5.16.23

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

@@ -1,674 +0,0 @@
-import { __assign, __extends } from "tslib";
-import * as React from 'react';
-import { classNamesFunction, getId, getRTL, memoizeFunction } from '@fluentui/react/lib/Utilities';
-import * as d3Sankey from 'd3-sankey';
-import { area as d3Area, curveBumpX as d3CurveBasis } from 'd3-shape';
-import { sum as d3Sum } from 'd3-array';
-import { ChartHoverCard } from '../../index';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
-import { select, selectAll } from 'd3-selection';
-import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
-var getClassNames = 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) {
-    __extends(SankeyChartBase, _super);
-    function SankeyChartBase(props) {
-        var _this = _super.call(this, props) || this;
-        _this._isRtl = 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: 468,
-            containerWidth: 912,
-            selectedState: false,
-            selectedLinks: new Set(),
-            selectedNodes: new Set(),
-            shouldOverflow: false,
-            isCalloutVisible: false,
-        };
-        _this._calloutId = getId('callout');
-        _this._linkId = getId('link');
-        _this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
-        _this._preRenderLayout();
-        _this._normalizeData = memoizeFunction(function (data) { return _this._normalizeSankeyData(data); });
-        return _this;
-    }
-    SankeyChartBase.prototype.componentDidMount = function () {
-        this._fitParentContainer();
-    };
-    SankeyChartBase.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps.shouldResize !== this.props.shouldResize) {
-            this._fitParentContainer();
-        }
-    };
-    SankeyChartBase.prototype.componentWillUnmount = function () {
-        cancelAnimationFrame(this._reqID);
-    };
-    SankeyChartBase.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles, pathColor = _a.pathColor;
-        this._classNames = getClassNames(styles, {
-            theme: theme,
-            width: this.state.containerWidth,
-            height: this.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 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: 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(FocusZone, { direction: FocusZoneDirection.bidirectional, isCircularNavigation: true, handleTabKey: FocusZoneTabbableElements.all },
-                React.createElement("svg", { width: width, height: height, id: 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, __assign({}, calloutProps),
-                        React.createElement(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(124)
-            .extent([
-            [this._margins.left, this._margins.top],
-            [width - 1, height - 6],
-        ])
-            .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(d3Sum(node.sourceLinks, function (link) { return link.unnormalizedValue; }), d3Sum(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 d3Sum(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 - d3Sum(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) {
-            this.props.data.SankeyChartData.links.forEach(function (singleLink, index) {
-                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 = d3Area()
-                    // 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(d3CurveBasis);
-                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: 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 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 = 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);
-                    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 = getId('tooltip');
-                var div = select('body')
-                    .append('div')
-                    .attr('id', id)
-                    .attr('class', _this._classNames.toolTip)
-                    .style('opacity', 0);
-                var nodeId = getId('nodeBar');
-                var node = (React.createElement("g", { key: index, id: 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,
-                yCalloutValue: singleLink.unnormalizedValue.toString(),
-                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;
-        this._reqID = requestAnimationFrame(function () {
-            var container = _this.props.parentRef ? _this.props.parentRef : _this.chartContainer;
-            var currentContainerWidth = container.getBoundingClientRect().width;
-            var currentContainerHeight = container.getBoundingClientRect().height;
-            var shouldResize = containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight;
-            if (shouldResize) {
-                _this.setState({
-                    containerWidth: currentContainerWidth,
-                    containerHeight: currentContainerHeight,
-                });
-            }
-        });
-    };
-    /**
-     *
-     * @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 = 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);
-        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));
-export { SankeyChartBase };
-//# sourceMappingURL=SankeyChart.base.js.map