@fluentui/react-charting 5.23.76 → 5.23.78

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

@@ -21,6 +21,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             var _a;
             var _this = _super.call(this, props) || this;
             _this._isRtl = (0, Utilities_1.getRTL)();
+            _this.Y_ORIGIN = 0;
             _this.toImage = function (opts) {
                 var _a, _b;
                 return (0, image_export_utils_1.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);
@@ -98,7 +99,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             };
             _this._createLines = function (
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            xScale, yScale, containerHeight, containerWidth, secondaryYScale) {
+            xScale, yScalePrimary, containerHeight, containerWidth, yScaleSecondary) {
                 var _a;
                 var lineObject = _this._getFormattedLineData(_this.props.data);
                 var lines = [];
@@ -114,10 +115,12 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     var shouldHighlight = _this._isLegendHighlighted(item) || _this._noLegendHighlighted(); // item is legend name
                     for (var i = 1; i < lineObject[item].length; i++) {
                         var x1 = xScale(lineObject[item][i - 1].xItem.xAxisPoint);
-                        var useSecondaryYScale = lineObject[item][i - 1].useSecondaryYScale && lineObject[item][i].useSecondaryYScale && secondaryYScale;
-                        var y1 = useSecondaryYScale ? secondaryYScale(lineObject[item][i - 1].y) : yScale(lineObject[item][i - 1].y);
+                        var useSecondaryYScale = lineObject[item][i - 1].useSecondaryYScale && lineObject[item][i].useSecondaryYScale && yScaleSecondary;
+                        var y1 = useSecondaryYScale
+                            ? yScaleSecondary(lineObject[item][i - 1].y)
+                            : yScalePrimary(lineObject[item][i - 1].y);
                         var x2 = xScale(lineObject[item][i].xItem.xAxisPoint);
-                        var y2 = useSecondaryYScale ? secondaryYScale(lineObject[item][i].y) : yScale(lineObject[item][i].y);
+                        var y2 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i].y) : yScalePrimary(lineObject[item][i].y);
                         if (lineBorderWidth > 0) {
                             borderForLines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-BorderLine"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3 + lineBorderWidth * 2, fill: "transparent", strokeLinecap: "round", stroke: theme.semanticColors.bodyBackground, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }));
                         }
