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

package/lib/components/HeatMapChart/HeatMapChart.js

@@ -1,677 +0,0 @@
-'use client';
-import * as React from 'react';
-import { ChartTypes, getAccessibleDataObject, getColorContrast, getTypeOfAxis, resolveCSSVariables, XAxisTypes, YAxisType, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, sortAxisCategories } from '../../utilities/index';
-import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { CartesianChart } from '../CommonComponents/index';
-import { useId } from '@fluentui/react-utilities';
-import { tokens } from '@fluentui/react-theme';
-import { useHeatMapChartStyles } from './useHeatMapChartStyles.styles';
-import { Legends } from '../Legends/index';
-import { scaleLinear as d3ScaleLinear } from 'd3-scale';
-import { format as d3Format } from 'd3-format';
-import { timeFormat as d3TimeFormat } from 'd3-time-format';
-import { useImageExport } from '../../utilities/hooks';
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props = {
-    xAxisCategoryOrder: 'default',
-    yAxisCategoryOrder: 'default',
-    data: [],
-    domainValuesForColorScale: [],
-    rangeValuesForColorScale: []
-}, forwardedRef)=>{
-    const classes = 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 = useId('_HeatMap_empty');
-    const _margins = React.useRef({});
-    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
-    const arrowNavigationAttributes = useArrowNavigationGroup({
-        axis: 'grid'
-    });
-    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 === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = {
-                dStartValue: 0,
-                dEndValue: 0,
-                rStartValue: 0,
-                rEndValue: 0
-            };
-        } else {
-            domainNRangeValue = 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) ? 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) ? 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 === tokens.colorNeutralForeground1 ? tokens.colorNeutralBackground1 : 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 = tokens.colorNeutralForeground1;
-                    if ((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) {
-                        styleRules = resolveCSSVariables(cartesianChartRef.current.chartContainer, foregroundColor);
-                    }
-                    const contrastRatio = 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
-                    }, 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 /*#__PURE__*/ React.createElement("g", arrowNavigationAttributes, 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(Legends, {
-            ...legendProps,
-            legends: legends,
-            legendRef: _legendsRef
-        });
-    };
-    const _getColorScale = ()=>{
-        const { domainValuesForColorScale, rangeValuesForColorScale } = props;
-        return d3ScaleLinear().domain(domainValuesForColorScale).range(rangeValuesForColorScale);
-    };
-    const _getXIndex = (value)=>{
-        if (_xAxisType.current === XAxisTypes.DateAxis) {
-            return `${value.getTime()}`;
-        } else if (_xAxisType.current === XAxisTypes.StringAxis) {
-            return value;
-        } else if (_xAxisType.current === XAxisTypes.NumericAxis) {
-            return `${value}`;
-        } else {
-            return '';
-        }
-    };
-    const _getYIndex = (value)=>{
-        if (_yAxisType.current === YAxisType.DateAxis) {
-            return `${value.getTime()}`;
-        } else if (_yAxisType.current === YAxisType.StringAxis) {
-            return value;
-        } else if (_yAxisType.current === 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 === XAxisTypes.DateAxis) {
-                return _getStringFormattedDate(xPoint, props.xAxisDateFormatString);
-            } else if (_xAxisType.current === 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 === YAxisType.DateAxis) {
-                return _getStringFormattedDate(yPoint, props.yAxisDateFormatString);
-            } else if (_yAxisType.current === 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 === XAxisTypes.DateAxis) {
-                    datapoint.x = _getStringFormattedDate(datapoint.x, xAxisDateFormatString);
-                }
-                if (_xAxisType.current === XAxisTypes.NumericAxis) {
-                    datapoint.x = _getStringFormattedNumber(datapoint.x, xAxisNumberFormatString);
-                }
-                if (_xAxisType.current === XAxisTypes.StringAxis) {
-                    datapoint.x = _getFormattedLabelForXAxisDataPoint(datapoint.x);
-                }
-                if (_yAxisType.current === YAxisType.DateAxis) {
-                    datapoint.y = _getStringFormattedDate(datapoint.y, yAxisDateFormatString);
-                }
-                if (_yAxisType.current === YAxisType.NumericAxis) {
-                    datapoint.y = _getStringFormattedNumber(datapoint.y, yAxisNumberFormatString);
-                }
-                if (_yAxisType.current === 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 === YAxisType.DateAxis) {
-                yPoints[_getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];
-            } else if (_yAxisType.current === 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 d3TimeFormat(formatString || '%b/%d')(date);
-    };
-    const _getStringFormattedNumber = (point, formatString)=>{
-        return d3Format(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 === XAxisTypes.DateAxis || _xAxisType.current === XAxisTypes.NumericAxis) {
-                    return +a - +b;
-                } else {
-                    return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
-                }
-            });
-        }
-        return 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 === YAxisType.DateAxis || _yAxisType.current === YAxisType.NumericAxis) {
-                    return +a - +b;
-                } else {
-                    return props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
-                }
-            });
-        }
-        return sortAxisCategories(_mapCategoryToValues(true), props.yAxisCategoryOrder);
-    };
-    const _getOrderedXPoints = (xPoints)=>{
-        if (!_shouldOrderXAxisLabelsByCategoryOrder()) {
-            return xPoints.sort((a, b)=>{
-                if (_xAxisType.current === XAxisTypes.StringAxis) {
-                    return props.sortOrder === 'none' ? 0 : a.x.toLowerCase() > b.x.toLowerCase() ? 1 : -1;
-                } else if (_xAxisType.current === XAxisTypes.DateAxis) {
-                    return a.x.getTime() - b.x.getTime();
-                } else if (_xAxisType.current === 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 === XAxisTypes.StringAxis && props.xAxisCategoryOrder !== 'default';
-    };
-    const _shouldOrderYAxisLabelsByCategoryOrder = ()=>{
-        return _yAxisType.current === 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 = getTypeOfAxis(x, true);
-    _yAxisType.current = 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,
-        ...getAccessibleDataObject(callOutAccessibilityData, 'text', false),
-        styles: {
-            calloutContentRoot: classes.calloutContentRoot
-        }
-    };
-    const tickParams = {
-        tickValues: props.tickValues,
-        tickFormat: props.tickFormat
-    };
-    return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
-        ...props,
-        chartTitle: _getChartTitle(),
-        points: data,
-        chartType: ChartTypes.HeatMapChart,
-        xAxisType: XAxisTypes.StringAxis,
-        yAxisType: YAxisType.StringAxis,
-        calloutProps: calloutProps,
-        createYAxis: createNumericYAxis,
-        datasetForXAxisDomain: _stringXAxisDataPoints.current,
-        stringDatasetForYAxisDomain: _stringYAxisDataPoints.current,
-        createStringYAxis: 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'
-    });
-});