@fluentui/react-charts 9.0.1 → 9.0.3

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -0,0 +1,904 @@
+import * as React from 'react';
+import { max as d3Max, min as d3Min } from 'd3-array';
+import { select as d3Select } from 'd3-selection';
+import { useVerticalStackedBarChartStyles } from './useVerticalStackedBarChartStyles.styles';
+import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime } from 'd3-scale';
+import { useId } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+import { CartesianChart, ChartPopover, Legends } from '../../index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, formatDate, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken } from '../../utilities/index';
+const barGapMultiplier = 0.2;
+const barGapMin = 1;
+const MIN_DOMAIN_MARGIN = 8;
+var CircleVisbility;
+(function(CircleVisbility) {
+    CircleVisbility["show"] = "visibility";
+    CircleVisbility["hide"] = "hidden";
+})(CircleVisbility || (CircleVisbility = {}));
+export const VerticalStackedBarChart = (props)=>{
+    var _props_legendProps;
+    const _isRtl = useRtl();
+    const _createLegendsForLine = (data)=>_getLineLegends(data);
+    const _tooltipId = useId('VSBCTooltipId_');
+    const _emptyChartId = useId('_VSBC_empty');
+    let _points = [];
+    let _dataset;
+    let _xAxisLabels = [];
+    let _bars;
+    let _xAxisType = props.data && props.data.length > 0 ? getTypeOfAxis(props.data[0].xAxisPoint, true) : XAxisTypes.StringAxis;
+    let _barWidth = 0;
+    let _colors;
+    let _margins;
+    let _lineObject;
+    let _yMax;
+    let _calloutAnchorPoint;
+    let _domainMargin = MIN_DOMAIN_MARGIN;
+    let _xAxisInnerPadding = 0;
+    let _xAxisOuterPadding = 0;
+    const cartesianChartRef = React.useRef(null);
+    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 (!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
+    ]);
+    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 _getLegendData(data, lineLegends) {
+        if (props.hideLegend) {
+            return /*#__PURE__*/ React.createElement(React.Fragment, null);
+        }
+        const defaultPalette = [
+            getColorFromToken(DataVizPalette.color6),
+            getColorFromToken(DataVizPalette.color1),
+            getColorFromToken(DataVizPalette.color5),
+            getColorFromToken(DataVizPalette.color7),
+            getColorFromToken(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 = legendsOfLine.concat(actions);
+        return /*#__PURE__*/ React.createElement(Legends, {
+            legends: totalLegends,
+            enabledWrapLines: props.enabledLegendsWrapLines,
+            overflowText: props.legendsOverflowText,
+            ...props.legendProps,
+            onChange: _onLegendSelectionChange
+        });
+    }
+    function _getHighlightedLegend() {
+        return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [
+            activeLegend
+        ] : [];
+    }
+    function _lineHoverOut() {
+        setPopoverOpen(false);
+        setXCalloutValue('');
+        setYCalloutValue('');
+        setActiveXAxisDataPoint('');
+        setColor('');
+    }
+    function _lineHoverFocus(lineData) {
+        setPopoverOpen(true);
+        setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
+        setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
+        setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
+        setColor(lineData.color);
+    }
+    function _onStackHoverFocus(stack, mouseEvent) {
+        var _stack_lineData;
+        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 (!_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 ? formatDate(stack.xAxisPoint, 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);
+        props.href ? window.location.href = props.href : '';
+    };
+    function _adjustProps() {
+        _points = props.data || [];
+        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
+        const defaultColors = [
+            getColorFromToken(DataVizPalette.color6),
+            getColorFromToken(DataVizPalette.color1),
+            getColorFromToken(DataVizPalette.color5),
+            getColorFromToken(DataVizPalette.color7),
+            getColorFromToken(DataVizPalette.color10)
+        ];
+        _colors = defaultColors;
+        _xAxisType = getTypeOfAxis(props.data[0].xAxisPoint, true);
+        _lineObject = _getFormattedLineData(props.data);
+        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, props.xAxisPadding, 2 / 3);
+        _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding, props.xAxisPadding, 0);
+    }
+    function _createDataSetLayer() {
+        const tempArr = [];
+        const dataset = _points.map((singlePointData)=>{
+            let total = 0;
+            singlePointData.chartData.forEach((point)=>{
+                total = total + point.data;
+            });
+            tempArr.push(singlePointData.xAxisPoint);
+            return {
+                x: singlePointData.xAxisPoint,
+                y: total
+            };
+        });
+        _xAxisLabels = tempArr;
+        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, yBarScale, containerHeight, xElement);
+    }
+    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 _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) {
+        var _point_callOutAccessibilityData;
+        if (!point) {
+            var _singleChartData_lineData, _singleChartData_stackCallOutAccessibilityData;
+            /** if shouldFocusWholeStack is true */ const xValue = singleChartData.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? formatDate(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
+            const pointValues = singleChartData.chartData.map((pt)=>{
+                const legend = pt.legend;
+                const yValue = pt.yAxisCalloutData || pt.data;
+                return `${legend}, ${yValue}.`;
+            }).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 `${legend}, ${yValue}.`;
+            }).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 || point.xAxisCalloutData || (singleChartData.xAxisPoint instanceof Date ? formatDate(singleChartData.xAxisPoint) : singleChartData.xAxisPoint);
+        const legend = point.legend;
+        const yValue = point.yAxisCalloutData || point.data;
+        return ((_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(_isHavingLines) {
+        const { isCalloutForStack = false } = props;
+        let shouldFocusStackOnly = false;
+        if (_isHavingLines) {
+            if (_getHighlightedLegend().length === 1) {
+                shouldFocusStackOnly = false;
+            } else {
+                shouldFocusStackOnly = true;
+            }
+        } else {
+            shouldFocusStackOnly = isCalloutForStack;
+        }
+        return shouldFocusStackOnly;
+    }
+    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, yScale, containerHeight, containerWidth, secondaryYScale) {
+        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 !== 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 && secondaryYScale;
+                const y1 = useSecondaryYScale ? secondaryYScale(lineObject[item][i - 1].y) : yScale(lineObject[item][i - 1].y);
+                const x2 = xScale(lineObject[item][i].xItem.xAxisPoint);
+                const y2 = useSecondaryYScale ? secondaryYScale(lineObject[item][i].y) : yScale(lineObject[item][i].y);
+                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: tokens.colorNeutralBackground1,
+                        transform: `translate(${xScaleBandwidthTranslate}, 0)`
+                    }));
+                }
+                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}, 0)`,
+                    ..._isLegendHighlighted(item) && {
+                        onMouseOver: _lineHover.bind(lineObject[item][i - 1]),
+                        onMouseLeave: _lineHoverOut
+                    }
+                }));
+            }
+        });
+        Object.keys(lineObject).forEach((item, index)=>{
+            lineObject[item].forEach((circlePoint, subIndex)=>{
+                const circleRef = {
+                    refElement: null
+                };
+                dots.push(/*#__PURE__*/ React.createElement("circle", {
+                    key: `${index}-${subIndex}-dot`,
+                    cx: xScale(circlePoint.xItem.xAxisPoint),
+                    cy: circlePoint.useSecondaryYScale && secondaryYScale ? secondaryYScale(circlePoint.y) : yScale(circlePoint.y),
+                    onMouseOver: _isLegendHighlighted(item) ? (event)=>_lineHover(circlePoint, event) : (event)=>_onStackHover(circlePoint.xItem, event),
+                    ..._isLegendHighlighted(item) && {
+                        onMouseLeave: _lineHoverOut
+                    },
+                    r: _getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius,
+                    stroke: circlePoint.color,
+                    fill: tokens.colorNeutralBackground1,
+                    strokeWidth: 3,
+                    visibility: _getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).visibility,
+                    transform: `translate(${xScaleBandwidthTranslate}, 0)`,
+                    "data-is-focusable": _isLegendHighlighted(item),
+                    ref: (e)=>circleRef.refElement = e,
+                    onFocus: _lineFocus.bind(circlePoint, circleRef),
+                    onBlur: _lineHoverOut,
+                    tabIndex: circlePoint.legend !== '' ? 0 : undefined
+                }));
+            });
+        });
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, borderForLines, lines, dots);
+    }
+    function _getCircleVisibilityAndRadius(xAxisPoint, legend) {
+        if (!_noLegendHighlighted()) {
+            if (xAxisPoint === activeXAxisDataPoint && _isLegendHighlighted(legend)) {
+                return {
+                    visibility: "visibility",
+                    radius: 8
+                };
+            } else if (_isLegendHighlighted(legend)) {
+                return {
+                    visibility: "visibility",
+                    radius: 0.3
+                };
+            } else {
+                return {
+                    visibility: "hidden",
+                    radius: 0
+                };
+            }
+        } else {
+            return {
+                visibility: activeXAxisDataPoint === xAxisPoint ? "visibility" : "hidden",
+                radius: 8
+            };
+        }
+    }
+    function _renderCallout(props) {
+        var _props_culture;
+        return props ? /*#__PURE__*/ React.createElement(ChartPopover, {
+            culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+            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}`
+            };
+            _updatePosition(clientX, clientY);
+            setPopoverOpen(_noLegendHighlighted() || _isLegendHighlighted(point.legend));
+            setCalloutLegend(point.legend);
+            setDataForHoverCard(point.data);
+            setColor(color);
+            setXCalloutValue(point.xAxisCalloutData ? point.xAxisCalloutData : `${xAxisPoint}`);
+            setYCalloutValue(point.yAxisCalloutData);
+            setDataPointCalloutProps(point);
+            setCallOutAccessibilityData(point.callOutAccessibilityData);
+        }
+    }
+    function _lineHover(lineData, mouseEvent) {
+        mouseEvent.persist();
+        _lineHoverFocus(lineData);
+    }
+    function _lineFocus(lineData, ref) {
+        if (ref.refElement) {
+            _lineHoverFocus(lineData);
+        }
+    }
+    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() {
+        setPopoverOpen(false);
+    }
+    function _getBarGapAndScale(bars, yBarScale, defaultTotalHeight) {
+        const { barGapMax = 0 } = props;
+        // 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
+        const totalData = bars.reduce((iter, value)=>iter + Math.abs(value.data), 0);
+        const totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : yBarScale(totalData);
+        let sumOfPercent = 0;
+        bars.forEach((point)=>{
+            let value = Math.abs(point.data) / totalData * 100;
+            if (value < 1 && value !== 0) {
+                value = 1;
+            }
+            sumOfPercent += value;
+        });
+        const 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 = (totalHeight - gapHeight * gaps) / (totalData * scalingRatio);
+        return {
+            gapHeight,
+            heightValueScale,
+            adjustedTotalHeight: sumOfPercent
+        };
+    }
+    function _getScales(containerHeight, containerWidth) {
+        const yMax = _yMax;
+        const yBarScale = d3ScaleLinear().domain([
+            0,
+            yMax
+        ]).range([
+            0,
+            containerHeight - _margins.bottom - _margins.top
+        ]);
+        if (_xAxisType === XAxisTypes.NumericAxis) {
+            const xMax = d3Max(_dataset, (point)=>point.x);
+            const xMin = d3Min(_dataset, (point)=>point.x);
+            const xBarScale = d3ScaleLinear().domain(_isRtl ? [
+                xMax,
+                xMin
+            ] : [
+                xMin,
+                xMax
+            ]).nice().range([
+                _margins.left + _domainMargin,
+                containerWidth - _margins.right - _domainMargin
+            ]);
+            return {
+                xBarScale,
+                yBarScale
+            };
+        }
+        if (_xAxisType === XAxisTypes.DateAxis) {
+            const sDate = d3Min(_dataset, (point)=>{
+                return point.x;
+            });
+            const lDate = d3Max(_dataset, (point)=>{
+                return point.x;
+            });
+            const xBarScale = props.useUTC ? d3ScaleUtc() : d3ScaleTime();
+            xBarScale.domain(_isRtl ? [
+                lDate,
+                sDate
+            ] : [
+                sDate,
+                lDate
+            ]).range([
+                _margins.left + _domainMargin,
+                containerWidth - _margins.right - _domainMargin
+            ]);
+            return {
+                xBarScale,
+                yBarScale
+            };
+        }
+        const xBarScale = d3ScaleBand().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;
+        /** Total width available to render the bars */ const totalWidth = containerWidth - (_margins.left + MIN_DOMAIN_MARGIN) - (_margins.right + MIN_DOMAIN_MARGIN);
+        /** Rate at which the space between the bars changes wrt the bar width */ const barGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
+        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') {
+                // 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 if (props.mode === 'plotly' && _xAxisLabels.length > 1) {
+                // Calculate the remaining width after rendering bars at their maximum allowable width
+                const bandwidth = totalWidth / (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate);
+                const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, bandwidth);
+                let reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * barWidth;
+                const margin1 = (totalWidth - reqWidth) / 2;
+                // Calculate the remaining width after accounting for the space required to render x-axis labels
+                const step = calculateLongestLabelWidth(_xAxisLabels) + 20;
+                reqWidth = (_xAxisLabels.length - _xAxisInnerPadding) * step;
+                const margin2 = (totalWidth - reqWidth) / 2;
+                _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 = 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 _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 = useVerticalStackedBarChartStyles(props);
+    function _createBar(xBarScale, yBarScale, containerHeight, xElement) {
+        const { barCornerRadius = 0, barMinimumHeight = 0 } = props;
+        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
+        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        if (_xAxisType === XAxisTypes.StringAxis) {
+            _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
+        }
+        const bars = _points.map((singleChartData, indexNumber)=>{
+            let yPoint = containerHeight - _margins.bottom;
+            const xPoint = xBarScale(_xAxisType === XAxisTypes.NumericAxis ? singleChartData.xAxisPoint : _xAxisType === XAxisTypes.DateAxis ? singleChartData.xAxisPoint : singleChartData.xAxisPoint);
+            const xScaleBandwidthTranslate = _xAxisType !== XAxisTypes.StringAxis ? -_barWidth / 2 : (xBarScale.bandwidth() - _barWidth) / 2;
+            let barTotalValue = 0;
+            const barsToDisplay = singleChartData.chartData.filter((point)=>point.data > 0);
+            if (!barsToDisplay.length) {
+                return undefined;
+            }
+            const { gapHeight, heightValueScale, adjustedTotalHeight } = _getBarGapAndScale(barsToDisplay, yBarScale);
+            if (heightValueScale < 0) {
+                return undefined;
+            }
+            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 && {
+                    'data-is-focusable': !props.hideTooltip && 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'
+                };
+                let barHeight = heightValueScale * point.data;
+                if (barHeight < Math.max(heightValueScale * adjustedTotalHeight / 100.0, barMinimumHeight)) {
+                    barHeight = Math.max(heightValueScale * adjustedTotalHeight / 100.0, barMinimumHeight);
+                }
+                yPoint = yPoint - barHeight - (index ? gapHeight : 0);
+                barTotalValue += point.data;
+                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,
+                        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 stackFocusProps = shouldFocusWholeStack && {
+                'data-is-focusable': !props.hideTooltip,
+                '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'
+            };
+            let showLabel = false;
+            let barLabel = 0;
+            if (!props.hideLabels) {
+                if (_noLegendHighlighted()) {
+                    showLabel = true;
+                    barLabel = barTotalValue;
+                } else {
+                    barsToDisplay.forEach((point)=>{
+                        if (_isLegendHighlighted(point.legend)) {
+                            showLabel = true;
+                            barLabel += point.data;
+                        }
+                    });
+                }
+            }
+            return /*#__PURE__*/ React.createElement("g", {
+                key: indexNumber + `${shouldFocusWholeStack}`
+            }, /*#__PURE__*/ React.createElement("g", {
+                id: `${indexNumber}-singleBar`,
+                ref: (e)=>groupRef.refElement = e,
+                ...stackFocusProps,
+                tabIndex: !props.hideTooltip ? 0 : undefined
+            }, singleBar), !props.hideLabels && _barWidth >= 16 && showLabel && /*#__PURE__*/ React.createElement("text", {
+                x: xPoint + _barWidth / 2,
+                y: yPoint - 6,
+                textAnchor: "middle",
+                className: classes.barLabel,
+                "aria-label": `Total: ${barLabel}`,
+                role: "img",
+                transform: `translate(${xScaleBandwidthTranslate}, 0)`
+            }, formatValueWithSIPrefix(barLabel)));
+        });
+        if (!props.showXAxisLablesTooltip) {
+            try {
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+        }
+        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
+            const xAxisElement = d3Select(xElement).call(xBarScale);
+            try {
+                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.filter((bar)=>!!bar);
+    }
+    if (!_isChartEmpty()) {
+        _adjustProps();
+        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
+        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        _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,
+            ...getAccessibleDataObject(callOutAccessibilityData),
+            clickPosition: clickPosition,
+            isPopoverOpen: isPopoverOpen,
+            isCalloutForStack: props.isCalloutForStack || _isHavingLines && _noLegendHighlighted(),
+            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(CartesianChart, {
+            ...props,
+            chartTitle: _getChartTitle(),
+            points: _dataset,
+            chartType: ChartTypes.VerticalStackedBarChart,
+            xAxisType: _xAxisType,
+            calloutProps: calloutProps,
+            tickParams: tickParams,
+            legendBars: legendBars,
+            datasetForXAxisDomain: _xAxisLabels,
+            isCalloutForStack: shouldFocusWholeStack,
+            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 */ children: (props)=>{
+                return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", null, _bars), /*#__PURE__*/ React.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScale, 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';