@fluentui/react-charting 5.23.14 → 5.23.16

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

@@ -0,0 +1,545 @@
+import { __assign, __extends, __spreadArray } from "tslib";
+import { CartesianChart } from '../../components/CommonComponents/index';
+import { scaleLinear as d3ScaleLinear } from 'd3-scale';
+import { classNamesFunction, getId, memoizeFunction } from '@fluentui/react/lib/Utilities';
+import { FocusZoneDirection } from '@fluentui/react-focus';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
+import * as React from 'react';
+import { Legends } from '../Legends/index';
+import { convertToLocaleString } from '../../utilities/locale-util';
+import { ChartTypes, createNumericYAxis, getAccessibleDataObject, XAxisTypes, YAxisType, getTypeOfAxis, domainRangeOfXStringAxis, createStringYAxis, } from '../../utilities/utilities';
+import { format as d3Format } from 'd3-format';
+import { timeFormat 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._getMinMaxOfYAxis = function () {
+            return { startValue: 0, endValue: 0 };
+        };
+        _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+            var domainNRangeValue;
+            if (xAxisType === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {
+                domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
+            }
+            else {
+                domainNRangeValue = domainRangeOfXStringAxis(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._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 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;
+                    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) {
+                        /**
+                         * 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];
+                        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, ")") }, convertToLocaleString(dataPointObject_1.rectText, _this.props.culture))));
+                        index++;
+                    }
+                    else {
+                        var dataPointObject_2 = {
+                            x: xAxisDataPoint,
+                            y: yAxisDataPoint,
+                            value: NaN,
+                            rectText: 'No data available',
+                            legend: '',
+                        };
+                        rectElement = (React.createElement("g", { key: id, role: "img", "aria-label": _this._getAriaLabel(dataPointObject_2), "data-is-focusable": _this._noLegendHighlighted(), transform: "translate(".concat(_this._xAxisScale(dataPointObject_2.x), ", ").concat(_this._yAxisScale(dataPointObject_2.y), ")"), ref: function (gElement) {
+                                _this._rectRefCallback(gElement, id, dataPointObject_2);
+                            }, onFocus: _this._onRectFocus.bind(_this, id, dataPointObject_2), onBlur: _this._onRectBlurOrMouseOut, onMouseOver: _this._onRectMouseOver.bind(_this, id, dataPointObject_2), onMouseOut: _this._onRectBlurOrMouseOut },
+                            React.createElement("rect", { fill: _this.props.theme.semanticColors.bodyBackground, width: _this._xAxisScale.bandwidth(), height: _this._yAxisScale.bandwidth() })));
+                    }
+                    rectangles.push(rectElement);
+                });
+            });
+            return rectangles;
+        };
+        _this._createLegendBars = function () {
+            var _a = _this.props, data = _a.data, legendProps = _a.legendProps;
+            var legends = [];
+            data.forEach(function (item) {
+                var legend = {
+                    title: item.legend,
+                    color: _this._colorScale(item.value),
+                    action: function () {
+                        _this._onLegendClick(item.legend);
+                    },
+                    hoverAction: function () {
+                        _this._handleChartMouseLeave();
+                        _this._onLegendHover(item.legend);
+                    },
+                    onMouseOutAction: function () {
+                        _this._onLegendLeave();
+                    },
+                };
+                legends.push(legend);
+            });
+            return React.createElement(Legends, __assign({}, legendProps, { legends: legends }));
+        };
+        _this._getColorScale = function () {
+            var _a = _this.props, domainValuesForColorScale = _a.domainValuesForColorScale, rangeValuesForColorScale = _a.rangeValuesForColorScale;
+            return d3ScaleLinear()
+                .domain(domainValuesForColorScale)
+                .range(rangeValuesForColorScale);
+        };
+        _this._getXIndex = function (value) {
+            if (_this._xAxisType === XAxisTypes.DateAxis) {
+                return "".concat(value.getTime());
+            }
+            else if (_this._xAxisType === XAxisTypes.StringAxis) {
+                return value;
+            }
+            else if (_this._xAxisType === XAxisTypes.NumericAxis) {
+                return "".concat(value);
+            }
+            else {
+                return '';
+            }
+        };
+        _this._getYIndex = function (value) {
+            if (_this._yAxisType === YAxisType.DateAxis) {
+                return "".concat(value.getTime());
+            }
+            else if (_this._yAxisType === YAxisType.StringAxis) {
+                return value;
+            }
+            else if (_this._yAxisType === YAxisType.NumericAxis) {
+                return "".concat(value);
+            }
+            else {
+                return '';
+            }
+        };
+        /**
+         * This will create a new data set based on the prop
+         * @data
+         * We will be using This data set to contsruct our rectangles
+         * in the chart, we use this data set becuase, when we loop in this
+         * data and build the heat map, it will support accessibility as
+         * specified in the figma
+         */
+        _this._createNewDataSet = function (data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString) {
+            /**
+             * please do not destructure any of the props here,
+             * instead send them as parameter to this functions so that
+             * this functions get called whenever the prop changes
+             */
+            var flattenData = [];
+            /**
+             * below for each loop will store all the datapoints in the one array.
+             * basically it will flatten the nestesd array (data prop) into single array
+             * of object. where each object contains x, y, rectText , value and legend propety of single
+             * data point.
+             */
+            data.forEach(function (item) {
+                item.data.forEach(function (point) {
+                    flattenData.push(__assign(__assign({}, point), { legend: item.legend }));
+                });
+            });
+            var yPoints = {};
+            var uniqueYPoints = {};
+            var uniqueXPoints = {};
+            flattenData.forEach(function (item) {
+                var posX = _this._getXIndex(item.x);
+                var posY = _this._getYIndex(item.y);
+                uniqueXPoints[posX] = '1';
+                uniqueYPoints[posY] = '1';
+                /** we will check if the property(posY) is already there in object, if  Yes,
+                 *  then we will append the item in the Array related to the pos, if not
+                 *  then we will simply append the item in the new Array and
+                 *  assign that array to the  property (posY) in the Object
+                 *  and finally we will get the array of Objects associated to each
+                 *  property (which is nothing but y data point) and object in the
+                 *  array are noting but x data points associated to the property y
+                 */
+                if (yPoints[posY]) {
+                    yPoints[posY] = __spreadArray(__spreadArray([], yPoints[posY], true), [item], false);
+                }
+                else {
+                    yPoints[posY] = [item];
+                }
+            });
+            /**
+             * we will now sort(ascending) the array's of y data point based on the x value
+             * sorting is important to achive the accessibility order of the
+             * rectangles and then format the x and y datapoints respectively
+             */
+            Object.keys(yPoints).forEach(function (item) {
+                yPoints[item]
+                    .sort(function (a, b) {
+                    if (_this._xAxisType === XAxisTypes.StringAxis) {
+                        return a.x.toLowerCase() > b.x.toLowerCase() ? 1 : -1;
+                    }
+                    else if (_this._xAxisType === XAxisTypes.DateAxis) {
+                        return a.x.getTime() - b.x.getTime();
+                    }
+                    else if (_this._xAxisType === XAxisTypes.NumericAxis) {
+                        return +a.x > +b.x ? 1 : -1;
+                    }
+                    else {
+                        return a.x > b.x ? 1 : -1;
+                    }
+                })
+                    .forEach(function (datapoint) {
+                    if (_this._xAxisType === XAxisTypes.DateAxis) {
+                        datapoint.x = _this._getStringFormattedDate(datapoint.x, xAxisDateFormatString);
+                    }
+                    if (_this._xAxisType === XAxisTypes.NumericAxis) {
+                        datapoint.x = _this._getStringFormattedNumber(datapoint.x, xAxisNumberFormatString);
+                    }
+                    if (_this._xAxisType === XAxisTypes.StringAxis) {
+                        datapoint.x = _this._getFormattedLabelForXAxisDataPoint(datapoint.x);
+                    }
+                    if (_this._yAxisType === YAxisType.DateAxis) {
+                        datapoint.y = _this._getStringFormattedDate(datapoint.y, yAxisDateFormatString);
+                    }
+                    if (_this._yAxisType === YAxisType.NumericAxis) {
+                        datapoint.y = _this._getStringFormattedNumber(datapoint.y, yAxisNumberFormatString);
+                    }
+                    if (_this._yAxisType === YAxisType.StringAxis) {
+                        datapoint.y = _this._getFormattedLabelForYAxisDataPoint(datapoint.y);
+                    }
+                });
+            });
+            /**
+             * if  y-axis data points are of type date or number or if we have string formatter,
+             * then we need to change data points  to their respective string
+             * format, becuase in the private variable this._stringYAxisDatapoints, points will be stored in
+             * string format. and in here `yPoint` are not so we need to change, so that
+             * function `this._createRectangles` should work perfetcly while looping, and  if we don't change
+             * then `this._createRectangles` will fail while looping, causing the error
+             * Cannot read property 'forEach' of undefined
+             */
+            Object.keys(yPoints).forEach(function (yPoint) {
+                if (_this._yAxisType === YAxisType.DateAxis) {
+                    yPoints[_this._getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];
+                }
+                else if (_this._yAxisType === YAxisType.NumericAxis) {
+                    yPoints["".concat(_this._getStringFormattedNumber(yPoint, yAxisNumberFormatString))] = yPoints[yPoint];
+                }
+                else {
+                    yPoints[_this._getFormattedLabelForYAxisDataPoint(yPoint)] = yPoints[yPoint];
+                }
+            });
+            /**
+             * assigning new data set
+             */
+            var dataSet = yPoints;
+            /**
+             * These are the Y axis data points which will get rendered in the
+             * Y axis in graph
+             */
+            var yAxisPoints = _this._getYAxisDataPoints(uniqueYPoints);
+            /**
+             * These are the x axis data points which will get rendered in the
+             * x axis in the graph
+             */
+            var xAxisPoints = _this._getXAxisDataPoints(uniqueXPoints);
+            return {
+                dataSet: dataSet,
+                yAxisPoints: yAxisPoints,
+                xAxisPoints: xAxisPoints,
+            };
+        };
+        /**
+         * This function will return the final sorted and formatted x-axis points
+         * which will be rendered on the x-axis
+         * @param points
+         * @returns x-axis points
+         */
+        _this._getXAxisDataPoints = function (points) {
+            var xAxisPoints = [];
+            var unFormattedXAxisDataPoints = Object.keys(points).sort(function (a, b) {
+                if (_this._xAxisType === XAxisTypes.DateAxis || _this._xAxisType === XAxisTypes.NumericAxis) {
+                    return +a - +b;
+                }
+                else {
+                    return 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(formatString || '%b/%d')(date);
+        };
+        _this._getStringFormattedNumber = function (point, formatString) {
+            return d3Format(formatString || '.2~s')(+point);
+        };
+        _this._getFormattedLabelForXAxisDataPoint = function (point) {
+            var xAxisStringFormatter = _this.props.xAxisStringFormatter;
+            return xAxisStringFormatter ? xAxisStringFormatter(point) : point;
+        };
+        _this._getFormattedLabelForYAxisDataPoint = function (point) {
+            var yAxisStringFormatter = _this.props.yAxisStringFormatter;
+            return yAxisStringFormatter ? yAxisStringFormatter(point) : point;
+        };
+        _this._closeCallout = function () {
+            _this.setState({
+                isCalloutVisible: false,
+            });
+        };
+        /**
+         * This function checks if the given legend is highlighted or not.
+         * A legend can be highlighted in 2 ways:
+         * 1. selection: if the user clicks on it
+         * 2. hovering: if there is no selected legend and the user hovers over it
+         */
+        _this._legendHighlighted = function (legendTitle) {
+            return (_this.state.selectedLegend === legendTitle ||
+                (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
+        };
+        /**
+         * This function checks if none of the legends is selected or hovered.
+         */
+        _this._noLegendHighlighted = function () {
+            return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
+        };
+        _this._getAriaLabel = function (point) {
+            var _a;
+            var xValue = point.x;
+            var yValue = point.y;
+            var legend = point.legend;
+            var zValue = point.ratio ? "".concat(point.ratio[0], "/").concat(point.ratio[1]) : point.rectText || point.value;
+            var description = point.descriptionMessage;
+            return (((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) ||
+                "".concat(xValue, ", ").concat(yValue, ". ").concat(legend, ", ").concat(zValue, ".") + (description ? " ".concat(description, ".") : ''));
+        };
+        _this._getChartTitle = function () {
+            var chartTitle = _this.props.chartTitle;
+            var numDataPoints = _this.props.data.reduce(function (acc, curr) { return acc + curr.data.length; }, 0);
+            return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Heat map chart with ".concat(numDataPoints, " data points. ");
+        };
+        /**
+         * 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: '',
+        };
+        _this._emptyChartId = getId('_HeatMap_empty');
+        return _this;
+    }
+    HeatMapChartBase.prototype.render = function () {
+        var _this = this;
+        var _a = this._getXandY(), x = _a.x, y = _a.y;
+        this._xAxisType = getTypeOfAxis(x, true);
+        this._yAxisType = getTypeOfAxis(y, false);
+        var _b = this.props, data = _b.data, xAxisDateFormatString = _b.xAxisDateFormatString, xAxisNumberFormatString = _b.xAxisNumberFormatString, yAxisDateFormatString = _b.yAxisDateFormatString, yAxisNumberFormatString = _b.yAxisNumberFormatString;
+        this._colorScale = this._getColorScale();
+        var _c = this._createSet(data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString), dataSet = _c.dataSet, xAxisPoints = _c.xAxisPoints, yAxisPoints = _c.yAxisPoints;
+        this._dataSet = dataSet;
+        this._stringYAxisDataPoints = yAxisPoints;
+        this._stringXAxisDataPoints = xAxisPoints;
+        this._classNames = getClassNames(this.props.styles, { theme: this.props.theme });
+        var calloutProps = __assign(__assign(__assign(__assign({ isBeakVisible: false, gapSpace: 8 }, this.props.calloutProps), { isCalloutVisible: this.state.isCalloutVisible, id: this.state.calloutId, YValue: this.state.calloutYValue, legend: this.state.calloutLegend, color: this.state.calloutTextColor, target: this.state.target, styles: this._classNames.subComponentStyles.calloutStyles, directionalHint: DirectionalHint.topAutoEdge, onDismiss: this._closeCallout }), getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)), { preventDismissOnLostFocus: true });
+        var chartHoverProps = __assign(__assign({}, (this.state.ratio && {
+            ratio: this.state.ratio,
+        })), { descriptionMessage: this.state.descriptionMessage });
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: data, chartType: ChartTypes.HeatMapChart, xAxisType: XAxisTypes.StringAxis, yAxisType: YAxisType.StringAxis, calloutProps: calloutProps, createYAxis: createNumericYAxis, chartHoverProps: chartHoverProps, styles: this._classNames.subComponentStyles.cartesianStyles, datasetForXAxisDomain: this._stringXAxisDataPoints, stringDatasetForYAxisDomain: this._stringYAxisDataPoints, createStringYAxis: createStringYAxis, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, 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();
+            } }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+    };
+    /**
+     * when the legend is hovered we need to highlight
+     * all the rectangles which fall under that category
+     * and un-highlight the rest of them
+     * @param legendTitle
+     */
+    HeatMapChartBase.prototype._onLegendHover = function (legendTitle) {
+        this.setState({
+            activeLegend: legendTitle,
+        });
+    };
+    /**
+     * when the mouse is out from the legend , we need
+     * to show the graph in initial mode.
+     */
+    HeatMapChartBase.prototype._onLegendLeave = function () {
+        this.setState({
+            activeLegend: '',
+        });
+    };
+    /**
+     * @param legendTitle
+     * when the legend is clicked we need to highlight
+     * all the rectangles which fall under that category
+     * and un highlight the rest of them
+     */
+    HeatMapChartBase.prototype._onLegendClick = function (legendTitle) {
+        /**
+         * check if the legend is already selceted,
+         * if yes, un-select the legend, else
+         * set the selected legend state to legendTitle
+         */
+        if (this.state.selectedLegend === legendTitle) {
+            this.setState({
+                selectedLegend: '',
+            });
+        }
+        else {
+            this.setState({
+                selectedLegend: legendTitle,
+            });
+        }
+    };
+    HeatMapChartBase.prototype._isChartEmpty = function () {
+        return !(this.props.data && this.props.data.length > 0);
+    };
+    return HeatMapChartBase;
+}(React.Component));
+export { HeatMapChartBase };
+//# sourceMappingURL=HeatMapChart.base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeatMapChart.base.js","sourceRoot":"../src/","sources":["components/HeatMapChart/HeatMapChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CartesianChart, IChildProps, IModifiedCartesianChartProps } from '../../components/CommonComponents/index';\nimport { IAccessibilityProps, IHeatMapChartData, IHeatMapChartDataPoint } from '../../types/IDataPoint';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { classNamesFunction, getId, memoizeFunction } from '@fluentui/react/lib/Utilities';\nimport { FocusZoneDirection } from '@fluentui/react-focus';\nimport { DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport * as React from 'react';\nimport { IHeatMapChartProps, IHeatMapChartStyleProps, IHeatMapChartStyles } from './HeatMapChart.types';\nimport { ILegend, Legends } from '../Legends/index';\nimport { convertToLocaleString } from '../../utilities/locale-util';\nimport {\n  ChartTypes,\n  createNumericYAxis,\n  getAccessibleDataObject,\n  XAxisTypes,\n  YAxisType,\n  getTypeOfAxis,\n  IMargins,\n  IDomainNRange,\n  domainRangeOfXStringAxis,\n  createStringYAxis,\n} from '../../utilities/utilities';\nimport { Target } from '@fluentui/react';\nimport { format as d3Format } from 'd3-format';\nimport { timeFormat as d3TimeFormat } from 'd3-time-format';\n\ntype DataSet = {\n  dataSet: RectanglesGraphData;\n  yAxisPoints: string[];\n  xAxisPoints: string[];\n};\ntype FlattenData = IHeatMapChartDataPoint & {\n  legend: string;\n};\ninterface IRectRef {\n  data: FlattenData;\n  refElement: SVGGElement;\n}\ntype RectanglesGraphData = { [key: string]: FlattenData[] };\nexport interface IHeatMapChartState {\n  /**\n   * contains the selected legend string\n   */\n  selectedLegend: string;\n  /**\n   * contains the hovered legend string\n   */\n  activeLegend: string;\n  /**\n   * determines wethere to show or hide the callout\n   * @default false\n   */\n  isCalloutVisible: boolean;\n  /**\n   * y value to be shown in callout\n   */\n  calloutYValue: string;\n  /**\n   * legend title to be shown in callout\n   */\n  calloutLegend: string;\n  /**\n   * color of the text in the callout\n   */\n  calloutTextColor: string;\n  /**\n   * The target that the Callout should try to position itself based on\n   */\n  target: Target;\n  /**\n   * ratio to show in the callout\n   */\n  ratio: [number, number] | null;\n\n  /**\n   * description message to show in the callout\n   */\n  descriptionMessage: string;\n  /**\n   * id to give to callout for accesiblity purpose\n   */\n  calloutId: string;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\nconst getClassNames = classNamesFunction<IHeatMapChartStyleProps, IHeatMapChartStyles>();\nexport class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatMapChartState> {\n  private _classNames: IProcessedStyleSet<IHeatMapChartStyles>;\n  private _stringXAxisDataPoints: string[];\n  private _stringYAxisDataPoints: string[];\n  private _createSet: (\n    data: IHeatMapChartData[],\n    xDate: string | undefined,\n    xNum: string | undefined,\n    yDate: string | undefined,\n    yNum: string | undefined,\n  ) => DataSet;\n  private _dataSet: RectanglesGraphData;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _colorScale: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _xAxisScale: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _yAxisScale: any;\n  /**\n   * This array contains ref for all the rectangles\n   * drawn inside the chard\n   */\n  private _rectRefArray: { [key: string]: IRectRef } = {};\n  private _xAxisType: XAxisTypes;\n  private _yAxisType: YAxisType;\n  private _calloutAnchorPoint: FlattenData | null;\n  private _emptyChartId: string;\n  public constructor(props: IHeatMapChartProps) {\n    super(props);\n    /**\n     * below funciton creates a new data set from the prop\n     * @data and also finds all the unique x-axis datapoints\n     * and y-axis datapoints(which will render in the axis in graph)\n     * we store this in a memoized function, because we want to calulate\n     * this set whenever props changes.\n     */\n    this._createSet = memoizeFunction(\n      (\n        data: IHeatMapChartData[],\n        xDate: string | undefined,\n        xNum: string | undefined,\n        yDate: string | undefined,\n        yNum: string | undefined,\n      ): DataSet => this._createNewDataSet(data, xDate, xNum, yDate, yNum),\n    );\n    this.state = {\n      selectedLegend: '',\n      activeLegend: '',\n      isCalloutVisible: false,\n      target: null,\n      calloutLegend: '',\n      calloutTextColor: '',\n      calloutYValue: '',\n      ratio: null,\n      descriptionMessage: '',\n      calloutId: '',\n    };\n    this._emptyChartId = getId('_HeatMap_empty');\n  }\n\n  public render(): React.ReactNode {\n    const { x, y } = this._getXandY();\n    this._xAxisType = getTypeOfAxis(x, true) as XAxisTypes;\n    this._yAxisType = getTypeOfAxis(y, false) as YAxisType;\n    const { data, xAxisDateFormatString, xAxisNumberFormatString, yAxisDateFormatString, yAxisNumberFormatString } =\n      this.props;\n    this._colorScale = this._getColorScale();\n    const { dataSet, xAxisPoints, yAxisPoints } = this._createSet(\n      data,\n      xAxisDateFormatString,\n      xAxisNumberFormatString,\n      yAxisDateFormatString,\n      yAxisNumberFormatString,\n    );\n    this._dataSet = dataSet;\n    this._stringYAxisDataPoints = yAxisPoints;\n    this._stringXAxisDataPoints = xAxisPoints;\n    this._classNames = getClassNames(this.props.styles!, { theme: this.props.theme! });\n    const calloutProps: IModifiedCartesianChartProps['calloutProps'] = {\n      isBeakVisible: false,\n      gapSpace: 8,\n      ...this.props.calloutProps,\n      isCalloutVisible: this.state.isCalloutVisible,\n      id: this.state.calloutId,\n      YValue: this.state.calloutYValue,\n      legend: this.state.calloutLegend,\n      color: this.state.calloutTextColor,\n      target: this.state.target,\n      styles: this._classNames.subComponentStyles.calloutStyles,\n      directionalHint: DirectionalHint.topAutoEdge,\n      onDismiss: this._closeCallout,\n      ...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false),\n      preventDismissOnLostFocus: true,\n    };\n    const chartHoverProps: IModifiedCartesianChartProps['chartHoverProps'] = {\n      ...(this.state.ratio && {\n        ratio: this.state.ratio,\n      }),\n      descriptionMessage: this.state.descriptionMessage,\n    };\n    return !this._isChartEmpty() ? (\n      <CartesianChart\n        {...this.props}\n        chartTitle={this._getChartTitle()}\n        points={data}\n        chartType={ChartTypes.HeatMapChart}\n        xAxisType={XAxisTypes.StringAxis}\n        yAxisType={YAxisType.StringAxis}\n        calloutProps={calloutProps}\n        createYAxis={createNumericYAxis}\n        chartHoverProps={chartHoverProps}\n        styles={this._classNames.subComponentStyles!.cartesianStyles}\n        datasetForXAxisDomain={this._stringXAxisDataPoints}\n        stringDatasetForYAxisDomain={this._stringYAxisDataPoints}\n        createStringYAxis={createStringYAxis}\n        getDomainNRangeValues={this._getDomainNRangeValues}\n        getMinMaxOfYAxis={this._getMinMaxOfYAxis}\n        xAxisTickCount={this._stringXAxisDataPoints.length}\n        xAxistickSize={0}\n        xAxisPadding={0.02}\n        yAxisPadding={0.02}\n        svgFocusZoneProps={{\n          direction: FocusZoneDirection.bidirectional,\n        }}\n        legendBars={this._createLegendBars()}\n        onChartMouseLeave={this._handleChartMouseLeave}\n        /* eslint-disable react/jsx-no-bind */\n        // eslint-disable-next-line react/no-children-prop\n        children={(props: IChildProps) => {\n          this._xAxisScale = props.xScale;\n          this._yAxisScale = props.yScale;\n          return this._createRectangles();\n        }}\n      />\n    ) : (\n      <div\n        id={this._emptyChartId}\n        role={'alert'}\n        style={{ opacity: '0' }}\n        aria-label={'Graph has no data to display'}\n      />\n    );\n  }\n\n  private _getMinMaxOfYAxis = () => {\n    return { startValue: 0, endValue: 0 };\n  };\n\n  private _getDomainNRangeValues = (\n    points: IHeatMapChartDataPoint[],\n    margins: IMargins,\n    width: number,\n    chartType: ChartTypes,\n    isRTL: boolean,\n    xAxisType: XAxisTypes,\n    barWidth: number,\n    tickValues: Date[] | number[] | undefined,\n    shiftX: number,\n  ) => {\n    let domainNRangeValue: IDomainNRange;\n    if (xAxisType === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {\n      domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };\n    } else {\n      domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);\n    }\n    return domainNRangeValue;\n  };\n\n  private _getXandY = (): { x: string | Date | number; y: string | Date | number } => {\n    let x: string | Date | number = '';\n    let y: string | Date | number = '';\n    this.props.data.forEach((item: IHeatMapChartData) => {\n      if (item.data && item.data.length > 0) {\n        x = item.data[0].x;\n        y = item.data[0].y;\n        return { x, y };\n      }\n    });\n    return { x, y };\n  };\n\n  private _getOpacity = (legendTitle: string): string => {\n    const opacity = this._legendHighlighted(legendTitle) || this._noLegendHighlighted() ? '1' : '0.1';\n    return opacity;\n  };\n\n  private _rectRefCallback = (rectElement: SVGGElement, index: number | string, dataPointObject: FlattenData): void => {\n    this._rectRefArray[index] = { data: dataPointObject, refElement: rectElement };\n  };\n\n  private _onRectFocus = (id: string, data: FlattenData): void => {\n    this.setState({\n      target: this._rectRefArray[id].refElement,\n      /** Show the callout if highlighted rectangle is focused and Hide it if unhighlighted rectangle is focused */\n      isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,\n      calloutYValue: `${data.rectText}`,\n      calloutTextColor: Number.isNaN(data.value)\n        ? this.props.theme!.semanticColors.bodyText\n        : this._colorScale(data.value),\n      calloutLegend: data.legend,\n      ratio: data.ratio || null,\n      descriptionMessage: data.descriptionMessage || '',\n      calloutId: id,\n      callOutAccessibilityData: data.callOutAccessibilityData,\n    });\n  };\n\n  private _onRectMouseOver = (id: string, data: FlattenData, mouseEvent: React.MouseEvent<SVGGElement>): void => {\n    mouseEvent.persist();\n    if (this._calloutAnchorPoint !== data) {\n      this._calloutAnchorPoint = data;\n      this.setState({\n        target: this._rectRefArray[id].refElement,\n        /** Show the callout if highlighted rectangle is hovered and Hide it if unhighlighted rectangle is hovered */\n        isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,\n        calloutYValue: `${data.rectText}`,\n        calloutTextColor: Number.isNaN(data.value)\n          ? this.props.theme!.semanticColors.bodyText\n          : this._colorScale(data.value),\n        calloutLegend: data.legend,\n        ratio: data.ratio || null,\n        descriptionMessage: data.descriptionMessage || '',\n        calloutId: id,\n        callOutAccessibilityData: data.callOutAccessibilityData,\n      });\n    }\n  };\n\n  private _onRectBlurOrMouseOut = (): void => {\n    /**/\n  };\n\n  private _handleChartMouseLeave = (): void => {\n    this._calloutAnchorPoint = null;\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n\n  /**\n   * This is the function which is responsible for\n   * drawing the rectangle in the graph and also\n   * attaching dom events to that rectangles\n   */\n  private _createRectangles = (): React.ReactNode => {\n    const rectangles: JSX.Element[] = [];\n    const yAxisDataPoints = this._stringYAxisDataPoints.slice().reverse();\n    /**\n     * yAxisDataPoint is noting but the DataPoint\n     * which will be rendered on the y-axis\n     */\n    yAxisDataPoints.forEach((yAxisDataPoint: string) => {\n      let index = 0;\n      this._stringXAxisDataPoints.forEach((xAxisDataPoint: string) => {\n        let rectElement: JSX.Element;\n        const id = `x${xAxisDataPoint}y${yAxisDataPoint}`;\n        if (this._dataSet[yAxisDataPoint][index]?.x === xAxisDataPoint) {\n          /**\n           * dataPointObject is an object where it contains information on single\n           * data point such as x, y , value, rectText property of the rectangle\n           */\n          const dataPointObject = this._dataSet[yAxisDataPoint][index];\n          rectElement = (\n            <g\n              key={id}\n              role=\"img\"\n              aria-label={this._getAriaLabel(dataPointObject)}\n              data-is-focusable={this._legendHighlighted(dataPointObject.legend) || this._noLegendHighlighted()}\n              fillOpacity={this._getOpacity(dataPointObject.legend)}\n              transform={`translate(${this._xAxisScale(dataPointObject.x)}, ${this._yAxisScale(dataPointObject.y)})`}\n              ref={(gElement: SVGGElement) => {\n                this._rectRefCallback(gElement, id, dataPointObject);\n              }}\n              onFocus={this._onRectFocus.bind(this, id, dataPointObject)}\n              onBlur={this._onRectBlurOrMouseOut}\n              onMouseOver={this._onRectMouseOver.bind(this, id, dataPointObject)}\n              onMouseOut={this._onRectBlurOrMouseOut}\n            >\n              <rect\n                fill={this._colorScale(dataPointObject.value)}\n                width={this._xAxisScale.bandwidth()}\n                height={this._yAxisScale.bandwidth()}\n                onClick={dataPointObject.onClick}\n              />\n              <text\n                dominantBaseline={'middle'}\n                textAnchor={'middle'}\n                className={this._classNames.text}\n                transform={`translate(${this._xAxisScale.bandwidth() / 2}, ${this._yAxisScale.bandwidth() / 2})`}\n              >\n                {convertToLocaleString(dataPointObject.rectText, this.props.culture)}\n              </text>\n            </g>\n          );\n          index++;\n        } else {\n          const dataPointObject: FlattenData = {\n            x: xAxisDataPoint,\n            y: yAxisDataPoint,\n            value: NaN,\n            rectText: 'No data available',\n            legend: '',\n          };\n          rectElement = (\n            <g\n              key={id}\n              role=\"img\"\n              aria-label={this._getAriaLabel(dataPointObject)}\n              data-is-focusable={this._noLegendHighlighted()}\n              transform={`translate(${this._xAxisScale(dataPointObject.x)}, ${this._yAxisScale(dataPointObject.y)})`}\n              ref={(gElement: SVGGElement) => {\n                this._rectRefCallback(gElement, id, dataPointObject);\n              }}\n              onFocus={this._onRectFocus.bind(this, id, dataPointObject)}\n              onBlur={this._onRectBlurOrMouseOut}\n              onMouseOver={this._onRectMouseOver.bind(this, id, dataPointObject)}\n              onMouseOut={this._onRectBlurOrMouseOut}\n            >\n              <rect\n                fill={this.props.theme!.semanticColors.bodyBackground}\n                width={this._xAxisScale.bandwidth()}\n                height={this._yAxisScale.bandwidth()}\n              />\n            </g>\n          );\n        }\n        rectangles.push(rectElement);\n      });\n    });\n    return rectangles;\n  };\n  /**\n   * when the legend is hovered we need to highlight\n   * all the rectangles which fall under that category\n   * and un-highlight the rest of them\n   * @param legendTitle\n   */\n  private _onLegendHover(legendTitle: string): void {\n    this.setState({\n      activeLegend: legendTitle,\n    });\n  }\n\n  /**\n   * when the mouse is out from the legend , we need\n   * to show the graph in initial mode.\n   */\n  private _onLegendLeave(): void {\n    this.setState({\n      activeLegend: '',\n    });\n  }\n  /**\n   * @param legendTitle\n   * when the legend is clicked we need to highlight\n   * all the rectangles which fall under that category\n   * and un highlight the rest of them\n   */\n  private _onLegendClick(legendTitle: string): void {\n    /**\n     * check if the legend is already selceted,\n     * if yes, un-select the legend, else\n     * set the selected legend state to legendTitle\n     */\n    if (this.state.selectedLegend === legendTitle) {\n      this.setState({\n        selectedLegend: '',\n      });\n    } else {\n      this.setState({\n        selectedLegend: legendTitle,\n      });\n    }\n  }\n  private _createLegendBars = (): JSX.Element => {\n    const { data, legendProps } = this.props;\n    const legends: ILegend[] = [];\n    data.forEach((item: IHeatMapChartData) => {\n      const legend: ILegend = {\n        title: item.legend,\n        color: this._colorScale(item.value),\n        action: () => {\n          this._onLegendClick(item.legend);\n        },\n        hoverAction: () => {\n          this._handleChartMouseLeave();\n          this._onLegendHover(item.legend);\n        },\n        onMouseOutAction: () => {\n          this._onLegendLeave();\n        },\n      };\n      legends.push(legend);\n    });\n    return <Legends {...legendProps} legends={legends} />;\n  };\n\n  private _getColorScale = () => {\n    const { domainValuesForColorScale, rangeValuesForColorScale } = this.props;\n    return d3ScaleLinear()\n      .domain(domainValuesForColorScale)\n      .range(rangeValuesForColorScale as unknown as number[]);\n  };\n\n  private _getXIndex = (value: string | Date | number): string => {\n    if (this._xAxisType === XAxisTypes.DateAxis) {\n      return `${(value as Date).getTime()}`;\n    } else if (this._xAxisType === XAxisTypes.StringAxis) {\n      return value as string;\n    } else if (this._xAxisType === XAxisTypes.NumericAxis) {\n      return `${value}`;\n    } else {\n      return '';\n    }\n  };\n  private _getYIndex = (value: string | Date | number): string => {\n    if (this._yAxisType === YAxisType.DateAxis) {\n      return `${(value as Date).getTime()}`;\n    } else if (this._yAxisType === YAxisType.StringAxis) {\n      return value as string;\n    } else if (this._yAxisType === YAxisType.NumericAxis) {\n      return `${value}`;\n    } else {\n      return '';\n    }\n  };\n\n  /**\n   * This will create a new data set based on the prop\n   * @data\n   * We will be using This data set to contsruct our rectangles\n   * in the chart, we use this data set becuase, when we loop in this\n   * data and build the heat map, it will support accessibility as\n   * specified in the figma\n   */\n\n  private _createNewDataSet = (\n    data: IHeatMapChartData[],\n    xAxisDateFormatString: string | undefined,\n    xAxisNumberFormatString: string | undefined,\n    yAxisDateFormatString: string | undefined,\n    yAxisNumberFormatString: string | undefined,\n  ): DataSet => {\n    /**\n     * please do not destructure any of the props here,\n     * instead send them as parameter to this functions so that\n     * this functions get called whenever the prop changes\n     */\n    const flattenData: FlattenData[] = [];\n    /**\n     * below for each loop will store all the datapoints in the one array.\n     * basically it will flatten the nestesd array (data prop) into single array\n     * of object. where each object contains x, y, rectText , value and legend propety of single\n     * data point.\n     */\n    data.forEach((item: IHeatMapChartData) => {\n      item.data.forEach((point: IHeatMapChartDataPoint) => {\n        flattenData.push({ ...point, legend: item.legend });\n      });\n    });\n    const yPoints: RectanglesGraphData = {};\n    const uniqueYPoints: { [key: string]: '1' } = {};\n    const uniqueXPoints: { [key: string]: '1' } = {};\n    flattenData.forEach((item: FlattenData) => {\n      const posX = this._getXIndex(item.x);\n      const posY = this._getYIndex(item.y);\n\n      uniqueXPoints[posX] = '1';\n      uniqueYPoints[posY] = '1';\n      /** we will check if the property(posY) is already there in object, if  Yes,\n       *  then we will append the item in the Array related to the pos, if not\n       *  then we will simply append the item in the new Array and\n       *  assign that array to the  property (posY) in the Object\n       *  and finally we will get the array of Objects associated to each\n       *  property (which is nothing but y data point) and object in the\n       *  array are noting but x data points associated to the property y\n       */\n      if (yPoints[posY]) {\n        yPoints[posY] = [...yPoints[posY], item];\n      } else {\n        yPoints[posY] = [item];\n      }\n    });\n    /**\n     * we will now sort(ascending) the array's of y data point based on the x value\n     * sorting is important to achive the accessibility order of the\n     * rectangles and then format the x and y datapoints respectively\n     */\n    Object.keys(yPoints).forEach((item: string) => {\n      yPoints[item]\n        .sort((a: IHeatMapChartDataPoint, b: IHeatMapChartDataPoint) => {\n          if (this._xAxisType === XAxisTypes.StringAxis) {\n            return (a.x as string).toLowerCase() > (b.x as string).toLowerCase() ? 1 : -1;\n          } else if (this._xAxisType === XAxisTypes.DateAxis) {\n            return (a.x as Date).getTime() - (b.x as Date).getTime();\n          } else if (this._xAxisType === XAxisTypes.NumericAxis) {\n            return +(a.x as string) > +(b.x as string) ? 1 : -1;\n          } else {\n            return a.x > b.x ? 1 : -1;\n          }\n        })\n        .forEach((datapoint: IHeatMapChartDataPoint) => {\n          if (this._xAxisType === XAxisTypes.DateAxis) {\n            datapoint.x = this._getStringFormattedDate(datapoint.x as string, xAxisDateFormatString);\n          }\n          if (this._xAxisType === XAxisTypes.NumericAxis) {\n            datapoint.x = this._getStringFormattedNumber(datapoint.x as string, xAxisNumberFormatString);\n          }\n          if (this._xAxisType === XAxisTypes.StringAxis) {\n            datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);\n          }\n          if (this._yAxisType === YAxisType.DateAxis) {\n            datapoint.y = this._getStringFormattedDate(datapoint.y as string, yAxisDateFormatString);\n          }\n          if (this._yAxisType === YAxisType.NumericAxis) {\n            datapoint.y = this._getStringFormattedNumber(datapoint.y as string, yAxisNumberFormatString);\n          }\n          if (this._yAxisType === YAxisType.StringAxis) {\n            datapoint.y = this._getFormattedLabelForYAxisDataPoint(datapoint.y as string);\n          }\n        });\n    });\n    /**\n     * if  y-axis data points are of type date or number or if we have string formatter,\n     * then we need to change data points  to their respective string\n     * format, becuase in the private variable this._stringYAxisDatapoints, points will be stored in\n     * string format. and in here `yPoint` are not so we need to change, so that\n     * function `this._createRectangles` should work perfetcly while looping, and  if we don't change\n     * then `this._createRectangles` will fail while looping, causing the error\n     * Cannot read property 'forEach' of undefined\n     */\n\n    Object.keys(yPoints).forEach((yPoint: string) => {\n      if (this._yAxisType === YAxisType.DateAxis) {\n        yPoints[this._getStringFormattedDate(yPoint, yAxisDateFormatString)] = yPoints[yPoint];\n      } else if (this._yAxisType === YAxisType.NumericAxis) {\n        yPoints[`${this._getStringFormattedNumber(yPoint, yAxisNumberFormatString)}`] = yPoints[yPoint];\n      } else {\n        yPoints[this._getFormattedLabelForYAxisDataPoint(yPoint)] = yPoints[yPoint];\n      }\n    });\n    /**\n     * assigning new data set\n     */\n    const dataSet = yPoints;\n    /**\n     * These are the Y axis data points which will get rendered in the\n     * Y axis in graph\n     */\n    const yAxisPoints = this._getYAxisDataPoints(uniqueYPoints);\n    /**\n     * These are the x axis data points which will get rendered in the\n     * x axis in the graph\n     */\n\n    const xAxisPoints = this._getXAxisDataPoints(uniqueXPoints);\n    return {\n      dataSet,\n      yAxisPoints,\n      xAxisPoints,\n    };\n  };\n\n  /**\n   * This function will return the final sorted and formatted x-axis points\n   * which will be rendered on the x-axis\n   * @param points\n   * @returns x-axis points\n   */\n  private _getXAxisDataPoints = (points: { [key: string]: '1' }): string[] => {\n    let xAxisPoints: string[] = [];\n    const unFormattedXAxisDataPoints = Object.keys(points).sort((a: string, b: string) => {\n      if (this._xAxisType === XAxisTypes.DateAxis || this._xAxisType === XAxisTypes.NumericAxis) {\n        return +a - +b;\n      } else {\n        return a.toLowerCase() > b.toLowerCase() ? 1 : -1;\n      }\n    });\n    xAxisPoints = unFormattedXAxisDataPoints.map((xPoint: string) => {\n      if (this._xAxisType === XAxisTypes.DateAxis) {\n        return this._getStringFormattedDate(xPoint, this.props.xAxisDateFormatString);\n      } else if (this._xAxisType === XAxisTypes.NumericAxis) {\n        return this._getStringFormattedNumber(xPoint, this.props.xAxisNumberFormatString);\n      } else {\n        return this._getFormattedLabelForXAxisDataPoint(xPoint);\n      }\n    });\n\n    return xAxisPoints;\n  };\n  /**\n   * This function will return the final sorted and formatted y-axis points\n   * which will be rendered on the y-axis\n   * @param points\n   * @returns yaxis points\n   */\n  private _getYAxisDataPoints = (points: { [key: string]: '1' }): string[] => {\n    let yAxisPoints: string[] = [];\n    const unFormattedYAxisDataPoints = Object.keys(points).sort((a: string, b: string) => {\n      if (this._yAxisType === YAxisType.DateAxis || this._yAxisType === YAxisType.NumericAxis) {\n        return +a - +b;\n      } else {\n        return a.toLowerCase() > b.toLowerCase() ? 1 : -1;\n      }\n    });\n    yAxisPoints = unFormattedYAxisDataPoints.map((yPoint: string) => {\n      if (this._yAxisType === YAxisType.DateAxis) {\n        return this._getStringFormattedDate(yPoint, this.props.yAxisDateFormatString);\n      } else if (this._yAxisType === YAxisType.NumericAxis) {\n        return this._getStringFormattedNumber(yPoint, this.props.yAxisNumberFormatString);\n      } else {\n        return this._getFormattedLabelForYAxisDataPoint(yPoint);\n      }\n    });\n\n    return yAxisPoints;\n  };\n\n  private _getStringFormattedDate = (point: string, formatString?: string): string => {\n    const date = new Date();\n    date.setTime(+point);\n    return d3TimeFormat(formatString || '%b/%d')(date);\n  };\n\n  private _getStringFormattedNumber = (point: string, formatString?: string): string => {\n    return d3Format(formatString || '.2~s')(+point);\n  };\n\n  private _getFormattedLabelForXAxisDataPoint = (point: string): string => {\n    const { xAxisStringFormatter } = this.props;\n    return xAxisStringFormatter ? xAxisStringFormatter(point) : point;\n  };\n\n  private _getFormattedLabelForYAxisDataPoint = (point: string): string => {\n    const { yAxisStringFormatter } = this.props;\n    return yAxisStringFormatter ? yAxisStringFormatter(point) : point;\n  };\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n\n  /**\n   * This function checks if the given legend is highlighted or not.\n   * A legend can be highlighted in 2 ways:\n   * 1. selection: if the user clicks on it\n   * 2. hovering: if there is no selected legend and the user hovers over it\n   */\n  private _legendHighlighted = (legendTitle: string) => {\n    return (\n      this.state.selectedLegend === legendTitle ||\n      (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle)\n    );\n  };\n\n  /**\n   * This function checks if none of the legends is selected or hovered.\n   */\n  private _noLegendHighlighted = () => {\n    return this.state.selectedLegend === '' && this.state.activeLegend === '';\n  };\n\n  private _getAriaLabel = (point: FlattenData): string => {\n    const xValue = point.x;\n    const yValue = point.y;\n    const legend = point.legend;\n    const zValue = point.ratio ? `${point.ratio[0]}/${point.ratio[1]}` : point.rectText || point.value;\n    const description = point.descriptionMessage;\n    return (\n      point.callOutAccessibilityData?.ariaLabel ||\n      `${xValue}, ${yValue}. ${legend}, ${zValue}.` + (description ? ` ${description}.` : '')\n    );\n  };\n\n  private _isChartEmpty(): boolean {\n    return !(this.props.data && this.props.data.length > 0);\n  }\n\n  private _getChartTitle = (): string => {\n    const { chartTitle } = this.props;\n    const numDataPoints = this.props.data.reduce((acc, curr) => acc + curr.data.length, 0);\n    return (chartTitle ? `${chartTitle}. ` : '') + `Heat map chart with ${numDataPoints} data points. `;\n  };\n}\n"]}