@fluentui/react-charting 5.23.31 → 5.23.33

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

@@ -12,7 +12,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
     var VerticalBarChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(VerticalBarChartBase, _super);
         function VerticalBarChartBase(props) {
-            var _a, _b;
+            var _a;
             var _this = _super.call(this, props) || this;
             _this._isRtl = (0, Utilities_1.getRTL)();
             _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
@@ -85,12 +85,12 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                     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 };
@@ -163,7 +163,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                         : _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,
@@ -173,18 +175,20 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                         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
-                            ? (0, index_2.getNextGradient)(0, 0)[0]
-                            : ((_e = selectedPoint[0].gradient) === null || _e === void 0 ? void 0 : _e[0]) || (0, index_2.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
+                                ? (0, index_2.getNextGradient)(0, 0)[0]
+                                : ((_e = selectedPoint[0].gradient) === null || _e === void 0 ? void 0 : _e[0]) || (0, index_2.getNextGradient)(pointIndex, 0)[0]
+                            : calloutColor,
+                        data: selectedPoint[0].yAxisCalloutData,
+                        yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
+                    });
+                }
                 var hoverXValue = point.x instanceof Date ? (0, index_2.formatDate)(point.x, _this.props.useUTC) : point.x.toString();
                 return {
                     YValueHover: YValueHover,
@@ -210,7 +214,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                         _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,
@@ -315,9 +319,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                     var legend = {
                         title: legendTitle,
                         color: color,
-                        action: function () {
-                            _this._onLegendClick(legendTitle);
-                        },
                         hoverAction: function () {
                             _this._handleChartMouseLeave();
                             _this._onLegendHover(legendTitle);
@@ -332,9 +333,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                     var lineLegend = {
                         title: lineLegendText,
                         color: lineLegendColor,
-                        action: function () {
-                            _this._onLegendClick(lineLegendText);
-                        },
                         hoverAction: function () {
                             _this._handleChartMouseLeave();
                             _this._onLegendHover(lineLegendText);
@@ -346,7 +344,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                     };
                     actions.unshift(lineLegend);
                 }
-                var legends = (React.createElement(index_1.Legends, tslib_1.__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(index_1.Legends, tslib_1.__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) {
@@ -363,14 +361,13 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
              * 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;
@@ -434,8 +431,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                 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,
@@ -456,6 +453,14 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
             _this._cartesianChartRef = React.createRef();
             return _this;
         }
+        VerticalBarChartBase.prototype.componentDidUpdate = function (prevProps) {
+            var _a, _b, _c;
+            if (!(0, index_2.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();
@@ -475,7 +480,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                 tickValues: this.props.tickValues,
                 tickFormat: this.props.tickFormat,
             };
-            return !this._isChartEmpty() ? (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: index_2.ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: index_2.createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && this._noLegendHighlighted() && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: react_focus_1.FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: index_2.createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: index_2.findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_2.XAxisTypes.StringAxis && {
+            return !this._isChartEmpty() ? (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: index_2.ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: index_2.createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine &&
+                (this._noLegendHighlighted() || this._getHighlightedLegend().length > 1) && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: react_focus_1.FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: index_2.createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: index_2.findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_2.XAxisTypes.StringAxis && {
                 xAxisInnerPadding: this._xAxisInnerPadding,
                 xAxisOuterPadding: this._xAxisOuterPadding,
             }), { ref: this._cartesianChartRef, 
@@ -528,7 +534,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                 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,
@@ -538,7 +544,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                     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,
@@ -790,18 +796,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
             }
             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,
@@ -809,9 +803,28 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
         };
         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 ||