@fluentui/react-charts 9.3.2 → 9.3.4

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js

@@ -1,13 +1,14 @@
 'use client';
 import * as React from 'react';
 import { useGroupedVerticalBarChartStyles_unstable } from './useGroupedVerticalBarChartStyles.styles';
-import { select as d3Select } from 'd3-selection';
+import { select as d3Select, pointer as d3Pointer } from 'd3-selection';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { scaleBand as d3ScaleBand } from 'd3-scale';
 import { useId } from '@fluentui/react-utilities';
 import { ChartTypes, getAccessibleDataObject, tooltipOfAxislabels, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getScalePadding, getBarWidth, isScalePaddingDefined, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, getNextColor, areArraysEqual, calculateLongestLabelWidth, useRtl, calcRequiredWidth, calcTotalWidth, calcBandwidth, calcTotalBandUnits, sortAxisCategories } from '../../utilities/index';
-import { CartesianChart, Legends } from '../../index';
+import { CartesianChart, Legends, getColorFromToken } from '../../index';
 import { toImage } from '../../utilities/image-export-utils';
+import { tokens } from '@fluentui/react-theme';
 const MIN_DOMAIN_MARGIN = 8;
 const X1_INNER_PADDING = 0.1;
 const VERTICAL_BAR_GAP = 1;
@@ -38,26 +39,27 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     let _groupWidth = 0;
     let _xAxisInnerPadding = 0;
     let _xAxisOuterPadding = 0;
-    let _legends = [];
+    let _barLegends = [];
+    let _lineLegends = [];
     let _legendColorMap = {};
     const cartesianChartRef = React.useRef(null);
     const Y_ORIGIN = 0;
     const _legendsRef = React.useRef(null);
