'use client';
import * as React from 'react';
import { useScatterChartStyles } from './useScatterChartStyles.styles';
import { select as d3Select } from 'd3-selection';
import { Legends } from '../Legends/index';
import { max as d3Max, min as d3Min } from 'd3-array';
import { useId } from '@fluentui/react-utilities';
import { areArraysEqual, createNumericYAxis, createStringYAxis, getDomainPaddingForMarkers, domainRangeOfXStringAxis, findNumericMinMaxOfY, YAxisType, isTextMode, isScatterPolarSeries, isPlottable, getRangeForScatterMarkerSize, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, sortAxisCategories, findCalloutPoints } from '../../utilities/index';
import { CartesianChart } from '../../index';
import { tokens } from '@fluentui/react-theme';
import { calloutData, ChartTypes, XAxisTypes, getTypeOfAxis, getNextColor, getColorFromToken } from '../../utilities/index';
import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
import { formatDateToLocaleString } from '@fluentui/chart-utilities';
import { useImageExport } from '../../utilities/hooks';
// Create a ScatterChart variant which uses these default styles and this styled subcomponent.
/**
 * ScatterChart component
 * {@docCategory ScatterChart}
 */ export const ScatterChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
    var _props_legendProps, _props_legendProps1;
    const _circleId = useId('circle');
    const _seriesId = useId('seriesID');
    const _verticalLine = useId('verticalLine');
    const _firstRenderOptimization = true;
    const _emptyChartId = useId('_ScatterChart_empty');
    let _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    let _xAxisScale = '';
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    let _yAxisScale = '';
    let _uniqueCallOutID = '';
    let _refArray = [];
    let margins;
    let renderSeries;
    let _xAxisLabels = [];
    let xAxisCalloutAccessibilityData = {};
    let _xBandwidth = 0;
    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
    const classes = useScatterChartStyles(props);
    const [hoverXValue, setHoverXValue] = React.useState('');
    const [activeLegend, setActiveLegend] = React.useState('');
    const [yValueHover, setYValueHover] = React.useState([]);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const [selectedLegendPoints, setSelectedLegendPoints] = React.useState([]);
    const [isSelectedLegend, setIsSelectedLegend] = React.useState(false);
    const [activePoint, setActivePoint] = React.useState('');
    const [stackCalloutProps, setStackCalloutProps] = React.useState();
    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState();
    const [clickPosition, setClickPosition] = React.useState({
        x: 0,
        y: 0
    });
    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
    const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
    const prevSelectedLegendsRef = React.useRef(undefined);
    const _isTextMode = React.useRef(false);
    const _isScatterPolarRef = React.useRef(false);
    React.useEffect(()=>{
        var _props_legendProps, _props_legendProps1;
        if (prevSelectedLegendsRef.current && !areArraysEqual(prevSelectedLegendsRef.current, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
            var _props_legendProps2;
            setSelectedLegends(((_props_legendProps2 = props.legendProps) === null || _props_legendProps2 === void 0 ? void 0 : _props_legendProps2.selectedLegends) || []);
        }
        prevSelectedLegendsRef.current = (_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends;
    }, [
        (_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends
    ]);
    const _xAxisType = props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData[0].data && props.data.scatterChartData[0].data.length > 0 ? getTypeOfAxis(props.data.scatterChartData[0].data[0].x, true) : XAxisTypes.StringAxis;
    // Detect y axis type (numeric or string)
    const _yAxisType = props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData[0].data && props.data.scatterChartData[0].data.length > 0 ? typeof props.data.scatterChartData[0].data[0].y === 'string' ? YAxisType.StringAxis : YAxisType.NumericAxis : YAxisType.NumericAxis;
    const pointsRef = React.useRef([]);
    const calloutPointsRef = React.useRef({});
    React.useEffect(()=>{
        /** note that height and width are not used to resize or set as dimesions of the chart,
     * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart
     */ if (_points !== _injectIndexPropertyInScatterChartData(props.data.scatterChartData) || props.data !== _points) {
            pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
            calloutPointsRef.current = calloutData(pointsRef.current);
        }
    }, [
        props.height,
        props.width,
        props.data,
        _points
    ]);
    function _injectIndexPropertyInScatterChartData(scatterChartData) {
        return scatterChartData ? scatterChartData.map((item, index)=>{
            let color;
            if (typeof item.color === 'undefined') {
                color = getNextColor(index, 0);
            } else {
                color = getColorFromToken(item.color);
            }
            return {
                ...item,
                index: -1,
                color
            };
        }) : [];
    }
    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 _getNumericMinMaxOfY(points, yAxisType) {
        const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType);
        const yPadding = getDomainPaddingForMarkers(startValue, endValue, props.yScaleType);
        return {
            startValue: startValue - yPadding.start,
            endValue: endValue + yPadding.end
        };
    }
    function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
        let domainNRangeValue;
        if (xAxisType === XAxisTypes.NumericAxis) {
            domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, props.xScaleType, true, props.xMinValue, props.xMaxValue);
        } else if (xAxisType === XAxisTypes.DateAxis) {
            domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType);
        } else {
            domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
        }
        return domainNRangeValue;
    }
    function _getMargins(_margins) {
        margins = _margins;
    }
    function _initializeScatterChartData(xScale, yScale, containerHeight, containerWidth, xElement) {
        _xAxisScale = xScale;
        _yAxisScale = yScale;
        _isTextMode.current = isTextMode(_points);
        _isScatterPolarRef.current = isScatterPolarSeries(_points);
        renderSeries = _createPlot(xElement, containerHeight);
    }
    function _onHoverCardHide() {
        setSelectedLegendPoints([]);
        setIsSelectedLegend(false);
    }
    function _createLegends(data) {
        const { legendProps } = props;
        const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
        const mapLegendToPoints = {};
        data.forEach((point)=>{
            if (point.legend) {
                if (!mapLegendToPoints[point.legend]) {
                    mapLegendToPoints[point.legend] = [];
                }
                mapLegendToPoints[point.legend].push(point);
            }
        });
        const legendDataItems = Object.entries(mapLegendToPoints).map(([legendTitle, points])=>{
            const representativePoint = points[0];
            // mapping data to the format Legends component needs
            const legend = {
                title: legendTitle,
                color: representativePoint.color,
                onMouseOutAction: ()=>{
                    setActiveLegend('');
                },
                hoverAction: ()=>{
                    _handleChartMouseLeave();
                    setActiveLegend(legendTitle);
                },
                ...representativePoint.legendShape && {
                    shape: representativePoint.legendShape
                }
            };
            return legend;
        });
        return /*#__PURE__*/ React.createElement(Legends, {
            legends: [
                ...legendDataItems
            ],
            enabledWrapLines: props.enabledLegendsWrapLines,
            overflowText: props.legendsOverflowText,
            ...isLegendMultiSelectEnabled && {
                onLegendHoverCardLeave: _onHoverCardHide
            },
            ...props.legendProps,
            selectedLegends: selectedLegends,
            onChange: _onLegendSelectionChange,
            legendRef: _legendsRef
        });
    }
    function _getOrderedYAxisLabels() {
        const shouldOrderYAxisLabelsByCategoryOrder = _yAxisType === YAxisType.StringAxis && props.yAxisCategoryOrder !== 'default';
        if (!shouldOrderYAxisLabelsByCategoryOrder) {
            // Collect all unique string y values from all data points in all series, in reverse order
            const yLabelsSet = new Set();
            for(let i = _points.length - 1; i >= 0; i--){
                const point = _points[i];
                if (point.data && Array.isArray(point.data)) {
                    for (const d of point.data){
                        if (typeof d.y === 'string') {
                            yLabelsSet.add(d.y);
                        }
                    }
                }
            }
            return Array.from(yLabelsSet);
        }
        return sortAxisCategories(_mapCategoryToValues(), props.yAxisCategoryOrder);
    }
    function _mapCategoryToValues() {
        const categoryToValues = {};
        _points.forEach((point)=>{
            if (point.data && Array.isArray(point.data)) {
                point.data.forEach((d)=>{
                    if (typeof d.y === 'string') {
                        if (!categoryToValues[d.y]) {
                            categoryToValues[d.y] = [];
                        }
                        if (typeof d.x === 'number') {
                            categoryToValues[d.y].push(d.x);
                        }
                    }
                });
            }
        });
        return categoryToValues;
    }
    function _onLegendSelectionChange(legendsSelected, event, currentLegend) {
        var _props_legendProps, _props_legendProps1;
        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
            setSelectedLegends(legendsSelected);
        } else {
            setSelectedLegends(legendsSelected.slice(-1));
        }
        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
            props.legendProps.onChange(legendsSelected, event, currentLegend);
        }
    }
    function _getPointFill(seriesColor, pointId, pointIndex, isLastPoint) {
        if (activePoint === pointId) {
            return tokens.colorNeutralBackground1;
        } else {
            return seriesColor;
        }
    }
    function _createPlot(xElement, containerHeight) {
        const series = [];
        if (isSelectedLegend) {
            _points = selectedLegendPoints;
        } else {
            _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
        }
        if (_xAxisType === XAxisTypes.StringAxis) {
            _xBandwidth = _xAxisScale.bandwidth() / 2;
        }
        var _d3Min;
        const minMarkerSize = (_d3Min = d3Min(_points, (point)=>{
            return d3Min(point.data, (item)=>{
                return item.markerSize;
            });
        })) !== null && _d3Min !== void 0 ? _d3Min : 0;
        var _d3Max;
        const maxMarkerSize = (_d3Max = d3Max(_points, (point)=>{
            return d3Max(point.data, (item)=>{
                return item.markerSize;
            });
        })) !== null && _d3Max !== void 0 ? _d3Max : 0;
        const isContinuousXY = _xAxisType !== XAxisTypes.StringAxis && _yAxisType !== YAxisType.StringAxis;
        const extraMaxPixels = isContinuousXY ? getRangeForScatterMarkerSize({
            data: _points,
            xScale: _xAxisScale,
            yScalePrimary: _yAxisScale,
            xScaleType: props.xScaleType,
            yScaleType: props.yScaleType,
            xMinValue: props.xMinValue,
            xMaxValue: props.xMaxValue,
            yMinValue: props.yMinValue,
            yMaxValue: props.yMaxValue
        }) : 0;
        for(let i = _points.length - 1; i >= 0; i--){
            const pointsForSeries = [];
            const legendVal = _points[i].legend;
            const seriesColor = _points[i].color;
            const verticaLineHeight = containerHeight - margins.bottom + 6;
            for(let j = 0; j < _points[i].data.length; j++){
                var _points_i, _points_i_data_j;
                const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points === null || _points === void 0 ? void 0 : (_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.data[j];
                const xPoint = _xAxisScale === null || _xAxisScale === void 0 ? void 0 : _xAxisScale(x);
                // Use string y axis scale if needed
                const yPoint = _yAxisType === YAxisType.StringAxis ? (_yAxisScale === null || _yAxisScale === void 0 ? void 0 : _yAxisScale(y)) + ((_yAxisScale === null || _yAxisScale === void 0 ? void 0 : _yAxisScale.bandwidth) ? _yAxisScale.bandwidth() / 2 : 0) : _yAxisScale === null || _yAxisScale === void 0 ? void 0 : _yAxisScale(y);
                if (!isPlottable(xPoint, yPoint)) {
                    continue;
                }
                const seriesId = `${_seriesId}_${i}_${j}`;
                const circleId = `${_circleId}_${i}_${j}`;
                const pointMarkerSize = _points[i].data[j].markerSize;
                const minPixel = 4;
                const maxPixel = 16;
                let circleRadius = activePoint === circleId ? 6 : 4;
                if (pointMarkerSize) {
                    if (isContinuousXY && maxMarkerSize !== 0) {
                        circleRadius = pointMarkerSize * extraMaxPixels / maxMarkerSize;
                    } else if (!isContinuousXY && maxMarkerSize !== minMarkerSize) {
                        circleRadius = minPixel + (pointMarkerSize - minMarkerSize) / (maxMarkerSize - minMarkerSize) * (maxPixel - minPixel);
                    }
                }
                const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
                const text = _points === null || _points === void 0 ? void 0 : (_points_i_data_j = _points[i].data[j]) === null || _points_i_data_j === void 0 ? void 0 : _points_i_data_j.text;
                if (!_isTextMode.current) {
                    pointsForSeries.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
                        id: circleId,
                        key: circleId,
                        r: Math.max(circleRadius, 4),
                        cx: xPoint + _xBandwidth,
                        cy: yPoint,
                        "data-is-focusable": isLegendSelected,
                        onMouseOver: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
                        onMouseMove: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
                        onMouseOut: _handleMouseOut,
                        onFocus: (event)=>_handleFocus(event, seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                        onBlur: _handleMouseOut,
                        ..._getClickHandler(_points[i].data[j].onDataPointClick),
                        opacity: isLegendSelected && !currentPointHidden ? 1 : 0.1,
                        fill: _getPointFill(seriesColor, circleId, j, false),
                        stroke: seriesColor,
                        role: "img",
                        "aria-label": _getAriaLabel(i, j),
                        tabIndex: isLegendSelected ? 0 : undefined
                    }), ",", text && /*#__PURE__*/ React.createElement("text", {
                        key: `${circleId}-label`,
                        x: xPoint + _xBandwidth,
                        y: yPoint + Math.max(circleRadius + 12, 16),
                        className: classes.markerLabel
                    }, text)));
                }
            }
            if (_isScatterPolarRef.current) {
                var _points_i1;
                pointsForSeries.push(...renderScatterPolarCategoryLabels({
                    xAxisScale: _xAxisScale,
                    yAxisScale: _yAxisScale,
                    className: classes.markerLabel || '',
                    lineOptions: _points === null || _points === void 0 ? void 0 : (_points_i1 = _points[i]) === null || _points_i1 === void 0 ? void 0 : _points_i1.lineOptions
                }));
            }
            series.push(/*#__PURE__*/ React.createElement("g", {
                key: `series_${i}`,
                role: "region",
                "aria-label": `${legendVal}, series ${i + 1} of ${_points.length} with ${_points[i].data.length} data points.`
            }, pointsForSeries));
        }
        return series;
    }
    function _handleFocus(event, seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
        let cx = 0;
        let cy = 0;
        const targetRect = event.target.getBoundingClientRect();
        cx = targetRect.left + targetRect.width / 2;
        cy = targetRect.top + targetRect.height / 2;
        updatePosition(cx, cy);
        _uniqueCallOutID = circleId;
        const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
        const found = findCalloutPoints(calloutPointsRef.current, x);
        // if no points need to be called out then don't show vertical line and callout card
        if (found) {
            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x) + _xBandwidth}, 0)`).attr('visibility', 'visibility');
            _refArray.forEach((obj)=>{
                if (obj.index === seriesId) {
                    setPopoverOpen(true);
                    xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
                    setYValueHover(found.values);
                    setStackCalloutProps(found);
                    setDataPointCalloutProps(found);
                    setActivePoint(circleId);
                }
            });
        } else {
            setActivePoint(circleId);
        }
    }
    function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent) {
        mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
        const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
        const found = findCalloutPoints(calloutPointsRef.current, x);
        // if no points need to be called out then don't show vertical line and callout card
        if (found) {
            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x) + _xBandwidth}, ${_yAxisScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - _yAxisScale(y)}`);
            if (_uniqueCallOutID !== circleId) {
                _uniqueCallOutID = circleId;
                updatePosition(mouseEvent.clientX, mouseEvent.clientY);
                xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
                setYValueHover(found.values);
                setStackCalloutProps(found);
                setDataPointCalloutProps(found);
                setActivePoint(circleId);
            }
        } else {
            setActivePoint(circleId);
        }
    }
    /**
   * Screen readers announce an element as clickable if the onClick attribute is set.
   * This function sets the attribute only when a click event handler is provided.*/ function _getClickHandler(func) {
        if (func) {
            return {
                onClick: func
            };
        }
        return {};
    }
    function _handleMouseOut() {
        d3Select(`#${_verticalLine}`).attr('visibility', 'hidden');
    }
    function _handleChartMouseLeave() {
        _uniqueCallOutID = null;
        setActivePoint('');
        if (isPopoverOpen) {
            setPopoverOpen(false);
        }
    }
    function _getCustomizedCallout() {
        return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
    }
    /**
   * This function checks if the given legend is highlighted or not.
   * A legend can be highlighted in 2 ways:
   * 1. selection: if the user clicks on it
   * 2. hovering: if there is no selected legend and the user hovers over it*/ function _legendHighlighted(legend) {
        return _getHighlightedLegend().includes(legend);
    }
    /**
   * This function checks if none of the legends is selected or hovered.*/ function _noLegendHighlighted() {
        return _getHighlightedLegend().length === 0;
    }
    function _getHighlightedLegend() {
        return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [
            activeLegend
        ] : [];
    }
    function _getAriaLabel(seriesIndex, pointIndex) {
        var _point_callOutAccessibilityData;
        const series = _points[seriesIndex];
        const point = series.data[pointIndex];
        const formattedDate = point.x instanceof Date ? formatDateToLocaleString(point.x, props.culture, props.useUTC) : point.x;
        const xValue = point.xAxisCalloutData || formattedDate;
        const legend = series.legend;
        const yValue = point.yAxisCalloutData || point.y;
        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
    }
    function _isChartEmpty() {
        return !(props.data && props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData.filter((item)=>item.data.length).length > 0);
    }
    const { legendProps, tickValues, tickFormat } = props;
    _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
    let points = _points;
    if (legendProps && !!legendProps.canSelectMultipleLegends) {
        points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
        calloutPointsRef.current = calloutData(points);
    }
    let legendBars = null;
    // reduce computation cost by only creating legendBars
    // if when hideLegend is false.
    // NOTE: they are rendered only when hideLegend is false in CartesianChart.
    if (!props.hideLegend && !_isTextMode.current) {
        legendBars = _createLegends(_points); // ToDo: Memoize legends to improve performance.
    }
    const calloutProps = {
        YValueHover: yValueHover,
        hoverXValue,
        descriptionMessage: props.getCalloutDescriptionMessage && stackCalloutProps ? props.getCalloutDescriptionMessage(stackCalloutProps) : undefined,
        'data-is-focusable': true,
        xAxisCalloutAccessibilityData,
        ...props.calloutProps,
        clickPosition,
        isPopoverOpen,
        isCalloutForStack: true,
        culture: props.culture,
        isCartesian: true,
        customCallout: {
            customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
            customCalloutProps: props.calloutPropsPerDataPoint ? props.calloutPropsPerDataPoint(dataPointCalloutProps) : undefined
        }
    };
    const tickParams = {
        tickValues,
        tickFormat
    };
    const xAxisLabels = _points.map((point)=>point.data.map((dp)=>dp.x)).flat();
    _xAxisLabels = [
        ...new Set(xAxisLabels)
    ];
    // Compute unique y axis labels for string y axis
    const _yAxisLabels = _getOrderedYAxisLabels();
    return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
        ...props,
        chartTitle: props.data.chartTitle,
        points: points,
        chartType: ChartTypes.ScatterChart,
        calloutProps: calloutProps,
        tickParams: tickParams,
        legendBars: legendBars,
        getmargins: _getMargins,
        getGraphData: _initializeScatterChartData,
        xAxisType: _xAxisType,
        yAxisType: _yAxisType,
        ..._yAxisType === YAxisType.StringAxis ? {
            stringDatasetForYAxisDomain: _yAxisLabels
        } : {},
        getMinMaxOfYAxis: _getNumericMinMaxOfY,
        getDomainNRangeValues: _getDomainNRangeValues,
        createYAxis: createNumericYAxis,
        createStringYAxis: createStringYAxis,
        onChartMouseLeave: _handleChartMouseLeave,
        enableFirstRenderOptimization: _firstRenderOptimization,
        datasetForXAxisDomain: _xAxisLabels,
        componentRef: cartesianChartRef,
        ..._isScatterPolarRef.current ? {
            yMaxValue: 1,
            yMinValue: -1
        } : {},
        /* eslint-disable react/jsx-no-bind */ // eslint-disable-next-line react/no-children-prop
        children: (props)=>{
            _xAxisScale = props.xScale;
            _yAxisScale = props.yScalePrimary;
            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", null, /*#__PURE__*/ React.createElement("line", {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: props.containerHeight,
                stroke: '#323130',
                id: _verticalLine,
                visibility: 'hidden',
                strokeDasharray: '5,5'
            }), /*#__PURE__*/ React.createElement("g", null, renderSeries)));
        }
    }) : /*#__PURE__*/ React.createElement("div", {
        id: _emptyChartId,
        role: 'alert',
        style: {
            opacity: '0'
        },
        "aria-label": 'Graph has no data to display'
    });
});
ScatterChart.displayName = 'ScatterChart';
