@fluentui/react-charting 5.21.28 → 5.21.30

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

@@ -0,0 +1,425 @@
+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"], 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) {
+    "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 = exports.GroupedVerticalBarChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(GroupedVerticalBarChartBase, _super);
+        function GroupedVerticalBarChartBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._isRtl = (0, Utilities_1.getRTL)();
+            _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.state.selectedLegend === '' || _this.state.selectedLegend === 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.state.selectedLegend === '' || _this.state.selectedLegend === 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 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);
+                    // Not rendering data with 0.
+                    pointData.data &&
+                        singleGroup.push(React.createElement("rect", { className: _this._classNames.opacityChangeOnHover, key: "".concat(singleSet.indexNum, "-").concat(index), 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: pointData.color, 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) {
+                        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 color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                        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,
+                            action: function () {
+                                _this._onLegendClick(point.legend);
+                            },
+                            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)));
+            };
+            _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.state.selectedLegend === legendTitle ||
+                    (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
+            };
+            /**
+             * This function checks if none of the legends is selected or hovered.
+             */
+            _this._noLegendHighlighted = function () {
+                return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
+            };
+            _this._getAriaLabel = function (point, 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;
+                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') {
+                        /** Total width available to render the bars */
+                        var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
+                        // 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;
+                        /** Rate at which the space between the groups changes wrt the group width */
+                        var groupGapRate = _this._xAxisInnerPadding / (1 - _this._xAxisInnerPadding);
+                        /** 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;
+                        }
+                    }
+                }
+                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. "));
+            };
+            _this._createSet = (0, Utilities_1.memoizeFunction)(function (data) { return _this._createDataSetOfGVBC(data); });
+            _this.state = {
+                color: '',
+                dataForHoverCard: 0,
+                isCalloutVisible: false,
+                refSelected: null,
+                selectedLegend: '',
+                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;
+            return _this;
+        }
+        GroupedVerticalBarChartBase.prototype.render = function () {
+            var _a;
+            var _this = this;
+            var points = this.props.data;
+            var keys = (_a = this._createSet(points), _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, 
+                /* eslint-disable react/jsx-no-bind */
+                // eslint-disable-next-line react/no-children-prop
+                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' }));
+        };
+        GroupedVerticalBarChartBase.prototype._refCallback = function (element, legendTitle, refIndexNumber) {
+            this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };
+        };
+        GroupedVerticalBarChartBase.prototype._onLegendClick = function (legendTitle) {
+            if (this.state.selectedLegend === legendTitle) {
+                this.setState({
+                    selectedLegend: '',
+                });
+            }
+            else {
+                this.setState({
+                    selectedLegend: legendTitle,
+                });
+            }
+        };
+        GroupedVerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
+            this.setState({
+                activeLegend: legendTitle,
+            });
+        };
+        GroupedVerticalBarChartBase.prototype._onLegendLeave = function () {
+            this.setState({
+                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));
+});
+//# sourceMappingURL=GroupedVerticalBarChart.base.js.map

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedVerticalBarChart.base.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { max as d3Max } from 'd3-array';\nimport { select as d3Select } from 'd3-selection';\nimport { Axis as D3Axis } from 'd3-axis';\nimport { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { classNamesFunction, getId, getRTL, memoizeFunction, warnDeprecations } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n  ChartTypes,\n  IAxisData,\n  getAccessibleDataObject,\n  tooltipOfXAxislabels,\n  XAxisTypes,\n  getTypeOfAxis,\n  formatValueWithSIPrefix,\n  getScalePadding,\n  getBarWidth,\n  isScalePaddingDefined,\n  createNumericYAxis,\n  IDomainNRange,\n  domainRangeOfXStringAxis,\n  createStringYAxis,\n} from '../../utilities/index';\nimport {\n  IAccessibilityProps,\n  CartesianChart,\n  ILegend,\n  IGroupedVerticalBarChartData,\n  IGroupedVerticalBarChartProps,\n  IGroupedVerticalBarChartStyleProps,\n  IGroupedVerticalBarChartStyles,\n  IGVBarChartSeriesPoint,\n  IMargins,\n  IBasestate,\n  IRefArrayData,\n  Legends,\n} from '../../index';\n\nconst COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';\nconst getClassNames = classNamesFunction<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>();\ntype StringAxis = D3Axis<string>;\ntype NumericAxis = D3Axis<number | { valueOf(): number }>;\n\nconst MIN_DOMAIN_MARGIN = 8;\nconst X1_INNER_PADDING = 0.1;\n// x1_inner_padding = space_between_bars / (space_between_bars + bar_width)\n// => space_between_bars = (x1_inner_padding / (1 - x1_inner_padding)) * bar_width\n/** Rate at which the space between the bars in a group changes wrt the bar width */\nconst BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);\n\n// This interface used for - While forming datapoints from given prop \"data\" in code\ninterface IGVDataPoint {\n  [key: string]: number | string;\n}\n\n// While forming datapoints from given prop \"data\" in code. These datapoints are used for to draw graph easily.\ninterface IGVSingleDataPoint {\n  [key: string]: IGVDataPoint;\n}\nexport interface IGroupedVerticalBarChartState extends IBasestate {\n  dataPointCalloutProps?: IGVBarChartSeriesPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n  calloutLegend: string;\n}\n\nexport class GroupedVerticalBarChartBase extends React.Component<\n  IGroupedVerticalBarChartProps,\n  IGroupedVerticalBarChartState\n> {\n  public static defaultProps: Partial<IGroupedVerticalBarChartProps> = {\n    maxBarWidth: 24,\n  };\n\n  private _createSet: (\n    data: IGroupedVerticalBarChartData[],\n  ) => // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  { keys: string[]; xAxisLabels: string[]; datasetForBars: any };\n  private _dataset: IGVDataPoint[];\n  private _keys: string[];\n  private _xAxisLabels: string[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _datasetForBars: any;\n  private margins: IMargins;\n  private _groupedVerticalBarGraph: JSX.Element[];\n  private _classNames: IProcessedStyleSet<IGroupedVerticalBarChartStyles>;\n  private _refArray: IRefArrayData[];\n  private _yMax: number;\n  private _calloutId: string;\n  private _tooltipId: string;\n  private _xAxisType: XAxisTypes;\n  private _isRtl: boolean = getRTL();\n  private _calloutAnchorPoint: IGVBarChartSeriesPoint | null;\n  private _barWidth: number;\n  private _domainMargin: number;\n  private _emptyChartId: string;\n  private _groupWidth: number;\n  private _xAxisInnerPadding: number;\n  private _xAxisOuterPadding: number;\n\n  public constructor(props: IGroupedVerticalBarChartProps) {\n    super(props);\n    this._createSet = memoizeFunction((data: IGroupedVerticalBarChartData[]) => this._createDataSetOfGVBC(data));\n    this.state = {\n      color: '',\n      dataForHoverCard: 0,\n      isCalloutVisible: false,\n      refSelected: null,\n      selectedLegend: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n      YValueHover: [],\n      hoverXValue: '',\n      calloutLegend: '',\n      activeLegend: '',\n    };\n    warnDeprecations(COMPONENT_NAME, props, {\n      showYAxisGridLines: 'Dont use this property. Lines are drawn by default',\n      showXAxisPath: 'Dont use this property. Axis line removed default.',\n      showYAxisPath: 'Dont use this property. No need to display Y axis path. Handling default',\n      showXAxisGridLines: 'Dont use this property. Handling with default value.',\n      legendColor: 'Dont use this property. colour will pick from given data.',\n    });\n    this._refArray = [];\n    this._calloutId = getId('callout');\n    this._tooltipId = getId('GVBCTooltipId_');\n    this._emptyChartId = getId('_GVBC_empty');\n    this._domainMargin = MIN_DOMAIN_MARGIN;\n  }\n\n  public render(): React.ReactNode {\n    const points = this.props.data;\n    const { keys, xAxisLabels, datasetForBars } = this._createSet(points);\n    this._keys = keys;\n    this._xAxisLabels = xAxisLabels;\n    this._datasetForBars = datasetForBars;\n    this._xAxisType = getTypeOfAxis(points[0].name, true) as XAxisTypes;\n    const legends: JSX.Element = this._getLegendData(points, this.props.theme!.palette);\n    this._adjustProps();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const yMax = d3Max(this._dataset, (point: any) => d3Max(this._keys, (key: string) => point[key]));\n    this._yMax = Math.max(yMax, this.props.yMaxValue || 0);\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      href: this.props.href!,\n    });\n    const calloutProps = {\n      target: this.state.refSelected,\n      isCalloutVisible: this.state.isCalloutVisible,\n      directionalHint: DirectionalHint.topAutoEdge,\n      id: `toolTip${this._calloutId}`,\n      gapSpace: 15,\n      isBeakVisible: false,\n      setInitialFocus: true,\n      color: this.state.color,\n      Legend: this.state.calloutLegend,\n      XValue: this.state.xCalloutValue,\n      YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,\n      YValueHover: this.state.YValueHover,\n      hoverXValue: this.state.hoverXValue,\n      onDismiss: this._closeCallout,\n      ...this.props.calloutProps,\n      preventDismissOnLostFocus: true,\n      ...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false),\n    };\n    const tickParams = {\n      tickValues: this.props.tickValues!,\n      tickFormat: this.props.tickFormat!,\n    };\n\n    return !this._isChartEmpty() ? (\n      <CartesianChart\n        {...this.props}\n        chartTitle={this._getChartTitle()}\n        points={this._datasetForBars}\n        chartType={ChartTypes.GroupedVerticalBarChart}\n        calloutProps={calloutProps}\n        legendBars={legends}\n        xAxisType={this._xAxisType}\n        createYAxis={createNumericYAxis}\n        datasetForXAxisDomain={this._xAxisLabels}\n        tickParams={tickParams}\n        getDomainNRangeValues={this._getDomainNRangeValues}\n        getMinMaxOfYAxis={this._getMinMaxOfYAxis}\n        createStringYAxis={createStringYAxis}\n        tickPadding={this.props.tickPadding || 5}\n        maxOfYVal={this._yMax}\n        svgFocusZoneProps={{\n          direction: FocusZoneDirection.horizontal,\n        }}\n        customizedCallout={this._getCustomizedCallout()}\n        getmargins={this._getMargins}\n        getGraphData={this._getGraphData}\n        getAxisData={this._getAxisData}\n        onChartMouseLeave={this._handleChartMouseLeave}\n        getDomainMargins={this._getDomainMargins}\n        {...(this._xAxisType === XAxisTypes.StringAxis && {\n          xAxisInnerPadding: this._xAxisInnerPadding,\n          xAxisOuterPadding: this._xAxisOuterPadding,\n        })}\n        barwidth={this._barWidth}\n        /* eslint-disable react/jsx-no-bind */\n        // eslint-disable-next-line react/no-children-prop\n        children={() => {\n          return <g>{this._groupedVerticalBarGraph}</g>;\n        }}\n      />\n    ) : (\n      <div\n        id={this._emptyChartId}\n        role={'alert'}\n        style={{ opacity: '0' }}\n        aria-label={'Graph has no data to display'}\n      />\n    );\n  }\n\n  private _getMinMaxOfYAxis = () => {\n    return { startValue: 0, endValue: 0 };\n  };\n\n  private _getDomainNRangeValues = (\n    points: IGroupedVerticalBarChartData[],\n    margins: IMargins,\n    width: number,\n    chartType: ChartTypes,\n    isRTL: boolean,\n    xAxisType: XAxisTypes,\n    barWidth: number,\n    tickValues: Date[] | number[] | undefined,\n    shiftX: number,\n  ) => {\n    let domainNRangeValue: IDomainNRange;\n    if (xAxisType === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {\n      domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };\n    } else {\n      domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);\n    }\n    return domainNRangeValue;\n  };\n\n  private _getGraphData = (\n    xScale: StringAxis | NumericAxis,\n    yScale: NumericAxis,\n    containerHeight: number,\n    containerWidth: number,\n    xElement?: SVGElement | null,\n  ) => {\n    const xScale0 = this._createX0Scale(containerWidth);\n\n    // Setting the bar width here is safe because there are no dependencies earlier in the code\n    // that rely on the width of bars in vertical bar charts with string x-axis.\n    this._barWidth = getBarWidth(\n      this.props.barwidth,\n      this.props.maxBarWidth,\n      xScale0.bandwidth() / (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE),\n    );\n    this._groupWidth = (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE) * this._barWidth;\n\n    const xScale1 = this._createX1Scale();\n    const allGroupsBars: JSX.Element[] = [];\n    this._datasetForBars.forEach((singleSet: IGVSingleDataPoint) => {\n      allGroupsBars.push(this._buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement!));\n    });\n    this._groupedVerticalBarGraph = allGroupsBars;\n  };\n\n  private _getMargins = (margins: IMargins) => (this.margins = margins);\n\n  private _createDataSetOfGVBC = (points: IGroupedVerticalBarChartData[]) => {\n    const keys: string[] = [];\n    const xAxisLabels: string[] = points.map(singlePoint => singlePoint.name);\n    points[0].series.forEach((singleKey: IGVBarChartSeriesPoint) => {\n      keys.push(singleKey.key);\n    });\n    const datasetForBars = this._createDataset(points);\n    return {\n      keys,\n      xAxisLabels,\n      datasetForBars,\n    };\n  };\n\n  private _getCustomizedCallout = () => {\n    return this.props.onRenderCalloutPerDataPoint\n      ? this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n      : null;\n  };\n\n  private _getOpacity = (legendTitle: string): string => {\n    const opacity = this._legendHighlighted(legendTitle) || this._noLegendHighlighted() ? '' : '0.1';\n    return opacity;\n  };\n\n  private _onBarHover = (\n    pointData: IGVBarChartSeriesPoint,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    groupData: any,\n    mouseEvent: React.MouseEvent<SVGElement>,\n  ): void => {\n    mouseEvent.persist();\n    if (this._calloutAnchorPoint !== pointData) {\n      this._calloutAnchorPoint = pointData;\n      this.setState({\n        refSelected: mouseEvent,\n        /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */\n        isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend,\n        calloutLegend: pointData.legend,\n        dataForHoverCard: pointData.data,\n        color: pointData.color,\n        xCalloutValue: pointData.xAxisCalloutData,\n        yCalloutValue: pointData.yAxisCalloutData,\n        dataPointCalloutProps: pointData,\n        callOutAccessibilityData: this.props.isCalloutForStack\n          ? groupData.stackCallOutAccessibilityData\n          : pointData.callOutAccessibilityData,\n        YValueHover: groupData.groupSeries,\n        hoverXValue: pointData.xAxisCalloutData,\n      });\n    }\n  };\n\n  private _onBarLeave = (): void => {\n    /**/\n  };\n\n  private _handleChartMouseLeave = (): void => {\n    this._calloutAnchorPoint = null;\n    this.setState({ isCalloutVisible: false });\n  };\n\n  private _onBarFocus = (\n    pointData: IGVBarChartSeriesPoint,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    groupData: any,\n    refArrayIndexNumber: number,\n  ): void => {\n    this._refArray.forEach((obj: IRefArrayData, index: number) => {\n      if (obj.index === pointData.legend && refArrayIndexNumber === index) {\n        this.setState({\n          refSelected: obj.refElement,\n          /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */\n          isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend,\n          calloutLegend: pointData.legend,\n          dataForHoverCard: pointData.data,\n          color: pointData.color,\n          xCalloutValue: pointData.xAxisCalloutData,\n          yCalloutValue: pointData.yAxisCalloutData,\n          dataPointCalloutProps: pointData,\n          callOutAccessibilityData: this.props.isCalloutForStack\n            ? groupData.stackCallOutAccessibilityData\n            : pointData.callOutAccessibilityData,\n          YValueHover: groupData.groupSeries,\n          hoverXValue: pointData.xAxisCalloutData,\n        });\n      }\n    });\n  };\n\n  private _redirectToUrl = (href: string | undefined): void => {\n    href ? (window.location.href = href) : '';\n  };\n\n  private _refCallback(element: SVGRectElement, legendTitle: string, refIndexNumber: number): void {\n    this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };\n  }\n\n  private _buildGraph = (\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    singleSet: any,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    xScale0: any,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    xScale1: any,\n    containerHeight: number,\n    xElement: SVGElement,\n  ): JSX.Element => {\n    const singleGroup: JSX.Element[] = [];\n    const barLabelsForGroup: JSX.Element[] = [];\n\n    const yBarScale = d3ScaleLinear()\n      .domain([0, this._yMax])\n      .range([0, containerHeight! - this.margins.bottom! - this.margins.top!]);\n\n    const tempDataSet = Object.keys(this._datasetForBars[0]).splice(0, this._keys.length);\n    tempDataSet.forEach((datasetKey: string, index: number) => {\n      const refIndexNumber = singleSet.indexNum * tempDataSet.length + index;\n      const pointData = singleSet[datasetKey];\n      // To align the centers of the generated bandwidth and the calculated one when they differ,\n      // use the following addend.\n      const xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - this._barWidth) / 2;\n      const yPoint = Math.max(containerHeight! - this.margins.bottom! - yBarScale(pointData.data), 0);\n      // Not rendering data with 0.\n      pointData.data &&\n        singleGroup.push(\n          <rect\n            className={this._classNames.opacityChangeOnHover}\n            key={`${singleSet.indexNum}-${index}`}\n            height={Math.max(yBarScale(pointData.data), 0)}\n            width={this._barWidth}\n            x={xPoint}\n            y={yPoint}\n            data-is-focusable={\n              !this.props.hideTooltip && (this._legendHighlighted(pointData.legend) || this._noLegendHighlighted())\n            }\n            opacity={this._getOpacity(pointData.legend)}\n            ref={(e: SVGRectElement | null) => {\n              this._refCallback(e!, pointData.legend, refIndexNumber);\n            }}\n            fill={pointData.color}\n            onMouseOver={this._onBarHover.bind(this, pointData, singleSet)}\n            onMouseMove={this._onBarHover.bind(this, pointData, singleSet)}\n            onMouseOut={this._onBarLeave}\n            onFocus={this._onBarFocus.bind(this, pointData, singleSet, refIndexNumber)}\n            onBlur={this._onBarLeave}\n            onClick={this.props.href ? this._redirectToUrl.bind(this, this.props.href!) : pointData.onClick}\n            aria-label={this._getAriaLabel(pointData, singleSet.xAxisPoint)}\n            role=\"img\"\n          />,\n        );\n      if (\n        pointData.data &&\n        !this.props.hideLabels &&\n        this._barWidth >= 16 &&\n        (this._legendHighlighted(pointData.legend) || this._noLegendHighlighted())\n      ) {\n        barLabelsForGroup.push(\n          <text\n            key={`${singleSet.indexNum}-${index}`}\n            x={xPoint + this._barWidth / 2}\n            y={yPoint - 6}\n            textAnchor=\"middle\"\n            className={this._classNames.barLabel}\n            aria-hidden={true}\n          >\n            {formatValueWithSIPrefix(pointData.data)}\n          </text>,\n        );\n      }\n    });\n    // Used to display tooltip at x axis labels.\n    if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {\n      const xAxisElement = d3Select(xElement).call(xScale0);\n      try {\n        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();\n        // eslint-disable-next-line no-empty\n      } catch (e) {}\n      const tooltipProps = {\n        tooltipCls: this._classNames.tooltip!,\n        id: this._tooltipId,\n        xAxis: xAxisElement,\n      };\n      xAxisElement && tooltipOfXAxislabels(tooltipProps);\n    }\n    return (\n      <g\n        key={singleSet.indexNum}\n        transform={`translate(${xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - this._groupWidth) / 2}, 0)`}\n      >\n        {singleGroup}\n        {barLabelsForGroup}\n      </g>\n    );\n  };\n\n  private _createDataset = (points: IGroupedVerticalBarChartData[]) => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const datasetForBars: any = [];\n    const dataset: IGVDataPoint[] = [];\n\n    points.forEach((point: IGroupedVerticalBarChartData, index: number) => {\n      const singleDatasetPoint: IGVDataPoint = {};\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const singleDatasetPointForBars: any = {};\n      const singleDataSeries: IGVBarChartSeriesPoint[] = [];\n\n      point.series.forEach((seriesPoint: IGVBarChartSeriesPoint) => {\n        singleDatasetPoint[seriesPoint.key] = seriesPoint.data;\n        singleDatasetPointForBars[seriesPoint.key] = {\n          ...seriesPoint,\n        };\n        singleDataSeries.push(seriesPoint);\n      });\n\n      singleDatasetPointForBars.xAxisPoint = point.name;\n      singleDatasetPointForBars.indexNum = index;\n      singleDatasetPointForBars.groupSeries = singleDataSeries;\n      singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;\n      datasetForBars.push(singleDatasetPointForBars);\n      dataset.push(singleDatasetPoint);\n    });\n    this._dataset = dataset;\n    return datasetForBars;\n  };\n\n  // For grouped vertical bar chart, First need to define total scale (from start to end)\n  // From that need to define scale for single group of bars - done by createX1Scale\n  private _createX0Scale = (containerWidth: number) => {\n    const x0Axis = d3ScaleBand()\n      .domain(this._xAxisLabels)\n      .range(\n        this._isRtl\n          ? [containerWidth! - this.margins.right! - this._domainMargin, this.margins.left! + this._domainMargin]\n          : [this.margins.left! + this._domainMargin, containerWidth! - this.margins.right! - this._domainMargin],\n      )\n      .paddingInner(this._xAxisInnerPadding)\n      .paddingOuter(this._xAxisOuterPadding);\n    return x0Axis;\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _createX1Scale = (): any => {\n    return (\n      d3ScaleBand()\n        .domain(this._keys)\n        // When there is only one group, xScale0 adds padding around it,\n        // causing the bandwidth to become smaller than the actual group width.\n        // So to render bars in the group correctly, use groupWidth instead of the generated scale bandwidth.\n        .range(this._isRtl ? [this._groupWidth, 0] : [0, this._groupWidth])\n        .paddingInner(X1_INNER_PADDING)\n    );\n  };\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n\n  private _onLegendClick(legendTitle: string): void {\n    if (this.state.selectedLegend === legendTitle) {\n      this.setState({\n        selectedLegend: '',\n      });\n    } else {\n      this.setState({\n        selectedLegend: legendTitle,\n      });\n    }\n  }\n\n  private _onLegendHover(legendTitle: string): void {\n    this.setState({\n      activeLegend: legendTitle,\n    });\n  }\n\n  private _onLegendLeave(): void {\n    this.setState({\n      activeLegend: '',\n    });\n  }\n\n  private _getLegendData = (points: IGroupedVerticalBarChartData[], palette: IPalette): JSX.Element => {\n    const data = points;\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    const actions: ILegend[] = [];\n\n    data.forEach((singleChartData: IGroupedVerticalBarChartData) => {\n      singleChartData.series.forEach((point: IGVBarChartSeriesPoint) => {\n        const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n        const checkSimilarLegends = actions.filter((leg: ILegend) => leg.title === point.legend && leg.color === color);\n        if (checkSimilarLegends!.length > 0) {\n          return;\n        }\n        const legend: ILegend = {\n          title: point.legend,\n          color: color,\n          action: () => {\n            this._onLegendClick(point.legend);\n          },\n          hoverAction: () => {\n            this._handleChartMouseLeave();\n            this._onLegendHover(point.legend);\n          },\n          onMouseOutAction: () => {\n            this._onLegendLeave();\n          },\n        };\n\n        actions.push(legend);\n      });\n    });\n    return (\n      <Legends\n        legends={actions}\n        overflowProps={this.props.legendsOverflowProps}\n        enabledWrapLines={this.props.enabledLegendsWrapLines}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        {...this.props.legendProps}\n      />\n    );\n  };\n\n  private _getAxisData = (yAxisData: IAxisData) => {\n    if (yAxisData && yAxisData.yAxisDomainValues.length) {\n      const { yAxisDomainValues: domainValue } = yAxisData;\n      this._yMax = Math.max(domainValue[domainValue.length - 1], this.props.yMaxValue || 0);\n    }\n  };\n\n  /**\n   * This function checks if the given legend is highlighted or not.\n   * A legend can be highlighted in 2 ways:\n   * 1. selection: if the user clicks on it\n   * 2. hovering: if there is no selected legend and the user hovers over it\n   */\n  private _legendHighlighted = (legendTitle: string) => {\n    return (\n      this.state.selectedLegend === legendTitle ||\n      (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle)\n    );\n  };\n\n  /**\n   * This function checks if none of the legends is selected or hovered.\n   */\n  private _noLegendHighlighted = () => {\n    return this.state.selectedLegend === '' && this.state.activeLegend === '';\n  };\n\n  private _getAriaLabel = (point: IGVBarChartSeriesPoint, xAxisPoint: string): string => {\n    const xValue = point.xAxisCalloutData || xAxisPoint;\n    const legend = point.legend;\n    const yValue = point.yAxisCalloutData || point.data;\n    return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;\n  };\n\n  private _getDomainMargins = (containerWidth: number): IMargins => {\n    this._domainMargin = MIN_DOMAIN_MARGIN;\n\n    if (this._xAxisType === XAxisTypes.StringAxis) {\n      if (isScalePaddingDefined(this.props.xAxisOuterPadding)) {\n        // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available\n        // to adjust the space before the first group and after the last group.\n        this._domainMargin = 0;\n      } else if (this.props.barwidth !== 'auto') {\n        /** Total width available to render the bars */\n        const totalWidth =\n          containerWidth - (this.margins.left! + MIN_DOMAIN_MARGIN) - (this.margins.right! + MIN_DOMAIN_MARGIN);\n        // Update the bar width so that when CartesianChart rerenders,\n        // the following calculations don't use the previous bar width.\n        this._barWidth = getBarWidth(this.props.barwidth, this.props.maxBarWidth);\n        const groupWidth = (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE) * this._barWidth;\n        /** Rate at which the space between the groups changes wrt the group width */\n        const groupGapRate = this._xAxisInnerPadding / (1 - this._xAxisInnerPadding);\n        /** Total width required to render the groups. Directly proportional to group width */\n        const reqWidth = (this._xAxisLabels.length + (this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;\n\n        if (totalWidth >= reqWidth) {\n          // Center align the chart by setting equal left and right margins for domain\n          this._domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;\n        }\n      }\n    }\n\n    return {\n      ...this.margins,\n      left: this.margins.left! + this._domainMargin,\n      right: this.margins.right! + this._domainMargin,\n    };\n  };\n\n  private _isChartEmpty(): boolean {\n    return !(\n      this.props.data &&\n      this.props.data.length > 0 &&\n      this.props.data.filter((item: IGroupedVerticalBarChartData) => item.series.length).length > 0\n    );\n  }\n\n  private _adjustProps(): void {\n    this._barWidth = getBarWidth(this.props.barwidth, this.props.maxBarWidth);\n    // x0_inner_padding = space_between_groups / (space_between_groups + group_width)\n    // space_between_groups = 2 * bar_width\n    // group_width = this._keys.length * bar_width + (this._keys.length - 1) * space_between_bars\n    this._xAxisInnerPadding = getScalePadding(\n      this.props.xAxisInnerPadding,\n      undefined,\n      2 / (2 + this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE),\n    );\n    this._xAxisOuterPadding = getScalePadding(this.props.xAxisOuterPadding);\n  }\n\n  private _getChartTitle = (): string => {\n    const { chartTitle } = this.props;\n    return (\n      (chartTitle ? `${chartTitle}. ` : '') +\n      `Vertical bar chart with ${this._xAxisLabels.length} groups of ${this._keys.length} bars each. `\n    );\n  };\n}\n"]}

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IGroupedVerticalBarChartProps } from '../../index';
+/**
+ * GroupedVerticalBarchart component.
+ * {@docCategory GroupedVerticalBarChart}
+ */
+export declare const GroupedVerticalBarChart: React.FunctionComponent<IGroupedVerticalBarChartProps>;

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js

@@ -0,0 +1,12 @@
+define(["require", "exports", "../../Utilities", "./GroupedVerticalBarChart.base", "./GroupedVerticalBarChart.styles"], function (require, exports, Utilities_1, GroupedVerticalBarChart_base_1, GroupedVerticalBarChart_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GroupedVerticalBarChart = void 0;
+    // Create a GroupedVerticalBarChart variant which uses these default styles and this styled subcomponent.
+    /**
+     * GroupedVerticalBarchart component.
+     * {@docCategory GroupedVerticalBarChart}
+     */
+    exports.GroupedVerticalBarChart = (0, Utilities_1.styled)(GroupedVerticalBarChart_base_1.GroupedVerticalBarChartBase, GroupedVerticalBarChart_styles_1.getStyles);
+});
+//# sourceMappingURL=GroupedVerticalBarChart.js.map

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedVerticalBarChart.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx"],"names":[],"mappings":";;;;IAUA,yGAAyG;IACzG;;;OAGG;IACU,QAAA,uBAAuB,GAA2D,IAAA,kBAAM,EAInG,0DAA2B,EAAE,0CAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport {\n  IGroupedVerticalBarChartProps,\n  IGroupedVerticalBarChartStyleProps,\n  IGroupedVerticalBarChartStyles,\n} from '../../index';\nimport { GroupedVerticalBarChartBase } from './GroupedVerticalBarChart.base';\nimport { getStyles } from './GroupedVerticalBarChart.styles';\n\n// Create a GroupedVerticalBarChart variant which uses these default styles and this styled subcomponent.\n/**\n * GroupedVerticalBarchart component.\n * {@docCategory GroupedVerticalBarChart}\n */\nexport const GroupedVerticalBarChart: React.FunctionComponent<IGroupedVerticalBarChartProps> = styled<\n  IGroupedVerticalBarChartProps,\n  IGroupedVerticalBarChartStyleProps,\n  IGroupedVerticalBarChartStyles\n>(GroupedVerticalBarChartBase, getStyles);\n"]}

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles } from '../../index';
+export declare const getStyles: (props: IGroupedVerticalBarChartStyleProps) => IGroupedVerticalBarChartStyles;

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js

@@ -0,0 +1,21 @@
+define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, Styling_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        var theme = props.theme, href = props.href;
+        return {
+            opacityChangeOnHover: {
+                cursor: href ? 'pointer' : 'default',
+            },
+            tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none' }),
+            barLabel: {
+                fontSize: Styling_1.FontSizes.small,
+                fontWeight: Styling_1.FontWeights.semibold,
+                fill: theme.palette.neutralPrimary,
+            },
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=GroupedVerticalBarChart.styles.js.map

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedVerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAyC;QACzD,IAAA,KAAK,GAAW,KAAK,MAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;QAC9B,OAAO;YACL,oBAAoB,EAAE;gBACpB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACrC;YAED,OAAO,wCACF,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,GACtB;YAED,QAAQ,EAAE;gBACR,QAAQ,EAAE,mBAAS,CAAC,KAAK;gBACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;SACF,CAAC;IACJ,CAAC,CAAC;IA1BW,QAAA,SAAS,aA0BpB","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport { IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles } from '../../index';\n\nexport const getStyles = (props: IGroupedVerticalBarChartStyleProps): IGroupedVerticalBarChartStyles => {\n  const { theme, href } = props;\n  return {\n    opacityChangeOnHover: {\n      cursor: href ? 'pointer' : 'default',\n    },\n\n    tooltip: {\n      ...theme.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: theme.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n    },\n\n    barLabel: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n  };\n};\n"]}