@fluentui/react-charts 9.3.21 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib/components/ScatterChart/ScatterChart.js

@@ -1,544 +0,0 @@
-'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, calculateMarkerRadius, 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 = '';
-    const _refArray = [];
-    let margins;
-    let renderSeries;
-    let _xAxisLabels = [];
-    const 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
-        }) : 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 circleRadius = calculateMarkerRadius({
-                    pointMarkerSize,
-                    minMarkerSize,
-                    maxMarkerSize,
-                    extraMaxPixels,
-                    isContinuousXY,
-                    isActive: activePoint === circleId,
-                    defaultRadius: 4,
-                    activeRadius: 6
-                });
-                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: circleRadius,
-                        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 */ 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';