@fluentui/react-charting 5.23.14 → 5.23.15

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

@@ -0,0 +1,544 @@
+define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "../../components/Legends/Legends", "../CommonComponents/CartesianChart", "@fluentui/react-focus", "../../utilities/index"], function (require, exports, tslib_1, React, d3_array_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, Legends_1, CartesianChart_1, react_focus_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.HorizontalBarChartWithAxisBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var HorizontalBarChartWithAxisBase = /** @class */ (function (_super) {
+        tslib_1.__extends(HorizontalBarChartWithAxisBase, _super);
+        function HorizontalBarChartWithAxisBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._isRtl = (0, Utilities_1.getRTL)();
+            _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+                var domainNRangeValue;
+                if (xAxisType === index_1.XAxisTypes.NumericAxis) {
+                    domainNRangeValue = (0, index_1.domainRangeOfNumericForHorizontalBarChartWithAxis)(points, margins, width, isRTL, shiftX);
+                }
+                else {
+                    domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
+                }
+                return domainNRangeValue;
+            };
+            _this._getMargins = function (margins) {
+                _this.margins = margins;
+            };
+            _this._renderContentForOnlyBars = function (point) {
+                var _a, _b, _c;
+                var _d = _this.props, _e = _d.useSingleColor, useSingleColor = _e === void 0 ? false : _e, _f = _d.enableGradient, enableGradient = _f === void 0 ? false : _f;
+                var selectedPointIndex = 0;
+                _this.props.data.forEach(function (yDataPoint, index) {
+                    if (yDataPoint.y === point.y) {
+                        selectedPointIndex = index;
+                    }
+                });
+                var color;
+                if (useSingleColor) {
+                    //if useSingle color , then check if user has given a palette or not
+                    // and pick the first color from that or else from our paltette.
+                    color = _this.props.colors ? _this._createColors()(1) : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                    if (enableGradient) {
+                        color = (0, index_1.getNextGradient)(0, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
+                    }
+                }
+                else {
+                    color = point.color
+                        ? point.color
+                        : _this.props.colors
+                            ? _this._createColors()(point.x)
+                            : (0, index_1.getNextColor)(selectedPointIndex, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted);
+                }
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(index_1.ChartHoverCard, { XValue: point.xAxisCalloutData || point.x.toString(), Legend: point.legend, YValue: point.yAxisCalloutData || point.y, color: color, culture: _this.props.culture })));
+            };
+            _this._renderCallout = function (props) {
+                return props ? _this._renderContentForOnlyBars(props) : null;
+            };
+            _this._getCustomizedCallout = function () {
+                return _this.props.onRenderCalloutPerDataPoint
+                    ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps, _this._renderCallout)
+                    : null;
+            };
+            _this._getGraphData = function (xScale, yScale, containerHeight, containerWidth, xElement, yElement) {
+                return (_this._bars =
+                    _this._yAxisType === index_1.YAxisType.NumericAxis
+                        ? _this._createNumericBars(containerHeight, containerWidth, xElement, yElement)
+                        : _this._createStringBars(containerHeight, containerWidth, xElement, yElement));
+            };
+            _this._refCallback = function (element, legendTitle) {
+                _this._refArray.push({ index: legendTitle, refElement: element });
+            };
+            _this._getCalloutContentForBar = function (point) {
+                var _a, _b, _c;
+                var YValueHover = [];
+                var _d = _this.props, _e = _d.useSingleColor, useSingleColor = _e === void 0 ? false : _e, _f = _d.enableGradient, enableGradient = _f === void 0 ? false : _f;
+                var data = _this.props.data;
+                var selectedPoint = data.filter(function (yDataPoint) { return yDataPoint.y === point.y; });
+                var selectedPointIndex = 0;
+                data.forEach(function (yDataPoint, index) {
+                    if (yDataPoint.y === point.y) {
+                        selectedPointIndex = index;
+                    }
+                });
+                var color;
+                if (useSingleColor) {
+                    //if useSingle color , then check if user has given a palette or not
+                    // and pick the first color from that or else from our paltette.
+                    color = _this.props.colors ? _this._createColors()(1) : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                    if (enableGradient) {
+                        color = (0, index_1.getNextGradient)(0, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
+                    }
+                }
+                else {
+                    color = selectedPoint[0].color
+                        ? selectedPoint[0].color
+                        : _this.props.colors
+                            ? _this._createColors()(selectedPoint[0].x)
+                            : (0, index_1.getNextColor)(selectedPointIndex, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted);
+                }
+                // callout data for the bar
+                YValueHover.push({
+                    legend: selectedPoint[0].legend,
+                    // For HBCWA x and y Values are swapped
+                    y: selectedPoint[0].x,
+                    color: color,
+                    data: selectedPoint[0].yAxisCalloutData,
+                    yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
+                });
+                return { YValueHover: YValueHover, hoverXValue: point.yAxisCalloutData || point.y.toString() };
+            };
+            _this._onBarLeave = function () {
+                /**/
+            };
+            _this._handleChartMouseLeave = function () {
+                _this._calloutAnchorPoint = null;
+                _this.setState({
+                    isCalloutVisible: false,
+                    activeXdataPoint: null,
+                    YValueHover: [],
+                    hoverXValue: '',
+                });
+            };
+            _this._onBarFocus = function (point, refArrayIndexNumber, color) {
+                if (_this.state.isLegendSelected === false ||
+                    (_this.state.isLegendSelected && _this.state.selectedLegendTitle === point.legend)) {
+                    var _a = _this._getCalloutContentForBar(point), YValueHover_1 = _a.YValueHover, hoverXValue_1 = _a.hoverXValue;
+                    _this._refArray.forEach(function (obj, index) {
+                        if (refArrayIndexNumber === index) {
+                            _this.setState({
+                                refSelected: obj.refElement,
+                                isCalloutVisible: true,
+                                selectedLegendTitle: point.legend,
+                                dataForHoverCard: point.x,
+                                color: _this.props.useSingleColor ? color : point.color,
+                                xCalloutValue: point.yAxisCalloutData || point.y.toString(),
+                                yCalloutValue: point.xAxisCalloutData || point.x.toString(),
+                                dataPointCalloutProps: point,
+                                activeXdataPoint: point.x,
+                                YValueHover: YValueHover_1,
+                                hoverXValue: hoverXValue_1,
+                                callOutAccessibilityData: point.callOutAccessibilityData,
+                            });
+                        }
+                    });
+                }
+            };
+            _this._getScales = function (containerHeight, containerWidth, isNumericScale) {
+                if (isNumericScale) {
+                    var xMax = (0, d3_array_1.max)(_this._points, function (point) { return point.x; });
+                    var yMax = (0, d3_array_1.max)(_this._points, function (point) { return point.y; });
+                    var xBarScale = (0, d3_scale_1.scaleLinear)()
+                        .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
+                        .nice()
+                        .range([_this.margins.left, containerWidth - _this.margins.right]);
+                    var yBarScale = (0, d3_scale_1.scaleLinear)()
+                        .domain([0, yMax])
+                        .range([containerHeight - _this.margins.bottom, _this.margins.top]);
+                    return { xBarScale: xBarScale, yBarScale: yBarScale };
+                }
+                else {
+                    var xMax = (0, d3_array_1.max)(_this._points, function (point) { return point.x; });
+                    // please note these padding default values must be consistent in here
+                    // and CatrtesianChartBase w for more details refer example
+                    // http://using-d3js.com/04_07_ordinal_scales.html
+                    var yBarScale = (0, d3_scale_1.scaleBand)()
+                        .domain(_this._yAxisLabels)
+                        .range([containerHeight - _this.margins.bottom - _this._barHeight / 2, _this.margins.top + _this._barHeight / 2])
+                        .padding(_this.props.yAxisPadding || 0);
+                    var xBarScale = (0, d3_scale_1.scaleLinear)()
+                        .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
+                        .nice()
+                        .range([_this.margins.left, containerWidth - _this.margins.right]);
+                    return { xBarScale: xBarScale, yBarScale: yBarScale };
+                }
+            };
+            _this._closeCallout = function () {
+                _this.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            _this._getLegendData = function (data, palette) {
+                var useSingleColor = _this.props.useSingleColor;
+                var actions = [];
+                data.forEach(function (point, _index) {
+                    var _a, _b, _c, _d;
+                    var color = useSingleColor
+                        ? _this.props.colors
+                            ? _this._createColors()(1)
+                            : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted)
+                        : point.color;
+                    if (_this.props.enableGradient) {
+                        color = ((_b = point.gradient) === null || _b === void 0 ? void 0 : _b[0]) || (0, index_1.getNextGradient)(_index, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted)[0];
+                        if (useSingleColor) {
+                            color = (0, index_1.getNextGradient)(0, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
+                        }
+                    }
+                    // mapping data to the format Legends component needs
+                    var legend = {
+                        title: point.legend,
+                        color: color,
+                        action: function () {
+                            _this._onLegendClick(point.legend);
+                        },
+                        hoverAction: function () {
+                            _this._handleChartMouseLeave();
+                            _this._onLegendHover(point.legend);
+                        },
+                        onMouseOutAction: function (isLegendSelected) {
+                            _this._onLegendLeave(isLegendSelected);
+                        },
+                    };
+                    actions.push(legend);
+                });
+                var legends = (React.createElement(Legends_1.Legends, tslib_1.__assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps)));
+                return legends;
+            };
+            _this._getAxisData = function (yAxisData) {
+                if (yAxisData && yAxisData.yAxisDomainValues.length) {
+                    // For HBCWA x and y Values are swapped
+                    var domainValue = yAxisData.yAxisDomainValues;
+                    _this._xMax = Math.max(domainValue[domainValue.length - 1], _this.props.xMaxValue || 0);
+                }
+            };
+            _this._getAriaLabel = function (point) {
+                var _a;
+                var xValue = point.xAxisCalloutData || point.x;
+                var yValue = point.yAxisCalloutData || point.y;
+                return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ") + "".concat(yValue, ".");
+            };
+            _this._getChartTitle = function () {
+                var _a = _this.props, chartTitle = _a.chartTitle, data = _a.data;
+                return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Horizontal bar chart with ".concat((data === null || data === void 0 ? void 0 : data.length) || 0, " bars. ");
+            };
+            _this.state = {
+                color: '',
+                dataForHoverCard: 0,
+                isCalloutVisible: false,
+                isLegendSelected: false,
+                isLegendHovered: false,
+                refSelected: null,
+                selectedLegendTitle: '',
+                xCalloutValue: '',
+                yCalloutValue: '',
+                activeXdataPoint: null,
+                YValueHover: [],
+                hoverXValue: '',
+            };
+            _this._calloutId = (0, Utilities_1.getId)('callout');
+            _this._tooltipId = (0, Utilities_1.getId)('HBCWATooltipID_');
+            _this._refArray = [];
+            _this._xAxisType =
+                _this.props.data && _this.props.data.length > 0
+                    ? (0, index_1.getTypeOfAxis)(_this.props.data[0].x, true)
+                    : index_1.XAxisTypes.NumericAxis;
+            _this._yAxisType =
+                _this.props.data && _this.props.data.length > 0
+                    ? (0, index_1.getTypeOfAxis)(_this.props.data[0].y, false)
+                    : index_1.YAxisType.StringAxis;
+            return _this;
+        }
+        HorizontalBarChartWithAxisBase.prototype.render = function () {
+            var _this = this;
+            this._adjustProps();
+            var reversedBars = tslib_1.__spreadArray([], this._points, true).reverse();
+            this._yAxisLabels = reversedBars.map(function (point) { return point.y; });
+            this._xMax = Math.max((0, d3_array_1.max)(this._points, function (point) { return point.x; }), this.props.xMaxValue || 0);
+            var legendBars = this._getLegendData(this._points, this.props.theme.palette);
+            this._classNames = getClassNames(this.props.styles, {
+                theme: this.props.theme,
+                legendColor: this.state.color,
+            });
+            var calloutProps = tslib_1.__assign(tslib_1.__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: "toolTip".concat(this._calloutId), target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, color: this.state.color, legend: this.state.selectedLegendTitle, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps), (0, index_1.getAccessibleDataObject)(this.state.callOutAccessibilityData));
+            var tickParams = {
+                tickValues: this.props.tickValues,
+                tickFormat: this.props.tickFormat,
+            };
+            return (React.createElement(CartesianChart_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, chartType: index_1.ChartTypes.HorizontalBarChartWithAxis, xAxisType: this._xAxisType, yAxisType: this._yAxisType, stringDatasetForYAxisDomain: this._yAxisLabels, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_1.createYAxisForHorizontalBarChartWithAxis, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_1.createStringYAxisForHorizontalBarChartWithAxis, getMinMaxOfYAxis: index_1.findHBCWANumericMinMaxOfY, barwidth: this._barHeight, focusZoneDirection: react_focus_1.FocusZoneDirection.vertical, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, 
+                /* eslint-disable react/jsx-no-bind */
+                children: function (props) {
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement("g", null, _this._bars)));
+                } })));
+        };
+        HorizontalBarChartWithAxisBase.prototype._adjustProps = function () {
+            this._points = this.props.data || [];
+            this._barHeight = this.props.barHeight || 32;
+            var palette = this.props.theme.palette;
+            this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];
+        };
+        HorizontalBarChartWithAxisBase.prototype._createColors = function () {
+            var _this = this;
+            var increment = this._colors.length <= 1 ? 1 : 1 / (this._colors.length - 1);
+            var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
+            if (useSingleColor) {
+                return function (_p) {
+                    var _a = _this.props, theme = _a.theme, colors = _a.colors;
+                    return colors && colors.length > 0 ? colors[0] : theme.palette.blueLight;
+                };
+            }
+            var domainValues = [];
+            for (var i = 0; i < this._colors.length; i++) {
+                domainValues.push(increment * i * this._xMax);
+            }
+            var colorScale = (0, d3_scale_1.scaleLinear)().domain(domainValues).range(this._colors);
+            return colorScale;
+        };
+        HorizontalBarChartWithAxisBase.prototype._onBarHover = function (point, color, mouseEvent) {
+            mouseEvent.persist();
+            var _a = this._getCalloutContentForBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
+            if ((this.state.isLegendSelected === false ||
+                (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
+                this._calloutAnchorPoint !== point) {
+                this._calloutAnchorPoint = point;
+                this.setState({
+                    refSelected: mouseEvent,
+                    isCalloutVisible: true,
+                    dataForHoverCard: point.x,
+                    selectedLegendTitle: point.legend,
+                    color: this.props.useSingleColor || this.props.enableGradient ? color : point.color,
+                    // To display callout value, if no callout value given, taking given point.x value as a string.
+                    xCalloutValue: point.yAxisCalloutData || point.y.toString(),
+                    yCalloutValue: point.xAxisCalloutData || point.x.toString(),
+                    dataPointCalloutProps: point,
+                    activeXdataPoint: point.x,
+                    YValueHover: YValueHover,
+                    hoverXValue: hoverXValue,
+                    callOutAccessibilityData: point.callOutAccessibilityData,
+                });
+            }
+        };
+        HorizontalBarChartWithAxisBase.prototype._createNumericBars = function (containerHeight, containerWidth, xElement, yElement) {
+            var _this = this;
+            var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
+            var _b = this._getScales(containerHeight, containerWidth, true), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
+            var sortedBars = tslib_1.__spreadArray([], this._points, true);
+            sortedBars.sort(function (a, b) {
+                var aValue = typeof a.y === 'number' ? a.y : parseFloat(a.y);
+                var bValue = typeof b.y === 'number' ? b.y : parseFloat(b.y);
+                return bValue - aValue;
+            });
+            var bars = sortedBars.map(function (point, index) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var shouldHighlight = true;
+                if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
+                    shouldHighlight = _this.state.selectedLegendTitle === point.legend;
+                }
+                _this._classNames = getClassNames(_this.props.styles, {
+                    theme: _this.props.theme,
+                    legendColor: _this.state.color,
+                    shouldHighlight: shouldHighlight,
+                });
+                var barHeight = Math.max(yBarScale(point.y), 0);
+                if (barHeight < 1) {
+                    return React.createElement(React.Fragment, { key: point.x }, " ");
+                }
+                var startColor;
+                if (useSingleColor) {
+                    //if useSingle color , then check if user has given a palette or not
+                    // and pick the first color from that or else from our paltette.
+                    startColor = _this.props.colors ? _this._createColors()(1) : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                }
+                else {
+                    startColor = _this.props.colors
+                        ? _this._createColors()(point.x)
+                        : (0, index_1.getNextColor)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                }
+                startColor = point.color && !useSingleColor ? point.color : startColor;
+                var endColor = startColor;
+                if (_this.props.enableGradient) {
+                    var pointIndex = Math.max(_this._points.findIndex(function (item) { return item === point; }), 0);
+                    startColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[0]) || (0, index_1.getNextGradient)(pointIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
+                    endColor = ((_e = point.gradient) === null || _e === void 0 ? void 0 : _e[1]) || (0, index_1.getNextGradient)(pointIndex, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
+                    if (useSingleColor) {
+                        startColor = (0, index_1.getNextGradient)(0, 0, (_g = _this.props.theme) === null || _g === void 0 ? void 0 : _g.isInverted)[0];
+                        endColor = (0, index_1.getNextGradient)(0, 0, (_h = _this.props.theme) === null || _h === void 0 ? void 0 : _h.isInverted)[1];
+                    }
+                    _this._points[pointIndex].color = startColor;
+                }
+                var gradientId = (0, Utilities_1.getId)('HBCWA_Gradient') + "_".concat(index, "_").concat(point.x);
+                return (React.createElement(React.Fragment, { key: "".concat(index, "_").concat(point.x) },
+                    _this.props.enableGradient && (React.createElement("defs", null,
+                        React.createElement("linearGradient", { id: gradientId },
+                            React.createElement("stop", { offset: "0", stopColor: startColor }),
+                            React.createElement("stop", { offset: "100%", stopColor: endColor })))),
+                    React.createElement("rect", { key: point.y, x: _this._isRtl ? xBarScale(point.x) : _this.margins.left, className: _this._classNames.opacityChangeOnHover, y: yBarScale(point.y) - _this._barHeight / 2, "data-is-focusable": shouldHighlight, width: _this._isRtl
+                            ? containerWidth - _this.margins.right - Math.max(xBarScale(point.x), 0)
+                            : Math.max(xBarScale(point.x), 0) - _this.margins.left, height: _this._barHeight, ref: function (e) {
+                            _this._refCallback(e, point.legend);
+                        }, rx: _this.props.roundCorners ? 3 : 0, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), "aria-label": _this._getAriaLabel(point), role: "img", "aria-labelledby": "toolTip".concat(_this._calloutId), onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), onBlur: _this._onBarLeave, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor })));
+            });
+            return bars;
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        HorizontalBarChartWithAxisBase.prototype._tooltipOfYAxislabels = function (ytooltipProps) {
+            var _this = this;
+            var tooltipCls = ytooltipProps.tooltipCls, yAxis = ytooltipProps.yAxis, id = ytooltipProps.id;
+            if (yAxis === null) {
+                return null;
+            }
+            var div = (0, d3_selection_1.select)('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
+            var aa = yAxis.selectAll('#BaseSpan')._groups[0];
+            var baseSpanLength = aa && Object.keys(aa).length;
+            var originalDataArray = [];
+            for (var i = 0; i < baseSpanLength; i++) {
+                var originalData = aa[i].dataset && Object.values(aa[i].dataset)[0];
+                originalDataArray.push(originalData);
+            }
+            var tickObject = yAxis.selectAll('.tick')._groups[0];
+            var tickObjectLength = tickObject && Object.keys(tickObject).length;
+            var _loop_1 = function (i) {
+                var d1 = tickObject[i];
+                (0, d3_selection_1.select)(d1)
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .on('mouseover', function (event, d) {
+                    if (!_this.state.tooltipElement) {
+                        div.style('opacity', 0.9);
+                        div
+                            .text(originalDataArray[i])
+                            .style('left', event.pageX + 'px')
+                            .style('top', event.pageY - 28 + 'px');
+                    }
+                })
+                    .on('mouseout', function (d) {
+                    div.style('opacity', 0);
+                });
+            };
+            for (var i = 0; i < tickObjectLength; i++) {
+                _loop_1(i);
+            }
+        };
+        HorizontalBarChartWithAxisBase.prototype._createStringBars = function (containerHeight, containerWidth, xElement, yElement) {
+            var _this = this;
+            var _a = this._getScales(containerHeight, containerWidth, false), xBarScale = _a.xBarScale, yBarScale = _a.yBarScale;
+            var _b = this.props.useSingleColor, useSingleColor = _b === void 0 ? false : _b;
+            var bars = this._points.map(function (point, index) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var barHeight = Math.max(yBarScale(point.y), 0);
+                if (barHeight < 1) {
+                    return React.createElement(React.Fragment, { key: point.x }, " ");
+                }
+                var startColor;
+                if (useSingleColor) {
+                    //if useSingle color , then check if user has given a palette or not
+                    // and pick the first color from that or else from our paltette.
+                    startColor = _this.props.colors ? _this._createColors()(1) : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                }
+                else {
+                    startColor = _this.props.colors
+                        ? _this._createColors()(point.x)
+                        : (0, index_1.getNextColor)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                }
+                startColor = point.color && !useSingleColor ? point.color : startColor;
+                var endColor = startColor;
+                if (_this.props.enableGradient) {
+                    var pointIndex = _this._points.findIndex(function (item) { return item === point; });
+                    startColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[0]) || (0, index_1.getNextGradient)(pointIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
+                    endColor = ((_e = point.gradient) === null || _e === void 0 ? void 0 : _e[1]) || (0, index_1.getNextGradient)(pointIndex, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
+                    if (useSingleColor) {
+                        startColor = (0, index_1.getNextGradient)(0, 0, (_g = _this.props.theme) === null || _g === void 0 ? void 0 : _g.isInverted)[0];
+                        endColor = (0, index_1.getNextGradient)(0, 0, (_h = _this.props.theme) === null || _h === void 0 ? void 0 : _h.isInverted)[1];
+                    }
+                    _this._points[pointIndex].color = startColor;
+                }
+                var gradientId = (0, Utilities_1.getId)('HBCWA_Gradient') + "_".concat(index, "_").concat(point.x);
+                return (React.createElement(React.Fragment, { key: "".concat(index, "_").concat(point.x) },
+                    _this.props.enableGradient && (React.createElement("defs", null,
+                        React.createElement("linearGradient", { id: gradientId },
+                            React.createElement("stop", { offset: "0", stopColor: startColor }),
+                            React.createElement("stop", { offset: "100%", stopColor: endColor })))),
+                    React.createElement("rect", { transform: "translate(0,".concat(0.5 * (yBarScale.bandwidth() - _this._barHeight), ")"), key: point.x, x: _this._isRtl ? xBarScale(point.x) : _this.margins.left, y: yBarScale(point.y), rx: _this.props.roundCorners ? 3 : 0, width: _this._isRtl
+                            ? containerWidth - _this.margins.right - Math.max(xBarScale(point.x), 0)
+                            : Math.max(xBarScale(point.x), 0) - _this.margins.left, height: _this._barHeight, "aria-labelledby": "toolTip".concat(_this._calloutId), "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
+                            _this._refCallback(e, point.legend);
+                        }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), onMouseLeave: _this._onBarLeave, onBlur: _this._onBarLeave, "data-is-focusable": true, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor })));
+            });
+            // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
+            // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
+            // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with this._tooltipId)
+            if (!this.props.showYAxisLablesTooltip) {
+                try {
+                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                    //eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+            }
+            // Used to display tooltip at y axis labels.
+            if (this.props.showYAxisLablesTooltip) {
+                var yAxisElement = (0, d3_selection_1.select)(yElement).call(yBarScale);
+                if (!this.state.tooltipElement) {
+                    try {
+                        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                        //eslint-disable-next-line no-empty
+                    }
+                    catch (e) { }
+                }
+                var ytooltipProps = {
+                    tooltipCls: this._classNames.tooltip,
+                    id: this._tooltipId,
+                    yAxis: yAxisElement,
+                };
+                yAxisElement && this._tooltipOfYAxislabels(ytooltipProps);
+            }
+            return bars;
+        };
+        HorizontalBarChartWithAxisBase.prototype._onLegendClick = function (customMessage) {
+            if (this.state.isLegendSelected) {
+                if (this.state.selectedLegendTitle === customMessage) {
+                    this.setState({
+                        isLegendSelected: false,
+                        selectedLegendTitle: customMessage,
+                    });
+                }
+                else {
+                    this.setState({
+                        selectedLegendTitle: customMessage,
+                    });
+                }
+            }
+            else {
+                this.setState({
+                    isLegendSelected: true,
+                    selectedLegendTitle: customMessage,
+                });
+            }
+        };
+        HorizontalBarChartWithAxisBase.prototype._onLegendHover = function (customMessage) {
+            if (this.state.isLegendSelected === false) {
+                this.setState({
+                    isLegendHovered: true,
+                    selectedLegendTitle: customMessage,
+                });
+            }
+        };
+        HorizontalBarChartWithAxisBase.prototype._onLegendLeave = function (isLegendFocused) {
+            if (!!isLegendFocused || this.state.isLegendSelected === false) {
+                this.setState({
+                    isLegendHovered: false,
+                    selectedLegendTitle: '',
+                    isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
+                });
+            }
+        };
+        return HorizontalBarChartWithAxisBase;
+    }(React.Component));
+    exports.HorizontalBarChartWithAxisBase = HorizontalBarChartWithAxisBase;
+});
+//# sourceMappingURL=HorizontalBarChartWithAxis.base.js.map