@fluentui/react-charting 5.24.3 → 5.24.5

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

@@ -9,7 +9,7 @@ import { Legends } from '../Legends/index';
 import { CartesianChart, ChartHoverCard, } from '../../index';
 import { FocusZoneDirection } from '@fluentui/react-focus';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, areArraysEqual, calculateLongestLabelWidth, YAxisType, } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVSBCNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, areArraysEqual, calculateLongestLabelWidth, YAxisType, sortAxisCategories, } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 var getClassNames = classNamesFunction();
 var COMPONENT_NAME = 'VERTICAL STACKED BAR CHART';
@@ -388,7 +388,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     React.createElement("g", __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)") }, 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)
+                        : formatScientificLimitWidth(barLabel)))));
             });
             // Removing un wanted tooltip div from DOM, when prop not provided.
             if (!_this.props.showXAxisLablesTooltip) {
@@ -603,33 +605,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     }
                 });
             }
-            if (_this._yAxisType === 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) {
             /**
@@ -656,6 +632,49 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             }
             return __assign(__assign({}, _this.margins), { top: _this.margins.top + yAxisTickMarginTop });
         };
+        _this._getOrderedXAxisLabels = function () {
+            if (_this._xAxisType !== XAxisTypes.StringAxis) {
+                return [];
+            }
+            return sortAxisCategories(_this._mapCategoryToValues(), _this.props.xAxisCategoryOrder);
+        };
+        _this._getOrderedYAxisLabels = function () {
+            if (_this._yAxisType !== YAxisType.StringAxis) {
+                return [];
+            }
+            return 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;
+        };
         initializeComponentRef(_this);
         _this.state = {
             isCalloutVisible: false,
@@ -758,9 +777,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
     };
     VerticalStackedBarChartBase.prototype._createDataSetLayer = function () {
         var _this = this;
-        var tempArr = [];
         var dataset = this._points.map(function (singlePointData) {
-            tempArr.push(singlePointData.xAxisPoint);
             if (_this._yAxisType === YAxisType.StringAxis) {
                 return {
                     x: singlePointData.xAxisPoint,
@@ -776,7 +793,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 y: total,
             };
         });
-        this._xAxisLabels = tempArr;
+        this._xAxisLabels = this._getOrderedXAxisLabels();
         return dataset;
     };
     VerticalStackedBarChartBase.prototype._renderCallout = function (props) {
@@ -988,6 +1005,8 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
     VerticalStackedBarChartBase.defaultProps = {
         maxBarWidth: 24,
         useUTC: true,
+        xAxisCategoryOrder: 'default',
+        yAxisCategoryOrder: 'default',
     };
     return VerticalStackedBarChartBase;
 }(React.Component));