define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "../../index", "@fluentui/react-focus", "../../utilities/index", "../../utilities/image-export-utils"], function (require, exports, tslib_1, React, d3_array_1, d3_shape_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, index_1, react_focus_1, index_2, image_export_utils_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.VerticalBarChartBase = void 0;
    var CircleVisbility;
    (function (CircleVisbility) {
        CircleVisbility["show"] = "visibility";
        CircleVisbility["hide"] = "hidden";
    })(CircleVisbility || (CircleVisbility = {}));
    var getClassNames = (0, Utilities_1.classNamesFunction)();
    var MIN_DOMAIN_MARGIN = 8;
    var VerticalBarChartBase = /** @class */ (function (_super) {
        tslib_1.__extends(VerticalBarChartBase, _super);
        function VerticalBarChartBase(props) {
            var _a;
            var _this = _super.call(this, props) || this;
            _this._isRtl = (0, Utilities_1.getRTL)();
            _this.toImage = function (opts) {
                var _a, _b;
                return (0, image_export_utils_1.toImage)((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this._isRtl, opts);
            };
            _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
                var domainNRangeValue;
                if (xAxisType === index_2.XAxisTypes.NumericAxis) {
                    domainNRangeValue = (0, index_2.domainRageOfVerticalNumeric)(points, margins, width, isRTL, barWidth);
                }
                else if (xAxisType === index_2.XAxisTypes.DateAxis) {
                    domainNRangeValue = (0, index_2.domainRangeOfDateForAreaLineVerticalBarChart)(points, margins, width, isRTL, tickValues, chartType, barWidth);
                }
                else {
                    domainNRangeValue = (0, index_2.domainRangeOfXStringAxis)(margins, width, isRTL);
                }
                return domainNRangeValue;
            };
            _this._createLine = function (
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            xScale, 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            yScale, containerHeight, containerWidth, 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            yScaleSecondary) {
                var _a;
                if (containerHeight === void 0) { containerHeight = 0; }
                if (containerWidth === void 0) { containerWidth = 0; }
                var isStringAxis = _this._xAxisType === index_2.XAxisTypes.StringAxis;
                var xBarScale = _this._getScales(containerHeight, containerWidth).xBarScale;
                var colorScale = _this._createColors();
                var theme = _this.props.theme;
                var _b = _this.props, data = _b.data, _c = _b.lineLegendColor, lineLegendColor = _c === void 0 ? theme.palette.yellow : _c, lineLegendText = _b.lineLegendText;
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                var lineData = [];
                var line = [];
                data &&
                    data.forEach(function (item, index) {
                        var _a;
                        if (item.lineData && item.lineData.y) {
                            lineData.push({
                                x: item.x,
                                y: item.lineData.y,
                                useSecondaryYScale: (_a = item.lineData.useSecondaryYScale) !== null && _a !== void 0 ? _a : false,
                                point: item,
                                index: index,
                            });
                        }
                    });
                var linePath = (0, d3_shape_1.line)()
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    .x(function (d) { return (isStringAxis ? xBarScale(d.x) + 0.5 * xBarScale.bandwidth() : xScale(d.x)); })
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    .y(function (d) { return (d.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(d.y) : yScale(d.y)); });
                var shouldHighlight = _this._legendHighlighted(lineLegendText) || _this._noLegendHighlighted() ? true : false;
                var lineBorderWidth = ((_a = _this.props.lineOptions) === null || _a === void 0 ? void 0 : _a.lineBorderWidth)
                    ? Number.parseFloat(_this.props.lineOptions.lineBorderWidth.toString())
                    : 0;
                if (lineBorderWidth > 0) {
                    line.push(React.createElement("path", { key: (0, Utilities_1.getId)('_VBC_line_'), id: (0, Utilities_1.getId)('_VBC_line_'), opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3 + lineBorderWidth * 2, stroke: theme.semanticColors.bodyBackground }));
                }
                line.push(React.createElement("path", { key: (0, Utilities_1.getId)('_VBC_line_'), id: (0, Utilities_1.getId)('_VBC_line_'), opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3, stroke: lineLegendColor }));
                var dots = lineData.map(function (item, index) {
                    var _a;
                    // Create an object to store line point ref so that the object can be passed by reference to the focus handler
                    var circleRef = { refElement: null };
                    return (React.createElement("circle", { key: index, id: (0, Utilities_1.getId)('_VBC_point_'), cx: isStringAxis ? xBarScale(item.x) + 0.5 * xBarScale.bandwidth() : xScale(item.x), cy: item.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(item.y) : yScale(item.y), onMouseOver: _this._legendHighlighted(lineLegendText)
                            ? _this._lineHover.bind(_this, item.point)
                            : _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: _this._getCircleVisibilityAndRadius(item.x, lineLegendText).radius, stroke: lineLegendColor, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, visibility: _this._getCircleVisibilityAndRadius(item.x, lineLegendText).visibility, onClick: (_a = item.point.lineData) === null || _a === void 0 ? void 0 : _a.onClick, "data-is-focusable": _this._legendHighlighted(lineLegendText), ref: function (e) { return (circleRef.refElement = e); }, onFocus: _this._lineFocus.bind(_this, item.point, circleRef), onBlur: _this._handleChartMouseLeave }));
                });
                return (React.createElement(React.Fragment, null,
                    line,
                    dots));
            };
            _this._getCircleVisibilityAndRadius = function (xAxisPoint, legend) {
                var activeXdataPoint = _this.state.activeXdataPoint;
                if (!_this._noLegendHighlighted()) {
                    if (xAxisPoint === activeXdataPoint && _this._legendHighlighted(legend)) {
                        return { visibility: CircleVisbility.show, radius: 8 };
                    }
                    else if (_this._legendHighlighted(legend)) {
                        // Don't hide the circle to keep it focusable. For more information,
                        // see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
                        return { visibility: CircleVisbility.show, radius: 0.3 };
                    }
                    else {
                        return { visibility: CircleVisbility.hide, radius: 0 };
                    }
                }
                else {
                    return {
                        visibility: activeXdataPoint === xAxisPoint ? CircleVisbility.show : CircleVisbility.hide,
                        radius: 8,
                    };
                }
            };
            _this._checkForLine = function () {
                var data = _this.props.data;
                return data.some(function (item) { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined; });
            };
            _this._getMargins = function (margins) {
                _this.margins = margins;
            };
            _this._renderContentForBothLineAndBars = function (point) {
                var _a = _this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
                var content = YValueHover.map(function (item, index) {
                    return (React.createElement(index_1.ChartHoverCard, tslib_1.__assign({ key: index, Legend: item.legend }, (index === 0 && { XValue: "".concat(hoverXValue || item.data) }), { color: item.color, YValue: item.data || item.y, culture: _this.props.culture })));
                });
                return React.createElement(React.Fragment, null, content);
            };
            _this._renderContentForOnlyBars = function (props) {
                var _a = _this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
                return (React.createElement(React.Fragment, null,
                    React.createElement(index_1.ChartHoverCard, { XValue: props.xAxisCalloutData || props.x, Legend: props.legend, YValue: props.yAxisCalloutData || props.y, color: !useSingleColor && props.color ? props.color : _this._createColors()(props.y), culture: _this.props.culture })));
            };
            _this._renderCallout = function (props) {
                return props
                    ? _this._isHavingLine
                        ? _this._renderContentForBothLineAndBars(props)
                        : _this._renderContentForOnlyBars(props)
                    : null;
            };
            _this._getCustomizedCallout = function () {
                return _this.props.onRenderCalloutPerDataPoint
                    ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps, _this._renderCallout)
                    : null;
            };
            _this._getGraphData = function (
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            xScale, yScale, containerHeight, containerWidth, xElement) {
                return (_this._bars =
                    _this._xAxisType === index_2.XAxisTypes.NumericAxis
                        ? _this._createNumericBars(containerHeight, containerWidth, xElement)
                        : _this._xAxisType === index_2.XAxisTypes.DateAxis
                            ? _this._createDateBars(containerHeight, containerWidth, xElement)
                            : _this._createStringBars(containerHeight, containerWidth, xElement));
            };
            _this._refCallback = function (element, legendTitle) {
                _this._refArray.push({ index: legendTitle, refElement: element });
            };
            _this._getCalloutContentForLineAndBar = function (point) {
                var _a, _b, _c, _d, _e;
                var YValueHover = [];
                var _f = _this.props, theme = _f.theme, _g = _f.useSingleColor, useSingleColor = _g === void 0 ? false : _g, enableGradient = _f.enableGradient;
                var _h = _this.props, data = _h.data, lineLegendText = _h.lineLegendText, _j = _h.lineLegendColor, lineLegendColor = _j === void 0 ? theme.palette.yellow : _j;
                var selectedPoint = data.filter(function (xDataPoint) { return xDataPoint.x === point.x; });
                var pointIndex = data.indexOf(selectedPoint[0]);
                var calloutColor = !useSingleColor
                    ? selectedPoint[0].color
                        ? selectedPoint[0].color
                        : _this._createColors()(selectedPoint[0].y)
                    : _this._createColors()(1);
                // there might be no y value of the line for the hovered bar. so we need to check this condition
                if (_this._isHavingLine &&
                    ((_a = selectedPoint[0].lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined &&
                    (_this._legendHighlighted(lineLegendText) || _this._noLegendHighlighted())) {
                    // callout data for the  line
                    YValueHover.push({
                        legend: lineLegendText,
                        color: lineLegendColor,
                        y: (_b = selectedPoint[0].lineData) === null || _b === void 0 ? void 0 : _b.y,
                        data: (_c = selectedPoint[0].lineData) === null || _c === void 0 ? void 0 : _c.yAxisCalloutData,
                        yAxisCalloutData: (_d = selectedPoint[0].lineData) === null || _d === void 0 ? void 0 : _d.yAxisCalloutData,
                    });
                }
                if (_this._legendHighlighted(selectedPoint[0].legend) || _this._noLegendHighlighted()) {
                    // callout data for the bar
                    YValueHover.push({
                        legend: selectedPoint[0].legend,
                        y: selectedPoint[0].y,
                        color: enableGradient
                            ? useSingleColor
                                ? (0, index_2.getNextGradient)(0, 0)[0]
                                : ((_e = selectedPoint[0].gradient) === null || _e === void 0 ? void 0 : _e[0]) || (0, index_2.getNextGradient)(pointIndex, 0)[0]
                            : calloutColor,
                        data: selectedPoint[0].yAxisCalloutData,
                        yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
                    });
                }
                var hoverXValue = point.x instanceof Date ? (0, index_2.formatDate)(point.x, _this.props.useUTC) : point.x.toString();
                return {
                    YValueHover: YValueHover,
                    hoverXValue: point.xAxisCalloutData || hoverXValue,
                };
            };
            _this._onBarLeave = function () {
                /**/
            };
            _this._handleChartMouseLeave = function () {
                _this._calloutAnchorPoint = null;
                _this.setState({
                    isCalloutVisible: false,
                    activeXdataPoint: null,
                    YValueHover: [],
                    hoverXValue: '',
                });
            };
            _this._onBarFocus = function (point, refArrayIndexNumber, color) {
                var _a = _this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
                _this._refArray.forEach(function (obj, index) {
                    if (obj.index === point.legend && refArrayIndexNumber === index) {
                        _this.setState({
                            refSelected: obj.refElement,
                            /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
                            isCalloutVisible: _this._noLegendHighlighted() || _this._legendHighlighted(point.legend),
                            calloutLegend: point.legend,
                            dataForHoverCard: point.y,
                            color: point.color || color,
                            xCalloutValue: point.xAxisCalloutData ||
                                (point.x instanceof Date ? (0, index_2.formatDate)(point.x, _this.props.useUTC) : point.x.toString()),
                            yCalloutValue: point.yAxisCalloutData,
                            dataPointCalloutProps: point,
                            activeXdataPoint: point.x,
                            YValueHover: YValueHover,
                            hoverXValue: hoverXValue,
                            callOutAccessibilityData: point.callOutAccessibilityData,
                        });
                    }
                });
            };
            _this._lineHover = function (point, mouseEvent) {
                mouseEvent.persist();
                _this._lineHoverFocus(point, mouseEvent);
            };
            _this._lineFocus = function (point, ref) {
                if (ref.refElement) {
                    _this._lineHoverFocus(point, ref.refElement);
                }
            };
            _this._lineHoverFocus = function (point, refSelected) {
                var theme = _this.props.theme;
                var _a = _this.props, _b = _a.lineLegendText, lineLegendText = _b === void 0 ? '' : _b, _c = _a.lineLegendColor, lineLegendColor = _c === void 0 ? theme.palette.yellow : _c;
                _this.setState({
                    refSelected: refSelected,
                    isCalloutVisible: true,
                    calloutLegend: lineLegendText,
                    dataForHoverCard: point.lineData.y,
                    color: lineLegendColor,
                    xCalloutValue: point.xAxisCalloutData ||
                        (point.x instanceof Date ? (0, index_2.formatDate)(point.x, _this.props.useUTC) : point.x.toString()),
                    yCalloutValue: point.lineData.yAxisCalloutData,
                    dataPointCalloutProps: point,
                    activeXdataPoint: point.x,
                });
            };
            _this._getScales = function (containerHeight, containerWidth) {
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                var xBarScale;
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                var yBarScale = (0, d3_scale_1.scaleLinear)()
                    .domain([_this.props.supportNegativeData ? _this._yMin : 0, _this._yMax])
                    .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
                if (_this._xAxisType === index_2.XAxisTypes.NumericAxis) {
                    var xMax = (0, d3_array_1.max)(_this._points, function (point) { return point.x; });
                    var xMin = (0, d3_array_1.min)(_this._points, function (point) { return point.x; });
                    xBarScale = (0, d3_scale_1.scaleLinear)()
                        .domain(_this._isRtl ? [xMax, xMin] : [xMin, xMax])
                        .nice()
                        .range([_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin]);
                }
                else if (_this._xAxisType === index_2.XAxisTypes.DateAxis) {
                    var sDate = (0, d3_array_1.min)(_this._points, function (point) { return point.x; });
                    var lDate = (0, d3_array_1.max)(_this._points, function (point) { return point.x; });
                    xBarScale = _this.props.useUTC ? (0, d3_scale_1.scaleUtc)() : (0, d3_scale_1.scaleTime)();
                    xBarScale
                        .domain([sDate, lDate])
                        .range(_this._isRtl
                        ? [containerWidth - _this.margins.right - _this._domainMargin, _this.margins.left + _this._domainMargin]
                        : [_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin]);
                }
                else {
                    xBarScale = (0, d3_scale_1.scaleBand)()
                        .domain(_this._xAxisLabels)
                        .range(_this._isRtl
                        ? [containerWidth - _this.margins.right - _this._domainMargin, _this.margins.left + _this._domainMargin]
                        : [_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin])
                        .paddingInner(_this._xAxisInnerPadding)
                        .paddingOuter(_this._xAxisOuterPadding);
                }
                return { xBarScale: xBarScale, yBarScale: yBarScale };
            };
            _this._closeCallout = function () {
                _this.setState({
                    isCalloutVisible: false,
                });
            };
            _this._getLegendData = function (data, palette) {
                var _a = _this.props, theme = _a.theme, useSingleColor = _a.useSingleColor;
                var _b = _this.props, lineLegendText = _b.lineLegendText, _c = _b.lineLegendColor, lineLegendColor = _c === void 0 ? theme.palette.yellow : _c;
                var actions = [];
                var mapLegendToColor = {};
                data.forEach(function (point, _index) {
                    var _a, _b, _c;
                    var color = !useSingleColor ? point.color : _this._createColors()(1);
                    if (_this.props.enableGradient) {
                        var pointIndex = Math.max(((_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.findIndex(function (item) { return item.legend === point.legend; })) || 0, 0);
                        color = ((_b = point.gradient) === null || _b === void 0 ? void 0 : _b[0]) || (0, index_2.getNextGradient)(pointIndex, 0, theme === null || theme === void 0 ? void 0 : theme.isInverted)[0];
                        if (useSingleColor) {
                            color = (0, index_2.getNextGradient)(0, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted)[0];
                        }
                    }
                    mapLegendToColor[point.legend] = color;
                });
                Object.entries(mapLegendToColor).forEach(function (_a) {
                    var legendTitle = _a[0], color = _a[1];
                    // mapping data to the format Legends component needs
                    var legend = {
                        title: legendTitle,
                        color: color,
                        hoverAction: function () {
                            _this._handleChartMouseLeave();
                            _this._onLegendHover(legendTitle);
                        },
                        onMouseOutAction: function () {
                            _this._onLegendLeave();
                        },
                    };
                    actions.push(legend);
                });
                if (_this._isHavingLine && lineLegendText && lineLegendColor) {
                    var lineLegend = {
                        title: lineLegendText,
                        color: lineLegendColor,
                        hoverAction: function () {
                            _this._handleChartMouseLeave();
                            _this._onLegendHover(lineLegendText);
                        },
                        onMouseOutAction: function () {
                            _this._onLegendLeave();
                        },
                        isLineLegendInBarChart: true,
                    };
                    actions.unshift(lineLegend);
                }
                var legends = (React.createElement(index_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, { onChange: _this._onLegendSelectionChange.bind(_this), ref: _this._legendsRef })));
                return legends;
            };
            _this._getAxisData = function (yAxisData) {
                if (yAxisData && yAxisData.yAxisDomainValues.length) {
                    var domainValue = yAxisData.yAxisDomainValues;
                    _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
                    _this._yMin = Math.min(domainValue[0], _this.props.yMinValue || 0);
                }
            };
            /**
             * 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._getHighlightedLegend().includes(legendTitle);
            };
            /**
             * This function checks if none of the legends is selected or hovered.
             */
            _this._noLegendHighlighted = function () {
                return _this._getHighlightedLegend().length === 0;
            };
            _this._getAriaLabel = function (point) {
                var _a, _b, _c;
                var xValue = point.xAxisCalloutData
                    ? point.xAxisCalloutData
                    : point.x instanceof Date
                        ? (0, index_2.formatDate)(point.x, _this.props.useUTC)
                        : point.x;
                var legend = point.legend;
                var yValue = point.yAxisCalloutData || point.y;
                var lineLegend = _this.props.lineLegendText || 'Line';
                var lineYValue = ((_a = point.lineData) === null || _a === void 0 ? void 0 : _a.yAxisCalloutData) || ((_b = point.lineData) === null || _b === void 0 ? void 0 : _b.y);
                return (((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel) ||
                    "".concat(xValue, ". ") +
                        (legend ? "".concat(legend, ", ") : '') +
                        "".concat(yValue, ".") +
                        (typeof lineYValue !== 'undefined' ? " ".concat(lineLegend, ", ").concat(lineYValue, ".") : ''));
            };
            _this._getDomainMargins = function (containerWidth) {
                var _a;
                _this._domainMargin = MIN_DOMAIN_MARGIN;
                /** Total width available to render the bars */
                var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
                /** Rate at which the space between the bars changes wrt the bar width */
                var barGapRate = _this._xAxisInnerPadding / (1 - _this._xAxisInnerPadding);
                if (_this._xAxisType === index_2.XAxisTypes.StringAxis) {
                    if ((0, index_2.isScalePaddingDefined)(_this.props.xAxisOuterPadding, _this.props.xAxisPadding)) {
                        // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
                        // to adjust the space before the first bar and after the last bar.
                        _this._domainMargin = 0;
                    }
                    else if (_this.props.barWidth !== 'auto') {
                        // Update the bar width so that when CartesianChart rerenders,
                        // the following calculations don't use the previous bar width.
                        _this._barWidth = (0, index_2.getBarWidth)(_this.props.barWidth, _this.props.maxBarWidth);
                        /** Total width required to render the bars. Directly proportional to bar width */
                        var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * barGapRate) * _this._barWidth;
                        if (totalWidth >= reqWidth) {
                            // Center align the chart by setting equal left and right margins for domain
                            _this._domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
                        }
                    }
                    else if (_this.props.mode === 'plotly' && _this._xAxisLabels.length > 1) {
                        // Calculate the remaining width after rendering bars at their maximum allowable width
                        var bandwidth = totalWidth / (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * barGapRate);
                        var barWidth = (0, index_2.getBarWidth)(_this.props.barWidth, _this.props.maxBarWidth, bandwidth);
                        var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * barGapRate) * barWidth;
                        var margin1 = (totalWidth - reqWidth) / 2;
                        // Calculate the remaining width after accounting for the space required to render x-axis labels
                        var step = (0, index_2.calculateLongestLabelWidth)(_this._xAxisLabels) + 20;
                        reqWidth = (_this._xAxisLabels.length - _this._xAxisInnerPadding) * step;
                        var margin2 = (totalWidth - reqWidth) / 2;
                        _this._domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
                    }
                }
                else {
                    var uniqueX_1 = {};
                    (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.forEach(function (point) {
                        if (point.x instanceof Date) {
                            uniqueX_1[point.x.getTime()] = point.x;
                        }
                        else {
                            uniqueX_1[point.x] = point.x;
                        }
                    });
                    var data = Object.values(uniqueX_1);
                    _this._barWidth = (0, index_2.getBarWidth)(_this.props.barWidth, _this.props.maxBarWidth, (0, index_2.calculateAppropriateBarWidth)(data, totalWidth));
                    _this._domainMargin = MIN_DOMAIN_MARGIN + _this._barWidth / 2;
                }
                return tslib_1.__assign(tslib_1.__assign({}, _this.margins), { left: _this.margins.left + _this._domainMargin, right: _this.margins.right + _this._domainMargin });
            };
            _this._getChartTitle = function () {
                var _a = _this.props, chartTitle = _a.chartTitle, data = _a.data;
                return ((chartTitle ? "".concat(chartTitle, ". ") : '') +
                    "Vertical bar chart with ".concat((data === null || data === void 0 ? void 0 : data.length) || 0, " bars") +
                    (_this._isHavingLine ? ' and 1 line' : '') +
                    '. ');
            };
            (0, Utilities_1.initializeComponentRef)(_this);
            _this.state = {
                color: '',
                dataForHoverCard: 0,
                isCalloutVisible: false,
                refSelected: null,
                selectedLegends: ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || [],
                activeLegend: undefined,
                xCalloutValue: '',
                yCalloutValue: '',
                activeXdataPoint: null,
                YValueHover: [],
                hoverXValue: '',
                calloutLegend: '',
            };
            _this._isHavingLine = _this._checkForLine();
            _this._calloutId = (0, Utilities_1.getId)('callout');
            _this._tooltipId = (0, Utilities_1.getId)('VCTooltipID_');
            _this._refArray = [];
            _this._xAxisType =
                _this.props.data && _this.props.data.length > 0
                    ? (0, index_2.getTypeOfAxis)(_this.props.data[0].x, true)
                    : index_2.XAxisTypes.StringAxis;
            _this._emptyChartId = (0, Utilities_1.getId)('_VBC_empty');
            _this._domainMargin = MIN_DOMAIN_MARGIN;
            _this._cartesianChartRef = React.createRef();
            _this._legendsRef = React.createRef();
            return _this;
        }
        VerticalBarChartBase.prototype.componentDidUpdate = function (prevProps) {
            var _a, _b, _c;
            if (!(0, index_2.areArraysEqual)((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
                this.setState({
                    selectedLegends: ((_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || [],
                });
            }
        };
        VerticalBarChartBase.prototype.render = function () {
            var _this = this;
            this._adjustProps();
            this._xAxisLabels = this._points.map(function (point) { return point.x; });
            this._yMax = Math.max((0, d3_array_1.max)(this._points, function (point) { return point.y; }), this.props.yMaxValue || 0);
            this._yMin = Math.min((0, d3_array_1.min)(this._points, function (point) { return point.y; }), this.props.yMinValue || 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(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 }, (this._isHavingLine && {
                YValueHover: this.state.YValueHover,
                hoverXValue: this.state.hoverXValue,
            })), { gapSpace: 15, color: this.state.color, legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }), this.props.calloutProps), (0, index_2.getAccessibleDataObject)(this.state.callOutAccessibilityData));
            var tickParams = {
                tickValues: this.props.tickValues,
                tickFormat: this.props.tickFormat,
            };
            return !this._isChartEmpty() ? (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, supportNegativeData: this.props.supportNegativeData, chartType: index_2.ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: index_2.createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine &&
                (this._noLegendHighlighted() || this._getHighlightedLegend().length > 1) && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: react_focus_1.FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: index_2.createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: index_2.findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_2.XAxisTypes.StringAxis && {
                xAxisInnerPadding: this._xAxisInnerPadding,
                xAxisOuterPadding: this._xAxisOuterPadding,
            }), { ref: this._cartesianChartRef, 
                /* eslint-disable react/jsx-no-bind */
                children: function (props) {
                    return (React.createElement(React.Fragment, null,
                        React.createElement("g", null, _this._bars),
                        _this._isHavingLine && (React.createElement("g", null, _this._createLine(props.xScale, props.yScale, props.containerHeight, props.containerWidth, props.yScaleSecondary)))));
                } }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
        };
        Object.defineProperty(VerticalBarChartBase.prototype, "chartContainer", {
            get: function () {
                var _a;
                return ((_a = this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer) || null;
            },
            enumerable: false,
            configurable: true
        });
        VerticalBarChartBase.prototype._adjustProps = function () {
            this._points = this.props.data || [];
            this._barWidth = (0, index_2.getBarWidth)(this.props.barWidth, this.props.maxBarWidth);
            var palette = this.props.theme.palette;
            this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];
            this._isHavingLine = this._checkForLine();
            this._xAxisInnerPadding = (0, index_2.getScalePadding)(this.props.xAxisInnerPadding, this.props.xAxisPadding, 2 / 3);
            this._xAxisOuterPadding = (0, index_2.getScalePadding)(this.props.xAxisOuterPadding, this.props.xAxisPadding, 0);
        };
        VerticalBarChartBase.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._yMax);
            }
            var colorScale = (0, d3_scale_1.scaleLinear)().domain(domainValues).range(this._colors);
            return colorScale;
        };
        VerticalBarChartBase.prototype._onBarHover = function (point, color, mouseEvent) {
            mouseEvent.persist();
            var _a = this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
            if (this._calloutAnchorPoint !== point) {
                this._calloutAnchorPoint = point;
                this.setState({
                    refSelected: mouseEvent,
                    /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
                    isCalloutVisible: this._noLegendHighlighted() || this._legendHighlighted(point.legend),
                    dataForHoverCard: point.y,
                    calloutLegend: point.legend,
                    color: point.color || color,
                    // To display callout value, if no callout value given, taking given point.x value as a string.
                    xCalloutValue: point.xAxisCalloutData ||
                        (point.x instanceof Date ? (0, index_2.formatDate)(point.x, this.props.useUTC) : point.x.toString()),
                    yCalloutValue: point.yAxisCalloutData,
                    dataPointCalloutProps: point,
                    // Hovering over a bar should highlight corresponding line points only when no legend is selected
                    activeXdataPoint: this._noLegendHighlighted() || this._legendHighlighted(point.legend) ? point.x : null,
                    YValueHover: YValueHover,
                    hoverXValue: hoverXValue,
                    callOutAccessibilityData: point.callOutAccessibilityData,
                });
            }
        };
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        VerticalBarChartBase.prototype._calculateMinBarHeight = function (yMin, yMax, yReferencePoint, yBarScale) {
            var maxHeightFromBaseline = yMax < 0
                ? Math.abs(yMin - yReferencePoint)
                : Math.max(Math.abs(yMax - yReferencePoint), Math.abs(yMin - yReferencePoint));
            return Math.ceil(yBarScale(maxHeightFromBaseline) / 100.0);
        };
        VerticalBarChartBase.prototype._createNumericBars = function (containerHeight, containerWidth, xElement) {
            var _this = this;
            var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
            var _b = this._getScales(containerHeight, containerWidth), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
            var colorScale = this._createColors();
            var yReferencePoint = this._yMax < 0 ? this._yMax : 0;
            var bars = this._points.map(function (point, index) {
                var _a, _b, _c, _d, _e, _f;
                var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
                _this._classNames = getClassNames(_this.props.styles, {
                    theme: _this.props.theme,
                    legendColor: _this.state.color,
                    shouldHighlight: shouldHighlight,
                });
                var barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
                var isHeightNegative = barHeight < 0;
                barHeight = Math.abs(barHeight);
                // Calculate threshold for minimum visible bar height
                var minBarHeight = _this._calculateMinBarHeight(_this._yMin, _this._yMax, yReferencePoint, yBarScale);
                var adjustedBarHeight = barHeight;
                if (barHeight === 0 || (isHeightNegative && !_this.props.supportNegativeData)) {
                    return React.createElement(React.Fragment, { key: point.x }, " ");
                }
                // Adjust bar height if it's smaller than the threshold
                else if (barHeight <= minBarHeight) {
                    adjustedBarHeight = minBarHeight;
                }
                var xPoint = xBarScale(point.x) - _this._barWidth / 2;
                var yPoint = containerHeight -
                    _this.margins.bottom -
                    (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) -
                    yBarScale(yReferencePoint);
                var baselineHeight = containerHeight - _this.margins.bottom - yBarScale(yReferencePoint);
                var startColor = point.color && !useSingleColor ? point.color : colorScale(point.y);
                var endColor = startColor;
                if (_this.props.enableGradient) {
                    startColor = ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || (0, index_2.getNextGradient)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
                    endColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[1]) || (0, index_2.getNextGradient)(index, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[1];
                    if (useSingleColor) {
                        startColor = (0, index_2.getNextGradient)(0, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[0];
                        endColor = (0, index_2.getNextGradient)(0, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
                    }
                    _this._points[index].color = startColor;
                }
                var gradientId = (0, Utilities_1.getId)('VBC_Gradient') + "_".concat(index, "_").concat(startColor);
                return (React.createElement("g", { key: "".concat(point.x, "_").concat(index) },
                    _this.props.enableGradient && (React.createElement("defs", null,
                        React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
                            React.createElement("stop", { offset: "0", stopColor: startColor }),
                            React.createElement("stop", { offset: "100%", stopColor: endColor })))),
                    React.createElement("rect", { id: (0, Utilities_1.getId)('_VBC_bar_'), x: xPoint, className: _this._classNames.opacityChangeOnHover, y: !isHeightNegative ? yPoint : baselineHeight, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, height: adjustedBarHeight, ref: function (e) {
                            _this._refCallback(e, point.legend);
                        }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), onBlur: _this._onBarLeave, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
                    _this._renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative)));
            });
            // Removing un wanted tooltip div from DOM, when prop not provided.
            if (!this.props.showXAxisLablesTooltip) {
                try {
                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
                    // eslint-disable-next-line no-empty
                }
                catch (e) { }
            }
            // Used to display tooltip at x axis labels.
            if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {
                var xAxisElement = (0, d3_selection_1.select)(xElement).call(xBarScale);
                try {
                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
                    // eslint-disable-next-line no-empty
                }
                catch (e) { }
                var tooltipProps = {
                    tooltipCls: this._classNames.tooltip,
                    id: this._tooltipId,
                    xAxis: xAxisElement,
                };
                xAxisElement && (0, index_2.tooltipOfXAxislabels)(tooltipProps);
            }
            return bars;
        };
        VerticalBarChartBase.prototype._createStringBars = function (containerHeight, containerWidth, xElement) {
            var _this = this;
            var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
            var _b = this._getScales(containerHeight, containerWidth), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
            var colorScale = this._createColors();
            var yReferencePoint = this._yMax < 0 ? this._yMax : 0;
            var bars = this._points.map(function (point, index) {
                var _a, _b, _c, _d, _e, _f;
                var barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
                var isHeightNegative = barHeight < 0;
                barHeight = Math.abs(barHeight);
                // Calculate threshold for minimum visible bar height
                var minBarHeight = _this._calculateMinBarHeight(_this._yMin, _this._yMax, yReferencePoint, yBarScale);
                var adjustedBarHeight = barHeight;
                if (barHeight === 0 || (isHeightNegative && !_this.props.supportNegativeData)) {
                    return React.createElement(React.Fragment, { key: point.x }, " ");
                }
                // Adjust bar height if it's smaller than the threshold
                else if (barHeight <= minBarHeight) {
                    adjustedBarHeight = minBarHeight;
                }
                var xPoint = xBarScale(point.x);
                var yPoint = containerHeight -
                    _this.margins.bottom -
                    (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) -
                    yBarScale(yReferencePoint);
                var baselineHeight = containerHeight - _this.margins.bottom - yBarScale(yReferencePoint);
                // Setting the bar width here is safe because there are no dependencies earlier in the code
                // that rely on the width of bars in vertical bar charts with string x-axis.
                _this._barWidth = (0, index_2.getBarWidth)(_this.props.barWidth, _this.props.maxBarWidth, xBarScale.bandwidth());
                var startColor = point.color ? point.color : colorScale(point.y);
                var endColor = startColor;
                if (_this.props.enableGradient) {
                    startColor = ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || (0, index_2.getNextGradient)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
                    endColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[1]) || (0, index_2.getNextGradient)(index, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[1];
                    if (useSingleColor) {
                        startColor = (0, index_2.getNextGradient)(0, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[0];
                        endColor = (0, index_2.getNextGradient)(0, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
                    }
                    _this._points[index].color = startColor;
                }
                var gradientId = (0, Utilities_1.getId)('VBC_Gradient') + "_".concat(index, "_").concat(startColor);
                return (React.createElement("g", { key: point.x instanceof Date ? "".concat(point.x.getTime(), "_").concat(index) : "".concat(point.x, "_").concat(index), transform: "translate(".concat(0.5 * (xBarScale.bandwidth() - _this._barWidth), ", 0)") },
                    _this.props.enableGradient && (React.createElement("defs", null,
                        React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
                            React.createElement("stop", { offset: "0", stopColor: startColor }),
                            React.createElement("stop", { offset: "100%", stopColor: endColor })))),
                    React.createElement("rect", { id: (0, Utilities_1.getId)('_VBC_bar_'), x: xPoint, y: !isHeightNegative ? yPoint : baselineHeight, width: _this._barWidth, height: adjustedBarHeight, "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": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
                    _this._renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative)));
            });
            // Removing un wanted tooltip div from DOM, when prop not provided.
            if (!this.props.showXAxisLablesTooltip) {
                try {
                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
                    // eslint-disable-next-line no-empty
                }
                catch (e) { }
            }
            // Used to display tooltip at x axis labels.
            if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {
                var xAxisElement = (0, d3_selection_1.select)(xElement).call(xBarScale);
                try {
                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
                    // eslint-disable-next-line no-empty
                }
                catch (e) { }
                var tooltipProps = {
                    tooltipCls: this._classNames.tooltip,
                    id: this._tooltipId,
                    xAxis: xAxisElement,
                    showTooltip: this.props.showXAxisLablesTooltip,
                };
                xAxisElement && (0, index_2.tooltipOfXAxislabels)(tooltipProps);
            }
            return bars;
        };
        VerticalBarChartBase.prototype._createDateBars = function (containerHeight, containerWidth, xElement) {
            var _this = this;
            var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
            var _b = this._getScales(containerHeight, containerWidth), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
            var colorScale = this._createColors();
            var yReferencePoint = this._yMax < 0 ? this._yMax : 0;
            var bars = this._points.map(function (point, index) {
                var _a, _b, _c, _d, _e, _f;
                var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
                _this._classNames = getClassNames(_this.props.styles, {
                    theme: _this.props.theme,
                    legendColor: _this.state.color,
                    shouldHighlight: shouldHighlight,
                });
                var barHeight = yBarScale(point.y) - yBarScale(yReferencePoint);
                var isHeightNegative = barHeight < 0;
                barHeight = Math.abs(barHeight);
                // Calculate threshold for minimum visible bar height
                var minBarHeight = _this._calculateMinBarHeight(_this._yMin, _this._yMax, yReferencePoint, yBarScale);
                var adjustedBarHeight = barHeight;
                if (barHeight === 0 || (isHeightNegative && !_this.props.supportNegativeData)) {
                    return React.createElement(React.Fragment, { key: point.x }, " ");
                }
                // Adjust bar height if it's smaller than the threshold
                else if (barHeight <= minBarHeight) {
                    adjustedBarHeight = minBarHeight;
                }
                var xPoint = xBarScale(point.x) - _this._barWidth / 2;
                var yPoint = containerHeight -
                    _this.margins.bottom -
                    (isHeightNegative ? -1 * adjustedBarHeight : adjustedBarHeight) -
                    yBarScale(yReferencePoint);
                var baselineHeight = containerHeight - _this.margins.bottom - yBarScale(yReferencePoint);
                var startColor = point.color && !useSingleColor ? point.color : colorScale(point.y);
                var endColor = startColor;
                if (_this.props.enableGradient) {
                    startColor = ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || (0, index_2.getNextGradient)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
                    endColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[1]) || (0, index_2.getNextGradient)(index, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[1];
                    if (useSingleColor) {
                        startColor = (0, index_2.getNextGradient)(0, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[0];
                        endColor = (0, index_2.getNextGradient)(0, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
                    }
                    _this._points[index].color = startColor;
                }
                var gradientId = (0, Utilities_1.getId)('VBC_Gradient') + "_".concat(index, "_").concat(startColor);
                return (React.createElement("g", { key: point.x instanceof Date ? "".concat(point.x.getTime(), "_").concat(index) : "".concat(point.x, "_").concat(index) },
                    _this.props.enableGradient && (React.createElement("defs", null,
                        React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
                            React.createElement("stop", { offset: "0", stopColor: startColor }),
                            React.createElement("stop", { offset: "100%", stopColor: endColor })))),
                    React.createElement("rect", { id: (0, Utilities_1.getId)('_VBC_bar_'), x: xPoint, className: _this._classNames.opacityChangeOnHover, y: !isHeightNegative ? yPoint : baselineHeight, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, height: adjustedBarHeight, ref: function (e) {
                            _this._refCallback(e, point.legend);
                        }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), onBlur: _this._onBarLeave, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
                    _this._renderBarLabel(xPoint, yPoint, point.y, point.legend, isHeightNegative)));
            });
            // Removing un wanted tooltip div from DOM, when prop not provided.
            if (!this.props.showXAxisLablesTooltip) {
                try {
                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
                    // eslint-disable-next-line no-empty
                }
                catch (e) { }
            }
            // Used to display tooltip at x axis labels.
            if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {
                var xAxisElement = (0, d3_selection_1.select)(xElement).call(xBarScale);
                try {
                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
                    // eslint-disable-next-line no-empty
                }
                catch (e) { }
                var tooltipProps = {
                    tooltipCls: this._classNames.tooltip,
                    id: this._tooltipId,
                    xAxis: xAxisElement,
                };
                xAxisElement && (0, index_2.tooltipOfXAxislabels)(tooltipProps);
            }
            return bars;
        };
        VerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
            this.setState({
                activeLegend: legendTitle,
            });
        };
        VerticalBarChartBase.prototype._onLegendLeave = function () {
            this.setState({
                activeLegend: undefined,
            });
        };
        VerticalBarChartBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {
            var _a, _b;
            if ((_a = this.props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
                this.setState({ selectedLegends: selectedLegends });
            }
            else {
                this.setState({ selectedLegends: selectedLegends.slice(-1) });
            }
            if ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
                this.props.legendProps.onChange(selectedLegends, event, currentLegend);
            }
        };
        VerticalBarChartBase.prototype._getHighlightedLegend = function () {
            return this.state.selectedLegends.length > 0
                ? this.state.selectedLegends
                : this.state.activeLegend
                    ? [this.state.activeLegend]
                    : [];
        };
        VerticalBarChartBase.prototype._renderBarLabel = function (xPoint, yPoint, barValue, legend, isNegativeBar) {
            if (this.props.hideLabels ||
                this._barWidth < 16 ||
                !(this._legendHighlighted(legend) || this._noLegendHighlighted())) {
                return null;
            }
            return (React.createElement("text", { x: xPoint + this._barWidth / 2, y: isNegativeBar ? yPoint + 12 : yPoint - 6, textAnchor: "middle", className: this._classNames.barLabel, "aria-hidden": true }, (0, index_2.formatValueWithSIPrefix)(barValue)));
        };
        VerticalBarChartBase.prototype._isChartEmpty = function () {
            return this._points.length === 0 || (this._points.every(function (point) { return point.y === 0; }) && !this._isHavingLine);
        };
        VerticalBarChartBase.defaultProps = {
            maxBarWidth: 24,
            useUTC: true,
        };
        return VerticalBarChartBase;
    }(React.Component));
    exports.VerticalBarChartBase = VerticalBarChartBase;
});
//# sourceMappingURL=VerticalBarChart.base.js.map