@fluentui/react-charting 5.23.31 → 5.23.32

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

@@ -18,7 +18,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
     var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(VerticalStackedBarChartBase, _super);
         function VerticalStackedBarChartBase(props) {
-            var _a, _b;
+            var _a;
             var _this = _super.call(this, props) || this;
             _this._isRtl = (0, Utilities_1.getRTL)();
             /**
@@ -33,7 +33,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 var _a = _this.props.isCalloutForStack, isCalloutForStack = _a === void 0 ? false : _a;
                 var shouldFocusStackOnly = false;
                 if (_isHavingLines) {
-                    if (_this.state.selectedLegend !== '') {
+                    if (_this._getHighlightedLegend().length === 1) {
                         shouldFocusStackOnly = false;
                     }
                     else {
@@ -106,7 +106,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     : 0;
                 var xScaleBandwidthTranslate = _this._xAxisType !== index_3.XAxisTypes.StringAxis ? 0 : xScale.bandwidth() / 2;
                 Object.keys(lineObject).forEach(function (item, index) {
-                    var shouldHighlight = _this._legendHighlighted(item) || _this._noLegendHighlighted(); // item is legend name
+                    var shouldHighlight = _this._isLegendHighlighted(item) || _this._noLegendHighlighted(); // item is legend name
                     for (var i = 1; i < lineObject[item].length; i++) {
                         var x1 = xScale(lineObject[item][i - 1].xItem.xAxisPoint);
                         var useSecondaryYScale = lineObject[item][i - 1].useSecondaryYScale && lineObject[item][i].useSecondaryYScale && secondaryYScale;
@@ -116,7 +116,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         if (lineBorderWidth > 0) {
                             borderForLines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-BorderLine"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3 + lineBorderWidth * 2, fill: "transparent", strokeLinecap: "round", stroke: theme.semanticColors.bodyBackground, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }));
                         }
-                        lines.push(React.createElement("line", tslib_1.__assign({ key: "".concat(index, "-").concat(i, "-line"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3, strokeLinecap: "round", stroke: lineObject[item][i].color, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, (_this.state.selectedLegend === item && {
+                        lines.push(React.createElement("line", tslib_1.__assign({ key: "".concat(index, "-").concat(i, "-line"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3, strokeLinecap: "round", stroke: lineObject[item][i].color, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, (_this._isLegendHighlighted(item) && {
                             onMouseOver: _this._lineHover.bind(_this, lineObject[item][i - 1]),
                             onMouseLeave: _this._lineHoverOut,
                         }))));
@@ -126,11 +126,11 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     lineObject[item].forEach(function (circlePoint, subIndex) {
                         // Create an object to store line point ref so that the object can be passed by reference to the focus handler
                         var circleRef = { refElement: null };
-                        dots.push(React.createElement("circle", tslib_1.__assign({ key: "".concat(index, "-").concat(subIndex, "-dot"), cx: xScale(circlePoint.xItem.xAxisPoint), cy: circlePoint.useSecondaryYScale && secondaryYScale ? secondaryYScale(circlePoint.y) : yScale(circlePoint.y), onMouseOver: _this.state.selectedLegend === item
+                        dots.push(React.createElement("circle", tslib_1.__assign({ key: "".concat(index, "-").concat(subIndex, "-dot"), cx: xScale(circlePoint.xItem.xAxisPoint), cy: circlePoint.useSecondaryYScale && secondaryYScale ? secondaryYScale(circlePoint.y) : yScale(circlePoint.y), onMouseOver: _this._isLegendHighlighted(item)
                                 ? _this._lineHover.bind(_this, circlePoint)
-                                : _this._onStackHover.bind(_this, circlePoint.xItem) }, (_this.state.selectedLegend === item && {
+                                : _this._onStackHover.bind(_this, circlePoint.xItem) }, (_this._isLegendHighlighted(item) && {
                             onMouseLeave: _this._lineHoverOut,
-                        }), { r: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, visibility: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).visibility, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), "data-is-focusable": _this._legendHighlighted(item), ref: function (e) { return (circleRef.refElement = e); }, onFocus: _this._lineFocus.bind(_this, circlePoint, circleRef), onBlur: _this._lineHoverOut })));
+                        }), { r: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, visibility: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).visibility, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), "data-is-focusable": _this._isLegendHighlighted(item), ref: function (e) { return (circleRef.refElement = e); }, onFocus: _this._lineFocus.bind(_this, circlePoint, circleRef), onBlur: _this._lineHoverOut })));
                     });
                 });
                 return (React.createElement(React.Fragment, null,
@@ -139,12 +139,12 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     dots));
             };
             _this._getCircleVisibilityAndRadius = function (xAxisPoint, legend) {
-                var _a = _this.state, selectedLegend = _a.selectedLegend, activeXAxisDataPoint = _a.activeXAxisDataPoint;
-                if (selectedLegend !== '') {
-                    if (xAxisPoint === activeXAxisDataPoint && selectedLegend === legend) {
+                var activeXAxisDataPoint = _this.state.activeXAxisDataPoint;
+                if (!_this._noLegendHighlighted()) {
+                    if (xAxisPoint === activeXAxisDataPoint && _this._isLegendHighlighted(legend)) {
                         return { visibility: CircleVisbility.show, radius: 8 };
                     }
-                    else if (selectedLegend === legend) {
+                    else if (_this._isLegendHighlighted(legend)) {
                         return { visibility: CircleVisbility.show, radius: 0.3 };
                     }
                     else {
@@ -247,7 +247,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                             singleChartData.chartData[index].color = startColor;
                         }
                         var ref = {};
-                        var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
+                        var shouldHighlight = _this._isLegendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
                         _this._classNames = getClassNames(_this.props.styles, {
                             theme: _this.props.theme,
                             shouldHighlight: shouldHighlight,
@@ -311,7 +311,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         }
                         else {
                             barsToDisplay.forEach(function (point) {
-                                if (_this._legendHighlighted(point.legend)) {
+                                if (_this._isLegendHighlighted(point.legend)) {
                                     showLabel = true;
                                     barLabel += point.data;
                                 }
@@ -406,15 +406,14 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
              * 1. selection: if the user clicks on it
              * 2. hovering: if there is no selected legend and the user hovers over it
              */
-            _this._legendHighlighted = function (legendTitle) {
-                return (_this.state.selectedLegend === legendTitle ||
-                    (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
+            _this._isLegendHighlighted = function (legendTitle) {
+                return _this._getHighlightedLegend().includes(legendTitle);
             };
             /**
              * This function checks if none of the legends is selected or hovered.
              */
             _this._noLegendHighlighted = function () {
-                return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
+                return _this._getHighlightedLegend().length === 0;
             };
             _this._getAriaLabel = function (singleChartData, point) {
                 var _a, _b, _c;
@@ -492,8 +491,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             (0, Utilities_1.initializeComponentRef)(_this);
             _this.state = {
                 isCalloutVisible: false,
-                selectedLegend: (_b = (_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegend) !== null && _b !== void 0 ? _b : '',
-                activeLegend: '',
+                selectedLegends: ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || [],
+                activeLegend: undefined,
                 refSelected: null,
                 dataForHoverCard: 0,
                 color: '',
@@ -522,6 +521,12 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             return _this;
         }
         VerticalStackedBarChartBase.prototype.componentDidUpdate = function (prevProps) {
+            var _a, _b, _c;
+            if (!(0, index_3.areArraysEqual)((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
+                this.setState({
+                    selectedLegends: ((_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || [],
+                });
+            }
             if (prevProps.height !== this.props.height ||
                 prevProps.width !== this.props.width ||
                 prevProps.data !== this.props.data) {
@@ -600,18 +605,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
         VerticalStackedBarChartBase.prototype._renderCallout = function (props) {
             return props ? (React.createElement(index_2.ChartHoverCard, { XValue: props.xAxisCalloutData, Legend: props.legend, YValue: props.yAxisCalloutData, color: props.color, culture: this.props.culture })) : null;
         };
-        VerticalStackedBarChartBase.prototype._onLegendClick = function (legendTitle) {
-            if (this.state.selectedLegend === legendTitle) {
-                this.setState({
-                    selectedLegend: '',
-                });
-            }
-            else {
-                this.setState({
-                    selectedLegend: legendTitle,
-                });
-            }
-        };
         VerticalStackedBarChartBase.prototype._onLegendHover = function (legendTitle) {
             this.setState({
                 activeLegend: legendTitle,
@@ -619,7 +612,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
         };
         VerticalStackedBarChartBase.prototype._onLegendLeave = function () {
             this.setState({
-                activeLegend: '',
+                activeLegend: undefined,
             });
         };
         VerticalStackedBarChartBase.prototype._getLegendData = function (data, palette, lineLegends) {
@@ -645,9 +638,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     var legend = {
                         title: point.legend,
                         color: color,
-                        action: function () {
-                            _this._onLegendClick(point.legend);
-                        },
                         hoverAction: allowHoverOnLegend
                             ? function () {
                                 _this._handleChartMouseLeave();
@@ -666,9 +656,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         title: point.title,
                         color: point.color,
                         isLineLegendInBarChart: true,
-                        action: function () {
-                            _this._onLegendClick(point.title);
-                        },
                         hoverAction: allowHoverOnLegend
                             ? function () {
                                 _this._handleChartMouseLeave();
@@ -681,7 +668,26 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 });
             }
             var totalLegends = legendsOfLine.concat(actions);
-            return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: totalLegends, overflowProps: this.props.legendsOverflowProps, enabledWrapLines: this.props.enabledLegendsWrapLines, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, this.props.legendProps)));
+            return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: totalLegends, overflowProps: this.props.legendsOverflowProps, enabledWrapLines: this.props.enabledLegendsWrapLines, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, this.props.legendProps, { onChange: this._onLegendSelectionChange.bind(this) })));
+        };
+        VerticalStackedBarChartBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {
+            var _a, _b;
+            if ((_a = this.props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
+                this.setState({ selectedLegends: selectedLegends });
+            }
+            else {
+                this.setState({ selectedLegends: selectedLegends.slice(-1) });
+            }
+            if ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
+                this.props.legendProps.onChange(selectedLegends, event, currentLegend);
+            }
+        };
+        VerticalStackedBarChartBase.prototype._getHighlightedLegend = function () {
+            return this.state.selectedLegends.length > 0
+                ? this.state.selectedLegends
+                : this.state.activeLegend
+                    ? [this.state.activeLegend]
+                    : [];
         };
         VerticalStackedBarChartBase.prototype._onRectHover = function (xAxisPoint, point, color, mouseEvent) {
             mouseEvent.persist();
@@ -700,7 +706,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                      * Show the callout if highlighted bar is focused/hovered
                      * and Hide it if unhighlighted bar is focused/hovered
                      */
-                    isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend,
+                    isCalloutVisible: this._noLegendHighlighted() || this._isLegendHighlighted(point.legend),
                     calloutLegend: point.legend,
                     dataForHoverCard: point.data,
                     color: color,
@@ -716,6 +722,11 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             this._onStackHoverFocus(stack, mouseEvent);
         };
         VerticalStackedBarChartBase.prototype._onStackHoverFocus = function (stack, refSelected) {
+            var _this = this;
+            var _a, _b, _c;
+            if (!this._noLegendHighlighted()) {
+                stack = tslib_1.__assign(tslib_1.__assign({}, stack), { chartData: stack.chartData.filter(function (dataPoint) { return _this._isLegendHighlighted(dataPoint.legend); }), lineData: (_a = stack.lineData) === null || _a === void 0 ? void 0 : _a.filter(function (dataPoint) { return _this._isLegendHighlighted(dataPoint.legend); }) });
+            }
             var lineData = stack.lineData;
             var isLinesPresent = lineData !== undefined && lineData.length > 0;
             if (isLinesPresent) {
@@ -726,7 +737,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             }
             this.setState({
                 refSelected: refSelected,
-                isCalloutVisible: true,
+                isCalloutVisible: stack.chartData.length > 0 || ((_c = (_b = stack.lineData) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0,
                 YValueHover: isLinesPresent
                     ? tslib_1.__spreadArray(tslib_1.__spreadArray([], lineData.sort(function (a, b) { return (a.data < b.data ? 1 : -1); }), true), stack.chartData.slice().reverse(), true) : stack.chartData.slice().reverse(),
                 hoverXValue: stack.xAxisPoint instanceof Date ? (0, index_3.formatDate)(stack.xAxisPoint, this.props.useUTC) : stack.xAxisPoint,