@fluentui/react-charting 5.16.24 → 5.16.26

package/lib/components/HeatMapChart/HeatMapChart.base.d.ts

@@ -0,0 +1,147 @@
+import { IAccessibilityProps } from '../../index';
+import * as React from 'react';
+import { IHeatMapChartProps } from './HeatMapChart.types';
+import { Target } from '@fluentui/react';
+export interface IHeatMapChartState {
+    /**
+     * contains the selected legend string
+     */
+    selectedLegend: string;
+    /**
+     * contains the hovered legend string
+     */
+    activeLegend: string;
+    /**
+     * determines wethere to show or hide the callout
+     * @default false
+     */
+    isCalloutVisible: boolean;
+    /**
+     * y value to be shown in callout
+     */
+    calloutYValue: string;
+    /**
+     * legend title to be shown in callout
+     */
+    calloutLegend: string;
+    /**
+     * color of the text in the callout
+     */
+    calloutTextColor: string;
+    /**
+     * The target that the Callout should try to position itself based on
+     */
+    target: Target;
+    /**
+     * ratio to show in the callout
+     */
+    ratio: [number, number] | null;
+    /**
+     * description message to show in the callout
+     */
+    descriptionMessage: string;
+    /**
+     * id to give to callout for accesiblity purpose
+     */
+    calloutId: string;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export declare class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatMapChartState> {
+    private _classNames;
+    private _stringXAxisDataPoints;
+    private _stringYAxisDataPoints;
+    private _createSet;
+    private _dataSet;
+    private _colorScale;
+    private _xAxisScale;
+    private _yAxisScale;
+    /**
+     * This array contains ref for all the rectangles
+     * drawn inside the chard
+     */
+    private _rectRefArray;
+    private _xAxisType;
+    private _yAxisType;
+    private _calloutAnchorPoint;
+    constructor(props: IHeatMapChartProps);
+    render(): React.ReactNode;
+    private _getXandY;
+    private _getOpacity;
+    private _rectRefCallback;
+    private _onRectFocus;
+    private _onRectMouseOver;
+    private _onRectBlurOrMouseOut;
+    private _handleChartMouseLeave;
+    /**
+     * This is the function which is responsible for
+     * drawing the rectangle in the graph and also
+     * attaching dom events to that rectangles
+     */
+    private _createRectangles;
+    /**
+     * 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
+     */
+    private _onLegendHover;
+    /**
+     * when the mouse is out from the legend , we need
+     * to show the graph in initial mode.
+     */
+    private _onLegendLeave;
+    /**
+     * @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
+     */
+    private _onLegendClick;
+    private _createLegendBars;
+    private _getColorScale;
+    private _getXIndex;
+    private _getYIndex;
+    /**
+     * 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
+     */
+    private _createNewDataSet;
+    /**
+     * 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
+     */
+    private _getXAxisDataPoints;
+    /**
+     * 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
+     */
+    private _getYAxisDataPoints;
+    private _getStringFormattedDate;
+    private _getStringFormattedNumber;
+    private _getFormattedLabelForXAxisDataPoint;
+    private _getFormattedLabelForYAxisDataPoint;
+    private _closeCallout;
+    /**
+     * 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
+     */
+    private _legendHighlighted;
+    /**
+     * This function checks if none of the legends is selected or hovered.
+     */
+    private _noLegendHighlighted;
+    private _getAriaLabel;
+}

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

@@ -0,0 +1,498 @@
+import { __assign, __extends, __spreadArray } from "tslib";
+import { CartesianChart, } from '../../index';
+import { scaleLinear as d3ScaleLinear } from 'd3-scale';
+import { classNamesFunction, 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 { ChartTypes, convertToLocaleString, getAccessibleDataObject, XAxisTypes, YAxisType, getTypeOfAxis, } from '../../utilities/utilities';
+import { format as d3Format } from 'd3-format';
+import * as d3TimeFormat from 'd3-time-format';
+var getClassNames = classNamesFunction();
+var HeatMapChartBase = /** @class */ (function (_super) {
+    __extends(HeatMapChartBase, _super);
+    function HeatMapChartBase(props) {
+        var _this = _super.call(this, props) || this;
+        /**
+         * This array contains ref for all the rectangles
+         * drawn inside the chard
+         */
+        _this._rectRefArray = {};
+        _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._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: "" + data.rectText,
+                calloutTextColor: _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: "" + data.rectText,
+                    calloutTextColor: _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 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, index1) {
+                /**
+                 * dataPointObject is an object where it contains information on single
+                 * data point such as x, y , value, rectText property of the rectangle
+                 */
+                _this._dataSet[yAxisDataPoint].forEach(function (dataPointObject, index2) {
+                    var id = "" + index1 + index2;
+                    var rectElement = (React.createElement("g", { key: id, role: "img", "aria-label": _this._getAriaLabel(dataPointObject), "data-is-focusable": true, fillOpacity: _this._getOpacity(dataPointObject.legend), transform: "translate(" + _this._xAxisScale(dataPointObject.x) + ", " + _this._yAxisScale(dataPointObject.y) + ")", ref: function (gElement) {
+                            _this._rectRefCallback(gElement, id, dataPointObject);
+                        }, onFocus: _this._onRectFocus.bind(_this, id, dataPointObject), onBlur: _this._onRectBlurOrMouseOut, onMouseOver: _this._onRectMouseOver.bind(_this, id, dataPointObject), onMouseOut: _this._onRectBlurOrMouseOut },
+                        React.createElement("rect", { fill: _this._colorScale(dataPointObject.value), width: _this._xAxisScale.bandwidth(), height: _this._yAxisScale.bandwidth(), onClick: dataPointObject.onClick }),
+                        React.createElement("text", { dominantBaseline: 'middle', textAnchor: 'middle', className: _this._classNames.text, transform: "translate(" + _this._xAxisScale.bandwidth() / 2 + ", " + _this._yAxisScale.bandwidth() / 2 + ")" }, convertToLocaleString(dataPointObject.rectText, _this.props.culture))));
+                    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
+         */
+        _this._onLegendHover = function (legendTitle) {
+            _this.setState({
+                activeLegend: legendTitle,
+            });
+        };
+        /**
+         * when the mouse is out from the legend , we need
+         * to show the graph in initial mode.
+         */
+        _this._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
+         */
+        _this._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,
+                });
+            }
+        };
+        _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 }));
+        };
+        _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 "" + value.getTime();
+            }
+            else if (_this._xAxisType === XAxisTypes.StringAxis) {
+                return value;
+            }
+            else if (_this._xAxisType === XAxisTypes.NumericAxis) {
+                return "" + value;
+            }
+            else {
+                return '';
+            }
+        };
+        _this._getYIndex = function (value) {
+            if (_this._yAxisType === YAxisType.DateAxis) {
+                return "" + value.getTime();
+            }
+            else if (_this._yAxisType === YAxisType.StringAxis) {
+                return value;
+            }
+            else if (_this._yAxisType === YAxisType.NumericAxis) {
+                return "" + 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]), [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(function (item) {
+                yPoints[item]
+                    .sort(function (a, b) {
+                    if (_this._xAxisType === XAxisTypes.StringAxis) {
+                        return 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["" + _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 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 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.timeFormat(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 ? point.ratio[0] + "/" + point.ratio[1] : point.rectText || point.value;
+            var description = point.descriptionMessage;
+            return (((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) ||
+                xValue + ", " + yValue + ". " + legend + ", " + zValue + "." + (description ? " " + description + "." : ''));
+        };
+        var _a = _this._getXandY(), x = _a.x, y = _a.y;
+        _this._xAxisType = getTypeOfAxis(x, true);
+        _this._yAxisType = getTypeOfAxis(y, false);
+        /**
+         * 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: '',
+            activeLegend: '',
+            isCalloutVisible: false,
+            target: null,
+            calloutLegend: '',
+            calloutTextColor: '',
+            calloutYValue: '',
+            ratio: null,
+            descriptionMessage: '',
+            calloutId: '',
+        };
+        return _this;
+    }
+    HeatMapChartBase.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, data = _a.data, xAxisDateFormatString = _a.xAxisDateFormatString, xAxisNumberFormatString = _a.xAxisNumberFormatString, yAxisDateFormatString = _a.yAxisDateFormatString, yAxisNumberFormatString = _a.yAxisNumberFormatString;
+        this._colorScale = this._getColorScale();
+        var _b = this._createSet(data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString), dataSet = _b.dataSet, xAxisPoints = _b.xAxisPoints, yAxisPoints = _b.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 });
+        return (React.createElement(CartesianChart, __assign({}, this.props, { points: data, chartType: ChartTypes.HeatMapChart, xAxisType: XAxisTypes.StringAxis, yAxisType: YAxisType.StringAxis, calloutProps: calloutProps, chartHoverProps: chartHoverProps, styles: this._classNames.subComponentStyles.cartesianStyles, datasetForXAxisDomain: this._stringXAxisDataPoints, stringDatasetForYAxisDomain: this._stringYAxisDataPoints, xAxisTickCount: this._stringXAxisDataPoints.length, xAxistickSize: 0, xAxisPadding: 0.02, yAxisPadding: 0.02, svgFocusZoneProps: {
+                direction: FocusZoneDirection.bidirectional,
+            }, legendBars: this._createLegendBars(), onChartMouseLeave: this._handleChartMouseLeave, 
+            /* 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();
+            } })));
+    };
+    return HeatMapChartBase;
+}(React.Component));
+export { HeatMapChartBase };
+//# sourceMappingURL=HeatMapChart.base.js.map