@fluentui/react-charts 9.1.10 → 9.2.0

package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js

@@ -19,6 +19,7 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reacttheme = require("@fluentui/react-theme");
 const _index = require("../../index");
 const _index1 = require("../../utilities/index");
+const _imageexportutils = require("../../utilities/image-export-utils");
 var CircleVisbility = /*#__PURE__*/ function(CircleVisbility) {
     CircleVisbility["show"] = "visibility";
     CircleVisbility["hide"] = "hidden";
@@ -49,6 +50,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
     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);
@@ -71,7 +73,11 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         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 (0, _imageexportutils.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(()=>{
@@ -217,7 +223,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
     }
     function _adjustProps() {
         _points = props.data || [];
-        _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth);
+        _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, undefined, props.mode);
         const defaultColors = [
             _reacttheme.tokens.colorPaletteBlueForeground2,
             _reacttheme.tokens.colorPaletteCornflowerForeground2,
@@ -227,7 +233,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         ];
         _colors = props.colors || defaultColors;
         _isHavingLine = _checkForLine();
-        _xAxisInnerPadding = (0, _index1.getScalePadding)(props.xAxisInnerPadding, props.xAxisPadding, 2 / 3);
+        _xAxisInnerPadding = (0, _index1.getScalePadding)(props.xAxisInnerPadding, props.xAxisPadding, props.mode === 'histogram' ? 0 : _xAxisType === _index1.XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         _xAxisOuterPadding = (0, _index1.getScalePadding)(props.xAxisOuterPadding, props.xAxisPadding, 0);
     }
     function _getMargins(_margins) {
@@ -435,10 +441,13 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
             ] : [
                 xMin,
                 xMax
-            ]).nice().range([
+            ]).range([
                 margins.left + _domainMargin,
                 containerWidth - margins.right - _domainMargin
             ]);
+            if (!(0, _index1.isScalePaddingDefined)(props.xAxisInnerPadding, props.xAxisPadding) && props.mode !== 'histogram') {
+                xBarScale.nice();
+            }
         } else if (_xAxisType === _index1.XAxisTypes.DateAxis) {
             const sDate = (0, _d3array.min)(_points, (point)=>point.x);
             const lDate = (0, _d3array.max)(_points, (point)=>point.x);
@@ -568,7 +577,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
             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 = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
+            _barWidth = (0, _index1.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)`
@@ -745,7 +754,8 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
             overflowText: props.legendsOverflowText,
             ...props.legendProps,
             selectedLegends: selectedLegends,
-            onChange: _onLegendSelectionChange
+            onChange: _onLegendSelectionChange,
+            legendRef: _legendsRef
         });
         return legends;
     }
@@ -807,48 +817,71 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barValue) : (0, _index1.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 === _index1.XAxisTypes.StringAxis) {
             if ((0, _index1.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 = (0, _index1.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 = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, bandwidth);
-                let reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * barWidth;
+                const bandwidth = totalWidth / numBars;
+                const barWidth = (0, _index1.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 = (0, _index1.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 = (0, _index1.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 = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, (0, _index1.calculateAppropriateBarWidth)(data, totalWidth, _xAxisInnerPadding));
-            _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 = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, (0, _index1.calculateAppropriateBarWidth)(uniqueX, totalWidth - 2 * (_domainMargin - MIN_DOMAIN_MARGIN), _xAxisInnerPadding), props.mode);
+            _domainMargin += _barWidth / 2;
         }
         return {
             ...margins,
@@ -931,6 +964,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
             xAxisOuterPadding: _xAxisOuterPadding
         },
         componentRef: cartesianChartRef,
+        showRoundOffXTickValues: !(0, _index1.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)));