@fluentui/react-charts 0.0.0-nightly-20260109-0406.1 → 0.0.0-nightly-20260113-0406.1

package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const sankeyChartClassNames: SlotClassNames<SankeyChartStyles> = {\n  root: 'fui-sc__root',\n  nodes: 'fui-sc__nodes',\n  links: 'fui-sc__links',\n  nodeTextContainer: 'fui-sc__nodeTextContainer',\n  toolTip: 'fui-sc__toolTip',\n  chartWrapper: 'fui-sc__chartWrapper',\n  chart: 'fui-sc__chart',\n};\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    textAlign: 'left',\n  },\n  links: {\n    fill: tokens.colorNeutralBackground1,\n    strokeWidth: '3px',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  nodes: {\n    fill: '#F5F5F5',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  toolTip: getTooltipStyle() as GriffelStyle,\n  nodeTextContainer: {\n    '& text': {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n\n    marginTop: '4px',\n    marginLeft: '8px',\n    marginBottom: '4px',\n    marginRight: '8px',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  chart: {\n    display: 'block',\n  },\n});\n\nexport const useSankeyChartStyles = (props: SankeyChartProps): SankeyChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, props.styles?.root),\n    nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/),\n    links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/),\n    nodeTextContainer: mergeClasses(\n      sankeyChartClassNames.nodeTextContainer,\n      baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/,\n    ),\n    toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/),\n    chartWrapper: mergeClasses(\n      sankeyChartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","fill","colorNeutralBackground1","strokeWidth","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,eAAe,QAAQ,wBAAwB;AAExD,OAAO,MAAMC,wBAA2D;IACtEC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;AACT,EAAE;AACF,MAAMC,YAAYd,WAAW;IAC3BO,MAAM;QACJ,GAAGJ,iBAAiBY,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;QACVC,WAAW;IACb;IACAZ,OAAO;QACLa,MAAMpB,OAAOqB,uBAAuB;QACpCC,aAAa;QACb,CAACpB,qBAAqB,EAAE;YACtBkB,MAAM;QACR;IACF;IACAd,OAAO;QACLc,MAAM;QACN,CAAClB,qBAAqB,EAAE;YACtBkB,MAAM;QACR;IACF;IACAX,SAASN;IACTK,mBAAmB;QACjB,UAAU;YACR,CAACN,qBAAqB,EAAE;gBACtBkB,MAAM;YACR;QACF;QAEAG,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAhB,cAAc;QACZQ,UAAU;IACZ;IACAP,OAAO;QACLG,SAAS;IACX;AACF;AAEA,OAAO,MAAMa,uBAAuB,CAACC;QAI+BA,eAU9DA,oBACAA,gBAEiEA;IAhBrE,MAAMC,aAAajB;IAEnB,OAAO;QACLP,MAAMN,aAAaK,sBAAsBC,IAAI,EAAEwB,WAAWxB,IAAI,GAAEuB,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAAcvB,IAAI;QAClFC,OAAOP,aAAaK,sBAAsBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,uBAAuB;QACzFC,OAAOR,aAAaK,sBAAsBG,KAAK,EAAEsB,WAAWtB,KAAK,CAAC,uBAAuB;QACzFC,mBAAmBT,aACjBK,sBAAsBI,iBAAiB,EACvCqB,WAAWrB,iBAAiB,CAAC,mCAAmC;QAElEC,SAASV,aAAaK,sBAAsBK,OAAO,EAAEoB,WAAWpB,OAAO,CAAC,yBAAyB;QACjGC,cAAcX,aACZK,sBAAsBM,YAAY,EAClCkB,EAAAA,qBAAAA,MAAMG,WAAW,cAAjBH,yCAAAA,mBAAmBI,IAAI,MAAK,cAAcH,WAAWnB,YAAY,GAAG,KACpEkB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAclB,YAAY;QAE5BC,OAAOZ,aAAaK,sBAAsBO,KAAK,EAAEkB,WAAWlB,KAAK,GAAEiB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcjB,KAAK;IACxF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, getTooltipStyle, getChartTitleStyles } from '../../utilities/index';\n\nexport const sankeyChartClassNames: SlotClassNames<SankeyChartStyles> = {\n  root: 'fui-sc__root',\n  nodes: 'fui-sc__nodes',\n  links: 'fui-sc__links',\n  nodeTextContainer: 'fui-sc__nodeTextContainer',\n  toolTip: 'fui-sc__toolTip',\n  chartWrapper: 'fui-sc__chartWrapper',\n  chart: 'fui-sc__chart',\n  chartTitle: 'fui-sc__chartTitle',\n  svgTooltip: 'fui-sc__svgTooltip',\n};\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    textAlign: 'left',\n  },\n  links: {\n    fill: tokens.colorNeutralBackground1,\n    strokeWidth: '3px',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  nodes: {\n    fill: '#F5F5F5',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  toolTip: getTooltipStyle() as GriffelStyle,\n  nodeTextContainer: {\n    '& text': {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n\n    marginTop: '4px',\n    marginLeft: '8px',\n    marginBottom: '4px',\n    marginRight: '8px',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  chart: {\n    display: 'block',\n  },\n  chartTitle: getChartTitleStyles() as GriffelStyle,\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n});\n\nexport const useSankeyChartStyles = (props: SankeyChartProps): SankeyChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, props.styles?.root),\n    nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/),\n    links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/),\n    nodeTextContainer: mergeClasses(\n      sankeyChartClassNames.nodeTextContainer,\n      baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/,\n    ),\n    toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/),\n    chartWrapper: mergeClasses(\n      sankeyChartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n    chartTitle: mergeClasses(sankeyChartClassNames.chartTitle, baseStyles.chartTitle, props.styles?.chartTitle),\n    svgTooltip: mergeClasses(sankeyChartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","getChartTitleStyles","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","chartTitle","svgTooltip","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","fill","colorNeutralBackground1","strokeWidth","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,EAAEC,eAAe,EAAEC,mBAAmB,QAAQ,wBAAwB;AAEnG,OAAO,MAAMC,wBAA2D;IACtEC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;IACPC,YAAY;IACZC,YAAY;AACd,EAAE;AACF,MAAMC,YAAYjB,WAAW;IAC3BQ,MAAM;QACJ,GAAGL,iBAAiBe,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;QACVC,WAAW;IACb;IACAd,OAAO;QACLe,MAAMvB,OAAOwB,uBAAuB;QACpCC,aAAa;QACb,CAACvB,qBAAqB,EAAE;YACtBqB,MAAM;QACR;IACF;IACAhB,OAAO;QACLgB,MAAM;QACN,CAACrB,qBAAqB,EAAE;YACtBqB,MAAM;QACR;IACF;IACAb,SAASP;IACTM,mBAAmB;QACjB,UAAU;YACR,CAACP,qBAAqB,EAAE;gBACtBqB,MAAM;YACR;QACF;QAEAG,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAlB,cAAc;QACZU,UAAU;IACZ;IACAT,OAAO;QACLK,SAAS;IACX;IACAJ,YAAYT;IACZU,YAAY;QACVS,MAAMvB,OAAOwB,uBAAuB;QACpC,CAACtB,qBAAqB,EAAE;YACtBqB,MAAM;QACR;IACF;AACF;AAEA,OAAO,MAAMO,uBAAuB,CAACC;QAI+BA,eAU9DA,oBACAA,gBAEiEA,gBACeA,gBACAA;IAlBpF,MAAMC,aAAajB;IAEnB,OAAO;QACLT,MAAMP,aAAaM,sBAAsBC,IAAI,EAAE0B,WAAW1B,IAAI,GAAEyB,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAAczB,IAAI;QAClFC,OAAOR,aAAaM,sBAAsBE,KAAK,EAAEyB,WAAWzB,KAAK,CAAC,uBAAuB;QACzFC,OAAOT,aAAaM,sBAAsBG,KAAK,EAAEwB,WAAWxB,KAAK,CAAC,uBAAuB;QACzFC,mBAAmBV,aACjBM,sBAAsBI,iBAAiB,EACvCuB,WAAWvB,iBAAiB,CAAC,mCAAmC;QAElEC,SAASX,aAAaM,sBAAsBK,OAAO,EAAEsB,WAAWtB,OAAO,CAAC,yBAAyB;QACjGC,cAAcZ,aACZM,sBAAsBM,YAAY,EAClCoB,EAAAA,qBAAAA,MAAMG,WAAW,cAAjBH,yCAAAA,mBAAmBI,IAAI,MAAK,cAAcH,WAAWrB,YAAY,GAAG,KACpEoB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcpB,YAAY;QAE5BC,OAAOb,aAAaM,sBAAsBO,KAAK,EAAEoB,WAAWpB,KAAK,GAAEmB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcnB,KAAK;QACtFC,YAAYd,aAAaM,sBAAsBQ,UAAU,EAAEmB,WAAWnB,UAAU,GAAEkB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAclB,UAAU;QAC1GC,YAAYf,aAAaM,sBAAsBS,UAAU,EAAEkB,WAAWlB,UAAU,GAAEiB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcjB,UAAU;IAC5G;AACF,EAAE"}

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -5,6 +5,7 @@ import { useVerticalStackedBarChartStyles } from './useVerticalStackedBarChartSt
 import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime } from 'd3-scale';
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { CartesianChart, ChartPopover, Legends } from '../../index';
 import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, areArraysEqual, calculateLongestLabelWidth, useRtl, DataVizPalette, getColorFromToken, findVSBCNumericMinMaxOfY, YAxisType, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfVSBCNumeric, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
 import { formatDateToLocaleString, isInvalidValue } from '@fluentui/chart-utilities';
@@ -23,6 +24,10 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     const _isRtl = useRtl();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
     const _emptyChartId = useId('_VSBC_empty');
+    const _arrowNavigationAttributes = useArrowNavigationGroup({
+        axis: 'vertical',
+        circular: true
+    });
     let _points = [];
     let _dataset;
     let _xAxisLabels = [];
@@ -152,17 +157,14 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             clientX = boundingRect.left + boundingRect.width / 2;
             clientY = boundingRect.top + boundingRect.height / 2;
         }
