@fluentui/react-charting 5.19.23 → 5.19.24

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SankeyChartBase = void 0;
+exports.SankeyChartBase = exports.preRenderLayout = exports.adjustPadding = exports.groupNodesByColumn = void 0;
 var tslib_1 = require("tslib");
 var react_focus_1 = require("@fluentui/react-focus");
 var Callout_1 = require("@fluentui/react/lib/Callout");
@@ -10,7 +10,7 @@ var d3_sankey_1 = require("d3-sankey");
 var d3_selection_1 = require("d3-selection");
 var d3_shape_1 = require("d3-shape");
 var React = require("react");
-var index_1 = require("../../index");
+var ChartHoverCard_1 = require("../../utilities/ChartHoverCard/ChartHoverCard");
 var getClassNames = (0, Utilities_1.classNamesFunction)();
 var PADDING_PERCENTAGE = 0.3;
 var NON_SELECTED_NODE_AND_STREAM_COLOR = '#757575';
@@ -117,8 +117,8 @@ function getSelectedLinksforStreamHover(singleLink) {
 /**
  * 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;
@@ -131,21 +131,25 @@ function populateNodeInColumns(graph, sankey) {
     });
     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 {
@@ -155,41 +159,120 @@ function adjustOnePercentHeightNodes(nodesInColumn) {
         //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) {
@@ -242,8 +325,9 @@ var SankeyChartBase = /** @class */ (function (_super) {
         _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;
     }
@@ -270,18 +354,13 @@ var SankeyChartBase = /** @class */ (function (_super) {
                 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,
@@ -303,54 +382,43 @@ var SankeyChartBase = /** @class */ (function (_super) {
                         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);
                 };
@@ -383,13 +451,12 @@ var SankeyChartBase = /** @class */ (function (_super) {
         }
         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);
                 };
@@ -513,7 +580,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
      * 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;
@@ -526,7 +593,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
             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];
@@ -585,6 +652,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
         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;