@fluentui/react-charts 0.0.0-nightly-20250423-1342.1 → 0.0.0-nightly-20250423-1415.1

package/lib/components/HeatMapChart/HeatMapChart.js

@@ -0,0 +1,588 @@
+import * as React from 'react';
+import { ChartTypes, convertToLocaleString, getAccessibleDataObject, getColorContrast, getTypeOfAxis, resolveCSSVariables, XAxisTypes, YAxisType } from '../../utilities/index';
+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';
+export const HeatMapChart = /*#__PURE__*/ React.forwardRef((props, 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();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const _xAxisScale = React.useRef();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const _yAxisScale = React.useRef();
+    const _xAxisType = React.useRef();
+    const _yAxisType = React.useRef();
+    const _calloutAnchorPoint = React.useRef(null);
+    const _emptyChartId = useId('_HeatMap_empty');
+    const _margins = React.useRef({});
+    const cartesianChartRef = React.useRef(null);
+    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
+    });
+    React.useImperativeHandle(props.componentRef, ()=>{
+        var _cartesianChartRef_current;
+        var _cartesianChartRef_current_chartContainer;
+        return {
+            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null
+        };
+    }, []);
+    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
+                    }, convertToLocaleString(dataPointObject.rectText, props.culture)));
+                    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(Legends, {
+            ...legendProps,
+            legends: legends
+        });
+    };
+    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 = 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;
+            }
+        });
+        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 = 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;
+            }
+        });
+        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].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;
+                }
+            }).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 this._stringYAxisDatapoints, points will be stored in
+       * string format. and in here `yPoint` are not so we need to change, so that
+       * function `this._createRectangles` should work perfetcly while looping, and  if we don't change
+       * then `this._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 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)
+    };
+    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,
+        datasetForXAxisDomain: _stringXAxisDataPoints.current,
+        stringDatasetForYAxisDomain: _stringYAxisDataPoints.current,
+        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.yScale;
+            return _createRectangles();
+        }
+    }) : /*#__PURE__*/ React.createElement("div", {
+        id: _emptyChartId,
+        role: 'alert',
+        style: {
+            opacity: '0'
+        },
+        "aria-label": 'Graph has no data to display'
+    });
+});