-        if (_getHighlightedLegend().length === 1) {
-            if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
-                _updatePosition(clientX, clientY);
-                setPopoverOpen(true);
-                setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
-                setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
-                setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
-                setColor(lineData.color);
-            }
-        } else {
-            _onStackHoverFocus(lineData.xItem, event);
+        if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
+            _updatePosition(clientX, clientY);
+            setPopoverOpen(true);
+            setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
+            setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
+            setCalloutLegend(lineData.legend);
+            setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
+            setColor(lineData.color);
         }
     }
     function _onStackHoverFocus(stack, event) {
@@ -326,19 +328,9 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint && !_isHavingLines ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout) : null;
     }
-    function _toFocusWholeStack(_isHavingLines) {
+    function _toFocusWholeStack() {
         const { isCalloutForStack = false } = props;
-        let shouldFocusStackOnly = false;
-        if (_isHavingLines) {
-            if (_getHighlightedLegend().length === 1) {
-                shouldFocusStackOnly = false;
-            } else {
-                shouldFocusStackOnly = true;
-            }
-        } else {
-            shouldFocusStackOnly = isCalloutForStack;
-        }
-        return shouldFocusStackOnly;
+        return isCalloutForStack;
     }
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
@@ -444,8 +436,8 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                 const circleRef = {
                     refElement: null
                 };
-                const noBarsAndLinesActive = circlePoint.xItem.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length === 0;
                 const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
+                const shouldHighlight = _isLegendHighlighted(circlePoint.legend) || _noLegendHighlighted() ? true : false;
                 dots.push(/*#__PURE__*/ React.createElement("circle", {
                     key: `${index}-${subIndex}-dot`,
                     cx: xScale(circlePoint.xItem.xAxisPoint),
@@ -463,13 +455,11 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
                     ref: (e)=>{
                         circleRef.refElement = e;
                     },
-                    ...noBarsAndLinesActive ? {
-                        tabIndex: !props.hideTooltip ? 0 : undefined,
-                        onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
-                        onBlur: _handleMouseOut,
-                        role: 'img',
-                        'aria-label': _getAriaLabel(circlePoint.xItem, circlePoint)
-                    } : {}
+                    tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
+                    onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
+                    onBlur: _handleMouseOut,
+                    role: "img",
+                    "aria-label": _getAriaLabel(circlePoint.xItem, circlePoint, true)
                 }));
             });
         });
