@fluentui/react-charts 9.1.9 → 9.2.0

package/lib/components/VerticalBarChart/VerticalBarChart.js

@@ -8,11 +8,12 @@ import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { CartesianChart, Legends, ChartPopover } from '../../index';
 import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, useRtl, areArraysEqual, calculateLongestLabelWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRangeOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis } from '../../utilities/index';
-var CircleVisbility;
-(function(CircleVisbility) {
+import { toImage } from '../../utilities/image-export-utils';
+var CircleVisbility = /*#__PURE__*/ function(CircleVisbility) {
     CircleVisbility["show"] = "visibility";
     CircleVisbility["hide"] = "hidden";
-})(CircleVisbility || (CircleVisbility = {}));
+    return CircleVisbility;
+}(CircleVisbility || {});
 const MIN_DOMAIN_MARGIN = 8;
 // Create a VerticalBarChart variant which uses these default styles and this styled subcomponent.
 /**
@@ -42,6 +43,7 @@ const MIN_DOMAIN_MARGIN = 8;
     let _xAxisInnerPadding = 0;
     let _xAxisOuterPadding = 0;
     const cartesianChartRef = React.useRef(null);
+    const _legendsRef = React.useRef(null);
     const [color, setColor] = React.useState('');
     const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
     const [activeLegend, setActiveLegend] = React.useState(undefined);
@@ -64,7 +66,11 @@ const MIN_DOMAIN_MARGIN = 8;
         var _cartesianChartRef_current;
         var _cartesianChartRef_current_chartContainer;
         return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null
+            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
+            toImage: (opts)=>{
+                var _cartesianChartRef_current, _legendsRef_current;
+                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _useRtl, opts);
+            }
         };
     }, []);
     React.useEffect(()=>{
@@ -213,7 +219,7 @@ const MIN_DOMAIN_MARGIN = 8;
     }
     function _adjustProps() {
         _points = props.data || [];
-        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
+        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, undefined, props.mode);
         const defaultColors = [
             tokens.colorPaletteBlueForeground2,
             tokens.colorPaletteCornflowerForeground2,
@@ -223,7 +229,7 @@ const MIN_DOMAIN_MARGIN = 8;
         ];
         _colors = props.colors || defaultColors;
         _isHavingLine = _checkForLine();
-        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, props.xAxisPadding, 2 / 3);
+        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, props.xAxisPadding, props.mode === 'histogram' ? 0 : _xAxisType === XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding, props.xAxisPadding, 0);
     }
     function _getMargins(_margins) {
@@ -367,6 +373,12 @@ const MIN_DOMAIN_MARGIN = 8;
     }
     // eslint-disable-next-line @typescript-eslint/no-shadow
     function _onBarFocus(event, point, refArrayIndexNumber, color) {
+        let x = 0;
+        let y = 0;
+        const targetRect = event.target.getBoundingClientRect();
+        x = targetRect.left + targetRect.width / 2;
+        y = targetRect.top + targetRect.height / 2;
+        updatePosition(x, y);
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const { YValueHover, hoverXValue } = _getCalloutContentForLineAndBar(point);
         _refArray.forEach((obj, index)=>{
@@ -427,10 +439,13 @@ const MIN_DOMAIN_MARGIN = 8;
             ] : [
                 xMin,
                 xMax
-            ]).nice().range([
+            ]).range([
                 margins.left + _domainMargin,
                 containerWidth - margins.right - _domainMargin
             ]);
+            if (!isScalePaddingDefined(props.xAxisInnerPadding, props.xAxisPadding) && props.mode !== 'histogram') {
+                xBarScale.nice();
+            }
         } else if (_xAxisType === XAxisTypes.DateAxis) {
             const sDate = d3Min(_points, (point)=>point.x);
             const lDate = d3Max(_points, (point)=>point.x);
@@ -560,7 +575,7 @@ const MIN_DOMAIN_MARGIN = 8;
             const baselineHeight = containerHeight - 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.
-            _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
+            _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xBarScale.bandwidth(), props.mode);
             return /*#__PURE__*/ React.createElement("g", {
                 key: point.x instanceof Date ? `${point.x.getTime()}_${index}` : `${point.x}_${index}`,
                 transform: `translate(${0.5 * (xBarScale.bandwidth() - _barWidth)}, 0)`
@@ -737,7 +752,8 @@ const MIN_DOMAIN_MARGIN = 8;
             overflowText: props.legendsOverflowText,
             ...props.legendProps,
             selectedLegends: selectedLegends,
-            onChange: _onLegendSelectionChange
+            onChange: _onLegendSelectionChange,
+            legendRef: _legendsRef
         });
         return legends;
     }
