@fluentui/react-charting 5.23.61 → 5.23.63

package/lib-amd/components/HeatMapChart/HeatMapChart.base.js

@@ -1,588 +0,0 @@
-define(["require", "exports", "tslib", "../../components/CommonComponents/index", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react-focus", "@fluentui/react/lib/Callout", "react", "../Legends/index", "../../utilities/locale-util", "../../utilities/utilities", "d3-format", "d3-time-format", "../../utilities/colors", "../../utilities/image-export-utils"], function (require, exports, tslib_1, index_1, d3_scale_1, Utilities_1, react_focus_1, Callout_1, React, index_2, locale_util_1, utilities_1, d3_format_1, d3_time_format_1, colors_1, image_export_utils_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.HeatMapChartBase = void 0;
-    var getClassNames = (0, Utilities_1.classNamesFunction)();
-    var HeatMapChartBase = /** @class */ (function (_super) {
-        tslib_1.__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 (0, image_export_utils_1.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, (0, Utilities_1.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 === utilities_1.XAxisTypes.NumericAxis || xAxisType === utilities_1.XAxisTypes.DateAxis) {
-                    domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
-                }
-                else {
-                    domainNRangeValue = (0, utilities_1.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 = (0, utilities_1.resolveCSSVariables)(_this.chartContainer, foregroundColor);
-                            }
-                            var contrastRatio = (0, colors_1.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 }, (0, locale_util_1.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(index_2.Legends, tslib_1.__assign({}, legendProps, { legends: legends, ref: _this._legendsRef }));
-            };
-            _this._getColorScale = function () {
-                var _a = _this.props, domainValuesForColorScale = _a.domainValuesForColorScale, rangeValuesForColorScale = _a.rangeValuesForColorScale;
-                return (0, d3_scale_1.scaleLinear)()
-                    .domain(domainValuesForColorScale)
-                    .range(rangeValuesForColorScale);
-            };
-            _this._getXIndex = function (value) {
-                if (_this._xAxisType === utilities_1.XAxisTypes.DateAxis) {
-                    return "".concat(value.getTime());
-                }
-                else if (_this._xAxisType === utilities_1.XAxisTypes.StringAxis) {
-                    return value;
-                }
-                else if (_this._xAxisType === utilities_1.XAxisTypes.NumericAxis) {
-                    return "".concat(value);
-                }
-                else {
-                    return '';
-                }
-            };
-            _this._getYIndex = function (value) {
-                if (_this._yAxisType === utilities_1.YAxisType.DateAxis) {
-                    return "".concat(value.getTime());
-                }
-                else if (_this._yAxisType === utilities_1.YAxisType.StringAxis) {
-                    return value;
-                }
-                else if (_this._yAxisType === utilities_1.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(tslib_1.__assign(tslib_1.__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] = tslib_1.__spreadArray(tslib_1.__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 === utilities_1.XAxisTypes.StringAxis) {
-                            return _this.props.sortOrder === 'none'
-                                ? 0
-                                : a.x.toLowerCase() > b.x.toLowerCase()
-                                    ? 1
-                                    : -1;
-                        }
-                        else if (_this._xAxisType === utilities_1.XAxisTypes.DateAxis) {
-                            return a.x.getTime() - b.x.getTime();
-                        }
-                        else if (_this._xAxisType === utilities_1.XAxisTypes.NumericAxis) {
-                            return +a.x > +b.x ? 1 : -1;
-                        }
-                        else {
-                            return a.x > b.x ? 1 : -1;
-                        }
-                    })
-                        .forEach(function (datapoint) {
-                        if (_this._xAxisType === utilities_1.XAxisTypes.DateAxis) {
-                            datapoint.x = _this._getStringFormattedDate(datapoint.x, xAxisDateFormatString);
-                        }
-                        if (_this._xAxisType === utilities_1.XAxisTypes.NumericAxis) {
-                            datapoint.x = _this._getStringFormattedNumber(datapoint.x, xAxisNumberFormatString);
-                        }
-                        if (_this._xAxisType === utilities_1.XAxisTypes.StringAxis) {
-                            datapoint.x = _this._getFormattedLabelForXAxisDataPoint(datapoint.x);
-                        }
-                        if (_this._yAxisType === utilities_1.YAxisType.DateAxis) {
-                            datapoint.y = _this._getStringFormattedDate(datapoint.y, yAxisDateFormatString);
-                        }
-                        if (_this._yAxisType === utilities_1.YAxisType.NumericAxis) {
-                            datapoint.y = _this._getStringFormattedNumber(datapoint.y, yAxisNumberFormatString);
-                        }
-                        if (_this._yAxisType === utilities_1.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 === utilities_1.YAxisType.DateAxis) {
-                        yPoints[_this._getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];
-                    }
-                    else if (_this._yAxisType === utilities_1.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 === utilities_1.XAxisTypes.DateAxis || _this._xAxisType === utilities_1.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 === utilities_1.XAxisTypes.DateAxis) {
-                        return _this._getStringFormattedDate(xPoint, _this.props.xAxisDateFormatString);
-                    }
-                    else if (_this._xAxisType === utilities_1.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 === utilities_1.YAxisType.DateAxis || _this._yAxisType === utilities_1.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 === utilities_1.YAxisType.DateAxis) {
-                        return _this._getStringFormattedDate(yPoint, _this.props.yAxisDateFormatString);
-                    }
-                    else if (_this._yAxisType === utilities_1.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 (0, d3_time_format_1.timeFormat)(formatString || '%b/%d')(date);
-            };
-            _this._getStringFormattedNumber = function (point, formatString) {
-                return (0, d3_format_1.format)(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. ");
-            };
-            (0, Utilities_1.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 = (0, Utilities_1.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 = (0, Utilities_1.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 = (0, utilities_1.getTypeOfAxis)(x, true);
-            this._yAxisType = (0, utilities_1.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 = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__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: Callout_1.DirectionalHint.topAutoEdge, onDismiss: this._closeCallout }), (0, utilities_1.getAccessibleDataObject)(this.state.callOutAccessibilityData, 'text', false)), { preventDismissOnLostFocus: true });
-            var chartHoverProps = tslib_1.__assign(tslib_1.__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(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: data, chartType: utilities_1.ChartTypes.HeatMapChart, xAxisType: utilities_1.XAxisTypes.StringAxis, yAxisType: utilities_1.YAxisType.StringAxis, calloutProps: calloutProps, createYAxis: utilities_1.createNumericYAxis, chartHoverProps: chartHoverProps, styles: this._classNames.subComponentStyles.cartesianStyles, datasetForXAxisDomain: this._stringXAxisDataPoints, stringDatasetForYAxisDomain: this._stringYAxisDataPoints, createStringYAxis: utilities_1.createStringYAxis, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, getmargins: this._getMargins, xAxisTickCount: this._stringXAxisDataPoints.length, xAxistickSize: 0, xAxisPadding: 0.02, yAxisPadding: 0.02, svgFocusZoneProps: {
-                    direction: react_focus_1.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));
-    exports.HeatMapChartBase = HeatMapChartBase;
-});
-//# sourceMappingURL=HeatMapChart.base.js.map