+    const _rectRef = React.useRef(null);
+    const _uniqDotId = useId('gvbc_dot_');
     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 [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 [popoverTarget, setPopoverTarget] = React.useState(null);
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const [activeLinePoint, setActiveLinePoint] = React.useState('');
     const classes = useGroupedVerticalBarChartStyles_unstable(props);
     React.useEffect(()=>{
         var _props_legendProps;
@@ -83,14 +85,30 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         _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 = _legends.length * bar_width + (_legends.length - 1) * space_between_bars
-        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, undefined, 2 / (2 + calcTotalBandUnits(_legends.length, X1_INNER_PADDING)));
+        // group_width = _barLegends.length * bar_width + (_barLegends.length - 1) * space_between_bars
+        _xAxisInnerPadding = getScalePadding(props.xAxisInnerPadding, undefined, 2 / (2 + calcTotalBandUnits(_barLegends.length, X1_INNER_PADDING)));
         _xAxisOuterPadding = getScalePadding(props.xAxisOuterPadding);
     };
-    const _createDataset = (points)=>{
+    const _createDataset = (barData, lineData)=>{
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const datasetForBars = [];
-        points.forEach((point, index)=>{
+        const linePointsByX = {};
+        const visitedX = new Set();
+        lineData.forEach((series)=>{
+            series.data.forEach((point)=>{
+                if (!linePointsByX[point.x]) {
+                    linePointsByX[point.x] = [];
+                }
+                linePointsByX[point.x].push({
+                    ...point,
+                    legend: series.legend,
+                    color: series.color,
+                    data: point.y,
+                    useSecondaryYScale: series.useSecondaryYScale
+                });
+            });
+        });
+        barData.forEach((point, index)=>{
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const singleDatasetPointForBars = {};
             const legendToBarPoint = {};
@@ -113,23 +131,38 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             });
             singleDatasetPointForBars.xAxisPoint = point.name;
             singleDatasetPointForBars.indexNum = index;
-            singleDatasetPointForBars.groupSeries = Object.values(legendToBarPoint);
+            var _linePointsByX_point_name;
+            singleDatasetPointForBars.groupSeries = [
+                ...Object.values(legendToBarPoint),
+                ...(_linePointsByX_point_name = linePointsByX[point.name]) !== null && _linePointsByX_point_name !== void 0 ? _linePointsByX_point_name : []
+            ];
             singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;
             datasetForBars.push(singleDatasetPointForBars);
+            visitedX.add(point.name);
+        });
+        Object.keys(linePointsByX).forEach((xPoint)=>{
+            if (!visitedX.has(xPoint)) {
+                datasetForBars.push({
+                    xAxisPoint: xPoint,
+                    groupSeries: linePointsByX[xPoint]
+                });
+            }
         });
         return datasetForBars;
     };
-    const _createDataSetOfGVBC = (points)=>{
-        const legends = new Set();
-        const xAxisLabels = _getOrderedXAxisLabels(points);
-        points.forEach((point)=>{
+    const _createDataSetOfGVBC = (barData, lineData)=>{
+        const barLegends = new Set();
+        barData.forEach((point)=>{
             point.series.forEach((seriesPoint)=>{
-                legends.add(seriesPoint.legend);
+                barLegends.add(seriesPoint.legend);
             });
         });
-        const datasetForBars = _createDataset(points);
+        const lineLegends = new Set(lineData.map((series)=>series.legend));
+        const xAxisLabels = _getOrderedXAxisLabels(barData, lineData);
+        const datasetForBars = _createDataset(barData, lineData);
         return {
-            legends: Array.from(legends),
+            barLegends: Array.from(barLegends),
+            lineLegends: Array.from(lineLegends),
             xAxisLabels,
             datasetForBars
         };
@@ -146,12 +179,13 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    const _getLegendData = (points)=>{
+    const _getLegendData = ()=>{
         const actions = [];
-        _legends.forEach((legendTitle)=>{
+        const addLegendButton = (legendTitle, isLineLegendInBarChart)=>{
             const legend = {
                 title: legendTitle,
                 color: _legendColorMap[legendTitle][0],
+                isLineLegendInBarChart,
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
                     _onLegendHover(legendTitle);
@@ -161,7 +195,9 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                 }
             };
             actions.push(legend);
-        });
+        };
+        _lineLegends.forEach((legendTitle)=>addLegendButton(legendTitle, true));
+        _barLegends.forEach((legendTitle)=>addLegendButton(legendTitle));
         return /*#__PURE__*/ React.createElement(Legends, {
             legends: actions,
             enabledWrapLines: props.enabledLegendsWrapLines,
@@ -171,44 +207,104 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             legendRef: _legendsRef
         });
     };
-    const _addDefaultColors = (data)=>{
+    const _processDataV2 = (dataV2)=>{
+        const barPointsByX = {};
+        const lineData = [];
+        dataV2.forEach((series)=>{
+            if (series.type === 'bar') {
+                series.data.forEach((point)=>{
+                    if (!barPointsByX[point.x]) {
+                        barPointsByX[point.x] = {
+                            name: point.x,
+                            series: []
+                        };
+                    }
+                    var _series_key, _point_color;
+                    barPointsByX[point.x].series.push({
+                        key: (_series_key = series.key) !== null && _series_key !== void 0 ? _series_key : series.legend,
+                        data: point.y,
+                        color: (_point_color = point.color) !== null && _point_color !== void 0 ? _point_color : series.color,
+                        // gradient: series.gradient,
+                        legend: series.legend,
+                        xAxisCalloutData: point.xAxisCalloutData,
+                        yAxisCalloutData: point.yAxisCalloutData,
+                        onClick: point.onClick,
+                        useSecondaryYScale: series.useSecondaryYScale
+                    });
+                });
+            } else if (series.type === 'line') {
+                lineData.push(series);
+            }
+        });
+        return {
+            barData: Object.values(barPointsByX),
+            lineData
+        };
+    };
+    const _prepareChartData = ()=>{
+        let barData = props.data;
+        let lineData;
+        if (Array.isArray(props.dataV2) && props.dataV2.length > 0) {
+            ({ barData, lineData } = _processDataV2(props.dataV2));
+        }
         _legendColorMap = {};
         let colorIndex = 0;
-        var _data_map;
-        return (_data_map = data === null || data === void 0 ? void 0 : data.map((point)=>{
-            var _point_series;
-            var _point_series_map;
-            return {
-                ...point,
-                series: (_point_series_map = (_point_series = point.series) === null || _point_series === void 0 ? void 0 : _point_series.map((seriesPoint)=>{
-                    // TODO: Add support for gradient colors
-                    let startColor = seriesPoint.color ? seriesPoint.color : getNextColor(colorIndex, 0);
-                    let endColor = startColor;
-                    if (!_legendColorMap[seriesPoint.legend]) {
-                        _legendColorMap[seriesPoint.legend] = [
-                            startColor,
-                            endColor
-                        ];
-                    }
-                    colorIndex += 1;
-                    var _seriesPoint_color;
-                    return {
-                        ...seriesPoint,
-                        color: (_seriesPoint_color = seriesPoint.color) !== null && _seriesPoint_color !== void 0 ? _seriesPoint_color : _legendColorMap[seriesPoint.legend][0]
-                    };
-                })) !== null && _point_series_map !== void 0 ? _point_series_map : []
-            };
-        })) !== null && _data_map !== void 0 ? _data_map : [];
+        var _barData_map, _lineData_map;
+        return {
+            barData: (_barData_map = barData === null || barData === void 0 ? void 0 : barData.map((point)=>{
+                var _point_series;
+                var _point_series_map;
+                return {
+                    ...point,
+                    series: (_point_series_map = (_point_series = point.series) === null || _point_series === void 0 ? void 0 : _point_series.map((seriesPoint)=>{
+                        // TODO: Add support for gradient colors
+                        let startColor = seriesPoint.color ? seriesPoint.color : getNextColor(colorIndex, 0);
+                        let endColor = startColor;
+                        if (!_legendColorMap[seriesPoint.legend]) {
+                            _legendColorMap[seriesPoint.legend] = [
+                                startColor,
+                                endColor
+                            ];
+                        }
+                        colorIndex += 1;
+                        var _seriesPoint_color;
+                        return {
+                            ...seriesPoint,
+                            color: (_seriesPoint_color = seriesPoint.color) !== null && _seriesPoint_color !== void 0 ? _seriesPoint_color : _legendColorMap[seriesPoint.legend][0]
+                        };
+                    })) !== null && _point_series_map !== void 0 ? _point_series_map : []
+                };
+            })) !== null && _barData_map !== void 0 ? _barData_map : [],
+            lineData: (_lineData_map = lineData === null || lineData === void 0 ? void 0 : lineData.map((series)=>{
+                let lineColor;
+                if (typeof series.color === 'undefined') {
+                    lineColor = getNextColor(colorIndex, 0);
+                } else {
+                    lineColor = getColorFromToken(series.color);
+                }
+                if (!_legendColorMap[series.legend]) {
+                    _legendColorMap[series.legend] = [
+                        lineColor,
+                        lineColor
+                    ];
+                }
+                colorIndex += 1;
+                return {
+                    ...series,
+                    color: _legendColorMap[series.legend][0]
+                };
+            })) !== null && _lineData_map !== void 0 ? _lineData_map : []
+        };
     };
-    const _getOrderedXAxisLabels = (points)=>{
+    const _getOrderedXAxisLabels = (barData, lineData)=>{
         if (_xAxisType !== XAxisTypes.StringAxis) {
             return [];
         }
-        return sortAxisCategories(_mapCategoryToValues(points), props.xAxisCategoryOrder);
+        return sortAxisCategories(_mapCategoryToValues(barData, lineData), props.xAxisCategoryOrder);
     };
-    const _mapCategoryToValues = (points)=>{
+    const _mapCategoryToValues = (barData, lineData)=>{
         const categoryToValues = {};
-        points.forEach((point)=>{
+        barData.forEach((point)=>{
             if (!categoryToValues[point.name]) {
                 categoryToValues[point.name] = [];
             }
@@ -216,15 +312,24 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                 categoryToValues[point.name].push(seriesPoint.data);
             });
         });
+        lineData.forEach((series)=>{
+            series.data.forEach((point)=>{
+                if (!categoryToValues[point.x]) {
+                    categoryToValues[point.x] = [];
+                }
+                categoryToValues[point.x].push(point.y);
+            });
+        });
         return categoryToValues;
     };
-    const points = _addDefaultColors(props.data);
-    const _xAxisType = getTypeOfAxis(points[0].name, true);
-    const { legends, xAxisLabels, datasetForBars } = _createDataSetOfGVBC(points);
-    _legends = legends;
+    const { barData, lineData } = _prepareChartData();
+    const _xAxisType = getTypeOfAxis(barData[0].name, true);
+    const { barLegends, lineLegends, xAxisLabels, datasetForBars } = _createDataSetOfGVBC(barData, lineData);
+    _barLegends = barLegends;
+    _lineLegends = lineLegends;
     _xAxisLabels = xAxisLabels;
     _datasetForBars = datasetForBars;
-    const legendBars = _getLegendData(points);
+    const legendBars = _getLegendData();
     _adjustProps();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Add commentMore actions
     function _getMinMaxOfYAxis(datasetForBars, yAxisType, useSecondaryYScale) {
@@ -262,16 +367,19 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     const yMax = _getMinMaxOfYAxis(_datasetForBars).endValue;
     _yMax = Math.max(yMax, props.yMaxValue || 0);
     const calloutProps = {
-        clickPosition,
+        positioning: {
+            target: popoverTarget
+        },
         isPopoverOpen,
         color,
         legend: calloutLegend,
         XValue: xCalloutValue,
         YValue: yCalloutValue ? yCalloutValue : dataForHoverCard,
-        YValueHover,
+        YValueHover: yValueHover,
         hoverXValue,
         culture: props.culture,
         isCartesian: true,
+        isCalloutForStack: props.isCalloutForStack,
         ...props.calloutProps,
         ...getAccessibleDataObject(callOutAccessibilityData, 'text', false)
     };
@@ -283,8 +391,8 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         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, calcBandwidth(xScale0.bandwidth(), _legends.length, X1_INNER_PADDING));
-        _groupWidth = calcRequiredWidth(_barWidth, _legends.length, X1_INNER_PADDING);
+        _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, calcBandwidth(xScale0.bandwidth(), _barLegends.length, X1_INNER_PADDING));
+        _groupWidth = calcRequiredWidth(_barWidth, _barLegends.length, X1_INNER_PADDING);
         const xScale1 = _createX1Scale();
         const allGroupsBars = [];
         _datasetForBars.forEach((singleSet)=>{
@@ -295,35 +403,12 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     const _getMargins = (margins)=>{
         _margins = margins;
     };
-    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);
+            _showCallout(mouseEvent.currentTarget, pointData, groupData);
         }
     };
     const _onBarLeave = ()=>{
@@ -332,23 +417,9 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         _calloutAnchorPoint = null;
         setPopoverOpen(false);
     };
-    const onBarFocus = (event, pointData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onBarFocus = (focusEvent, pointData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
     groupData)=>{
-        let x = 0;
-        let y = 0;
-        const targetRect = event.target.getBoundingClientRect();
-        x = targetRect.left + targetRect.width / 2;
-        y = targetRect.top + targetRect.height / 2;
-        updatePosition(x, y);
-        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);
+        _showCallout(focusEvent.currentTarget, pointData, groupData);
     };
     const _buildGraph = (// eslint-disable-next-line @typescript-eslint/no-explicit-any
     singleSet, // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -359,7 +430,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         const barLabelsForGroup = [];
         // Get the actual legends present at this x-axis point
-        const presentLegends = Object.keys(singleSet).filter((key)=>key in _legendColorMap);
+        const presentLegends = _barLegends.filter((key)=>key in singleSet);
         const effectiveGroupWidth = calcRequiredWidth(_barWidth, presentLegends.length, X1_INNER_PADDING);
         // For stacked bars, center the single bar group in the available space
         // Instead of using the global legend position, use the local position within present legends
@@ -370,7 +441,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             0,
             effectiveGroupWidth
         ]).paddingInner(X1_INNER_PADDING);
-        _legends.forEach((legendTitle, legendIndex)=>{
+        _barLegends.forEach((legendTitle, legendIndex)=>{
             const barPoints = singleSet[legendTitle];
             if (barPoints) {
                 const yBarScale = barPoints[0].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
@@ -469,7 +540,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const _createX1Scale = ()=>{
-        return d3ScaleBand().domain(_legends)// When there is only one group, xScale0 adds padding around it,
+        return d3ScaleBand().domain(_barLegends)// 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 ? [
@@ -530,7 +601,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                 // 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 = calcRequiredWidth(_barWidth, _legends.length, X1_INNER_PADDING);
+                const groupWidth = calcRequiredWidth(_barWidth, _barLegends.length, X1_INNER_PADDING);
                 /** Total width required to render the groups. Directly proportional to group width */ const reqWidth = calcRequiredWidth(groupWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 if (totalWidth >= reqWidth) {
                     // Center align the chart by setting equal left and right margins for domain
@@ -539,9 +610,9 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             } else if (props.mode === 'plotly' && xAxisLabels.length > 1) {
                 // Calculate the remaining width after rendering groups at their maximum allowable width
                 const groupBandwidth = calcBandwidth(totalWidth, _xAxisLabels.length, _xAxisInnerPadding);
-                const barBandwidth = calcBandwidth(groupBandwidth, _legends.length, X1_INNER_PADDING);
+                const barBandwidth = calcBandwidth(groupBandwidth, _barLegends.length, X1_INNER_PADDING);
                 const barWidth = getBarWidth(props.barWidth, props.maxBarWidth, barBandwidth);
-                const groupWidth = calcRequiredWidth(barWidth, _legends.length, X1_INNER_PADDING);
+                const groupWidth = calcRequiredWidth(barWidth, _barLegends.length, X1_INNER_PADDING);
                 let reqWidth = calcRequiredWidth(groupWidth, _xAxisLabels.length, _xAxisInnerPadding);
                 const margin1 = (totalWidth - reqWidth) / 2;
                 let margin2 = Number.POSITIVE_INFINITY;
@@ -560,13 +631,152 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             right: _margins.right + _domainMargin
         };
     };
-    const _isChartEmpty = ()=>{
-        return !(props.data && props.data.length > 0 && props.data.filter((item)=>item.series.length).length > 0);
+    const _isChartEmpty = (_barData, _lineData)=>{
+        return !(_barData && _barData.length > 0 && _barData.filter((item)=>item.series.length).length > 0 || _lineData && _lineData.length > 0 && _lineData.some((series)=>series.data.length > 0));
     };
     const _getChartTitle = ()=>{
-        return (props.chartTitle ? `${props.chartTitle}. ` : '') + `Vertical bar chart with ${_xAxisLabels.length} groups of ${_legends.length} bars each. `;
+        return (props.chartTitle ? `${props.chartTitle}. ` : '') + `Vertical bar chart with ${_barLegends.length} grouped bar series` + (_lineLegends.length > 0 ? ` and ${_lineLegends.length} line series. ` : '. ');
+    };
+    const _createLines = (_lineData, xScale, yScalePrimary, yScaleSecondary)=>{
+        const lineBorders = [];
+        const lines = [];
+        const dots = [];
+        const scaleLineX = (x)=>xScale(x) + xScale.bandwidth() / 2;
+        _lineData.forEach((series, seriesIdx)=>{
+            var _series_lineOptions;
+            const lineBorderGroup = [];
+            const lineGroup = [];
+            const dotGroup = [];
+            const lineBorderWidth = ((_series_lineOptions = series.lineOptions) === null || _series_lineOptions === void 0 ? void 0 : _series_lineOptions.lineBorderWidth) ? Number.parseFloat(series.lineOptions.lineBorderWidth.toString()) : 0;
+            const yScale = series.useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
+            const shouldHighlight = _legendHighlighted(series.legend) || _noLegendHighlighted();
+            series.data.forEach((point, pointIdx)=>{
+                const x2 = scaleLineX(point.x);
+                const y2 = yScale(point.y);
+                if (pointIdx > 0) {
+                    var _series_lineOptions, _series_lineOptions1, _series_lineOptions2;
+                    const x1 = scaleLineX(series.data[pointIdx - 1].x);
+                    const y1 = yScale(series.data[pointIdx - 1].y);
+                    if (lineBorderWidth > 0) {
+                        var _series_lineOptions3;
+                        var _series_lineOptions_lineBorderColor;
+                        lineBorderGroup.push(/*#__PURE__*/ React.createElement("line", {
+                            key: `lineBorder-${seriesIdx}-${pointIdx}`,
+                            x1: x1,
+                            y1: y1,
+                            x2: x2,
+                            y2: y2,
+                            fill: "transparent",
+                            stroke: (_series_lineOptions_lineBorderColor = (_series_lineOptions3 = series.lineOptions) === null || _series_lineOptions3 === void 0 ? void 0 : _series_lineOptions3.lineBorderColor) !== null && _series_lineOptions_lineBorderColor !== void 0 ? _series_lineOptions_lineBorderColor : tokens.colorNeutralBackground1,
+                            strokeWidth: 3 + lineBorderWidth * 2,
+                            strokeLinecap: "round",
+                            opacity: shouldHighlight ? 1 : 0.1
+                        }));
+                    }
+                    var _series_lineOptions_strokeWidth, _series_lineOptions_strokeLinecap;
+                    lineGroup.push(/*#__PURE__*/ React.createElement("line", {
+                        key: `line-${seriesIdx}-${pointIdx}`,
+                        x1: x1,
+                        y1: y1,
+                        x2: x2,
+                        y2: y2,
+                        stroke: series.color,
+                        strokeWidth: (_series_lineOptions_strokeWidth = (_series_lineOptions = series.lineOptions) === null || _series_lineOptions === void 0 ? void 0 : _series_lineOptions.strokeWidth) !== null && _series_lineOptions_strokeWidth !== void 0 ? _series_lineOptions_strokeWidth : 3,
+                        strokeLinecap: (_series_lineOptions_strokeLinecap = (_series_lineOptions1 = series.lineOptions) === null || _series_lineOptions1 === void 0 ? void 0 : _series_lineOptions1.strokeLinecap) !== null && _series_lineOptions_strokeLinecap !== void 0 ? _series_lineOptions_strokeLinecap : 'round',
+                        strokeDasharray: (_series_lineOptions2 = series.lineOptions) === null || _series_lineOptions2 === void 0 ? void 0 : _series_lineOptions2.strokeDasharray,
+                        opacity: shouldHighlight ? 1 : 0.1,
+                        onMouseOver: (e)=>_onLineHover(e, series, seriesIdx, pointIdx, scaleLineX),
+                        onMouseLeave: _onBarLeave
+                    }));
+                }
+                const dotId = _getDotId(seriesIdx, pointIdx);
+                const isLinePointActive = activeLinePoint === point.x || activeLinePoint === dotId;
+                dotGroup.push(/*#__PURE__*/ React.createElement("circle", {
+                    key: dotId,
+                    id: dotId,
+                    cx: x2,
+                    cy: y2,
+                    r: shouldHighlight && isLinePointActive ? 8 : 0.3,
+                    fill: tokens.colorNeutralBackground1,
+                    stroke: series.color,
+                    strokeWidth: 3,
+                    opacity: shouldHighlight ? 1 : 0.1,
+                    onMouseOver: (e)=>_onLineHover(e, series, seriesIdx, pointIdx, scaleLineX),
+                    onMouseLeave: _onBarLeave,
+                    "data-is-focusable": shouldHighlight,
+                    onFocus: (e)=>_onLineFocus(e, series, seriesIdx, pointIdx),
+                    onBlur: _onBarLeave,
+                    role: "img",
+                    "aria-label": getAriaLabel({
+                        xAxisCalloutData: point.xAxisCalloutData,
+                        legend: series.legend,
+                        yAxisCalloutData: point.yAxisCalloutData,
+                        data: point.y,
+                        callOutAccessibilityData: point.callOutAccessibilityData
+                    }, point.x)
+                }));
+            });
+            lineBorders.push(/*#__PURE__*/ React.createElement("g", {
+                key: `lineBorderGroup-${seriesIdx}`
+            }, lineBorderGroup));
+            lines.push(/*#__PURE__*/ React.createElement("g", {
+                key: `lineGroup-${seriesIdx}`
+            }, lineGroup));
+            dots.push(/*#__PURE__*/ React.createElement("g", {
+                key: `dotGroup-${seriesIdx}`
+            }, dotGroup));
+        });
+        return dots.length > 0 ? /*#__PURE__*/ React.createElement("g", null, lineBorders.length > 0 ? /*#__PURE__*/ React.createElement("g", null, lineBorders) : null, lines.length > 0 ? /*#__PURE__*/ React.createElement("g", null, lines) : null, /*#__PURE__*/ React.createElement("g", null, dots)) : null;
     };
-    return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
+    const _onLineHover = (event, series, seriesIdx, pointIdx, scaleLineX)=>{
+        const pointerX = d3Pointer(event, _rectRef.current)[0];
+        let closestPointIdx = pointIdx;
+        if (pointIdx > 0) {
+            const currPointPos = scaleLineX(series.data[pointIdx].x);
+            const prevPointPos = scaleLineX(series.data[pointIdx - 1].x);
+            if (Math.abs(prevPointPos - pointerX) < Math.abs(currPointPos - pointerX)) {
+                closestPointIdx = pointIdx - 1;
+            }
+        }
+        event.persist();
+        _showCalloutForLines(event.currentTarget, series, seriesIdx, closestPointIdx);
+    };
+    const _onLineFocus = (event, series, seriesIdx, pointIdx)=>{
+        _showCalloutForLines(event.currentTarget, series, seriesIdx, pointIdx);
+    };
+    const _showCalloutForLines = (target, series, seriesIdx, pointIdx)=>{
+        const point = series.data[pointIdx];
+        const pointData = {
+            ...point,
+            legend: series.legend,
+            color: series.color,
+            key: series.legend,
+            data: point.y,
+            yAxisCalloutData: point.yAxisCalloutData
+        };
+        const groupData = _datasetForBars.find((singleSet)=>singleSet.xAxisPoint === point.x);
+        _showCallout(target, pointData, groupData, _getDotId(seriesIdx, pointIdx));
+    };
+    const _showCallout = (target, pointData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    groupData, _activeLinePoint = '')=>{
+        setPopoverTarget(target);
+        setPopoverOpen(_noLegendHighlighted() || _legendHighlighted(pointData.legend));
+        setCalloutLegend(pointData.legend);
+        setDataForHoverCard(pointData.data);
+        setColor(pointData.color);
+        var _pointData_xAxisCalloutData;
+        setXCalloutValue((_pointData_xAxisCalloutData = pointData.xAxisCalloutData) !== null && _pointData_xAxisCalloutData !== void 0 ? _pointData_xAxisCalloutData : groupData.xAxisPoint);
+        setYCalloutValue(pointData.yAxisCalloutData);
+        setCallOutAccessibilityData(props.isCalloutForStack ? groupData.stackCallOutAccessibilityData : pointData.callOutAccessibilityData);
+        setYValueHover(groupData.groupSeries.filter((item)=>_noLegendHighlighted() || _legendHighlighted(item.legend)));
+        var _pointData_xAxisCalloutData1;
+        setHoverXValue((_pointData_xAxisCalloutData1 = pointData.xAxisCalloutData) !== null && _pointData_xAxisCalloutData1 !== void 0 ? _pointData_xAxisCalloutData1 : groupData.xAxisPoint);
+        setActiveLinePoint(props.isCalloutForStack ? groupData.xAxisPoint : _activeLinePoint);
+    };
+    const _getDotId = (seriesIdx, pointIdx)=>{
+        return _uniqDotId + `-${seriesIdx}-${pointIdx}`;
+    };
+    return !_isChartEmpty(barData, lineData) ? /*#__PURE__*/ React.createElement(CartesianChart, {
         ...props,
         chartTitle: _getChartTitle(),
         points: _datasetForBars,
@@ -593,8 +803,16 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         },
         barwidth: _barWidth,
         componentRef: cartesianChartRef,
-        /* eslint-disable react/jsx-no-bind */ children: ()=>{
-            return /*#__PURE__*/ React.createElement("g", null, _groupedVerticalBarGraph);
+        /* eslint-disable react/jsx-no-bind */ children: (childProps)=>{
+            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("rect", {
+                ref: _rectRef,
+                width: "100%",
+                height: "100%",
+                fill: "transparent",
+                style: {
+                    pointerEvents: 'none'
+                }
+            }), /*#__PURE__*/ React.createElement("g", null, _groupedVerticalBarGraph), _createLines(lineData, childProps.xScale, childProps.yScalePrimary, childProps.yScaleSecondary));
         }
     }) : /*#__PURE__*/ React.createElement("div", {
         id: _emptyChartId,