@fluentui/react-charting 5.21.28 → 5.21.30

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

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

package/lib-amd/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"]}