@fluentui/react-charting 5.23.20 → 5.23.21

package/lib/components/VerticalBarChart/VerticalBarChart.base.js

@@ -262,7 +262,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             var xBarScale;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var yBarScale = d3ScaleLinear()
-                .domain([0, _this._yMax])
+                .domain([_this.props.supportNegativeData ? _this._yMin : 0, _this._yMax])
                 .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
             if (_this._xAxisType === XAxisTypes.NumericAxis) {
                 var xMax = d3Max(_this._points, function (point) { return point.x; });
@@ -354,6 +354,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             if (yAxisData && yAxisData.yAxisDomainValues.length) {
                 var domainValue = yAxisData.yAxisDomainValues;
                 _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
+                _this._yMin = Math.min(domainValue[0], _this.props.yMinValue || 0);
             }
         };
         /**
@@ -459,6 +460,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         this._adjustProps();
         this._xAxisLabels = this._points.map(function (point) { return point.x; });
         this._yMax = Math.max(d3Max(this._points, function (point) { return point.y; }), this.props.yMaxValue || 0);
+        this._yMin = Math.min(d3Min(this._points, function (point) { return point.y; }), this.props.yMinValue || 0);
         var legendBars = this._getLegendData(this._points, this.props.theme.palette);
         this._classNames = getClassNames(this.props.styles, {
             theme: this.props.theme,
@@ -472,7 +474,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             tickValues: this.props.tickValues,
             tickFormat: this.props.tickFormat,
         };
-        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && this._noLegendHighlighted() && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && this._noLegendHighlighted() && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
             xAxisInnerPadding: this._xAxisInnerPadding,
             xAxisOuterPadding: this._xAxisOuterPadding,
         }), { 
@@ -534,11 +536,19 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             });
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    VerticalBarChartBase.prototype._calculateMinBarHeight = function (yMin, yMax, yReferencePoint, yBarScale) {
+        var maxHeightFromBaseline = yMax < 0
+            ? Math.abs(yMin - yReferencePoint)
+            : Math.max(Math.abs(yMax - yReferencePoint), Math.abs(yMin - yReferencePoint));
+        return Math.ceil(yBarScale(maxHeightFromBaseline) / 100.0);
+    };
     VerticalBarChartBase.prototype._createNumericBars = function (containerHeight, containerWidth, xElement) {
         var _this = this;
         var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
         var _b = this._getScales(containerHeight, containerWidth), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
         var colorScale = this._createColors();
+        var yReferencePoint = this._yMax < 0 ? this._yMax : 0;
         var bars = this._points.map(function (point, index) {
             var _a, _b, _c, _d, _e, _f;
             var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
@@ -547,19 +557,25 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 legendColor: _this.state.color,
                 shouldHighlight: shouldHighlight,
             });
-            var barHeight = Math.max(yBarScale(point.y), 0);
-            var adjustedBarHeight = 0;
-            if (barHeight <= 0) {
+            var barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
+            var isHeightNegative = barHeight < 0;
+            barHeight = Math.abs(barHeight);
+            // Calculate threshold for minimum visible bar height
+            var minBarHeight = _this._calculateMinBarHeight(_this._yMin, _this._yMax, yReferencePoint, yBarScale);
+            var adjustedBarHeight = barHeight;
+            if (barHeight === 0 || (isHeightNegative && !_this.props.supportNegativeData)) {
                 return React.createElement(React.Fragment, { key: point.x }, " ");
             }
-            else if (barHeight <= Math.ceil(yBarScale(_this._yMax) / 100.0)) {
-                adjustedBarHeight = Math.ceil(yBarScale(_this._yMax) / 100.0);
-            }
-            else {
-                adjustedBarHeight = barHeight;
+            // Adjust bar height if it's smaller than the threshold
+            else if (barHeight <= minBarHeight) {
+                adjustedBarHeight = minBarHeight;
             }
             var xPoint = xBarScale(point.x) - _this._barWidth / 2;
-            var yPoint = containerHeight - _this.margins.bottom - adjustedBarHeight;
+            var yPoint = containerHeight -
+                _this.margins.bottom -
+                (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) -
+                yBarScale(yReferencePoint);
+            var baselineHeight = containerHeight - _this.margins.bottom - yBarScale(yReferencePoint);
             var startColor = point.color && !useSingleColor ? point.color : colorScale(point.y);
             var endColor = startColor;
             if (_this.props.enableGradient) {
@@ -577,10 +593,10 @@ var VerticalBarChartBase = /** @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", { id: getId('_VBC_bar_'), x: xPoint, className: _this._classNames.opacityChangeOnHover, y: yPoint, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, height: adjustedBarHeight, ref: function (e) {
+                React.createElement("rect", { id: getId('_VBC_bar_'), x: xPoint, className: _this._classNames.opacityChangeOnHover, y: !isHeightNegative ? yPoint : baselineHeight, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, height: adjustedBarHeight, ref: function (e) {
                         _this._refCallback(e, point.legend);
                     }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), onBlur: _this._onBarLeave, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
-                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend)));
+                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative)));
         });
         // Removing un wanted tooltip div from DOM, when prop not provided.
         if (!this.props.showXAxisLablesTooltip) {
@@ -612,21 +628,28 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
         var _b = this._getScales(containerHeight, containerWidth), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
         var colorScale = this._createColors();
+        var yReferencePoint = this._yMax < 0 ? this._yMax : 0;
         var bars = this._points.map(function (point, index) {
             var _a, _b, _c, _d, _e, _f;
-            var barHeight = Math.max(yBarScale(point.y), 0);
-            var adjustedBarHeight = 0;
-            if (barHeight <= 0) {
-                return React.createElement(React.Fragment, { key: point.x instanceof Date ? point.x.getTime() : point.x }, " ");
+            var barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
+            var isHeightNegative = barHeight < 0;
+            barHeight = Math.abs(barHeight);
+            // Calculate threshold for minimum visible bar height
+            var minBarHeight = _this._calculateMinBarHeight(_this._yMin, _this._yMax, yReferencePoint, yBarScale);
+            var adjustedBarHeight = barHeight;
+            if (barHeight === 0 || (isHeightNegative && !_this.props.supportNegativeData)) {
+                return React.createElement(React.Fragment, { key: point.x }, " ");
             }
-            else if (barHeight <= Math.ceil(yBarScale(_this._yMax) / 100.0)) {
-                adjustedBarHeight = Math.ceil(yBarScale(_this._yMax) / 100.0);
-            }
-            else {
-                adjustedBarHeight = barHeight;
+            // Adjust bar height if it's smaller than the threshold
+            else if (barHeight <= minBarHeight) {
+                adjustedBarHeight = minBarHeight;
             }
             var xPoint = xBarScale(point.x);
-            var yPoint = containerHeight - _this.margins.bottom - adjustedBarHeight;
+            var yPoint = containerHeight -
+                _this.margins.bottom -
+                (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) -
+                yBarScale(yReferencePoint);
+            var baselineHeight = containerHeight - _this.margins.bottom - yBarScale(yReferencePoint);
             // Setting the bar width here is safe because there are no dependencies earlier in the code
             // that rely on the width of bars in vertical bar charts with string x-axis.
             _this._barWidth = getBarWidth(_this.props.barWidth, _this.props.maxBarWidth, xBarScale.bandwidth());
@@ -647,10 +670,10 @@ var VerticalBarChartBase = /** @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", { id: getId('_VBC_bar_'), x: xPoint, y: yPoint, width: _this._barWidth, height: adjustedBarHeight, "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
+                React.createElement("rect", { id: getId('_VBC_bar_'), x: xPoint, y: !isHeightNegative ? yPoint : baselineHeight, width: _this._barWidth, height: adjustedBarHeight, "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
                         _this._refCallback(e, point.legend);
                     }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), onMouseLeave: _this._onBarLeave, onBlur: _this._onBarLeave, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
-                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend)));
+                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative)));
         });
         // Removing un wanted tooltip div from DOM, when prop not provided.
         if (!this.props.showXAxisLablesTooltip) {
@@ -683,6 +706,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
         var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
         var _b = this._getScales(containerHeight, containerWidth), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
         var colorScale = this._createColors();
+        var yReferencePoint = this._yMax < 0 ? this._yMax : 0;
         var bars = this._points.map(function (point, index) {
             var _a, _b, _c, _d, _e, _f;
             var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
@@ -691,19 +715,25 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 legendColor: _this.state.color,
                 shouldHighlight: shouldHighlight,
             });
-            var barHeight = Math.max(yBarScale(point.y), 0);
-            var adjustedBarHeight = 0;
-            if (barHeight <= 0) {
-                return React.createElement(React.Fragment, { key: point.x instanceof Date ? point.x.getTime() : point.x }, " ");
-            }
-            else if (barHeight <= Math.ceil(yBarScale(_this._yMax) / 100.0)) {
-                adjustedBarHeight = Math.ceil(yBarScale(_this._yMax) / 100.0);
+            var barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
+            var isHeightNegative = barHeight < 0;
+            barHeight = Math.abs(barHeight);
+            // Calculate threshold for minimum visible bar height
+            var minBarHeight = _this._calculateMinBarHeight(_this._yMin, _this._yMax, yReferencePoint, yBarScale);
+            var adjustedBarHeight = barHeight;
+            if (barHeight === 0 || (isHeightNegative && !_this.props.supportNegativeData)) {
+                return React.createElement(React.Fragment, { key: point.x }, " ");
             }
-            else {
-                adjustedBarHeight = barHeight;
+            // Adjust bar height if it's smaller than the threshold
+            else if (barHeight <= minBarHeight) {
+                adjustedBarHeight = minBarHeight;
             }
             var xPoint = xBarScale(point.x) - _this._barWidth / 2;
-            var yPoint = containerHeight - _this.margins.bottom - adjustedBarHeight;
+            var yPoint = containerHeight -
+                _this.margins.bottom -
+                (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) -
+                yBarScale(yReferencePoint);
+            var baselineHeight = containerHeight - _this.margins.bottom - yBarScale(yReferencePoint);
             var startColor = point.color && !useSingleColor ? point.color : colorScale(point.y);
             var endColor = startColor;
             if (_this.props.enableGradient) {
@@ -721,10 +751,10 @@ var VerticalBarChartBase = /** @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", { id: getId('_VBC_bar_'), x: xPoint, className: _this._classNames.opacityChangeOnHover, y: yPoint, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, height: adjustedBarHeight, ref: function (e) {
+                React.createElement("rect", { id: getId('_VBC_bar_'), x: xPoint, className: _this._classNames.opacityChangeOnHover, y: !isHeightNegative ? yPoint : baselineHeight, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, height: adjustedBarHeight, ref: function (e) {
                         _this._refCallback(e, point.legend);
                     }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), onBlur: _this._onBarLeave, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
-                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend)));
+                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative)));
         });
         // Removing un wanted tooltip div from DOM, when prop not provided.
         if (!this.props.showXAxisLablesTooltip) {
@@ -773,17 +803,16 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             activeLegend: '',
         });
     };
-    VerticalBarChartBase.prototype._renderBarLabel = function (xPoint, yPoint, barValue, legend) {
+    VerticalBarChartBase.prototype._renderBarLabel = function (xPoint, yPoint, barValue, legend, isNegativeBar) {
         if (this.props.hideLabels ||
             this._barWidth < 16 ||
             !(this._legendHighlighted(legend) || this._noLegendHighlighted())) {
             return null;
         }
-        return (React.createElement("text", { x: xPoint + this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: this._classNames.barLabel, "aria-hidden": true }, formatValueWithSIPrefix(barValue)));
+        return (React.createElement("text", { x: xPoint + this._barWidth / 2, y: isNegativeBar ? yPoint + 12 : yPoint - 6, textAnchor: "middle", className: this._classNames.barLabel, "aria-hidden": true }, formatValueWithSIPrefix(barValue)));
     };
     VerticalBarChartBase.prototype._isChartEmpty = function () {
-        return (this._points.length === 0 ||
-            (d3Max(this._points, function (point) { return point.y; }) <= 0 && !this._isHavingLine));
+        return this._points.length === 0 || (this._points.every(function (point) { return point.y === 0; }) && !this._isHavingLine);
     };
     VerticalBarChartBase.defaultProps = {
         maxBarWidth: 24,