@fluentui/react-charting 5.23.20 → 5.23.21

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

@@ -255,7 +255,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                 var xBarScale;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var yBarScale = (0, d3_scale_1.scaleLinear)()
-                    .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 === index_2.XAxisTypes.NumericAxis) {
                     var xMax = (0, d3_array_1.max)(_this._points, function (point) { return point.x; });
@@ -347,6 +347,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                 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);
                 }
             };
             /**
@@ -452,6 +453,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
             this._adjustProps();
             this._xAxisLabels = this._points.map(function (point) { return point.x; });
             this._yMax = Math.max((0, d3_array_1.max)(this._points, function (point) { return point.y; }), this.props.yMaxValue || 0);
+            this._yMin = Math.min((0, d3_array_1.min)(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,
@@ -465,7 +467,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                 tickValues: this.props.tickValues,
                 tickFormat: this.props.tickFormat,
             };
-            return !this._isChartEmpty() ? (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, chartType: index_2.ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: index_2.createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && this._noLegendHighlighted() && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: react_focus_1.FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: index_2.createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: index_2.findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_2.XAxisTypes.StringAxis && {
+            return !this._isChartEmpty() ? (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: index_2.ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: index_2.createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && this._noLegendHighlighted() && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: react_focus_1.FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: index_2.createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: index_2.findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_2.XAxisTypes.StringAxis && {
                 xAxisInnerPadding: this._xAxisInnerPadding,
                 xAxisOuterPadding: this._xAxisOuterPadding,
             }), { 
@@ -527,11 +529,19 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                 });
             }
         };
+        // 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;
@@ -540,19 +550,25 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                     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) {
@@ -570,10 +586,10 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                         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: (0, Utilities_1.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: (0, Utilities_1.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) {
@@ -605,21 +621,28 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
             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 = (0, index_2.getBarWidth)(_this.props.barWidth, _this.props.maxBarWidth, xBarScale.bandwidth());
@@ -640,10 +663,10 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                         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: (0, Utilities_1.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: (0, Utilities_1.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) {
@@ -676,6 +699,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
             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;
@@ -684,19 +708,25 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                     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) {
@@ -714,10 +744,10 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                         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: (0, Utilities_1.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: (0, Utilities_1.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) {
@@ -766,17 +796,16 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
                 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 }, (0, index_2.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 }, (0, index_2.formatValueWithSIPrefix)(barValue)));
         };
         VerticalBarChartBase.prototype._isChartEmpty = function () {
-            return (this._points.length === 0 ||
-                ((0, d3_array_1.max)(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,