'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "CartesianChart", {
    enumerable: true,
    get: function() {
        return CartesianChart;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCartesianChartStylesstyles = require("./useCartesianChartStyles.styles");
const _d3selection = require("d3-selection");
const _index = require("../../utilities/index");
const _reactutilities = require("@fluentui/react-utilities");
const _SVGTooltipText = require("../../utilities/SVGTooltipText");
const _ChartPopover = require("./ChartPopover");
const _reacttabster = require("@fluentui/react-tabster");
const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
    var _props_margins, _props_margins1, _props_margins2, _props_margins3, _props_margins4, _props_margins5;
    const chartContainer = _react.useRef();
    let legendContainer;
    const minLegendContainerHeight = 40;
    const xAxisElement = _react.useRef();
    const yAxisElement = _react.useRef();
    const yAxisElementSecondary = _react.useRef();
    let margins;
    const idForGraph = 'chart_';
    let _reqID;
    const _useRtl = (0, _index.useRtl)();
    let _tickValues;
    const titleMargin = 8;
    const _isFirstRender = _react.useRef(true);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    let _xScale;
    const isIntegralDataset = _react.useMemo(()=>{
        return !props.points.some((point)=>point.y % 1 !== 0);
    }, [
        props.points
    ]);
    let _tooltipId = (0, _reactutilities.useId)('tooltip_');
    /* Used for when WrapXAxisLabels props appeared.
   * To display the total word (space separated words), Need to have more space than usual.
   * This height will get total height need to disaply total word.
   * These value need to be removed from actual svg height/graph height.
   * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true.
   */ let _removalValueForTextTuncate = 0;
    const [containerWidth, setContainerWidth] = _react.useState(0);
    const [containerHeight, setContainerHeight] = _react.useState(0);
    const [startFromX, setStartFromX] = _react.useState(0);
    const [prevProps, setPrevProps] = _react.useState(null);
    const chartTypesWithStringYAxis = [
        _index.ChartTypes.HorizontalBarChartWithAxis,
        _index.ChartTypes.HeatMapChart,
        _index.ChartTypes.VerticalStackedBarChart,
        _index.ChartTypes.GanttChart,
        _index.ChartTypes.ScatterChart
    ];
    var _props_margins_top, _props_margins_bottom, _props_margins_left, _props_margins_right, _props_margins_right1, _props_margins_left1;
    /**
   * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.
   * So that, in RTL, left margins becomes right margins and viceversa.
   * As graph needs to be drawn perfecty, these values consider as default values.
   * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.
   */ // eslint-disable-next-line prefer-const
    margins = {
        top: (_props_margins_top = (_props_margins = props.margins) === null || _props_margins === void 0 ? void 0 : _props_margins.top) !== null && _props_margins_top !== void 0 ? _props_margins_top : 20,
        bottom: (_props_margins_bottom = (_props_margins1 = props.margins) === null || _props_margins1 === void 0 ? void 0 : _props_margins1.bottom) !== null && _props_margins_bottom !== void 0 ? _props_margins_bottom : 35,
        right: _useRtl ? (_props_margins_left = (_props_margins2 = props.margins) === null || _props_margins2 === void 0 ? void 0 : _props_margins2.left) !== null && _props_margins_left !== void 0 ? _props_margins_left : 40 : ((_props_margins_right = (_props_margins3 = props.margins) === null || _props_margins3 === void 0 ? void 0 : _props_margins3.right) !== null && _props_margins_right !== void 0 ? _props_margins_right : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20,
        left: _useRtl ? ((_props_margins_right1 = (_props_margins4 = props.margins) === null || _props_margins4 === void 0 ? void 0 : _props_margins4.right) !== null && _props_margins_right1 !== void 0 ? _props_margins_right1 : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20 : (_props_margins_left1 = (_props_margins5 = props.margins) === null || _props_margins5 === void 0 ? void 0 : _props_margins5.left) !== null && _props_margins_left1 !== void 0 ? _props_margins_left1 : 40
    };
    const TITLE_MARGIN_HORIZONTAL = 24;
    const TITLE_MARGIN_VERTICAL = 20;
    if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {
        var _props_margins6;
        var _props_margins_bottom1;
        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : margins.bottom + TITLE_MARGIN_VERTICAL;
    }
    if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {
        var _props_margins7, _props_margins8, _props_margins9, _props_margins10;
        var _props_margins_right2, _props_margins_left2;
        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN_HORIZONTAL : margins.right + TITLE_MARGIN_HORIZONTAL : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : margins.left + TITLE_MARGIN_HORIZONTAL;
        var _props_margins_left3, _props_margins_right3;
        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : margins.left + TITLE_MARGIN_HORIZONTAL : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN_HORIZONTAL : margins.right + TITLE_MARGIN_HORIZONTAL;
    }
    if (props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '') {
        var _props_margins11;
        var _props_margins_top1;
        margins.top = (_props_margins_top1 = (_props_margins11 = props.margins) === null || _props_margins11 === void 0 ? void 0 : _props_margins11.top) !== null && _props_margins_top1 !== void 0 ? _props_margins_top1 : margins.top + TITLE_MARGIN_VERTICAL;
    }
    if (props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '')) {
        if (_useRtl) {
            var _props_margins12;
            var _props_margins_right4;
            margins.left = (_props_margins_right4 = (_props_margins12 = props.margins) === null || _props_margins12 === void 0 ? void 0 : _props_margins12.right) !== null && _props_margins_right4 !== void 0 ? _props_margins_right4 : margins.right + TITLE_MARGIN_HORIZONTAL;
        } else {
            var _props_margins13;
            var _props_margins_right5;
            margins.right = (_props_margins_right5 = (_props_margins13 = props.margins) === null || _props_margins13 === void 0 ? void 0 : _props_margins13.right) !== null && _props_margins_right5 !== void 0 ? _props_margins_right5 : margins.right + TITLE_MARGIN_HORIZONTAL;
        }
    }
    const classes = (0, _useCartesianChartStylesstyles.useCartesianChartStyles)(props);
    const focusAttributes = (0, _reacttabster.useFocusableGroup)();
    const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
        axis: 'horizontal'
    });
    // ComponentdidMount and Componentwillunmount logic
    _react.useEffect(()=>{
        _fitParentContainer();
        if (props !== null) {
            setPrevProps(props);
        }
        if (chartTypesWithStringYAxis.includes(props.chartType) && props.showYAxisLables && yAxisElement && props.yAxisType === _index.YAxisType.StringAxis) {
            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
            if (startFromX !== maxYAxisLabelLength) {
                setStartFromX(maxYAxisLabelLength);
            }
        } else if (startFromX !== 0) {
            setStartFromX(0);
        }
        return ()=>{
            if (_reqID !== undefined) {
                cancelAnimationFrame(_reqID);
            }
        };
    }, [
        props
    ]);
    // ComponentDidUpdate logic
    _react.useEffect(()=>{
        if (prevProps) {
            if (prevProps.height !== props.height || prevProps.width !== props.width) {
                _fitParentContainer();
            }
        }
        if (chartTypesWithStringYAxis.includes(props.chartType) && props.showYAxisLables && yAxisElement && props.yAxisType === _index.YAxisType.StringAxis) {
            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
            if (startFromX !== maxYAxisLabelLength) {
                setStartFromX(maxYAxisLabelLength);
            }
        } else if (startFromX !== 0) {
            setStartFromX(0);
        }
    }, [
        props,
        prevProps
    ]);
    _react.useImperativeHandle(props.componentRef, ()=>{
        var _chartContainer_current;
        return {
            chartContainer: (_chartContainer_current = chartContainer.current) !== null && _chartContainer_current !== void 0 ? _chartContainer_current : null
        };
    }, []);
    /**
   * Dedicated function to return the Callout JSX Element , which can further be used to only call this when
   * only the calloutprops and charthover props changes.
   * @param calloutProps
   * @param chartHoverProps
   * @returns
   */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
    function _generateCallout(calloutProps) {
        return /*#__PURE__*/ _react.createElement(_ChartPopover.ChartPopover, calloutProps);
    }
    function calculateMaxYAxisLabelLength(className) {
        const formatTickLabel = (str)=>{
            if (props.showYAxisLablesTooltip) {
                return (0, _index.truncateString)(str, props.noOfCharsToTruncate || 4);
            }
            return str;
        };
        return (0, _index.calculateLongestLabelWidth)(props.stringDatasetForYAxisDomain.map((label)=>formatTickLabel(label)), `.${className} text`);
    }
    const { calloutProps, points, chartType, svgProps, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter } = props;
    if (props.parentRef) {
        _fitParentContainer();
    }
    const margin = {
        ...margins
    };
    // Note: This check is unnecessary since startFromX is only set for charts with string y-axis.
    if (chartTypesWithStringYAxis.includes(props.chartType)) {
        if (!_useRtl) {
            margin.left += startFromX;
        } else {
            margin.right += startFromX;
        }
    }
    // Callback for margins to the chart
    props.getmargins && props.getmargins(margin);
    let callout = null;
    let children = null;
    if (props.enableFirstRenderOptimization && chartContainer.current || !props.enableFirstRenderOptimization) {
        _isFirstRender.current = false;
        var _props_showRoundOffXTickValues;
        const XAxisParams = {
            domainNRangeValues: props.getDomainNRangeValues(points, props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins, containerWidth, chartType, _useRtl, props.xAxisType, props.barwidth, props.tickValues, startFromX),
            // FIXME: In XAxisParams, containerHeight is used by HBWA to generate vertical gridlines.
            // Since the x-axis in HBWA is numeric, it typically doesn't require transformation.
            // However, if transformation props are enabled, the updated _removalValueForTextTuncate
            // will only be available in the next render, as it's set after the axis is created.
            // Solution: Delay the creation of gridlines until after the transformation has been applied,
            // or precompute the required height for transformed labels (_removalValueForTextTuncate).
            containerHeight: containerHeight - _removalValueForTextTuncate,
            margins: margins,
            xAxisElement: xAxisElement.current,
            showRoundOffXTickValues: (_props_showRoundOffXTickValues = props.showRoundOffXTickValues) !== null && _props_showRoundOffXTickValues !== void 0 ? _props_showRoundOffXTickValues : true,
            xAxisCount: props.xAxisTickCount,
            xAxistickSize: props.xAxistickSize,
            tickPadding: props.tickPadding || props.showXAxisLablesTooltip ? 5 : 10,
            xAxisPadding: props.xAxisPadding,
            xAxisInnerPadding: props.xAxisInnerPadding,
            xAxisOuterPadding: props.xAxisOuterPadding,
            containerWidth: containerWidth,
            hideTickOverlap: props.rotateXAxisLables ? false : props.hideTickOverlap,
            calcMaxLabelWidth: _calcMaxLabelWidthWithTransform,
            ...props.xAxis
        };
        /**
     * These scales used for 2 purposes.
     * 1. To create x and y axis
     * 2. To draw the graph.
     * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
     */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
        let xScale;
        let tickValues;
        switch(props.xAxisType){
            case _index.XAxisTypes.NumericAxis:
                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture, props.xScaleType, _useRtl));
                break;
            case _index.XAxisTypes.DateAxis:
                ({ xScale, tickValues } = (0, _index.createDateXAxis)(XAxisParams, props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, props.useUTC, props.chartType));
                break;
            case _index.XAxisTypes.StringAxis:
                ({ xScale, tickValues } = (0, _index.createStringXAxis)(XAxisParams, props.tickParams, props.datasetForXAxisDomain, culture, _useRtl));
                break;
            default:
                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture, props.xScaleType, _useRtl));
        }
        _xScale = xScale;
        _tickValues = tickValues;
        _transformXAxisLabels();
        const YAxisParams = {
            margins: props.getYDomainMargins ? props.getYDomainMargins(containerHeight) : margins,
            containerWidth: containerWidth,
            containerHeight: containerHeight - _removalValueForTextTuncate,
            yAxisElement: yAxisElement.current,
            yAxisTickFormat: props.yAxisTickFormat,
            yAxisTickCount: props.yAxisTickCount,
            yMinValue: props.yMinValue || 0,
            yMaxValue: props.yMaxValue || 0,
            tickPadding: 10,
            maxOfYVal: props.maxOfYVal,
            yMinMaxValues: props.getMinMaxOfYAxis(points, props.yAxisType),
            // please note these padding default values must be consistent in here
            // and the parent chart(HBWA/Vertical etc..) for more details refer example
            // http://using-d3js.com/04_07_ordinal_scales.html
            yAxisPadding: props.yAxisPadding || 0,
            tickValues: props.yAxisTickValues,
            ...props.yAxis
        };
        /**
     * These scales used for 2 purposes.
     * 1. To create x and y axis
     * 2. To draw the graph.
     * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
     */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
        let yScalePrimary;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        let yScaleSecondary;
        const axisData = {
            yAxisDomainValues: []
        };
        if (props.yAxisType && props.yAxisType === _index.YAxisType.StringAxis) {
            yScalePrimary = props.createStringYAxis(YAxisParams, props.stringDatasetForYAxisDomain, _useRtl, props.barwidth, props.chartType);
        } else {
            // TODO: Since the scale domain values are now computed independently for both the primary and
            // secondary y-axes, the yMinValue and yMaxValue props are no longer necessary for accurately
            // rendering the secondary y-axis. Therefore, rather than checking the secondaryYScaleOptions
            // prop to determine whether to create a secondary y-axis, it's more appropriate to check if any
            // data points are assigned to use the secondary y-scale.
            if (props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) {
                var _props_secondaryYScaleOptions, _props_secondaryYScaleOptions1;
                var _props_secondaryYScaleOptions_yMaxValue;
                const YAxisParamsSecondary = {
                    margins: margins,
                    containerWidth: containerWidth,
                    containerHeight: containerHeight - _removalValueForTextTuncate,
                    yAxisElement: yAxisElementSecondary.current,
                    yAxisTickFormat: props.yAxisTickFormat,
                    yAxisTickCount: props.yAxisTickCount,
                    yMinValue: ((_props_secondaryYScaleOptions = props.secondaryYScaleOptions) === null || _props_secondaryYScaleOptions === void 0 ? void 0 : _props_secondaryYScaleOptions.yMinValue) || 0,
                    yMaxValue: (_props_secondaryYScaleOptions_yMaxValue = (_props_secondaryYScaleOptions1 = props.secondaryYScaleOptions) === null || _props_secondaryYScaleOptions1 === void 0 ? void 0 : _props_secondaryYScaleOptions1.yMaxValue) !== null && _props_secondaryYScaleOptions_yMaxValue !== void 0 ? _props_secondaryYScaleOptions_yMaxValue : 100,
                    tickPadding: 10,
                    yMinMaxValues: props.getMinMaxOfYAxis(points, props.yAxisType, true),
                    yAxisPadding: props.yAxisPadding
                };
                yScaleSecondary = props.createYAxis(YAxisParamsSecondary, _useRtl, axisData, isIntegralDataset, chartType, true, props.roundedTicks, props.secondaryYScaleType, _useRtl);
            }
            yScalePrimary = props.createYAxis(YAxisParams, _useRtl, axisData, isIntegralDataset, chartType, false, props.roundedTicks, props.yScaleType, _useRtl);
        }
        if (chartTypesWithStringYAxis.includes(props.chartType) && props.yAxisType === _index.YAxisType.StringAxis) {
            // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
            // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
            // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with _tooltipId)
            if (!props.showYAxisLablesTooltip) {
                try {
                    document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
                //eslint-disable-next-line no-empty
                } catch (e) {}
            }
            // Used to display tooltip at y axis labels.
            if (props.showYAxisLablesTooltip) {
                // To create y axis tick values by if specified truncating the rest of the text
                // and showing elipsis or showing the whole string,
                yScalePrimary && // Note: This function should be invoked within the showYAxisLablesTooltip check,
                // as its sole purpose is to truncate labels that exceed the noOfCharsToTruncate limit.
                (0, _index.createYAxisLabels)(yAxisElement.current, yScalePrimary, props.noOfCharsToTruncate || 4, props.showYAxisLablesTooltip || false, _useRtl);
                const _yAxisElement = (0, _d3selection.select)(yAxisElement.current).call(yScalePrimary);
                try {
                    document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
                //eslint-disable-next-line no-empty
                } catch (e) {}
                const ytooltipProps = {
                    tooltipCls: classes.tooltip,
                    id: _tooltipId,
                    axis: _yAxisElement
                };
                _yAxisElement && (0, _index.tooltipOfAxislabels)(ytooltipProps);
            }
        }
        // Call back to the chart.
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const _getData = (xScale, yScalePrimary, yScaleSecondary)=>{
            props.getGraphData && props.getGraphData(xScale, yScalePrimary, containerHeight - _removalValueForTextTuncate, containerWidth, xAxisElement.current, yAxisElement.current, yScaleSecondary);
        };
        props.getAxisData && props.getAxisData(axisData);
        // Callback function for chart, returns axis
        _getData(xScale, yScalePrimary, yScaleSecondary);
        children = props.children({
            xScale,
            yScalePrimary,
            yScaleSecondary,
            containerHeight,
            containerWidth
        });
        if (!props.hideTooltip && calloutProps.isPopoverOpen) {
            callout = _generateCallout(calloutProps);
        }
    }
    const svgDimensions = {
        width: containerWidth,
        height: containerHeight
    };
    const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left - margins.right - startFromX;
    const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - _removalValueForTextTuncate - titleMargin;
    const commonSvgToolTipProps = {
        wrapContent: _index.wrapContent,
        showBackground: true,
        className: classes.svgTooltip,
        content: ''
    };
    /**
   * When screen resizes, along with screen, chart also auto adjusted.
   * This method used to adjust height and width of the charts.
   */ function _fitParentContainer() {
        //_reqID = requestAnimationFrame(() => {
        let legendContainerHeight;
        if (props.hideLegend) {
            // If there is no legend, need not to allocate some space from total chart space.
            legendContainerHeight = 0;
        } else {
            const legendContainerComputedStyles = legendContainer && getComputedStyle(legendContainer);
            legendContainerHeight = (legendContainer && legendContainer.getBoundingClientRect().height || minLegendContainerHeight) + parseFloat(legendContainerComputedStyles && legendContainerComputedStyles.marginTop || '0') + parseFloat(legendContainerComputedStyles && legendContainerComputedStyles.marginBottom || '0');
        }
        if (props.parentRef || chartContainer.current) {
            var _props_reflowProps;
            const container = props.parentRef ? props.parentRef : chartContainer.current;
            const currentContainerWidth = ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' && !_isFirstRender.current ? Math.max(container.getBoundingClientRect().width, _calculateChartMinWidth()) : container.getBoundingClientRect().width;
            const currentContainerHeight = container.getBoundingClientRect().height > legendContainerHeight ? container.getBoundingClientRect().height : 350;
            const shouldResize = containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight - legendContainerHeight;
            if (shouldResize) {
                setContainerWidth(currentContainerWidth);
                setContainerHeight(currentContainerHeight - legendContainerHeight);
            }
        }
    //});
    }
    function _onChartLeave() {
        props.onChartMouseLeave && props.onChartMouseLeave();
    }
    function _calculateChartMinWidth() {
        // Adding 10px for padding on both sides
        const labelWidth = _calcMaxLabelWidthWithTransform(_tickValues) + 10;
        let minChartWidth = margins.left + margins.right + labelWidth * (_tickValues.length - 1);
        if ([
            _index.ChartTypes.GroupedVerticalBarChart,
            _index.ChartTypes.VerticalBarChart,
            _index.ChartTypes.VerticalStackedBarChart
        ].includes(props.chartType)) {
            const minDomainMargin = 8;
            minChartWidth += minDomainMargin * 2;
        }
        return minChartWidth;
    }
    function _calcMaxLabelWidthWithTransform(x) {
        // Case: rotated labels
        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === _index.XAxisTypes.StringAxis) {
            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(x, `.${classes.xAxis} text`);
            return Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
        }
        // Case: truncated labels
        if (props.showXAxisLablesTooltip) {
            const tickValues = x.map((val)=>{
                const numChars = props.noOfCharsToTruncate || 4;
                return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;
            });
            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(tickValues, `.${classes.xAxis} text`);
            return Math.ceil(longestLabelWidth);
        }
        // Case: wrapped labels
        if (props.wrapXAxisLables) {
            // FIXME: Calculate the max width of lines instead of words. This requires applying
            // the wrapping transformation earlier to obtain the actual rendered lines.
            const words = [];
            x.forEach((val)=>{
                words.push(...val.toString().split(/\s+/));
            });
            // This approach works well in most cases, since overflow typically occurs only when
            // a single word exceeds the specified width — otherwise, the text will wrap as expected.
            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(words, `.${classes.xAxis} text`);
            return Math.max(Math.ceil(longestLabelWidth), _index.DEFAULT_WRAP_WIDTH);
        }
        // Default case
        const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(x, `.${classes.xAxis} text`);
        return Math.ceil(longestLabelWidth);
    }
    function _transformXAxisLabels() {
        _removalValueForTextTuncate = 0;
        /*
     * To enable wrapping of x axis tick values or to display complete x axis tick values,
     * we need to calculate how much space it needed to render the text.
     * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
     * Required space will be calculated first time chart rendering and if any width/height of chart updated.
     * */ if (props.wrapXAxisLables || props.showXAxisLablesTooltip) {
            let maxXAxisLabelWidth;
            if (props.xAxisType === _index.XAxisTypes.StringAxis) {
                var _props_datasetForXAxisDomain;
                if ((((_props_datasetForXAxisDomain = props.datasetForXAxisDomain) === null || _props_datasetForXAxisDomain === void 0 ? void 0 : _props_datasetForXAxisDomain.length) || 0) > 1) {
                    maxXAxisLabelWidth = _xScale.step();
                } else {
                    maxXAxisLabelWidth = containerWidth;
                }
            }
            const wrapLabelProps = {
                node: xAxisElement.current,
                xAxis: _xScale,
                showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,
                noOfCharsToTruncate: props.noOfCharsToTruncate || 4,
                width: maxXAxisLabelWidth
            };
            var _createWrapOfXLabels;
            _removalValueForTextTuncate = (_createWrapOfXLabels = (0, _index.createWrapOfXLabels)(wrapLabelProps)) !== null && _createWrapOfXLabels !== void 0 ? _createWrapOfXLabels : 0;
        }
        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === _index.XAxisTypes.StringAxis) {
            const rotateLabelProps = {
                node: xAxisElement.current,
                xAxis: _xScale
            };
            var _rotateXAxisLabels;
            const rotatedHeight = (_rotateXAxisLabels = (0, _index.rotateXAxisLabels)(rotateLabelProps)) !== null && _rotateXAxisLabels !== void 0 ? _rotateXAxisLabels : 0;
            // margins.bottom is used as padding here
            _removalValueForTextTuncate = rotatedHeight + margins.bottom;
        }
    }
    /**
   * We have use the {@link defaultTabbableElement } to fix
   * the Focus not landing on chart while tabbing, instead  goes to legend.
   * This issue is observed in Area, line chart after performance optimization done in the PR {@link https://github.com/microsoft/fluentui/pull/27721 }
   * This issue is observed in Bar charts after the changes done by FocusZone team in the PR: {@link https://github.com/microsoft/fluentui/pull/24175 }
   * The issue in Bar Charts(VB and VSB) is due to a {@link FocusZone } update where previously an event listener was
   * attached on keydown to the window, so that whenever the tab key is pressed all outer FocusZone's
   * tab-indexes are updated (an outer FocusZone is a FocusZone that is not within another one).
   * But now after the above PR : they are attaching the
   * listeners to the FocusZone elements instead of the window. So in the first render cycle in Bar charts
   * bars are not created as in the first render cycle the size of the chart container is not known( or is 0)
   * which creates bars of height 0 so instead we do not create any bars  and instead return empty fragments.
   *
   * We have tried 2 Approaches to fix the issue:
   * 1. Using the {@link elementRef} property of FocusZone where we dispatch event for tab keydown
   *    after the second render cycle which triggers an update of the tab index in FocusZone.
   *    But this is a hacky solution and not a proper fix and also elementRef is deprecated.
   * 2. Using the default tabbable element to fix the issue.
   */ return /*#__PURE__*/ _react.createElement("div", {
        id: idForGraph,
        className: classes.root,
        role: 'presentation',
        ref: (rootElem)=>chartContainer.current = rootElem,
        onMouseLeave: _onChartLeave
    }, /*#__PURE__*/ _react.createElement("div", {
        className: classes.chartWrapper,
        ...focusAttributes,
        ...arrowAttributes
    }, _isFirstRender.current, /*#__PURE__*/ _react.createElement("svg", {
        width: svgDimensions.width,
        height: svgDimensions.height,
        "aria-label": props.chartTitle,
        style: {
            display: 'block'
        },
        className: classes.chart,
        ...(0, _index.getSecureProps)(svgProps)
    }, /*#__PURE__*/ _react.createElement("g", {
        ref: (e)=>{
            xAxisElement.current = e;
        },
        id: `xAxisGElement${idForGraph}`,
        // To add wrap of x axis lables feature, need to remove word height from svg height.
        transform: `translate(0, ${svgDimensions.height - margins.bottom - _removalValueForTextTuncate})`,
        className: classes.xAxis
    }), props.xAxisTitle !== undefined && props.xAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
        ...commonSvgToolTipProps,
        content: props.xAxisTitle,
        textProps: {
            x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
            y: svgDimensions.height - titleMargin,
            className: classes.axisTitle,
            textAnchor: 'middle'
        },
        maxWidth: xAxisTitleMaximumAllowedWidth
    }), props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
        ...commonSvgToolTipProps,
        content: props.xAxisAnnotation,
        textProps: {
            x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
            y: titleMargin + 3,
            className: classes.axisAnnotation,
            textAnchor: 'middle',
            'aria-hidden': true
        },
        maxWidth: xAxisTitleMaximumAllowedWidth
    }), /*#__PURE__*/ _react.createElement("g", {
        ref: (e)=>{
            yAxisElement.current = e;
        },
        id: `yAxisGElement${idForGraph}`,
        transform: `translate(${_useRtl ? svgDimensions.width - margins.right - startFromX : margins.left + startFromX}, 0)`,
        className: classes.yAxis
    }), props.secondaryYScaleOptions && /*#__PURE__*/ _react.createElement("g", null, /*#__PURE__*/ _react.createElement("g", {
        ref: (e)=>{
            yAxisElementSecondary.current = e;
        },
        id: `yAxisGElementSecondary${idForGraph}`,
        transform: `translate(${_useRtl ? margins.left + startFromX : svgDimensions.width - margins.right - startFromX}, 0)`,
        className: classes.yAxis
    }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
        ...commonSvgToolTipProps,
        content: props.secondaryYAxistitle,
        textProps: {
            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
            y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
            textAnchor: 'middle',
            transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
                 ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
            className: classes.axisTitle
        },
        maxWidth: yAxisTitleMaximumAllowedHeight
    })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
        ...commonSvgToolTipProps,
        content: props.yAxisTitle,
        textProps: {
            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
            y: _useRtl ? svgDimensions.width - margins.right / 2 + titleMargin : margins.left / 2 - titleMargin,
            textAnchor: 'middle',
            transform: `translate(0,
                 ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
            className: classes.axisTitle
        },
        maxWidth: yAxisTitleMaximumAllowedHeight
    }), props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '') && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
        ...commonSvgToolTipProps,
        content: props.yAxisAnnotation,
        textProps: {
            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
            y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
            textAnchor: 'middle',
            transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
                   ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
            className: classes.axisAnnotation,
            'aria-hidden': true
        },
        maxWidth: yAxisTitleMaximumAllowedHeight
    }))), !props.hideLegend && /*#__PURE__*/ _react.createElement("div", {
        ref: (e)=>legendContainer = e,
        className: classes.legendContainer
    }, props.legendBars), callout && /*#__PURE__*/ _react.createElement(_react.Suspense, {
        fallback: /*#__PURE__*/ _react.createElement("div", null, "Loading...")
    }, callout));
});
CartesianChart.displayName = 'CartesianChart';
CartesianChart.defaultProps = {
    hideTickOverlap: true
};