@@ -799,48 +815,71 @@ const MIN_DOMAIN_MARGIN = 8;
         }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barValue) : formatScientificLimitWidth(barValue));
     }
     function _getDomainMargins(containerWidth) {
+        var _props_data;
         _domainMargin = MIN_DOMAIN_MARGIN;
+        const mapX = {};
+        (_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.forEach((point)=>{
+            if (point.x instanceof Date) {
+                mapX[point.x.getTime()] = point.x;
+            } else {
+                mapX[point.x] = point.x;
+            }
+        });
+        const uniqueX = Object.values(mapX);
         /** Total width available to render the bars */ const totalWidth = containerWidth - (margins.left + MIN_DOMAIN_MARGIN) - (margins.right + MIN_DOMAIN_MARGIN);
         /** Rate at which the space between the bars changes wrt the bar width */ const barGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
+        const numBars = uniqueX.length + (uniqueX.length - 1) * barGapRate;
         if (_xAxisType === XAxisTypes.StringAxis) {
             if (isScalePaddingDefined(props.xAxisOuterPadding, props.xAxisPadding)) {
                 // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
                 // to adjust the space before the first bar and after the last bar.
                 _domainMargin = 0;
-            } else if (props.barWidth !== 'auto') {
+            } else if (props.barWidth !== 'auto' && props.mode !== 'histogram') {
                 // Update the bar width so that when CartesianChart rerenders,
                 // the following calculations don't use the previous bar width.
                 _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
-                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * _barWidth;
+                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = numBars * _barWidth;
                 if (totalWidth >= reqWidth) {
                     // Center align the chart by setting equal left and right margins for domain
                     _domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
                 }
-            } else if (props.mode === 'plotly' && _xAxisLabels.length > 1) {
+            } else if ([
+                'plotly',
+                'histogram'
+            ].includes(props.mode) && uniqueX.length > 1) {
                 // Calculate the remaining width after rendering bars at their maximum allowable width
-                const bandwidth = totalWidth / (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate);
-                const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, bandwidth);
-                let reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * barWidth;
+                const bandwidth = totalWidth / numBars;
+                const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, bandwidth, props.mode);
+                let reqWidth = numBars * barWidth;
                 const margin1 = (totalWidth - reqWidth) / 2;
-                // Calculate the remaining width after accounting for the space required to render x-axis labels
-                const step = calculateLongestLabelWidth(_xAxisLabels) + 20;
-                reqWidth = (_xAxisLabels.length - _xAxisInnerPadding) * step;
-                const margin2 = (totalWidth - reqWidth) / 2;
+                let margin2 = Number.POSITIVE_INFINITY;
+                if (!props.hideTickOverlap) {
+                    // Calculate the remaining width after accounting for the space required to render x-axis labels
+                    const step = calculateLongestLabelWidth(uniqueX) + 20;
+                    reqWidth = (uniqueX.length - _xAxisInnerPadding) * step;
+                    margin2 = (totalWidth - reqWidth) / 2;
+                }
                 _domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
             }
         } else {
-            var _props_data;
-            const uniqueX = {};
-            (_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.forEach((point)=>{
-                if (point.x instanceof Date) {
-                    uniqueX[point.x.getTime()] = point.x;
-                } else {
-                    uniqueX[point.x] = point.x;
-                }
-            });
-            const data = Object.values(uniqueX);
-            _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, calculateAppropriateBarWidth(data, totalWidth));
-            _domainMargin = MIN_DOMAIN_MARGIN + _barWidth / 2;
+            if (props.mode === 'histogram') {
+                // Try center-aligning the bars to eliminate any gaps caused by a restricted barWidth.
+                // This only works if the bin centers are consistent across all legend groups; otherwise,
+                // the calculated domainMargin may be too small.
+                const barWidth = props.maxBarWidth;
+                const reqWidth = numBars * barWidth;
+                _domainMargin += Math.max(0, (totalWidth - reqWidth) / 2);
+            }
+            // The histogram may appear distorted when bin centers/sizes vary across different legend groups.
+            // Currently, we calculate the appropriate bar width using the closest unique x-values to make
+            // the bars of the same legend group adjacent. But these x-values can come from different legend groups
+            // and result in misleading visuals. Even if we compute bar widths separately within each group,
+            // we still lack support for rendering bars with different widths and must use the minimum width,
+            // which can cause the same issue.
+            // Solution: Instead of estimating the appropriate bar width, render each bar to span the full range
+            // of its corresponding bin explicitly.
+            _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, calculateAppropriateBarWidth(uniqueX, totalWidth - 2 * (_domainMargin - MIN_DOMAIN_MARGIN), _xAxisInnerPadding), props.mode);
+            _domainMargin += _barWidth / 2;
         }
         return {
             ...margins,
@@ -923,6 +962,7 @@ const MIN_DOMAIN_MARGIN = 8;
             xAxisOuterPadding: _xAxisOuterPadding
         },
         componentRef: cartesianChartRef,
+        showRoundOffXTickValues: !isScalePaddingDefined(props.xAxisInnerPadding, props.xAxisPadding) && props.mode !== 'histogram',
         /* eslint-disable react/jsx-no-bind */ // eslint-disable-next-line react/no-children-prop
         children: (props)=>{
             return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", null, _bars), _isHavingLine && /*#__PURE__*/ React.createElement("g", null, _createLine(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));