@fluentui/react-charting 5.23.76 → 5.23.78

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

@@ -29,6 +29,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         var _a;
         var _this = _super.call(this, props) || this;
         _this._isRtl = getRTL();
+        _this.Y_ORIGIN = 0;
         _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);
@@ -106,7 +107,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         };
         _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 = [];
@@ -122,10 +123,12 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 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)") }));
                     }
@@ -139,7 +142,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 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", __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", __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,
@@ -233,7 +238,6 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 _this._barWidth = 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 === XAxisTypes.NumericAxis
                     ? singleChartData.xAxisPoint
                     : _this._xAxisType === XAxisTypes.DateAxis
@@ -242,7 +246,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 var xScaleBandwidthTranslate = _this._xAxisType !== 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;
                 }
@@ -250,6 +254,11 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 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];
@@ -277,12 +286,22 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                         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 = 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) {
@@ -333,7 +352,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),
-                    !_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)") }, 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)") }, formatValueWithSIPrefix(barLabel)))));
             });
             // Removing un wanted tooltip div from DOM, when prop not provided.
             if (!_this.props.showXAxisLablesTooltip) {
@@ -361,9 +382,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             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 = d3ScaleLinear()
-                .domain([0, yMax])
+                .domain(yDomain)
                 .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
             if (_this._xAxisType === XAxisTypes.NumericAxis) {
                 var xMax = d3Max(_this._dataset, function (point) { return point.x; });
@@ -412,7 +433,8 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         _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);
             }
         };
         /**
@@ -518,6 +540,21 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 (numLines > 0 ? " and ".concat(numLines, " lines") : '') +
                 '. ');
         };
+        _this._getMinMaxOfYAxis = function (dataset, yAxisType, useSecondaryYScale) {
+            if (!useSecondaryYScale) {
+                return 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: d3Min(values), endValue: d3Max(values) };
+        };
         initializeComponentRef(_this);
         _this.state = {
             isCalloutVisible: false,
@@ -583,7 +620,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 tickValues: this.props.tickValues,
                 tickFormat: this.props.tickFormat,
             };
-            return (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._dataset, chartType: ChartTypes.VerticalStackedBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, createYAxis: createNumericYAxis, tickParams: tickParams, legendBars: legendBars, getMinMaxOfYAxis: findVSBCNumericMinMaxOfY, datasetForXAxisDomain: this._xAxisLabels, isCalloutForStack: shouldFocusWholeStack, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, barwidth: this._barWidth, focusZoneDirection: isCalloutForStack || _isHavingLines_1 ? FocusZoneDirection.horizontal : FocusZoneDirection.vertical, getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
+            return (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._dataset, chartType: ChartTypes.VerticalStackedBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, createYAxis: createNumericYAxis, tickParams: tickParams, legendBars: legendBars, getMinMaxOfYAxis: this._getMinMaxOfYAxis, datasetForXAxisDomain: this._xAxisLabels, isCalloutForStack: shouldFocusWholeStack, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, barwidth: this._barWidth, focusZoneDirection: isCalloutForStack || _isHavingLines_1 ? FocusZoneDirection.horizontal : FocusZoneDirection.vertical, getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
                 xAxisInnerPadding: this._xAxisInnerPadding,
                 xAxisOuterPadding: this._xAxisOuterPadding,
             }), { ref: this._cartesianChartRef, showRoundOffXTickValues: !isScalePaddingDefined(this.props.xAxisInnerPadding, this.props.xAxisPadding), 
@@ -592,7 +629,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     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' }));
@@ -797,7 +834,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         // 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;