@fluentui/react-charting 5.24.3 → 5.24.5

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

@@ -379,7 +379,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         React.createElement("g", tslib_1.__assign({ id: "".concat(indexNumber, "-singleBar"), ref: function (e) { return (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)") }, (0, index_3.formatScientificLimitWidth)(barLabel)))));
+                            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'
+                            ? _this.props.yAxisTickFormat(barLabel)
+                            : (0, index_3.formatScientificLimitWidth)(barLabel)))));
                 });
                 // Removing un wanted tooltip div from DOM, when prop not provided.
                 if (!_this.props.showXAxisLablesTooltip) {
@@ -594,33 +596,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         }
                     });
                 }
-                if (_this._yAxisType === index_3.YAxisType.StringAxis) {
-                    var legendToYValues_1 = {};
-                    _this._points.forEach(function (xPoint) {
-                        xPoint.chartData.forEach(function (bar) {
-                            if (!legendToYValues_1[bar.legend]) {
-                                legendToYValues_1[bar.legend] = ["".concat(bar.data)];
-                            }
-                            else {
-                                legendToYValues_1[bar.legend].push("".concat(bar.data));
-                            }
-                        });
-                    });
-                    var yAxisLabels_1 = new Set();
-                    Object.values(legendToYValues_1).forEach(function (yValues) {
-                        yValues.forEach(function (yVal) {
-                            yAxisLabels_1.add(yVal);
-                        });
-                    });
-                    Object.values(_this._lineObject).forEach(function (linePoints) {
-                        linePoints.forEach(function (linePoint) {
-                            if (!linePoint.useSecondaryYScale) {
-                                yAxisLabels_1.add("".concat(linePoint.y));
-                            }
-                        });
-                    });
-                    _this._yAxisLabels = Array.from(yAxisLabels_1);
-                }
+                _this._yAxisLabels = _this._getOrderedYAxisLabels();
             };
             _this._getYDomainMargins = function (containerHeight) {
                 /**
@@ -647,6 +623,49 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 }
                 return tslib_1.__assign(tslib_1.__assign({}, _this.margins), { top: _this.margins.top + yAxisTickMarginTop });
             };
+            _this._getOrderedXAxisLabels = function () {
+                if (_this._xAxisType !== index_3.XAxisTypes.StringAxis) {
+                    return [];
+                }
+                return (0, index_3.sortAxisCategories)(_this._mapCategoryToValues(), _this.props.xAxisCategoryOrder);
+            };
+            _this._getOrderedYAxisLabels = function () {
+                if (_this._yAxisType !== index_3.YAxisType.StringAxis) {
+                    return [];
+                }
+                return (0, index_3.sortAxisCategories)(_this._mapCategoryToValues(true), _this.props.yAxisCategoryOrder);
+            };
+            _this._mapCategoryToValues = function (isYAxis) {
+                if (isYAxis === void 0) { isYAxis = false; }
+                var categoryToValues = {};
+                _this._points.forEach(function (point) {
+                    var _a;
+                    point.chartData.forEach(function (bar) {
+                        var category = (isYAxis ? bar.data : point.xAxisPoint);
+                        var value = isYAxis ? point.xAxisPoint : bar.data;
+                        if (!categoryToValues[category]) {
+                            categoryToValues[category] = [];
+                        }
+                        if (typeof value === 'number') {
+                            categoryToValues[category].push(value);
+                        }
+                    });
+                    (_a = point.lineData) === null || _a === void 0 ? void 0 : _a.forEach(function (linePoint) {
+                        if (isYAxis && linePoint.useSecondaryYScale) {
+                            return;
+                        }
+                        var category = (isYAxis ? linePoint.y : point.xAxisPoint);
+                        var value = isYAxis ? point.xAxisPoint : linePoint.y;
+                        if (!categoryToValues[category]) {
+                            categoryToValues[category] = [];
+                        }
+                        if (typeof value === 'number') {
+                            categoryToValues[category].push(value);
+                        }
+                    });
+                });
+                return categoryToValues;
+            };
             (0, Utilities_1.initializeComponentRef)(_this);
             _this.state = {
                 isCalloutVisible: false,
@@ -749,9 +768,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
         };
         VerticalStackedBarChartBase.prototype._createDataSetLayer = function () {
             var _this = this;
-            var tempArr = [];
             var dataset = this._points.map(function (singlePointData) {
-                tempArr.push(singlePointData.xAxisPoint);
                 if (_this._yAxisType === index_3.YAxisType.StringAxis) {
                     return {
                         x: singlePointData.xAxisPoint,
@@ -767,7 +784,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     y: total,
                 };
             });
-            this._xAxisLabels = tempArr;
+            this._xAxisLabels = this._getOrderedXAxisLabels();
             return dataset;
         };
         VerticalStackedBarChartBase.prototype._renderCallout = function (props) {
@@ -979,6 +996,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
         VerticalStackedBarChartBase.defaultProps = {
             maxBarWidth: 24,
             useUTC: true,
+            xAxisCategoryOrder: 'default',
+            yAxisCategoryOrder: 'default',
         };
         return VerticalStackedBarChartBase;
     }(React.Component));