@fluentui/react-charting 5.19.27 → 5.19.28

package/lib-amd/components/SankeyChart/SankeyChart.types.d.ts

@@ -1,4 +1,4 @@
-import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { IChartProps } from '../../types/IDataPoint';
 export type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';
@@ -51,6 +51,14 @@ export interface ISankeyChartProps {
      * Colors for nodes border
      */
     borderColorsForNodes?: string[];
+    /**
+     * Localized strings to show in the UX.
+     */
+    strings?: ISankeyChartStrings;
+    /**
+     * Localized strings to use for the chart's accessibility features.
+     */
+    accessibility?: ISankeyChartAccessibilityProps;
 }
 /**
  * Sankey Chart style properties
@@ -93,3 +101,33 @@ export interface ISankeyChartStyles {
      */
     calloutContentRoot?: IStyle;
 }
+/**
+ * Set of strings which are used when rendering the chart.
+ */
+export interface ISankeyChartStrings {
+    /**
+     * A value similar to "from \{0\}" where \{0\} is the name of the source node for a link.
+     * This is shown in the `ChartHoverCard` when the user hovers the mouse over a link.
+     */
+    linkFrom?: string;
+}
+/**
+ * Set of strings which are used when rendering accessibility information within the chart.
+ */
+export interface ISankeyChartAccessibilityProps {
+    /**
+     * Aria label for when the chart is empty.
+     */
+    emptyAriaLabel?: string;
+    /**
+     * A value similar to "node \{0\} with weight \{1\}".
+     * \{0\} is the name of the node.
+     * \{1\} is the weight of the node (as computed by the sankey layout engine via the links to or from this node).
+     */
+    nodeAriaLabel?: string;
+    /**
+     * A value similar to "link from \{0\} to $\{1\} with weight $\{2\}".
+     * \{0\} is the source node, \{1\} is the target node, and \{2\} is the value of the link.
+     */
+    linkAriaLabel?: string;
+}

