import { __assign, __extends, __spreadArray } from "tslib";
import { CartesianChart } from '../../components/CommonComponents/index';
import { scaleLinear as d3ScaleLinear } from 'd3-scale';
import { classNamesFunction, getId, getRTL, initializeComponentRef, memoizeFunction, } from '@fluentui/react/lib/Utilities';
import { FocusZoneDirection } from '@fluentui/react-focus';
import { DirectionalHint } from '@fluentui/react/lib/Callout';
import * as React from 'react';
import { Legends } from '../Legends/index';
import { convertToLocaleString } from '../../utilities/locale-util';
import { ChartTypes, createNumericYAxis, getAccessibleDataObject, XAxisTypes, YAxisType, getTypeOfAxis, domainRangeOfXStringAxis, createStringYAxis, resolveCSSVariables, } from '../../utilities/utilities';
import { format as d3Format } from 'd3-format';
import { timeFormat as d3TimeFormat } from 'd3-time-format';
import { getColorContrast } from '../../utilities/colors';
import { toImage } from '../../utilities/image-export-utils';
var getClassNames = classNamesFunction();
var HeatMapChartBase = /** @class */ (function (_super) {
    __extends(HeatMapChartBase, _super);
    function HeatMapChartBase(props) {
        var _a, _b;
        var _this = _super.call(this, props) || this;
        /**
         * This array contains ref for all the rectangles
         * drawn inside the chard
         */
        _this._rectRefArray = {};
        _this.toImage = function (opts) {
            var _a, _b;
            return toImage((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, getRTL(), opts);
        };
        _this._getMinMaxOfYAxis = function () {
            return { startValue: 0, endValue: 0 };
        };
        _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
            var domainNRangeValue;
            if (xAxisType === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {
                domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
            }
            else {
                domainNRangeValue = domainRangeOfXStringAxis(_this.margins, width, isRTL);
            }
            return domainNRangeValue;
        };
        _this._getXandY = function () {
            var x = '';
            var y = '';
            _this.props.data.forEach(function (item) {
                if (item.data && item.data.length > 0) {
                    x = item.data[0].x;
                    y = item.data[0].y;
                    return { x: x, y: y };
                }
            });
            return { x: x, y: y };
        };
        _this._getMargins = function (margins) {
            _this.margins = margins;
        };
        _this._getOpacity = function (legendTitle) {
            var opacity = _this._legendHighlighted(legendTitle) || _this._noLegendHighlighted() ? '1' : '0.1';
            return opacity;
        };
        _this._rectRefCallback = function (rectElement, index, dataPointObject) {
            _this._rectRefArray[index] = { data: dataPointObject, refElement: rectElement };
        };
        _this._onRectFocus = function (id, data) {
            _this.setState({
                target: _this._rectRefArray[id].refElement,
                /** Show the callout if highlighted rectangle is focused and Hide it if unhighlighted rectangle is focused */
                isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === data.legend,
                calloutYValue: "".concat(data.rectText),
                calloutTextColor: Number.isNaN(data.value)
                    ? _this.props.theme.semanticColors.bodyText
                    : _this._colorScale(data.value),
                calloutLegend: data.legend,
                ratio: data.ratio || null,
                descriptionMessage: data.descriptionMessage || '',
                calloutId: id,
                callOutAccessibilityData: data.callOutAccessibilityData,
            });
        };
        _this._onRectMouseOver = function (id, data, mouseEvent) {
            mouseEvent.persist();
            if (_this._calloutAnchorPoint !== data) {
                _this._calloutAnchorPoint = data;
                _this.setState({
                    target: _this._rectRefArray[id].refElement,
                    /** Show the callout if highlighted rectangle is hovered and Hide it if unhighlighted rectangle is hovered */
                    isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === data.legend,
                    calloutYValue: "".concat(data.rectText),
                    calloutTextColor: Number.isNaN(data.value)
                        ? _this.props.theme.semanticColors.bodyText
                        : _this._colorScale(data.value),
                    calloutLegend: data.legend,
                    ratio: data.ratio || null,
                    descriptionMessage: data.descriptionMessage || '',
                    calloutId: id,
                    callOutAccessibilityData: data.callOutAccessibilityData,
                });
            }
        };
        _this._onRectBlurOrMouseOut = function () {
            /**/
        };
        _this._handleChartMouseLeave = function () {
            _this._calloutAnchorPoint = null;
            _this.setState({
                isCalloutVisible: false,
            });
        };
        _this._getInvertedTextColor = function (color) {
            return color === _this.props.theme.semanticColors.bodyText
                ? _this.props.theme.semanticColors.bodyBackground
                : _this.props.theme.semanticColors.bodyText;
        };
        /**
         * This is the function which is responsible for
         * drawing the rectangle in the graph and also
         * attaching dom events to that rectangles
         */
        _this._createRectangles = function () {
            var rectangles = [];
            var yAxisDataPoints = _this._stringYAxisDataPoints.slice().reverse();
            /**
             * yAxisDataPoint is noting but the DataPoint
             * which will be rendered on the y-axis
             */
            yAxisDataPoints.forEach(function (yAxisDataPoint) {
                var index = 0;
                _this._stringXAxisDataPoints.forEach(function (xAxisDataPoint) {
                    var _a, _b;
                    var rectElement;
                    var id = "x".concat(xAxisDataPoint, "y").concat(yAxisDataPoint);
                    if (((_a = _this._dataSet[yAxisDataPoint][index]) === null || _a === void 0 ? void 0 : _a.x) === xAxisDataPoint &&
                        typeof ((_b = _this._dataSet[yAxisDataPoint][index]) === null || _b === void 0 ? void 0 : _b.value) === 'number') {
                        /**
                         * dataPointObject is an object where it contains information on single
                         * data point such as x, y , value, rectText property of the rectangle
                         */
                        var dataPointObject_1 = _this._dataSet[yAxisDataPoint][index];
                        var styleRules = '';
                        var foregroundColor = _this.props.theme.semanticColors.bodyText;
                        if (_this.chartContainer) {
                            styleRules = resolveCSSVariables(_this.chartContainer, foregroundColor);
                        }
                        var contrastRatio = getColorContrast(styleRules, _this._colorScale(dataPointObject_1.value));
                        if (contrastRatio < 3) {
                            foregroundColor = _this._getInvertedTextColor(foregroundColor);
                        }
                        rectElement = (React.createElement("g", { key: id, role: "img", "aria-label": _this._getAriaLabel(dataPointObject_1), "data-is-focusable": _this._legendHighlighted(dataPointObject_1.legend) || _this._noLegendHighlighted(), fillOpacity: _this._getOpacity(dataPointObject_1.legend), transform: "translate(".concat(_this._xAxisScale(dataPointObject_1.x), ", ").concat(_this._yAxisScale(dataPointObject_1.y), ")"), ref: function (gElement) {
                                _this._rectRefCallback(gElement, id, dataPointObject_1);
                            }, onFocus: _this._onRectFocus.bind(_this, id, dataPointObject_1), onBlur: _this._onRectBlurOrMouseOut, onMouseOver: _this._onRectMouseOver.bind(_this, id, dataPointObject_1), onMouseOut: _this._onRectBlurOrMouseOut },
                            React.createElement("rect", { fill: _this._colorScale(dataPointObject_1.value), width: _this._xAxisScale.bandwidth(), height: _this._yAxisScale.bandwidth(), onClick: dataPointObject_1.onClick }),
                            React.createElement("text", { dominantBaseline: 'middle', textAnchor: 'middle', className: _this._classNames.text, transform: "translate(".concat(_this._xAxisScale.bandwidth() / 2, ", ").concat(_this._yAxisScale.bandwidth() / 2, ")"), fill: foregroundColor }, convertToLocaleString(dataPointObject_1.rectText, _this.props.culture))));
                        index++;
                    }
                    else {
                        var dataPointObject_2 = {
                            x: xAxisDataPoint,
                            y: yAxisDataPoint,
                            value: NaN,
                            rectText: 'No data available',
                            legend: '',
                        };
                        rectElement = (React.createElement("g", { key: id, role: "img", "aria-label": _this._getAriaLabel(dataPointObject_2), "data-is-focusable": _this._noLegendHighlighted(), transform: "translate(".concat(_this._xAxisScale(dataPointObject_2.x), ", ").concat(_this._yAxisScale(dataPointObject_2.y), ")"), ref: function (gElement) {
                                _this._rectRefCallback(gElement, id, dataPointObject_2);
                            }, onFocus: _this._onRectFocus.bind(_this, id, dataPointObject_2), onBlur: _this._onRectBlurOrMouseOut, onMouseOver: _this._onRectMouseOver.bind(_this, id, dataPointObject_2), onMouseOut: _this._onRectBlurOrMouseOut },
                            React.createElement("rect", { fill: _this.props.theme.semanticColors.bodyBackground, width: _this._xAxisScale.bandwidth(), height: _this._yAxisScale.bandwidth() })));
                    }
                    rectangles.push(rectElement);
                });
            });
            return rectangles;
        };
        _this._createLegendBars = function () {
            var _a = _this.props, data = _a.data, legendProps = _a.legendProps;
            var legends = [];
            data.forEach(function (item) {
                var legend = {
                    title: item.legend,
                    color: _this._colorScale(item.value),
                    action: function () {
                        _this._onLegendClick(item.legend);
                    },
                    hoverAction: function () {
                        _this._handleChartMouseLeave();
                        _this._onLegendHover(item.legend);
                    },
                    onMouseOutAction: function () {
                        _this._onLegendLeave();
                    },
                };
                legends.push(legend);
            });
            return React.createElement(Legends, __assign({}, legendProps, { legends: legends, ref: _this._legendsRef }));
        };
        _this._getColorScale = function () {
            var _a = _this.props, domainValuesForColorScale = _a.domainValuesForColorScale, rangeValuesForColorScale = _a.rangeValuesForColorScale;
            return d3ScaleLinear()
                .domain(domainValuesForColorScale)
                .range(rangeValuesForColorScale);
        };
        _this._getXIndex = function (value) {
            if (_this._xAxisType === XAxisTypes.DateAxis) {
                return "".concat(value.getTime());
            }
            else if (_this._xAxisType === XAxisTypes.StringAxis) {
                return value;
            }
            else if (_this._xAxisType === XAxisTypes.NumericAxis) {
                return "".concat(value);
            }
            else {
                return '';
            }
        };
        _this._getYIndex = function (value) {
            if (_this._yAxisType === YAxisType.DateAxis) {
                return "".concat(value.getTime());
            }
            else if (_this._yAxisType === YAxisType.StringAxis) {
                return value;
            }
            else if (_this._yAxisType === YAxisType.NumericAxis) {
                return "".concat(value);
            }
            else {
                return '';
            }
        };
        /**
         * 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
         */
        _this._createNewDataSet = function (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
             */
            var 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(function (item) {
                item.data.forEach(function (point) {
                    flattenData.push(__assign(__assign({}, point), { legend: item.legend }));
                });
            });
            var yPoints = {};
            var uniqueYPoints = {};
            var uniqueXPoints = {};
            flattenData.forEach(function (item) {
                var posX = _this._getXIndex(item.x);
                var posY = _this._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] = __spreadArray(__spreadArray([], yPoints[posY], true), [item], false);
                }
                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(function (item) {
                yPoints[item]
                    .sort(function (a, b) {
                    if (_this._xAxisType === XAxisTypes.StringAxis) {
                        return _this.props.sortOrder === 'none'
                            ? 0
                            : a.x.toLowerCase() > b.x.toLowerCase()
                                ? 1
                                : -1;
                    }
                    else if (_this._xAxisType === XAxisTypes.DateAxis) {
                        return a.x.getTime() - b.x.getTime();
                    }
                    else if (_this._xAxisType === XAxisTypes.NumericAxis) {
                        return +a.x > +b.x ? 1 : -1;
                    }
                    else {
                        return a.x > b.x ? 1 : -1;
                    }
                })
                    .forEach(function (datapoint) {
                    if (_this._xAxisType === XAxisTypes.DateAxis) {
                        datapoint.x = _this._getStringFormattedDate(datapoint.x, xAxisDateFormatString);
                    }
                    if (_this._xAxisType === XAxisTypes.NumericAxis) {
                        datapoint.x = _this._getStringFormattedNumber(datapoint.x, xAxisNumberFormatString);
                    }
                    if (_this._xAxisType === XAxisTypes.StringAxis) {
                        datapoint.x = _this._getFormattedLabelForXAxisDataPoint(datapoint.x);
                    }
                    if (_this._yAxisType === YAxisType.DateAxis) {
                        datapoint.y = _this._getStringFormattedDate(datapoint.y, yAxisDateFormatString);
                    }
                    if (_this._yAxisType === YAxisType.NumericAxis) {
                        datapoint.y = _this._getStringFormattedNumber(datapoint.y, yAxisNumberFormatString);
                    }
                    if (_this._yAxisType === YAxisType.StringAxis) {
                        datapoint.y = _this._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(function (yPoint) {
                if (_this._yAxisType === YAxisType.DateAxis) {
                    yPoints[_this._getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];
                }
                else if (_this._yAxisType === YAxisType.NumericAxis) {
                    yPoints["".concat(_this._getStringFormattedNumber(yPoint, yAxisNumberFormatString))] = yPoints[yPoint];
                }
                else {
                    yPoints[_this._getFormattedLabelForYAxisDataPoint(yPoint)] = yPoints[yPoint];
                }
            });
            /**
             * assigning new data set
             */
            var dataSet = yPoints;
            /**
             * These are the Y axis data points which will get rendered in the
             * Y axis in graph
             */
            var yAxisPoints = _this._getYAxisDataPoints(uniqueYPoints);
            /**
             * These are the x axis data points which will get rendered in the
             * x axis in the graph
             */
            var xAxisPoints = _this._getXAxisDataPoints(uniqueXPoints);
            return {
                dataSet: dataSet,
                yAxisPoints: yAxisPoints,
                xAxisPoints: xAxisPoints,
            };
        };
        /**
         * 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
         */
        _this._getXAxisDataPoints = function (points) {
            var xAxisPoints = [];
            var unFormattedXAxisDataPoints = Object.keys(points).sort(function (a, b) {
                if (_this._xAxisType === XAxisTypes.DateAxis || _this._xAxisType === XAxisTypes.NumericAxis) {
                    return +a - +b;
                }
                else {
                    return _this.props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
                }
            });
            xAxisPoints = unFormattedXAxisDataPoints.map(function (xPoint) {
                if (_this._xAxisType === XAxisTypes.DateAxis) {
                    return _this._getStringFormattedDate(xPoint, _this.props.xAxisDateFormatString);
                }
                else if (_this._xAxisType === XAxisTypes.NumericAxis) {
                    return _this._getStringFormattedNumber(xPoint, _this.props.xAxisNumberFormatString);
                }
                else {
                    return _this._getFormattedLabelForXAxisDataPoint(xPoint);
                }
            });
            return xAxisPoints;
        };
        /**
         * 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
         */
        _this._getYAxisDataPoints = function (points) {
            var yAxisPoints = [];
            var unFormattedYAxisDataPoints = Object.keys(points).sort(function (a, b) {
                if (_this._yAxisType === YAxisType.DateAxis || _this._yAxisType === YAxisType.NumericAxis) {
                    return +a - +b;
                }
                else {
                    return _this.props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
                }
            });
            yAxisPoints = unFormattedYAxisDataPoints.map(function (yPoint) {
                if (_this._yAxisType === YAxisType.DateAxis) {
                    return _this._getStringFormattedDate(yPoint, _this.props.yAxisDateFormatString);
                }
                else if (_this._yAxisType === YAxisType.NumericAxis) {
                    return _this._getStringFormattedNumber(yPoint, _this.props.yAxisNumberFormatString);
                }
                else {
                    return _this._getFormattedLabelForYAxisDataPoint(yPoint);
                }
            });
            return yAxisPoints;
        };
        _this._getStringFormattedDate = function (point, formatString) {
            var date = new Date();
            date.setTime(+point);
            return d3TimeFormat(formatString || '%b/%d')(date);
        };
        _this._getStringFormattedNumber = function (point, formatString) {
            return d3Format(formatString || '.2~s')(+point);
        };
        _this._getFormattedLabelForXAxisDataPoint = function (point) {
            var xAxisStringFormatter = _this.props.xAxisStringFormatter;
            return xAxisStringFormatter ? xAxisStringFormatter(point) : point;
        };
        _this._getFormattedLabelForYAxisDataPoint = function (point) {
            var yAxisStringFormatter = _this.props.yAxisStringFormatter;
            return yAxisStringFormatter ? yAxisStringFormatter(point) : point;
        };
        _this._closeCallout = function () {
            _this.setState({
                isCalloutVisible: false,
            });
        };
        /**
         * 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
         */
        _this._legendHighlighted = function (legendTitle) {
            return (_this.state.selectedLegend === legendTitle ||
                (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
        };
        /**
         * This function checks if none of the legends is selected or hovered.
         */
        _this._noLegendHighlighted = function () {
            return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
        };
        _this._getAriaLabel = function (point) {
            var _a;
            var xValue = point.x;
            var yValue = point.y;
            var legend = point.legend;
            var zValue = point.ratio ? "".concat(point.ratio[0], "/").concat(point.ratio[1]) : point.rectText || point.value;
            var description = point.descriptionMessage;
            return (((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) ||
                "".concat(xValue, ", ").concat(yValue, ". ").concat(legend, ", ").concat(zValue, ".") + (description ? " ".concat(description, ".") : ''));
        };
        _this._getChartTitle = function () {
            var chartTitle = _this.props.chartTitle;
            var numDataPoints = _this.props.data.reduce(function (acc, curr) { return acc + curr.data.length; }, 0);
            return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Heat map chart with ".concat(numDataPoints, " data points. ");
        };
        initializeComponentRef(_this);
        /**
         * below funciton creates a new data set from the prop
         * @data and also finds all the unique x-axis datapoints
         * and y-axis datapoints(which will render in the axis in graph)
         * we store this in a memoized function, because we want to calulate
         * this set whenever props changes.
         */
        _this._createSet = memoizeFunction(function (data, xDate, xNum, yDate, yNum) { return _this._createNewDataSet(data, xDate, xNum, yDate, yNum); });
        _this.state = {
            selectedLegend: (_b = (_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegend) !== null && _b !== void 0 ? _b : '',
            activeLegend: '',
            isCalloutVisible: false,
            target: null,
            calloutLegend: '',
            calloutTextColor: '',
            calloutYValue: '',
            ratio: null,
            descriptionMessage: '',
            calloutId: '',
        };
        _this._emptyChartId = getId('_HeatMap_empty');
        _this._cartesianChartRef = React.createRef();
        _this._legendsRef = React.createRef();
        return _this;
    }
    HeatMapChartBase.prototype.componentDidUpdate = function (prevProps) {
        var _a, _b, _c, _d;
        if (((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegend) !== ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegend)) {
            this.setState({
                selectedLegend: (_d = (_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegend) !== null && _d !== void 0 ? _d : '',
            });
        }
    };
    HeatMapChartBase.prototype.render = function () {
        var _this = this;
        var _a = this._getXandY(), x = _a.x, y = _a.y;
        this._xAxisType = getTypeOfAxis(x, true);
        this._yAxisType = getTypeOfAxis(y, false);
        var _b = this.props, data = _b.data, xAxisDateFormatString = _b.xAxisDateFormatString, xAxisNumberFormatString = _b.xAxisNumberFormatString, yAxisDateFormatString = _b.yAxisDateFormatString, yAxisNumberFormatString = _b.yAxisNumberFormatString;
        this._colorScale = this._getColorScale();
        var _c = this._createSet(data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString), dataSet = _c.dataSet, xAxisPoints = _c.xAxisPoints, yAxisPoints = _c.yAxisPoints;
        this._dataSet = dataSet;
        this._stringYAxisDataPoints = yAxisPoints;
        this._stringXAxisDataPoints = xAxisPoints;
        this._classNames = getClassNames(this.props.styles, { theme: this.props.theme });
        var calloutProps = __assign(__assign(__assign(__assign({ isBeakVisible: false, gapSpace: 8 }, this.props.calloutProps), { isCalloutVisible: this.state.isCalloutVisible, id: this.state.calloutId, YValue: this.state.calloutYValue, legend: this.state.calloutLegend, color: this.state.calloutTextColor, target: this.state.target, styles: this._classNames.subComponentStyles.calloutStyles, directionalHint: DirectionalHint.topAutoEdge, onDismiss: this._closeCallout }), getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)), { preventDismissOnLostFocus: true });
        var chartHoverProps = __assign(__assign({}, (this.state.ratio && {
            ratio: this.state.ratio,
        })), { descriptionMessage: this.state.descriptionMessage });
        var tickParams = {
            tickValues: this.props.tickValues,
            tickFormat: this.props.tickFormat,
        };
        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: data, chartType: ChartTypes.HeatMapChart, xAxisType: XAxisTypes.StringAxis, yAxisType: YAxisType.StringAxis, calloutProps: calloutProps, createYAxis: createNumericYAxis, chartHoverProps: chartHoverProps, styles: this._classNames.subComponentStyles.cartesianStyles, datasetForXAxisDomain: this._stringXAxisDataPoints, stringDatasetForYAxisDomain: this._stringYAxisDataPoints, createStringYAxis: createStringYAxis, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, getmargins: this._getMargins, xAxisTickCount: this._stringXAxisDataPoints.length, xAxistickSize: 0, xAxisPadding: 0.02, yAxisPadding: 0.02, svgFocusZoneProps: {
                direction: FocusZoneDirection.bidirectional,
            }, legendBars: this._createLegendBars(), onChartMouseLeave: this._handleChartMouseLeave, ref: this._cartesianChartRef, tickParams: tickParams, 
            /* eslint-disable react/jsx-no-bind */
            // eslint-disable-next-line react/no-children-prop
            children: function (props) {
                _this._xAxisScale = props.xScale;
                _this._yAxisScale = props.yScale;
                return _this._createRectangles();
            } }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
    };
    Object.defineProperty(HeatMapChartBase.prototype, "chartContainer", {
        get: function () {
            var _a;
            return ((_a = this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer) || null;
        },
        enumerable: false,
        configurable: true
    });
    /**
     * 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
     */
    HeatMapChartBase.prototype._onLegendHover = function (legendTitle) {
        this.setState({
            activeLegend: legendTitle,
        });
    };
    /**
     * when the mouse is out from the legend , we need
     * to show the graph in initial mode.
     */
    HeatMapChartBase.prototype._onLegendLeave = function () {
        this.setState({
            activeLegend: '',
        });
    };
    /**
     * @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
     */
    HeatMapChartBase.prototype._onLegendClick = function (legendTitle) {
        /**
         * check if the legend is already selceted,
         * if yes, un-select the legend, else
         * set the selected legend state to legendTitle
         */
        if (this.state.selectedLegend === legendTitle) {
            this.setState({
                selectedLegend: '',
            });
        }
        else {
            this.setState({
                selectedLegend: legendTitle,
            });
        }
    };
    HeatMapChartBase.prototype._isChartEmpty = function () {
        return !(this.props.data && this.props.data.length > 0);
    };
    return HeatMapChartBase;
}(React.Component));
export { HeatMapChartBase };
//# sourceMappingURL=HeatMapChart.base.js.map