@fluentui/react-charting 5.23.31 → 5.23.33

package/lib/components/VerticalBarChart/VerticalBarChart.base.js

@@ -8,7 +8,7 @@ import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@flue
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { CartesianChart, ChartHoverCard, Legends, } from '../../index';
 import { FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRageOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis, formatDate, getNextGradient, } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRageOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis, formatDate, getNextGradient, areArraysEqual, } from '../../utilities/index';
 var CircleVisbility;
 (function (CircleVisbility) {
     CircleVisbility["show"] = "visibility";
@@ -19,7 +19,7 @@ var MIN_DOMAIN_MARGIN = 8;
 var VerticalBarChartBase = /** @class */ (function (_super) {
     __extends(VerticalBarChartBase, _super);
     function VerticalBarChartBase(props) {
-        var _a, _b;
+        var _a;
         var _this = _super.call(this, props) || this;
         _this._isRtl = getRTL();
         _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
@@ -92,12 +92,12 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 dots));
         };
         _this._getCircleVisibilityAndRadius = function (xAxisPoint, legend) {
-            var _a = _this.state, selectedLegend = _a.selectedLegend, activeXdataPoint = _a.activeXdataPoint;
-            if (selectedLegend !== '') {
-                if (xAxisPoint === activeXdataPoint && selectedLegend === legend) {
+            var activeXdataPoint = _this.state.activeXdataPoint;
+            if (!_this._noLegendHighlighted()) {
+                if (xAxisPoint === activeXdataPoint && _this._legendHighlighted(legend)) {
                     return { visibility: CircleVisbility.show, radius: 8 };
                 }
-                else if (selectedLegend === legend) {
+                else if (_this._legendHighlighted(legend)) {
                     // Don't hide the circle to keep it focusable. For more information,
                     // see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
                     return { visibility: CircleVisbility.show, radius: 0.3 };
@@ -170,7 +170,9 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                     : _this._createColors()(selectedPoint[0].y)
                 : _this._createColors()(1);
             // there might be no y value of the line for the hovered bar. so we need to check this condition
-            if (_this._isHavingLine && ((_a = selectedPoint[0].lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined) {
+            if (_this._isHavingLine &&
+                ((_a = selectedPoint[0].lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined &&
+                (_this._legendHighlighted(lineLegendText) || _this._noLegendHighlighted())) {
                 // callout data for the  line
                 YValueHover.push({
                     legend: lineLegendText,
@@ -180,18 +182,20 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                     yAxisCalloutData: (_d = selectedPoint[0].lineData) === null || _d === void 0 ? void 0 : _d.yAxisCalloutData,
                 });
             }
-            // callout data for the bar
-            YValueHover.push({
-                legend: selectedPoint[0].legend,
-                y: selectedPoint[0].y,
-                color: enableGradient
-                    ? useSingleColor
-                        ? getNextGradient(0, 0)[0]
-                        : ((_e = selectedPoint[0].gradient) === null || _e === void 0 ? void 0 : _e[0]) || getNextGradient(pointIndex, 0)[0]
-                    : calloutColor,
-                data: selectedPoint[0].yAxisCalloutData,
-                yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
-            });
+            if (_this._legendHighlighted(selectedPoint[0].legend) || _this._noLegendHighlighted()) {
+                // callout data for the bar
+                YValueHover.push({
+                    legend: selectedPoint[0].legend,
+                    y: selectedPoint[0].y,
+                    color: enableGradient
+                        ? useSingleColor
+                            ? getNextGradient(0, 0)[0]
+                            : ((_e = selectedPoint[0].gradient) === null || _e === void 0 ? void 0 : _e[0]) || getNextGradient(pointIndex, 0)[0]
+                        : calloutColor,
+                    data: selectedPoint[0].yAxisCalloutData,
+                    yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
+                });
+            }
             var hoverXValue = point.x instanceof Date ? formatDate(point.x, _this.props.useUTC) : point.x.toString();
             return {
                 YValueHover: YValueHover,
@@ -217,7 +221,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                     _this.setState({
                         refSelected: obj.refElement,
                         /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
-                        isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === point.legend,
+                        isCalloutVisible: _this._noLegendHighlighted() || _this._legendHighlighted(point.legend),
                         calloutLegend: point.legend,
                         dataForHoverCard: point.y,
                         color: point.color || color,
@@ -322,9 +326,6 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 var legend = {
                     title: legendTitle,
                     color: color,
-                    action: function () {
-                        _this._onLegendClick(legendTitle);
-                    },
                     hoverAction: function () {
                         _this._handleChartMouseLeave();
                         _this._onLegendHover(legendTitle);
@@ -339,9 +340,6 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 var lineLegend = {
                     title: lineLegendText,
                     color: lineLegendColor,
-                    action: function () {
-                        _this._onLegendClick(lineLegendText);
-                    },
                     hoverAction: function () {
                         _this._handleChartMouseLeave();
                         _this._onLegendHover(lineLegendText);
@@ -353,7 +351,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 };
                 actions.unshift(lineLegend);
             }
-            var legends = (React.createElement(Legends, __assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps)));
+            var legends = (React.createElement(Legends, __assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps, { onChange: _this._onLegendSelectionChange.bind(_this) })));
             return legends;
         };
         _this._getAxisData = function (yAxisData) {
@@ -370,14 +368,13 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
          * 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));
+            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 (point) {
             var _a, _b, _c;
@@ -441,8 +438,8 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             dataForHoverCard: 0,
             isCalloutVisible: false,
             refSelected: null,
-            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,
             xCalloutValue: '',
             yCalloutValue: '',
             activeXdataPoint: null,
@@ -463,6 +460,14 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         _this._cartesianChartRef = React.createRef();
         return _this;
     }
+    VerticalBarChartBase.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) || [],
+            });
+        }
+    };
     VerticalBarChartBase.prototype.render = function () {
         var _this = this;
         this._adjustProps();
@@ -482,7 +487,8 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             tickValues: this.props.tickValues,
             tickFormat: this.props.tickFormat,
         };
-        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && this._noLegendHighlighted() && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine &&
+            (this._noLegendHighlighted() || this._getHighlightedLegend().length > 1) && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
             xAxisInnerPadding: this._xAxisInnerPadding,
             xAxisOuterPadding: this._xAxisOuterPadding,
         }), { ref: this._cartesianChartRef, 
@@ -535,7 +541,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             this.setState({
                 refSelected: mouseEvent,
                 /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
-                isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend,
+                isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(point.legend),
                 dataForHoverCard: point.y,
                 calloutLegend: point.legend,
                 color: point.color || color,
@@ -545,7 +551,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 yCalloutValue: point.yAxisCalloutData,
                 dataPointCalloutProps: point,
                 // Hovering over a bar should highlight corresponding line points only when no legend is selected
-                activeXdataPoint: this._noLegendHighlighted() ? point.x : null,
+                activeXdataPoint: this._noLegendHighlighted() || this._legendHighlighted(point.legend) ? point.x : null,
                 YValueHover: YValueHover,
                 hoverXValue: hoverXValue,
                 callOutAccessibilityData: point.callOutAccessibilityData,
@@ -797,18 +803,6 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         }
         return bars;
     };
-    VerticalBarChartBase.prototype._onLegendClick = function (legendTitle) {
-        if (this.state.selectedLegend === legendTitle) {
-            this.setState({
-                selectedLegend: '',
-            });
-        }
-        else {
-            this.setState({
-                selectedLegend: legendTitle,
-            });
-        }
-    };
     VerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
         this.setState({
             activeLegend: legendTitle,
@@ -816,9 +810,28 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
     };
     VerticalBarChartBase.prototype._onLegendLeave = function () {
         this.setState({
-            activeLegend: '',
+            activeLegend: undefined,
         });
     };
+    VerticalBarChartBase.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);
+        }
+    };
+    VerticalBarChartBase.prototype._getHighlightedLegend = function () {
+        return this.state.selectedLegends.length > 0
+            ? this.state.selectedLegends
+            : this.state.activeLegend
+                ? [this.state.activeLegend]
+                : [];
+    };
     VerticalBarChartBase.prototype._renderBarLabel = function (xPoint, yPoint, barValue, legend, isNegativeBar) {
         if (this.props.hideLabels ||
             this._barWidth < 16 ||