@@ -131,7 +134,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     lineObject[item].forEach(function (circlePoint, subIndex) {
                         // Create an object to store line point ref so that the object can be passed by reference to the focus handler
                         var circleRef = { refElement: null };
-                        dots.push(React.createElement("circle", tslib_1.__assign({ key: "".concat(index, "-").concat(subIndex, "-dot"), cx: xScale(circlePoint.xItem.xAxisPoint), cy: circlePoint.useSecondaryYScale && secondaryYScale ? secondaryYScale(circlePoint.y) : yScale(circlePoint.y), onMouseOver: _this._isLegendHighlighted(item)
+                        dots.push(React.createElement("circle", tslib_1.__assign({ key: "".concat(index, "-").concat(subIndex, "-dot"), cx: xScale(circlePoint.xItem.xAxisPoint), cy: circlePoint.useSecondaryYScale && yScaleSecondary
+                                ? yScaleSecondary(circlePoint.y)
+                                : yScalePrimary(circlePoint.y), onMouseOver: _this._isLegendHighlighted(item)
                                 ? _this._lineHover.bind(_this, circlePoint)
                                 : _this._onStackHover.bind(_this, circlePoint.xItem) }, (_this._isLegendHighlighted(item) && {
                             onMouseLeave: _this._lineHoverOut,
@@ -225,7 +230,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     _this._barWidth = (0, index_3.getBarWidth)(_this.props.barWidth, _this.props.maxBarWidth, xBarScale.bandwidth());
                 }
                 var bars = _this._points.map(function (singleChartData, indexNumber) {
-                    var yPoint = containerHeight - _this.margins.bottom;
                     var xPoint = xBarScale(_this._xAxisType === index_3.XAxisTypes.NumericAxis
                         ? singleChartData.xAxisPoint
                         : _this._xAxisType === index_3.XAxisTypes.DateAxis
@@ -234,7 +238,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     var xScaleBandwidthTranslate = _this._xAxisType !== index_3.XAxisTypes.StringAxis ? -_this._barWidth / 2 : (xBarScale.bandwidth() - _this._barWidth) / 2;
                     var barTotalValue = 0;
                     // Removing datapoints with zero data
-                    var barsToDisplay = singleChartData.chartData.filter(function (point) { return point.data > 0; });
+                    var barsToDisplay = singleChartData.chartData.filter(function (point) { return point.data !== 0; });
                     if (!barsToDisplay.length) {
                         return undefined;
                     }
@@ -242,6 +246,11 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     if (heightValueScale < 0) {
                         return undefined;
                     }
+                    var yBaseline = containerHeight - _this.margins.bottom - yBarScale(_this.Y_ORIGIN);
+                    var yPositiveStart = yBaseline;
+                    var yNegativeStart = yBaseline;
+                    var yPoint = 0;
+                    var heightOfLastBar = 0;
                     var singleBar = barsToDisplay.map(function (point, index) {
                         var _a, _b, _c, _d;
                         var startColor = point.color ? point.color : _this._colors[index];
@@ -269,12 +278,22 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                             onClick: _this._onClick.bind(_this, point),
                             role: 'img',
                         };
-                        var barHeight = heightValueScale * point.data;
-                        if (barHeight < Math.max((heightValueScale * adjustedTotalHeight) / 100.0, barMinimumHeight)) {
-                            barHeight = Math.max((heightValueScale * adjustedTotalHeight) / 100.0, barMinimumHeight);
+                        var barHeight = Math.abs(heightValueScale * point.data);
+                        var minHeight = Math.max((heightValueScale * adjustedTotalHeight) / 100.0, barMinimumHeight);
+                        if (barHeight < minHeight) {
+                            barHeight = minHeight;
+                        }
+                        var gapOffset = index ? gapHeight : 0;
+                        if (point.data >= _this.Y_ORIGIN) {
+                            yPositiveStart -= barHeight + gapOffset;
+                            yPoint = yPositiveStart;
+                        }
+                        else {
+                            yPoint = yNegativeStart + gapOffset;
+                            yNegativeStart = yPoint + barHeight;
                         }
-                        yPoint = yPoint - barHeight - (index ? gapHeight : 0);
                         barTotalValue += point.data;
+                        heightOfLastBar = index === barsToDisplay.length - 1 ? barHeight : 0;
                         var gradientId = (0, Utilities_1.getId)('VSBC_Gradient') + "_".concat(indexNumber, "_").concat(index);
                         // If set, apply the corner radius to the top of the final bar
                         if (barCornerRadius && barHeight > barCornerRadius && index === barsToDisplay.length - 1) {
@@ -325,7 +344,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     }
                     return (React.createElement("g", { key: indexNumber + "".concat(shouldFocusWholeStack) },
                         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, y: yPoint - 6, textAnchor: "middle", className: _this._classNames.barLabel, "aria-label": "Total: ".concat(barLabel), role: "img", transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, (0, index_3.formatValueWithSIPrefix)(barLabel)))));
+                        !_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.formatValueWithSIPrefix)(barLabel)))));
                 });
                 // Removing un wanted tooltip div from DOM, when prop not provided.
                 if (!_this.props.showXAxisLablesTooltip) {
@@ -353,9 +374,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 return bars.filter(function (bar) { return !!bar; });
             };
             _this._getScales = function (containerHeight, containerWidth) {
-                var yMax = _this._yMax;
+                var yDomain = [Math.min(_this.Y_ORIGIN, _this._yMin), Math.max(_this.Y_ORIGIN, _this._yMax)];
                 var yBarScale = (0, d3_scale_1.scaleLinear)()
-                    .domain([0, yMax])
+                    .domain(yDomain)
                     .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
                 if (_this._xAxisType === index_3.XAxisTypes.NumericAxis) {
                     var xMax = (0, d3_array_1.max)(_this._dataset, function (point) { return point.x; });
@@ -404,7 +425,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _this._getAxisData = function (yAxisData) {
                 if (yAxisData && yAxisData.yAxisDomainValues.length) {
                     var domainValue = yAxisData.yAxisDomainValues;
-                    _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
+                    _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || _this.Y_ORIGIN);
+                    _this._yMin = Math.min(domainValue[0], _this.props.yMinValue || _this.Y_ORIGIN);
                 }
             };
             /**
@@ -510,6 +532,21 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     (numLines > 0 ? " and ".concat(numLines, " lines") : '') +
                     '. ');
             };
+            _this._getMinMaxOfYAxis = function (dataset, yAxisType, useSecondaryYScale) {
+                if (!useSecondaryYScale) {
+                    return (0, index_3.findVSBCNumericMinMaxOfY)(dataset);
+                }
+                var values = [];
+                _this.props.data.forEach(function (xPoint) {
+                    var _a;
+                    (_a = xPoint.lineData) === null || _a === void 0 ? void 0 : _a.forEach(function (point) {
+                        if (point.useSecondaryYScale) {
+                            values.push(point.y);
+                        }
+                    });
+                });
+                return { startValue: (0, d3_array_1.min)(values), endValue: (0, d3_array_1.max)(values) };
+            };
             (0, Utilities_1.initializeComponentRef)(_this);
             _this.state = {
                 isCalloutVisible: false,
@@ -575,7 +612,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     tickValues: this.props.tickValues,
                     tickFormat: this.props.tickFormat,
                 };
-                return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._dataset, chartType: index_3.ChartTypes.VerticalStackedBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, createYAxis: index_3.createNumericYAxis, tickParams: tickParams, legendBars: legendBars, getMinMaxOfYAxis: index_3.findVSBCNumericMinMaxOfY, datasetForXAxisDomain: this._xAxisLabels, isCalloutForStack: shouldFocusWholeStack, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, barwidth: this._barWidth, focusZoneDirection: isCalloutForStack || _isHavingLines_1 ? react_focus_1.FocusZoneDirection.horizontal : react_focus_1.FocusZoneDirection.vertical, getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_3.XAxisTypes.StringAxis && {
+                return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._dataset, chartType: index_3.ChartTypes.VerticalStackedBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, createYAxis: index_3.createNumericYAxis, tickParams: tickParams, legendBars: legendBars, getMinMaxOfYAxis: this._getMinMaxOfYAxis, datasetForXAxisDomain: this._xAxisLabels, isCalloutForStack: shouldFocusWholeStack, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, barwidth: this._barWidth, focusZoneDirection: isCalloutForStack || _isHavingLines_1 ? react_focus_1.FocusZoneDirection.horizontal : react_focus_1.FocusZoneDirection.vertical, getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_3.XAxisTypes.StringAxis && {
                     xAxisInnerPadding: this._xAxisInnerPadding,
                     xAxisOuterPadding: this._xAxisOuterPadding,
                 }), { ref: this._cartesianChartRef, showRoundOffXTickValues: !(0, index_3.isScalePaddingDefined)(this.props.xAxisInnerPadding, this.props.xAxisPadding), 
@@ -584,7 +621,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         return (React.createElement(React.Fragment, null,
                             React.createElement("g", null, _this._bars),
                             React.createElement("g", null, _isHavingLines_1 &&
-                                _this._createLines(props.xScale, props.yScale, props.containerHeight, props.containerWidth, props.yScaleSecondary))));
+                                _this._createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary))));
                     } })));
             }
             return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
@@ -789,7 +826,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             // When displaying gaps between the bars, the height of each bar is
             // adjusted so that the total of all bars is not changed by the gaps
             var totalData = bars.reduce(function (iter, value) { return iter + Math.abs(value.data); }, 0);
-            var totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : yBarScale(totalData);
+            var totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(this.Y_ORIGIN));
             var sumOfPercent = 0;
             bars.forEach(function (point) {
                 var value = (Math.abs(point.data) / totalData) * 100;