package/lib-amd/components/SankeyChart/SankeyChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"SankeyChart.types.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\n\nexport type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';\n\n/**\n * Sankey Chart properties\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the SankeyChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ISankeyChartStyleProps, ISankeyChartStyles>;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the Sankey chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * should chart resize when parent resize.\n   */\n  shouldResize?: number;\n\n  /**\n   * Color for path\n   */\n  pathColor?: string;\n\n  /**\n   * Colors for nodes\n   */\n  colorsForNodes?: string[];\n\n  /**\n   * Colors for nodes border\n   */\n  borderColorsForNodes?: string[];\n}\n\n/**\n * Sankey Chart style properties\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartStyleProps {\n  theme: ITheme;\n  className?: string;\n  width: number;\n  height: number;\n  pathColor?: string;\n}\n\n/**\n * Sankey Chart styles\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   *  Style for the nodes.\n   */\n  nodes?: IStyle;\n\n  /**\n   *  Style for the links.\n   */\n  links?: IStyle;\n\n  /**\n   *  Style for the text inside node.\n   */\n  nodeTextContainer?: IStyle;\n\n  /**\n   *  Style for the tooltip ,when user hover over the truncated node detail.\n   */\n  toolTip?: IStyle;\n\n  /**\n   *  Style for the tooltip ,when user hover over the truncated node detail.\n   */\n\n  calloutContentRoot?: IStyle;\n}\n"]}
+{"version":3,"file":"SankeyChart.types.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\n\nexport type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';\n\n/**\n * Sankey Chart properties\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the SankeyChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ISankeyChartStyleProps, ISankeyChartStyles>;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the Sankey chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * should chart resize when parent resize.\n   */\n  shouldResize?: number;\n\n  /**\n   * Color for path\n   */\n  pathColor?: string;\n\n  /**\n   * Colors for nodes\n   */\n  colorsForNodes?: string[];\n\n  /**\n   * Colors for nodes border\n   */\n  borderColorsForNodes?: string[];\n\n  /**\n   * Localized strings to show in the UX.\n   */\n  strings?: ISankeyChartStrings;\n\n  /**\n   * Localized strings to use for the chart's accessibility features.\n   */\n  accessibility?: ISankeyChartAccessibilityProps;\n}\n\n/**\n * Sankey Chart style properties\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartStyleProps {\n  theme: ITheme;\n  className?: string;\n  width: number;\n  height: number;\n  pathColor?: string;\n}\n\n/**\n * Sankey Chart styles\n * {@docCategory SankeyChart}\n */\nexport interface ISankeyChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   *  Style for the nodes.\n   */\n  nodes?: IStyle;\n\n  /**\n   *  Style for the links.\n   */\n  links?: IStyle;\n\n  /**\n   *  Style for the text inside node.\n   */\n  nodeTextContainer?: IStyle;\n\n  /**\n   *  Style for the tooltip ,when user hover over the truncated node detail.\n   */\n  toolTip?: IStyle;\n\n  /**\n   *  Style for the tooltip ,when user hover over the truncated node detail.\n   */\n\n  calloutContentRoot?: IStyle;\n}\n\n/**\n * Set of strings which are used when rendering the chart.\n */\nexport interface ISankeyChartStrings {\n  /**\n   * A value similar to \"from \\{0\\}\" where \\{0\\} is the name of the source node for a link.\n   * This is shown in the `ChartHoverCard` when the user hovers the mouse over a link.\n   */\n  linkFrom?: string;\n}\n\n/**\n * Set of strings which are used when rendering accessibility information within the chart.\n */\nexport interface ISankeyChartAccessibilityProps {\n  /**\n   * Aria label for when the chart is empty.\n   */\n  emptyAriaLabel?: string;\n  /**\n   * A value similar to \"node \\{0\\} with weight \\{1\\}\".\n   * \\{0\\} is the name of the node.\n   * \\{1\\} is the weight of the node (as computed by the sankey layout engine via the links to or from this node).\n   */\n  nodeAriaLabel?: string;\n  /**\n   * A value similar to \"link from \\{0\\} to $\\{1\\} with weight $\\{2\\}\".\n   * \\{0\\} is the source node, \\{1\\} is the target node, and \\{2\\} is the value of the link.\n   */\n  linkAriaLabel?: string;\n}\n"]}

package/lib-amd/version.js

@@ -1,6 +1,6 @@
 define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    (0, set_version_1.setVersion)('@fluentui/react-charting', '5.19.27');
+    (0, set_version_1.setVersion)('@fluentui/react-charting', '5.19.28');
 });
 //# sourceMappingURL=version.js.map

