@fluentui/react-charting 5.23.77 → 5.23.79

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

@@ -20,12 +20,15 @@ var X1_INNER_PADDING = 0.1;
 // => 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 VERTICAL_BAR_GAP = 1;
+var MIN_BAR_HEIGHT = 1;
 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._legendColorMap = {};
         _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);
@@ -57,8 +60,8 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             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;
+            _this._barWidth = (0, index_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth, xScale0.bandwidth() / (_this._legends.length + (_this._legends.length - 1) * BAR_GAP_RATE));
+            _this._groupWidth = (_this._legends.length + (_this._legends.length - 1) * BAR_GAP_RATE) * _this._barWidth;
             var xScale1 = _this._createX1Scale();
             var allGroupsBars = [];
             _this._datasetForBars.forEach(function (singleSet) {
@@ -68,14 +71,16 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         };
         _this._getMargins = function (margins) { return (_this.margins = margins); };
         _this._createDataSetOfGVBC = function (points) {
-            var keys = [];
+            var legends = new Set();
             var xAxisLabels = points.map(function (singlePoint) { return singlePoint.name; });
-            points[0].series.forEach(function (singleKey) {
-                keys.push(singleKey.key);
+            points.forEach(function (point) {
+                point.series.forEach(function (seriesPoint) {
+                    legends.add(seriesPoint.legend);
+                });
             });
             var datasetForBars = _this._createDataset(points);
             return {
-                keys: keys,
+                legends: Array.from(legends),
                 xAxisLabels: xAxisLabels,
                 datasetForBars: datasetForBars,
             };
@@ -85,10 +90,6 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 ? _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) {
@@ -122,26 +123,22 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         };
         _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,
-                    });
-                }
+        groupData, focusEvent) {
+            _this.setState({
+                refSelected: focusEvent.currentTarget,
+                /** 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) {
@@ -156,40 +153,41 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         xScale1, yScalePrimary, yScaleSecondary, containerHeight, xElement) {
             var singleGroup = [];
             var barLabelsForGroup = [];
-            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];
-                if (pointData) {
-                    var yBarScale = pointData.useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+            _this._legends.forEach(function (legendTitle, legendIndex) {
+                var barPoints = singleSet[legendTitle];
+                if (barPoints) {
+                    var yBarScale_1 = barPoints[0].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
                     // 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(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;
+                    var xPoint_1 = xScale1(legendTitle) + (xScale1.bandwidth() - _this._barWidth) / 2;
+                    var isLegendActive_1 = _this._legendHighlighted(legendTitle) || _this._noLegendHighlighted();
+                    var barOpacity_1 = isLegendActive_1 ? '' : '0.1';
+                    var gradientId_1 = (0, Utilities_1.getId)('GVBC_Gradient') + "_".concat(singleSet.indexNum, "_").concat(legendIndex);
+                    var startColor_1 = barPoints[0].color;
+                    var endColor = startColor_1;
                     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;
+                        startColor_1 = barPoints[0].gradient[0];
+                        endColor = barPoints[0].gradient[1];
+                        singleGroup.push(React.createElement("linearGradient", { key: gradientId_1, id: gradientId_1, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
+                            React.createElement("stop", { offset: "0", stopColor: startColor_1 }),
+                            React.createElement("stop", { offset: "100%", stopColor: endColor })));
                     }
-                    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(containerHeight - _this.margins.bottom - 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)));
+                    var prevYPoint_1 = yBarScale_1(0);
+                    var barTotalValue_1 = 0;
+                    barPoints.forEach(function (pointData, pointIndex) {
+                        if (!pointData.data) {
+                            // Not rendering data with 0.
+                            return;
+                        }
+                        var barGapTop = (VERTICAL_BAR_GAP / 2) * (pointIndex < barPoints.length - 1 ? 1 : 0);
+                        var barGapBottom = (VERTICAL_BAR_GAP / 2) * (pointIndex > 0 ? 1 : 0);
+                        var height = Math.max(yBarScale_1(0) - yBarScale_1(pointData.data) - barGapTop - barGapBottom, MIN_BAR_HEIGHT);
+                        singleGroup.push(React.createElement("rect", { key: "".concat(singleSet.indexNum, "-").concat(legendIndex, "-").concat(pointIndex), className: _this._classNames.opacityChangeOnHover, height: height, width: _this._barWidth, x: xPoint_1, y: prevYPoint_1 - (height + barGapBottom), "data-is-focusable": !_this.props.hideTooltip && isLegendActive_1, opacity: barOpacity_1, fill: _this.props.enableGradient ? "url(#".concat(gradientId_1, ")") : startColor_1, 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), 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" }));
+                        prevYPoint_1 = prevYPoint_1 - (height + barGapTop + barGapBottom);
+                        barTotalValue_1 += pointData.data;
+                    });
+                    if (barTotalValue_1 && !_this.props.hideLabels && _this._barWidth >= 16 && isLegendActive_1) {
+                        barLabelsForGroup.push(React.createElement("text", { key: "".concat(singleSet.indexNum, "-").concat(legendIndex), x: xPoint_1 + _this._barWidth / 2, y: prevYPoint_1 - 6, textAnchor: "middle", className: _this._classNames.barLabel, "aria-hidden": true }, (0, index_1.formatValueWithSIPrefix)(barTotalValue_1)));
                     }
                 }
             });
@@ -215,28 +213,25 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         _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];
+                var legendToBarPoint = {};
+                point.series.forEach(function (seriesPoint) {
+                    if (!singleDatasetPointForBars[seriesPoint.legend]) {
+                        singleDatasetPointForBars[seriesPoint.legend] = [tslib_1.__assign({}, seriesPoint)];
+                        legendToBarPoint[seriesPoint.legend] = tslib_1.__assign({}, seriesPoint);
+                    }
+                    else {
+                        singleDatasetPointForBars[seriesPoint.legend].push(tslib_1.__assign({}, seriesPoint));
+                        legendToBarPoint[seriesPoint.legend].data += seriesPoint.data;
                     }
-                    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.groupSeries = Object.values(legendToBarPoint);
                 singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;
                 datasetForBars.push(singleDatasetPointForBars);
-                dataset.push(singleDatasetPoint);
             });
             return datasetForBars;
         };
@@ -255,7 +250,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _this._createX1Scale = function () {
             return ((0, d3_scale_1.scaleBand)()
-                .domain(_this._keys)
+                .domain(_this._legends)
                 // 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.
@@ -267,35 +262,21 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 isCalloutVisible: false,
             });
         };
-        _this._getLegendData = function (points, palette) {
-            var data = points;
-            var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+        _this._getLegendData = function () {
             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);
-                });
+            _this._legends.forEach(function (legendTitle) {
+                var legend = {
+                    title: legendTitle,
+                    color: _this._legendColorMap[legendTitle][0],
+                    hoverAction: function () {
+                        _this._handleChartMouseLeave();
+                        _this._onLegendHover(legendTitle);
+                    },
+                    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 })));
         };
@@ -343,7 +324,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                     // 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;
+                    var groupWidth = (_this._legends.length + (_this._legends.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) {
@@ -354,9 +335,9 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 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 barBandwidth = groupBandwidth / (_this._legends.length + (_this._legends.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 groupWidth = (_this._legends.length + (_this._legends.length - 1) * BAR_GAP_RATE) * barWidth;
                     var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;
                     var margin1 = (totalWidth - reqWidth) / 2;
                     var margin2 = Number.POSITIVE_INFINITY;
@@ -374,7 +355,32 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         _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. "));
+                "Vertical bar chart with ".concat(_this._xAxisLabels.length, " groups of ").concat(_this._legends.length, " bars each. "));
+        };
+        _this._addDefaultColors = function (data) {
+            var _a;
+            _this._legendColorMap = {};
+            var colorIndex = 0;
+            return ((_a = data === null || data === void 0 ? void 0 : data.map(function (point) {
+                var _a, _b;
+                return tslib_1.__assign(tslib_1.__assign({}, point), { series: (_b = (_a = point.series) === null || _a === void 0 ? void 0 : _a.map(function (seriesPoint) {
+                        var _a, _b, _c, _d;
+                        if (!_this._legendColorMap[seriesPoint.legend]) {
+                            var startColor = seriesPoint.color
+                                ? seriesPoint.color
+                                : (0, index_1.getNextColor)(colorIndex, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                            var endColor = startColor;
+                            if (_this.props.enableGradient) {
+                                var nextGradient = (0, index_1.getNextGradient)(colorIndex, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                                startColor = ((_c = seriesPoint.gradient) === null || _c === void 0 ? void 0 : _c[0]) || nextGradient[0];
+                                endColor = ((_d = seriesPoint.gradient) === null || _d === void 0 ? void 0 : _d[1]) || nextGradient[1];
+                            }
+                            _this._legendColorMap[seriesPoint.legend] = [startColor, endColor];
+                            colorIndex += 1;
+                        }
+                        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, seriesPoint), { color: _this._legendColorMap[seriesPoint.legend][0] }), (_this.props.enableGradient ? { gradient: _this._legendColorMap[seriesPoint.legend] } : {}));
+                    })) !== null && _b !== void 0 ? _b : [] });
+            })) !== null && _a !== void 0 ? _a : []);
         };
         (0, Utilities_1.initializeComponentRef)(_this);
         _this._createSet = (0, Utilities_1.memoizeFunction)(function (data) { return _this._createDataSetOfGVBC(data); });
@@ -398,7 +404,6 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             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');
@@ -417,13 +422,13 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
     };
     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;
+        var points = this._addDefaultColors(this.props.data);
+        var _a = this._createSet(points), legends = _a.legends, xAxisLabels = _a.xAxisLabels, datasetForBars = _a.datasetForBars;
+        this._legends = legends;
         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);
+        var legendBars = this._getLegendData();
         this._adjustProps();
         // The maxOfYVal prop is only required for the primary y-axis, so yMax should be calculated
         // using only the data points associated with the primary y-axis.
@@ -439,7 +444,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
             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: {
+        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: legendBars, 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,
@@ -458,9 +463,6 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         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,
@@ -499,8 +501,8 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         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));
+        // group_width = this._legends.length * bar_width + (this._legends.length - 1) * space_between_bars
+        this._xAxisInnerPadding = (0, index_1.getScalePadding)(this.props.xAxisInnerPadding, undefined, 2 / (2 + this._legends.length + (this._legends.length - 1) * BAR_GAP_RATE));
         this._xAxisOuterPadding = (0, index_1.getScalePadding)(this.props.xAxisOuterPadding);
     };
     GroupedVerticalBarChartBase.defaultProps = {