'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "VerticalStackedBarChart", {
    enumerable: true,
    get: function() {
        return VerticalStackedBarChart;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _d3array = require("d3-array");
const _useVerticalStackedBarChartStylesstyles = require("./useVerticalStackedBarChartStyles.styles");
const _d3scale = require("d3-scale");
const _reactutilities = require("@fluentui/react-utilities");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const _index = require("../../index");
const _index1 = require("../../utilities/index");
const _chartutilities = require("@fluentui/chart-utilities");
const _hooks = require("../../utilities/hooks");
const barGapMultiplier = 0.2;
const barGapMin = 1;
const MIN_DOMAIN_MARGIN = 8;
const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forwardedRef)=>{
    var _props_legendProps;
    const props = {
        xAxisCategoryOrder: 'default',
        yAxisCategoryOrder: 'default',
        maxBarWidth: 24,
        ..._props
    };
    const _isRtl = (0, _index1.useRtl)();
    const _createLegendsForLine = (data)=>_getLineLegends(data);
    const _emptyChartId = (0, _reactutilities.useId)('_VSBC_empty');
    const _arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
        axis: 'vertical',
        circular: true
    });
    let _points = [];
    let _dataset;
    let _xAxisLabels = [];
    let _bars;
    let _xAxisType = props.data && props.data.length > 0 ? (0, _index1.getTypeOfAxis)(props.data[0].xAxisPoint, true) : _index1.XAxisTypes.StringAxis;
    let _barWidth = 0;
    let _colors;
    let _margins;
    let _lineObject;
    let _yMax;
    let _yMin;
    let _calloutAnchorPoint;
    let _domainMargin = MIN_DOMAIN_MARGIN;
    let _xAxisInnerPadding = 0;
    let _xAxisOuterPadding = 0;
    const { cartesianChartRef, legendsRef: _legendsRef } = (0, _hooks.useImageExport)(props.componentRef, props.hideLegend);
    const Y_ORIGIN = 0;
    let _yAxisType;
    let _yAxisLabels = [];
    const [selectedLegends, setSelectedLegends] = _react.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
    const [activeLegend, setActiveLegend] = _react.useState(undefined);
    const [dataForHoverCard, setDataForHoverCard] = _react.useState(0);
    const [color, setColor] = _react.useState('');
    const [hoverXValue, setHoverXValue] = _react.useState('');
    const [YValueHover, setYValueHover] = _react.useState([]);
    const [xCalloutValue, setXCalloutValue] = _react.useState('');
    const [yCalloutValue, setYCalloutValue] = _react.useState('');
    const [activeXAxisDataPoint, setActiveXAxisDataPoint] = _react.useState('');
    const [calloutLegend, setCalloutLegend] = _react.useState('');
    const [stackCalloutProps, setStackCalloutProps] = _react.useState();
    const [dataPointCalloutProps, setDataPointCalloutProps] = _react.useState();
    const [callOutAccessibilityData, setCallOutAccessibilityData] = _react.useState();
    const [clickPosition, setClickPosition] = _react.useState({
        x: 0,
        y: 0
    });
    const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
    const prevPropsRef = _react.useRef(null);
    _react.useEffect(()=>{
        if (prevPropsRef.current) {
            var _prevProps_legendProps, _props_legendProps;
            const prevProps = prevPropsRef.current;
            if (!(0, _index1.areArraysEqual)((_prevProps_legendProps = prevProps.legendProps) === null || _prevProps_legendProps === void 0 ? void 0 : _prevProps_legendProps.selectedLegends, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
                var _props_legendProps1;
                setSelectedLegends(((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends) || []);
            }
            if (prevProps.height !== props.height || prevProps.width !== props.width || prevProps.data !== props.data) {
                _adjustProps();
                _dataset = _createDataSetLayer();
            }
        }
        prevPropsRef.current = props;
    }, [
        props
    ]);
    function _getLegendData(data, lineLegends) {
        if (props.hideLegend) {
            return /*#__PURE__*/ _react.createElement(_react.Fragment, null);
        }
        const defaultPalette = [
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color6),
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color1),
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color5),
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color7),
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color10)
        ];
        const actions = [];
        const { allowHoverOnLegend = true } = props;
        data.forEach((singleChartData)=>{
            singleChartData.chartData.forEach((point)=>{
                const color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
                const checkSimilarLegends = actions.filter((leg)=>leg.title === point.legend && leg.color === color);
                if (checkSimilarLegends.length > 0) {
                    return;
                }
                const legend = {
                    title: point.legend,
                    color,
                    hoverAction: allowHoverOnLegend ? ()=>{
                        _handleChartMouseLeave();
                        _onLegendHover(point.legend);
                    } : undefined,
                    onMouseOutAction: allowHoverOnLegend ? ()=>_onLegendLeave() : undefined
                };
                actions.push(legend);
            });
        });
        const legendsOfLine = [];
        if (lineLegends && lineLegends.length > 0) {
            lineLegends.forEach((point)=>{
                const legend = {
                    title: point.title,
                    color: point.color,
                    isLineLegendInBarChart: true,
                    hoverAction: allowHoverOnLegend ? ()=>{
                        _handleChartMouseLeave();
                        _onLegendHover(point.title);
                    } : undefined,
                    onMouseOutAction: allowHoverOnLegend ? ()=>_onLegendLeave() : undefined
                };
                legendsOfLine.push(legend);
            });
        }
        const totalLegends = actions.concat(legendsOfLine);
        return /*#__PURE__*/ _react.createElement(_index.Legends, {
            legends: totalLegends,
            enabledWrapLines: props.enabledLegendsWrapLines,
            overflowText: props.legendsOverflowText,
            ...props.legendProps,
            onChange: _onLegendSelectionChange,
            legendRef: _legendsRef
        });
    }
    function _getHighlightedLegend() {
        return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [
            activeLegend
        ] : [];
    }
    function _lineHoverFocus(lineData, event) {
        let clientX = 0;
        let clientY = 0;
        if ('clientX' in event) {
            clientX = event.clientX;
            clientY = event.clientY;
        } else {
            const boundingRect = event.target.getBoundingClientRect();
            clientX = boundingRect.left + boundingRect.width / 2;
            clientY = boundingRect.top + boundingRect.height / 2;
        }
        if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
            _updatePosition(clientX, clientY);
            setPopoverOpen(true);
            setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
            setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
            setCalloutLegend(lineData.legend);
            setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
            setColor(lineData.color);
        }
    }
    function _onStackHoverFocus(stack, event) {
        var _stack_lineData;
        let clientX = 0;
        let clientY = 0;
        if ('clientX' in event) {
            clientX = event.clientX;
            clientY = event.clientY;
        } else {
            // Handle React FocusEvent or SVGGElement
            const element = 'target' in event ? event.target : event;
            const boundingRect = element.getBoundingClientRect();
            clientX = boundingRect.left + boundingRect.width / 2;
            clientY = boundingRect.top + boundingRect.height / 2;
        }
        if (!_noLegendHighlighted()) {
            var _stack_lineData1;
            stack = {
                ...stack,
                chartData: stack.chartData.filter((dataPoint)=>_isLegendHighlighted(dataPoint.legend)),
                lineData: (_stack_lineData1 = stack.lineData) === null || _stack_lineData1 === void 0 ? void 0 : _stack_lineData1.filter((dataPoint)=>_isLegendHighlighted(dataPoint.legend))
            };
        }
        const lineData = stack.lineData;
        const isLinesPresent = lineData !== undefined && lineData.length > 0;
        if (isLinesPresent) {
            lineData.forEach((item)=>{
                item.data = item.data || item.y;
                item.shouldDrawBorderBottom = true;
            });
        }
        _updatePosition(clientX, clientY);
        var _stack_lineData_length;
        setPopoverOpen(stack.chartData.length > 0 || ((_stack_lineData_length = (_stack_lineData = stack.lineData) === null || _stack_lineData === void 0 ? void 0 : _stack_lineData.length) !== null && _stack_lineData_length !== void 0 ? _stack_lineData_length : 0) > 0);
        setYValueHover(isLinesPresent ? [
            ...lineData.sort((a, b)=>a.data < b.data ? 1 : -1),
            ...stack.chartData.slice().reverse()
        ] : stack.chartData.slice().reverse());
        setHoverXValue(stack.xAxisPoint instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(stack.xAxisPoint, props.culture, props.useUTC) : stack.xAxisPoint);
        setStackCalloutProps(stack);
        setActiveXAxisDataPoint(stack.xAxisPoint);
        setCallOutAccessibilityData(stack.stackCallOutAccessibilityData);
    }
    function _handleChartMouseLeave() {
        _calloutAnchorPoint = null;
        setPopoverOpen(false);
        setActiveXAxisDataPoint('');
    }
    const _onClick = (data, mouseEvent)=>{
        var _props_onBarClick;
        (_props_onBarClick = props.onBarClick) === null || _props_onBarClick === void 0 ? void 0 : _props_onBarClick.call(props, mouseEvent, data);
        if (props.href && (0, _index1.isSafeUrl)(props.href)) {
            window.location.href = props.href;
        }
    };
    function _adjustProps() {
        var _points_;
        _points = props.data || [];
        _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth);
        const defaultColors = [
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color6),
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color1),
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color5),
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color7),
            (0, _index1.getColorFromToken)(_index1.DataVizPalette.color10)
        ];
        _colors = defaultColors;
        const firstXValue = (_points_ = _points[0]) === null || _points_ === void 0 ? void 0 : _points_.xAxisPoint;
        _xAxisType = (0, _chartutilities.isInvalidValue)(firstXValue) ? _index1.XAxisTypes.StringAxis : (0, _index1.getTypeOfAxis)(firstXValue, true);
        _lineObject = _getFormattedLineData(props.data);
        _xAxisInnerPadding = (0, _index1.getScalePadding)(props.xAxisInnerPadding, props.xAxisPadding, _xAxisType === _index1.XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
        _xAxisOuterPadding = (0, _index1.getScalePadding)(props.xAxisOuterPadding, props.xAxisPadding, 0);
        _initYAxisParams();
    }
    function _createDataSetLayer() {
        const dataset = _points.map((singlePointData)=>{
            if (_yAxisType === _index1.YAxisType.StringAxis) {
                return {
                    x: singlePointData.xAxisPoint,
                    y: 0
                };
            }
            let total = 0;
            singlePointData.chartData.forEach((point)=>{
                total = total + point.data;
            });
            return {
                x: singlePointData.xAxisPoint,
                y: total
            };
        });
        _xAxisLabels = _getOrderedXAxisLabels();
        return dataset;
    }
    function _onLegendHover(legendTitle) {
        setActiveLegend(legendTitle);
    }
    function _onLegendLeave() {
        setActiveLegend(undefined);
    }
    function _onLegendSelectionChange(_selectedLegends, event, currentLegend) {
        var _props_legendProps, _props_legendProps1;
        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
            setSelectedLegends(_selectedLegends);
        } else {
            setSelectedLegends(_selectedLegends.slice(-1));
        }
        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
            props.legendProps.onChange(_selectedLegends, event, currentLegend);
        }
    }
    function _getMargins(margins) {
        _margins = margins;
    }
    function _getGraphData(xScale, yScale, containerHeight, containerWidth, xElement) {
        const { xBarScale, yBarScale } = _getScales(containerHeight, containerWidth);
        return _bars = _createBar(xBarScale, _yAxisType === _index1.YAxisType.StringAxis ? yScale : yBarScale, containerHeight, xElement);
    }
    function _getAxisData(yAxisData) {
        if (yAxisData && yAxisData.yAxisDomainValues.length) {
            const { yAxisDomainValues: domainValue } = yAxisData;
            _yMax = Math.max(domainValue[domainValue.length - 1], props.yMaxValue || Y_ORIGIN);
            _yMin = Math.min(domainValue[0], props.yMinValue || Y_ORIGIN);
        }
    }
    /**
   * 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 _isLegendHighlighted(legendTitle) {
        return _getHighlightedLegend().includes(legendTitle);
    }
    /**
   * This function checks if none of the legends is selected or hovered.
   */ function _noLegendHighlighted() {
        return _getHighlightedLegend().length === 0;
    }
    function _getAriaLabel(singleChartData, point, isLinePoint) {
        var _point_callOutAccessibilityData;
        if (!point) {
            var _singleChartData_lineData, _singleChartData_stackCallOutAccessibilityData;
            /** if shouldFocusWholeStack is true */ const xValue = singleChartData.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(singleChartData.xAxisPoint, props.culture, props.useUTC) : singleChartData.xAxisPoint);
            const pointValues = singleChartData.chartData.map((pt)=>{
                const legend = pt.legend;
                const yValue = pt.yAxisCalloutData || pt.data;
                return _noLegendHighlighted() || _isLegendHighlighted(legend) ? `${legend}, ${yValue}.` : '';
            }).filter((str)=>str !== '').join(' ');
            const lineValues = (_singleChartData_lineData = singleChartData.lineData) === null || _singleChartData_lineData === void 0 ? void 0 : _singleChartData_lineData.map((ln)=>{
                const legend = ln.legend;
                const yValue = ln.yAxisCalloutData || ln.data || ln.y;
                return _noLegendHighlighted() || _isLegendHighlighted(legend) ? `${legend}, ${yValue}.` : '';
            }).filter((str)=>str !== '').join(' ');
            return ((_singleChartData_stackCallOutAccessibilityData = singleChartData.stackCallOutAccessibilityData) === null || _singleChartData_stackCallOutAccessibilityData === void 0 ? void 0 : _singleChartData_stackCallOutAccessibilityData.ariaLabel) || `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : '');
        }
        /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || !isLinePoint && point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(singleChartData.xAxisPoint, props.culture, props.useUTC) : singleChartData.xAxisPoint);
        const legend = point.legend;
        const yValue = point.yAxisCalloutData || (isLinePoint ? point.data || point.y : point.data);
        return !isLinePoint && ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
    }
    function _getCustomizedCallout() {
        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
        return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint && !_isHavingLines ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout) : null;
    }
    function _toFocusWholeStack() {
        const { isCalloutForStack = false } = props;
        return isCalloutForStack;
    }
    function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
        let domainNRangeValue;
        if (xAxisType === _index1.XAxisTypes.NumericAxis) {
            domainNRangeValue = (0, _index1.domainRangeOfVSBCNumeric)(points, margins, width, isRTL, barWidth);
        } else if (xAxisType === _index1.XAxisTypes.DateAxis) {
            domainNRangeValue = (0, _index1.domainRangeOfDateForAreaLineScatterVerticalBarCharts)(points, margins, width, isRTL, tickValues, chartType, barWidth);
        } else {
            domainNRangeValue = (0, _index1.domainRangeOfXStringAxis)(margins, width, isRTL);
        }
        return domainNRangeValue;
    }
    function _getFormattedLineData(data) {
        const linesData = [];
        const formattedLineData = {};
        data.forEach((item, index)=>{
            if (item.lineData) {
                item.lineData.forEach((line)=>{
                    linesData.push({
                        ...line,
                        index,
                        xItem: item
                    });
                });
            }
        });
        linesData.forEach((item)=>{
            if (formattedLineData[item.legend]) {
                formattedLineData[item.legend].push(item);
            } else {
                formattedLineData[item.legend] = [
                    item
                ];
            }
        });
        return formattedLineData;
    }
    function _getLineLegends(data) {
        const lineObject = _lineObject;
        const lineLegends = [];
        Object.keys(lineObject).forEach((item)=>{
            lineLegends.push({
                title: item,
                color: lineObject[item][0].color
            });
        });
        return lineLegends;
    }
    function _createLines(xScale, yScalePrimary, containerHeight, containerWidth, yScaleSecondary) {
        var _props_lineOptions;
        const lineObject = _getFormattedLineData(props.data);
        const lines = [];
        const borderForLines = [];
        const dots = [];
        //const { theme } = props;
        const lineBorderWidth = ((_props_lineOptions = props.lineOptions) === null || _props_lineOptions === void 0 ? void 0 : _props_lineOptions.lineBorderWidth) ? Number.parseFloat(props.lineOptions.lineBorderWidth.toString()) : 0;
        const xScaleBandwidthTranslate = _xAxisType !== _index1.XAxisTypes.StringAxis ? 0 : xScale.bandwidth() / 2;
        Object.keys(lineObject).forEach((item, index)=>{
            const shouldHighlight = _isLegendHighlighted(item) || _noLegendHighlighted();
            for(let i = 1; i < lineObject[item].length; i++){
                var _lineObject_item__lineOptions, _lineObject_item__lineOptions1, _lineObject_item__lineOptions2;
                const x1 = xScale(lineObject[item][i - 1].xItem.xAxisPoint);
                const useSecondaryYScale = lineObject[item][i - 1].useSecondaryYScale && lineObject[item][i].useSecondaryYScale && yScaleSecondary;
                const y1 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i - 1].y) : yScalePrimary(lineObject[item][i - 1].y);
                const x2 = xScale(lineObject[item][i].xItem.xAxisPoint);
                const y2 = useSecondaryYScale ? yScaleSecondary(lineObject[item][i].y) : yScalePrimary(lineObject[item][i].y);
                const yScaleBandwidthTranslate = !useSecondaryYScale && _yAxisType === _index1.YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
                if (lineBorderWidth > 0) {
                    borderForLines.push(/*#__PURE__*/ _react.createElement("line", {
                        key: `${index}-${i}-BorderLine`,
                        x1: x1,
                        y1: y1,
                        x2: x2,
                        y2: y2,
                        opacity: shouldHighlight ? 1 : 0.1,
                        strokeWidth: 3 + lineBorderWidth * 2,
                        fill: "transparent",
                        strokeLinecap: "round",
                        stroke: _reacttheme.tokens.colorNeutralBackground1,
                        transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`
                    }));
                }
                var _lineObject_item__lineOptions_strokeWidth, _lineObject_item__lineOptions_strokeLinecap;
                lines.push(/*#__PURE__*/ _react.createElement("line", {
                    key: `${index}-${i}-line`,
                    x1: x1,
                    y1: y1,
                    x2: x2,
                    y2: y2,
                    opacity: shouldHighlight ? 1 : 0.1,
                    strokeWidth: (_lineObject_item__lineOptions_strokeWidth = (_lineObject_item__lineOptions = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions === void 0 ? void 0 : _lineObject_item__lineOptions.strokeWidth) !== null && _lineObject_item__lineOptions_strokeWidth !== void 0 ? _lineObject_item__lineOptions_strokeWidth : 3,
                    strokeLinecap: (_lineObject_item__lineOptions_strokeLinecap = (_lineObject_item__lineOptions1 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions1 === void 0 ? void 0 : _lineObject_item__lineOptions1.strokeLinecap) !== null && _lineObject_item__lineOptions_strokeLinecap !== void 0 ? _lineObject_item__lineOptions_strokeLinecap : 'round',
                    strokeDasharray: (_lineObject_item__lineOptions2 = lineObject[item][0].lineOptions) === null || _lineObject_item__lineOptions2 === void 0 ? void 0 : _lineObject_item__lineOptions2.strokeDasharray,
                    stroke: lineObject[item][i].color,
                    transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`,
                    onMouseOver: (event)=>_lineHover(lineObject[item][i - 1], event),
                    onMouseLeave: _handleMouseOut
                }));
            }
        });
        Object.keys(lineObject).forEach((item, index)=>{
            lineObject[item].forEach((circlePoint, subIndex)=>{
                const circleRef = {
                    refElement: null
                };
                const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === _index1.YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
                const shouldHighlight = _isLegendHighlighted(circlePoint.legend) || _noLegendHighlighted() ? true : false;
                dots.push(/*#__PURE__*/ _react.createElement("circle", {
                    key: `${index}-${subIndex}-dot`,
                    cx: xScale(circlePoint.xItem.xAxisPoint),
                    cy: circlePoint.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(circlePoint.y) : yScalePrimary(circlePoint.y),
                    onMouseOver: (event)=>_lineHover(circlePoint, event),
                    onMouseLeave: _handleMouseOut,
                    r: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius,
                    stroke: circlePoint.color,
                    fill: _reacttheme.tokens.colorNeutralBackground1,
                    strokeWidth: 3,
                    // Elements with visibility: hidden cannot receive focus, so use opacity: 0 instead to hide them.
                    // For more information, see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
                    opacity: _getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity,
                    transform: `translate(${xScaleBandwidthTranslate}, ${yScaleBandwidthTranslate})`,
                    ref: (e)=>{
                        circleRef.refElement = e;
                    },
                    tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
                    onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
                    onBlur: _handleMouseOut,
                    role: "img",
                    "aria-label": _getAriaLabel(circlePoint.xItem, circlePoint, true)
                }));
            });
        });
        return /*#__PURE__*/ _react.createElement(_react.Fragment, null, borderForLines, lines, dots);
    }
    function _getCircleOpacityAndRadius(xAxisPoint, legend) {
        if (!_noLegendHighlighted()) {
            if (xAxisPoint === activeXAxisDataPoint && _isLegendHighlighted(legend)) {
                return {
                    opacity: 1,
                    radius: 8
                };
            } else if (_isLegendHighlighted(legend)) {
                return {
                    opacity: 1,
                    radius: 0.3
                };
            } else {
                return {
                    opacity: 0,
                    radius: 0
                };
            }
        } else {
            return {
                opacity: activeXAxisDataPoint === xAxisPoint ? 1 : 0,
                radius: 8
            };
        }
    }
    function _renderCallout(props) {
        return props ? /*#__PURE__*/ _react.createElement(_index.ChartPopover, {
            culture: props.culture,
            XValue: props.xAxisCalloutData,
            xCalloutValue: xCalloutValue,
            yCalloutValue: yCalloutValue,
            clickPosition: clickPosition,
            isPopoverOpen: isPopoverOpen,
            legend: props.legend,
            YValue: props.yAxisCalloutData,
            color: props.color
        }) : null;
    }
    function _onRectHover(xAxisPoint, point, color, mouseEvent) {
        mouseEvent.persist();
        _onRectFocusHover(xAxisPoint, point, color, mouseEvent);
    }
    function _onRectFocusHover(xAxisPoint, point, color, mouseEvent) {
        let clientX = 0;
        let clientY = 0;
        if ('clientX' in mouseEvent) {
            clientX = mouseEvent.clientX;
            clientY = mouseEvent.clientY;
        } else {
            // Handle case where mouseEvent is an SVGGElement
            const boundingRect = mouseEvent.getBoundingClientRect();
            clientX = boundingRect.left + boundingRect.width / 2;
            clientY = boundingRect.top + boundingRect.height / 2;
        }
        if ((_calloutAnchorPoint === null || _calloutAnchorPoint === void 0 ? void 0 : _calloutAnchorPoint.chartDataPoint) !== point || (_calloutAnchorPoint === null || _calloutAnchorPoint === void 0 ? void 0 : _calloutAnchorPoint.xAxisDataPoint) !== xAxisPoint) {
            _calloutAnchorPoint = {
                chartDataPoint: point,
                xAxisDataPoint: xAxisPoint instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(xAxisPoint, props.culture, props.useUTC) : xAxisPoint.toString()
            };
            const xCalloutValue = point.xAxisCalloutData || (xAxisPoint instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(xAxisPoint, props.culture, props.useUTC) : xAxisPoint.toString());
            _updatePosition(clientX, clientY);
            setPopoverOpen(_noLegendHighlighted() || _isLegendHighlighted(point.legend));
            setCalloutLegend(point.legend);
            setDataForHoverCard(point.data);
            setColor(color);
            setXCalloutValue(xCalloutValue);
            setYCalloutValue(point.yAxisCalloutData);
            setDataPointCalloutProps(point);
            setCallOutAccessibilityData(point.callOutAccessibilityData);
        }
    }
    function _lineHover(lineData, mouseEvent) {
        mouseEvent.persist();
        _lineHoverFocus(lineData, mouseEvent);
    }
    function _lineFocus(event, lineData, ref) {
        if (ref.refElement) {
            _lineHoverFocus(lineData, event);
        }
    }
    function _onStackHover(stack, mouseEvent) {
        mouseEvent.persist();
        _onStackHoverFocus(stack, mouseEvent);
    }
    function _onRectFocus(point, xAxisPoint, color, ref) {
        if (ref.refElement) {
            _onRectFocusHover(xAxisPoint, point, color, ref.refElement);
        }
    }
    function _onStackFocus(stack, groupRef) {
        if (groupRef.refElement) {
            _onStackHoverFocus(stack, groupRef.refElement);
        }
    }
    function _handleMouseOut() {
    /**/ }
    function _getBarGapAndScale(bars, yBarScale, defaultTotalHeight) {
        const { barGapMax = 0 } = props;
        let totalData = 0;
        let totalHeight;
        let sumOfPercent = 0;
        let scalingRatio;
        if (_yAxisType === _index1.YAxisType.StringAxis) {
            totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : bars.reduce((total, bar)=>total + yBarScale(bar.data), 0);
        } else {
            // When displaying gaps between the bars, the height of each bar is
            // adjusted so that the total of all bars is not changed by the gaps
            totalData = bars.reduce((iter, value)=>iter + Math.abs(value.data), 0);
            totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : Math.abs(yBarScale(totalData) - yBarScale(Y_ORIGIN));
            bars.forEach((point)=>{
                let value = Math.abs(point.data) / totalData * 100;
                if (value < 1 && value !== 0) {
                    value = 1;
                }
                sumOfPercent += value;
            });
            scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
        }
        const gaps = barGapMax && bars.length - 1;
        const gapHeight = gaps && Math.max(barGapMin, Math.min(barGapMax, totalHeight * barGapMultiplier / gaps));
        const heightValueScale = _yAxisType === _index1.YAxisType.StringAxis ? 0 : (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
        return {
            gapHeight,
            heightValueScale,
            absStackTotal: totalData
        };
    }
    function _getScales(containerHeight, containerWidth) {
        const yDomain = [
            Math.min(Y_ORIGIN, _yMin),
            Math.max(Y_ORIGIN, _yMax)
        ];
        const yBarScale = (0, _d3scale.scaleLinear)().domain(yDomain).range([
            0,
            containerHeight - _margins.bottom - _margins.top
        ]);
        if (_xAxisType === _index1.XAxisTypes.NumericAxis) {
            const xMax = (0, _d3array.max)(_dataset, (point)=>point.x);
            const xMin = (0, _d3array.min)(_dataset, (point)=>point.x);
            const xBarScale = (0, _d3scale.scaleLinear)().domain(_isRtl ? [
                xMax,
                xMin
            ] : [
                xMin,
                xMax
            ]).range([
                _margins.left + _domainMargin,
                containerWidth - _margins.right - _domainMargin
            ]);
            if (!(0, _index1.isScalePaddingDefined)(props.xAxisInnerPadding, props.xAxisPadding)) {
                xBarScale.nice();
            }
            return {
                xBarScale,
                yBarScale
            };
        }
        if (_xAxisType === _index1.XAxisTypes.DateAxis) {
            const sDate = (0, _d3array.min)(_dataset, (point)=>{
                return point.x;
            });
            const lDate = (0, _d3array.max)(_dataset, (point)=>{
                return point.x;
            });
            const xBarScale = props.useUTC ? (0, _d3scale.scaleUtc)() : (0, _d3scale.scaleTime)();
            xBarScale.domain(_isRtl ? [
                lDate,
                sDate
            ] : [
                sDate,
                lDate
            ]).range([
                _margins.left + _domainMargin,
                containerWidth - _margins.right - _domainMargin
            ]);
            return {
                xBarScale,
                yBarScale
            };
        }
        const xBarScale = (0, _d3scale.scaleBand)().domain(_xAxisLabels).range(_isRtl ? [
            containerWidth - _margins.right - _domainMargin,
            _margins.left + _domainMargin
        ] : [
            _margins.left + _domainMargin,
            containerWidth - _margins.right - _domainMargin
        ]).paddingInner(_xAxisInnerPadding).paddingOuter(_xAxisOuterPadding);
        return {
            xBarScale,
            yBarScale
        };
    }
    const _isChartEmpty = ()=>{
        return !(props.data && props.data.length > 0 && props.data.some((item)=>item.chartData.length > 0 || item.lineData && item.lineData.length > 0));
    };
    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);
        }
    }
    function _getDomainMargins(containerWidth) {
        _domainMargin = MIN_DOMAIN_MARGIN;
        const totalWidth = (0, _index1.calcTotalWidth)(containerWidth, _margins, MIN_DOMAIN_MARGIN);
        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') {
                // 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 = (0, _index1.calcRequiredWidth)(_barWidth, _xAxisLabels.length, _xAxisInnerPadding);
                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) {
                // Calculate the remaining width after rendering bars at their maximum allowable width
                const bandwidth = (0, _index1.calcBandwidth)(totalWidth, _xAxisLabels.length, _xAxisInnerPadding);
                const barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, bandwidth);
                let reqWidth = (0, _index1.calcRequiredWidth)(barWidth, _xAxisLabels.length, _xAxisInnerPadding);
                const margin1 = (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)(_xAxisLabels) + 20;
                    reqWidth = (_xAxisLabels.length - _xAxisInnerPadding) * step;
                    margin2 = (totalWidth - reqWidth) / 2;
                }
                _domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
            }
        } else {
            var _props_data;
            const data = ((_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.map((point)=>point.xAxisPoint)) || [];
            _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, (0, _index1.calculateAppropriateBarWidth)(data, totalWidth, _xAxisInnerPadding));
            _domainMargin = MIN_DOMAIN_MARGIN + _barWidth / 2;
        }
        return {
            ..._margins,
            left: _margins.left + _domainMargin,
            right: _margins.right + _domainMargin
        };
    }
    function _getChartTitle() {
        const { chartTitle, data } = props;
        const numLines = Object.keys(_lineObject).length;
        return (chartTitle ? `${chartTitle}. ` : '') + `Vertical bar chart with ${(data === null || data === void 0 ? void 0 : data.length) || 0} stacked bars` + (numLines > 0 ? ` and ${numLines} lines` : '') + '. ';
    }
    const classes = (0, _useVerticalStackedBarChartStylesstyles.useVerticalStackedBarChartStyles)(props);
    function _createBar(xBarScale, yBarScale, containerHeight, xElement) {
        const { barCornerRadius = 0, barMinimumHeight = 0 } = props;
        const shouldFocusWholeStack = _toFocusWholeStack();
        if (_xAxisType === _index1.XAxisTypes.StringAxis) {
            _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
        }
        const bars = _points.map((singleChartData, indexNumber)=>{
            const xPoint = xBarScale(_xAxisType === _index1.XAxisTypes.NumericAxis ? singleChartData.xAxisPoint : _xAxisType === _index1.XAxisTypes.DateAxis ? singleChartData.xAxisPoint : singleChartData.xAxisPoint);
            const xScaleBandwidthTranslate = _xAxisType !== _index1.XAxisTypes.StringAxis ? -_barWidth / 2 : (xBarScale.bandwidth() - _barWidth) / 2;
            let barTotalValue = 0;
            const barsToDisplay = singleChartData.chartData.filter((point)=>point.data !== 0 && point.data !== '' && !(_yAxisType === _index1.YAxisType.StringAxis && typeof yBarScale(point.data) === 'undefined'));
            if (!barsToDisplay.length) {
                return undefined;
            }
            const { gapHeight, heightValueScale, absStackTotal } = _getBarGapAndScale(barsToDisplay, yBarScale);
            if (heightValueScale < 0) {
                return undefined;
            }
            const yBaseline = containerHeight - _margins.bottom - (_yAxisType === _index1.YAxisType.StringAxis ? 0 : yBarScale(Y_ORIGIN));
            let yPositiveStart = yBaseline;
            let yNegativeStart = yBaseline;
            let yPoint = 0;
            let heightOfLastBar = 0;
            const singleBar = barsToDisplay.map((point, index)=>{
                const startColor = point.color ? point.color : _colors[index];
                const ref = {};
                const shouldHighlight = _isLegendHighlighted(point.legend) || _noLegendHighlighted() ? true : false;
                const rectFocusProps = !shouldFocusWholeStack && shouldHighlight && {
                    'aria-label': _getAriaLabel(singleChartData, point),
                    onMouseOver: (event)=>_onRectHover(singleChartData.xAxisPoint, point, startColor, event),
                    onMouseMove: (event)=>_onRectHover(singleChartData.xAxisPoint, point, startColor, event),
                    onMouseLeave: _handleMouseOut,
                    onFocus: ()=>_onRectFocus(point, singleChartData.xAxisPoint, startColor, ref),
                    onBlur: _handleMouseOut,
                    onClick: (event)=>_onClick(point, event),
                    role: 'img',
                    tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined
                };
                let barHeight;
                const gapOffset = index ? gapHeight : 0;
                if (_yAxisType === _index1.YAxisType.StringAxis) {
                    barHeight = Math.max(containerHeight - _margins.bottom - (yBarScale(point.data) + yBarScale.bandwidth() / 2) - gapOffset, barMinimumHeight, 1);
                    yPositiveStart -= barHeight + gapOffset;
                    yPoint = yPositiveStart;
                } else {
                    barHeight = Math.abs(heightValueScale * point.data);
                    // FIXME: The current scaling logic may produce different min and gap heights for each bar stack.
                    const minHeight = Math.max(heightValueScale * absStackTotal / 100.0, barMinimumHeight);
                    if (barHeight < minHeight) {
                        barHeight = minHeight;
                    }
                    if (point.data >= Y_ORIGIN) {
                        yPositiveStart -= barHeight + gapOffset;
                        yPoint = yPositiveStart;
                    } else {
                        yPoint = yNegativeStart + gapOffset;
                        yNegativeStart = yPoint + barHeight;
                    }
                    barTotalValue += point.data;
                    heightOfLastBar = index === barsToDisplay.length - 1 ? barHeight : 0;
                }
                if (barCornerRadius && barHeight > barCornerRadius && index === barsToDisplay.length - 1) {
                    return /*#__PURE__*/ _react.createElement(_react.Fragment, {
                        key: index + indexNumber + `${shouldFocusWholeStack}`
                    }, /*#__PURE__*/ _react.createElement("path", {
                        className: classes.opacityChangeOnHover,
                        d: `
                  M ${xPoint} ${yPoint + barCornerRadius}
                  a ${barCornerRadius} ${barCornerRadius} 0 0 1 ${barCornerRadius} ${-barCornerRadius}
                  h ${_barWidth - 2 * barCornerRadius}
                  a ${barCornerRadius} ${barCornerRadius} 0 0 1 ${barCornerRadius} ${barCornerRadius}
                  v ${barHeight - barCornerRadius}
                  h ${-_barWidth}
                  z
                `,
                        fill: startColor,
                        opacity: shouldHighlight ? 1 : 0.1,
                        rx: props.roundCorners ? 3 : 0,
                        ref: (e)=>{
                            ref.refElement = e;
                        },
                        transform: `translate(${xScaleBandwidthTranslate}, 0)`,
                        cursor: props.href ? 'pointer' : 'default',
                        ...rectFocusProps
                    }));
                }
                if (barHeight < 0) {
                    return /*#__PURE__*/ _react.createElement(_react.Fragment, {
                        key: index + indexNumber
                    }, " ");
                }
                return /*#__PURE__*/ _react.createElement(_react.Fragment, {
                    key: index + indexNumber
                }, /*#__PURE__*/ _react.createElement("rect", {
                    className: classes.opacityChangeOnHover,
                    x: xPoint,
                    y: yPoint,
                    width: _barWidth,
                    height: barHeight,
                    fill: startColor,
                    opacity: shouldHighlight ? 1 : 0.1,
                    cursor: props.href ? 'pointer' : 'default',
                    rx: props.roundCorners ? 3 : 0,
                    ref: (e)=>{
                        ref.refElement = e;
                    },
                    ...rectFocusProps,
                    transform: `translate(${xScaleBandwidthTranslate}, 0)`
                }));
            });
            const groupRef = {};
            const someBarsActive = singleChartData.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length > 0;
            // FIXME: Making the entire stack focusable when stack callout is enabled adds unnecessary complexity
            // and can reduce usability in certain scenarios. Instead, each individual element within the stack
            // should be focusable on its own, with its own aria-label. This behavior is also seen in Highcharts.
            const stackFocusProps = shouldFocusWholeStack && someBarsActive && {
                'aria-label': _getAriaLabel(singleChartData),
                onMouseOver: (event)=>_onStackHover(singleChartData, event),
                onMouseMove: (event)=>_onStackHover(singleChartData, event),
                onMouseLeave: _handleMouseOut,
                onFocus: ()=>_onStackFocus(singleChartData, groupRef),
                onBlur: _handleMouseOut,
                onClick: (event)=>_onClick(singleChartData, event),
                role: 'img',
                tabIndex: !props.hideTooltip ? 0 : undefined
            };
            let showLabel = false;
            let barLabel = 0;
            let selectedBarTotalValue = 0;
            let customBarLabel = undefined;
            if (!props.hideLabels && _yAxisType !== _index1.YAxisType.StringAxis) {
                // Collect all bars with barLabel that match the legend filter
                const barLabelsToDisplay = barsToDisplay.filter((point)=>point.barLabel && (_noLegendHighlighted() || _isLegendHighlighted(point.legend)));
                // For stacked bars, we want to show the total of the stack, not individual bar labels
                // Only use customBarLabel if there's exactly one bar with a label in the stack
                if (barLabelsToDisplay.length === 1) {
                    customBarLabel = barLabelsToDisplay[0].barLabel;
                }
                if (_noLegendHighlighted()) {
                    showLabel = true;
                    barLabel = customBarLabel !== null && customBarLabel !== void 0 ? customBarLabel : barTotalValue;
                    selectedBarTotalValue = barTotalValue;
                } else {
                    barsToDisplay.forEach((point)=>{
                        if (_isLegendHighlighted(point.legend)) {
                            showLabel = true;
                            selectedBarTotalValue += point.data;
                        }
                    });
                    barLabel = customBarLabel !== null && customBarLabel !== void 0 ? customBarLabel : selectedBarTotalValue;
                }
            }
            return /*#__PURE__*/ _react.createElement("g", {
                key: indexNumber + `${shouldFocusWholeStack}`
            }, /*#__PURE__*/ _react.createElement("g", {
                id: `${indexNumber}-singleBar`,
                ref: (e)=>{
                    groupRef.refElement = e;
                },
                ...stackFocusProps
            }, singleBar), !props.hideLabels && _barWidth >= 16 && showLabel && /*#__PURE__*/ _react.createElement("text", {
                x: xPoint + _barWidth / 2,
                //if total bar value >=0, show label above top bar, otherwise below bottom bar
                y: selectedBarTotalValue >= Y_ORIGIN ? yPoint - 6 : yPoint + heightOfLastBar + 12,
                textAnchor: "middle",
                className: classes.barLabel,
                "aria-label": `Total: ${barLabel}`,
                role: "img",
                transform: `translate(${xScaleBandwidthTranslate}, 0)`,
                style: {
                    direction: 'ltr',
                    unicodeBidi: 'isolate'
                }
            }, typeof barLabel === 'string' ? barLabel : typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barLabel) : (0, _index1.formatScientificLimitWidth)(barLabel)));
        });
        return bars.filter((bar)=>!!bar);
    }
    function _getMinMaxOfYAxis(dataset, yAxisType, useSecondaryYScale) {
        if (!useSecondaryYScale) {
            return (0, _index1.findVSBCNumericMinMaxOfY)(dataset);
        }
        const values = [];
        props.data.forEach((xPoint)=>{
            var _xPoint_lineData;
            (_xPoint_lineData = xPoint.lineData) === null || _xPoint_lineData === void 0 ? void 0 : _xPoint_lineData.forEach((point)=>{
                // useSecondaryYScale is applicable only for lines in VSBC
                if (point.useSecondaryYScale) {
                    values.push(point.y);
                }
            });
        });
        return {
            startValue: (0, _d3array.min)(values),
            endValue: (0, _d3array.max)(values)
        };
    }
    function _initYAxisParams() {
        if (_points[0].chartData.length > 0) {
            _yAxisType = (0, _index1.getTypeOfAxis)(_points[0].chartData[0].data, false);
        } else {
            Object.keys(_lineObject).forEach((lineLegend)=>{
                if (!_lineObject[lineLegend][0].useSecondaryYScale) {
                    _yAxisType = (0, _index1.getTypeOfAxis)(_lineObject[lineLegend][0].y, false);
                }
            });
        }
        _yAxisLabels = _getOrderedYAxisLabels();
    }
    function _getYDomainMargins(containerHeight) {
        /**
     * Specifies the extra top margin to apply above the highest y-axis tick label.
     * Useful when stacked bars extend beyond the combined height of all y-axis labels (or categories).
     */ let yAxisTickMarginTop = 0;
        /** Total height available to render the bars */ const totalHeight = containerHeight - _margins.bottom - _margins.top;
        if (_yAxisType === _index1.YAxisType.StringAxis) {
            /** Maximum height of the stacked bars, expressed in multiples of the height of a y-axis label (or category) */ let maxBarHeightInLabels = 0;
            _points.forEach((xPoint)=>{
                /** Height of the stacked bar, expressed in multiples of the height of a y-axis label (or category) */ let barHeightInLabels = 0;
                xPoint.chartData.forEach((bar)=>{
                    barHeightInLabels += _yAxisLabels.indexOf(`${bar.data}`) + 1;
                });
                maxBarHeightInLabels = Math.max(maxBarHeightInLabels, barHeightInLabels);
            });
            /** Height of a y-axis label (or category) */ const yAxisLabelHeight = maxBarHeightInLabels === 0 ? 0 : totalHeight / maxBarHeightInLabels;
            yAxisTickMarginTop += yAxisLabelHeight * (maxBarHeightInLabels - _yAxisLabels.length);
        }
        return {
            ..._margins,
            top: _margins.top + yAxisTickMarginTop
        };
    }
    function _getOrderedXAxisLabels() {
        if (_xAxisType !== _index1.XAxisTypes.StringAxis) {
            return [];
        }
        return (0, _index1.sortAxisCategories)(_mapCategoryToValues(), props.xAxisCategoryOrder);
    }
    function _getOrderedYAxisLabels() {
        if (_yAxisType !== _index1.YAxisType.StringAxis) {
            return [];
        }
        return (0, _index1.sortAxisCategories)(_mapCategoryToValues(true), props.yAxisCategoryOrder);
    }
    function _mapCategoryToValues(isYAxis = false) {
        const categoryToValues = {};
        _points.forEach((point)=>{
            var _point_lineData;
            point.chartData.forEach((bar)=>{
                const category = isYAxis ? bar.data : point.xAxisPoint;
                const value = isYAxis ? point.xAxisPoint : bar.data;
                if (!categoryToValues[category]) {
                    categoryToValues[category] = [];
                }
                if (typeof value === 'number') {
                    categoryToValues[category].push(value);
                }
            });
            (_point_lineData = point.lineData) === null || _point_lineData === void 0 ? void 0 : _point_lineData.forEach((linePoint)=>{
                if (isYAxis && linePoint.useSecondaryYScale) {
                    return;
                }
                const category = isYAxis ? linePoint.y : point.xAxisPoint;
                const value = isYAxis ? point.xAxisPoint : linePoint.y;
                if (!categoryToValues[category]) {
                    categoryToValues[category] = [];
                }
                if (typeof value === 'number') {
                    categoryToValues[category].push(value);
                }
            });
        });
        return categoryToValues;
    }
    if (!_isChartEmpty()) {
        _adjustProps();
        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
        const shouldFocusWholeStack = _toFocusWholeStack();
        _dataset = _createDataSetLayer();
        const legendBars = _getLegendData(_points, _createLegendsForLine(props.data));
        const calloutProps = {
            color: color,
            legend: calloutLegend,
            XValue: xCalloutValue,
            YValue: yCalloutValue ? yCalloutValue : dataForHoverCard,
            YValueHover: YValueHover,
            hoverXValue: hoverXValue,
            ...props.calloutProps,
            ...(0, _index1.getAccessibleDataObject)(callOutAccessibilityData),
            clickPosition: clickPosition,
            isPopoverOpen: isPopoverOpen,
            isCalloutForStack: shouldFocusWholeStack,
            isCartesian: true,
            customCallout: {
                customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
                customCalloutProps: props.calloutPropsPerDataPoint ? props.calloutPropsPerDataPoint(dataPointCalloutProps) : undefined
            }
        };
        const tickParams = {
            tickValues: props.tickValues,
            tickFormat: props.tickFormat
        };
        return /*#__PURE__*/ _react.createElement(_index.CartesianChart, {
            ...props,
            chartTitle: _getChartTitle(),
            points: _dataset,
            chartType: _index1.ChartTypes.VerticalStackedBarChart,
            xAxisType: _xAxisType,
            getMinMaxOfYAxis: _getMinMaxOfYAxis,
            calloutProps: calloutProps,
            createYAxis: _index1.createNumericYAxis,
            tickParams: tickParams,
            legendBars: legendBars,
            datasetForXAxisDomain: _xAxisLabels,
            isCalloutForStack: shouldFocusWholeStack,
            getDomainNRangeValues: _getDomainNRangeValues,
            createStringYAxis: _index1.createStringYAxis,
            barwidth: _barWidth,
            getmargins: _getMargins,
            getGraphData: _getGraphData,
            getAxisData: _getAxisData,
            onChartMouseLeave: _handleChartMouseLeave,
            getDomainMargins: _getDomainMargins,
            ..._xAxisType === _index1.XAxisTypes.StringAxis && {
                xAxisInnerPadding: _xAxisInnerPadding,
                xAxisOuterPadding: _xAxisOuterPadding
            },
            componentRef: cartesianChartRef,
            showRoundOffXTickValues: !(0, _index1.isScalePaddingDefined)(props.xAxisInnerPadding, props.xAxisPadding),
            yAxisType: _yAxisType,
            stringDatasetForYAxisDomain: [
                '',
                ..._yAxisLabels
            ],
            getYDomainMargins: _getYDomainMargins,
            /* eslint-disable react/jsx-no-bind */ children: (props)=>{
                return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("g", _arrowNavigationAttributes, _bars), /*#__PURE__*/ _react.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
            }
        });
    }
    return /*#__PURE__*/ _react.createElement("div", {
        id: _emptyChartId,
        role: 'alert',
        style: {
            opacity: '0'
        },
        "aria-label": 'Graph has no data to display'
    });
});
VerticalStackedBarChart.displayName = 'VerticalStackedBarChart';
