@fluentui/react-charts 9.1.3 → 9.1.4

package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { max as d3Max } from 'd3-array';
+import { max as d3Max, min as d3Min } from 'd3-array';
 import { select as d3Select } from 'd3-selection';
 import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';
 import { Legends } from '../../components/Legends/Legends';
@@ -7,7 +7,8 @@ import { useId } from '@fluentui/react-utilities';
 import { useHorizontalBarChartWithAxisStyles } from './useHorizontalBarChartWithAxisStyles.styles';
 import { CartesianChart } from '../CommonComponents/CartesianChart';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
-import { ChartTypes, getAccessibleDataObject, YAxisType, XAxisTypes, getTypeOfAxis, getNextColor, areArraysEqual, useRtl, DataVizPalette, getColorFromToken } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, YAxisType, XAxisTypes, getTypeOfAxis, getNextColor, areArraysEqual, useRtl, DataVizPalette, getColorFromToken, computeLongestBars, domainRangeOfNumericForHorizontalBarChartWithAxis, groupChartDataByYValue, MIN_DOMAIN_MARGIN } from '../../utilities/index';
+import { getClosestPairDiffAndRange } from '../../utilities/vbc-utils';
 export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     var _props_legendProps, _props_legendProps1, _props_legendProps2, _props_legendProps3;
     const _refArray = [];
@@ -27,7 +28,13 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
     let _calloutAnchorPoint;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let tooltipElement;
+    let _longestBarPositiveTotalValue;
+    let _longestBarNegativeTotalValue;
+    let _domainMargin = MIN_DOMAIN_MARGIN;
+    var _props_yAxisPadding;
+    let _yAxisPadding = (_props_yAxisPadding = props.yAxisPadding) !== null && _props_yAxisPadding !== void 0 ? _props_yAxisPadding : 0.5;
     const cartesianChartRef = React.useRef(null);
+    const X_ORIGIN = 0;
     const [color, setColor] = React.useState('');
     const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
     const [isLegendSelected, setIsLegendSelected] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) && props.legendProps.selectedLegends.length > 0 || ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegend) !== undefined);
