'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "HeatMapChart", {
    enumerable: true,
    get: function() {
        return HeatMapChart;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _index = require("../../utilities/index");
const _chartutilities = require("@fluentui/chart-utilities");
const _index1 = require("../CommonComponents/index");
const _reactutilities = require("@fluentui/react-utilities");
const _reacttheme = require("@fluentui/react-theme");
const _useHeatMapChartStylesstyles = require("./useHeatMapChartStyles.styles");
const _index2 = require("../Legends/index");
const _d3scale = require("d3-scale");
const _d3format = require("d3-format");
const _d3timeformat = require("d3-time-format");
const _hooks = require("../../utilities/hooks");
const HeatMapChart = /*#__PURE__*/ _react.forwardRef((props = {
    xAxisCategoryOrder: 'default',
    yAxisCategoryOrder: 'default',
    data: [],
    domainValuesForColorScale: [],
    rangeValuesForColorScale: []
}, forwardedRef)=>{
    const classes = (0, _useHeatMapChartStylesstyles.useHeatMapChartStyles)(props);
    const _stringXAxisDataPoints = _react.useRef([]);
    const _stringYAxisDataPoints = _react.useRef([]);
    const _dataSet = _react.useRef({});
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const _colorScale = _react.useRef(undefined);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const _xAxisScale = _react.useRef(undefined);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const _yAxisScale = _react.useRef(undefined);
    const _xAxisType = _react.useRef(undefined);
    const _yAxisType = _react.useRef(undefined);
    const _calloutAnchorPoint = _react.useRef(null);
    const _emptyChartId = (0, _reactutilities.useId)('_HeatMap_empty');
    const _margins = _react.useRef({});
    const { cartesianChartRef, legendsRef: _legendsRef } = (0, _hooks.useImageExport)(props.componentRef, props.hideLegend);
    const [selectedLegend, setSelectedLegend] = _react.useState('');
    const [activeLegend, setActiveLegend] = _react.useState('');
    const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
    const [calloutLegend, setCalloutLegend] = _react.useState('');
    const [calloutTextColor, setCalloutTextColor] = _react.useState('');
    const [calloutYValue, setCalloutYValue] = _react.useState('');
    const [ratio, setRatio] = _react.useState();
    const [descriptionMessage, setDescriptionMessage] = _react.useState('');
    const [callOutAccessibilityData, setCallOutAccessibilityData] = _react.useState();
    const [clickPosition, setClickPosition] = _react.useState({
        x: 0,
        y: 0
    });
    function _getMinMaxOfYAxis() {
        return {
            startValue: 0,
            endValue: 0
        };
    }
    function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
        let domainNRangeValue;
        if (xAxisType === _index.XAxisTypes.NumericAxis || xAxisType === _index.XAxisTypes.DateAxis) {
            domainNRangeValue = {
                dStartValue: 0,
                dEndValue: 0,
                rStartValue: 0,
                rEndValue: 0
            };
        } else {
            domainNRangeValue = (0, _index.domainRangeOfXStringAxis)(_margins.current, width, isRTL);
        }
        return domainNRangeValue;
    }
    const _getXandY = ()=>{
        let x = '';
        let y = '';
        props.data.forEach((item)=>{
            if (item.data && item.data.length > 0) {
                x = item.data[0].x;
                y = item.data[0].y;
                return {
                    x,
                    y
                };
            }
        });
        return {
            x,
            y
        };
    };
    const _getMargins = (margins)=>{
        _margins.current = margins;
    };
    const _getOpacity = (legendTitle)=>{
        const opacity = _legendHighlighted(legendTitle) || _noLegendHighlighted() ? '1' : '0.1';
        return opacity;
    };
    const _onRectFocus = (id, data, focusEvent)=>{
        const boundingRect = focusEvent.currentTarget.getBoundingClientRect();
        const clientX = boundingRect.left + boundingRect.width / 2;
        const clientY = boundingRect.top + boundingRect.height / 2;
        updatePosition(clientX, clientY);
        /** Show the callout if highlighted rectangle is focused and Hide it if unhighlighted rectangle is focused */ setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
        setCalloutYValue(`${data.rectText}`);
        setCalloutTextColor(Number.isNaN(data.value) ? _reacttheme.tokens.colorNeutralForeground1 : _colorScale.current(data.value));
        setCalloutLegend(data.legend);
        setRatio(data.ratio);
        setDescriptionMessage(data.descriptionMessage || '');
        setCallOutAccessibilityData(data.callOutAccessibilityData);
    };
    const _onRectMouseOver = (id, data, mouseEvent)=>{
        mouseEvent.persist();
        if (_calloutAnchorPoint.current !== data) {
            _calloutAnchorPoint.current = data;
            updatePosition(mouseEvent.clientX, mouseEvent.clientY);
            /** Show the callout if highlighted rectangle is hovered and Hide it if unhighlighted rectangle is hovered */ setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
            setCalloutYValue(`${data.rectText}`);
            setCalloutTextColor(Number.isNaN(data.value) ? _reacttheme.tokens.colorNeutralForeground1 : _colorScale.current(data.value));
            setCalloutLegend(data.legend);
            setRatio(data.ratio);
            setDescriptionMessage(data.descriptionMessage || '');
            setCallOutAccessibilityData(data.callOutAccessibilityData);
        }
    };
    const _onRectBlurOrMouseOut = ()=>{
    /**/ };
    const _handleChartMouseLeave = ()=>{
        _calloutAnchorPoint.current = null;
        setPopoverOpen(false);
    };
    const _getInvertedTextColor = (color)=>{
        return color === _reacttheme.tokens.colorNeutralForeground1 ? _reacttheme.tokens.colorNeutralBackground1 : _reacttheme.tokens.colorNeutralForeground1;
    };
    /**
     * This is the function which is responsible for
     * drawing the rectangle in the graph and also
     * attaching dom events to that rectangles
     */ const _createRectangles = ()=>{
        const rectangles = [];
        const yAxisDataPoints = _stringYAxisDataPoints.current.slice().reverse();
        /**
       * yAxisDataPoint is noting but the DataPoint
       * which will be rendered on the y-axis
       */ yAxisDataPoints.forEach((yAxisDataPoint)=>{
            let index = 0;
            _stringXAxisDataPoints.current.forEach((xAxisDataPoint)=>{
                var _dataSet_current_yAxisDataPoint_index, _dataSet_current_yAxisDataPoint_index1;
                let rectElement;
                const id = `x${xAxisDataPoint}y${yAxisDataPoint}`;
                if (((_dataSet_current_yAxisDataPoint_index = _dataSet.current[yAxisDataPoint][index]) === null || _dataSet_current_yAxisDataPoint_index === void 0 ? void 0 : _dataSet_current_yAxisDataPoint_index.x) === xAxisDataPoint && typeof ((_dataSet_current_yAxisDataPoint_index1 = _dataSet.current[yAxisDataPoint][index]) === null || _dataSet_current_yAxisDataPoint_index1 === void 0 ? void 0 : _dataSet_current_yAxisDataPoint_index1.value) === 'number') {
                    var _cartesianChartRef_current;
                    /**
             * dataPointObject is an object where it contains information on single
             * data point such as x, y , value, rectText property of the rectangle
             */ const dataPointObject = _dataSet.current[yAxisDataPoint][index];
                    let styleRules = '';
                    let foregroundColor = _reacttheme.tokens.colorNeutralForeground1;
                    if ((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) {
                        styleRules = (0, _index.resolveCSSVariables)(cartesianChartRef.current.chartContainer, foregroundColor);
                    }
                    const contrastRatio = (0, _index.getColorContrast)(styleRules, _colorScale.current(dataPointObject.value));
                    if (contrastRatio < 3) {
                        foregroundColor = _getInvertedTextColor(foregroundColor);
                    }
                    rectElement = /*#__PURE__*/ _react.createElement("g", {
                        key: id,
                        role: "img",
                        "aria-label": _getAriaLabel(dataPointObject),
                        tabIndex: _legendHighlighted(dataPointObject.legend) || _noLegendHighlighted() ? 0 : -1,
                        fillOpacity: _getOpacity(dataPointObject.legend),
                        transform: `translate(${_xAxisScale.current(dataPointObject.x)}, ${_yAxisScale.current(dataPointObject.y)})`,
                        onFocus: (e)=>_onRectFocus(id, dataPointObject, e),
                        onBlur: _onRectBlurOrMouseOut,
                        onMouseOver: (e)=>_onRectMouseOver(id, dataPointObject, e),
                        onMouseOut: _onRectBlurOrMouseOut
                    }, /*#__PURE__*/ _react.createElement("rect", {
                        fill: _colorScale.current(dataPointObject.value),
                        width: _xAxisScale.current.bandwidth(),
                        height: _yAxisScale.current.bandwidth(),
                        onClick: dataPointObject.onClick
                    }), /*#__PURE__*/ _react.createElement("text", {
                        dominantBaseline: 'middle',
                        textAnchor: 'middle',
                        className: classes.text,
                        transform: `translate(${_xAxisScale.current.bandwidth() / 2}, ${_yAxisScale.current.bandwidth() / 2})`,
                        fill: foregroundColor
                    }, (0, _chartutilities.formatToLocaleString)(dataPointObject.rectText, props.culture, props.useUTC)));
                    index++;
                } else {
                    const dataPointObject = {
                        x: xAxisDataPoint,
                        y: yAxisDataPoint,
                        value: NaN,
                        rectText: 'No data available',
                        legend: ''
                    };
                    rectElement = /*#__PURE__*/ _react.createElement("g", {
                        key: id,
                        role: "img",
                        "aria-label": _getAriaLabel(dataPointObject),
                        tabIndex: _noLegendHighlighted() ? 0 : -1,
                        transform: `translate(${_xAxisScale.current(dataPointObject.x)}, ${_yAxisScale.current(dataPointObject.y)})`,
                        onFocus: (e)=>_onRectFocus(id, dataPointObject, e),
                        onBlur: _onRectBlurOrMouseOut,
                        onMouseOver: (e)=>_onRectMouseOver(id, dataPointObject, e),
                        onMouseOut: _onRectBlurOrMouseOut
                    }, /*#__PURE__*/ _react.createElement("rect", {
                        fill: "transparent",
                        width: _xAxisScale.current.bandwidth(),
                        height: _yAxisScale.current.bandwidth()
                    }));
                }
                rectangles.push(rectElement);
            });
        });
        return rectangles;
    };
    /**
     * when the legend is hovered we need to highlight
     * all the rectangles which fall under that category
     * and un-highlight the rest of them
     * @param legendTitle
     */ const _onLegendHover = (legendTitle)=>{
        setActiveLegend(legendTitle);
    };
    /**
     * when the mouse is out from the legend , we need
     * to show the graph in initial mode.
     */ const _onLegendLeave = ()=>{
        setActiveLegend('');
    };
    /**
     * @param legendTitle
     * when the legend is clicked we need to highlight
     * all the rectangles which fall under that category
     * and un highlight the rest of them
     */ const _onLegendClick = (legendTitle)=>{
        /**
       * check if the legend is already selceted,
       * if yes, un-select the legend, else
       * set the selected legend state to legendTitle
       */ if (selectedLegend === legendTitle) {
            setSelectedLegend('');
        } else {
            setSelectedLegend(legendTitle);
        }
    };
    const _createLegendBars = ()=>{
        const { data, legendProps } = props;
        const legends = [];
        data.forEach((item)=>{
            const legend = {
                title: item.legend,
                color: _colorScale.current(item.value),
                action: ()=>{
                    _onLegendClick(item.legend);
                },
                hoverAction: ()=>{
                    _handleChartMouseLeave();
                    _onLegendHover(item.legend);
                },
                onMouseOutAction: ()=>{
                    _onLegendLeave();
                }
            };
            legends.push(legend);
        });
        return /*#__PURE__*/ _react.createElement(_index2.Legends, {
            ...legendProps,
            legends: legends,
            legendRef: _legendsRef
        });
    };
    const _getColorScale = ()=>{
        const { domainValuesForColorScale, rangeValuesForColorScale } = props;
        return (0, _d3scale.scaleLinear)().domain(domainValuesForColorScale).range(rangeValuesForColorScale);
    };
    const _getXIndex = (value)=>{
        if (_xAxisType.current === _index.XAxisTypes.DateAxis) {
            return `${value.getTime()}`;
        } else if (_xAxisType.current === _index.XAxisTypes.StringAxis) {
            return value;
        } else if (_xAxisType.current === _index.XAxisTypes.NumericAxis) {
            return `${value}`;
        } else {
            return '';
        }
    };
    const _getYIndex = (value)=>{
        if (_yAxisType.current === _index.YAxisType.DateAxis) {
            return `${value.getTime()}`;
        } else if (_yAxisType.current === _index.YAxisType.StringAxis) {
            return value;
        } else if (_yAxisType.current === _index.YAxisType.NumericAxis) {
            return `${value}`;
        } else {
            return '';
        }
    };
    const { xAxisStringFormatter } = props;
    const _getFormattedLabelForXAxisDataPoint = _react.useCallback((point)=>{
        return xAxisStringFormatter ? xAxisStringFormatter(point) : point;
    }, [
        xAxisStringFormatter
    ]);
    const { yAxisStringFormatter } = props;
    const _getFormattedLabelForYAxisDataPoint = _react.useCallback((point)=>{
        return yAxisStringFormatter ? yAxisStringFormatter(point) : point;
    }, [
        yAxisStringFormatter
    ]);
    /**
     * This function will return the final sorted and formatted x-axis points
     * which will be rendered on the x-axis
     * @param points
     * @returns x-axis points
     */ const _getXAxisDataPoints = _react.useCallback((points)=>{
        let xAxisPoints = [];
        const unFormattedXAxisDataPoints = _getOrderedXAxisLabels(points);
        xAxisPoints = unFormattedXAxisDataPoints.map((xPoint)=>{
            if (_xAxisType.current === _index.XAxisTypes.DateAxis) {
                return _getStringFormattedDate(xPoint, props.xAxisDateFormatString);
            } else if (_xAxisType.current === _index.XAxisTypes.NumericAxis) {
                return _getStringFormattedNumber(xPoint, props.xAxisNumberFormatString);
            } else {
                return _getFormattedLabelForXAxisDataPoint(xPoint);
            }
        });
        return xAxisPoints;
    }, [
        _getFormattedLabelForXAxisDataPoint,
        props.sortOrder,
        props.xAxisDateFormatString,
        props.xAxisNumberFormatString
    ]);
    /**
     * This function will return the final sorted and formatted y-axis points
     * which will be rendered on the y-axis
     * @param points
     * @returns yaxis points
     */ const _getYAxisDataPoints = _react.useCallback((points)=>{
        let yAxisPoints = [];
        const unFormattedYAxisDataPoints = _getOrderedYAxisLabels(points);
        yAxisPoints = unFormattedYAxisDataPoints.map((yPoint)=>{
            if (_yAxisType.current === _index.YAxisType.DateAxis) {
                return _getStringFormattedDate(yPoint, props.yAxisDateFormatString);
            } else if (_yAxisType.current === _index.YAxisType.NumericAxis) {
                return _getStringFormattedNumber(yPoint, props.yAxisNumberFormatString);
            } else {
                return _getFormattedLabelForYAxisDataPoint(yPoint);
            }
        });
        return yAxisPoints;
    }, [
        _getFormattedLabelForYAxisDataPoint,
        props.sortOrder,
        props.yAxisDateFormatString,
        props.yAxisNumberFormatString
    ]);
    /**
     * This will create a new data set based on the prop
     * @data
     * We will be using This data set to contsruct our rectangles
     * in the chart, we use this data set becuase, when we loop in this
     * data and build the heat map, it will support accessibility as
     * specified in the figma
     */ const _createNewDataSet = _react.useCallback((data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString)=>{
        /**
         * please do not destructure any of the props here,
         * instead send them as parameter to this functions so that
         * this functions get called whenever the prop changes
         */ const flattenData = [];
        /**
         * below for each loop will store all the datapoints in the one array.
         * basically it will flatten the nestesd array (data prop) into single array
         * of object. where each object contains x, y, rectText , value and legend propety of single
         * data point.
         */ data.forEach((item)=>{
            item.data.forEach((point)=>{
                flattenData.push({
                    ...point,
                    legend: item.legend
                });
            });
        });
        const yPoints = {};
        const uniqueYPoints = {};
        const uniqueXPoints = {};
        flattenData.forEach((item)=>{
            const posX = _getXIndex(item.x);
            const posY = _getYIndex(item.y);
            uniqueXPoints[posX] = '1';
            uniqueYPoints[posY] = '1';
            /** we will check if the property(posY) is already there in object, if  Yes,
           *  then we will append the item in the Array related to the pos, if not
           *  then we will simply append the item in the new Array and
           *  assign that array to the  property (posY) in the Object
           *  and finally we will get the array of Objects associated to each
           *  property (which is nothing but y data point) and object in the
           *  array are noting but x data points associated to the property y
           */ if (yPoints[posY]) {
                yPoints[posY] = [
                    ...yPoints[posY],
                    item
                ];
            } else {
                yPoints[posY] = [
                    item
                ];
            }
        });
        /**
         * we will now sort(ascending) the array's of y data point based on the x value
         * sorting is important to achive the accessibility order of the
         * rectangles and then format the x and y datapoints respectively
         */ Object.keys(yPoints).forEach((item)=>{
            yPoints[item] = _getOrderedXPoints(yPoints[item]);
            yPoints[item].forEach((datapoint)=>{
                if (_xAxisType.current === _index.XAxisTypes.DateAxis) {
                    datapoint.x = _getStringFormattedDate(datapoint.x, xAxisDateFormatString);
                }
                if (_xAxisType.current === _index.XAxisTypes.NumericAxis) {
                    datapoint.x = _getStringFormattedNumber(datapoint.x, xAxisNumberFormatString);
                }
                if (_xAxisType.current === _index.XAxisTypes.StringAxis) {
                    datapoint.x = _getFormattedLabelForXAxisDataPoint(datapoint.x);
                }
                if (_yAxisType.current === _index.YAxisType.DateAxis) {
                    datapoint.y = _getStringFormattedDate(datapoint.y, yAxisDateFormatString);
                }
                if (_yAxisType.current === _index.YAxisType.NumericAxis) {
                    datapoint.y = _getStringFormattedNumber(datapoint.y, yAxisNumberFormatString);
                }
                if (_yAxisType.current === _index.YAxisType.StringAxis) {
                    datapoint.y = _getFormattedLabelForYAxisDataPoint(datapoint.y);
                }
            });
        });
        /**
         * if  y-axis data points are of type date or number or if we have string formatter,
         * then we need to change data points  to their respective string
         * format, becuase in the private variable _stringYAxisDatapoints, points will be stored in
         * string format. and in here `yPoint` are not so we need to change, so that
         * function `_createRectangles` should work perfetcly while looping, and  if we don't change
         * then `_createRectangles` will fail while looping, causing the error
         * Cannot read property 'forEach' of undefined
         */ Object.keys(yPoints).forEach((yPoint)=>{
            if (_yAxisType.current === _index.YAxisType.DateAxis) {
                yPoints[_getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];
            } else if (_yAxisType.current === _index.YAxisType.NumericAxis) {
                yPoints[`${_getStringFormattedNumber(yPoint, yAxisNumberFormatString)}`] = yPoints[yPoint];
            } else {
                yPoints[_getFormattedLabelForYAxisDataPoint(yPoint)] = yPoints[yPoint];
            }
        });
        /**
         * assigning new data set
         */ const dataSet = yPoints;
        /**
         * These are the Y axis data points which will get rendered in the
         * Y axis in graph
         */ const yAxisPoints = _getYAxisDataPoints(uniqueYPoints);
        /**
         * These are the x axis data points which will get rendered in the
         * x axis in the graph
         */ const xAxisPoints = _getXAxisDataPoints(uniqueXPoints);
        return {
            dataSet,
            yAxisPoints,
            xAxisPoints
        };
    }, [
        _getFormattedLabelForXAxisDataPoint,
        _getFormattedLabelForYAxisDataPoint,
        _getXAxisDataPoints,
        _getYAxisDataPoints,
        props.sortOrder
    ]);
    const _getStringFormattedDate = (point, formatString)=>{
        const date = new Date();
        date.setTime(+point);
        return (0, _d3timeformat.timeFormat)(formatString || '%b/%d')(date);
    };
    const _getStringFormattedNumber = (point, formatString)=>{
        return (0, _d3format.format)(formatString || '.2~s')(+point);
    };
    /**
     * 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
     */ const _legendHighlighted = (legendTitle)=>{
        return selectedLegend === legendTitle || selectedLegend === '' && activeLegend === legendTitle;
    };
    /**
     * This function checks if none of the legends is selected or hovered.
     */ const _noLegendHighlighted = ()=>{
        return selectedLegend === '' && activeLegend === '';
    };
    const _getAriaLabel = (point)=>{
        var _point_callOutAccessibilityData;
        const xValue = point.x;
        const yValue = point.y;
        const legend = point.legend;
        const zValue = point.ratio ? `${point.ratio[0]}/${point.ratio[1]}` : point.rectText || point.value;
        const description = point.descriptionMessage;
        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}, ${yValue}. ${legend}, ${zValue}.` + (description ? ` ${description}.` : '');
    };
    const _isChartEmpty = ()=>{
        return !(props.data && props.data.length > 0);
    };
    const _getChartTitle = ()=>{
        const { chartTitle } = props;
        const numDataPoints = props.data.reduce((acc, curr)=>acc + curr.data.length, 0);
        return (chartTitle ? `${chartTitle}. ` : '') + `Heat map chart with ${numDataPoints} data points. `;
    };
    const _getOrderedXAxisLabels = (points)=>{
        if (!_shouldOrderXAxisLabelsByCategoryOrder()) {
            // Keep the original ordering logic as the default behavior to ensure backward compatibility
            return Object.keys(points).sort((a, b)=>{
                if (_xAxisType.current === _index.XAxisTypes.DateAxis || _xAxisType.current === _index.XAxisTypes.NumericAxis) {
                    return +a - +b;
                } else {
                    return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
                }
            });
        }
        return (0, _index.sortAxisCategories)(_mapCategoryToValues(), props.xAxisCategoryOrder);
    };
    const _getOrderedYAxisLabels = (points)=>{
        if (!_shouldOrderYAxisLabelsByCategoryOrder()) {
            // Keep the original ordering logic as the default behavior to ensure backward compatibility
            return Object.keys(points).sort((a, b)=>{
                if (_yAxisType.current === _index.YAxisType.DateAxis || _yAxisType.current === _index.YAxisType.NumericAxis) {
                    return +a - +b;
                } else {
                    return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
                }
            });
        }
        return (0, _index.sortAxisCategories)(_mapCategoryToValues(true), props.yAxisCategoryOrder);
    };
    const _getOrderedXPoints = (xPoints)=>{
        if (!_shouldOrderXAxisLabelsByCategoryOrder()) {
            return xPoints.sort((a, b)=>{
                if (_xAxisType.current === _index.XAxisTypes.StringAxis) {
                    return props.sortOrder === 'none' ? 0 : a.x.toLowerCase() > b.x.toLowerCase() ? 1 : -1;
                } else if (_xAxisType.current === _index.XAxisTypes.DateAxis) {
                    return a.x.getTime() - b.x.getTime();
                } else if (_xAxisType.current === _index.XAxisTypes.NumericAxis) {
                    return +a.x > +b.x ? 1 : -1;
                } else {
                    return a.x > b.x ? 1 : -1;
                }
            });
        }
        const result = [];
        const xValueToPoints = {};
        xPoints.forEach((point)=>{
            const xValue = point.x;
            if (!xValueToPoints[xValue]) {
                xValueToPoints[xValue] = [];
            }
            xValueToPoints[xValue].push(point);
        });
        const xAxisLabels = _getOrderedXAxisLabels({});
        xAxisLabels.forEach((xValue)=>{
            if (xValueToPoints[xValue]) {
                result.push(...xValueToPoints[xValue]);
            }
        });
        return result;
    };
    const _shouldOrderXAxisLabelsByCategoryOrder = ()=>{
        return _xAxisType.current === _index.XAxisTypes.StringAxis && props.xAxisCategoryOrder !== 'default';
    };
    const _shouldOrderYAxisLabelsByCategoryOrder = ()=>{
        return _yAxisType.current === _index.YAxisType.StringAxis && props.yAxisCategoryOrder !== 'default';
    };
    const _mapCategoryToValues = (isYAxis = false)=>{
        const categoryToValues = {};
        props.data.forEach((item)=>{
            item.data.forEach((point)=>{
                const category = isYAxis ? point.y : point.x;
                if (!categoryToValues[category]) {
                    categoryToValues[category] = [];
                }
                categoryToValues[category].push(point.value);
            });
        });
        return categoryToValues;
    };
    const 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
            });
        }
    };
    const { x, y } = _getXandY();
    _xAxisType.current = (0, _index.getTypeOfAxis)(x, true);
    _yAxisType.current = (0, _index.getTypeOfAxis)(y, false);
    const { data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString } = props;
    _colorScale.current = _getColorScale();
    const { dataSet, xAxisPoints, yAxisPoints } = _react.useMemo(()=>_createNewDataSet(data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString), [
        _createNewDataSet,
        data,
        xAxisDateFormatString,
        xAxisNumberFormatString,
        yAxisDateFormatString,
        yAxisNumberFormatString
    ]);
    _dataSet.current = dataSet;
    _stringYAxisDataPoints.current = yAxisPoints;
    _stringXAxisDataPoints.current = xAxisPoints;
    const calloutProps = {
        ...props.calloutProps,
        isPopoverOpen,
        YValue: calloutYValue,
        legend: calloutLegend,
        color: calloutTextColor,
        ratio,
        descriptionMessage,
        clickPosition,
        ...(0, _index.getAccessibleDataObject)(callOutAccessibilityData, 'text', false),
        styles: {
            calloutContentRoot: classes.calloutContentRoot
        }
    };
    const tickParams = {
        tickValues: props.tickValues,
        tickFormat: props.tickFormat
    };
    return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement(_index1.CartesianChart, {
        ...props,
        chartTitle: _getChartTitle(),
        points: data,
        chartType: _index.ChartTypes.HeatMapChart,
        xAxisType: _index.XAxisTypes.StringAxis,
        yAxisType: _index.YAxisType.StringAxis,
        calloutProps: calloutProps,
        createYAxis: _index.createNumericYAxis,
        datasetForXAxisDomain: _stringXAxisDataPoints.current,
        stringDatasetForYAxisDomain: _stringYAxisDataPoints.current,
        createStringYAxis: _index.createStringYAxis,
        getDomainNRangeValues: _getDomainNRangeValues,
        getMinMaxOfYAxis: _getMinMaxOfYAxis,
        getmargins: _getMargins,
        xAxisTickCount: _stringXAxisDataPoints.current.length,
        xAxistickSize: 0,
        xAxisPadding: 0.02,
        yAxisPadding: 0.02,
        legendBars: _createLegendBars(),
        onChartMouseLeave: _handleChartMouseLeave,
        componentRef: cartesianChartRef,
        tickParams: tickParams,
        /* eslint-disable react/jsx-no-bind */ children: (p)=>{
            _xAxisScale.current = p.xScale;
            _yAxisScale.current = p.yScalePrimary;
            return _createRectangles();
        }
    }) : /*#__PURE__*/ _react.createElement("div", {
        id: _emptyChartId,
        role: 'alert',
        style: {
            opacity: '0'
        },
        "aria-label": 'Graph has no data to display'
    });
});
