@fluentui/react-charting 5.19.22 → 5.19.24

package/lib/components/SankeyChart/SankeyChart.base.d.ts

@@ -1,6 +1,13 @@
+import { SankeyGraph, SankeyLayout } from 'd3-sankey';
 import * as React from 'react';
-import { IBasestate, IChartHoverCardProps, SLink, SNode } from '../../index';
-import { ISankeyChartProps } from './SankeyChart.types';
+import { IBasestate, SLink, SNode } from '../../types/IDataPoint';
+import { IChartHoverCardProps } from '../../utilities/ChartHoverCard/ChartHoverCard.types';
+import { IMargins } from '../../utilities/utilities';
+import { ISankeyChartData, ISankeyChartProps } from './SankeyChart.types';
+declare type NodesInColumns = {
+    [key: number]: SNode[];
+};
+declare type SankeyLayoutGenerator = SankeyLayout<SankeyGraph<{}, {}>, {}, {}>;
 export interface ISankeyChartState extends IBasestate, IChartHoverCardProps {
     containerWidth: number;
     containerHeight: number;
@@ -12,13 +19,26 @@ export interface ISankeyChartState extends IBasestate, IChartHoverCardProps {
     selectedLink?: SLink;
     shouldOverflow: boolean;
 }
+/**
+ * This is used to group nodes by column index.
+ */
+export declare function groupNodesByColumn(graph: ISankeyChartData): NodesInColumns;
+/**
+ * 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.
+ */
+export declare function adjustPadding(sankey: SankeyLayoutGenerator, height: number, nodesInColumn: NodesInColumns): void;
+export declare function preRenderLayout(margins: IMargins, containerWidth: number, containerHeight: number, isRtl: boolean): {
+    sankey: SankeyLayoutGenerator;
+    height: number;
+    width: number;
+};
 export declare class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyChartState> {
     private chartContainer;
     private _reqID;
     private _calloutId;
     private _linkId;
-    private _nodesInColumn;
-    private _sankey;
     private _margins;
     private _isRtl;
     private _normalizeData;
@@ -28,14 +48,7 @@ export declare class SankeyChartBase extends React.Component<ISankeyChartProps,
     componentDidUpdate(prevProps: ISankeyChartProps): void;
     componentWillUnmount(): void;
     render(): React.ReactNode;
-    private _preRenderLayout;
     private _normalizeSankeyData;
-    /**
-     * 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.
-     */
-    private _adjustPadding;
     private _createLinks;
     private _createNodes;
     private _onLeave;
@@ -69,3 +82,4 @@ export declare class SankeyChartBase extends React.Component<ISankeyChartProps,
     private _hideTooltip;
     private _isChartEmpty;
 }
+export {};

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

@@ -7,7 +7,7 @@ import { sankey as d3Sankey, sankeyJustify, sankeyRight } from 'd3-sankey';
 import { select, selectAll } from 'd3-selection';
 import { area as d3Area, curveBumpX as d3CurveBasis } from 'd3-shape';
 import * as React from 'react';
-import { ChartHoverCard } from '../../index';
+import { ChartHoverCard } from '../../utilities/ChartHoverCard/ChartHoverCard';
 var getClassNames = classNamesFunction();
 var PADDING_PERCENTAGE = 0.3;
 var NON_SELECTED_NODE_AND_STREAM_COLOR = '#757575';
@@ -114,8 +114,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.
+export function groupNodesByColumn(graph) {
     var nodesInColumn = {};
     graph.nodes.forEach(function (node) {
         var columnId = node.layer;
@@ -131,18 +131,21 @@ function populateNodeInColumns(graph, sankey) {
 /**
  * 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 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;
+        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 {
@@ -152,40 +155,117 @@ 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(d3Sum(node.sourceLinks, function (link) { return link.unnormalizedValue; }), d3Sum(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
+export function adjustPadding(sankey, height, nodesInColumn) {
+    var padding = sankey.nodePadding();
+    var minPadding = PADDING_PERCENTAGE * height;
+    Object.values(nodesInColumn).forEach(function (column) {
+        var totalPaddingInColumn = height - d3Sum(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);
+}
+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 (__assign({}, node)); }),
+        links: data.links.map(function (link) { return (__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.
+export 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 = d3Sankey()
+        .nodeWidth(124)
+        .extent([
+        [left, top],
+        [width - 1, height - 6],
+    ])
+        .nodeAlign(isRtl ? sankeyRight : sankeyJustify);
+    return { sankey: sankey, height: height, width: width };
 }
 var SankeyChartBase = /** @class */ (function (_super) {
     __extends(SankeyChartBase, _super);
@@ -239,8 +319,9 @@ var SankeyChartBase = /** @class */ (function (_super) {
         _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); });
+        _this._normalizeData = memoizeFunction(function (data, containerWidth, containerHeight) {
+            return _this._normalizeSankeyData(data, containerWidth, containerHeight);
+        });
         _this._emptyChartId = getId('_SankeyChart_empty');
         return _this;
     }
@@ -267,18 +348,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: DirectionalHint.topAutoEdge,
@@ -304,50 +380,39 @@ var SankeyChartBase = /** @class */ (function (_super) {
         }
         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 = d3Sankey()
-            .nodeWidth(124)
-            .extent([
-            [left, top],
-            [width - 1, height - 6],
-        ])
-            .nodeAlign(this._isRtl ? sankeyRight : 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 - 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._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);
                 };
@@ -380,13 +445,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);
                 };
@@ -510,7 +574,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;
@@ -523,7 +587,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];
@@ -582,6 +646,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;