@fluentui/react-charting 5.19.23 → 5.19.24

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

@@ -1,7 +1,7 @@
-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) {
+define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react/lib/Callout", "@fluentui/react/lib/Utilities", "d3-array", "d3-sankey", "d3-selection", "d3-shape", "react", "../../utilities/ChartHoverCard/ChartHoverCard"], 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, ChartHoverCard_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.SankeyChartBase = void 0;
+    exports.SankeyChartBase = exports.preRenderLayout = exports.adjustPadding = exports.groupNodesByColumn = void 0;
     var getClassNames = (0, Utilities_1.classNamesFunction)();
     var PADDING_PERCENTAGE = 0.3;
     var NON_SELECTED_NODE_AND_STREAM_COLOR = '#757575';
@@ -108,8 +108,8 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
     /**
      * This is used to group nodes by column index.
      */
-    function populateNodeInColumns(graph, sankey) {
-        sankey(graph);
+    // This is exported for unit tests.
+    function groupNodesByColumn(graph) {
         var nodesInColumn = {};
         graph.nodes.forEach(function (node) {
             var columnId = node.layer;
@@ -122,21 +122,25 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
         });
         return nodesInColumn;
     }
+    exports.groupNodesByColumn = groupNodesByColumn;
     /**
      * This is used to normalize the nodes value whose value is less than 1% of the total column value.
      */
-    function adjustOnePercentHeightNodes(nodesInColumn) {
+    function adjustOnePercentHeightNodes(nodesInColumn, computedNodes, originalLinks) {
         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;
+            var onePercent = 0.01 * columnValue;
+            var columnNodes = nodesInColumn[index];
+            columnNodes.forEach(function (node) {
+                var value = computedNodes[node.nodeId];
+                var nodePercentage = (value / columnValue) * 100;
+                node.actualValue = 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;
+                    node.value = onePercent;
                     totalPercentage = totalPercentage + 1;
                 }
                 else {
@@ -146,41 +150,120 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             //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);
+                // Loop through each node in that column and scale that node--and its incoming and outgoing links--by the
+                // scaling ratio. We need the sankey diagram to re-layout the nodes and links after we do this.
+                columnNodes.forEach(function (node) {
+                    var normalized = (node.value = node.value / scalingRatio);
+                    // Which Original Value? and Which Normalized Value is needed, here? The Node? The Link? Both?
+                    changeColumnValue(node, computedNodes[node.nodeId], normalized, originalLinks);
                 });
             }
         });
     }
     /**
-     * This is used for normalizing each links value for reflecting the normalized node value.
+     * This is used for normalizing each link's value to reflect 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;
-        });
+    function changeColumnValue(node, originalNodeValue, normalizedNodeValue, linkValues) {
+        // For each link in the source and target, compute the proportion that this link contributes to the total
+        // then adjust the link's value to reflect its proportion of the normalized node value.
+        var updateLinkValue = function (link) {
+            var value = linkValue(linkValues, link);
+            link.unnormalizedValue = value;
+            var linkRatio = value / originalNodeValue;
+            link.value = Math.max(normalizedNodeValue * linkRatio, link.value);
+        };
+        node.sourceLinks.forEach(updateLinkValue);
+        node.targetLinks.forEach(updateLinkValue);
     }
     /**
      * This is used for calculating the node non normalized value based on link non normalized value.
+     * The links have the original weights. Computed nodes have the total weight of all incoming and outgoing links.
      */
-    function populateNodeActualValue(data) {
+    function populateNodeActualValue(data, computedNodes, originalLinks) {
         data.links.forEach(function (link) {
             if (!link.unnormalizedValue) {
-                link.unnormalizedValue = link.value;
+                link.unnormalizedValue = linkValue(originalLinks, link);
             }
         });
         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; }));
+            node.actualValue = computedNodes[node.nodeId];
+        });
+    }
+    /**
+     * 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.
+     */
+    // This is exported for unit tests
+    function adjustPadding(sankey, height, nodesInColumn) {
+        var padding = sankey.nodePadding();
+        var minPadding = PADDING_PERCENTAGE * height;
+        Object.values(nodesInColumn).forEach(function (column) {
+            var totalPaddingInColumn = height - (0, d3_array_1.sum)(column, function (node) { return node.y1 - node.y0; });
+            if (minPadding < totalPaddingInColumn) {
+                // 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));
+            }
         });
+        sankey.nodePadding(padding);
     }
