@fluentui/react-charts 0.0.0-nightly-20250923-0407.1 → 0.0.0-nightly-20250924-0412.1

package/CHANGELOG.md

@@ -1,28 +1,28 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Tue, 23 Sep 2025 04:22:17 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Sep 2025 04:27:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250923-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250923-0407.1)
+## [0.0.0-nightly-20250924-0412.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250924-0412.1)
 
-Tue, 23 Sep 2025 04:22:17 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.4..@fluentui/react-charts_v0.0.0-nightly-20250923-0407.1)
+Wed, 24 Sep 2025 04:27:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.4..@fluentui/react-charts_v0.0.0-nightly-20250924-0412.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-button to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-overflow to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-popover to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250923-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/f93bb134a1e780503f37765ec665825c050f1555) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-overflow to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-popover to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250924-0412.1 ([commit](https://github.com/microsoft/fluentui/commit/cd1c2676b39bf3ac849359ad772ade50d50adff6) by beachball)
 
 ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.4)
 

package/lib/components/CommonComponents/ChartPopover.js

@@ -97,7 +97,8 @@ combining the logic for Callout and ChartHoverCard in v8 charts. */ export const
             } : {}
         }, props.YValueHover && props.YValueHover.map((yValue, index, yValues)=>{
             const isLast = index + 1 === yValues.length;
-            const { shouldDrawBorderBottom = false } = yValue;
+            var _yValue_shouldDrawBorderBottom;
+            const shouldDrawBorderBottom = isLast ? false : (_yValue_shouldDrawBorderBottom = yValue.shouldDrawBorderBottom) !== null && _yValue_shouldDrawBorderBottom !== void 0 ? _yValue_shouldDrawBorderBottom : false;
             return /*#__PURE__*/ React.createElement("div", {
                 ...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false),
                 key: `callout-content-${index}`,

package/lib/components/CommonComponents/ChartPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. */\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n  HTMLDivElement,\n  ChartPopoverProps\n>((props, forwardedRef) => {\n  const virtualElement: PositioningVirtualElement = {\n    getBoundingClientRect: () => ({\n      top: props.clickPosition!.y,\n      left: props.clickPosition!.x,\n      right: props.clickPosition!.x,\n      bottom: props.clickPosition!.y,\n      x: props.clickPosition!.x,\n      y: props.clickPosition!.y,\n      width: 0,\n      height: 0,\n    }),\n  };\n  props = { ...props, ...props.customCallout?.customCalloutProps };\n  const classes = usePopoverStyles_unstable(props);\n  const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n  const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n  return (\n    <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n      <Popover\n        positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n        open={props.isPopoverOpen}\n        inline\n      >\n        <PopoverSurface>\n          {/** Given custom callout, then it will render */}\n          {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) &&\n            props.isCalloutForStack &&\n            _multiValueCallout()}\n          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n            <div className={classes.calloutContentRoot}>\n              <div className={classes.calloutDateTimeContainer}>\n                <div className={classes.calloutContentX}>{props.XValue} </div>\n                {/*TO DO  if we add time for callout then will use this */}\n                {/* <div className={classNames.calloutContentX}>07:00am</div> */}\n              </div>\n              <div\n                className={classes.calloutInfoContainer}\n                style={{\n                  ...(props.ratio && {\n                    display: 'flex',\n                    alignItems: 'flex-end',\n                  }),\n                  borderInlineStart: `4px solid ${props.color}`,\n                  marginTop: '11px',\n                }}\n              >\n                <div className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>\n                    {formatToLocaleString(legend, props.culture) as React.ReactNode}\n                  </div>\n                  <div\n                    className={classes.calloutContentY}\n                    style={{\n                      color: props.color ? props.color : tokens.colorNeutralForeground1,\n                      fontSize: tokens.fontSizeHero700,\n                    }}\n                  >\n                    {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n                  </div>\n                </div>\n                {!!props.ratio && (\n                  <div className={classes.ratio}>\n                    <>\n                      <span className={classes.numerator}>\n                        {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n                      </span>\n                      /\n                      <span className={classes.denominator}>\n                        {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n                      </span>\n                    </>\n                  </div>\n                )}\n              </div>\n              {!!props.descriptionMessage && (\n                <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n              )}\n            </div>\n          )}\n        </PopoverSurface>\n      </Popover>\n    </div>\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _multiValueCallout() {\n    const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n    return (\n      <div className={classes.calloutContentRoot}>\n        <div\n          className={classes.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={classes.calloutContentX}\n            {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n          </div>\n        </div>\n        <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n          {props!.YValueHover &&\n            props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const { shouldDrawBorderBottom = false } = yValue;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean | undefined {\n    return (\n      yValueHover &&\n      yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      )\n    );\n  }\n\n  function _getCalloutContent(\n    xValue: YValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const { culture } = props;\n    const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div\n            id={`${index}_${xValue.y}`}\n            className={classes.calloutBlockContainer}\n            style={{\n              ...(!toDrawShape\n                ? {\n                    borderInlineStart: `4px solid ${xValue.color}`,\n                  }\n                : {}),\n            }}\n          >\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: classes.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div\n              className={mergeClasses(\n                classes.calloutBlockContainer,\n                toDrawShape\n                  ? classes.calloutBlockContainertoDrawShapetrue\n                  : classes.calloutBlockContainertoDrawShapefalse,\n              )}\n              style={{ marginTop: xValue ? '13px' : 'unset' }}\n            >\n              <div className={classes.calloutlegendText}> {xValue.legend}</div>\n              <div className={classes.calloutContentY} style={{ direction: 'ltr', unicodeBidi: 'isolate' }}>\n                {\n                  formatToLocaleString(\n                    xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n                    culture,\n                  ) as React.ReactNode\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={classes.calloutBlockContainer}>\n                <div className={classes.calloutlegendText}>\n                  {' '}\n                  {formatToLocaleString(subcountName, culture) as React.ReactNode}\n                </div>\n                <div\n                  className={classes.calloutContentY}\n                  style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                >\n                  {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","fontSize","fontSizeHero700","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","direction","unicodeBidi","data","subcounts","subcountName","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAClE,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,uBAAuB,EAAEC,MAAM,EAAEC,UAAU,QAAQ,wBAAwB;AACpF,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,mBAAmB;AACzC,SAASC,yBAAyB,QAAQ,iCAAiC;AAK3E;iEACiE,GACjE,OAAO,MAAMC,6BAA2DZ,MAAMa,UAAU,CAGtF,CAACC,OAAOC;QAaeD;IAZvB,MAAME,iBAA4C;QAChDC,uBAAuB,IAAO,CAAA;gBAC5BC,KAAKJ,MAAMK,aAAa,CAAEC,CAAC;gBAC3BC,MAAMP,MAAMK,aAAa,CAAEG,CAAC;gBAC5BC,OAAOT,MAAMK,aAAa,CAAEG,CAAC;gBAC7BE,QAAQV,MAAMK,aAAa,CAAEC,CAAC;gBAC9BE,GAAGR,MAAMK,aAAa,CAAEG,CAAC;gBACzBF,GAAGN,MAAMK,aAAa,CAAEC,CAAC;gBACzBK,OAAO;gBACPC,QAAQ;YACV,CAAA;IACF;IACAZ,QAAQ;QAAE,GAAGA,KAAK;YAAKA,uBAAAA,MAAMa,aAAa,cAAnBb,2CAAAA,qBAAqBc,kBAAkB,AAA1C;IAA2C;IAC/D,MAAMC,UAAUlB,0BAA0BG;IAC1C,MAAMgB,SAAShB,MAAMiB,aAAa,GAAGjB,MAAMiB,aAAa,GAAGjB,MAAMgB,MAAM;IACvE,MAAME,SAASlB,MAAMmB,aAAa,GAAGnB,MAAMmB,aAAa,GAAGnB,MAAMkB,MAAM;IACvE,qBACE,oBAACE;QAAIC,IAAI9B,MAAM;QAAY+B,KAAKrB;QAAcsB,WAAWR,QAAQS,gBAAgB;qBAC/E,oBAACrC;QACCsC,aAAa;YAAEC,QAAQxB;YAAgByB,UAAU;YAAUC,QAAQ;YAAIC,aAAa;QAAM;QAC1FC,MAAM9B,MAAM+B,aAAa;QACzBC,QAAAA;qBAEA,oBAAC5C,sBAEEY,MAAMa,aAAa,IAAIb,MAAMa,aAAa,CAACoB,iBAAiB,IAAIjC,MAAMa,aAAa,CAACoB,iBAAiB,EAErG,AAAC,CAAA,CAACjC,MAAMa,aAAa,IAAI,CAACb,MAAMa,aAAa,CAACoB,iBAAiB,AAAD,KAC7DjC,MAAMkC,iBAAiB,IACvBC,sBAED,AAAC,CAAA,CAACnC,MAAMa,aAAa,IAAI,CAACb,MAAMa,aAAa,CAACoB,iBAAiB,AAAD,KAAM,CAACjC,MAAMkC,iBAAiB,kBAC3F,oBAACd;QAAIG,WAAWR,QAAQqB,kBAAkB;qBACxC,oBAAChB;QAAIG,WAAWR,QAAQsB,wBAAwB;qBAC9C,oBAACjB;QAAIG,WAAWR,QAAQuB,eAAe;OAAGtC,MAAMuC,MAAM,EAAC,qBAIzD,oBAACnB;QACCG,WAAWR,QAAQyB,oBAAoB;QACvCC,OAAO;YACL,GAAIzC,MAAM0C,KAAK,IAAI;gBACjBC,SAAS;gBACTC,YAAY;YACd,CAAC;YACDC,mBAAmB,CAAC,UAAU,EAAE7C,MAAM8C,KAAK,EAAE;YAC7CC,WAAW;QACb;qBAEA,oBAAC3B;QAAIG,WAAWR,QAAQiC,qBAAqB;qBAC3C,oBAAC5B;QAAIG,WAAWR,QAAQkC,iBAAiB;OACtCtD,qBAAqBqB,QAAQhB,MAAMkD,OAAO,kBAE7C,oBAAC9B;QACCG,WAAWR,QAAQoC,eAAe;QAClCV,OAAO;YACLK,OAAO9C,MAAM8C,KAAK,GAAG9C,MAAM8C,KAAK,GAAGxD,OAAO8D,uBAAuB;YACjEC,UAAU/D,OAAOgE,eAAe;QAClC;OAEC3D,qBAAqBuB,QAAQlB,MAAMkD,OAAO,KAG9C,CAAC,CAAClD,MAAM0C,KAAK,kBACZ,oBAACtB;QAAIG,WAAWR,QAAQ2B,KAAK;qBAC3B,wDACE,oBAACa;QAAKhC,WAAWR,QAAQyC,SAAS;OAC/B7D,qBAAqBK,MAAM0C,KAAK,CAAC,EAAE,EAAE1C,MAAMkD,OAAO,IAC9C,mBAEP,oBAACK;QAAKhC,WAAWR,QAAQ0C,WAAW;OACjC9D,qBAAqBK,MAAM0C,KAAK,CAAC,EAAE,EAAE1C,MAAMkD,OAAO,OAM5D,CAAC,CAAClD,MAAM0D,kBAAkB,kBACzB,oBAACtC;QAAIG,WAAWR,QAAQ2C,kBAAkB;OAAG1D,MAAM0D,kBAAkB;IASnF,8DAA8D;IAC9D,SAASvB;YACqCwB;QAA5C,MAAMC,6BAAsCD,CAAAA,+BAAAA,4BAA4B3D,MAAM6D,WAAW,eAA7CF,0CAAAA,+BAAkD;QAC9F,qBACE,oBAACvC;YAAIG,WAAWR,QAAQqB,kBAAkB;yBACxC,oBAAChB;YACCG,WAAWR,QAAQsB,wBAAwB;YAC3CI,OAAOmB,6BAA6B;gBAAEE,cAAc;YAAO,IAAI,CAAC;yBAEhE,oBAAC1C;YACCG,WAAWR,QAAQuB,eAAe;YACjC,GAAG9C,wBAAwBQ,MAAO+D,6BAA6B,EAAE,QAAQ,MAAM;WAE/EpE,qBAAqBK,MAAOgE,WAAW,EAAEhE,MAAMkD,OAAO,mBAG3D,oBAAC9B;YAAIqB,OAAOmB,6BAA6B;gBAAEjB,SAAS;YAAO,IAAI,CAAC;WAC7D3C,MAAO6D,WAAW,IACjB7D,MAAO6D,WAAW,CAACI,GAAG,CAAC,CAACC,QAAqBC,OAAeC;YAC1D,MAAMC,SAAkBF,QAAQ,MAAMC,QAAQE,MAAM;YACpD,MAAM,EAAEC,yBAAyB,KAAK,EAAE,GAAGL;YAC3C,qBACE,oBAAC9C;gBACE,GAAG5B,wBAAwB0E,OAAOM,wBAAwB,EAAE,QAAQ,MAAM;gBAC3EC,KAAK,CAAC,gBAAgB,EAAEN,OAAO;gBAC/B1B,OACEmB,6BACI;oBACEjB,SAAS;oBACT,GAAI4B,0BAA0B;wBAC5BG,cAAc,CAAC,UAAU,EAAEpF,OAAOqF,mBAAmB,EAAE;wBACvDC,eAAe;oBACjB,CAAC;gBACH,IACA;oBACE,GAAIL,0BAA0B;wBAC5BG,cAAc,CAAC,UAAU,EAAEpF,OAAOqF,mBAAmB,EAAE;wBACvDC,eAAe;oBACjB,CAAC;gBACH;eAGLC,mBAAmBX,QAAQC,OAAOP,4BAA4BS;QAGrE,IACD,CAAC,CAACrE,MAAM0D,kBAAkB,kBAAI,oBAACtC;YAAIG,WAAWR,QAAQ2C,kBAAkB;WAAG1D,MAAM0D,kBAAkB;IAI5G;IAEA,SAASC,4BAA4BmB,WAA2B;QAC9D,OACEA,eACAA,YAAYC,IAAI,CACd,CAACb,SAKKA,OAAOc,gBAAgB,IAAI,OAAOd,OAAOc,gBAAgB,KAAK;IAG1E;IAEA,SAASH,mBACPI,MAAmB,EACnBd,KAAa,EACbP,0BAAmC,EACnCS,MAAe;QAEf,MAAMa,cAAmCb,SAAS,CAAC,IAAI;YAAEc,aAAa;QAAO;QAC7E,MAAMC,cAAcH,OAAOd,KAAK,KAAKkB,aAAaJ,OAAOd,KAAK,KAAK,CAAC;QACpE,MAAM,EAAEjB,OAAO,EAAE,GAAGlD;QACpB,MAAMkE,SAASvE,qBAAqBsF,OAAO3E,CAAC,EAAE4C;QAC9C,IAAI,CAAC+B,OAAOD,gBAAgB,IAAI,OAAOC,OAAOD,gBAAgB,KAAK,UAAU;gBAyCTC;YAxClE,qBACE,oBAAC7D;gBAAIqB,OAAOmB,6BAA6BsB,cAAc,CAAC;eACrDtB,4CACC,oBAACxC;gBAAIG,WAAU;gBAAyBkB,OAAO;oBAAEY,UAAU;gBAAO;eAC/D4B,OAAOjE,MAAM,EAAE,MAAGkD,QAAO,oBAG9B,oBAAC9C;gBACCC,IAAI,GAAG8C,MAAM,CAAC,EAAEc,OAAO3E,CAAC,EAAE;gBAC1BiB,WAAWR,QAAQiC,qBAAqB;gBACxCP,OAAO;oBACL,GAAI,CAAC2C,cACD;wBACEvC,mBAAmB,CAAC,UAAU,EAAEoC,OAAOnC,KAAK,EAAE;oBAChD,IACA,CAAC,CAAC;gBACR;eAECsC,6BACC,oBAACxF;gBACC0F,UAAU;oBACR/D,WAAWR,QAAQwE,WAAW;gBAChC;gBACAC,WAAW;oBAAEC,MAAMR,OAAOnC,KAAK;gBAAC;gBAChC4C,OAAOjG,MAAM,CAACwF,OAAOd,KAAK,GAAIwB,OAAOC,IAAI,CAAClG,YAAY4E,MAAM,CAAC;8BAGjE,oBAAClD;gBACCG,WAAWlC,aACT0B,QAAQiC,qBAAqB,EAC7BoC,cACIrE,QAAQ8E,oCAAoC,GAC5C9E,QAAQ+E,qCAAqC;gBAEnDrD,OAAO;oBAAEM,WAAWkC,SAAS,SAAS;gBAAQ;6BAE9C,oBAAC7D;gBAAIG,WAAWR,QAAQkC,iBAAiB;eAAE,KAAEgC,OAAOjE,MAAM,iBAC1D,oBAACI;gBAAIG,WAAWR,QAAQoC,eAAe;gBAAEV,OAAO;oBAAEsD,WAAW;oBAAOC,aAAa;gBAAU;eAEvFrG,qBACEsF,OAAOD,gBAAgB,GAAGC,OAAOD,gBAAgB,GAAGC,CAAAA,YAAAA,OAAO3E,CAAC,cAAR2E,uBAAAA,YAAYA,OAAOgB,IAAI,EAC3E/C;QAQhB,OAAO;YACL,MAAMgD,YAAsCjB,OAAOD,gBAAgB;YACnE,qBACE,oBAAC5D;gBAAIqB,OAAOyC;6BACV,oBAAC9D;gBAAIG,WAAU;gBAAyBkB,OAAO;oBAAEY,UAAU;gBAAO;eAC/D4B,OAAOjE,MAAM,EAAE,MAAGkD,QAAO,MAE3ByB,OAAOC,IAAI,CAACM,WAAWjC,GAAG,CAAC,CAACkC;gBAC3B,qBACE,oBAAC/E;oBAAIqD,KAAK0B;oBAAc5E,WAAWR,QAAQiC,qBAAqB;iCAC9D,oBAAC5B;oBAAIG,WAAWR,QAAQkC,iBAAiB;mBACtC,KACAtD,qBAAqBwG,cAAcjD,yBAEtC,oBAAC9B;oBACCG,WAAWR,QAAQoC,eAAe;oBAClCV,OAAO;wBAAEK,OAAO9C,MAAM8C,KAAK,GAAG9C,MAAM8C,KAAK,GAAGxD,OAAO8D,uBAAuB;oBAAC;mBAE1EzD,qBAAqBuG,SAAS,CAACC,aAAa,EAAEjD;YAIvD;QAGN;IACF;AACF,GAAG;AACHpD,aAAasG,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CommonComponents/ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. */\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n  HTMLDivElement,\n  ChartPopoverProps\n>((props, forwardedRef) => {\n  const virtualElement: PositioningVirtualElement = {\n    getBoundingClientRect: () => ({\n      top: props.clickPosition!.y,\n      left: props.clickPosition!.x,\n      right: props.clickPosition!.x,\n      bottom: props.clickPosition!.y,\n      x: props.clickPosition!.x,\n      y: props.clickPosition!.y,\n      width: 0,\n      height: 0,\n    }),\n  };\n  props = { ...props, ...props.customCallout?.customCalloutProps };\n  const classes = usePopoverStyles_unstable(props);\n  const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n  const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n  return (\n    <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n      <Popover\n        positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n        open={props.isPopoverOpen}\n        inline\n      >\n        <PopoverSurface>\n          {/** Given custom callout, then it will render */}\n          {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) &&\n            props.isCalloutForStack &&\n            _multiValueCallout()}\n          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n            <div className={classes.calloutContentRoot}>\n              <div className={classes.calloutDateTimeContainer}>\n                <div className={classes.calloutContentX}>{props.XValue} </div>\n                {/*TO DO  if we add time for callout then will use this */}\n                {/* <div className={classNames.calloutContentX}>07:00am</div> */}\n              </div>\n              <div\n                className={classes.calloutInfoContainer}\n                style={{\n                  ...(props.ratio && {\n                    display: 'flex',\n                    alignItems: 'flex-end',\n                  }),\n                  borderInlineStart: `4px solid ${props.color}`,\n                  marginTop: '11px',\n                }}\n              >\n                <div className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>\n                    {formatToLocaleString(legend, props.culture) as React.ReactNode}\n                  </div>\n                  <div\n                    className={classes.calloutContentY}\n                    style={{\n                      color: props.color ? props.color : tokens.colorNeutralForeground1,\n                      fontSize: tokens.fontSizeHero700,\n                    }}\n                  >\n                    {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n                  </div>\n                </div>\n                {!!props.ratio && (\n                  <div className={classes.ratio}>\n                    <>\n                      <span className={classes.numerator}>\n                        {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n                      </span>\n                      /\n                      <span className={classes.denominator}>\n                        {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n                      </span>\n                    </>\n                  </div>\n                )}\n              </div>\n              {!!props.descriptionMessage && (\n                <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n              )}\n            </div>\n          )}\n        </PopoverSurface>\n      </Popover>\n    </div>\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _multiValueCallout() {\n    const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n    return (\n      <div className={classes.calloutContentRoot}>\n        <div\n          className={classes.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={classes.calloutContentX}\n            {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n          </div>\n        </div>\n        <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n          {props!.YValueHover &&\n            props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const shouldDrawBorderBottom = isLast ? false : yValue.shouldDrawBorderBottom ?? false;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean | undefined {\n    return (\n      yValueHover &&\n      yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      )\n    );\n  }\n\n  function _getCalloutContent(\n    xValue: YValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const { culture } = props;\n    const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div\n            id={`${index}_${xValue.y}`}\n            className={classes.calloutBlockContainer}\n            style={{\n              ...(!toDrawShape\n                ? {\n                    borderInlineStart: `4px solid ${xValue.color}`,\n                  }\n                : {}),\n            }}\n          >\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: classes.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div\n              className={mergeClasses(\n                classes.calloutBlockContainer,\n                toDrawShape\n                  ? classes.calloutBlockContainertoDrawShapetrue\n                  : classes.calloutBlockContainertoDrawShapefalse,\n              )}\n              style={{ marginTop: xValue ? '13px' : 'unset' }}\n            >\n              <div className={classes.calloutlegendText}> {xValue.legend}</div>\n              <div className={classes.calloutContentY} style={{ direction: 'ltr', unicodeBidi: 'isolate' }}>\n                {\n                  formatToLocaleString(\n                    xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n                    culture,\n                  ) as React.ReactNode\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={classes.calloutBlockContainer}>\n                <div className={classes.calloutlegendText}>\n                  {' '}\n                  {formatToLocaleString(subcountName, culture) as React.ReactNode}\n                </div>\n                <div\n                  className={classes.calloutContentY}\n                  style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                >\n                  {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","fontSize","fontSizeHero700","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","direction","unicodeBidi","data","subcounts","subcountName","displayName"],"mappings":"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"}

package/lib/components/DonutChart/DonutChart.js

@@ -311,7 +311,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         yCalloutValue: yCalloutValue,
         culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
         clickPosition: clickPosition,
-        isPopoverOpen: !props.hideTooltip && isPopoverOpen,
+        isPopoverOpen: !props.hideTooltip && isPopoverOpen && (_noLegendsHighlighted() || _isLegendHighlighted(legend)),
         legend: legend,
         YValue: value,
         color: color,

package/lib/components/DonutChart/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/**\n * Donutchart component.\n * {@docCategory DonutChart}\n */\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n  (props, forwardedRef) => {\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const _uniqText: string = useId('_Pie_');\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    let _calloutAnchorPoint: ChartDataPoint | null;\n    let _emptyChartId: string | null;\n    const legendContainer = React.useRef<HTMLDivElement | null>(null);\n    const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n    const [value, setValue] = React.useState<string | undefined>('');\n    const [legend, setLegend] = React.useState<string | undefined>('');\n    const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n    const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n    const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const prevPropsRef = React.useRef<DonutChartProps | null>(null);\n    const _legendsRef = React.useRef<LegendContainer>(null);\n    const _isRTL: boolean = useRtl();\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\n\n    React.useEffect(() => {\n      if (prevPropsRef.current) {\n        const prevProps = prevPropsRef.current;\n        if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n          setSelectedLegends(props.legendProps?.selectedLegends || []);\n        }\n      }\n      prevPropsRef.current = props;\n    }, [props]);\n\n    React.useEffect(() => {\n      if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {\n        _fitParentContainer();\n      }\n      prevSize.current.height = props.height;\n      prevSize.current.width = props.width;\n    }, [props.width, props.height]);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n        },\n      }),\n      [],\n    );\n\n    function _elevateToMinimums(data: ChartDataPoint[]) {\n      let sumOfData = 0;\n      const minPercent = 0.01;\n      const elevatedData: ChartDataPoint[] = [];\n      data.forEach(item => {\n        sumOfData += item.data!;\n      });\n      data.forEach(item => {\n        elevatedData.push(\n          minPercent * sumOfData > item.data! && item.data! > 0\n            ? {\n                ...item,\n                data: minPercent * sumOfData,\n                yAxisCalloutData:\n                  item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n              }\n            : item,\n        );\n      });\n      return elevatedData;\n    }\n    function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n      const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n        const color: string = point.color!;\n        // mapping data to the format Legends component needs\n        const legend: Legend = {\n          title: point.legend!,\n          color,\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend(undefined);\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          // eslint-disable-next-line react/jsx-no-bind\n          onChange={_onLegendSelectionChange}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n    function _onLegendSelectionChange(\n      selectedLegends: string[],\n      event: React.MouseEvent<HTMLButtonElement>,\n      currentLegend?: Legend,\n    ): void {\n      if (props.legendProps && 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    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      let cx = 0;\n      let cy = 0;\n\n      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n      cx = targetRect.left + targetRect.width / 2;\n      cy = targetRect.top + targetRect.height / 2;\n      updatePosition(cx, cy);\n      setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n      setValue(data.data!.toString());\n      setLegend(data.legend);\n      setColor(data.color!);\n      setXCalloutValue(data.xAxisCalloutData!);\n      setYCalloutValue(data.yAxisCalloutData!);\n      setFocusedArcId(id);\n      setDataPointCalloutProps(data);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n        setValue(data.data!.toString());\n        setLegend(data.legend);\n        setColor(data.color!);\n        setXCalloutValue(data.xAxisCalloutData!);\n        setYCalloutValue(data.yAxisCalloutData!);\n        setDataPointCalloutProps(data);\n        updatePosition(e.clientX, e.clientY);\n      }\n    }\n    function _onBlur(): void {\n      setFocusedArcId('');\n    }\n\n    function _hoverLeave(): void {\n      /**/\n    }\n\n    function _handleChartMouseLeave() {\n      _calloutAnchorPoint = null;\n      setPopoverOpen(false);\n    }\n\n    function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n      const highlightedLegends = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {\n        const pointValue = data.find(point => _isLegendHighlighted(point.legend));\n        return pointValue\n          ? pointValue.yAxisCalloutData\n            ? pointValue.yAxisCalloutData\n            : pointValue.data!\n          : valueInsideDonut;\n      } else if (highlightedLegends.length > 0) {\n        let totalValue = 0;\n        data.forEach(point => {\n          if (highlightedLegends.includes(point.legend!)) {\n            totalValue += point.data!;\n          }\n        });\n        return totalValue;\n      } else {\n        return valueInsideDonut;\n      }\n    }\n\n    function _toLocaleString(data: string | number | undefined) {\n      const localeString = formatToLocaleString(data, props.culture);\n      if (!localeString) {\n        return data;\n      }\n      return localeString?.toString();\n    }\n\n    /**\n     * This function returns\n     * the selected legend if there is one\n     * or the hovered legend if none of the legends is selected.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n    }\n\n    function _isLegendHighlighted(legend: string | undefined): boolean {\n      return _getHighlightedLegend().includes(legend!);\n    }\n\n    function _noLegendsHighlighted(): boolean {\n      return _getHighlightedLegend().length === 0;\n    }\n\n    function _isChartEmpty(): boolean {\n      return !(\n        props.data &&\n        props.data.chartData &&\n        props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n      );\n    }\n\n    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n      return donutChartDataPoint\n        ? donutChartDataPoint.map((item, index) => {\n            let defaultColor: string;\n            if (typeof item.color === 'undefined') {\n              defaultColor = getNextColor(index, 0);\n            } else {\n              defaultColor = getColorFromToken(item.color);\n            }\n            return { ...item, defaultColor };\n          })\n        : [];\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    /**\n     * When screen resizes, along with screen, chart also auto adjusted.\n     * This method used to adjust height and width of the charts.\n     */\n    function _fitParentContainer(): void {\n      //_reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n        legendContainerHeight =\n          ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n            MIN_LEGEND_CONTAINER_HEIGHT) +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n      }\n      if (props.parentRef || _rootElem.current) {\n        const container = props.parentRef ? props.parentRef : _rootElem.current!;\n        const currentContainerWidth = container.getBoundingClientRect().width;\n        const currentContainerHeight =\n          container.getBoundingClientRect().height > legendContainerHeight\n            ? container.getBoundingClientRect().height\n            : 200;\n        const shouldResize =\n          _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n        if (shouldResize) {\n          setWidth(currentContainerWidth);\n          setHeight(currentContainerHeight - legendContainerHeight);\n        }\n      }\n      //});\n    }\n\n    const { data, hideLegend = false } = props;\n    const points = _addDefaultColors(data?.chartData);\n\n    const classes = useDonutChartStyles(props);\n\n    const legendBars = _createLegends(points);\n    const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n    const donutMarginVertical = props.hideLabels ? 0 : 40;\n    const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n    const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n    const valueInsideDonut =\n      props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div\n        className={classes.root}\n        ref={(rootElem: HTMLDivElement | null) => (_rootElem.current = rootElem)}\n        onMouseLeave={_handleChartMouseLeave}\n      >\n        {props.xAxisAnnotation && (\n          <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n            {props.xAxisAnnotation}\n          </text>\n        )}\n        <div className={classes.chartWrapper} {...focusAttributes}>\n          <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={!props.hideTooltip && isPopoverOpen}\n          legend={legend!}\n          YValue={value!}\n          color={color}\n          isCalloutForStack={false}\n          customCallout={{\n            customizedCallout: props.onRenderCalloutPerDataPoint\n              ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n            customCalloutProps: props.calloutPropsPerDataPoint\n              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n          }}\n          isCartesian={false}\n        />\n        {!hideLegend && (\n          <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","undefined","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegends","setSelectedLegends","legendProps","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","prevPropsRef","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","prevProps","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/**\n * Donutchart component.\n * {@docCategory DonutChart}\n */\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n  (props, forwardedRef) => {\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const _uniqText: string = useId('_Pie_');\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    let _calloutAnchorPoint: ChartDataPoint | null;\n    let _emptyChartId: string | null;\n    const legendContainer = React.useRef<HTMLDivElement | null>(null);\n    const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n    const [value, setValue] = React.useState<string | undefined>('');\n    const [legend, setLegend] = React.useState<string | undefined>('');\n    const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n    const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n    const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const prevPropsRef = React.useRef<DonutChartProps | null>(null);\n    const _legendsRef = React.useRef<LegendContainer>(null);\n    const _isRTL: boolean = useRtl();\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\n\n    React.useEffect(() => {\n      if (prevPropsRef.current) {\n        const prevProps = prevPropsRef.current;\n        if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n          setSelectedLegends(props.legendProps?.selectedLegends || []);\n        }\n      }\n      prevPropsRef.current = props;\n    }, [props]);\n\n    React.useEffect(() => {\n      if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {\n        _fitParentContainer();\n      }\n      prevSize.current.height = props.height;\n      prevSize.current.width = props.width;\n    }, [props.width, props.height]);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n        },\n      }),\n      [],\n    );\n\n    function _elevateToMinimums(data: ChartDataPoint[]) {\n      let sumOfData = 0;\n      const minPercent = 0.01;\n      const elevatedData: ChartDataPoint[] = [];\n      data.forEach(item => {\n        sumOfData += item.data!;\n      });\n      data.forEach(item => {\n        elevatedData.push(\n          minPercent * sumOfData > item.data! && item.data! > 0\n            ? {\n                ...item,\n                data: minPercent * sumOfData,\n                yAxisCalloutData:\n                  item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n              }\n            : item,\n        );\n      });\n      return elevatedData;\n    }\n    function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n      const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n        const color: string = point.color!;\n        // mapping data to the format Legends component needs\n        const legend: Legend = {\n          title: point.legend!,\n          color,\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend(undefined);\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          // eslint-disable-next-line react/jsx-no-bind\n          onChange={_onLegendSelectionChange}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n    function _onLegendSelectionChange(\n      selectedLegends: string[],\n      event: React.MouseEvent<HTMLButtonElement>,\n      currentLegend?: Legend,\n    ): void {\n      if (props.legendProps && 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    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      let cx = 0;\n      let cy = 0;\n\n      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n      cx = targetRect.left + targetRect.width / 2;\n      cy = targetRect.top + targetRect.height / 2;\n      updatePosition(cx, cy);\n      setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n      setValue(data.data!.toString());\n      setLegend(data.legend);\n      setColor(data.color!);\n      setXCalloutValue(data.xAxisCalloutData!);\n      setYCalloutValue(data.yAxisCalloutData!);\n      setFocusedArcId(id);\n      setDataPointCalloutProps(data);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n        setValue(data.data!.toString());\n        setLegend(data.legend);\n        setColor(data.color!);\n        setXCalloutValue(data.xAxisCalloutData!);\n        setYCalloutValue(data.yAxisCalloutData!);\n        setDataPointCalloutProps(data);\n        updatePosition(e.clientX, e.clientY);\n      }\n    }\n    function _onBlur(): void {\n      setFocusedArcId('');\n    }\n\n    function _hoverLeave(): void {\n      /**/\n    }\n\n    function _handleChartMouseLeave() {\n      _calloutAnchorPoint = null;\n      setPopoverOpen(false);\n    }\n\n    function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n      const highlightedLegends = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {\n        const pointValue = data.find(point => _isLegendHighlighted(point.legend));\n        return pointValue\n          ? pointValue.yAxisCalloutData\n            ? pointValue.yAxisCalloutData\n            : pointValue.data!\n          : valueInsideDonut;\n      } else if (highlightedLegends.length > 0) {\n        let totalValue = 0;\n        data.forEach(point => {\n          if (highlightedLegends.includes(point.legend!)) {\n            totalValue += point.data!;\n          }\n        });\n        return totalValue;\n      } else {\n        return valueInsideDonut;\n      }\n    }\n\n    function _toLocaleString(data: string | number | undefined) {\n      const localeString = formatToLocaleString(data, props.culture);\n      if (!localeString) {\n        return data;\n      }\n      return localeString?.toString();\n    }\n\n    /**\n     * This function returns\n     * the selected legend if there is one\n     * or the hovered legend if none of the legends is selected.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n    }\n\n    function _isLegendHighlighted(legend: string | undefined): boolean {\n      return _getHighlightedLegend().includes(legend!);\n    }\n\n    function _noLegendsHighlighted(): boolean {\n      return _getHighlightedLegend().length === 0;\n    }\n\n    function _isChartEmpty(): boolean {\n      return !(\n        props.data &&\n        props.data.chartData &&\n        props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n      );\n    }\n\n    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n      return donutChartDataPoint\n        ? donutChartDataPoint.map((item, index) => {\n            let defaultColor: string;\n            if (typeof item.color === 'undefined') {\n              defaultColor = getNextColor(index, 0);\n            } else {\n              defaultColor = getColorFromToken(item.color);\n            }\n            return { ...item, defaultColor };\n          })\n        : [];\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    /**\n     * When screen resizes, along with screen, chart also auto adjusted.\n     * This method used to adjust height and width of the charts.\n     */\n    function _fitParentContainer(): void {\n      //_reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n        legendContainerHeight =\n          ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n            MIN_LEGEND_CONTAINER_HEIGHT) +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n      }\n      if (props.parentRef || _rootElem.current) {\n        const container = props.parentRef ? props.parentRef : _rootElem.current!;\n        const currentContainerWidth = container.getBoundingClientRect().width;\n        const currentContainerHeight =\n          container.getBoundingClientRect().height > legendContainerHeight\n            ? container.getBoundingClientRect().height\n            : 200;\n        const shouldResize =\n          _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n        if (shouldResize) {\n          setWidth(currentContainerWidth);\n          setHeight(currentContainerHeight - legendContainerHeight);\n        }\n      }\n      //});\n    }\n\n    const { data, hideLegend = false } = props;\n    const points = _addDefaultColors(data?.chartData);\n\n    const classes = useDonutChartStyles(props);\n\n    const legendBars = _createLegends(points);\n    const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n    const donutMarginVertical = props.hideLabels ? 0 : 40;\n    const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n    const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n    const valueInsideDonut =\n      props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div\n        className={classes.root}\n        ref={(rootElem: HTMLDivElement | null) => (_rootElem.current = rootElem)}\n        onMouseLeave={_handleChartMouseLeave}\n      >\n        {props.xAxisAnnotation && (\n          <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n            {props.xAxisAnnotation}\n          </text>\n        )}\n        <div className={classes.chartWrapper} {...focusAttributes}>\n          <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={\n            !props.hideTooltip && isPopoverOpen && (_noLegendsHighlighted() || _isLegendHighlighted(legend))\n          }\n          legend={legend!}\n          YValue={value!}\n          color={color}\n          isCalloutForStack={false}\n          customCallout={{\n            customizedCallout: props.onRenderCalloutPerDataPoint\n              ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n            customCalloutProps: props.calloutPropsPerDataPoint\n              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n          }}\n          isCartesian={false}\n        />\n        {!hideLegend && (\n          <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","undefined","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegends","setSelectedLegends","legendProps","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","prevPropsRef","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","prevProps","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}

package/lib/components/FunnelChart/FunnelChart.js

@@ -367,7 +367,11 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     return !_isChartEmpty() ? /*#__PURE__*/ React.createElement("div", {
         ref: chartContainerRef,
         className: classes.root,
-        ...focusAttributes
+        ...focusAttributes,
+        style: {
+            width,
+            height
+        }
     }, /*#__PURE__*/ React.createElement("svg", {
         width: width,
         height: height,

package/lib/components/FunnelChart/FunnelChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useRtl } from '../../utilities/index';\nimport { FunnelChartDataPoint, FunnelChartProps } from './FunnelChart.types';\nimport { Legend, Legends, LegendContainer } from '../Legends/index';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { getContrastTextColor } from '../../utilities/colors';\nimport { useFunnelChartStyles } from './useFunnelChartStyles.styles';\nimport {\n  getHorizontalFunnelSegmentGeometry,\n  getVerticalFunnelSegmentGeometry,\n  getSegmentTextProps,\n  getStackedHorizontalFunnelSegmentGeometry,\n  getStackedVerticalFunnelSegmentGeometry,\n} from './funnelGeometry';\nimport { ChartPopoverProps, ImageExportOptions } from '../../index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nexport const FunnelChart: React.FunctionComponent<FunnelChartProps> = React.forwardRef<\n  HTMLDivElement,\n  FunnelChartProps\n>((props, forwardedRef) => {\n  const _emptyChartId: string = useId('_FunnelChart_empty');\n  const isRTL = useRtl();\n\n  const [hoveredStage, setHoveredStage] = React.useState<string | null>(null);\n  const [calloutData, setCalloutData] = React.useState<FunnelChartDataPoint | null>(null);\n  const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);\n  const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n  const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n  const chartContainerRef = React.useRef<HTMLDivElement | null>(null);\n  const isStacked = isStackedFunnelData(props.data);\n  const _legendsRef = React.useRef<LegendContainer>(null);\n\n  React.useEffect(() => {\n    if (props.legendProps?.selectedLegends) {\n      setSelectedLegends(props.legendProps.selectedLegends);\n    }\n  }, [props.legendProps?.selectedLegends]);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      toImage: (opts?: ImageExportOptions): Promise<string> => {\n        return toImage(chartContainerRef.current, _legendsRef.current?.toSVG, isRTL, opts);\n      },\n    }),\n    [],\n  );\n\n  function _handleHover(data: FunnelChartDataPoint, mouseEvent: React.MouseEvent<SVGElement>) {\n    mouseEvent?.persist();\n    updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n    setCalloutData(data);\n    setPopoverOpen(true);\n  }\n\n  function _handleFocus(data: FunnelChartDataPoint, focusEvent: React.FocusEvent<SVGPathElement>) {\n    focusEvent?.persist();\n    let x = 0;\n    let y = 0;\n    const targetRect = (focusEvent.target as SVGPathElement).getBoundingClientRect();\n    x = targetRect.left + targetRect.width / 2;\n    y = targetRect.top + targetRect.height / 2;\n\n    updatePosition(x, y);\n    setCalloutData(data);\n    setPopoverOpen(true);\n  }\n\n  function _handleStackedHover(\n    stage: string,\n    subValue: { category: string; value: number; color: string },\n    mouseEvent: React.MouseEvent<SVGElement>,\n  ) {\n    mouseEvent?.persist();\n    updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setPopoverOpen(true);\n  }\n\n  function _handleStackedFocus(\n    stage: string,\n    subValue: { category: string; value: number; color: string },\n    focusEvent: React.FocusEvent<SVGPathElement>,\n  ) {\n    focusEvent?.persist();\n    let x = 0;\n    let y = 0;\n    const targetRect = (focusEvent.target as SVGPathElement).getBoundingClientRect();\n    x = targetRect.left + targetRect.width / 2;\n    y = targetRect.top + targetRect.height / 2;\n\n    updatePosition(x, y);\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setPopoverOpen(true);\n  }\n\n  function _handleMouseOut() {\n    setHoveredStage(null);\n    setPopoverOpen(false);\n    setCalloutData(null);\n  }\n\n  function _onLegendSelectionChange(\n    legendsSelected: string[],\n    event: React.MouseEvent<HTMLButtonElement>,\n    currentLegend?: Legend,\n  ): void {\n    if (props.legendProps?.canSelectMultipleLegends) {\n      setSelectedLegends(legendsSelected);\n    } else {\n      setSelectedLegends(legendsSelected.slice(-1));\n    }\n\n    if (props.legendProps?.onChange) {\n      props.legendProps.onChange(legendsSelected, event, currentLegend);\n    }\n  }\n\n  const _onLegendSelectionChangeCallback = React.useCallback(_onLegendSelectionChange, [props.legendProps]);\n\n  function getHighlightedLegend(): string[] {\n    return selectedLegends.length > 0 ? selectedLegends : hoveredStage ? [hoveredStage] : [];\n  }\n\n  function legendHighlighted(legend: string): boolean {\n    return getHighlightedLegend().includes(legend);\n  }\n\n  function noLegendHighlighted(): boolean {\n    return getHighlightedLegend().length === 0;\n  }\n\n  function _getEventHandlerProps(\n    data: FunnelChartDataPoint | { stage: string; subValue: { category: string; value: number; color: string } },\n    opacity?: number,\n  ) {\n    if ('subValue' in data) {\n      return {\n        culture: props.culture,\n        onMouseOver:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n            : undefined,\n        onMouseMove:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n            : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleStackedFocus(data.stage, data.subValue, event),\n        onBlur: () => _handleMouseOut(),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    } else {\n      return {\n        culture: props.culture,\n        onMouseOver: opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n        onMouseMove: opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event),\n        onBlur: () => _handleMouseOut(),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    }\n  }\n\n  function _renderSegmentText({\n    show,\n    x,\n    y,\n    value,\n    textColor,\n    opacity,\n  }: {\n    show: boolean;\n    x: number;\n    y: number;\n    value: number;\n    textColor: string;\n    opacity: number;\n  }) {\n    if (!show) {\n      return null;\n    }\n\n    const textElement = (\n      <text\n        x={isRTL ? funnelWidth - x : x}\n        y={y}\n        opacity={opacity}\n        textAnchor=\"middle\"\n        alignmentBaseline=\"middle\"\n        fill={textColor}\n      >\n        {formatToLocaleString(value.toString(), props.culture) as React.ReactNode}\n      </text>\n    );\n\n    if (isRTL) {\n      return <g transform={`scale(-1,1) translate(${-funnelWidth},0)`}>{textElement}</g>;\n    }\n    return textElement;\n  }\n\n  function _renderFunnelSegment({\n    key,\n    pathD,\n    fill,\n    opacity,\n    textProps,\n    data,\n    tabIndex,\n  }: {\n    key: string | number;\n    pathD: string;\n    fill: string;\n    opacity: number;\n    textProps?: {\n      show: boolean;\n      x: number;\n      y: number;\n      value: number;\n    };\n    data: FunnelChartDataPoint | { stage: string; subValue: { category: string; value: number; color: string } };\n    tabIndex?: number;\n  }) {\n    const eventHandlers = _getEventHandlerProps(data, opacity);\n    const textColor = getContrastTextColor(fill);\n\n    return (\n      <g key={key}>\n        <path d={pathD} fill={fill} opacity={opacity} {...eventHandlers} tabIndex={tabIndex} />\n        {textProps && <g {...eventHandlers}>{_renderSegmentText({ ...textProps, textColor, opacity })}</g>}\n      </g>\n    );\n  }\n\n  function _createFunnel(\n    containerHeight: number,\n    containerWidth: number,\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSXElement[] {\n    const { data } = props;\n    const funnelWidth = containerWidth;\n    const funnelHeight = containerHeight * 0.8;\n\n    return data.map((d, i) => {\n      const geometryProps =\n        props.orientation === 'vertical'\n          ? getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL })\n          : getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL });\n\n      const { pathD, textX, textY, availableWidth } = geometryProps;\n      const minTextWidth = 16;\n      const eventHandlerProps = _getEventHandlerProps(d);\n      const textProps = getSegmentTextProps({\n        availableWidth,\n        minTextWidth,\n        textX,\n        textY,\n        value: d.value!,\n        ...eventHandlerProps,\n      });\n\n      return _renderFunnelSegment({\n        key: i,\n        pathD,\n        fill: d.color!,\n        opacity: legendHighlighted(d.stage as string) || noLegendHighlighted() ? 1 : 0.1,\n        textProps,\n        data: d,\n        tabIndex: legendHighlighted(d.stage as string) || noLegendHighlighted() ? 0 : undefined,\n      });\n    });\n  }\n\n  function isStackedFunnelData(data: FunnelChartDataPoint[]): boolean {\n    return Array.isArray(data) && data.every(stage => Array.isArray(stage.subValues));\n  }\n\n  function _renderStackedSegment(\n    stage: FunnelChartDataPoint,\n    subValue: { value: number; color: string; category: string },\n    stageIndex: number,\n    subValueIndex: number,\n    geometryParams: {\n      stages: FunnelChartDataPoint[];\n      totals: number[];\n      maxTotal: number;\n      funnelWidth: number;\n      funnelHeight: number;\n      isRTL: boolean;\n    },\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSXElement {\n    // Ensure stages have subValues for geometry functions\n    const stagesWithSubValues = geometryParams.stages.map(s => ({\n      ...s,\n      subValues: s.subValues || [],\n    }));\n    const geom =\n      props.orientation === 'vertical'\n        ? getStackedVerticalFunnelSegmentGeometry({\n            ...geometryParams,\n            stages: stagesWithSubValues,\n            i: stageIndex,\n            k: subValueIndex,\n          })\n        : getStackedHorizontalFunnelSegmentGeometry({\n            ...geometryParams,\n            stages: stagesWithSubValues,\n            i: stageIndex,\n            k: subValueIndex,\n          });\n\n    const minTextWidth = 16;\n    const eventHandlerProps = _getEventHandlerProps({ stage: stage.stage as string, subValue });\n    const textProps = getSegmentTextProps({\n      availableWidth: geom.availableWidth,\n      minTextWidth,\n      textX: geom.textX,\n      textY: geom.textY,\n      value: subValue.value,\n      ...eventHandlerProps,\n    });\n\n    return _renderFunnelSegment({\n      key: `${stageIndex}-${subValueIndex}`,\n      pathD: geom.pathD,\n      fill: subValue.color,\n      opacity:\n        (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) || noLegendHighlighted() ? 1 : 0.1,\n      textProps,\n      data: { stage: stage.stage as string, subValue },\n      tabIndex: legendHighlighted(subValue.category) || noLegendHighlighted() ? 0 : undefined,\n    });\n  }\n\n  function _createStackedFunnel(\n    containerHeight: number,\n    containerWidth: number,\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSXElement[] {\n    const { data } = props;\n\n    const stages = data;\n    const totals = stages.map(s => s?.subValues?.reduce((sum, subValue) => sum + subValue.value, 0) ?? 0);\n    const maxTotal = Math.max(...totals);\n\n    const funnelWidth = containerWidth;\n    const funnelHeight = containerHeight * 0.8;\n\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const paths: JSXElement[] = [];\n\n    const geometryParams = {\n      stages,\n      totals,\n      maxTotal,\n      funnelWidth,\n      funnelHeight,\n      isRTL,\n    };\n\n    for (let i = 0; i < stages.length; i++) {\n      const cur = stages[i];\n      for (let k = 0; k < (cur.subValues ?? []).length; k++) {\n        const v = cur.subValues?.[k];\n        if (!v) {\n          continue;\n        }\n        paths.push(_renderStackedSegment(cur, v, i, k, geometryParams));\n      }\n    }\n    return paths;\n  }\n\n  function _renderLegends(): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSXElement {\n    if (props.hideLegend) {\n      return <></>;\n    }\n    let legends: Legend[];\n\n    if (isStacked) {\n      // Collect unique categories and their color\n      const categoryMap: Record<string, string> = {};\n      props.data.forEach((stage: FunnelChartDataPoint) => {\n        (stage.subValues || []).forEach(sub => {\n          if (!(sub.category in categoryMap)) {\n            categoryMap[sub.category] = sub.color;\n          }\n        });\n      });\n      legends = Object.entries(categoryMap).map(([category, color]) => ({\n        title: category,\n        color,\n        hoverAction: () => setHoveredStage(category),\n        onMouseOutAction: () => setHoveredStage(null),\n      }));\n    } else {\n      legends = props.data.map((d: FunnelChartDataPoint) => ({\n        title: d.stage as string,\n        color: d.color!,\n        hoverAction: () => setHoveredStage(d.stage as string),\n        onMouseOutAction: () => setHoveredStage(null),\n      }));\n    }\n\n    return (\n      <div style={{ display: 'flex', justifyContent: 'center' }}>\n        <Legends\n          legends={legends}\n          centerLegends={true}\n          onChange={_onLegendSelectionChangeCallback}\n          {...props.legendProps}\n          legendRef={_legendsRef}\n        />\n      </div>\n    );\n  }\n\n  function _isChartEmpty(): boolean {\n    return !(props.data && props.data.length > 0);\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 classes = useFunnelChartStyles(props);\n\n  const calloutProps: ChartPopoverProps = {\n    ...props.calloutProps,\n    color: calloutData?.color,\n    hoverXValue: calloutData?.stage,\n    YValue: calloutData?.value,\n  };\n\n  const width = props.width || 350;\n  const height = props.height || 500;\n\n  const funnelMarginTop = 40;\n  const funnelWidth = width * 0.8;\n  const funnelOffsetX = (width - funnelWidth) / 2;\n  const focusAttributes = useFocusableGroup();\n\n  return !_isChartEmpty() ? (\n    <div ref={chartContainerRef} className={classes.root} {...focusAttributes}>\n      <svg width={width} height={height} className={classes.chart} role={'img'} aria-label={props.chartTitle}>\n        <g\n          transform={\n            isRTL\n              ? `translate(${funnelOffsetX + funnelWidth}, ${funnelMarginTop}) scale(-1,1)`\n              : `translate(${funnelOffsetX}, ${funnelMarginTop})`\n          }\n        >\n          {isStacked\n            ? _createStackedFunnel(height - funnelMarginTop, funnelWidth)\n            : _createFunnel(height - funnelMarginTop, funnelWidth)}\n        </g>\n      </svg>\n      {isPopoverOpen && (\n        <ChartPopover\n          {...props.calloutProps}\n          XValue={calloutProps?.hoverXValue as string}\n          yCalloutValue={calloutProps?.YValue as string}\n          culture={props.culture}\n          clickPosition={clickPosition}\n          isPopoverOpen={isPopoverOpen}\n          color={calloutProps?.color}\n          isCartesian={false}\n        />\n      )}\n      {_renderLegends()}\n    </div>\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n});\nFunnelChart.displayName = 'FunnelChart';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nFunnelChart.defaultProps = {\n  orientation: 'vertical',\n};\n"],"names":["React","useId","useRtl","Legends","useFocusableGroup","ChartPopover","formatToLocaleString","getContrastTextColor","useFunnelChartStyles","getHorizontalFunnelSegmentGeometry","getVerticalFunnelSegmentGeometry","getSegmentTextProps","getStackedHorizontalFunnelSegmentGeometry","getStackedVerticalFunnelSegmentGeometry","toImage","FunnelChart","forwardRef","props","forwardedRef","_emptyChartId","isRTL","hoveredStage","setHoveredStage","useState","calloutData","setCalloutData","selectedLegends","setSelectedLegends","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","chartContainerRef","useRef","isStacked","isStackedFunnelData","data","_legendsRef","useEffect","legendProps","useImperativeHandle","componentRef","opts","current","toSVG","_handleHover","mouseEvent","persist","updatePosition","clientX","clientY","_handleFocus","focusEvent","targetRect","target","getBoundingClientRect","left","width","top","height","_handleStackedHover","stage","subValue","value","color","category","_handleStackedFocus","_handleMouseOut","_onLegendSelectionChange","legendsSelected","event","currentLegend","canSelectMultipleLegends","slice","onChange","_onLegendSelectionChangeCallback","useCallback","getHighlightedLegend","length","legendHighlighted","legend","includes","noLegendHighlighted","_getEventHandlerProps","opacity","culture","onMouseOver","undefined","onMouseMove","onFocus","onBlur","onMouseOut","_renderSegmentText","show","textColor","textElement","text","funnelWidth","textAnchor","alignmentBaseline","fill","toString","g","transform","_renderFunnelSegment","key","pathD","textProps","tabIndex","eventHandlers","path","d","_createFunnel","containerHeight","containerWidth","funnelHeight","map","i","geometryProps","orientation","textX","textY","availableWidth","minTextWidth","eventHandlerProps","Array","isArray","every","subValues","_renderStackedSegment","stageIndex","subValueIndex","geometryParams","stagesWithSubValues","stages","s","geom","k","_createStackedFunnel","totals","reduce","sum","maxTotal","Math","max","paths","cur","v","push","_renderLegends","hideLegend","legends","categoryMap","forEach","sub","Object","entries","title","hoverAction","onMouseOutAction","div","style","display","justifyContent","centerLegends","legendRef","_isChartEmpty","newX","newY","threshold","distance","sqrt","pow","classes","calloutProps","hoverXValue","YValue","funnelMarginTop","funnelOffsetX","focusAttributes","ref","className","root","svg","chart","role","aria-label","chartTitle","XValue","yCalloutValue","isCartesian","id","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useRtl } from '../../utilities/index';\nimport { FunnelChartDataPoint, FunnelChartProps } from './FunnelChart.types';\nimport { Legend, Legends, LegendContainer } from '../Legends/index';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { getContrastTextColor } from '../../utilities/colors';\nimport { useFunnelChartStyles } from './useFunnelChartStyles.styles';\nimport {\n  getHorizontalFunnelSegmentGeometry,\n  getVerticalFunnelSegmentGeometry,\n  getSegmentTextProps,\n  getStackedHorizontalFunnelSegmentGeometry,\n  getStackedVerticalFunnelSegmentGeometry,\n} from './funnelGeometry';\nimport { ChartPopoverProps, ImageExportOptions } from '../../index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nexport const FunnelChart: React.FunctionComponent<FunnelChartProps> = React.forwardRef<\n  HTMLDivElement,\n  FunnelChartProps\n>((props, forwardedRef) => {\n  const _emptyChartId: string = useId('_FunnelChart_empty');\n  const isRTL = useRtl();\n\n  const [hoveredStage, setHoveredStage] = React.useState<string | null>(null);\n  const [calloutData, setCalloutData] = React.useState<FunnelChartDataPoint | null>(null);\n  const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);\n  const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n  const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n  const chartContainerRef = React.useRef<HTMLDivElement | null>(null);\n  const isStacked = isStackedFunnelData(props.data);\n  const _legendsRef = React.useRef<LegendContainer>(null);\n\n  React.useEffect(() => {\n    if (props.legendProps?.selectedLegends) {\n      setSelectedLegends(props.legendProps.selectedLegends);\n    }\n  }, [props.legendProps?.selectedLegends]);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      toImage: (opts?: ImageExportOptions): Promise<string> => {\n        return toImage(chartContainerRef.current, _legendsRef.current?.toSVG, isRTL, opts);\n      },\n    }),\n    [],\n  );\n\n  function _handleHover(data: FunnelChartDataPoint, mouseEvent: React.MouseEvent<SVGElement>) {\n    mouseEvent?.persist();\n    updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n    setCalloutData(data);\n    setPopoverOpen(true);\n  }\n\n  function _handleFocus(data: FunnelChartDataPoint, focusEvent: React.FocusEvent<SVGPathElement>) {\n    focusEvent?.persist();\n    let x = 0;\n    let y = 0;\n    const targetRect = (focusEvent.target as SVGPathElement).getBoundingClientRect();\n    x = targetRect.left + targetRect.width / 2;\n    y = targetRect.top + targetRect.height / 2;\n\n    updatePosition(x, y);\n    setCalloutData(data);\n    setPopoverOpen(true);\n  }\n\n  function _handleStackedHover(\n    stage: string,\n    subValue: { category: string; value: number; color: string },\n    mouseEvent: React.MouseEvent<SVGElement>,\n  ) {\n    mouseEvent?.persist();\n    updatePosition(mouseEvent.clientX, mouseEvent.clientY);\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setPopoverOpen(true);\n  }\n\n  function _handleStackedFocus(\n    stage: string,\n    subValue: { category: string; value: number; color: string },\n    focusEvent: React.FocusEvent<SVGPathElement>,\n  ) {\n    focusEvent?.persist();\n    let x = 0;\n    let y = 0;\n    const targetRect = (focusEvent.target as SVGPathElement).getBoundingClientRect();\n    x = targetRect.left + targetRect.width / 2;\n    y = targetRect.top + targetRect.height / 2;\n\n    updatePosition(x, y);\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setPopoverOpen(true);\n  }\n\n  function _handleMouseOut() {\n    setHoveredStage(null);\n    setPopoverOpen(false);\n    setCalloutData(null);\n  }\n\n  function _onLegendSelectionChange(\n    legendsSelected: string[],\n    event: React.MouseEvent<HTMLButtonElement>,\n    currentLegend?: Legend,\n  ): void {\n    if (props.legendProps?.canSelectMultipleLegends) {\n      setSelectedLegends(legendsSelected);\n    } else {\n      setSelectedLegends(legendsSelected.slice(-1));\n    }\n\n    if (props.legendProps?.onChange) {\n      props.legendProps.onChange(legendsSelected, event, currentLegend);\n    }\n  }\n\n  const _onLegendSelectionChangeCallback = React.useCallback(_onLegendSelectionChange, [props.legendProps]);\n\n  function getHighlightedLegend(): string[] {\n    return selectedLegends.length > 0 ? selectedLegends : hoveredStage ? [hoveredStage] : [];\n  }\n\n  function legendHighlighted(legend: string): boolean {\n    return getHighlightedLegend().includes(legend);\n  }\n\n  function noLegendHighlighted(): boolean {\n    return getHighlightedLegend().length === 0;\n  }\n\n  function _getEventHandlerProps(\n    data: FunnelChartDataPoint | { stage: string; subValue: { category: string; value: number; color: string } },\n    opacity?: number,\n  ) {\n    if ('subValue' in data) {\n      return {\n        culture: props.culture,\n        onMouseOver:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n            : undefined,\n        onMouseMove:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n            : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleStackedFocus(data.stage, data.subValue, event),\n        onBlur: () => _handleMouseOut(),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    } else {\n      return {\n        culture: props.culture,\n        onMouseOver: opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n        onMouseMove: opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event),\n        onBlur: () => _handleMouseOut(),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    }\n  }\n\n  function _renderSegmentText({\n    show,\n    x,\n    y,\n    value,\n    textColor,\n    opacity,\n  }: {\n    show: boolean;\n    x: number;\n    y: number;\n    value: number;\n    textColor: string;\n    opacity: number;\n  }) {\n    if (!show) {\n      return null;\n    }\n\n    const textElement = (\n      <text\n        x={isRTL ? funnelWidth - x : x}\n        y={y}\n        opacity={opacity}\n        textAnchor=\"middle\"\n        alignmentBaseline=\"middle\"\n        fill={textColor}\n      >\n        {formatToLocaleString(value.toString(), props.culture) as React.ReactNode}\n      </text>\n    );\n\n    if (isRTL) {\n      return <g transform={`scale(-1,1) translate(${-funnelWidth},0)`}>{textElement}</g>;\n    }\n    return textElement;\n  }\n\n  function _renderFunnelSegment({\n    key,\n    pathD,\n    fill,\n    opacity,\n    textProps,\n    data,\n    tabIndex,\n  }: {\n    key: string | number;\n    pathD: string;\n    fill: string;\n    opacity: number;\n    textProps?: {\n      show: boolean;\n      x: number;\n      y: number;\n      value: number;\n    };\n    data: FunnelChartDataPoint | { stage: string; subValue: { category: string; value: number; color: string } };\n    tabIndex?: number;\n  }) {\n    const eventHandlers = _getEventHandlerProps(data, opacity);\n    const textColor = getContrastTextColor(fill);\n\n    return (\n      <g key={key}>\n        <path d={pathD} fill={fill} opacity={opacity} {...eventHandlers} tabIndex={tabIndex} />\n        {textProps && <g {...eventHandlers}>{_renderSegmentText({ ...textProps, textColor, opacity })}</g>}\n      </g>\n    );\n  }\n\n  function _createFunnel(\n    containerHeight: number,\n    containerWidth: number,\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSXElement[] {\n    const { data } = props;\n    const funnelWidth = containerWidth;\n    const funnelHeight = containerHeight * 0.8;\n\n    return data.map((d, i) => {\n      const geometryProps =\n        props.orientation === 'vertical'\n          ? getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL })\n          : getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL });\n\n      const { pathD, textX, textY, availableWidth } = geometryProps;\n      const minTextWidth = 16;\n      const eventHandlerProps = _getEventHandlerProps(d);\n      const textProps = getSegmentTextProps({\n        availableWidth,\n        minTextWidth,\n        textX,\n        textY,\n        value: d.value!,\n        ...eventHandlerProps,\n      });\n\n      return _renderFunnelSegment({\n        key: i,\n        pathD,\n        fill: d.color!,\n        opacity: legendHighlighted(d.stage as string) || noLegendHighlighted() ? 1 : 0.1,\n        textProps,\n        data: d,\n        tabIndex: legendHighlighted(d.stage as string) || noLegendHighlighted() ? 0 : undefined,\n      });\n    });\n  }\n\n  function isStackedFunnelData(data: FunnelChartDataPoint[]): boolean {\n    return Array.isArray(data) && data.every(stage => Array.isArray(stage.subValues));\n  }\n\n  function _renderStackedSegment(\n    stage: FunnelChartDataPoint,\n    subValue: { value: number; color: string; category: string },\n    stageIndex: number,\n    subValueIndex: number,\n    geometryParams: {\n      stages: FunnelChartDataPoint[];\n      totals: number[];\n      maxTotal: number;\n      funnelWidth: number;\n      funnelHeight: number;\n      isRTL: boolean;\n    },\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSXElement {\n    // Ensure stages have subValues for geometry functions\n    const stagesWithSubValues = geometryParams.stages.map(s => ({\n      ...s,\n      subValues: s.subValues || [],\n    }));\n    const geom =\n      props.orientation === 'vertical'\n        ? getStackedVerticalFunnelSegmentGeometry({\n            ...geometryParams,\n            stages: stagesWithSubValues,\n            i: stageIndex,\n            k: subValueIndex,\n          })\n        : getStackedHorizontalFunnelSegmentGeometry({\n            ...geometryParams,\n            stages: stagesWithSubValues,\n            i: stageIndex,\n            k: subValueIndex,\n          });\n\n    const minTextWidth = 16;\n    const eventHandlerProps = _getEventHandlerProps({ stage: stage.stage as string, subValue });\n    const textProps = getSegmentTextProps({\n      availableWidth: geom.availableWidth,\n      minTextWidth,\n      textX: geom.textX,\n      textY: geom.textY,\n      value: subValue.value,\n      ...eventHandlerProps,\n    });\n\n    return _renderFunnelSegment({\n      key: `${stageIndex}-${subValueIndex}`,\n      pathD: geom.pathD,\n      fill: subValue.color,\n      opacity:\n        (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) || noLegendHighlighted() ? 1 : 0.1,\n      textProps,\n      data: { stage: stage.stage as string, subValue },\n      tabIndex: legendHighlighted(subValue.category) || noLegendHighlighted() ? 0 : undefined,\n    });\n  }\n\n  function _createStackedFunnel(\n    containerHeight: number,\n    containerWidth: number,\n  ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSXElement[] {\n    const { data } = props;\n\n    const stages = data;\n    const totals = stages.map(s => s?.subValues?.reduce((sum, subValue) => sum + subValue.value, 0) ?? 0);\n    const maxTotal = Math.max(...totals);\n\n    const funnelWidth = containerWidth;\n    const funnelHeight = containerHeight * 0.8;\n\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const paths: JSXElement[] = [];\n\n    const geometryParams = {\n      stages,\n      totals,\n      maxTotal,\n      funnelWidth,\n      funnelHeight,\n      isRTL,\n    };\n\n    for (let i = 0; i < stages.length; i++) {\n      const cur = stages[i];\n      for (let k = 0; k < (cur.subValues ?? []).length; k++) {\n        const v = cur.subValues?.[k];\n        if (!v) {\n          continue;\n        }\n        paths.push(_renderStackedSegment(cur, v, i, k, geometryParams));\n      }\n    }\n    return paths;\n  }\n\n  function _renderLegends(): // eslint-disable-next-line @typescript-eslint/no-deprecated\n  JSXElement {\n    if (props.hideLegend) {\n      return <></>;\n    }\n    let legends: Legend[];\n\n    if (isStacked) {\n      // Collect unique categories and their color\n      const categoryMap: Record<string, string> = {};\n      props.data.forEach((stage: FunnelChartDataPoint) => {\n        (stage.subValues || []).forEach(sub => {\n          if (!(sub.category in categoryMap)) {\n            categoryMap[sub.category] = sub.color;\n          }\n        });\n      });\n      legends = Object.entries(categoryMap).map(([category, color]) => ({\n        title: category,\n        color,\n        hoverAction: () => setHoveredStage(category),\n        onMouseOutAction: () => setHoveredStage(null),\n      }));\n    } else {\n      legends = props.data.map((d: FunnelChartDataPoint) => ({\n        title: d.stage as string,\n        color: d.color!,\n        hoverAction: () => setHoveredStage(d.stage as string),\n        onMouseOutAction: () => setHoveredStage(null),\n      }));\n    }\n\n    return (\n      <div style={{ display: 'flex', justifyContent: 'center' }}>\n        <Legends\n          legends={legends}\n          centerLegends={true}\n          onChange={_onLegendSelectionChangeCallback}\n          {...props.legendProps}\n          legendRef={_legendsRef}\n        />\n      </div>\n    );\n  }\n\n  function _isChartEmpty(): boolean {\n    return !(props.data && props.data.length > 0);\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 classes = useFunnelChartStyles(props);\n\n  const calloutProps: ChartPopoverProps = {\n    ...props.calloutProps,\n    color: calloutData?.color,\n    hoverXValue: calloutData?.stage,\n    YValue: calloutData?.value,\n  };\n\n  const width = props.width || 350;\n  const height = props.height || 500;\n\n  const funnelMarginTop = 40;\n  const funnelWidth = width * 0.8;\n  const funnelOffsetX = (width - funnelWidth) / 2;\n  const focusAttributes = useFocusableGroup();\n\n  return !_isChartEmpty() ? (\n    <div ref={chartContainerRef} className={classes.root} {...focusAttributes} style={{ width, height }}>\n      <svg width={width} height={height} className={classes.chart} role={'img'} aria-label={props.chartTitle}>\n        <g\n          transform={\n            isRTL\n              ? `translate(${funnelOffsetX + funnelWidth}, ${funnelMarginTop}) scale(-1,1)`\n              : `translate(${funnelOffsetX}, ${funnelMarginTop})`\n          }\n        >\n          {isStacked\n            ? _createStackedFunnel(height - funnelMarginTop, funnelWidth)\n            : _createFunnel(height - funnelMarginTop, funnelWidth)}\n        </g>\n      </svg>\n      {isPopoverOpen && (\n        <ChartPopover\n          {...props.calloutProps}\n          XValue={calloutProps?.hoverXValue as string}\n          yCalloutValue={calloutProps?.YValue as string}\n          culture={props.culture}\n          clickPosition={clickPosition}\n          isPopoverOpen={isPopoverOpen}\n          color={calloutProps?.color}\n          isCartesian={false}\n        />\n      )}\n      {_renderLegends()}\n    </div>\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n});\nFunnelChart.displayName = 'FunnelChart';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nFunnelChart.defaultProps = {\n  orientation: 'vertical',\n};\n"],"names":["React","useId","useRtl","Legends","useFocusableGroup","ChartPopover","formatToLocaleString","getContrastTextColor","useFunnelChartStyles","getHorizontalFunnelSegmentGeometry","getVerticalFunnelSegmentGeometry","getSegmentTextProps","getStackedHorizontalFunnelSegmentGeometry","getStackedVerticalFunnelSegmentGeometry","toImage","FunnelChart","forwardRef","props","forwardedRef","_emptyChartId","isRTL","hoveredStage","setHoveredStage","useState","calloutData","setCalloutData","selectedLegends","setSelectedLegends","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","chartContainerRef","useRef","isStacked","isStackedFunnelData","data","_legendsRef","useEffect","legendProps","useImperativeHandle","componentRef","opts","current","toSVG","_handleHover","mouseEvent","persist","updatePosition","clientX","clientY","_handleFocus","focusEvent","targetRect","target","getBoundingClientRect","left","width","top","height","_handleStackedHover","stage","subValue","value","color","category","_handleStackedFocus","_handleMouseOut","_onLegendSelectionChange","legendsSelected","event","currentLegend","canSelectMultipleLegends","slice","onChange","_onLegendSelectionChangeCallback","useCallback","getHighlightedLegend","length","legendHighlighted","legend","includes","noLegendHighlighted","_getEventHandlerProps","opacity","culture","onMouseOver","undefined","onMouseMove","onFocus","onBlur","onMouseOut","_renderSegmentText","show","textColor","textElement","text","funnelWidth","textAnchor","alignmentBaseline","fill","toString","g","transform","_renderFunnelSegment","key","pathD","textProps","tabIndex","eventHandlers","path","d","_createFunnel","containerHeight","containerWidth","funnelHeight","map","i","geometryProps","orientation","textX","textY","availableWidth","minTextWidth","eventHandlerProps","Array","isArray","every","subValues","_renderStackedSegment","stageIndex","subValueIndex","geometryParams","stagesWithSubValues","stages","s","geom","k","_createStackedFunnel","totals","reduce","sum","maxTotal","Math","max","paths","cur","v","push","_renderLegends","hideLegend","legends","categoryMap","forEach","sub","Object","entries","title","hoverAction","onMouseOutAction","div","style","display","justifyContent","centerLegends","legendRef","_isChartEmpty","newX","newY","threshold","distance","sqrt","pow","classes","calloutProps","hoverXValue","YValue","funnelMarginTop","funnelOffsetX","focusAttributes","ref","className","root","svg","chart","role","aria-label","chartTitle","XValue","yCalloutValue","isCartesian","id","displayName","defaultProps"],"mappings":"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"}

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -578,8 +578,7 @@ export const VerticalStackedBarChart = /*#__PURE__*/ React.forwardRef((_props, f
         }
     }
     function _handleMouseOut() {
-        setPopoverOpen(false);
-    }
+    /**/ }
     function _getBarGapAndScale(bars, yBarScale, defaultTotalHeight) {
         const { barGapMax = 0 } = props;
         let totalData = 0;