@fluentui/react-charts 9.0.1 → 9.0.2

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js

@@ -0,0 +1,492 @@
+import * as React from 'react';
+import { useGroupedVerticalBarChartStyles_unstable } from './useGroupedVerticalBarChartStyles.styles';
+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 { useId } from '@fluentui/react-utilities';
+import { ChartTypes, getAccessibleDataObject, tooltipOfXAxislabels, XAxisTypes, getTypeOfAxis, formatValueWithSIPrefix, getScalePadding, getBarWidth, isScalePaddingDefined, getNextColor, areArraysEqual, calculateLongestLabelWidth, useRtl } from '../../utilities/index';
+import { CartesianChart, Legends, DataVizPalette, getColorFromToken } from '../../index';
+const MIN_DOMAIN_MARGIN = 8;
+const 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 */ const BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);
+export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
+    maxBarWidth: 24
+}, forwardedRef)=>{
+    var _props_legendProps, _props_legendProps1;
+    const _tooltipId = useId('GVBCTooltipId_');
+    const _emptyChartId = useId('_GVBC_empty');
+    const _useRtl = useRtl();
+    let _domainMargin = MIN_DOMAIN_MARGIN;
+    let _dataset = [];
+    let _keys = [];
+    let _xAxisLabels = [];
+    let _datasetForBars = [];
+    let _margins = {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+    };
+    let _groupedVerticalBarGraph = [];
+    let _refArray = [];
+    let _yMax = 0;
+    let _calloutAnchorPoint = null;
+    let _barWidth = 0;
+    let _groupWidth = 0;
+    let _xAxisInnerPadding = 0;
+    let _xAxisOuterPadding = 0;
+    const [color, setColor] = React.useState('');
+    const [dataForHoverCard, setDataForHoverCard] = React.useState(0);
+    const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
+    const [xCalloutValue, setXCalloutValue] = React.useState('');
+    const [yCalloutValue, setYCalloutValue] = React.useState('');
+    const [YValueHover, setYValueHover] = React.useState([]);
+    const [hoverXValue, setHoverXValue] = React.useState('');
+    const [calloutLegend, setCalloutLegend] = React.useState('');
+    const [activeLegend, setActiveLegend] = React.useState('');
+    const [callOutAccessibilityData, setCallOutAccessibilityData] = React.useState(undefined);
+    const [clickPosition, setClickPosition] = React.useState({
+        x: 0,
+        y: 0
+    });
+    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const classes = useGroupedVerticalBarChartStyles_unstable(props);
+    React.useEffect(()=>{
+        var _props_legendProps;
+        if (!areArraysEqual((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends, selectedLegends)) {
+            var _props_legendProps1;
+            setSelectedLegends(((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends) || []);
+        }
+    }, [
+        (_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends
+    ]);
+    const _adjustProps = ()=>{
+        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
+        // x0_inner_padding = space_between_groups / (space_between_groups + group_width)
+        // space_between_groups = 2 * bar_width
+        // group_width = keys.length * bar_width + (keys.length - 1) * space_between_bars
+        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, undefined, 2 / (2 + keys.length + (keys.length - 1) * BAR_GAP_RATE));
+        _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding);
+    };
+    const _createDataset = (points)=>{
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const datasetForBars = [];
+        const dataset = [];
+        points.forEach((point, index)=>{
+            const singleDatasetPoint = {};
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const singleDatasetPointForBars = {};
+            const singleDataSeries = [];
+            point.series.forEach((seriesPoint, seriesIndex)=>{
+                singleDatasetPoint[seriesPoint.key] = seriesPoint.data;
+                singleDatasetPointForBars[seriesPoint.key] = {
+                    ...seriesPoint
+                };
+                singleDataSeries.push(seriesPoint);
+            });
+            singleDatasetPointForBars.xAxisPoint = point.name;
+            singleDatasetPointForBars.indexNum = index;
+            singleDatasetPointForBars.groupSeries = singleDataSeries;
+            singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;
+            datasetForBars.push(singleDatasetPointForBars);
+            dataset.push(singleDatasetPoint);
+        });
+        _dataset = dataset;
+        return datasetForBars;
+    };
+    const _createDataSetOfGVBC = (points)=>{
+        const keys = [];
+        const xAxisLabels = points.map((singlePoint)=>singlePoint.name);
+        points[0].series.forEach((singleKey)=>{
+            keys.push(singleKey.key);
+        });
+        const datasetForBars = _createDataset(points);
+        return {
+            keys,
+            xAxisLabels,
+            datasetForBars
+        };
+    };
+    const onLegendSelectionChange = (selectedLegends, event, currentLegend)=>{
+        var _props_legendProps, _props_legendProps1;
+        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
+            setSelectedLegends(selectedLegends);
+        } else {
+            setSelectedLegends(selectedLegends.slice(-1));
+        }
+        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
+            props.legendProps.onChange(selectedLegends, event, currentLegend);
+        }
+    };
+    const _getLegendData = (points)=>{
+        const data = points;
+        const defaultPalette = [
+            getColorFromToken(DataVizPalette.color1),
+            getColorFromToken(DataVizPalette.color2),
+            getColorFromToken(DataVizPalette.color3),
+            getColorFromToken(DataVizPalette.color4),
+            getColorFromToken(DataVizPalette.color5)
+        ];
+        const actions = [];
+        data.forEach((singleChartData)=>{
+            singleChartData.series.forEach((point)=>{
+                let color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                const checkSimilarLegends = actions.filter((leg)=>leg.title === point.legend && leg.color === color);
+                if (checkSimilarLegends.length > 0) {
+                    return;
+                }
+                const legend = {
+                    title: point.legend,
+                    color,
+                    hoverAction: ()=>{
+                        _handleChartMouseLeave();
+                        _onLegendHover(point.legend);
+                    },
+                    onMouseOutAction: ()=>{
+                        _onLegendLeave();
+                    }
+                };
+                actions.push(legend);
+            });
+        });
+        return /*#__PURE__*/ React.createElement(Legends, {
+            legends: actions,
+            enabledWrapLines: props.enabledLegendsWrapLines,
+            overflowText: props.legendsOverflowText,
+            ...props.legendProps,
+            onChange: onLegendSelectionChange
+        });
+    };
+    const points = props.data;
+    const { keys, xAxisLabels, datasetForBars } = _createDataSetOfGVBC(points);
+    _keys = keys;
+    _xAxisLabels = xAxisLabels;
+    _datasetForBars = datasetForBars;
+    const _xAxisType = getTypeOfAxis(points[0].name, true);
+    const legends = _getLegendData(points);
+    _adjustProps();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const yMax = d3Max(_dataset, (point)=>d3Max(_keys, (key)=>point[key]));
+    _yMax = Math.max(yMax, props.yMaxValue || 0);
+    var _props_culture;
+    const calloutProps = {
+        clickPosition,
+        isPopoverOpen,
+        color,
+        legend: calloutLegend,
+        XValue: xCalloutValue,
+        YValue: yCalloutValue ? yCalloutValue : dataForHoverCard,
+        YValueHover,
+        hoverXValue,
+        culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+        isCartesian: true,
+        ...props.calloutProps,
+        ...getAccessibleDataObject(callOutAccessibilityData, 'text', false)
+    };
+    const tickParams = {
+        tickValues: props.tickValues,
+        tickFormat: props.tickFormat
+    };
+    const _getGraphData = (xScale, yScale, containerHeight, containerWidth, xElement)=>{
+        const xScale0 = _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.
+        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xScale0.bandwidth() / (_keys.length + (_keys.length - 1) * BAR_GAP_RATE));
+        _groupWidth = (_keys.length + (_keys.length - 1) * BAR_GAP_RATE) * _barWidth;
+        const xScale1 = _createX1Scale();
+        const allGroupsBars = [];
+        _datasetForBars.forEach((singleSet)=>{
+            allGroupsBars.push(_buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement));
+        });
+        _groupedVerticalBarGraph = allGroupsBars;
+    };
+    const _getMargins = (margins)=>{
+        _margins = margins;
+    };
+    const _getOpacity = (legendTitle)=>{
+        const opacity = _legendHighlighted(legendTitle) || _noLegendHighlighted() ? '' : '0.1';
+        return opacity;
+    };
+    function updatePosition(newX, newY) {
+        const threshold = 1; // Set a threshold for movement
+        const { x, y } = clickPosition;
+        // Calculate the distance moved
+        const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));
+        // Update the position only if the distance moved is greater than the threshold
+        if (distance > threshold) {
+            setClickPosition({
+                x: newX,
+                y: newY
+            });
+            setPopoverOpen(true);
+        }
+    }
+    const onBarHover = (pointData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    groupData, mouseEvent)=>{
+        mouseEvent.persist();
+        if (_calloutAnchorPoint !== pointData) {
+            _calloutAnchorPoint = pointData;
+            updatePosition(mouseEvent.clientX, mouseEvent.clientY);
+            setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));
+            setCalloutLegend(pointData.legend);
+            setDataForHoverCard(pointData.data);
+            setColor(pointData.color);
+            setXCalloutValue(pointData.xAxisCalloutData);
+            setYCalloutValue(pointData.yAxisCalloutData);
+            setCallOutAccessibilityData(props.isCalloutForStack ? groupData.stackCallOutAccessibilityData : pointData.callOutAccessibilityData);
+            setYValueHover(groupData.groupSeries);
+            setHoverXValue(pointData.xAxisCalloutData);
+        }
+    };
+    const _onBarLeave = ()=>{
+    /**/ };
+    const _handleChartMouseLeave = ()=>{
+        _calloutAnchorPoint = null;
+        setPopoverOpen(false);
+    };
+    const onBarFocus = (pointData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    groupData, refArrayIndexNumber)=>{
+        _refArray.forEach((obj, index)=>{
+            if (obj.index === pointData.legend && refArrayIndexNumber === index) {
+                setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));
+                setCalloutLegend(pointData.legend);
+                setDataForHoverCard(pointData.data);
+                setColor(pointData.color);
+                setXCalloutValue(pointData.xAxisCalloutData);
+                setYCalloutValue(pointData.yAxisCalloutData);
+                setCallOutAccessibilityData(props.isCalloutForStack ? groupData.stackCallOutAccessibilityData : pointData.callOutAccessibilityData);
+                setYValueHover(groupData.groupSeries);
+                setHoverXValue(pointData.xAxisCalloutData);
+            }
+        });
+    };
+    const _refCallback = (element, legendTitle, refIndexNumber)=>{
+        _refArray[refIndexNumber] = {
+            index: legendTitle,
+            refElement: element
+        };
+    };
+    const _buildGraph = (// 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)=>{
+        const singleGroup = [];
+        const barLabelsForGroup = [];
+        const yBarScale = d3ScaleLinear().domain([
+            0,
+            yMax
+        ]).range([
+            0,
+            containerHeight - _margins.bottom - _margins.top
+        ]);
+        const tempDataSet = Object.keys(datasetForBars[0]).splice(0, keys.length);
+        tempDataSet.forEach((datasetKey, index)=>{
+            const refIndexNumber = singleSet.indexNum * tempDataSet.length + index;
+            const pointData = singleSet[datasetKey];
+            // To align the centers of the generated bandwidth and the calculated one when they differ,
+            // use the following addend.
+            const xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - _barWidth) / 2;
+            const yPoint = Math.max(containerHeight - _margins.bottom - yBarScale(pointData.data), 0);
+            const startColor = pointData.color ? pointData.color : getNextColor(index, 0);
+            // Not rendering data with 0.
+            pointData.data && singleGroup.push(/*#__PURE__*/ React.createElement(React.Fragment, {
+                key: `${singleSet.indexNum}-${index}`
+            }, /*#__PURE__*/ React.createElement("rect", {
+                className: classes.opacityChangeOnHover,
+                height: Math.max(yBarScale(pointData.data), 0),
+                width: _barWidth,
+                x: xPoint,
+                y: yPoint,
+                "data-is-focusable": !props.hideTooltip && (_legendHighlighted(pointData.legend) || _noLegendHighlighted()),
+                opacity: _getOpacity(pointData.legend),
+                ref: (e)=>{
+                    _refCallback(e, pointData.legend, refIndexNumber);
+                },
+                fill: startColor,
+                rx: 0,
+                onMouseOver: onBarHover.bind(null, pointData, singleSet),
+                onMouseMove: onBarHover.bind(null, pointData, singleSet),
+                onMouseOut: _onBarLeave,
+                onFocus: onBarFocus.bind(null, pointData, singleSet, refIndexNumber),
+                onBlur: _onBarLeave,
+                onClick: pointData.onClick,
+                "aria-label": getAriaLabel(pointData, singleSet.xAxisPoint),
+                tabIndex: pointData.legend !== '' ? 0 : undefined,
+                role: "img"
+            })));
+            if (pointData.data && !props.hideLabels && _barWidth >= 16 && (_legendHighlighted(pointData.legend) || _noLegendHighlighted())) {
+                barLabelsForGroup.push(/*#__PURE__*/ React.createElement("text", {
+                    key: `${singleSet.indexNum}-${index}`,
+                    x: xPoint + _barWidth / 2,
+                    y: yPoint - 6,
+                    textAnchor: "middle",
+                    className: classes.barLabel,
+                    "aria-hidden": true
+                }, formatValueWithSIPrefix(pointData.data)));
+            }
+        });
+        // Used to display tooltip at x axis labels.
+        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
+            const xAxisElement = d3Select(xElement).call(xScale0);
+            try {
+                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+            const tooltipProps = {
+                tooltipCls: classes.tooltip,
+                id: _tooltipId,
+                xAxis: xAxisElement
+            };
+            xAxisElement && tooltipOfXAxislabels(tooltipProps);
+        }
+        return /*#__PURE__*/ React.createElement("g", {
+            key: singleSet.indexNum,
+            transform: `translate(${xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - _groupWidth) / 2}, 0)`
+        }, singleGroup, barLabelsForGroup);
+    };
+    // 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
+    const _createX0Scale = (containerWidth)=>{
+        const x0Axis = d3ScaleBand().domain(xAxisLabels).range(_useRtl ? [
+            containerWidth - _margins.right - _domainMargin,
+            _margins.left + _domainMargin
+        ] : [
+            _margins.left + _domainMargin,
+            containerWidth - _margins.right - _domainMargin
+        ]).paddingInner(_xAxisInnerPadding).paddingOuter(_xAxisOuterPadding);
+        return x0Axis;
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const _createX1Scale = ()=>{
+        return d3ScaleBand().domain(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(_useRtl ? [
+            _groupWidth,
+            0
+        ] : [
+            0,
+            _groupWidth
+        ]).paddingInner(X1_INNER_PADDING);
+    };
+    const _onLegendHover = (legendTitle)=>{
+        setActiveLegend(legendTitle);
+    };
+    const _onLegendLeave = ()=>{
+        setActiveLegend('');
+    };
+    const _getAxisData = React.useCallback((yAxisData)=>{
+        if (yAxisData && yAxisData.yAxisDomainValues.length) {
+            const { yAxisDomainValues: domainValue } = yAxisData;
+            _yMax = Math.max(domainValue[domainValue.length - 1], props.yMaxValue || 0);
+        }
+    }, [
+        props.yMaxValue
+    ]);
+    /**
+   * 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
+   */ const _legendHighlighted = (legendTitle)=>{
+        return _getHighlightedLegend().includes(legendTitle);
+    };
+    /**
+   * This function checks if none of the legends is selected or hovered.
+   */ const _noLegendHighlighted = ()=>{
+        return _getHighlightedLegend().length === 0;
+    };
+    const _getHighlightedLegend = ()=>{
+        return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [
+            activeLegend
+        ] : [];
+    };
+    const getAriaLabel = (point, xAxisPoint)=>{
+        var _point_callOutAccessibilityData;
+        const xValue = point.xAxisCalloutData || xAxisPoint;
+        const legend = point.legend;
+        const yValue = point.yAxisCalloutData || point.data;
+        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
+    };
+    const _getDomainMargins = (containerWidth)=>{
+        /** Total width available to render the bars */ const totalWidth = containerWidth - (_margins.left + MIN_DOMAIN_MARGIN) - (_margins.right + MIN_DOMAIN_MARGIN);
+        /** Rate at which the space between the groups changes wrt the group width */ const groupGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
+        if (_xAxisType === XAxisTypes.StringAxis) {
+            if (isScalePaddingDefined(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.
+                _domainMargin = 0;
+            } else if (props.barWidth !== 'auto') {
+                // Update the bar width so that when CartesianChart rerenders,
+                // the following calculations don't use the previous bar width.
+                _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);
+                const groupWidth = (keys.length + (keys.length - 1) * BAR_GAP_RATE) * _barWidth;
+                /** Total width required to render the groups. Directly proportional to group width */ const reqWidth = (xAxisLabels.length + (xAxisLabels.length - 1) * groupGapRate) * groupWidth;
+                if (totalWidth >= reqWidth) {
+                    // Center align the chart by setting equal left and right margins for domain
+                    _domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
+                }
+            } else if (props.mode === 'plotly' && xAxisLabels.length > 1) {
+                // Calculate the remaining width after rendering groups at their maximum allowable width
+                const groupBandwidth = totalWidth / (xAxisLabels.length + (xAxisLabels.length - 1) * groupGapRate);
+                const barBandwidth = groupBandwidth / (keys.length + (keys.length - 1) * BAR_GAP_RATE);
+                const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, barBandwidth);
+                const groupWidth = (keys.length + (keys.length - 1) * BAR_GAP_RATE) * barWidth;
+                let reqWidth = (xAxisLabels.length + (xAxisLabels.length - 1) * groupGapRate) * groupWidth;
+                const margin1 = (totalWidth - reqWidth) / 2;
+                // Calculate the remaining width after accounting for the space required to render x-axis labels
+                const step = calculateLongestLabelWidth(xAxisLabels) + 20;
+                reqWidth = (xAxisLabels.length - _xAxisInnerPadding) * step;
+                const margin2 = (totalWidth - reqWidth) / 2;
+                _domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
+            }
+        }
+        return {
+            ..._margins,
+            left: _margins.left + _domainMargin,
+            right: _margins.right + _domainMargin
+        };
+    };
+    const _isChartEmpty = ()=>{
+        return !(props.data && props.data.length > 0 && props.data.filter((item)=>item.series.length).length > 0);
+    };
+    const _getChartTitle = ()=>{
+        return (props.chartTitle ? `${props.chartTitle}. ` : '') + `Vertical bar chart with ${_xAxisLabels.length} groups of ${_keys.length} bars each. `;
+    };
+    return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
+        ...props,
+        chartTitle: _getChartTitle(),
+        points: _datasetForBars,
+        chartType: ChartTypes.GroupedVerticalBarChart,
+        calloutProps: calloutProps,
+        legendBars: legends,
+        xAxisType: _xAxisType,
+        datasetForXAxisDomain: _xAxisLabels,
+        tickParams: tickParams,
+        tickPadding: props.tickPadding || 5,
+        maxOfYVal: _yMax,
+        getmargins: _getMargins,
+        getGraphData: _getGraphData,
+        getAxisData: _getAxisData,
+        onChartMouseLeave: _handleChartMouseLeave,
+        getDomainMargins: _getDomainMargins,
+        ..._xAxisType === XAxisTypes.StringAxis && {
+            xAxisInnerPadding: _xAxisInnerPadding,
+            xAxisOuterPadding: _xAxisOuterPadding
+        },
+        barwidth: _barWidth,
+        /* eslint-disable react/jsx-no-bind */ children: ()=>{
+            return /*#__PURE__*/ React.createElement("g", null, _groupedVerticalBarGraph);
+        }
+    }) : /*#__PURE__*/ React.createElement("div", {
+        id: _emptyChartId,
+        role: 'alert',
+        style: {
+            opacity: '0'
+        },
+        "aria-label": 'Graph has no data to display'
+    });
+});
+GroupedVerticalBarChart.displayName = 'GroupedVerticalBarChart';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["GroupedVerticalBarChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useGroupedVerticalBarChartStyles_unstable } from './useGroupedVerticalBarChartStyles.styles';\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';\n\nimport { useId } from '@fluentui/react-utilities';\nimport {\n  ChartTypes,\n  IAxisData,\n  getAccessibleDataObject,\n  tooltipOfXAxislabels,\n  XAxisTypes,\n  getTypeOfAxis,\n  formatValueWithSIPrefix,\n  getScalePadding,\n  getBarWidth,\n  isScalePaddingDefined,\n  getNextColor,\n  areArraysEqual,\n  calculateLongestLabelWidth,\n  useRtl,\n} from '../../utilities/index';\n\nimport {\n  AccessibilityProps,\n  CartesianChart,\n  Margins,\n  Legend,\n  RefArrayData,\n  GroupedVerticalBarChartProps,\n  GroupedVerticalBarChartData,\n  GVBarChartSeriesPoint,\n  Legends,\n  YValueHover,\n  DataVizPalette,\n  getColorFromToken,\n  ChartPopoverProps,\n} from '../../index';\n\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 GVDataPoint {\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 GVSingleDataPoint {\n  [key: string]: GVDataPoint;\n}\n\nexport const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = React.forwardRef<\n  HTMLDivElement,\n  GroupedVerticalBarChartProps\n>((props = { maxBarWidth: 24 }, forwardedRef) => {\n  const _tooltipId: string = useId('GVBCTooltipId_');\n  const _emptyChartId: string = useId('_GVBC_empty');\n  const _useRtl: boolean = useRtl();\n  let _domainMargin: number = MIN_DOMAIN_MARGIN;\n  let _dataset: GVDataPoint[] = [];\n  let _keys: string[] = [];\n  let _xAxisLabels: string[] = [];\n  let _datasetForBars: any[] = [];\n  let _margins: Margins = { top: 0, right: 0, bottom: 0, left: 0 };\n  let _groupedVerticalBarGraph: JSX.Element[] = [];\n  let _refArray: RefArrayData[] = [];\n  let _yMax: number = 0;\n  let _calloutAnchorPoint: GVBarChartSeriesPoint | null = null;\n  let _barWidth: number = 0;\n  let _groupWidth: number = 0;\n  let _xAxisInnerPadding: number = 0;\n  let _xAxisOuterPadding: number = 0;\n\n  const [color, setColor] = React.useState<string>('');\n  const [dataForHoverCard, setDataForHoverCard] = React.useState<number>(0);\n  const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n  const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n  const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n  const [YValueHover, setYValueHover] = React.useState<YValueHover[]>([]);\n  const [hoverXValue, setHoverXValue] = React.useState<string>('');\n  const [calloutLegend, setCalloutLegend] = React.useState<string>('');\n  const [activeLegend, setActiveLegend] = React.useState<string>('');\n  const [callOutAccessibilityData, setCallOutAccessibilityData] = React.useState<AccessibilityProps | undefined>(\n    undefined,\n  );\n  const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n  const [isPopoverOpen, setPopoverOpen] = React.useState<boolean>(false);\n  const classes = useGroupedVerticalBarChartStyles_unstable(props);\n\n  React.useEffect(() => {\n    if (!areArraysEqual(props.legendProps?.selectedLegends, selectedLegends)) {\n      setSelectedLegends(props.legendProps?.selectedLegends || []);\n    }\n  }, [props.legendProps?.selectedLegends]);\n\n  const _adjustProps = () => {\n    _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);\n    // x0_inner_padding = space_between_groups / (space_between_groups + group_width)\n    // space_between_groups = 2 * bar_width\n    // group_width = keys.length * bar_width + (keys.length - 1) * space_between_bars\n    _xAxisInnerPadding = getScalePadding(\n      props.xAxisInnerPadding,\n      undefined,\n      2 / (2 + keys.length + (keys.length - 1) * BAR_GAP_RATE),\n    );\n    _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding);\n  };\n\n  const _createDataset = (points: GroupedVerticalBarChartData[]) => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const datasetForBars: any = [];\n    const dataset: GVDataPoint[] = [];\n\n    points.forEach((point: GroupedVerticalBarChartData, index: number) => {\n      const singleDatasetPoint: GVDataPoint = {};\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const singleDatasetPointForBars: any = {};\n      const singleDataSeries: GVBarChartSeriesPoint[] = [];\n\n      point.series.forEach((seriesPoint: GVBarChartSeriesPoint, seriesIndex) => {\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    _dataset = dataset;\n    return datasetForBars;\n  };\n\n  const _createDataSetOfGVBC = (points: GroupedVerticalBarChartData[]) => {\n    const keys: string[] = [];\n    const xAxisLabels: string[] = points.map(singlePoint => singlePoint.name);\n    points[0].series.forEach((singleKey: GVBarChartSeriesPoint) => {\n      keys.push(singleKey.key);\n    });\n    const datasetForBars = _createDataset(points);\n    return {\n      keys,\n      xAxisLabels,\n      datasetForBars,\n    };\n  };\n\n  const onLegendSelectionChange = (\n    selectedLegends: string[],\n    event: React.MouseEvent<HTMLButtonElement>,\n    currentLegend?: Legend,\n  ): void => {\n    if (props.legendProps?.canSelectMultipleLegends) {\n      setSelectedLegends(selectedLegends);\n    } else {\n      setSelectedLegends(selectedLegends.slice(-1));\n    }\n    if (props.legendProps?.onChange) {\n      props.legendProps.onChange(selectedLegends, event, currentLegend);\n    }\n  };\n\n  const _getLegendData = (points: GroupedVerticalBarChartData[]): JSX.Element => {\n    const data = points;\n    const defaultPalette: string[] = [\n      getColorFromToken(DataVizPalette.color1),\n      getColorFromToken(DataVizPalette.color2),\n      getColorFromToken(DataVizPalette.color3),\n      getColorFromToken(DataVizPalette.color4),\n      getColorFromToken(DataVizPalette.color5),\n    ];\n    const actions: Legend[] = [];\n\n    data.forEach((singleChartData: GroupedVerticalBarChartData) => {\n      singleChartData.series.forEach((point: GVBarChartSeriesPoint) => {\n        let color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n        const checkSimilarLegends = actions.filter((leg: Legend) => leg.title === point.legend && leg.color === color);\n        if (checkSimilarLegends!.length > 0) {\n          return;\n        }\n        const legend: Legend = {\n          title: point.legend,\n          color,\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            _onLegendHover(point.legend);\n          },\n          onMouseOutAction: () => {\n            _onLegendLeave();\n          },\n        };\n\n        actions.push(legend);\n      });\n    });\n    return (\n      <Legends\n        legends={actions}\n        enabledWrapLines={props.enabledLegendsWrapLines}\n        overflowText={props.legendsOverflowText}\n        {...props.legendProps}\n        onChange={onLegendSelectionChange}\n      />\n    );\n  };\n\n  const points = props.data;\n  const { keys, xAxisLabels, datasetForBars } = _createDataSetOfGVBC(points!);\n  _keys = keys;\n  _xAxisLabels = xAxisLabels;\n  _datasetForBars = datasetForBars;\n  const _xAxisType: XAxisTypes = getTypeOfAxis(points![0].name, true) as XAxisTypes;\n  const legends: JSX.Element = _getLegendData(points!);\n  _adjustProps();\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const yMax = d3Max(_dataset, (point: any) => d3Max(_keys, (key: string) => point[key]));\n  _yMax = Math.max(yMax, props.yMaxValue || 0);\n\n  const calloutProps: ChartPopoverProps = {\n    clickPosition,\n    isPopoverOpen,\n    color,\n    legend: calloutLegend,\n    XValue: xCalloutValue,\n    YValue: yCalloutValue ? yCalloutValue : dataForHoverCard,\n    YValueHover,\n    hoverXValue,\n    culture: props.culture ?? 'en-us',\n    isCartesian: true,\n    ...props.calloutProps,\n    ...getAccessibleDataObject(callOutAccessibilityData, 'text', false),\n  };\n  const tickParams = {\n    tickValues: props.tickValues!,\n    tickFormat: props.tickFormat!,\n  };\n\n  const _getGraphData = (\n    xScale: StringAxis | NumericAxis,\n    yScale: NumericAxis,\n    containerHeight: number,\n    containerWidth: number,\n    xElement?: SVGElement | null,\n  ) => {\n    const xScale0 = _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    _barWidth = getBarWidth(\n      props.barWidth,\n      props.maxBarWidth,\n      xScale0.bandwidth() / (_keys.length + (_keys.length - 1) * BAR_GAP_RATE),\n    );\n    _groupWidth = (_keys.length + (_keys.length - 1) * BAR_GAP_RATE) * _barWidth;\n\n    const xScale1 = _createX1Scale();\n    const allGroupsBars: JSX.Element[] = [];\n    _datasetForBars.forEach((singleSet: GVSingleDataPoint) => {\n      allGroupsBars.push(_buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement!));\n    });\n    _groupedVerticalBarGraph = allGroupsBars;\n  };\n\n  const _getMargins = (margins: Margins) => {\n    _margins = margins;\n  };\n\n  const _getOpacity = (legendTitle: string): string => {\n    const opacity = _legendHighlighted(legendTitle) || _noLegendHighlighted() ? '' : '0.1';\n    return opacity;\n  };\n\n  function updatePosition(newX: number, newY: number) {\n    const threshold = 1; // Set a threshold for movement\n    const { x, y } = clickPosition;\n    // Calculate the distance moved\n    const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n    // Update the position only if the distance moved is greater than the threshold\n    if (distance > threshold) {\n      setClickPosition({ x: newX, y: newY });\n      setPopoverOpen(true);\n    }\n  }\n\n  const onBarHover = (\n    pointData: GVBarChartSeriesPoint,\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 (_calloutAnchorPoint !== pointData) {\n      _calloutAnchorPoint = pointData;\n      updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n      setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));\n      setCalloutLegend(pointData.legend);\n      setDataForHoverCard(pointData.data);\n      setColor(pointData.color);\n      setXCalloutValue(pointData.xAxisCalloutData!);\n      setYCalloutValue(pointData.yAxisCalloutData!);\n      setCallOutAccessibilityData(\n        props.isCalloutForStack ? groupData.stackCallOutAccessibilityData : pointData.callOutAccessibilityData,\n      );\n      setYValueHover(groupData.groupSeries);\n      setHoverXValue(pointData.xAxisCalloutData!);\n    }\n  };\n\n  const _onBarLeave = (): void => {\n    /**/\n  };\n\n  const _handleChartMouseLeave = (): void => {\n    _calloutAnchorPoint = null;\n    setPopoverOpen(false);\n  };\n\n  const onBarFocus = (\n    pointData: GVBarChartSeriesPoint,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    groupData: any,\n    refArrayIndexNumber: number,\n  ): void => {\n    _refArray.forEach((obj: RefArrayData, index: number) => {\n      if (obj.index === pointData.legend && refArrayIndexNumber === index) {\n        setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));\n        setCalloutLegend(pointData.legend);\n        setDataForHoverCard(pointData.data);\n        setColor(pointData.color);\n        setXCalloutValue(pointData.xAxisCalloutData!);\n        setYCalloutValue(pointData.yAxisCalloutData!);\n        setCallOutAccessibilityData(\n          props.isCalloutForStack ? groupData.stackCallOutAccessibilityData : pointData.callOutAccessibilityData,\n        );\n        setYValueHover(groupData.groupSeries);\n        setHoverXValue(pointData.xAxisCalloutData!);\n      }\n    });\n  };\n\n  const _refCallback = (element: SVGRectElement, legendTitle: string, refIndexNumber: number): void => {\n    _refArray[refIndexNumber] = { index: legendTitle, refElement: element };\n  };\n\n  const _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, yMax])\n      .range([0, containerHeight! - _margins.bottom! - _margins.top!]);\n\n    const tempDataSet = Object.keys(datasetForBars[0]).splice(0, 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() - _barWidth) / 2;\n      const yPoint = Math.max(containerHeight! - _margins.bottom! - yBarScale(pointData.data), 0);\n      const startColor = pointData.color ? pointData.color : getNextColor(index, 0);\n\n      // Not rendering data with 0.\n      pointData.data &&\n        singleGroup.push(\n          <React.Fragment key={`${singleSet.indexNum}-${index}`}>\n            <rect\n              className={classes.opacityChangeOnHover}\n              height={Math.max(yBarScale(pointData.data), 0)}\n              width={_barWidth}\n              x={xPoint}\n              y={yPoint}\n              data-is-focusable={!props.hideTooltip && (_legendHighlighted(pointData.legend) || _noLegendHighlighted())}\n              opacity={_getOpacity(pointData.legend)}\n              ref={(e: SVGRectElement | null) => {\n                _refCallback(e!, pointData.legend, refIndexNumber);\n              }}\n              fill={startColor}\n              rx={0}\n              onMouseOver={onBarHover.bind(null, pointData, singleSet)}\n              onMouseMove={onBarHover.bind(null, pointData, singleSet)}\n              onMouseOut={_onBarLeave}\n              onFocus={onBarFocus.bind(null, pointData, singleSet, refIndexNumber)}\n              onBlur={_onBarLeave}\n              onClick={pointData.onClick}\n              aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)}\n              tabIndex={pointData.legend !== '' ? 0 : undefined}\n              role=\"img\"\n            />\n          </React.Fragment>,\n        );\n      if (\n        pointData.data &&\n        !props.hideLabels &&\n        _barWidth >= 16 &&\n        (_legendHighlighted(pointData.legend) || _noLegendHighlighted())\n      ) {\n        barLabelsForGroup.push(\n          <text\n            key={`${singleSet.indexNum}-${index}`}\n            x={xPoint + _barWidth / 2}\n            y={yPoint - 6}\n            textAnchor=\"middle\"\n            className={classes.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 (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {\n      const xAxisElement = d3Select(xElement).call(xScale0);\n      try {\n        document.getElementById(_tooltipId) && document.getElementById(_tooltipId)!.remove();\n        // eslint-disable-next-line no-empty\n      } catch (e) {}\n      const tooltipProps = {\n        tooltipCls: classes.tooltip!,\n        id: _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() - _groupWidth) / 2}, 0)`}\n      >\n        {singleGroup}\n        {barLabelsForGroup}\n      </g>\n    );\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  const _createX0Scale = (containerWidth: number) => {\n    const x0Axis = d3ScaleBand()\n      .domain(xAxisLabels)\n      .range(\n        _useRtl\n          ? [containerWidth! - _margins.right! - _domainMargin, _margins.left! + _domainMargin]\n          : [_margins.left! + _domainMargin, containerWidth! - _margins.right! - _domainMargin],\n      )\n      .paddingInner(_xAxisInnerPadding)\n      .paddingOuter(_xAxisOuterPadding);\n    return x0Axis;\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const _createX1Scale = (): any => {\n    return (\n      d3ScaleBand()\n        .domain(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(_useRtl ? [_groupWidth, 0] : [0, _groupWidth])\n        .paddingInner(X1_INNER_PADDING)\n    );\n  };\n\n  const _onLegendHover = (legendTitle: string): void => {\n    setActiveLegend(legendTitle);\n  };\n\n  const _onLegendLeave = (): void => {\n    setActiveLegend('');\n  };\n\n  const _getAxisData = React.useCallback(\n    (yAxisData: IAxisData) => {\n      if (yAxisData && yAxisData.yAxisDomainValues.length) {\n        const { yAxisDomainValues: domainValue } = yAxisData;\n        _yMax = Math.max(domainValue[domainValue.length - 1], props.yMaxValue || 0);\n      }\n    },\n    [props.yMaxValue],\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  const _legendHighlighted = (legendTitle: string) => {\n    return _getHighlightedLegend().includes(legendTitle!);\n  };\n\n  /**\n   * This function checks if none of the legends is selected or hovered.\n   */\n  const _noLegendHighlighted = () => {\n    return _getHighlightedLegend().length === 0;\n  };\n\n  const _getHighlightedLegend = () => {\n    return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n  };\n\n  const getAriaLabel = (point: GVBarChartSeriesPoint, 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  const _getDomainMargins = (containerWidth: number): Margins => {\n    /** Total width available to render the bars */\n    const totalWidth = containerWidth - (_margins.left! + MIN_DOMAIN_MARGIN) - (_margins.right! + MIN_DOMAIN_MARGIN);\n    /** Rate at which the space between the groups changes wrt the group width */\n    const groupGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);\n\n    if (_xAxisType === XAxisTypes.StringAxis) {\n      if (isScalePaddingDefined(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        _domainMargin = 0;\n      } else if (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        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth);\n        const groupWidth = (keys.length + (keys.length - 1) * BAR_GAP_RATE) * _barWidth;\n        /** Total width required to render the groups. Directly proportional to group width */\n        const reqWidth = (xAxisLabels.length + (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          _domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;\n        }\n      } else if (props.mode === 'plotly' && xAxisLabels.length > 1) {\n        // Calculate the remaining width after rendering groups at their maximum allowable width\n        const groupBandwidth = totalWidth / (xAxisLabels.length + (xAxisLabels.length - 1) * groupGapRate);\n        const barBandwidth = groupBandwidth / (keys.length + (keys.length - 1) * BAR_GAP_RATE);\n        const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, barBandwidth);\n        const groupWidth = (keys.length + (keys.length - 1) * BAR_GAP_RATE) * barWidth;\n        let reqWidth = (xAxisLabels.length + (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(xAxisLabels) + 20;\n        reqWidth = (xAxisLabels.length - _xAxisInnerPadding) * step;\n        const margin2 = (totalWidth - reqWidth) / 2;\n\n        _domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));\n      }\n    }\n\n    return {\n      ..._margins,\n      left: _margins.left! + _domainMargin,\n      right: _margins.right! + _domainMargin,\n    };\n  };\n\n  const _isChartEmpty = (): boolean => {\n    return !(\n      props.data &&\n      props.data.length > 0 &&\n      props.data.filter((item: GroupedVerticalBarChartData) => item.series.length).length > 0\n    );\n  };\n\n  const _getChartTitle = (): string => {\n    return (\n      (props.chartTitle ? `${props.chartTitle}. ` : '') +\n      `Vertical bar chart with ${_xAxisLabels.length} groups of ${_keys.length} bars each. `\n    );\n  };\n\n  return !_isChartEmpty() ? (\n    <CartesianChart\n      {...props}\n      chartTitle={_getChartTitle()}\n      points={_datasetForBars}\n      chartType={ChartTypes.GroupedVerticalBarChart}\n      calloutProps={calloutProps}\n      legendBars={legends}\n      xAxisType={_xAxisType}\n      datasetForXAxisDomain={_xAxisLabels}\n      tickParams={tickParams}\n      tickPadding={props.tickPadding || 5}\n      maxOfYVal={_yMax}\n      getmargins={_getMargins}\n      getGraphData={_getGraphData}\n      getAxisData={_getAxisData}\n      onChartMouseLeave={_handleChartMouseLeave}\n      getDomainMargins={_getDomainMargins}\n      {...(_xAxisType === XAxisTypes.StringAxis && {\n        xAxisInnerPadding: _xAxisInnerPadding,\n        xAxisOuterPadding: _xAxisOuterPadding,\n      })}\n      barwidth={_barWidth}\n      /* eslint-disable react/jsx-no-bind */\n      children={() => {\n        return <g>{_groupedVerticalBarGraph}</g>;\n      }}\n    />\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n});\nGroupedVerticalBarChart.displayName = 'GroupedVerticalBarChart';\n"],"names":["React","useGroupedVerticalBarChartStyles_unstable","max","d3Max","select","d3Select","scaleBand","d3ScaleBand","scaleLinear","d3ScaleLinear","useId","ChartTypes","getAccessibleDataObject","tooltipOfXAxislabels","XAxisTypes","getTypeOfAxis","formatValueWithSIPrefix","getScalePadding","getBarWidth","isScalePaddingDefined","getNextColor","areArraysEqual","calculateLongestLabelWidth","useRtl","CartesianChart","Legends","DataVizPalette","getColorFromToken","MIN_DOMAIN_MARGIN","X1_INNER_PADDING","BAR_GAP_RATE","GroupedVerticalBarChart","forwardRef","props","maxBarWidth","forwardedRef","_tooltipId","_emptyChartId","_useRtl","_domainMargin","_dataset","_keys","_xAxisLabels","_datasetForBars","_margins","top","right","bottom","left","_groupedVerticalBarGraph","_refArray","_yMax","_calloutAnchorPoint","_barWidth","_groupWidth","_xAxisInnerPadding","_xAxisOuterPadding","color","setColor","useState","dataForHoverCard","setDataForHoverCard","selectedLegends","setSelectedLegends","legendProps","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","YValueHover","setYValueHover","hoverXValue","setHoverXValue","calloutLegend","setCalloutLegend","activeLegend","setActiveLegend","callOutAccessibilityData","setCallOutAccessibilityData","undefined","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","classes","useEffect","_adjustProps","barWidth","xAxisInnerPadding","keys","length","xAxisOuterPadding","_createDataset","points","datasetForBars","dataset","forEach","point","index","singleDatasetPoint","singleDatasetPointForBars","singleDataSeries","series","seriesPoint","seriesIndex","key","data","push","xAxisPoint","name","indexNum","groupSeries","stackCallOutAccessibilityData","_createDataSetOfGVBC","xAxisLabels","map","singlePoint","singleKey","onLegendSelectionChange","event","currentLegend","canSelectMultipleLegends","slice","onChange","_getLegendData","defaultPalette","color1","color2","color3","color4","color5","actions","singleChartData","Math","floor","random","checkSimilarLegends","filter","leg","title","legend","hoverAction","_handleChartMouseLeave","_onLegendHover","onMouseOutAction","_onLegendLeave","legends","enabledWrapLines","enabledLegendsWrapLines","overflowText","legendsOverflowText","_xAxisType","yMax","yMaxValue","calloutProps","XValue","YValue","culture","isCartesian","tickParams","tickValues","tickFormat","_getGraphData","xScale","yScale","containerHeight","containerWidth","xElement","xScale0","_createX0Scale","bandwidth","xScale1","_createX1Scale","allGroupsBars","singleSet","_buildGraph","_getMargins","margins","_getOpacity","legendTitle","opacity","_legendHighlighted","_noLegendHighlighted","updatePosition","newX","newY","threshold","distance","sqrt","pow","onBarHover","pointData","groupData","mouseEvent","persist","clientX","clientY","xAxisCalloutData","yAxisCalloutData","isCalloutForStack","_onBarLeave","onBarFocus","refArrayIndexNumber","obj","_refCallback","element","refIndexNumber","refElement","singleGroup","barLabelsForGroup","yBarScale","domain","range","tempDataSet","Object","splice","datasetKey","xPoint","yPoint","startColor","Fragment","rect","className","opacityChangeOnHover","height","width","data-is-focusable","hideTooltip","ref","e","fill","rx","onMouseOver","bind","onMouseMove","onMouseOut","onFocus","onBlur","onClick","aria-label","getAriaLabel","tabIndex","role","hideLabels","text","textAnchor","barLabel","aria-hidden","wrapXAxisLables","showXAxisLablesTooltip","xAxisElement","call","document","getElementById","remove","tooltipProps","tooltipCls","tooltip","id","xAxis","g","transform","x0Axis","paddingInner","paddingOuter","_getAxisData","useCallback","yAxisData","yAxisDomainValues","domainValue","_getHighlightedLegend","includes","xValue","yValue","ariaLabel","_getDomainMargins","totalWidth","groupGapRate","StringAxis","groupWidth","reqWidth","mode","groupBandwidth","barBandwidth","margin1","step","margin2","min","_isChartEmpty","item","_getChartTitle","chartTitle","chartType","legendBars","xAxisType","datasetForXAxisDomain","tickPadding","maxOfYVal","getmargins","getGraphData","getAxisData","onChartMouseLeave","getDomainMargins","barwidth","children","div","style","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.js

@@ -0,0 +1,4 @@
+/**
+ * Vertical Bar Chart styles
+ * {@docCategory VerticalBarChart}
+ */ export { };

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GroupedVerticalBarChart.types.ts"],"sourcesContent":["import {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  GroupedVerticalBarChartData,\n} from '../../index';\n\n/**\n * Vertical Bar Chart properties\n * {@docCategory VerticalBarChart}\n */\nexport interface GroupedVerticalBarChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: GroupedVerticalBarChartData[];\n\n  /**\n   * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px,\n   * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values.\n   * @default 16\n   */\n  barWidth?: number | 'default' | 'auto';\n\n  /**\n   * Colors from which to select the color of each bar.\n   */\n  colors?: string[];\n\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * This prop makes sure that all the bars are of same color.\n   * it will take the first color from the array of colors in\n   * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight\n   * @default false\n   */\n  useSingleColor?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: GroupedVerticalBarChartStyles;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * To display multi stack callout or single callout\n   * @default false\n   */\n  isCalloutForStack?: boolean;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Maximum width of a bar, in pixels.\n   * @default 24\n   */\n  maxBarWidth?: number;\n\n  /**\n   * Padding between bars as a fraction of the [step](https://d3js.org/d3-scale/band#band_step).\n   * Takes a number in the range [0, 1]. Only applicable to string x-axis.\n   * @default 2/3\n   */\n  xAxisInnerPadding?: number;\n\n  /**\n   * Padding before the first bar and after the last bar as a fraction of\n   * the [step](https://d3js.org/d3-scale/band#band_step). Takes a number in the range [0, 1].\n   * Only applicable to string x-axis.\n   */\n  xAxisOuterPadding?: number;\n\n  /**\n   * Specifies the mode of the chart.\n   * @default 'default'\n   */\n  mode?: 'default' | 'plotly';\n}\n\n/**\n * Vertical Bar Chart style properties\n * {@docCategory VerticalBarChart}\n */\nexport interface GroupedVerticalBarChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Vertical Bar Chart styles\n * {@docCategory VerticalBarChart}\n */\nexport interface GroupedVerticalBarChartStyles extends CartesianChartStyles {\n  /**\n   * Style for the bar labels\n   */\n  barLabel: string;\n}\n"],"names":[],"rangeMappings":";;;","mappings":"AAiGA;;;CAGC,GACD,WAKC"}

package/lib/components/GroupedVerticalBarChart/index.js

@@ -0,0 +1,3 @@
+export * from './GroupedVerticalBarChart';
+export * from './GroupedVerticalBarChart.types';
+export * from '../../types/index';

package/lib/components/GroupedVerticalBarChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './GroupedVerticalBarChart';\nexport * from './GroupedVerticalBarChart.types';\nexport * from '../../types/index';\n"],"names":[],"rangeMappings":";;","mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,kCAAkC;AAChD,cAAc,oBAAoB"}