@@ -116,7 +123,18 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
         return props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout) : null;
     }
     function _getGraphData(xScale, yScale, containerHeight, containerWidth, xElement, yElement) {
-        return _bars = _yAxisType === YAxisType.NumericAxis ? _createNumericBars(containerHeight, containerWidth, xElement, yElement) : _createStringBars(containerHeight, containerWidth, xElement, yElement);
+        const stackedChartData = groupChartDataByYValue(_points);
+        const longestBars = computeLongestBars(stackedChartData, X_ORIGIN);
+        _longestBarPositiveTotalValue = longestBars.longestPositiveBar;
+        _longestBarNegativeTotalValue = longestBars.longestNegativeBar;
+        const { xBarScale, yBarScale } = _yAxisType === YAxisType.NumericAxis ? _getScales(containerHeight, containerWidth, true) : _getScales(containerHeight, containerWidth, false);
+        const xRange = xBarScale.range();
+        let allBars = [];
+        // when the chart mounts, the xRange[1] is sometimes seen to be < 0 (like -40) while xRange[0] > 0.
+        if (xRange[0] < xRange[1]) {
+            allBars = stackedChartData.map((singleBarData)=>_yAxisType === YAxisType.NumericAxis ? _createNumericBars(containerHeight, containerWidth, xElement, yElement, singleBarData, xBarScale, yBarScale) : _createStringBars(containerHeight, containerWidth, xElement, yElement, singleBarData, xBarScale, yBarScale)).flat();
+        }
+        return _bars = allBars;
     }
     function _createColors() {
         const increment = _colors.length <= 1 ? 1 : 1 / (_colors.length - 1);
@@ -184,46 +202,43 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
         }
     }
     function _getScales(containerHeight, containerWidth, isNumericScale) {
+        const xMax = _longestBarPositiveTotalValue;
+        const xMin = _longestBarNegativeTotalValue;
+        const xDomain = [
+            Math.min(X_ORIGIN, xMin),
+            Math.max(X_ORIGIN, xMax)
+        ];
         if (isNumericScale) {
-            const xMax = d3Max(_points, (point)=>point.x);
             const yMax = d3Max(_points, (point)=>point.y);
-            const xBarScale = d3ScaleLinear().domain(_isRtl ? [
-                xMax,
-                0
-            ] : [
-                0,
-                xMax
-            ]).nice().range([
+            const yMin = d3Min(_points, (point)=>point.y);
+            const yDomainMax = Math.max(yMax, props.yMaxValue || 0);
+            // Default to 0 if yMinValue is not provided.
+            const yMinProp = props.yMinValue || 0;
+            const yDomainMin = Math.min(yMin, yMinProp);
+            const xBarScale = d3ScaleLinear().domain(xDomain).nice().range([
                 _margins.left,
                 containerWidth - _margins.right
             ]);
             const yBarScale = d3ScaleLinear().domain([
-                0,
-                yMax
+                yDomainMin,
+                yDomainMax
             ]).range([
-                containerHeight - _margins.bottom,
-                _margins.top
+                containerHeight - (_margins.bottom + _domainMargin),
+                _margins.top + _domainMargin
             ]);
             return {
                 xBarScale,
                 yBarScale
             };
         } else {
-            const xMax = d3Max(_points, (point)=>point.x);
             // please note these padding default values must be consistent in here
             // and CatrtesianChartBase w for more details refer example
             // http://using-d3js.com/04_07_ordinal_scales.html
             const yBarScale = d3ScaleBand().domain(_yAxisLabels).range([
-                containerHeight - _margins.bottom - _barHeight / 2,
-                _margins.top + _barHeight / 2
-            ]).padding(props.yAxisPadding || 0);
-            const xBarScale = d3ScaleLinear().domain(_isRtl ? [
-                xMax,
-                0
-            ] : [
-                0,
-                xMax
-            ]).nice().range([
+                containerHeight - (_margins.bottom + _domainMargin),
+                _margins.top + _domainMargin
+            ]).padding(_yAxisPadding);
+            const xBarScale = d3ScaleLinear().domain(xDomain).nice().range([
                 _margins.left,
                 containerWidth - _margins.right
             ]);
@@ -233,22 +248,37 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
             };
         }
     }
-    function _createNumericBars(containerHeight, containerWidth, xElement, yElement) {
+    function _createNumericBars(containerHeight, containerWidth, xElement, yElement, singleBarData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    xBarScale, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    yBarScale) {
         const { useSingleColor = false } = props;
-        const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth, true);
         const sortedBars = [
-            ..._points
+            ...singleBarData
         ];
         sortedBars.sort((a, b)=>{
             const aValue = typeof a.y === 'number' ? a.y : parseFloat(a.y);
             const bValue = typeof b.y === 'number' ? b.y : parseFloat(b.y);
             return bValue - aValue;
         });
+        let prevWidthPositive = 0;
+        let prevWidthNegative = 0;
+        let prevPoint = 0;
+        const totalPositiveBars = singleBarData.filter((point)=>point.x >= X_ORIGIN).length;
+        const totalNegativeBars = singleBarData.length - totalPositiveBars;
+        let currPositiveCounter = 0;
+        let currNegativeCounter = 0;
         const bars = sortedBars.map((point, index)=>{
             let shouldHighlight = true;
             if (isLegendHovered || isLegendSelected) {
                 shouldHighlight = _isLegendHighlighted(point.legend);
             }
+            if (point.x >= X_ORIGIN) {
+                ++currPositiveCounter;
+            }
+            if (point.x < X_ORIGIN) {
+                ++currNegativeCounter;
+            }
+            const barStartX = _isRtl ? containerWidth - (_margins.right + Math.max(xBarScale(point.x + X_ORIGIN), xBarScale(X_ORIGIN)) - _margins.left) : Math.min(xBarScale(point.x + X_ORIGIN), xBarScale(X_ORIGIN));
             const barHeight = Math.max(yBarScale(point.y), 0);
             if (barHeight < 1) {
                 return /*#__PURE__*/ React.createElement(React.Fragment, {
@@ -264,14 +294,26 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
                 startColor = props.colors ? _createColors()(point.x) : getNextColor(index, 0);
             }
             startColor = point.color && !useSingleColor ? point.color : startColor;
+            const prevBarWidth = Math.abs(xBarScale(prevPoint + X_ORIGIN) - xBarScale(X_ORIGIN));
+            prevPoint > X_ORIGIN ? prevWidthPositive += prevBarWidth : prevWidthNegative += prevBarWidth;
+            const currentWidth = Math.abs(xBarScale(point.x + X_ORIGIN) - xBarScale(X_ORIGIN));
+            const gapWidthLTR = currentWidth > 2 && (point.x > X_ORIGIN && currPositiveCounter !== totalPositiveBars || point.x < X_ORIGIN && (totalPositiveBars !== 0 || currNegativeCounter > 1)) ? 2 : 0;
+            const gapWidthRTL = currentWidth > 2 && (point.x > X_ORIGIN && (totalNegativeBars !== 0 || currPositiveCounter > 1) || point.x < X_ORIGIN && currNegativeCounter !== totalNegativeBars) ? 2 : 0;
+            let xStart = X_ORIGIN;
+            if (_isRtl) {
+                xStart = point.x > X_ORIGIN ? barStartX - prevWidthPositive : barStartX + prevWidthNegative;
+            } else {
+                xStart = point.x > X_ORIGIN ? barStartX + prevWidthPositive : barStartX - prevWidthNegative;
+            }
+            prevPoint = point.x;
             return /*#__PURE__*/ React.createElement(React.Fragment, {
                 key: `${index}_${point.x}`
             }, /*#__PURE__*/ React.createElement("rect", {
                 key: point.y,
-                x: _isRtl ? xBarScale(point.x) : _margins.left,
+                x: xStart,
                 y: yBarScale(point.y) - _barHeight / 2,
                 "data-is-focusable": shouldHighlight,
-                width: _isRtl ? containerWidth - _margins.right - Math.max(xBarScale(point.x), 0) : Math.max(xBarScale(point.x), 0) - _margins.left,
+                width: currentWidth - (_isRtl ? gapWidthRTL : gapWidthLTR),
                 height: _barHeight,
                 ref: (e)=>{
                     _refCallback(e, point.legend);
@@ -292,6 +334,59 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
         });
         return bars;
     }
+    function _getUniqueYValues() {
+        var _props_data;
+        const mapY = {};
+        (_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.forEach((point)=>{
+            mapY[point.y] = point.y;
+        });
+        const uniqueY = Object.values(mapY);
+        return uniqueY;
+    }
+    function _calculateAppropriateBarHeight(data, totalWidth, innerPadding) {
+        const result = getClosestPairDiffAndRange(data);
+        if (!result || result[1] === 0) {
+            return 16;
+        }
+        const closestPairDiff = result[0];
+        let range = result[1];
+        const yMax = d3Max(_points, (point)=>point.y);
+        // Since we are always rendering from 0 to yMax, we need to ensure that the range is at least yMax
+        // to calculate the bar height correctly.
+        range = Math.max(range, yMax);
+        // Refer to https://microsoft.github.io/fluentui-charting-contrib/docs/rfcs/fix-overlapping-bars-on-continuous-axes
+        // for the derivation of the following formula.
+        const barWidth = Math.floor(totalWidth * closestPairDiff * (1 - innerPadding) / (range + closestPairDiff * (1 - innerPadding)));
+        return barWidth;
+    }
+    function _getDomainMarginsForHorizontalBarChart(containerHeight) {
+        _domainMargin = MIN_DOMAIN_MARGIN;
+        const uniqueY = _getUniqueYValues();
+        /** Rate at which the space between the bars changes wrt the bar height */ _yAxisPadding = _yAxisPadding === 1 ? 0.99 : _yAxisPadding;
+        const barGapRate = _yAxisPadding / (1 - _yAxisPadding);
+        const numBars = uniqueY.length + (uniqueY.length - 1) * barGapRate;
+        // Total height available to render the bars
+        const totalHeight = containerHeight - (_margins.top + MIN_DOMAIN_MARGIN) - (_margins.bottom + MIN_DOMAIN_MARGIN);
+        if (_yAxisType !== YAxisType.StringAxis) {
+            // Calculate bar height dynamically
+            _barHeight = props.barHeight || _calculateAppropriateBarHeight(uniqueY, totalHeight, _yAxisPadding);
+            _barHeight = Math.max(_barHeight, 1);
+            _domainMargin += _barHeight / 2;
+        } else {
+            // Calculate the appropriate bar height
+            _barHeight = props.barHeight || totalHeight / numBars;
+            /** Total height required to render the bars. Directly proportional to bar height */ const reqHeight = numBars * _barHeight;
+            if (totalHeight >= reqHeight) {
+                // Center align the chart by setting equal left and right margins for domain
+                _domainMargin = MIN_DOMAIN_MARGIN + (totalHeight - reqHeight) / 2;
+            }
+        }
+        return {
+            ..._margins,
+            top: _margins.top + _domainMargin,
+            bottom: _margins.bottom + _domainMargin
+        };
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function _tooltipOfYAxislabels(ytooltipProps) {
         const { tooltipCls, yAxis, id } = ytooltipProps;
@@ -321,14 +416,29 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
             });
         }
     }
-    function _createStringBars(containerHeight, containerWidth, xElement, yElement) {
-        const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth, false);
+    function _createStringBars(containerHeight, containerWidth, xElement, yElement, singleBarData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    xBarScale, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    yBarScale) {
         const { useSingleColor = false } = props;
-        const bars = _points.map((point, index)=>{
+        let prevWidthPositive = 0;
+        let prevWidthNegative = 0;
+        let prevPoint = 0;
+        const totalPositiveBars = singleBarData.filter((point)=>point.x >= X_ORIGIN).length;
+        const totalNegativeBars = singleBarData.length - totalPositiveBars;
+        let currPositiveCounter = 0;
+        let currNegativeCounter = 0;
+        const bars = singleBarData.map((point, index)=>{
             let shouldHighlight = true;
             if (isLegendHovered || isLegendSelected) {
                 shouldHighlight = _isLegendHighlighted(point.legend);
             }
+            if (point.x >= X_ORIGIN) {
+                ++currPositiveCounter;
+            }
+            if (point.x < X_ORIGIN) {
+                ++currNegativeCounter;
+            }
+            const barStartX = _isRtl ? containerWidth - (_margins.right + Math.max(xBarScale(point.x + X_ORIGIN), xBarScale(X_ORIGIN)) - _margins.left) : Math.min(xBarScale(point.x + X_ORIGIN), xBarScale(X_ORIGIN));
             const barHeight = Math.max(yBarScale(point.y), 0);
             if (barHeight < 1) {
                 return /*#__PURE__*/ React.createElement(React.Fragment, {
@@ -344,15 +454,27 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
                 startColor = props.colors ? _createColors()(point.x) : getNextColor(index, 0);
             }
             startColor = point.color && !useSingleColor ? point.color : startColor;
+            const prevBarWidth = Math.abs(xBarScale(prevPoint + X_ORIGIN) - xBarScale(X_ORIGIN));
+            prevPoint > 0 ? prevWidthPositive += prevBarWidth : prevWidthNegative += prevBarWidth;
+            const currentWidth = Math.abs(xBarScale(point.x + X_ORIGIN) - xBarScale(X_ORIGIN));
+            const gapWidthLTR = currentWidth > 2 && (point.x > X_ORIGIN && currPositiveCounter !== totalPositiveBars || point.x < X_ORIGIN && (totalPositiveBars !== 0 || currNegativeCounter > 1)) ? 2 : 0;
+            const gapWidthRTL = currentWidth > 2 && (point.x > X_ORIGIN && (totalNegativeBars !== 0 || currPositiveCounter > 1) || point.x < X_ORIGIN && currNegativeCounter !== totalNegativeBars) ? 2 : 0;
+            prevPoint = point.x;
+            let xStart = X_ORIGIN;
+            if (_isRtl) {
+                xStart = point.x > X_ORIGIN ? barStartX - prevWidthPositive : barStartX + prevWidthNegative;
+            } else {
+                xStart = point.x > X_ORIGIN ? barStartX + prevWidthPositive : barStartX - prevWidthNegative;
+            }
             return /*#__PURE__*/ React.createElement(React.Fragment, {
                 key: `${index}_${point.x}`
             }, /*#__PURE__*/ React.createElement("rect", {
                 transform: `translate(0,${0.5 * (yBarScale.bandwidth() - _barHeight)})`,
                 key: point.x,
-                x: _isRtl ? xBarScale(point.x) : _margins.left,
+                x: xStart,
                 y: yBarScale(point.y),
                 rx: props.roundCorners ? 3 : 0,
-                width: _isRtl ? containerWidth - _margins.right - Math.max(xBarScale(point.x), 0) : Math.max(xBarScale(point.x), 0) - _margins.left,
+                width: currentWidth - (_isRtl ? gapWidthRTL : gapWidthLTR),
                 height: _barHeight,
                 "aria-labelledby": `toolTip${_calloutId}`,
                 "aria-label": _getAriaLabel(point),
@@ -416,16 +538,20 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
     function _getLegendData(data) {
         const { useSingleColor } = props;
         const actions = [];
+        const mapLegendToColor = {};
         data.forEach((point, _index)=>{
             // eslint-disable-next-line @typescript-eslint/no-shadow
             const color = useSingleColor ? props.colors ? _createColors()(1) : getNextColor(1, 0) : point.color;
+            mapLegendToColor[point.legend] = color;
+        });
+        Object.entries(mapLegendToColor).forEach(([legendTitle, color])=>{
             // mapping data to the format Legends component needs
             const legend = {
-                title: point.legend,
+                title: legendTitle,
                 color,
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
-                    _onLegendHover(point.legend);
+                    _onLegendHover(legendTitle);
                 },
                 // eslint-disable-next-line @typescript-eslint/no-shadow
                 onMouseOutAction: (isLegendSelected)=>{
@@ -508,6 +634,20 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
             setPopoverOpen(true);
         }
     }
+    function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+        let domainNRangeValue;
+        if (xAxisType === XAxisTypes.NumericAxis) {
+            domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX, X_ORIGIN);
+        } else {
+            domainNRangeValue = {
+                dStartValue: 0,
+                dEndValue: 0,
+                rStartValue: 0,
+                rEndValue: 0
+            };
+        }
+        return domainNRangeValue;
+    }
     if (!_isChartEmpty()) {
         _adjustProps();
         const calloutProps = {
@@ -536,18 +676,21 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props,
         _xMax = Math.max(d3Max(_points, (point)=>point.x), props.xMaxValue || 0);
         const legendBars = _getLegendData(_points);
         return /*#__PURE__*/ React.createElement(CartesianChart, {
+            yAxisPadding: _yAxisPadding,
             ...props,
             chartTitle: _getChartTitle(),
             points: _points,
             chartType: ChartTypes.HorizontalBarChartWithAxis,
             xAxisType: _xAxisType,
             yAxisType: _yAxisType,
+            getDomainNRangeValues: _getDomainNRangeValues,
             stringDatasetForYAxisDomain: _yAxisLabels,
             calloutProps: calloutProps,
             tickParams: tickParams,
             legendBars: legendBars,
             barwidth: _barHeight,
             getmargins: _getMargins,
+            getYDomainMargins: _getDomainMarginsForHorizontalBarChart,
             getGraphData: _getGraphData,
             getAxisData: _getAxisData,
             onChartMouseLeave: _handleChartMouseLeave,