+    exports.adjustPadding = adjustPadding;
+    function idFromNumberOrSNode(node) {
+        if (typeof node === 'number') {
+            return node;
+        }
+        return node.nodeId;
+    }
+    /**
+     * Duplicates the supplied chart data so that we do not alter the original.
+     * @param data The data to duplicate.
+     * @returns The duplicated data.
+     */
+    function duplicateData(data) {
+        return {
+            nodes: data.nodes.map(function (node) { return (tslib_1.__assign({}, node)); }),
+            links: data.links.map(function (link) { return (tslib_1.__assign({}, link)); }),
+        };
+    }
+    function valuesOfNodes(nodes) {
+        var result = {};
+        nodes.forEach(function (node) {
+            result[node.nodeId] = node.value;
+        });
+        return result;
+    }
+    function valuesOfLinks(links) {
+        var result = {};
+        links.forEach(function (link) {
+            var sourceId = idFromNumberOrSNode(link.source);
+            var sourceToTarget = result[sourceId];
+            if (!sourceToTarget) {
+                sourceToTarget = {};
+                result[sourceId] = sourceToTarget;
+            }
+            sourceToTarget[idFromNumberOrSNode(link.target)] = link.value;
+        });
+        return result;
+    }
+    function linkValue(originalLinks, link) {
+        return originalLinks[idFromNumberOrSNode(link.source)][idFromNumberOrSNode(link.target)];
+    }
+    // This is exported for unit tests.
+    function preRenderLayout(margins, containerWidth, containerHeight, isRtl) {
+        var left = margins.left, right = margins.right, top = margins.top, bottom = margins.bottom;
+        var width = containerWidth - right;
+        var height = containerHeight - bottom > 0 ? containerHeight - bottom : 0;
+        var sankey = (0, d3_sankey_1.sankey)()
+            .nodeWidth(124)
+            .extent([
+            [left, top],
+            [width - 1, height - 6],
+        ])
+            .nodeAlign(isRtl ? d3_sankey_1.sankeyRight : d3_sankey_1.sankeyJustify);
+        return { sankey: sankey, height: height, width: width };
+    }
+    exports.preRenderLayout = preRenderLayout;
     var SankeyChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(SankeyChartBase, _super);
         function SankeyChartBase(props) {
@@ -233,8 +316,9 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             _this._calloutId = (0, Utilities_1.getId)('callout');
             _this._linkId = (0, Utilities_1.getId)('link');
             _this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
-            _this._preRenderLayout();
-            _this._normalizeData = (0, Utilities_1.memoizeFunction)(function (data) { return _this._normalizeSankeyData(data); });
+            _this._normalizeData = (0, Utilities_1.memoizeFunction)(function (data, containerWidth, containerHeight) {
+                return _this._normalizeSankeyData(data, containerWidth, containerHeight);
+            });
             _this._emptyChartId = (0, Utilities_1.getId)('_SankeyChart_empty');
             return _this;
         }