@@ -736,8 +726,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     const classes = useVerticalStackedBarChartStyles(props);
     function _createBar(xBarScale, yBarScale, containerHeight, xElement) {
         const { barCornerRadius = 0, barMinimumHeight = 0 } = props;
-        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        const shouldFocusWholeStack = _toFocusWholeStack();
         if (_xAxisType === XAxisTypes.StringAxis) {
             _barWidth = getBarWidth(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
         }
@@ -1010,7 +999,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
     if (!_isChartEmpty()) {
         _adjustProps();
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        const shouldFocusWholeStack = _toFocusWholeStack();
         _dataset = _createDataSetLayer();
         const legendBars = _getLegendData(_points, _createLegendsForLine(props.data));
         const calloutProps = {
@@ -1024,7 +1013,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             ...getAccessibleDataObject(callOutAccessibilityData),
             clickPosition: clickPosition,
             isPopoverOpen: isPopoverOpen,
-            isCalloutForStack: props.isCalloutForStack || _isHavingLines && (_noLegendHighlighted() || _getHighlightedLegend().length > 1),
+            isCalloutForStack: shouldFocusWholeStack,
             isCartesian: true,
             customCallout: {
                 customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
@@ -1069,7 +1058,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
             ],
             getYDomainMargins: _getYDomainMargins,
             /* eslint-disable react/jsx-no-bind */ children: (props)=>{
-                return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", null, _bars), /*#__PURE__*/ React.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
+                return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("g", _arrowNavigationAttributes, _bars), /*#__PURE__*/ React.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
             }
         });
     }