@fluentui/react-charts 1.1.0 → 9.0.0

package/lib/components/VerticalBarChart/VerticalBarChart.js

@@ -0,0 +1,849 @@
+import * as React from 'react';
+import { useVerticalBarChartStyles } from './useVerticalBarChartStyles.styles';
+import { max as d3Max, min as d3Min } from 'd3-array';
+import { line as d3Line } from 'd3-shape';
+import { select as d3Select } from 'd3-selection';
+import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc } from 'd3-scale';
+import { useId } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+import { CartesianChart, Legends, ChartPopover } from '../../index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, useRtl } from '../../utilities/index';
+var CircleVisbility;
+(function(CircleVisbility) {
+    CircleVisbility["show"] = "visibility";
+    CircleVisbility["hide"] = "hidden";
+})(CircleVisbility || (CircleVisbility = {}));
+const MIN_DOMAIN_MARGIN = 8;
+// Create a VerticalBarChart variant which uses these default styles and this styled subcomponent.
+/**
+ * VerticalBarchart component
+ * {@docCategory VerticalBarChart}
+ */ export const VerticalBarChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    let _points = [];
+    let _barWidth = 0;
+    let _colors;
+    const _refArray = [];
+    let margins;
+    const _useRtl = useRtl();
+    let _bars;
+    let _xAxisLabels;
+    let _yMax;
+    let _isHavingLine = _checkForLine();
+    const _tooltipId = useId('VCTooltipID_');
+    const _xAxisType = props.data && props.data.length > 0 ? getTypeOfAxis(props.data[0].x, true) : XAxisTypes.StringAxis;
+    let _calloutAnchorPoint;
+    let _domainMargin;
+    const _emptyChartId = useId('_VBC_empty');
+    const _vbcLineId = useId('_VBC_line_');
+    const _vbcPointId = useId('_VBC_point_');
+    const _vbcBarId = useId('_VBC_bar_');
+    let _xAxisInnerPadding = 0;
+    let _xAxisOuterPadding = 0;
+    const cartesianChartRef = React.useRef(null);
+    const [color, setColor] = React.useState('');
+    const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
+    const [selectedLegend, setSelectedLegend] = React.useState('');
+    const [activeLegend, setActiveLegend] = React.useState('');
+    const [xCalloutValue, setXCalloutValue] = React.useState('');
+    const [yCalloutValue, setYCalloutValue] = React.useState('');
+    const [activeXdataPoint, setActiveXDatapoint] = React.useState(null);
+    const [YValueHover, setYValueHover] = React.useState();
+    const [hoverXValue, setHoverXValue] = React.useState('');
+    const [calloutLegend, setCalloutLegend] = React.useState('');
+    const [callOutAccessibilityData, setCalloutAccessibilityData] = React.useState();
+    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState();
+    const [clickPosition, setClickPosition] = React.useState({
+        x: 0,
+        y: 0
+    });
+    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    React.useImperativeHandle(props.componentRef, ()=>{
+        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
+        };
+    }, []);
+    function _createLine(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    xScale, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    yScale, containerHeight = 0, containerWidth = 0, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    yScaleSecondary) {
+        var _props_lineOptions;
+        const isStringAxis = _xAxisType === XAxisTypes.StringAxis;
+        const colorScale = _createColors();
+        const { data, lineLegendColor = tokens.colorPaletteYellowBackground1, lineLegendText } = props;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const lineData = [];
+        const line = [];
+        data && data.forEach((item, index)=>{
+            if (item.lineData && item.lineData.y) {
+                var _item_lineData_useSecondaryYScale;
+                lineData.push({
+                    x: item.x,
+                    y: item.lineData.y,
+                    useSecondaryYScale: (_item_lineData_useSecondaryYScale = item.lineData.useSecondaryYScale) !== null && _item_lineData_useSecondaryYScale !== void 0 ? _item_lineData_useSecondaryYScale : false,
+                    point: item,
+                    index
+                });
+            }
+        });
+        const linePath = d3Line()// eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .x((d)=>isStringAxis ? xScale(d.x) + 0.5 * xScale.bandwidth() : xScale(d.x))// eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .y((d)=>d.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(d.y) : yScale(d.y));
+        const shouldHighlight = _legendHighlighted(lineLegendText) || _noLegendHighlighted() ? true : false;
+        const lineBorderWidth = ((_props_lineOptions = props.lineOptions) === null || _props_lineOptions === void 0 ? void 0 : _props_lineOptions.lineBorderWidth) ? Number.parseFloat(props.lineOptions.lineBorderWidth.toString()) : 0;
+        if (lineBorderWidth > 0) {
+            line.push(/*#__PURE__*/ React.createElement("path", {
+                key: _vbcLineId,
+                id: _vbcLineId,
+                opacity: shouldHighlight ? 1 : 0.1,
+                d: linePath(lineData),
+                fill: "transparent",
+                strokeLinecap: "square",
+                strokeWidth: 3 + lineBorderWidth * 2,
+                stroke: tokens.colorNeutralBackground1
+            }));
+        }
+        line.push(/*#__PURE__*/ React.createElement("path", {
+            key: _vbcLineId,
+            id: _vbcLineId,
+            opacity: shouldHighlight ? 1 : 0.1,
+            d: linePath(lineData),
+            fill: "transparent",
+            strokeLinecap: "square",
+            strokeWidth: 3,
+            stroke: lineLegendColor
+        }));
+        const dots = lineData.map((item, index)=>{
+            var _item_point_lineData;
+            // Create an object to store line point ref so that the object can be passed by reference to the focus handler
+            const circleRef = {
+                refElement: null
+            };
+            return /*#__PURE__*/ React.createElement("circle", {
+                key: index,
+                id: `${_vbcPointId}-${index}`,
+                cx: isStringAxis ? xScale(item.x) + 0.5 * xScale.bandwidth() : xScale(item.x),
+                cy: item.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(item.y) : yScale(item.y),
+                onMouseOver: _legendHighlighted(lineLegendText) ? _lineHover.bind(item.point) : (event)=>_onBarHover(item.point, colorScale(item.y), event),
+                onMouseOut: _onBarLeave,
+                r: _getCircleVisibilityAndRadius(item.x, lineLegendText).radius,
+                stroke: lineLegendColor,
+                fill: tokens.colorNeutralBackground1,
+                strokeWidth: 3,
+                visibility: _getCircleVisibilityAndRadius(item.x, lineLegendText).visibility,
+                onClick: (_item_point_lineData = item.point.lineData) === null || _item_point_lineData === void 0 ? void 0 : _item_point_lineData.onClick,
+                // When no legend is highlighted: Line points are automatically displayed along with the bars
+                // at the same x-axis point in the stack callout. So to prevent an increase in focusable elements
+                // and avoid conveying duplicate info, make these line points non-focusable.
+                "data-is-focusable": _legendHighlighted(lineLegendText),
+                ref: (e)=>circleRef.refElement = e,
+                onFocus: _lineFocus.bind(item.point, circleRef),
+                onBlur: _handleChartMouseLeave
+            });
+        });
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, line, dots);
+    }
+    function _getCircleVisibilityAndRadius(xAxisPoint, legend) {
+        if (selectedLegend !== '') {
+            if (xAxisPoint === activeXdataPoint && selectedLegend === legend) {
+                return {
+                    visibility: "visibility",
+                    radius: 8
+                };
+            } else if (selectedLegend === legend) {
+                // Don't hide the circle to keep it focusable. For more information,
+                // see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
+                return {
+                    visibility: "visibility",
+                    radius: 0.3
+                };
+            } else {
+                return {
+                    visibility: "hidden",
+                    radius: 0
+                };
+            }
+        } else {
+            return {
+                visibility: activeXdataPoint === xAxisPoint ? "visibility" : "hidden",
+                radius: 8
+            };
+        }
+    }
+    function _checkForLine() {
+        const { data } = props;
+        return data.some((item)=>{
+            var _item_lineData;
+            return (item === null || item === void 0 ? void 0 : (_item_lineData = item.lineData) === null || _item_lineData === void 0 ? void 0 : _item_lineData.y) !== undefined;
+        });
+    }
+    function _adjustProps() {
+        _points = props.data || [];
+        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
+        const defaultColors = [
+            tokens.colorPaletteBlueForeground2,
+            tokens.colorPaletteCornflowerForeground2,
+            tokens.colorPaletteDarkGreenForeground2,
+            tokens.colorPaletteNavyForeground2,
+            tokens.colorPaletteDarkOrangeForeground2
+        ];
+        _colors = props.colors || defaultColors;
+        _isHavingLine = _checkForLine();
+        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, props.xAxisPadding, 2 / 3);
+        _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding, props.xAxisPadding, 0);
+    }
+    function _getMargins(_margins) {
+        margins = _margins;
+    }
+    function _renderContentForBothLineAndBars(point) {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { YValueHover, hoverXValue } = _getCalloutContentForLineAndBar(point);
+        const content = YValueHover.map((item, index)=>{
+            var _props_culture;
+            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ChartPopover, {
+                culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+                clickPosition: clickPosition,
+                isPopoverOpen: isPopoverOpen,
+                legend: item.legend,
+                ...index === 0 && {
+                    XValue: `${hoverXValue || item.data}`
+                },
+                YValue: item.data || item.y,
+                color: item.color,
+                isCalloutForStack: false
+            }));
+        });
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, content);
+    }
+    function _renderContentForOnlyBars(_props) {
+        var _props_culture;
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ChartPopover, {
+            XValue: _props.xAxisCalloutData || _props.x,
+            xCalloutValue: xCalloutValue,
+            yCalloutValue: yCalloutValue,
+            culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+            clickPosition: clickPosition,
+            isPopoverOpen: isPopoverOpen,
+            legend: _props.legend,
+            YValue: _props.yAxisCalloutData || _props.y,
+            color: !props.useSingleColor && _props.color ? _props.color : _createColors()(_props.y),
+            isCalloutForStack: false
+        }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    function _renderCallout(props) {
+        return props ? _isHavingLine ? _renderContentForBothLineAndBars(props) : _renderContentForOnlyBars(props) : null;
+    }
+    function _getCustomizedCallout() {
+        return props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout) : null;
+    }
+    function _getGraphData(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    xScale, yScale, containerHeight, containerWidth, xElement) {
+        return _bars = _xAxisType === XAxisTypes.NumericAxis ? _createNumericBars(containerHeight, containerWidth, xElement) : _xAxisType === XAxisTypes.DateAxis ? _createDateBars(containerHeight, containerWidth, xElement) : _createStringBars(containerHeight, containerWidth, xElement);
+    }
+    function _createColors() {
+        const increment = _colors.length <= 1 ? 1 : 1 / (_colors.length - 1);
+        const { useSingleColor = false } = props;
+        if (useSingleColor) {
+            return (_p)=>{
+                const { colors } = props;
+                return colors && colors.length > 0 ? colors[0] : tokens.colorPaletteBlueBackground2;
+            };
+        }
+        const domainValues = [];
+        for(let i = 0; i < _colors.length; i++){
+            domainValues.push(increment * i * _yMax);
+        }
+        const colorScale = d3ScaleLinear().domain(domainValues).range(_colors);
+        return colorScale;
+    }
+    function _refCallback(element, legendTitle) {
+        _refArray.push({
+            index: legendTitle,
+            refElement: element
+        });
+    }
+    function _getCalloutContentForLineAndBar(point) {
+        var _selectedPoint__lineData;
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const YValueHover = [];
+        const { useSingleColor = false } = props;
+        const { data, lineLegendText, lineLegendColor = tokens.colorPaletteYellowBackground1 } = props;
+        const selectedPoint = data.filter((xDataPoint)=>xDataPoint.x === point.x);
+        // there might be no y value of the line for the hovered bar. so we need to check this condition
+        if (_isHavingLine && ((_selectedPoint__lineData = selectedPoint[0].lineData) === null || _selectedPoint__lineData === void 0 ? void 0 : _selectedPoint__lineData.y) !== undefined) {
+            var _selectedPoint__lineData1, _selectedPoint__lineData2, _selectedPoint__lineData3;
+            // callout data for the  line
+            YValueHover.push({
+                legend: lineLegendText,
+                color: lineLegendColor,
+                y: (_selectedPoint__lineData1 = selectedPoint[0].lineData) === null || _selectedPoint__lineData1 === void 0 ? void 0 : _selectedPoint__lineData1.y,
+                data: (_selectedPoint__lineData2 = selectedPoint[0].lineData) === null || _selectedPoint__lineData2 === void 0 ? void 0 : _selectedPoint__lineData2.yAxisCalloutData,
+                yAxisCalloutData: (_selectedPoint__lineData3 = selectedPoint[0].lineData) === null || _selectedPoint__lineData3 === void 0 ? void 0 : _selectedPoint__lineData3.yAxisCalloutData
+            });
+        }
+        // callout data for the bar
+        YValueHover.push({
+            legend: selectedPoint[0].legend,
+            y: selectedPoint[0].y,
+            color: !useSingleColor ? selectedPoint[0].color ? selectedPoint[0].color : _createColors()(selectedPoint[0].y) : _createColors()(1),
+            data: selectedPoint[0].yAxisCalloutData,
+            yAxisCalloutData: selectedPoint[0].yAxisCalloutData
+        });
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const hoverXValue = point.x instanceof Date ? point.x.toLocaleString() : point.x.toString();
+        return {
+            YValueHover,
+            hoverXValue: point.xAxisCalloutData || hoverXValue
+        };
+    }
+    function _onBarHover(point, // eslint-disable-next-line @typescript-eslint/no-shadow
+    color, mouseEvent) {
+        mouseEvent.persist();
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { YValueHover, hoverXValue } = _getCalloutContentForLineAndBar(point);
+        if (_calloutAnchorPoint !== point) {
+            _calloutAnchorPoint = point;
+            /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */ updatePosition(mouseEvent.clientX, mouseEvent.clientY);
+            setPopoverOpen(selectedLegend === '' || selectedLegend === point.legend);
+            setDataForHoverCard(point.y);
+            setCalloutLegend(point.legend);
+            setColor(point.color || color);
+            // To display callout value, if no callout value given, taking given point.x value as a string.
+            setXCalloutValue(point.xAxisCalloutData || (point.x instanceof Date ? point.x.toLocaleDateString() : point.x.toString()));
+            setDataPointCalloutProps(point);
+            // Hovering over a bar should highlight corresponding line points only when no legend is selected
+            setActiveXDatapoint(_noLegendHighlighted() ? point.x : null);
+            setYValueHover(YValueHover);
+            setHoverXValue(hoverXValue);
+            setCalloutAccessibilityData(point.callOutAccessibilityData);
+        }
+    }
+    function _onBarLeave() {
+    /**/ }
+    function _handleChartMouseLeave() {
+        _calloutAnchorPoint = null;
+        setPopoverOpen(false);
+        setActiveXDatapoint(null);
+        setYValueHover([]);
+        setHoverXValue('');
+    }
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    function _onBarFocus(point, refArrayIndexNumber, color) {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { YValueHover, hoverXValue } = _getCalloutContentForLineAndBar(point);
+        _refArray.forEach((obj, index)=>{
+            if (obj.index === point.legend && refArrayIndexNumber === index) {
+                /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */ setPopoverOpen(selectedLegend === '' || selectedLegend === point.legend);
+                setDataForHoverCard(point.y);
+                setCalloutLegend(point.legend);
+                setColor(point.color || color);
+                // To display callout value, if no callout value given, taking given point.x value as a string.
+                setXCalloutValue(point.xAxisCalloutData || (point.x instanceof Date ? point.x.toLocaleDateString() : point.x.toString()));
+                setYCalloutValue(point.yAxisCalloutData);
+                setDataPointCalloutProps(point);
+                // Hovering over a bar should highlight corresponding line points only when no legend is selected
+                setActiveXDatapoint(point.x);
+                setYValueHover(YValueHover);
+                setHoverXValue(hoverXValue);
+                setCalloutAccessibilityData(point.callOutAccessibilityData);
+            }
+        });
+    }
+    function _lineHover(point, mouseEvent) {
+        mouseEvent.persist();
+        _lineHoverFocus(point, mouseEvent);
+    }
+    function _lineFocus(point, ref) {
+        if (ref.refElement) {
+            _lineHoverFocus(point, ref.refElement);
+        }
+    }
+    function _lineHoverFocus(point, _refSelected) {
+        const { lineLegendText = '', lineLegendColor = tokens.colorPaletteYellowBackground1 } = props;
+        setPopoverOpen(false);
+        setCalloutLegend(lineLegendText);
+        setDataForHoverCard(point.lineData.y);
+        setColor(lineLegendColor);
+        setXCalloutValue(point.xAxisCalloutData || (point.x instanceof Date ? point.x.toLocaleDateString() : point.x.toString()));
+        setYCalloutValue(point.lineData.yAxisCalloutData);
+        setDataPointCalloutProps(point);
+        setActiveXDatapoint(point.x);
+    }
+    function _getScales(containerHeight, containerWidth) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let xBarScale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const yBarScale = d3ScaleLinear().domain([
+            0,
+            _yMax
+        ]).range([
+            0,
+            containerHeight - margins.bottom - margins.top
+        ]);
+        if (_xAxisType === XAxisTypes.NumericAxis) {
+            const xMax = d3Max(_points, (point)=>point.x);
+            const xMin = d3Min(_points, (point)=>point.x);
+            xBarScale = d3ScaleLinear().domain(_useRtl ? [
+                xMax,
+                xMin
+            ] : [
+                xMin,
+                xMax
+            ]).nice().range([
+                margins.left + _domainMargin,
+                containerWidth - margins.right - _domainMargin
+            ]);
+        } else if (_xAxisType === XAxisTypes.DateAxis) {
+            const sDate = d3Min(_points, (point)=>point.x);
+            const lDate = d3Max(_points, (point)=>point.x);
+            xBarScale = d3ScaleUtc().domain([
+                sDate,
+                lDate
+            ]).range(_useRtl ? [
+                containerWidth - margins.right - _domainMargin,
+                margins.left + _domainMargin
+            ] : [
+                margins.left + _domainMargin,
+                containerWidth - margins.right - _domainMargin
+            ]);
+        } else {
+            xBarScale = d3ScaleBand().domain(_xAxisLabels).range(_useRtl ? [
+                containerWidth - margins.right - _domainMargin,
+                margins.left + _domainMargin
+            ] : [
+                margins.left + _domainMargin,
+                containerWidth - margins.right - _domainMargin
+            ]).paddingInner(_xAxisInnerPadding).paddingOuter(_xAxisOuterPadding);
+        }
+        return {
+            xBarScale,
+            yBarScale
+        };
+    }
+    const classes = useVerticalBarChartStyles(props);
+    function _createNumericBars(containerHeight, containerWidth, xElement) {
+        const { useSingleColor = false } = props;
+        const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
+        const colorScale = _createColors();
+        const bars = _points.map((point, index)=>{
+            const shouldHighlight = _legendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
+            const barHeight = Math.max(yBarScale(point.y), 0);
+            let adjustedBarHeight = 0;
+            if (barHeight <= 0) {
+                return /*#__PURE__*/ React.createElement(React.Fragment, {
+                    key: point.x
+                }, " ");
+            } else if (barHeight <= Math.ceil(yBarScale(_yMax) / 100.0)) {
+                adjustedBarHeight = Math.ceil(yBarScale(_yMax) / 100.0);
+            } else {
+                adjustedBarHeight = barHeight;
+            }
+            const xPoint = xBarScale(point.x) - _barWidth / 2;
+            const yPoint = containerHeight - margins.bottom - adjustedBarHeight;
+            return /*#__PURE__*/ React.createElement("g", {
+                key: point.x
+            }, /*#__PURE__*/ React.createElement("rect", {
+                id: `${_vbcBarId}-${index}`,
+                x: xPoint,
+                y: yPoint,
+                width: _barWidth,
+                "data-is-focusable": !props.hideTooltip && shouldHighlight,
+                height: adjustedBarHeight,
+                ref: (e)=>{
+                    _refCallback(e, point.legend);
+                },
+                onClick: point.onClick,
+                onMouseOver: (event)=>_onBarHover(point, colorScale(point.y), event),
+                "aria-label": _getAriaLabel(point),
+                role: "img",
+                onMouseLeave: _onBarLeave,
+                onFocus: _onBarFocus.bind(point, index, colorScale(point.y)),
+                onBlur: _onBarLeave,
+                fill: point.color && !useSingleColor ? point.color : colorScale(point.y),
+                tabIndex: point.legend !== '' ? 0 : undefined,
+                opacity: shouldHighlight ? '1' : '0.1'
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend));
+        });
+        // Removing un wanted tooltip div from DOM, when prop not provided.
+        if (!props.showXAxisLablesTooltip) {
+            try {
+                // eslint-disable-next-line no-restricted-globals
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+        }
+        // Used to display tooltip at x axis labels.
+        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
+            const xAxisElement = d3Select(xElement).call(xBarScale);
+            try {
+                // eslint-disable-next-line no-restricted-globals
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+            const tooltipProps = {
+                tooltipCls: classes.tooltip,
+                id: _tooltipId,
+                xAxis: xAxisElement
+            };
+            xAxisElement && tooltipOfXAxislabels(tooltipProps);
+        }
+        return bars;
+    }
+    function _createStringBars(containerHeight, containerWidth, xElement) {
+        const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
+        const colorScale = _createColors();
+        const bars = _points.map((point, index)=>{
+            const barHeight = Math.max(yBarScale(point.y), 0);
+            let adjustedBarHeight = 0;
+            if (barHeight <= 0) {
+                return /*#__PURE__*/ React.createElement(React.Fragment, {
+                    key: point.x instanceof Date ? point.x.getTime() : point.x
+                }, " ");
+            } else if (barHeight <= Math.ceil(yBarScale(_yMax) / 100.0)) {
+                adjustedBarHeight = Math.ceil(yBarScale(_yMax) / 100.0);
+            } else {
+                adjustedBarHeight = barHeight;
+            }
+            const xPoint = xBarScale(point.x);
+            const yPoint = containerHeight - margins.bottom - adjustedBarHeight;
+            // 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());
+            return /*#__PURE__*/ React.createElement("g", {
+                key: point.x instanceof Date ? point.x.getTime() : point.x,
+                transform: `translate(${0.5 * (xBarScale.bandwidth() - _barWidth)}, 0)`
+            }, /*#__PURE__*/ React.createElement("rect", {
+                id: `${_vbcBarId}-${index}`,
+                x: xPoint,
+                y: yPoint,
+                width: _barWidth,
+                height: adjustedBarHeight,
+                "aria-label": _getAriaLabel(point),
+                role: "img",
+                ref: (e)=>{
+                    _refCallback(e, point.legend);
+                },
+                onClick: point.onClick,
+                onMouseOver: (event)=>_onBarHover(point, colorScale(point.y), event),
+                onMouseLeave: _onBarLeave,
+                onBlur: _onBarLeave,
+                "data-is-focusable": !props.hideTooltip,
+                onFocus: _onBarFocus.bind(point, index, colorScale(point.y)),
+                fill: point.color ? point.color : colorScale(point.y),
+                tabIndex: point.legend !== '' ? 0 : undefined
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend));
+        });
+        // Removing un wanted tooltip div from DOM, when prop not provided.
+        if (!props.showXAxisLablesTooltip) {
+            try {
+                // eslint-disable-next-line no-restricted-globals
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+        }
+        // Used to display tooltip at x axis labels.
+        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
+            const xAxisElement = d3Select(xElement).call(xBarScale);
+            try {
+                // eslint-disable-next-line no-restricted-globals
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+            const tooltipProps = {
+                tooltipCls: classes.tooltip,
+                id: _tooltipId,
+                xAxis: xAxisElement,
+                showTooltip: props.showXAxisLablesTooltip
+            };
+            xAxisElement && tooltipOfXAxislabels(tooltipProps);
+        }
+        return bars;
+    }
+    function _createDateBars(containerHeight, containerWidth, xElement) {
+        const { useSingleColor = false } = props;
+        const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
+        const colorScale = _createColors();
+        const bars = _points.map((point, index)=>{
+            const shouldHighlight = _legendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
+            const barHeight = Math.max(yBarScale(point.y), 0);
+            let adjustedBarHeight = 0;
+            if (barHeight <= 0) {
+                return /*#__PURE__*/ React.createElement(React.Fragment, {
+                    key: point.x instanceof Date ? point.x.getTime() : point.x
+                }, " ");
+            } else if (barHeight <= Math.ceil(yBarScale(_yMax) / 100.0)) {
+                adjustedBarHeight = Math.ceil(yBarScale(_yMax) / 100.0);
+            } else {
+                adjustedBarHeight = barHeight;
+            }
+            const xPoint = xBarScale(point.x) - _barWidth / 2;
+            const yPoint = containerHeight - margins.bottom - adjustedBarHeight;
+            return /*#__PURE__*/ React.createElement("g", {
+                key: point.x instanceof Date ? point.x.getTime() : point.x
+            }, /*#__PURE__*/ React.createElement("rect", {
+                id: `${_vbcBarId}-${index}`,
+                x: xPoint,
+                className: classes.opacityChangeOnHover,
+                y: yPoint,
+                width: _barWidth,
+                "data-is-focusable": !props.hideTooltip && shouldHighlight,
+                height: adjustedBarHeight,
+                ref: (e)=>{
+                    _refCallback(e, point.legend);
+                },
+                onClick: point.onClick,
+                onMouseOver: (event)=>_onBarHover(point, colorScale(point.y), event),
+                "aria-label": _getAriaLabel(point),
+                role: "img",
+                onMouseLeave: _onBarLeave,
+                onFocus: _onBarFocus.bind(point, index, colorScale(point.y)),
+                onBlur: _onBarLeave,
+                fill: point.color && !useSingleColor ? point.color : colorScale(point.y),
+                tabIndex: point.legend !== '' ? 0 : undefined
+            }), _renderBarLabel(xPoint, yPoint, point.y, point.legend));
+        });
+        // Removing un wanted tooltip div from DOM, when prop not provided.
+        if (!props.showXAxisLablesTooltip) {
+            try {
+                // eslint-disable-next-line no-restricted-globals
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+        }
+        // Used to display tooltip at x axis labels.
+        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
+            const xAxisElement = d3Select(xElement).call(xBarScale);
+            try {
+                // eslint-disable-next-line no-restricted-globals
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+            const tooltipProps = {
+                tooltipCls: classes.tooltip,
+                id: _tooltipId,
+                xAxis: xAxisElement
+            };
+            xAxisElement && tooltipOfXAxislabels(tooltipProps);
+        }
+        return bars;
+    }
+    function _onLegendClick(legendTitle) {
+        if (selectedLegend === legendTitle) {
+            setSelectedLegend('');
+        } else {
+            setSelectedLegend(legendTitle);
+        }
+    }
+    function _onLegendHover(legendTitle) {
+        setActiveLegend(legendTitle);
+    }
+    function _onLegendLeave() {
+        setActiveLegend('');
+    }
+    function _getLegendData(data) {
+        const { useSingleColor } = props;
+        const { lineLegendText, lineLegendColor = tokens.colorPaletteYellowForeground1 } = props;
+        const actions = [];
+        data.forEach((point, _index)=>{
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            const color = !useSingleColor ? point.color : _createColors()(1);
+            // mapping data to the format Legends component needs
+            const legend = {
+                title: point.legend,
+                color,
+                action: ()=>{
+                    _onLegendClick(point.legend);
+                },
+                hoverAction: ()=>{
+                    _handleChartMouseLeave();
+                    _onLegendHover(point.legend);
+                },
+                onMouseOutAction: ()=>{
+                    _onLegendLeave();
+                }
+            };
+            actions.push(legend);
+        });
+        if (_isHavingLine && lineLegendText && lineLegendColor) {
+            const lineLegend = {
+                title: lineLegendText,
+                color: lineLegendColor,
+                action: ()=>{
+                    _onLegendClick(lineLegendText);
+                },
+                hoverAction: ()=>{
+                    _handleChartMouseLeave();
+                    _onLegendHover(lineLegendText);
+                },
+                onMouseOutAction: ()=>{
+                    _onLegendLeave();
+                },
+                isLineLegendInBarChart: true
+            };
+            actions.unshift(lineLegend);
+        }
+        const legends = /*#__PURE__*/ React.createElement(Legends, {
+            legends: actions,
+            enabledWrapLines: props.enabledLegendsWrapLines,
+            overflowText: props.legendsOverflowText,
+            ...props.legendProps
+        });
+        return legends;
+    }
+    function _getAxisData(yAxisData) {
+        if (yAxisData && yAxisData.yAxisDomainValues.length) {
+            const { yAxisDomainValues: domainValue } = yAxisData;
+            _yMax = Math.max(domainValue[domainValue.length - 1], props.yMaxValue || 0);
+        }
+    }
+    /**
+   * This function checks if the given legend is highlighted or not.
+   * A legend can be highlighted in 2 ways:
+   * 1. selection: if the user clicks on it
+   * 2. hovering: if there is no selected legend and the user hovers over it
+   */ function _legendHighlighted(legendTitle) {
+        return selectedLegend === legendTitle || selectedLegend === '' && activeLegend === legendTitle;
+    }
+    /**
+   * This function checks if none of the legends is selected or hovered.
+   */ function _noLegendHighlighted() {
+        return selectedLegend === '' && activeLegend === '';
+    }
+    function _getAriaLabel(point) {
+        var _point_lineData, _point_lineData1, _point_callOutAccessibilityData;
+        const xValue = point.xAxisCalloutData ? point.xAxisCalloutData : point.x instanceof Date ? point.x.toLocaleString() : point.x;
+        const legend = point.legend;
+        const yValue = point.yAxisCalloutData || point.y;
+        const lineLegend = props.lineLegendText || 'Line';
+        const lineYValue = ((_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.yAxisCalloutData) || ((_point_lineData1 = point.lineData) === null || _point_lineData1 === void 0 ? void 0 : _point_lineData1.y);
+        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ` + (legend ? `${legend}, ` : '') + `${yValue}.` + (typeof lineYValue !== 'undefined' ? ` ${lineLegend}, ${lineYValue}.` : '');
+    }
+    function _renderBarLabel(xPoint, yPoint, barValue, legend) {
+        if (props.hideLabels || _barWidth < 16 || !(_legendHighlighted(legend) || _noLegendHighlighted())) {
+            return null;
+        }
+        return /*#__PURE__*/ React.createElement("text", {
+            x: xPoint + _barWidth / 2,
+            y: yPoint - 6,
+            textAnchor: "middle",
+            className: classes.barLabel,
+            "aria-hidden": true
+        }, formatValueWithSIPrefix(barValue));
+    }
+    function _getDomainMargins(containerWidth) {
+        _domainMargin = MIN_DOMAIN_MARGIN;
+        /** Total width available to render the bars */ const totalWidth = containerWidth - (margins.left + MIN_DOMAIN_MARGIN) - (margins.right + MIN_DOMAIN_MARGIN);
+        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') {
+                /** Rate at which the space between the bars changes wrt the bar width */ const barGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
+                // 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;
+                if (totalWidth >= reqWidth) {
+                    // Center align the chart by setting equal left and right margins for domain
+                    _domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
+                }
+            }
+        } else {
+            var _props_data;
+            const data = ((_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.map((point)=>point.x)) || [];
+            _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, calculateAppropriateBarWidth(data, totalWidth));
+            _domainMargin = MIN_DOMAIN_MARGIN + _barWidth / 2;
+        }
+        return {
+            ...margins,
+            left: margins.left + _domainMargin,
+            right: margins.right + _domainMargin
+        };
+    }
+    function _isChartEmpty() {
+        return _points.length === 0 || d3Max(_points, (point)=>point.y) <= 0 && !_isHavingLine;
+    }
+    function updatePosition(newX, newY) {
+        const threshold = 1; // Set a threshold for movement
+        const { x, y } = clickPosition;
+        // Calculate the distance moved
+        const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));
+        // Update the position only if the distance moved is greater than the threshold
+        if (distance > threshold) {
+            setClickPosition({
+                x: newX,
+                y: newY
+            });
+            setPopoverOpen(true);
+        }
+    }
+    _adjustProps();
+    _xAxisLabels = _points.map((point)=>point.x);
+    _yMax = Math.max(d3Max(_points, (point)=>point.y), props.yMaxValue || 0);
+    const legendBars = _getLegendData(_points);
+    var _props_culture;
+    const calloutProps = {
+        ..._isHavingLine && {
+            YValueHover: YValueHover,
+            hoverXValue: hoverXValue
+        },
+        color: color,
+        legend: calloutLegend,
+        XValue: xCalloutValue,
+        YValue: yCalloutValue ? yCalloutValue : dataForHoverCard,
+        ...props.calloutProps,
+        ...getAccessibleDataObject(callOutAccessibilityData),
+        clickPosition: clickPosition,
+        isPopoverOpen: isPopoverOpen,
+        isCalloutForStack: _isHavingLine && _noLegendHighlighted(),
+        culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+        isCartesian: true,
+        customCallout: {
+            customizedCallout: _getCustomizedCallout() != null ? _getCustomizedCallout() : undefined,
+            customCalloutProps: props.calloutPropsPerDataPoint ? props.calloutPropsPerDataPoint(dataPointCalloutProps) : undefined
+        }
+    };
+    const tickParams = {
+        tickValues: props.tickValues,
+        tickFormat: props.tickFormat
+    };
+    return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
+        ...props,
+        points: _points,
+        chartType: ChartTypes.VerticalBarChart,
+        xAxisType: _xAxisType,
+        calloutProps: calloutProps,
+        tickParams: tickParams,
+        ..._isHavingLine && _noLegendHighlighted() && {
+            isCalloutForStack: true
+        },
+        legendBars: legendBars,
+        datasetForXAxisDomain: _xAxisLabels,
+        barwidth: _barWidth,
+        getmargins: _getMargins,
+        getGraphData: _getGraphData,
+        getAxisData: _getAxisData,
+        onChartMouseLeave: _handleChartMouseLeave,
+        getDomainMargins: _getDomainMargins,
+        ..._xAxisType === XAxisTypes.StringAxis && {
+            xAxisInnerPadding: _xAxisInnerPadding,
+            xAxisOuterPadding: _xAxisOuterPadding
+        },
+        componentRef: cartesianChartRef,
+        /* 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.yScale, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
+        }
+    }) : /*#__PURE__*/ React.createElement("div", {
+        id: _emptyChartId,
+        role: 'alert',
+        style: {
+            opacity: '0'
+        },
+        "aria-label": 'Graph has no data to display'
+    });
+});
+VerticalBarChart.displayName = 'VerticalBarChart';