define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "../../utilities/index", "../../index", "../../utilities/image-export-utils"], function (require, exports, tslib_1, React, d3_array_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, react_focus_1, index_1, index_2, image_export_utils_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.GroupedVerticalBarChartBase = void 0;
    var COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';
    var getClassNames = (0, Utilities_1.classNamesFunction)();
    var MIN_DOMAIN_MARGIN = 8;
    var X1_INNER_PADDING = 0.1;
    // x1_inner_padding = space_between_bars / (space_between_bars + bar_width)
    // => space_between_bars = (x1_inner_padding / (1 - x1_inner_padding)) * bar_width
    /** Rate at which the space between the bars in a group changes wrt the bar width */
    var BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);
    var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
        tslib_1.__extends(GroupedVerticalBarChartBase, _super);
        function GroupedVerticalBarChartBase(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._getMinMaxOfYAxis = function () {
                return { startValue: 0, endValue: 0 };
            };
            _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
                var domainNRangeValue;
                if (xAxisType === index_1.XAxisTypes.NumericAxis || xAxisType === index_1.XAxisTypes.DateAxis) {
                    domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
                }
                else {
                    domainNRangeValue = (0, index_1.domainRangeOfXStringAxis)(margins, width, isRTL);
                }
                return domainNRangeValue;
            };
            _this._getGraphData = function (xScale, yScale, containerHeight, containerWidth, xElement) {
                var xScale0 = _this._createX0Scale(containerWidth);
                // 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_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth, xScale0.bandwidth() / (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE));
                _this._groupWidth = (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE) * _this._barWidth;
                var xScale1 = _this._createX1Scale();
                var allGroupsBars = [];
                _this._datasetForBars.forEach(function (singleSet) {
                    allGroupsBars.push(_this._buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement));
                });
                _this._groupedVerticalBarGraph = allGroupsBars;
            };
            _this._getMargins = function (margins) { return (_this.margins = margins); };
            _this._createDataSetOfGVBC = function (points) {
                var keys = [];
                var xAxisLabels = points.map(function (singlePoint) { return singlePoint.name; });
                points[0].series.forEach(function (singleKey) {
                    keys.push(singleKey.key);
                });
                var datasetForBars = _this._createDataset(points);
                return {
                    keys: keys,
                    xAxisLabels: xAxisLabels,
                    datasetForBars: datasetForBars,
                };
            };
            _this._getCustomizedCallout = function () {
                return _this.props.onRenderCalloutPerDataPoint
                    ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps)
                    : null;
            };
            _this._getOpacity = function (legendTitle) {
                var opacity = _this._legendHighlighted(legendTitle) || _this._noLegendHighlighted() ? '' : '0.1';
                return opacity;
            };
            _this._onBarHover = function (pointData, 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            groupData, mouseEvent) {
                mouseEvent.persist();
                if (_this._calloutAnchorPoint !== pointData) {
                    _this._calloutAnchorPoint = pointData;
                    _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(pointData.legend),
                        calloutLegend: pointData.legend,
                        dataForHoverCard: pointData.data,
                        color: pointData.color,
                        xCalloutValue: pointData.xAxisCalloutData,
                        yCalloutValue: pointData.yAxisCalloutData,
                        dataPointCalloutProps: pointData,
                        callOutAccessibilityData: _this.props.isCalloutForStack
                            ? groupData.stackCallOutAccessibilityData
                            : pointData.callOutAccessibilityData,
                        YValueHover: groupData.groupSeries,
                        hoverXValue: pointData.xAxisCalloutData,
                    });
                }
            };
            _this._onBarLeave = function () {
                /**/
            };
            _this._handleChartMouseLeave = function () {
                _this._calloutAnchorPoint = null;
                _this.setState({ isCalloutVisible: false });
            };
            _this._onBarFocus = function (pointData, 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            groupData, refArrayIndexNumber) {
                _this._refArray.forEach(function (obj, index) {
                    if (obj.index === pointData.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(pointData.legend),
                            calloutLegend: pointData.legend,
                            dataForHoverCard: pointData.data,
                            color: pointData.color,
                            xCalloutValue: pointData.xAxisCalloutData,
                            yCalloutValue: pointData.yAxisCalloutData,
                            dataPointCalloutProps: pointData,
                            callOutAccessibilityData: _this.props.isCalloutForStack
                                ? groupData.stackCallOutAccessibilityData
                                : pointData.callOutAccessibilityData,
                            YValueHover: groupData.groupSeries,
                            hoverXValue: pointData.xAxisCalloutData,
                        });
                    }
                });
            };
            _this._redirectToUrl = function (href) {
                href ? (window.location.href = href) : '';
            };
            _this._buildGraph = function (
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            singleSet, 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            xScale0, 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            xScale1, containerHeight, xElement) {
                var singleGroup = [];
                var barLabelsForGroup = [];
                var yBarScale = (0, d3_scale_1.scaleLinear)()
                    .domain([0, _this._yMax])
                    .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
                var tempDataSet = Object.keys(_this._datasetForBars[0]).splice(0, _this._keys.length);
                tempDataSet.forEach(function (datasetKey, index) {
                    var _a, _b, _c, _d, _e;
                    var refIndexNumber = singleSet.indexNum * tempDataSet.length + index;
                    var pointData = singleSet[datasetKey];
                    // To align the centers of the generated bandwidth and the calculated one when they differ,
                    // use the following addend.
                    var xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - _this._barWidth) / 2;
                    var yPoint = Math.max(containerHeight - _this.margins.bottom - yBarScale(pointData.data), 0);
                    var startColor = pointData.color ? pointData.color : (0, index_1.getNextColor)(index, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
                    var endColor = startColor;
                    if (_this.props.enableGradient) {
                        startColor = ((_b = pointData.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];
                        endColor = ((_d = pointData.gradient) === null || _d === void 0 ? void 0 : _d[1]) || (0, index_1.getNextGradient)(index, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[1];
                        pointData.color = startColor;
                    }
                    var gradientId = (0, Utilities_1.getId)('GVBC_Gradient') + "_".concat(singleSet.indexNum, "_").concat(index);
                    // Not rendering data with 0.
                    pointData.data &&
                        singleGroup.push(React.createElement(React.Fragment, { key: "".concat(singleSet.indexNum, "-").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", { className: _this._classNames.opacityChangeOnHover, height: Math.max(yBarScale(pointData.data), 0), width: _this._barWidth, x: xPoint, y: yPoint, "data-is-focusable": !_this.props.hideTooltip && (_this._legendHighlighted(pointData.legend) || _this._noLegendHighlighted()), opacity: _this._getOpacity(pointData.legend), ref: function (e) {
                                    _this._refCallback(e, pointData.legend, refIndexNumber);
                                }, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, onMouseOver: _this._onBarHover.bind(_this, pointData, singleSet), onMouseMove: _this._onBarHover.bind(_this, pointData, singleSet), onMouseOut: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, pointData, singleSet, refIndexNumber), onBlur: _this._onBarLeave, onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : pointData.onClick, "aria-label": _this._getAriaLabel(pointData, singleSet.xAxisPoint), role: "img" })));
                    if (pointData.data &&
                        !_this.props.hideLabels &&
                        _this._barWidth >= 16 &&
                        (_this._legendHighlighted(pointData.legend) || _this._noLegendHighlighted())) {
                        barLabelsForGroup.push(React.createElement("text", { key: "".concat(singleSet.indexNum, "-").concat(index), x: xPoint + _this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: _this._classNames.barLabel, "aria-hidden": true }, (0, index_1.formatValueWithSIPrefix)(pointData.data)));
                    }
                });
                // Used to display tooltip at x axis labels.
                if (!_this.props.wrapXAxisLables && _this.props.showXAxisLablesTooltip) {
                    var xAxisElement = (0, d3_selection_1.select)(xElement).call(xScale0);
                    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_1.tooltipOfXAxislabels)(tooltipProps);
                }
                return (React.createElement("g", { key: singleSet.indexNum, transform: "translate(".concat(xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - _this._groupWidth) / 2, ", 0)") },
                    singleGroup,
                    barLabelsForGroup));
            };
            _this._createDataset = function (points) {
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                var datasetForBars = [];
                var dataset = [];
                points.forEach(function (point, index) {
                    var singleDatasetPoint = {};
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    var singleDatasetPointForBars = {};
                    var singleDataSeries = [];
                    point.series.forEach(function (seriesPoint, seriesIndex) {
                        var _a, _b;
                        if (_this.props.enableGradient) {
                            seriesPoint.color =
                                ((_a = seriesPoint.gradient) === null || _a === void 0 ? void 0 : _a[0]) || (0, index_1.getNextGradient)(seriesIndex, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
                        }
                        singleDatasetPoint[seriesPoint.key] = seriesPoint.data;
                        singleDatasetPointForBars[seriesPoint.key] = tslib_1.__assign({}, seriesPoint);
                        singleDataSeries.push(seriesPoint);
                    });
                    singleDatasetPointForBars.xAxisPoint = point.name;
                    singleDatasetPointForBars.indexNum = index;
                    singleDatasetPointForBars.groupSeries = singleDataSeries;
                    singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;
                    datasetForBars.push(singleDatasetPointForBars);
                    dataset.push(singleDatasetPoint);
                });
                _this._dataset = dataset;
                return datasetForBars;
            };
            // For grouped vertical bar chart, First need to define total scale (from start to end)
            // From that need to define scale for single group of bars - done by createX1Scale
            _this._createX0Scale = function (containerWidth) {
                var x0Axis = (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 x0Axis;
            };
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            _this._createX1Scale = function () {
                return ((0, d3_scale_1.scaleBand)()
                    .domain(_this._keys)
                    // When there is only one group, xScale0 adds padding around it,
                    // causing the bandwidth to become smaller than the actual group width.
                    // So to render bars in the group correctly, use groupWidth instead of the generated scale bandwidth.
                    .range(_this._isRtl ? [_this._groupWidth, 0] : [0, _this._groupWidth])
                    .paddingInner(X1_INNER_PADDING));
            };
            _this._closeCallout = function () {
                _this.setState({
                    isCalloutVisible: false,
                });
            };
            _this._getLegendData = function (points, palette) {
                var data = points;
                var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
                var actions = [];
                data.forEach(function (singleChartData) {
                    singleChartData.series.forEach(function (point) {
                        var _a, _b, _c;
                        var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
                        if (_this.props.enableGradient) {
                            var pointIndex = Math.max(((_a = singleChartData.series) === 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_1.getNextGradient)(pointIndex, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted)[0];
                        }
                        var checkSimilarLegends = actions.filter(function (leg) { return leg.title === point.legend && leg.color === color; });
                        if (checkSimilarLegends.length > 0) {
                            return;
                        }
                        var legend = {
                            title: point.legend,
                            color: color,
                            hoverAction: function () {
                                _this._handleChartMouseLeave();
                                _this._onLegendHover(point.legend);
                            },
                            onMouseOutAction: function () {
                                _this._onLegendLeave();
                            },
                        };
                        actions.push(legend);
                    });
                });
                return (React.createElement(index_2.Legends, tslib_1.__assign({ legends: actions, overflowProps: _this.props.legendsOverflowProps, enabledWrapLines: _this.props.enabledLegendsWrapLines, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard }, _this.props.legendProps, { onChange: _this._onLegendSelectionChange.bind(_this), ref: _this._legendsRef })));
            };
            _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 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, xAxisPoint) {
                var _a;
                var xValue = point.xAxisCalloutData || xAxisPoint;
                var legend = point.legend;
                var yValue = point.yAxisCalloutData || point.data;
                return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
            };
            _this._getDomainMargins = function (containerWidth) {
                _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 groups changes wrt the group width */
                var groupGapRate = _this._xAxisInnerPadding / (1 - _this._xAxisInnerPadding);
                if (_this._xAxisType === index_1.XAxisTypes.StringAxis) {
                    if ((0, index_1.isScalePaddingDefined)(_this.props.xAxisOuterPadding)) {
                        // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
                        // to adjust the space before the first group and after the last group.
                        _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_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth);
                        var groupWidth = (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE) * _this._barWidth;
                        /** Total width required to render the groups. Directly proportional to group width */
                        var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;
                        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 groups at their maximum allowable width
                        var groupBandwidth = totalWidth / (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * groupGapRate);
                        var barBandwidth = groupBandwidth / (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE);
                        var barWidth = (0, index_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth, barBandwidth);
                        var groupWidth = (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE) * barWidth;
                        var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;
                        var margin1 = (totalWidth - reqWidth) / 2;
                        // Calculate the remaining width after accounting for the space required to render x-axis labels
                        var step = (0, index_1.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));
                    }
                }
                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 chartTitle = _this.props.chartTitle;
                return ((chartTitle ? "".concat(chartTitle, ". ") : '') +
                    "Vertical bar chart with ".concat(_this._xAxisLabels.length, " groups of ").concat(_this._keys.length, " bars each. "));
            };
            (0, Utilities_1.initializeComponentRef)(_this);
            _this._createSet = (0, Utilities_1.memoizeFunction)(function (data) { return _this._createDataSetOfGVBC(data); });
            _this.state = {
                color: '',
                dataForHoverCard: 0,
                isCalloutVisible: false,
                refSelected: null,
                selectedLegends: ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || [],
                xCalloutValue: '',
                yCalloutValue: '',
                YValueHover: [],
                hoverXValue: '',
                calloutLegend: '',
                activeLegend: '',
            };
            (0, Utilities_1.warnDeprecations)(COMPONENT_NAME, props, {
                showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
                showXAxisPath: 'Dont use this property. Axis line removed default.',
                showYAxisPath: 'Dont use this property. No need to display Y axis path. Handling default',
                showXAxisGridLines: 'Dont use this property. Handling with default value.',
                legendColor: 'Dont use this property. colour will pick from given data.',
            });
            _this._refArray = [];
            _this._calloutId = (0, Utilities_1.getId)('callout');
            _this._tooltipId = (0, Utilities_1.getId)('GVBCTooltipId_');
            _this._emptyChartId = (0, Utilities_1.getId)('_GVBC_empty');
            _this._domainMargin = MIN_DOMAIN_MARGIN;
            _this._cartesianChartRef = React.createRef();
            _this._legendsRef = React.createRef();
            return _this;
        }
        GroupedVerticalBarChartBase.prototype.componentDidUpdate = function (prevProps) {
            var _a, _b, _c;
            if (!(0, index_1.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) || [],
                });
            }
        };
        GroupedVerticalBarChartBase.prototype.render = function () {
            var _this = this;
            var points = this.props.data;
            var _a = this._createSet(points), keys = _a.keys, xAxisLabels = _a.xAxisLabels, datasetForBars = _a.datasetForBars;
            this._keys = keys;
            this._xAxisLabels = xAxisLabels;
            this._datasetForBars = datasetForBars;
            this._xAxisType = (0, index_1.getTypeOfAxis)(points[0].name, true);
            var legends = this._getLegendData(points, this.props.theme.palette);
            this._adjustProps();
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            var yMax = (0, d3_array_1.max)(this._dataset, function (point) { return (0, d3_array_1.max)(_this._keys, function (key) { return point[key]; }); });
            this._yMax = Math.max(yMax, this.props.yMaxValue || 0);
            this._classNames = getClassNames(this.props.styles, {
                theme: this.props.theme,
                href: this.props.href,
            });
            var calloutProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: "toolTip".concat(this._calloutId), gapSpace: 15, isBeakVisible: false, setInitialFocus: true, color: this.state.color, Legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, onDismiss: this._closeCallout }, this.props.calloutProps), { preventDismissOnLostFocus: true }), (0, index_1.getAccessibleDataObject)(this.state.callOutAccessibilityData, 'text', false));
            var tickParams = {
                tickValues: this.props.tickValues,
                tickFormat: this.props.tickFormat,
            };
            return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._datasetForBars, chartType: index_1.ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legends, xAxisType: this._xAxisType, createYAxis: index_1.createNumericYAxis, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, createStringYAxis: index_1.createStringYAxis, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
                    direction: react_focus_1.FocusZoneDirection.horizontal,
                }, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_1.XAxisTypes.StringAxis && {
                xAxisInnerPadding: this._xAxisInnerPadding,
                xAxisOuterPadding: this._xAxisOuterPadding,
            }), { barwidth: this._barWidth, ref: this._cartesianChartRef, 
                /* eslint-disable react/jsx-no-bind */
                children: function () {
                    return React.createElement("g", null, _this._groupedVerticalBarGraph);
                } }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
        };
        Object.defineProperty(GroupedVerticalBarChartBase.prototype, "chartContainer", {
            get: function () {
                var _a;
                return ((_a = this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer) || null;
            },
            enumerable: false,
            configurable: true
        });
        GroupedVerticalBarChartBase.prototype._refCallback = function (element, legendTitle, refIndexNumber) {
            this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };
        };
        GroupedVerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
            this.setState({
                activeLegend: legendTitle,
            });
        };
        GroupedVerticalBarChartBase.prototype._onLegendLeave = function () {
            this.setState({
                activeLegend: '',
            });
        };
        GroupedVerticalBarChartBase.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);
            }
        };
        GroupedVerticalBarChartBase.prototype._getHighlightedLegend = function () {
            return this.state.selectedLegends.length > 0
                ? this.state.selectedLegends
                : this.state.activeLegend
                    ? [this.state.activeLegend]
                    : [];
        };
        GroupedVerticalBarChartBase.prototype._isChartEmpty = function () {
            return !(this.props.data &&
                this.props.data.length > 0 &&
                this.props.data.filter(function (item) { return item.series.length; }).length > 0);
        };
        GroupedVerticalBarChartBase.prototype._adjustProps = function () {
            this._barWidth = (0, index_1.getBarWidth)(this.props.barwidth, this.props.maxBarWidth);
            // x0_inner_padding = space_between_groups / (space_between_groups + group_width)
            // space_between_groups = 2 * bar_width
            // group_width = this._keys.length * bar_width + (this._keys.length - 1) * space_between_bars
            this._xAxisInnerPadding = (0, index_1.getScalePadding)(this.props.xAxisInnerPadding, undefined, 2 / (2 + this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE));
            this._xAxisOuterPadding = (0, index_1.getScalePadding)(this.props.xAxisOuterPadding);
        };
        GroupedVerticalBarChartBase.defaultProps = {
            maxBarWidth: 24,
        };
        return GroupedVerticalBarChartBase;
    }(React.Component));
    exports.GroupedVerticalBarChartBase = GroupedVerticalBarChartBase;
});
//# sourceMappingURL=GroupedVerticalBarChart.base.js.map