@fluentui/react-charting 5.23.63 → 5.23.64

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

@@ -0,0 +1,495 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { max as d3Max } from 'd3-array';
+import { select as d3Select } from 'd3-selection';
+import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale';
+import { classNamesFunction, getId, getRTL, initializeComponentRef, memoizeFunction, warnDeprecations, } from '@fluentui/react/lib/Utilities';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
+import { FocusZoneDirection } from '@fluentui/react-focus';
+import { ChartTypes, getAccessibleDataObject, tooltipOfXAxislabels, XAxisTypes, getTypeOfAxis, formatValueWithSIPrefix, getScalePadding, getBarWidth, isScalePaddingDefined, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, getNextGradient, getNextColor, areArraysEqual, calculateLongestLabelWidth, } from '../../utilities/index';
+import { CartesianChart, Legends, } from '../../index';
+import { toImage } from '../../utilities/image-export-utils';
+var COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';
+var getClassNames = classNamesFunction();
+var MIN_DOMAIN_MARGIN = 8;
+var X1_INNER_PADDING = 0.1;
+// x1_inner_padding = space_between_bars / (space_between_bars + bar_width)
+// => space_between_bars = (x1_inner_padding / (1 - x1_inner_padding)) * bar_width
+/** Rate at which the space between the bars in a group changes wrt the bar width */
+var BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);
+var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
+    __extends(GroupedVerticalBarChartBase, _super);
+    function GroupedVerticalBarChartBase(props) {
+        var _a;
+        var _this = _super.call(this, props) || this;
+        _this._isRtl = getRTL();
+        _this.toImage = function (opts) {
+            var _a, _b;
+            return toImage((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this._isRtl, opts);
+        };
+        _this._getMinMaxOfYAxis = function () {
+            return { startValue: 0, endValue: 0 };
+        };
+        _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+            var domainNRangeValue;
+            if (xAxisType === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {
+                domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
+            }
+            else {
+                domainNRangeValue = 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 = getBarWidth(_this.props.barwidth, _this.props.maxBarWidth, xScale0.bandwidth() / (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE));
+            _this._groupWidth = (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE) * _this._barWidth;
+            var xScale1 = _this._createX1Scale();
+            var allGroupsBars = [];
+            _this._datasetForBars.forEach(function (singleSet) {
+                allGroupsBars.push(_this._buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement));
+            });
+            _this._groupedVerticalBarGraph = allGroupsBars;
+        };
+        _this._getMargins = function (margins) { return (_this.margins = margins); };
+        _this._createDataSetOfGVBC = function (points) {
+            var keys = [];
+            var xAxisLabels = points.map(function (singlePoint) { return singlePoint.name; });
+            points[0].series.forEach(function (singleKey) {
+                keys.push(singleKey.key);
+            });
+            var datasetForBars = _this._createDataset(points);
+            return {
+                keys: keys,
+                xAxisLabels: xAxisLabels,
+                datasetForBars: datasetForBars,
+            };
+        };
+        _this._getCustomizedCallout = function () {
+            return _this.props.onRenderCalloutPerDataPoint
+                ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps)
+                : null;
+        };
+        _this._getOpacity = function (legendTitle) {
+            var opacity = _this._legendHighlighted(legendTitle) || _this._noLegendHighlighted() ? '' : '0.1';
+            return opacity;
+        };
+        _this._onBarHover = function (pointData, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        groupData, mouseEvent) {
+            mouseEvent.persist();
+            if (_this._calloutAnchorPoint !== pointData) {
+                _this._calloutAnchorPoint = pointData;
+                _this.setState({
+                    refSelected: mouseEvent,
+                    /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+                    isCalloutVisible: _this._noLegendHighlighted() || _this._legendHighlighted(pointData.legend),
+                    calloutLegend: pointData.legend,
+                    dataForHoverCard: pointData.data,
+                    color: pointData.color,
+                    xCalloutValue: pointData.xAxisCalloutData,
+                    yCalloutValue: pointData.yAxisCalloutData,
+                    dataPointCalloutProps: pointData,
+                    callOutAccessibilityData: _this.props.isCalloutForStack
+                        ? groupData.stackCallOutAccessibilityData
+                        : pointData.callOutAccessibilityData,
+                    YValueHover: groupData.groupSeries,
+                    hoverXValue: pointData.xAxisCalloutData,
+                });
+            }
+        };
+        _this._onBarLeave = function () {
+            /**/
+        };
+        _this._handleChartMouseLeave = function () {
+            _this._calloutAnchorPoint = null;
+            _this.setState({ isCalloutVisible: false });
+        };
+        _this._onBarFocus = function (pointData, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        groupData, refArrayIndexNumber) {
+            _this._refArray.forEach(function (obj, index) {
+                if (obj.index === pointData.legend && refArrayIndexNumber === index) {
+                    _this.setState({
+                        refSelected: obj.refElement,
+                        /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+                        isCalloutVisible: _this._noLegendHighlighted() || _this._legendHighlighted(pointData.legend),
+                        calloutLegend: pointData.legend,
+                        dataForHoverCard: pointData.data,
+                        color: pointData.color,
+                        xCalloutValue: pointData.xAxisCalloutData,
+                        yCalloutValue: pointData.yAxisCalloutData,
+                        dataPointCalloutProps: pointData,
+                        callOutAccessibilityData: _this.props.isCalloutForStack
+                            ? groupData.stackCallOutAccessibilityData
+                            : pointData.callOutAccessibilityData,
+                        YValueHover: groupData.groupSeries,
+                        hoverXValue: pointData.xAxisCalloutData,
+                    });
+                }
+            });
+        };
+        _this._redirectToUrl = function (href) {
+            href ? (window.location.href = href) : '';
+        };
+        _this._buildGraph = function (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        singleSet, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        xScale0, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        xScale1, containerHeight, xElement) {
+            var singleGroup = [];
+            var barLabelsForGroup = [];
+            var yBarScale = d3ScaleLinear()
+                .domain([0, _this._yMax])
+                .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
+            var tempDataSet = Object.keys(_this._datasetForBars[0]).splice(0, _this._keys.length);
+            tempDataSet.forEach(function (datasetKey, index) {
+                var _a, _b, _c, _d, _e;
+                var refIndexNumber = singleSet.indexNum * tempDataSet.length + index;
+                var pointData = singleSet[datasetKey];
+                // To align the centers of the generated bandwidth and the calculated one when they differ,
+                // use the following addend.
+                var xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - _this._barWidth) / 2;
+                var yPoint = Math.max(containerHeight - _this.margins.bottom - yBarScale(pointData.data), 0);
+                var startColor = pointData.color ? pointData.color : getNextColor(index, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                var endColor = startColor;
+                if (_this.props.enableGradient) {
+                    startColor = ((_b = pointData.gradient) === null || _b === void 0 ? void 0 : _b[0]) || 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]) || getNextGradient(index, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[1];
+                    pointData.color = startColor;
+                }
+                var gradientId = getId('GVBC_Gradient') + "_".concat(singleSet.indexNum, "_").concat(index);
+                // Not rendering data with 0.
+                pointData.data &&
+                    singleGroup.push(React.createElement(React.Fragment, { key: "".concat(singleSet.indexNum, "-").concat(index) },
+                        _this.props.enableGradient && (React.createElement("defs", null,
+                            React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
+                                React.createElement("stop", { offset: "0", stopColor: startColor }),
+                                React.createElement("stop", { offset: "100%", stopColor: endColor })))),
+                        React.createElement("rect", { className: _this._classNames.opacityChangeOnHover, height: Math.max(yBarScale(pointData.data), 0), width: _this._barWidth, x: xPoint, y: yPoint, "data-is-focusable": !_this.props.hideTooltip && (_this._legendHighlighted(pointData.legend) || _this._noLegendHighlighted()), opacity: _this._getOpacity(pointData.legend), ref: function (e) {
+                                _this._refCallback(e, pointData.legend, refIndexNumber);
+                            }, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, onMouseOver: _this._onBarHover.bind(_this, pointData, singleSet), onMouseMove: _this._onBarHover.bind(_this, pointData, singleSet), onMouseOut: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, pointData, singleSet, refIndexNumber), onBlur: _this._onBarLeave, onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : pointData.onClick, "aria-label": _this._getAriaLabel(pointData, singleSet.xAxisPoint), role: "img" })));
+                if (pointData.data &&
+                    !_this.props.hideLabels &&
+                    _this._barWidth >= 16 &&
+                    (_this._legendHighlighted(pointData.legend) || _this._noLegendHighlighted())) {
+                    barLabelsForGroup.push(React.createElement("text", { key: "".concat(singleSet.indexNum, "-").concat(index), x: xPoint + _this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: _this._classNames.barLabel, "aria-hidden": true }, formatValueWithSIPrefix(pointData.data)));
+                }
+            });
+            // Used to display tooltip at x axis labels.
+            if (!_this.props.wrapXAxisLables && _this.props.showXAxisLablesTooltip) {
+                var xAxisElement = d3Select(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 && tooltipOfXAxislabels(tooltipProps);
+            }
+            return (React.createElement("g", { key: singleSet.indexNum, transform: "translate(".concat(xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - _this._groupWidth) / 2, ", 0)") },
+                singleGroup,
+                barLabelsForGroup));
+        };
+        _this._createDataset = function (points) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var datasetForBars = [];
+            var dataset = [];
+            points.forEach(function (point, index) {
+                var singleDatasetPoint = {};
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var singleDatasetPointForBars = {};
+                var singleDataSeries = [];
+                point.series.forEach(function (seriesPoint, seriesIndex) {
+                    var _a, _b;
+                    if (_this.props.enableGradient) {
+                        seriesPoint.color =
+                            ((_a = seriesPoint.gradient) === null || _a === void 0 ? void 0 : _a[0]) || getNextGradient(seriesIndex, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
+                    }
+                    singleDatasetPoint[seriesPoint.key] = seriesPoint.data;
+                    singleDatasetPointForBars[seriesPoint.key] = __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 = d3ScaleBand()
+                .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 (d3ScaleBand()
+                .domain(_this._keys)
+                // When there is only one group, xScale0 adds padding around it,
+                // causing the bandwidth to become smaller than the actual group width.
+                // So to render bars in the group correctly, use groupWidth instead of the generated scale bandwidth.
+                .range(_this._isRtl ? [_this._groupWidth, 0] : [0, _this._groupWidth])
+                .paddingInner(X1_INNER_PADDING));
+        };
+        _this._closeCallout = function () {
+            _this.setState({
+                isCalloutVisible: false,
+            });
+        };
+        _this._getLegendData = function (points, palette) {
+            var data = points;
+            var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+            var actions = [];
+            data.forEach(function (singleChartData) {
+                singleChartData.series.forEach(function (point) {
+                    var _a, _b, _c;
+                    var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                    if (_this.props.enableGradient) {
+                        var pointIndex = Math.max(((_a = singleChartData.series) === null || _a === void 0 ? void 0 : _a.findIndex(function (item) { return item.legend === point.legend; })) || 0, 0);
+                        color = ((_b = point.gradient) === null || _b === void 0 ? void 0 : _b[0]) || getNextGradient(pointIndex, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted)[0];
+                    }
+                    var checkSimilarLegends = actions.filter(function (leg) { return leg.title === point.legend && leg.color === color; });
+                    if (checkSimilarLegends.length > 0) {
+                        return;
+                    }
+                    var legend = {
+                        title: point.legend,
+                        color: color,
+                        hoverAction: function () {
+                            _this._handleChartMouseLeave();
+                            _this._onLegendHover(point.legend);
+                        },
+                        onMouseOutAction: function () {
+                            _this._onLegendLeave();
+                        },
+                    };
+                    actions.push(legend);
+                });
+            });
+            return (React.createElement(Legends, __assign({ legends: actions, overflowProps: _this.props.legendsOverflowProps, enabledWrapLines: _this.props.enabledLegendsWrapLines, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard }, _this.props.legendProps, { onChange: _this._onLegendSelectionChange.bind(_this), ref: _this._legendsRef })));
+        };
+        _this._getAxisData = function (yAxisData) {
+            if (yAxisData && yAxisData.yAxisDomainValues.length) {
+                var domainValue = yAxisData.yAxisDomainValues;
+                _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
+            }
+        };
+        /**
+         * This function checks if the given legend is highlighted or not.
+         * A legend can be highlighted in 2 ways:
+         * 1. selection: if the user clicks on it
+         * 2. hovering: if there is no selected legend and the user hovers over it
+         */
+        _this._legendHighlighted = function (legendTitle) {
+            return _this._getHighlightedLegend().includes(legendTitle);
+        };
+        /**
+         * This function checks if none of the legends is selected or hovered.
+         */
+        _this._noLegendHighlighted = function () {
+            return _this._getHighlightedLegend().length === 0;
+        };
+        _this._getAriaLabel = function (point, xAxisPoint) {
+            var _a;
+            var xValue = point.xAxisCalloutData || xAxisPoint;
+            var legend = point.legend;
+            var yValue = point.yAxisCalloutData || point.data;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
+        };
+        _this._getDomainMargins = function (containerWidth) {
+            _this._domainMargin = MIN_DOMAIN_MARGIN;
+            /** Total width available to render the bars */
+            var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
+            /** Rate at which the space between the groups changes wrt the group width */
+            var groupGapRate = _this._xAxisInnerPadding / (1 - _this._xAxisInnerPadding);
+            if (_this._xAxisType === XAxisTypes.StringAxis) {
+                if (isScalePaddingDefined(_this.props.xAxisOuterPadding)) {
+                    // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
+                    // to adjust the space before the first group and after the last group.
+                    _this._domainMargin = 0;
+                }
+                else if (_this.props.barwidth !== 'auto') {
+                    // Update the bar width so that when CartesianChart rerenders,
+                    // the following calculations don't use the previous bar width.
+                    _this._barWidth = getBarWidth(_this.props.barwidth, _this.props.maxBarWidth);
+                    var groupWidth = (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE) * _this._barWidth;
+                    /** Total width required to render the groups. Directly proportional to group width */
+                    var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;
+                    if (totalWidth >= reqWidth) {
+                        // Center align the chart by setting equal left and right margins for domain
+                        _this._domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
+                    }
+                }
+                else if (_this.props.mode === 'plotly' && _this._xAxisLabels.length > 1) {
+                    // Calculate the remaining width after rendering groups at their maximum allowable width
+                    var groupBandwidth = totalWidth / (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * groupGapRate);
+                    var barBandwidth = groupBandwidth / (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE);
+                    var barWidth = getBarWidth(_this.props.barwidth, _this.props.maxBarWidth, barBandwidth);
+                    var groupWidth = (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE) * barWidth;
+                    var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;
+                    var margin1 = (totalWidth - reqWidth) / 2;
+                    // Calculate the remaining width after accounting for the space required to render x-axis labels
+                    var step = calculateLongestLabelWidth(_this._xAxisLabels) + 20;
+                    reqWidth = (_this._xAxisLabels.length - _this._xAxisInnerPadding) * step;
+                    var margin2 = (totalWidth - reqWidth) / 2;
+                    _this._domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
+                }
+            }
+            return __assign(__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. "));
+        };
+        initializeComponentRef(_this);
+        _this._createSet = memoizeFunction(function (data) { return _this._createDataSetOfGVBC(data); });
+        _this.state = {
+            color: '',
+            dataForHoverCard: 0,
+            isCalloutVisible: false,
+            refSelected: null,
+            selectedLegends: ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || [],
+            xCalloutValue: '',
+            yCalloutValue: '',
+            YValueHover: [],
+            hoverXValue: '',
+            calloutLegend: '',
+            activeLegend: '',
+        };
+        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 = getId('callout');
+        _this._tooltipId = getId('GVBCTooltipId_');
+        _this._emptyChartId = getId('_GVBC_empty');
+        _this._domainMargin = MIN_DOMAIN_MARGIN;
+        _this._cartesianChartRef = React.createRef();
+        _this._legendsRef = React.createRef();
+        return _this;
+    }
+    GroupedVerticalBarChartBase.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b, _c;
+        if (!areArraysEqual((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
+            this.setState({
+                selectedLegends: ((_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || [],
+            });
+        }
+    };
+    GroupedVerticalBarChartBase.prototype.render = function () {
+        var _this = this;
+        var points = this.props.data;
+        var _a = this._createSet(points), keys = _a.keys, xAxisLabels = _a.xAxisLabels, datasetForBars = _a.datasetForBars;
+        this._keys = keys;
+        this._xAxisLabels = xAxisLabels;
+        this._datasetForBars = datasetForBars;
+        this._xAxisType = 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 = d3Max(this._dataset, function (point) { return d3Max(_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 = __assign(__assign(__assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: 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 }), getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false));
+        var tickParams = {
+            tickValues: this.props.tickValues,
+            tickFormat: this.props.tickFormat,
+        };
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._datasetForBars, chartType: ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legends, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, createStringYAxis: createStringYAxis, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
+                direction: FocusZoneDirection.horizontal,
+            }, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
+            xAxisInnerPadding: this._xAxisInnerPadding,
+            xAxisOuterPadding: this._xAxisOuterPadding,
+        }), { barwidth: this._barWidth, ref: this._cartesianChartRef, 
+            /* eslint-disable react/jsx-no-bind */
+            children: function () {
+                return React.createElement("g", null, _this._groupedVerticalBarGraph);
+            } }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+    };
+    Object.defineProperty(GroupedVerticalBarChartBase.prototype, "chartContainer", {
+        get: function () {
+            var _a;
+            return ((_a = this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer) || null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    GroupedVerticalBarChartBase.prototype._refCallback = function (element, legendTitle, refIndexNumber) {
+        this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };
+    };
+    GroupedVerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
+        this.setState({
+            activeLegend: legendTitle,
+        });
+    };
+    GroupedVerticalBarChartBase.prototype._onLegendLeave = function () {
+        this.setState({
+            activeLegend: '',
+        });
+    };
+    GroupedVerticalBarChartBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {
+        var _a, _b;
+        if ((_a = this.props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
+            this.setState({ selectedLegends: selectedLegends });
+        }
+        else {
+            this.setState({ selectedLegends: selectedLegends.slice(-1) });
+        }
+        if ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
+            this.props.legendProps.onChange(selectedLegends, event, currentLegend);
+        }
+    };
+    GroupedVerticalBarChartBase.prototype._getHighlightedLegend = function () {
+        return this.state.selectedLegends.length > 0
+            ? this.state.selectedLegends
+            : this.state.activeLegend
+                ? [this.state.activeLegend]
+                : [];
+    };
+    GroupedVerticalBarChartBase.prototype._isChartEmpty = function () {
+        return !(this.props.data &&
+            this.props.data.length > 0 &&
+            this.props.data.filter(function (item) { return item.series.length; }).length > 0);
+    };
+    GroupedVerticalBarChartBase.prototype._adjustProps = function () {
+        this._barWidth = 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 = getScalePadding(this.props.xAxisInnerPadding, undefined, 2 / (2 + this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE));
+        this._xAxisOuterPadding = getScalePadding(this.props.xAxisOuterPadding);
+    };
+    GroupedVerticalBarChartBase.defaultProps = {
+        maxBarWidth: 24,
+    };
+    return GroupedVerticalBarChartBase;
+}(React.Component));
+export { GroupedVerticalBarChartBase };
+//# sourceMappingURL=GroupedVerticalBarChart.base.js.map

package/lib/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 {\n  classNamesFunction,\n  getId,\n  getRTL,\n  initializeComponentRef,\n  memoizeFunction,\n  warnDeprecations,\n} 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  getNextGradient,\n  getNextColor,\n  areArraysEqual,\n  calculateLongestLabelWidth,\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';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport { ILegendContainer } from '../Legends/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  selectedLegends: string[];\n}\n\nexport class GroupedVerticalBarChartBase\n  extends React.Component<IGroupedVerticalBarChartProps, IGroupedVerticalBarChartState>\n  implements IChart\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  private _cartesianChartRef: React.RefObject<IChart>;\n  private _legendsRef: React.RefObject<ILegendContainer>;\n\n  public constructor(props: IGroupedVerticalBarChartProps) {\n    super(props);\n\n    initializeComponentRef(this);\n\n    this._createSet = memoizeFunction((data: IGroupedVerticalBarChartData[]) => this._createDataSetOfGVBC(data));\n    this.state = {\n      color: '',\n      dataForHoverCard: 0,\n      isCalloutVisible: false,\n      refSelected: null,\n      selectedLegends: props.legendProps?.selectedLegends || [],\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    this._cartesianChartRef = React.createRef();\n    this._legendsRef = React.createRef();\n  }\n\n  public componentDidUpdate(prevProps: IGroupedVerticalBarChartProps): void {\n    if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) {\n      this.setState({\n        selectedLegends: this.props.legendProps?.selectedLegends || [],\n      });\n    }\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        ref={this._cartesianChartRef}\n        /* eslint-disable react/jsx-no-bind */\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  public get chartContainer(): HTMLElement | null {\n    return this._cartesianChartRef.current?.chartContainer || null;\n  }\n\n  public toImage = (opts?: IImageExportOptions): Promise<string> => {\n    return toImage(this._cartesianChartRef.current?.chartContainer, this._legendsRef.current?.toSVG, this._isRtl, opts);\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._noLegendHighlighted() || this._legendHighlighted(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._noLegendHighlighted() || this._legendHighlighted(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      let startColor = pointData.color ? pointData.color : getNextColor(index, 0, this.props.theme?.isInverted);\n      let endColor = startColor;\n\n      if (this.props.enableGradient) {\n        startColor = pointData.gradient?.[0] || getNextGradient(index, 0, this.props.theme?.isInverted)[0];\n        endColor = pointData.gradient?.[1] || getNextGradient(index, 0, this.props.theme?.isInverted)[1];\n        pointData.color = startColor;\n      }\n\n      const gradientId = getId('GVBC_Gradient') + `_${singleSet.indexNum}_${index}`;\n\n      // Not rendering data with 0.\n      pointData.data &&\n        singleGroup.push(\n          <React.Fragment key={`${singleSet.indexNum}-${index}`}>\n            {this.props.enableGradient && (\n              <defs>\n                <linearGradient id={gradientId} x1=\"0%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n                  <stop offset=\"0\" stopColor={startColor} />\n                  <stop offset=\"100%\" stopColor={endColor} />\n                </linearGradient>\n              </defs>\n            )}\n            <rect\n              className={this._classNames.opacityChangeOnHover}\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={this.props.enableGradient ? `url(#${gradientId})` : startColor}\n              rx={this.props.roundCorners ? 3 : 0}\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          </React.Fragment>,\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, seriesIndex) => {\n        if (this.props.enableGradient) {\n          seriesPoint.color =\n            seriesPoint.gradient?.[0] || getNextGradient(seriesIndex, 0, this.props.theme?.isInverted)[0];\n        }\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 _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        let color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n        if (this.props.enableGradient) {\n          const pointIndex = Math.max(singleChartData.series?.findIndex(item => item.legend === point.legend) || 0, 0);\n          color = point.gradient?.[0] || getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n        }\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,\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        onChange={this._onLegendSelectionChange.bind(this)}\n        ref={this._legendsRef}\n      />\n    );\n  };\n\n  private _onLegendSelectionChange(\n    selectedLegends: string[],\n    event: React.MouseEvent<HTMLButtonElement>,\n    currentLegend?: ILegend,\n  ): void {\n    if (this.props.legendProps?.canSelectMultipleLegends) {\n      this.setState({ selectedLegends });\n    } else {\n      this.setState({ selectedLegends: selectedLegends.slice(-1) });\n    }\n    if (this.props.legendProps?.onChange) {\n      this.props.legendProps.onChange(selectedLegends, event, currentLegend);\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 this._getHighlightedLegend().includes(legendTitle!);\n  };\n\n  /**\n   * This function checks if none of the legends is selected or hovered.\n   */\n  private _noLegendHighlighted = () => {\n    return this._getHighlightedLegend().length === 0;\n  };\n\n  private _getHighlightedLegend() {\n    return this.state.selectedLegends.length > 0\n      ? this.state.selectedLegends\n      : this.state.activeLegend\n      ? [this.state.activeLegend]\n      : [];\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    /** 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    /** Rate at which the space between the groups changes wrt the group width */\n    const groupGapRate = this._xAxisInnerPadding / (1 - this._xAxisInnerPadding);\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        // 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        /** 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      } else if (this.props.mode === 'plotly' && this._xAxisLabels.length > 1) {\n        // Calculate the remaining width after rendering groups at their maximum allowable width\n        const groupBandwidth = totalWidth / (this._xAxisLabels.length + (this._xAxisLabels.length - 1) * groupGapRate);\n        const barBandwidth = groupBandwidth / (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE);\n        const barWidth = getBarWidth(this.props.barwidth, this.props.maxBarWidth, barBandwidth);\n        const groupWidth = (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE) * barWidth;\n        let reqWidth = (this._xAxisLabels.length + (this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;\n        const margin1 = (totalWidth - reqWidth) / 2;\n\n        // Calculate the remaining width after accounting for the space required to render x-axis labels\n        const step = calculateLongestLabelWidth(this._xAxisLabels) + 20;\n        reqWidth = (this._xAxisLabels.length - this._xAxisInnerPadding) * step;\n        const margin2 = (totalWidth - reqWidth) / 2;\n\n        this._domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));\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/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>;