@fluentui/react-charting 5.23.30 → 5.23.32

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

@@ -8,7 +8,7 @@ import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { Legends } from '../Legends/index';
 import { CartesianChart, ChartHoverCard, } from '../../index';
 import { FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, formatDate, getNextGradient, } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, formatDate, getNextGradient, areArraysEqual, } from '../../utilities/index';
 var getClassNames = classNamesFunction();
 var COMPONENT_NAME = 'VERTICAL STACKED BAR CHART';
 // When displaying gaps between bars, the max height of the gap is given in the
@@ -25,7 +25,7 @@ var CircleVisbility;
 var VerticalStackedBarChartBase = /** @class */ (function (_super) {
     __extends(VerticalStackedBarChartBase, _super);
     function VerticalStackedBarChartBase(props) {
-        var _a, _b;
+        var _a;
         var _this = _super.call(this, props) || this;
         _this._isRtl = getRTL();
         /**
@@ -40,7 +40,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             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 {
@@ -113,7 +113,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 : 0;
             var xScaleBandwidthTranslate = _this._xAxisType !== 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;
@@ -123,7 +123,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     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", __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", __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,
                     }))));
@@ -133,11 +133,11 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 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", __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", __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,
@@ -146,12 +146,12 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 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 {
@@ -254,7 +254,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                         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,
@@ -318,7 +318,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     }
                     else {
                         barsToDisplay.forEach(function (point) {
-                            if (_this._legendHighlighted(point.legend)) {
+                            if (_this._isLegendHighlighted(point.legend)) {
                                 showLabel = true;
                                 barLabel += point.data;
                             }
@@ -413,15 +413,14 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
          * 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;
@@ -499,8 +498,8 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         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: '',
@@ -529,6 +528,12 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         return _this;
     }
     VerticalStackedBarChartBase.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b, _c;
+        if (!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) {
@@ -607,18 +612,6 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
     VerticalStackedBarChartBase.prototype._renderCallout = function (props) {
         return props ? (React.createElement(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,
@@ -626,7 +619,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
     };
     VerticalStackedBarChartBase.prototype._onLegendLeave = function () {
         this.setState({
-            activeLegend: '',
+            activeLegend: undefined,
         });
     };
     VerticalStackedBarChartBase.prototype._getLegendData = function (data, palette, lineLegends) {
@@ -652,9 +645,6 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 var legend = {
                     title: point.legend,
                     color: color,
-                    action: function () {
-                        _this._onLegendClick(point.legend);
-                    },
                     hoverAction: allowHoverOnLegend
                         ? function () {
                             _this._handleChartMouseLeave();
@@ -673,9 +663,6 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     title: point.title,
                     color: point.color,
                     isLineLegendInBarChart: true,
-                    action: function () {
-                        _this._onLegendClick(point.title);
-                    },
                     hoverAction: allowHoverOnLegend
                         ? function () {
                             _this._handleChartMouseLeave();
@@ -688,7 +675,26 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             });
         }
         var totalLegends = legendsOfLine.concat(actions);
-        return (React.createElement(Legends, __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(Legends, __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();
@@ -707,7 +713,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                  * 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,
@@ -723,6 +729,11 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         this._onStackHoverFocus(stack, mouseEvent);
     };
     VerticalStackedBarChartBase.prototype._onStackHoverFocus = function (stack, refSelected) {
+        var _this = this;
+        var _a, _b, _c;
+        if (!this._noLegendHighlighted()) {
+            stack = __assign(__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) {
@@ -733,7 +744,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         }
         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
                 ? __spreadArray(__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 ? formatDate(stack.xAxisPoint, this.props.useUTC) : stack.xAxisPoint,