@fluentui/react-charting 5.25.1 → 5.25.3

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

@@ -8,9 +8,9 @@ import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { Legends } from '../Legends/index';
 import { CartesianChart, ChartHoverCard, } from '../../index';
 import { FocusZoneDirection } from '@fluentui/react-focus';
-import { formatDateToLocaleString } from '@fluentui/chart-utilities';
+import { formatDateToLocaleString, isInvalidValue } from '@fluentui/chart-utilities';
 import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, areArraysEqual, calculateLongestLabelWidth, YAxisType, sortAxisCategories, calcTotalWidth, calcBandwidth, calcRequiredWidth, } from '../../utilities/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 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
@@ -29,7 +29,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         _this._yAxisLabels = [];
         _this.toImage = function (opts) {
             var _a, _b;
-            return toImage((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this._isRtl, opts);
+            return exportChartsAsImage([{ container: (_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer }], _this.props.hideLegend ? undefined : (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this._isRtl, opts);
         };
         /**
          * This function tells us what to focus either the whole stack as focusable item.
@@ -55,7 +55,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             }
             return shouldFocusStackOnly;
         };
-        _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+        _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
             var domainNRangeValue;
             if (xAxisType === XAxisTypes.NumericAxis) {
                 domainNRangeValue = domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth);
@@ -153,7 +153,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                                 yScalePrimary(circlePoint.y), onMouseOver: _this._lineHover.bind(_this, circlePoint), onMouseLeave: _this._handleMouseOut, r: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, 
                         // Elements with visibility: hidden cannot receive focus, so use opacity: 0 instead to hide them.
                         // For more information, see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
-                        opacity: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity, transform: "translate(".concat(xScaleBandwidthTranslate, ", ").concat(yScaleBandwidthTranslate, ")"), ref: function (e) { return (circleRef.refElement = e); } }, (noBarsActive && (_this._noLegendHighlighted() || _this._isLegendHighlighted(item))
+                        opacity: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity, transform: "translate(".concat(xScaleBandwidthTranslate, ", ").concat(yScaleBandwidthTranslate, ")"), ref: function (e) {
+                            circleRef.refElement = e;
+                        } }, (noBarsActive && (_this._noLegendHighlighted() || _this._isLegendHighlighted(item))
                         ? {
                             'data-is-focusable': !_this.props.hideTooltip,
                             onFocus: _this._lineFocus.bind(_this, circlePoint, circleRef),
@@ -340,7 +342,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                                 React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
                                     React.createElement("stop", { offset: "0", stopColor: startColor }),
                                     React.createElement("stop", { offset: "100%", stopColor: endColor })))),
-                            React.createElement("path", __assign({ className: _this._classNames.opacityChangeOnHover, d: "\n                  M ".concat(xPoint, " ").concat(yPoint + barCornerRadius, "\n                  a ").concat(barCornerRadius, " ").concat(barCornerRadius, " 0 0 1 ").concat(barCornerRadius, " ").concat(-barCornerRadius, "\n                  h ").concat(_this._barWidth - 2 * barCornerRadius, "\n                  a ").concat(barCornerRadius, " ").concat(barCornerRadius, " 0 0 1 ").concat(barCornerRadius, " ").concat(barCornerRadius, "\n                  v ").concat(barHeight - barCornerRadius, "\n                  h ").concat(-_this._barWidth, "\n                  z\n                "), fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, ref: function (e) { return (ref.refElement = e); }, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, rectFocusProps))));
+                            React.createElement("path", __assign({ className: _this._classNames.opacityChangeOnHover, d: "\n                  M ".concat(xPoint, " ").concat(yPoint + barCornerRadius, "\n                  a ").concat(barCornerRadius, " ").concat(barCornerRadius, " 0 0 1 ").concat(barCornerRadius, " ").concat(-barCornerRadius, "\n                  h ").concat(_this._barWidth - 2 * barCornerRadius, "\n                  a ").concat(barCornerRadius, " ").concat(barCornerRadius, " 0 0 1 ").concat(barCornerRadius, " ").concat(barCornerRadius, "\n                  v ").concat(barHeight - barCornerRadius, "\n                  h ").concat(-_this._barWidth, "\n                  z\n                "), fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, ref: function (e) {
+                                    ref.refElement = e;
+                                }, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, rectFocusProps))));
                     }
                     if (barHeight < 0) {
                         return React.createElement(React.Fragment, { key: index + indexNumber }, " ");
@@ -350,7 +354,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                             React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
                                 React.createElement("stop", { offset: "0", stopColor: startColor }),
                                 React.createElement("stop", { offset: "100%", stopColor: endColor })))),
-                        React.createElement("rect", __assign({ className: _this._classNames.opacityChangeOnHover, x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, ref: function (e) { return (ref.refElement = e); } }, rectFocusProps, { transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }))));
+                        React.createElement("rect", __assign({ className: _this._classNames.opacityChangeOnHover, x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, ref: function (e) {
+                                ref.refElement = e;
+                            } }, rectFocusProps, { transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }))));
                 });
                 var groupRef = {};
                 var someBarsActive = singleChartData.chartData.filter(function (dataPoint) { return _this._noLegendHighlighted() || _this._isLegendHighlighted(dataPoint.legend); }).length > 0;
@@ -386,7 +392,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     }
                 }
                 return (React.createElement("g", { key: indexNumber + "".concat(shouldFocusWholeStack) },
-                    React.createElement("g", __assign({ id: "".concat(indexNumber, "-singleBar"), ref: function (e) { return (groupRef.refElement = e); } }, stackFocusProps), singleBar),
+                    React.createElement("g", __assign({ id: "".concat(indexNumber, "-singleBar"), ref: function (e) {
+                            groupRef.refElement = e;
+                        } }, stackFocusProps), singleBar),
                     !_this.props.hideLabels && _this._barWidth >= 16 && showLabel && (React.createElement("text", { x: xPoint + _this._barWidth / 2, 
                         //if total bar value >=0, show label above top bar, otherwise below bottom bar
                         y: barLabel >= _this.Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12, textAnchor: "middle", className: _this._classNames.barLabel, "aria-label": "Total: ".concat(barLabel), role: "img", transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, typeof _this.props.yAxisTickFormat === 'function'
@@ -761,13 +769,17 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         configurable: true
     });
     VerticalStackedBarChartBase.prototype._adjustProps = function () {
+        var _a;
         this._points = this.props.data || [];
         this._barWidth = getBarWidth(this.props.barWidth, this.props.maxBarWidth);
         var theme = this.props.theme;
         var palette = theme.palette;
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
-        this._xAxisType = getTypeOfAxis(this.props.data[0].xAxisPoint, true);
+        var firstXValue = (_a = this._points[0]) === null || _a === void 0 ? void 0 : _a.xAxisPoint;
+        this._xAxisType = isInvalidValue(firstXValue)
+            ? XAxisTypes.StringAxis
+            : getTypeOfAxis(firstXValue, true);
         this._lineObject = this._getFormattedLineData(this.props.data);
         this._xAxisInnerPadding = getScalePadding(this.props.xAxisInnerPadding, this.props.xAxisPadding, this._xAxisType === XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         this._xAxisOuterPadding = getScalePadding(this.props.xAxisOuterPadding, this.props.xAxisPadding, 0);
@@ -860,7 +872,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 legendsOfLine.push(legend);
             });
         }
-        var totalLegends = legendsOfLine.concat(actions);
+        var totalLegends = actions.concat(legendsOfLine);
         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), ref: this._legendsRef })));
     };
     VerticalStackedBarChartBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {