@fluentui/react-charting 5.23.77 → 5.23.79

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

@@ -10,12 +10,15 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
     // => 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);
@@ -47,8 +50,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 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) {
@@ -58,14 +61,16 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             };
             _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,
                 };
@@ -75,10 +80,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     ? _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) {
@@ -112,26 +113,22 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             };
             _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) {
@@ -146,40 +143,41 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             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)));
                         }
                     }
                 });
@@ -205,28 +203,25 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _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;
             };
@@ -245,7 +240,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             // 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.
@@ -257,35 +252,21 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     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 })));
             };
@@ -333,7 +314,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         // 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) {
@@ -344,9 +325,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     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;
@@ -364,7 +345,32 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _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); });
@@ -388,7 +394,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 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');
@@ -407,13 +412,13 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
         };
         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.
@@ -429,7 +434,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 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,
@@ -448,9 +453,6 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             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,
@@ -489,8 +491,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             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 = {