@fluentui/react-charting 5.12.22 → 5.12.25

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

@@ -1,145 +0,0 @@
-import { IAccessibilityProps } from '../../index';
-import * as React from 'react';
-import { IHeatMapChartProps } from './HeatMapChart.types';
-import { Target } from '@fluentui/react';
-export interface IHeatMapChartState {
-    /**
-     * determines if the legend any of the legend is selected or not
-     * @default false
-     */
-    isLegendSelected: boolean;
-    /**
-     * contains the seleted legend string
-     */
-    activeLegend: string;
-    /**
-     * determines if the legend is hovered or not
-     * @default false
-     */
-    isLegendHovered: boolean;
-    /**
-     * 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, this functionality
-     * should happen only when there no legend Selected
-     * @param legendTitle
-     */
-    private _onLegendHover;
-    /**
-     * when the mouse is out from the legend , we need
-     * to show the graph in initial mode. isLegendFocused will
-     * be useful at the scenario where mouseout happend for
-     * the legends which are in overflow card
-     * @param isLegendFocused
-     */
-    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;
-}

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

@@ -1,501 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeatMapChartBase = void 0;
-var tslib_1 = require("tslib");
-var index_1 = require("../../index");
-var d3_scale_1 = require("d3-scale");
-var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
-var react_focus_1 = require("@fluentui/react-focus");
-var Callout_1 = require("@fluentui/react/lib-commonjs/Callout");
-var React = require("react");
-var index_2 = require("../Legends/index");
-var utilities_1 = require("../../utilities/utilities");
-var d3_format_1 = require("d3-format");
-var d3TimeFormat = require("d3-time-format");
-var getClassNames = Utilities_1.classNamesFunction();
-var HeatMapChartBase = /** @class */ (function (_super) {
-    tslib_1.__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 shouldHighlight = true;
-            if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
-                shouldHighlight = legendTitle === _this.state.activeLegend;
-            }
-            return shouldHighlight ? '1' : '0.1';
-        };
-        _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,
-                isCalloutVisible: true,
-                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,
-                    isCalloutVisible: true,
-                    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", tslib_1.__assign({ key: id }, (_this.state.calloutId && {
-                        'aria-labelledby': "" + _this.state.calloutId,
-                    }), { "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 + ")" }, utilities_1.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, this functionality
-         * should happen only when there no legend Selected
-         * @param legendTitle
-         */
-        _this._onLegendHover = function (legendTitle) {
-            if (_this.state.isLegendSelected === false) {
-                _this.setState({
-                    activeLegend: legendTitle,
-                    isLegendHovered: true,
-                });
-            }
-        };
-        /**
-         * when the mouse is out from the legend , we need
-         * to show the graph in initial mode. isLegendFocused will
-         * be useful at the scenario where mouseout happend for
-         * the legends which are in overflow card
-         * @param isLegendFocused
-         */
-        _this._onLegendLeave = function (isLegendFocused) {
-            if (!!isLegendFocused || _this.state.isLegendSelected === false) {
-                _this.setState({
-                    activeLegend: '',
-                    isLegendHovered: false,
-                    isLegendSelected: isLegendFocused ? false : _this.state.isLegendSelected,
-                });
-            }
-        };
-        /**
-         * @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, then check if the consumer has clicked already
-             * seleceted legend if yes un-select the legend, else
-             * set the acitve legend state to legendTitle
-             *
-             * if legend is not alredy selceted, simply set the isLegendSelected to true
-             * and the active legend to the legendTitle of selected legend
-             */
-            if (_this.state.isLegendSelected) {
-                if (_this.state.activeLegend === legendTitle) {
-                    _this.setState({
-                        activeLegend: '',
-                        isLegendSelected: false,
-                    });
-                }
-                else {
-                    _this.setState({ activeLegend: legendTitle });
-                }
-            }
-            else {
-                _this.setState({
-                    activeLegend: legendTitle,
-                    isLegendSelected: true,
-                    isLegendHovered: false,
-                });
-            }
-        };
-        _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._onLegendHover(item.legend);
-                    },
-                    onMouseOutAction: function (isLegendSelected) {
-                        _this._onLegendLeave(isLegendSelected);
-                    },
-                };
-                legends.push(legend);
-            });
-            return React.createElement(index_2.Legends, tslib_1.__assign({}, legendProps, { legends: legends }));
-        };
-        _this._getColorScale = function () {
-            var _a = _this.props, domainValuesForColorScale = _a.domainValuesForColorScale, rangeValuesForColorScale = _a.rangeValuesForColorScale;
-            return d3_scale_1.scaleLinear()
-                .domain(domainValuesForColorScale)
-                .range(rangeValuesForColorScale);
-        };
-        _this._getXIndex = function (value) {
-            if (_this._xAxisType === utilities_1.XAxisTypes.DateAxis) {
-                return "" + value.getTime();
-            }
-            else if (_this._xAxisType === utilities_1.XAxisTypes.StringAxis) {
-                return value;
-            }
-            else if (_this._xAxisType === utilities_1.XAxisTypes.NumericAxis) {
-                return "" + value;
-            }
-            else {
-                return '';
-            }
-        };
-        _this._getYIndex = function (value) {
-            if (_this._yAxisType === utilities_1.YAxisType.DateAxis) {
-                return "" + value.getTime();
-            }
-            else if (_this._yAxisType === utilities_1.YAxisType.StringAxis) {
-                return value;
-            }
-            else if (_this._yAxisType === utilities_1.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(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]), [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 === utilities_1.XAxisTypes.StringAxis) {
-                        return 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["" + _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 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 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 d3TimeFormat.timeFormat(formatString || '%b/%d')(date);
-        };
-        _this._getStringFormattedNumber = function (point, formatString) {
-            return 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,
-            });
-        };
-        var _a = _this._getXandY(), x = _a.x, y = _a.y;
-        _this._xAxisType = utilities_1.getTypeOfAxis(x, true);
-        _this._yAxisType = utilities_1.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 = Utilities_1.memoizeFunction(function (data, xDate, xNum, yDate, yNum) { return _this._createNewDataSet(data, xDate, xNum, yDate, yNum); });
-        _this.state = {
-            isLegendSelected: false,
-            activeLegend: '',
-            isLegendHovered: false,
-            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 = 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 }), 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 });
-        return (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { points: data, chartType: utilities_1.ChartTypes.HeatMapChart, xAxisType: utilities_1.XAxisTypes.StringAxis, yAxisType: utilities_1.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: react_focus_1.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));
-exports.HeatMapChartBase = HeatMapChartBase;
-//# sourceMappingURL=HeatMapChart.base.js.map