@@ -261,18 +345,13 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                     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;
-                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(sankeyChartData);
-                populateNodeActualValue(sankeyChartData);
-                this._assignNodeColors();
-                var nodeData = this._createNodes(classNames);
-                var linkData = this._createLinks();
+                var _b = this._normalizeData(this.props.data.SankeyChartData, state.containerWidth, state.containerHeight), sankeyChartData = _b.data, width = _b.width, height = _b.height;
+                // NEXT: Move the following into _normalizeSankeyData to see if we can cache computation of
+                // colors, nodes, and links.
+                var dataNodes = sankeyChartData.nodes;
+                this._assignNodeColors(dataNodes); // This can probably safely move.
+                var nodeData = this._createNodes(classNames, dataNodes);
+                var linkData = this._createLinks(sankeyChartData.links);
                 var calloutProps = {
                     isCalloutVisible: state.isCalloutVisible,
                     directionalHint: Callout_1.DirectionalHint.topAutoEdge,
@@ -294,54 +373,43 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                             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 : '' })))))));
+                                React.createElement(ChartHoverCard_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 _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([
-                [left, top],
-                [width - 1, height - 6],
-            ])
-                .nodeAlign(this._isRtl ? d3_sankey_1.sankeyRight : d3_sankey_1.sankeyJustify);
-            return { height: height, width: width };
-        };
-        SankeyChartBase.prototype._normalizeSankeyData = function (data) {
-            var nodesInColumn = (this._nodesInColumn = populateNodeInColumns(data, this._sankey));
-            adjustOnePercentHeightNodes(nodesInColumn);
-        };
-        /**
-         * 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 - (0, 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._normalizeSankeyData = function (data, containerWidth, containerHeight) {
+            var _a = preRenderLayout(this._margins, containerWidth, containerHeight, this._isRtl), sankey = _a.sankey, height = _a.height, width = _a.width;
+            // Clone the data before mutating it (via the SankeyLayoutGenerator) so that we don't mutate the original data.
+            var transformed = duplicateData(data);
+            sankey(transformed);
+            var nodesInColumn = groupNodesByColumn(transformed);
+            // Keep track of the original values of the links and their acccumulated values in the nodes
+            // Setting these in external objects so they cannot be mutated by other code.
+            // The IDs of nodes can be numbers or strings. But, the IDs of links are always the index into the "nodes" array.
+            // After the sankey layout is computed, the each link's `source` and `target` will have the ID of the node in the
+            // type originally specified in the Nodes array. Consequently, we get the values of those links after the sankey
+            // transformation.
+            var nodeValues = valuesOfNodes(transformed.nodes);
+            var linkValues = valuesOfLinks(transformed.links);
+            adjustOnePercentHeightNodes(nodesInColumn, nodeValues, linkValues);
+            adjustPadding(sankey, height - 6, nodesInColumn);
+            // `sankey` is called a second time, probably to re-layout the nodes with the one-percent adjusted weights.
+            // NOTE: The second call to `sankey` is required to allow links to be hoverable.
+            // Without the second call, the links are not hoverable.
+            sankey(transformed);
+            populateNodeActualValue(transformed, nodeValues, linkValues);
+            return {
+                width: width,
+                height: height,
+                data: transformed,
+            };
         };
-        SankeyChartBase.prototype._createLinks = function () {
+        SankeyChartBase.prototype._createLinks = function (dataLinks) {
             var _this = this;
             var links = [];
-            var sankeyChartData = this.props.data.SankeyChartData;
-            if (sankeyChartData) {
+            if (dataLinks) {
                 var linkId_1 = this._linkId;
-                sankeyChartData.links.forEach(function (singleLink, index) {
+                dataLinks.forEach(function (singleLink, index) {
                     var onMouseOut = function () {
                         _this._onStreamLeave(singleLink);
                     };
@@ -374,13 +442,12 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             }
             return links;
         };
-        SankeyChartBase.prototype._createNodes = function (classNames) {
+        SankeyChartBase.prototype._createNodes = function (classNames, dataNodes) {
             var _this = this;
             var nodes = [];
-            var sankeyChartData = this.props.data.SankeyChartData;
-            if (sankeyChartData) {
+            if (dataNodes) {
                 var state_1 = this.state;
-                sankeyChartData.nodes.forEach(function (singleNode, index) {
+                dataNodes.forEach(function (singleNode, index) {
                     var onMouseOut = function () {
                         _this._onLeave(singleNode);
                     };
@@ -504,7 +571,7 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
          * This is used to assign node fillcolors and borderColor cyclically when the user doesnt
          * provide color to  individual node.
          */
-        SankeyChartBase.prototype._assignNodeColors = function () {
+        SankeyChartBase.prototype._assignNodeColors = function (nodes) {
             var colors;
             var borders;
             var _a = this.props, colorsForNodes = _a.colorsForNodes, borderColorsForNodes = _a.borderColorsForNodes;
@@ -517,7 +584,7 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                 borders = DEFAULT_NODE_COLORS.map(function (color) { return color.borderColor; });
             }
             var currentIndex = 0;
-            this.props.data.SankeyChartData.nodes.forEach(function (node) {
+            nodes.forEach(function (node) {
                 if (!node.color && !node.borderColor) {
                     node.color = colors[currentIndex];
                     node.borderColor = borders[currentIndex];
@@ -576,6 +643,7 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             var _this = this;
             var _a = this.state, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight;
             this._reqID = requestAnimationFrame(function () {
+                // NOTE: Calls to this method trigger a re-render.
                 var container = _this.props.parentRef ? _this.props.parentRef : _this.chartContainer;
                 var currentContainerWidth = container && container.getBoundingClientRect().width;
                 var currentContainerHeight = container && container.getBoundingClientRect().height;