package/lib-amd/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,IAAA,wBAAU,EAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.19.27');"]}
+{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,IAAA,wBAAU,EAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.19.28');"]}

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

@@ -52,6 +52,8 @@ export declare class SankeyChartBase extends React.Component<ISankeyChartProps,
     private readonly _linkAttributes;
     private readonly _fetchNodes;
     private readonly _fetchLinks;
+    private readonly _strings;
+    private readonly _accessibility;
     constructor(props: ISankeyChartProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: ISankeyChartProps): void;

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

@@ -364,7 +364,7 @@ function computeElipsisLength(tspan) {
     var measurement = measureText(tspan, elipsis);
     return measurement === undefined ? 0 : measurement;
 }
-function computeNodeAttributes(nodes) {
+function computeNodeAttributes(nodes, nodeAriaLabel) {
     var result = {};
     var weightSpan = (0, d3_selection_1.select)('.nodeName').append('text').attr('class', 'tempText').append('tspan').text(null);
     var nameSpan = (0, d3_selection_1.select)('.nodeName')
@@ -377,13 +377,14 @@ function computeNodeAttributes(nodes) {
         var height = Math.max(singleNode.y1 - singleNode.y0, 0);
         var padding = 8;
         var textLengthForNodeWeight = 0;
+        var nodeValue = singleNode.actualValue;
         // 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;
             // The following `select` statement injects a `tempText` element into the DOM. This injection
             // (and subsequent removal) is causing a layout recalculation. This is a performance issue.
-            var measurement = measureText(weightSpan, singleNode.actualValue);
+            var measurement = measureText(weightSpan, nodeValue);
             if (measurement !== undefined) {
                 textLengthForNodeWeight = measurement;
                 padding = padding + textLengthForNodeWeight;
@@ -397,6 +398,7 @@ function computeNodeAttributes(nodes) {
             reactId: (0, Utilities_1.getId)('nodeBar'),
             gElementId: (0, Utilities_1.getId)('nodeGElement'),
             name: truncatedname,
+            aria: nodeAriaLabel(singleNode, nodeValue),
             trimmed: isTruncated,
             height: height,
             weightOffset: textLengthForNodeWeight,
@@ -405,7 +407,7 @@ function computeNodeAttributes(nodes) {
     (0, d3_selection_1.selectAll)('.tempText').remove();
     return result;
 }
-function computeLinkAttributes(links) {
+function computeLinkAttributes(links, linkFrom, linkAriaLabel) {
     var result = {};
     links.forEach(function (link) {
         var sourceId = idFromNumberOrSNode(link.source);
@@ -414,7 +416,11 @@ function computeLinkAttributes(links) {
             sourceToTarget = {};
             result[sourceId] = sourceToTarget;
         }
-        sourceToTarget[idFromNumberOrSNode(link.target)] = { reactId: (0, Utilities_1.getId)('link') };
+        sourceToTarget[idFromNumberOrSNode(link.target)] = {
+            reactId: (0, Utilities_1.getId)('link'),
+            from: linkFrom(link.source),
+            aria: linkAriaLabel(link),
+        };
     });
     return result;
 }
@@ -439,6 +445,16 @@ function nodeTextColor(state, singleNode) {
         ? DEFAULT_TEXT_COLOR
         : NON_SELECTED_TEXT_COLOR;
 }
+function linkCalloutAttributes(singleLink, from) {
+    return {
+        selectedLink: singleLink,
+        isCalloutVisible: true,
+        color: singleLink.source.color,
+        xCalloutValue: singleLink.target.name,
+        yCalloutValue: singleLink.unnormalizedValue.toString(),
+        descriptionMessage: from,
+    };
+}
 // NOTE: To start employing React.useMemo properly, we need to convert this code from a React.Component
 // to a function component. This will require a significant refactor of the code in this file.
 // https://stackoverflow.com/questions/60223362/fast-way-to-convert-react-class-component-to-functional-component
@@ -517,11 +533,36 @@ var SankeyChartBase = /** @class */ (function (_super) {
         _this._fetchTooltip = (0, Utilities_1.memoizeFunction)(function (classNames) {
             return _this._labelTooltipDiv(classNames);
         });
-        // NOTE: Memoizing the `_createNodes` and `_createLinks` methods breaks the hoverability of the chart
-        // because the nodes are currently created differently based on the layout information.
-        _this._nodeAttributes = (0, Utilities_1.memoizeFunction)(function (nodes) { return computeNodeAttributes(nodes); });
+        // Prepare the localization utilities
+        _this._strings = (0, Utilities_1.memoizeFunction)(function (strings) {
+            var fromString = (strings === null || strings === void 0 ? void 0 : strings.linkFrom) || 'From {0}';
+            // NOTE: The `node` parameter is the sankey-generated node on the link, and not the original `node` supplied
+            // by the caller.
+            return {
+                linkFrom: function (node) { return (0, Utilities_1.format)(fromString, node.name); },
+            };
+        })(props.strings);
+        _this._accessibility = (0, Utilities_1.memoizeFunction)(function (accessibility) {
+            var linkString = (accessibility === null || accessibility === void 0 ? void 0 : accessibility.linkAriaLabel) || 'link from {0} to {1} with weight {2}';
+            var nodeString = (accessibility === null || accessibility === void 0 ? void 0 : accessibility.nodeAriaLabel) || 'node {0} with weight {1}';
+            return {
+                emptyAriaLabel: (accessibility === null || accessibility === void 0 ? void 0 : accessibility.emptyAriaLabel) || 'Graph has no data to display',
+                linkAriaLabel: function (link) {
+                    return (0, Utilities_1.format)(linkString, link.source.name, link.target.name, link.unnormalizedValue);
+                },
+                nodeAriaLabel: function (node, weight) { return (0, Utilities_1.format)(nodeString, node.name, weight); },
+            };
+        })(props.accessibility);
+        // NOTE: Memoizing the `_createNodes` and `_createLinks` methods would break the hoverability of the chart
+        // because the nodes are currently created differently based on the layout information. Hence why we do not
+        // memoize these methods (but have stubs for memoizing as the `_fetchNodes` and `_fetchLinks` methods).
+        _this._nodeAttributes = (0, Utilities_1.memoizeFunction)(function (nodes, nodeAriaLabel) {
+            return computeNodeAttributes(nodes, nodeAriaLabel);
+        });
         _this._fetchNodes = function (classNames, nodes, nodeAttributes, tooltipDiv) { return _this._createNodes(classNames, nodes, nodeAttributes, tooltipDiv); };
-        _this._linkAttributes = (0, Utilities_1.memoizeFunction)(function (links) { return computeLinkAttributes(links); });
+        _this._linkAttributes = (0, Utilities_1.memoizeFunction)(function (links, linkFrom, linkAriaLabel) {
+            return computeLinkAttributes(links, linkFrom, linkAriaLabel);
+        });
         _this._fetchLinks = function (links, linkAttributes) {
             return _this._createLinks(links, linkAttributes);
         };
@@ -557,10 +598,10 @@ var SankeyChartBase = /** @class */ (function (_super) {
             // It might be better to perform this `fetch` within the `_showTooltip` and `_hideTooltip` methods.
             var tooltipDiv = this._fetchTooltip(classNames);
             // Pre-compute some important attributes about nodes, specifically text
-            var nodeAttributes = this._nodeAttributes(nodes);
+            var nodeAttributes = this._nodeAttributes(nodes, this._accessibility.nodeAriaLabel);
             // Build the nodes and links as rendered in the UX.
             var nodeData = this._fetchNodes(classNames, nodes, nodeAttributes, tooltipDiv);
-            var linkAttributes = this._linkAttributes(links);
+            var linkAttributes = this._linkAttributes(links, this._strings.linkFrom, this._accessibility.linkAriaLabel);
             var linkData = this._fetchLinks(links, linkAttributes);
             var calloutProps = {
                 isCalloutVisible: state.isCalloutVisible,
@@ -585,7 +626,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
                         calloutProps.isCalloutVisible && (React.createElement(Callout_1.Callout, tslib_1.__assign({}, calloutProps),
                             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' }));
+        return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": this._accessibility.emptyAriaLabel }));
     };
     SankeyChartBase.prototype._normalizeSankeyData = function (data, containerWidth, containerHeight, colorsForNodes, borderColorsForNodes) {
         var _a = preRenderLayout(this._margins, containerWidth, containerHeight, this._isRtl), sankey = _a.sankey, height = _a.height, width = _a.width;
@@ -646,7 +687,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
                 var onMouseOut = function () {
                     _this._onStreamLeave(singleLink);
                 };
-                var reactId = linkValue(linkAttributes, singleLink).reactId;
+                var _a = linkValue(linkAttributes, singleLink), reactId = _a.reactId, from = _a.from, aria = _a.aria;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataPoints = linkToDataPoints(singleLink);
                 var key = "".concat(linkId_1, "-").concat(index);
@@ -660,7 +701,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
                         React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
                             React.createElement("stop", { offset: "0", stopColor: source.color }),
                             React.createElement("stop", { offset: "100%", stopColor: target.color }))),
-                    React.createElement("path", { d: linkArea(dataPoints), id: reactId, 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 ".concat(source.name, " to ").concat(target.name, " with weight ").concat(singleLink.unnormalizedValue), role: "img" })));
+                    React.createElement("path", { d: linkArea(dataPoints), id: reactId, fill: _this._fillStreamColors(singleLink, gradientUrl), stroke: _this._fillStreamBorder(singleLink, gradientUrl), strokeWidth: "2", strokeOpacity: _this._getOpacityStreamBorder(singleLink), onMouseOver: function (event) { return _this._onStreamHover(event, singleLink, from); }, onMouseOut: onMouseOut, onFocus: function (event) { return _this._onFocusLink(event, singleLink, from); }, onBlur: _this._onBlur, fillOpacity: _this._getOpacityStream(singleLink), "data-is-focusable": true, "aria-label": aria, role: "img" })));
             });
         }
         return [];
@@ -674,12 +715,12 @@ var SankeyChartBase = /** @class */ (function (_super) {
                 var onMouseOut = function () {
                     _this._onLeave(singleNode);
                 };
-                var _a = nodeAttributes[singleNode.nodeId], nodeId = _a.reactId, gElementId = _a.gElementId, height = _a.height, isTruncated = _a.trimmed, truncatedName = _a.name, textLengthForNodeWeight = _a.weightOffset;
+                var _a = nodeAttributes[singleNode.nodeId], nodeId = _a.reactId, gElementId = _a.gElementId, height = _a.height, isTruncated = _a.trimmed, truncatedName = _a.name, textLengthForNodeWeight = _a.weightOffset, aria = _a.aria;
                 var tooTall = height > MIN_HEIGHT_FOR_DOUBLINE_TYPE;
                 var name = singleNode.name, actualValue = singleNode.actualValue, x0 = singleNode.x0, x1 = singleNode.x1, y0 = singleNode.y0;
                 var textColor = nodeTextColor(state_1, singleNode);
                 return (React.createElement("g", { key: index, id: gElementId },
-                    React.createElement("rect", { x: x0, y: y0, height: height, width: x1 - 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 ".concat(name, " with weight ").concat(actualValue), role: "img" }),
+                    React.createElement("rect", { x: x0, y: y0, height: height, width: x1 - 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": aria, role: "img" }),
                     height > MIN_HEIGHT_FOR_TYPE && (React.createElement("g", { className: classNames.nodeTextContainer },
                         React.createElement("g", { className: "nodeName" },
                             React.createElement("text", { id: "".concat(nodeId, "-name"), x: x0, y: y0, dy: '1.2em', dx: '0.4em', textAnchor: textAnchor_1, fontWeight: "regular", "aria-hidden": "true", fill: textColor, fontSize: 10, onMouseOver: _this._showTooltip.bind(_this, name, isTruncated, tooltipDiv), onMouseOut: _this._hideTooltip.bind(_this, tooltipDiv) }, truncatedName)),
@@ -718,23 +759,12 @@ var SankeyChartBase = /** @class */ (function (_super) {
             });
         }
     };
-    SankeyChartBase.prototype._onStreamHover = function (singleLink, mouseEvent) {
+    SankeyChartBase.prototype._onStreamHover = function (mouseEvent, singleLink, from) {
         mouseEvent.persist();
         this._onCloseCallout();
         if (!this.state.selectedState) {
             var _a = 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, // TODO: Does this need to be localized?
-            });
+            this.setState(tslib_1.__assign({ 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 }, linkCalloutAttributes(singleLink, from)));
         }
     };
     SankeyChartBase.prototype._onStreamLeave = function (singleLink) {
@@ -747,19 +777,13 @@ var SankeyChartBase = /** @class */ (function (_super) {
             });
         }
     };
-    SankeyChartBase.prototype._onFocusLink = function (singleLink, element) {
+    SankeyChartBase.prototype._onFocusLink = function (element, singleLink, from) {
+        // There is a big difference in how "Tab" and the "Arrow keys" are handled in this diagram.
+        // In particular, I would expect the "Down" key to be like "Tab", but it jumps a little wildly. I'm not sure
+        // if this behavior is an accessiblity violation, but it we might want to investigate it.
         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, // TODO: Does this need to be localized?
-        });
+        this.setState(tslib_1.__assign({ refSelected: element.currentTarget }, linkCalloutAttributes(singleLink, from)));
     };
     SankeyChartBase.prototype._fillStreamColors = function (singleLink, gradientUrl) {
         var state = this.state;