@fluentui/react-charts 9.3.6 → 9.3.7

package/lib/components/DonutChart/DonutChart.js

@@ -3,12 +3,12 @@
 import { Pie } from './Pie/index';
 import { useDonutChartStyles } from './useDonutChartStyles.styles';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';
+import { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS } from '../../utilities/index';
 import { Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
-import { toImage } from '../../utilities/image-export-utils';
+import { useImageExport } from '../../utilities/hooks';
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
 // Create a DonutChart variant which uses these default styles and this styled subcomponent.
 /**
@@ -21,7 +21,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         hideLabels,
         ...restProps
     };
-    const _rootElem = React.useRef(null);
+    const { chartContainerRef: _rootElem, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend, false);
     const _uniqText = useId('_Pie_');
     /* eslint-disable @typescript-eslint/no-explicit-any */ let _calloutAnchorPoint;
     let _emptyChartId;
@@ -41,8 +41,6 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
     const [refSelected, setRefSelected] = React.useState(null);
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
     const prevPropsRef = React.useRef(null);
-    const _legendsRef = React.useRef(null);
-    const _isRTL = useRtl();
     React.useEffect(()=>{
         _fitParentContainer();
     }, []);
@@ -69,13 +67,6 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         props.width,
         props.height
     ]);
-    React.useImperativeHandle(props.componentRef, ()=>({
-            chartContainer: _rootElem.current,
-            toImage: (opts)=>{
-                var _legendsRef_current;
-                return toImage(_rootElem.current, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
-            }
-        }), []);
     function _elevateToMinimums(data) {
         let sumOfData = 0;
         const minPercent = 0.01;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["'use client';\n\n/* 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  ({ innerRadius = 0, hideLabels = true, ...restProps }, forwardedRef) => {\n    const props = { innerRadius, hideLabels, ...restProps };\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 [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\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      if (props.order === 'sorted') {\n        chartData.sort((a: ChartDataPoint, b: ChartDataPoint) => {\n          return b.data! - a.data!;\n        });\n      }\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(\n      data: ChartDataPoint,\n      id: string,\n      e: React.FocusEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\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      setRefSelected(targetElement!);\n    }\n\n    function _hoverCallback(\n      data: ChartDataPoint,\n      e: React.MouseEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): 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        setRefSelected(targetElement!);\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    /**\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.filter(d => d.data! >= 0));\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);\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) => {\n          _rootElem.current = rootElem;\n        }}\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}\n          positioning={{\n            target: refSelected,\n          }}\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\n            ref={(e: HTMLDivElement) => {\n              legendContainer.current = e;\n            }}\n            className={classes.legendContainer}\n          >\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';\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","innerRadius","hideLabels","restProps","forwardedRef","props","_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","refSelected","setRefSelected","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","order","sort","a","b","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","targetElement","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","donutMarginVertical","outerRadius","Math","min","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","x","y","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","positioning","target","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["'use client';\n\n/* 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 } from '../../utilities/index';\nimport { Legend, Legends } 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 { useImageExport } from '../../utilities/hooks';\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  ({ innerRadius = 0, hideLabels = true, ...restProps }, forwardedRef) => {\n    const props = { innerRadius, hideLabels, ...restProps };\n    const { chartContainerRef: _rootElem, legendsRef: _legendsRef } = useImageExport(\n      props.componentRef,\n      props.hideLegend,\n      false,\n    );\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 [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const prevPropsRef = React.useRef<DonutChartProps | null>(null);\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    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      if (props.order === 'sorted') {\n        chartData.sort((a: ChartDataPoint, b: ChartDataPoint) => {\n          return b.data! - a.data!;\n        });\n      }\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(\n      data: ChartDataPoint,\n      id: string,\n      e: React.FocusEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\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      setRefSelected(targetElement!);\n    }\n\n    function _hoverCallback(\n      data: ChartDataPoint,\n      e: React.MouseEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): 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        setRefSelected(targetElement!);\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    /**\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.filter(d => d.data! >= 0));\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);\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) => {\n          _rootElem.current = rootElem;\n        }}\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}\n          positioning={{\n            target: refSelected,\n          }}\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\n            ref={(e: HTMLDivElement) => {\n              legendContainer.current = e;\n            }}\n            className={classes.legendContainer}\n          >\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';\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","Legends","useId","useFocusableGroup","ChartPopover","useImageExport","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","innerRadius","hideLabels","restProps","forwardedRef","props","chartContainerRef","_rootElem","legendsRef","_legendsRef","componentRef","hideLegend","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","useRef","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","refSelected","setRefSelected","isPopoverOpen","setPopoverOpen","prevPropsRef","useEffect","_fitParentContainer","current","prevProps","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","toLocaleString","_createLegends","chartData","order","sort","a","b","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","targetElement","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","legendContainerHeight","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","donutMarginVertical","outerRadius","Math","min","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","x","y","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","positioning","target","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/DonutChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CartesianChartProps, CartesianChartStyleProps } from '../CommonComponents/index';\nimport { ChartProps, ChartDataPoint, Chart } from './index';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\n\n/**\n * Donut Chart properties.\n * {@docCategory DonutChart}\n */\nexport interface DonutChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: ChartProps;\n\n  /**\n   * inner radius for donut size\n   */\n  innerRadius?: number;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: DonutChartStyles;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSXElement | undefined;\n\n  /**\n   * Define a custom callout props override\n   */\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   * @default false\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   * @default true\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<Chart>;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Rendering order of the legend\n   * @default 'default'\n   * 'default' - as per data provided\n   * 'sorted' - in descending order of value\n   */\n  order?: 'default' | 'sorted';\n}\n\n/**\n * Donut Chart style properties\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Donut Chart styles\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: string;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: string;\n  /**\n   * Style for the legend container.\n   */\n  legendContainer: string;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CartesianChartProps, CartesianChartStyleProps } from '../CommonComponents/index';\nimport { ChartProps, ChartDataPoint, Chart } from './index';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\n\n/**\n * Donut Chart properties.\n * {@docCategory DonutChart}\n */\nexport interface DonutChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: ChartProps;\n\n  /**\n   * inner radius for donut size\n   */\n  innerRadius?: number;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: DonutChartStyles;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSXElement | undefined;\n\n  /**\n   * Define a custom callout props override\n   */\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   * @default false\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   * @default true\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Rendering order of the legend\n   * @default 'default'\n   * 'default' - as per data provided\n   * 'sorted' - in descending order of value\n   */\n  order?: 'default' | 'sorted';\n}\n\n/**\n * Donut Chart style properties\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Donut Chart styles\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: string;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: string;\n  /**\n   * Style for the legend container.\n   */\n  legendContainer: string;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/DonutChart/Pie/Pie.js

@@ -56,9 +56,11 @@ const TEXT_PADDING = 5;
         });
     }
     const { data } = props;
-    const focusData = pieForFocusRing(data.map((d)=>d.data));
+    // Filter out data points with value 0 to avoid gaps in the donut chart
+    const filteredData = data.filter((d)=>d.data !== 0);
+    const focusData = pieForFocusRing(filteredData.map((d)=>d.data));
     const piechart = d3Pie().sort(null)// eslint-disable-next-line @typescript-eslint/no-explicit-any
-    .value((d)=>d.data).padAngle(0.02)(data);
+    .value((d)=>d.data).padAngle(0.02)(filteredData);
     const translate = `translate(${props.width / 2}, ${props.height / 2})`;
     _totalValue = _computeTotalValue();
     return /*#__PURE__*/ React.createElement("g", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/Pie/Pie.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/jsx-no-bind */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { pie as d3Pie } from 'd3-shape';\nimport { PieProps } from './index';\nimport { Arc } from '../Arc/index';\nimport { ChartDataPoint } from '../index';\nimport { usePieStyles } from './usePieStyles.styles';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\nconst TEXT_PADDING: number = 5;\n\n// Create a Pie within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Pie component within Donut Chart.\n * {@docCategory PieDonutChart}\n */\nexport const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivElement, PieProps>(\n  (props, forwardedRef) => {\n    React.useEffect(() => {\n      wrapTextInsideDonut(classes.insideDonutString, props.innerRadius! * 2 - TEXT_PADDING);\n    }, []);\n\n    let _totalValue: number;\n    const classes = usePieStyles(props);\n    const pieForFocusRing = d3Pie()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0);\n\n    function _focusCallback(\n      data: ChartDataPoint,\n      id: string,\n      e: React.FocusEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\n      props.onFocusCallback!(data, id, e, targetElement);\n    }\n\n    function _hoverCallback(\n      data: ChartDataPoint,\n      e: React.MouseEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\n      props.hoverOnCallback!(data, e, targetElement);\n    }\n\n    function _computeTotalValue() {\n      let totalValue = 0;\n      props.data.forEach((arc: ChartDataPoint) => {\n        totalValue += arc.data!;\n      });\n      return totalValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function arcGenerator(\n      d: any,\n      i: number,\n      focusData: any,\n      href?: string,\n    ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n    JSXElement {\n      const color = d && d.data && d.data.color;\n      return (\n        <Arc\n          key={i}\n          data={d}\n          focusData={focusData}\n          innerRadius={props.innerRadius}\n          outerRadius={props.outerRadius}\n          color={color!}\n          onFocusCallback={_focusCallback}\n          hoverOnCallback={_hoverCallback}\n          onBlurCallback={props.onBlurCallback}\n          hoverLeaveCallback={props.hoverLeaveCallback}\n          uniqText={props.uniqText}\n          activeArc={props.activeArc}\n          href={href}\n          calloutId={props.calloutId}\n          valueInsideDonut={props.valueInsideDonut}\n          focusedArcId={props.focusedArcId}\n          showLabelsInPercent={props.showLabelsInPercent}\n          totalValue={_totalValue}\n          hideLabels={props.hideLabels}\n        />\n      );\n    }\n\n    const { data } = props;\n    const focusData = pieForFocusRing(data.map(d => d.data!));\n\n    const piechart = d3Pie<ChartDataPoint>()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0.02)(data);\n    const translate = `translate(${props.width / 2}, ${props.height / 2})`;\n\n    _totalValue = _computeTotalValue();\n\n    return (\n      <g transform={translate}>\n        {piechart.map((d: any, i: number) => arcGenerator(d, i, focusData[i], props.href))}\n        {props.valueInsideDonut && (\n          <text y={5} textAnchor=\"middle\" dominantBaseline=\"middle\" className={classes.insideDonutString}>\n            {props.valueInsideDonut}\n          </text>\n        )}\n      </g>\n    );\n  },\n);\nPie.displayName = 'Pie';\n"],"names":["React","pie","d3Pie","Arc","usePieStyles","wrapTextInsideDonut","TEXT_PADDING","Pie","forwardRef","props","forwardedRef","useEffect","classes","insideDonutString","innerRadius","_totalValue","pieForFocusRing","sort","value","d","data","padAngle","_focusCallback","id","e","targetElement","onFocusCallback","_hoverCallback","hoverOnCallback","_computeTotalValue","totalValue","forEach","arc","arcGenerator","i","focusData","href","color","key","outerRadius","onBlurCallback","hoverLeaveCallback","uniqText","activeArc","calloutId","valueInsideDonut","focusedArcId","showLabelsInPercent","hideLabels","map","piechart","translate","width","height","g","transform","text","y","textAnchor","dominantBaseline","className","displayName"],"mappings":"AAAA;AAEA,8CAA8C,GAC9C,oCAAoC,GACpC,qDAAqD,GACrD,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAOC,KAAK,QAAQ,WAAW;AAExC,SAASC,GAAG,QAAQ,eAAe;AAEnC,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,MAAMC,eAAuB;AAE7B,wGAAwG;AACxG;;;CAGC,GACD,OAAO,MAAMC,oBAAyCP,MAAMQ,UAAU,CACpE,CAACC,OAAOC;IACNV,MAAMW,SAAS,CAAC;QACdN,oBAAoBO,QAAQC,iBAAiB,EAAEJ,MAAMK,WAAW,GAAI,IAAIR;IAC1E,GAAG,EAAE;IAEL,IAAIS;IACJ,MAAMH,UAAUR,aAAaK;IAC7B,MAAMO,kBAAkBd,QACrBe,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC;IAEZ,SAASC,eACPF,IAAoB,EACpBG,EAAU,EACVC,CAAmC,EACnCC,aAAkC;QAElChB,MAAMiB,eAAe,CAAEN,MAAMG,IAAIC,GAAGC;IACtC;IAEA,SAASE,eACPP,IAAoB,EACpBI,CAAmC,EACnCC,aAAkC;QAElChB,MAAMmB,eAAe,CAAER,MAAMI,GAAGC;IAClC;IAEA,SAASI;QACP,IAAIC,aAAa;QACjBrB,MAAMW,IAAI,CAACW,OAAO,CAAC,CAACC;YAClBF,cAAcE,IAAIZ,IAAI;QACxB;QACA,OAAOU;IACT;IAEA,8DAA8D;IAC9D,SAASG,aACPd,CAAM,EACNe,CAAS,EACTC,SAAc,EACdC,IAAa;QAGb,MAAMC,QAAQlB,KAAKA,EAAEC,IAAI,IAAID,EAAEC,IAAI,CAACiB,KAAK;QACzC,qBACE,oBAAClC;YACCmC,KAAKJ;YACLd,MAAMD;YACNgB,WAAWA;YACXrB,aAAaL,MAAMK,WAAW;YAC9ByB,aAAa9B,MAAM8B,WAAW;YAC9BF,OAAOA;YACPX,iBAAiBJ;YACjBM,iBAAiBD;YACjBa,gBAAgB/B,MAAM+B,cAAc;YACpCC,oBAAoBhC,MAAMgC,kBAAkB;YAC5CC,UAAUjC,MAAMiC,QAAQ;YACxBC,WAAWlC,MAAMkC,SAAS;YAC1BP,MAAMA;YACNQ,WAAWnC,MAAMmC,SAAS;YAC1BC,kBAAkBpC,MAAMoC,gBAAgB;YACxCC,cAAcrC,MAAMqC,YAAY;YAChCC,qBAAqBtC,MAAMsC,mBAAmB;YAC9CjB,YAAYf;YACZiC,YAAYvC,MAAMuC,UAAU;;IAGlC;IAEA,MAAM,EAAE5B,IAAI,EAAE,GAAGX;IACjB,MAAM0B,YAAYnB,gBAAgBI,KAAK6B,GAAG,CAAC9B,CAAAA,IAAKA,EAAEC,IAAI;IAEtD,MAAM8B,WAAWhD,QACde,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC,MAAMD;IAClB,MAAM+B,YAAY,CAAC,UAAU,EAAE1C,MAAM2C,KAAK,GAAG,EAAE,EAAE,EAAE3C,MAAM4C,MAAM,GAAG,EAAE,CAAC,CAAC;IAEtEtC,cAAcc;IAEd,qBACE,oBAACyB;QAAEC,WAAWJ;OACXD,SAASD,GAAG,CAAC,CAAC9B,GAAQe,IAAcD,aAAad,GAAGe,GAAGC,SAAS,CAACD,EAAE,EAAEzB,MAAM2B,IAAI,IAC/E3B,MAAMoC,gBAAgB,kBACrB,oBAACW;QAAKC,GAAG;QAAGC,YAAW;QAASC,kBAAiB;QAASC,WAAWhD,QAAQC,iBAAiB;OAC3FJ,MAAMoC,gBAAgB;AAKjC,GACA;AACFtC,IAAIsD,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/DonutChart/Pie/Pie.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/jsx-no-bind */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { pie as d3Pie } from 'd3-shape';\nimport { PieProps } from './index';\nimport { Arc } from '../Arc/index';\nimport { ChartDataPoint } from '../index';\nimport { usePieStyles } from './usePieStyles.styles';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\nconst TEXT_PADDING: number = 5;\n\n// Create a Pie within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Pie component within Donut Chart.\n * {@docCategory PieDonutChart}\n */\nexport const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivElement, PieProps>(\n  (props, forwardedRef) => {\n    React.useEffect(() => {\n      wrapTextInsideDonut(classes.insideDonutString, props.innerRadius! * 2 - TEXT_PADDING);\n    }, []);\n\n    let _totalValue: number;\n    const classes = usePieStyles(props);\n    const pieForFocusRing = d3Pie()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0);\n\n    function _focusCallback(\n      data: ChartDataPoint,\n      id: string,\n      e: React.FocusEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\n      props.onFocusCallback!(data, id, e, targetElement);\n    }\n\n    function _hoverCallback(\n      data: ChartDataPoint,\n      e: React.MouseEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\n      props.hoverOnCallback!(data, e, targetElement);\n    }\n\n    function _computeTotalValue() {\n      let totalValue = 0;\n      props.data.forEach((arc: ChartDataPoint) => {\n        totalValue += arc.data!;\n      });\n      return totalValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function arcGenerator(d: any, i: number, focusData: any, href?: string): JSXElement {\n      const color = d && d.data && d.data.color;\n      return (\n        <Arc\n          key={i}\n          data={d}\n          focusData={focusData}\n          innerRadius={props.innerRadius}\n          outerRadius={props.outerRadius}\n          color={color!}\n          onFocusCallback={_focusCallback}\n          hoverOnCallback={_hoverCallback}\n          onBlurCallback={props.onBlurCallback}\n          hoverLeaveCallback={props.hoverLeaveCallback}\n          uniqText={props.uniqText}\n          activeArc={props.activeArc}\n          href={href}\n          calloutId={props.calloutId}\n          valueInsideDonut={props.valueInsideDonut}\n          focusedArcId={props.focusedArcId}\n          showLabelsInPercent={props.showLabelsInPercent}\n          totalValue={_totalValue}\n          hideLabels={props.hideLabels}\n        />\n      );\n    }\n\n    const { data } = props;\n\n    // Filter out data points with value 0 to avoid gaps in the donut chart\n    const filteredData = data.filter((d: ChartDataPoint) => d.data !== 0);\n\n    const focusData = pieForFocusRing(filteredData.map(d => d.data!));\n\n    const piechart = d3Pie<ChartDataPoint>()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0.02)(filteredData);\n    const translate = `translate(${props.width / 2}, ${props.height / 2})`;\n\n    _totalValue = _computeTotalValue();\n\n    return (\n      <g transform={translate}>\n        {piechart.map((d: any, i: number) => arcGenerator(d, i, focusData[i], props.href))}\n        {props.valueInsideDonut && (\n          <text y={5} textAnchor=\"middle\" dominantBaseline=\"middle\" className={classes.insideDonutString}>\n            {props.valueInsideDonut}\n          </text>\n        )}\n      </g>\n    );\n  },\n);\nPie.displayName = 'Pie';\n"],"names":["React","pie","d3Pie","Arc","usePieStyles","wrapTextInsideDonut","TEXT_PADDING","Pie","forwardRef","props","forwardedRef","useEffect","classes","insideDonutString","innerRadius","_totalValue","pieForFocusRing","sort","value","d","data","padAngle","_focusCallback","id","e","targetElement","onFocusCallback","_hoverCallback","hoverOnCallback","_computeTotalValue","totalValue","forEach","arc","arcGenerator","i","focusData","href","color","key","outerRadius","onBlurCallback","hoverLeaveCallback","uniqText","activeArc","calloutId","valueInsideDonut","focusedArcId","showLabelsInPercent","hideLabels","filteredData","filter","map","piechart","translate","width","height","g","transform","text","y","textAnchor","dominantBaseline","className","displayName"],"mappings":"AAAA;AAEA,8CAA8C,GAC9C,oCAAoC,GACpC,qDAAqD,GACrD,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAOC,KAAK,QAAQ,WAAW;AAExC,SAASC,GAAG,QAAQ,eAAe;AAEnC,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,MAAMC,eAAuB;AAE7B,wGAAwG;AACxG;;;CAGC,GACD,OAAO,MAAMC,oBAAyCP,MAAMQ,UAAU,CACpE,CAACC,OAAOC;IACNV,MAAMW,SAAS,CAAC;QACdN,oBAAoBO,QAAQC,iBAAiB,EAAEJ,MAAMK,WAAW,GAAI,IAAIR;IAC1E,GAAG,EAAE;IAEL,IAAIS;IACJ,MAAMH,UAAUR,aAAaK;IAC7B,MAAMO,kBAAkBd,QACrBe,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC;IAEZ,SAASC,eACPF,IAAoB,EACpBG,EAAU,EACVC,CAAmC,EACnCC,aAAkC;QAElChB,MAAMiB,eAAe,CAAEN,MAAMG,IAAIC,GAAGC;IACtC;IAEA,SAASE,eACPP,IAAoB,EACpBI,CAAmC,EACnCC,aAAkC;QAElChB,MAAMmB,eAAe,CAAER,MAAMI,GAAGC;IAClC;IAEA,SAASI;QACP,IAAIC,aAAa;QACjBrB,MAAMW,IAAI,CAACW,OAAO,CAAC,CAACC;YAClBF,cAAcE,IAAIZ,IAAI;QACxB;QACA,OAAOU;IACT;IAEA,8DAA8D;IAC9D,SAASG,aAAad,CAAM,EAAEe,CAAS,EAAEC,SAAc,EAAEC,IAAa;QACpE,MAAMC,QAAQlB,KAAKA,EAAEC,IAAI,IAAID,EAAEC,IAAI,CAACiB,KAAK;QACzC,qBACE,oBAAClC;YACCmC,KAAKJ;YACLd,MAAMD;YACNgB,WAAWA;YACXrB,aAAaL,MAAMK,WAAW;YAC9ByB,aAAa9B,MAAM8B,WAAW;YAC9BF,OAAOA;YACPX,iBAAiBJ;YACjBM,iBAAiBD;YACjBa,gBAAgB/B,MAAM+B,cAAc;YACpCC,oBAAoBhC,MAAMgC,kBAAkB;YAC5CC,UAAUjC,MAAMiC,QAAQ;YACxBC,WAAWlC,MAAMkC,SAAS;YAC1BP,MAAMA;YACNQ,WAAWnC,MAAMmC,SAAS;YAC1BC,kBAAkBpC,MAAMoC,gBAAgB;YACxCC,cAAcrC,MAAMqC,YAAY;YAChCC,qBAAqBtC,MAAMsC,mBAAmB;YAC9CjB,YAAYf;YACZiC,YAAYvC,MAAMuC,UAAU;;IAGlC;IAEA,MAAM,EAAE5B,IAAI,EAAE,GAAGX;IAEjB,uEAAuE;IACvE,MAAMwC,eAAe7B,KAAK8B,MAAM,CAAC,CAAC/B,IAAsBA,EAAEC,IAAI,KAAK;IAEnE,MAAMe,YAAYnB,gBAAgBiC,aAAaE,GAAG,CAAChC,CAAAA,IAAKA,EAAEC,IAAI;IAE9D,MAAMgC,WAAWlD,QACde,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC,MAAM4B;IAClB,MAAMI,YAAY,CAAC,UAAU,EAAE5C,MAAM6C,KAAK,GAAG,EAAE,EAAE,EAAE7C,MAAM8C,MAAM,GAAG,EAAE,CAAC,CAAC;IAEtExC,cAAcc;IAEd,qBACE,oBAAC2B;QAAEC,WAAWJ;OACXD,SAASD,GAAG,CAAC,CAAChC,GAAQe,IAAcD,aAAad,GAAGe,GAAGC,SAAS,CAACD,EAAE,EAAEzB,MAAM2B,IAAI,IAC/E3B,MAAMoC,gBAAgB,kBACrB,oBAACa;QAAKC,GAAG;QAAGC,YAAW;QAASC,kBAAiB;QAASC,WAAWlD,QAAQC,iBAAiB;OAC3FJ,MAAMoC,gBAAgB;AAKjC,GACA;AACFtC,IAAIwD,WAAW,GAAG"}

package/lib/components/FunnelChart/FunnelChart.js

@@ -9,7 +9,7 @@ import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { getContrastTextColor } from '../../utilities/colors';
 import { useFunnelChartStyles } from './useFunnelChartStyles.styles';
 import { getHorizontalFunnelSegmentGeometry, getVerticalFunnelSegmentGeometry, getSegmentTextProps, getStackedHorizontalFunnelSegmentGeometry, getStackedVerticalFunnelSegmentGeometry } from './funnelGeometry';
-import { toImage } from '../../utilities/image-export-utils';
+import { useImageExport } from '../../utilities/hooks';
 export const FunnelChart = /*#__PURE__*/ React.forwardRef(({ orientation = 'vertical', ...restProps }, forwardedRef)=>{
     var _props_legendProps;
     const props = {
@@ -23,9 +23,8 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef(({ orientation = 'vert
     const [selectedLegends, setSelectedLegends] = React.useState([]);
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
     const [refSelected, setRefSelected] = React.useState(null);
-    const chartContainerRef = React.useRef(null);
     const isStacked = isStackedFunnelData(props.data);
-    const _legendsRef = React.useRef(null);
+    const { chartContainerRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend, false);
     React.useEffect(()=>{
         var _props_legendProps;
         if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) {
@@ -34,12 +33,6 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef(({ orientation = 'vert
     }, [
         (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends
     ]);
-    React.useImperativeHandle(props.componentRef, ()=>({
-            toImage: (opts)=>{
-                var _legendsRef_current;
-                return toImage(chartContainerRef.current, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, isRTL, opts);
-            }
-        }), []);
     function _handleHover(data, mouseEvent, targetElement) {
         mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
         setCalloutData(data);
@@ -263,7 +256,6 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef(({ orientation = 'vert
         const maxTotal = Math.max(...totals);
         const funnelWidth = containerWidth;
         const funnelHeight = containerHeight * 0.8;
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         const paths = [];
         const geometryParams = {
             stages,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FunnelChart/FunnelChart.tsx"],"sourcesContent":["'use client';\n\nimport * 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>(({ orientation = 'vertical', ...restProps }, forwardedRef) => {\n  const props = { orientation, ...restProps };\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 [isPopoverOpen, setPopoverOpen] = React.useState(false);\n  const [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\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(\n    data: FunnelChartDataPoint,\n    mouseEvent: React.MouseEvent<SVGElement>,\n    targetElement?: HTMLElement | null,\n  ) {\n    mouseEvent?.persist();\n    setCalloutData(data);\n    setRefSelected(targetElement!);\n    setPopoverOpen(true);\n  }\n\n  function _handleFocus(\n    data: FunnelChartDataPoint,\n    focusEvent: React.FocusEvent<SVGPathElement>,\n    targetElement?: HTMLElement | null,\n  ) {\n    focusEvent?.persist();\n    setCalloutData(data);\n    setRefSelected(targetElement!);\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    targetElement?: HTMLElement | null,\n  ) {\n    mouseEvent?.persist();\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setRefSelected(targetElement!);\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    targetElement?: HTMLElement | null,\n  ) {\n    focusEvent?.persist();\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setRefSelected(targetElement!);\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    segmentId?: string,\n  ) {\n    const targetElement = document.getElementById(segmentId!);\n    if ('subValue' in data) {\n      return {\n        culture: props.culture,\n        onMouseOver:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) =>\n                _handleStackedHover(data.stage, data.subValue, event, targetElement)\n            : undefined,\n        onMouseMove:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) =>\n                _handleStackedHover(data.stage, data.subValue, event, targetElement)\n            : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) =>\n          _handleStackedFocus(data.stage, data.subValue, event, targetElement),\n        onBlur: () => _handleMouseOut(),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    } else {\n      return {\n        culture: props.culture,\n        onMouseOver:\n          opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event, targetElement) : undefined,\n        onMouseMove:\n          opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event, targetElement) : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event, targetElement),\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 segmentId = `funnel-segment-${key}`;\n    const eventHandlers = _getEventHandlerProps(data, opacity, segmentId);\n    const textColor = getContrastTextColor(fill);\n    return (\n      <g key={key}>\n        <path id={segmentId} 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  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          positioning={{\n            target: refSelected,\n          }}\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"],"names":["React","useId","useRtl","Legends","useFocusableGroup","ChartPopover","formatToLocaleString","getContrastTextColor","useFunnelChartStyles","getHorizontalFunnelSegmentGeometry","getVerticalFunnelSegmentGeometry","getSegmentTextProps","getStackedHorizontalFunnelSegmentGeometry","getStackedVerticalFunnelSegmentGeometry","toImage","FunnelChart","forwardRef","orientation","restProps","forwardedRef","props","_emptyChartId","isRTL","hoveredStage","setHoveredStage","useState","calloutData","setCalloutData","selectedLegends","setSelectedLegends","isPopoverOpen","setPopoverOpen","refSelected","setRefSelected","chartContainerRef","useRef","isStacked","isStackedFunnelData","data","_legendsRef","useEffect","legendProps","useImperativeHandle","componentRef","opts","current","toSVG","_handleHover","mouseEvent","targetElement","persist","_handleFocus","focusEvent","_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","segmentId","document","getElementById","culture","onMouseOver","undefined","onMouseMove","onFocus","onBlur","onMouseOut","_renderSegmentText","show","x","y","textColor","textElement","text","funnelWidth","textAnchor","alignmentBaseline","fill","toString","g","transform","_renderFunnelSegment","key","pathD","textProps","tabIndex","eventHandlers","path","id","d","_createFunnel","containerHeight","containerWidth","funnelHeight","map","i","geometryProps","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","classes","calloutProps","hoverXValue","YValue","width","height","funnelMarginTop","funnelOffsetX","focusAttributes","ref","className","root","svg","chart","role","aria-label","chartTitle","XValue","yCalloutValue","positioning","target","isCartesian","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,4BAA4B;AAElD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAAiBC,OAAO,QAAyB,mBAAmB;AACpE,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,YAAY,QAAQ,mCAAmC;AAChE,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SACEC,kCAAkC,EAClCC,gCAAgC,EAChCC,mBAAmB,EACnBC,yCAAyC,EACzCC,uCAAuC,QAClC,mBAAmB;AAE1B,SAASC,OAAO,QAAQ,qCAAqC;AAE7D,OAAO,MAAMC,4BAAyDf,MAAMgB,UAAU,CAGpF,CAAC,EAAEC,cAAc,UAAU,EAAE,GAAGC,WAAW,EAAEC;QAkBzCC;IAjBJ,MAAMA,QAAQ;QAAEH;QAAa,GAAGC,SAAS;IAAC;IAC1C,MAAMG,gBAAwBpB,MAAM;IACpC,MAAMqB,QAAQpB;IAEd,MAAM,CAACqB,cAAcC,gBAAgB,GAAGxB,MAAMyB,QAAQ,CAAgB;IACtE,MAAM,CAACC,aAAaC,eAAe,GAAG3B,MAAMyB,QAAQ,CAA8B;IAClF,MAAM,CAACG,iBAAiBC,mBAAmB,GAAG7B,MAAMyB,QAAQ,CAAW,EAAE;IACzE,MAAM,CAACK,eAAeC,eAAe,GAAG/B,MAAMyB,QAAQ,CAAC;IACvD,MAAM,CAACO,aAAaC,eAAe,GAAGjC,MAAMyB,QAAQ,CAAqB;IACzE,MAAMS,oBAAoBlC,MAAMmC,MAAM,CAAwB;IAC9D,MAAMC,YAAYC,oBAAoBjB,MAAMkB,IAAI;IAChD,MAAMC,cAAcvC,MAAMmC,MAAM,CAAkB;IAElDnC,MAAMwC,SAAS,CAAC;YACVpB;QAAJ,KAAIA,qBAAAA,MAAMqB,WAAW,cAAjBrB,yCAAAA,mBAAmBQ,eAAe,EAAE;YACtCC,mBAAmBT,MAAMqB,WAAW,CAACb,eAAe;QACtD;IACF,GAAG;SAACR,qBAAAA,MAAMqB,WAAW,cAAjBrB,yCAAAA,mBAAmBQ,eAAe;KAAC;IAEvC5B,MAAM0C,mBAAmB,CACvBtB,MAAMuB,YAAY,EAClB,IAAO,CAAA;YACL7B,SAAS,CAAC8B;oBACkCL;gBAA1C,OAAOzB,QAAQoB,kBAAkBW,OAAO,GAAEN,sBAAAA,YAAYM,OAAO,cAAnBN,0CAAAA,oBAAqBO,KAAK,EAAExB,OAAOsB;YAC/E;QACF,CAAA,GACA,EAAE;IAGJ,SAASG,aACPT,IAA0B,EAC1BU,UAAwC,EACxCC,aAAkC;QAElCD,uBAAAA,iCAAAA,WAAYE,OAAO;QACnBvB,eAAeW;QACfL,eAAegB;QACflB,eAAe;IACjB;IAEA,SAASoB,aACPb,IAA0B,EAC1Bc,UAA4C,EAC5CH,aAAkC;QAElCG,uBAAAA,iCAAAA,WAAYF,OAAO;QACnBvB,eAAeW;QACfL,eAAegB;QACflB,eAAe;IACjB;IAEA,SAASsB,oBACPC,KAAa,EACbC,QAA4D,EAC5DP,UAAwC,EACxCC,aAAkC;QAElCD,uBAAAA,iCAAAA,WAAYE,OAAO;QACnBvB,eAAe;YACb2B;YACAE,OAAOD,SAASC,KAAK;YACrBC,OAAOF,SAASE,KAAK;YACrBC,UAAUH,SAASG,QAAQ;QAC7B;QACAzB,eAAegB;QACflB,eAAe;IACjB;IAEA,SAAS4B,oBACPL,KAAa,EACbC,QAA4D,EAC5DH,UAA4C,EAC5CH,aAAkC;QAElCG,uBAAAA,iCAAAA,WAAYF,OAAO;QACnBvB,eAAe;YACb2B;YACAE,OAAOD,SAASC,KAAK;YACrBC,OAAOF,SAASE,KAAK;YACrBC,UAAUH,SAASG,QAAQ;QAC7B;QACAzB,eAAegB;QACflB,eAAe;IACjB;IAEA,SAAS6B;QACPpC,gBAAgB;QAChBO,eAAe;QACfJ,eAAe;IACjB;IAEA,SAASkC,yBACPC,eAAyB,EACzBC,KAA0C,EAC1CC,aAAsB;YAElB5C,oBAMAA;QANJ,KAAIA,qBAAAA,MAAMqB,WAAW,cAAjBrB,yCAAAA,mBAAmB6C,wBAAwB,EAAE;YAC/CpC,mBAAmBiC;QACrB,OAAO;YACLjC,mBAAmBiC,gBAAgBI,KAAK,CAAC,CAAC;QAC5C;QAEA,KAAI9C,sBAAAA,MAAMqB,WAAW,cAAjBrB,0CAAAA,oBAAmB+C,QAAQ,EAAE;YAC/B/C,MAAMqB,WAAW,CAAC0B,QAAQ,CAACL,iBAAiBC,OAAOC;QACrD;IACF;IAEA,MAAMI,mCAAmCpE,MAAMqE,WAAW,CAACR,0BAA0B;QAACzC,MAAMqB,WAAW;KAAC;IAExG,SAAS6B;QACP,OAAO1C,gBAAgB2C,MAAM,GAAG,IAAI3C,kBAAkBL,eAAe;YAACA;SAAa,GAAG,EAAE;IAC1F;IAEA,SAASiD,kBAAkBC,MAAc;QACvC,OAAOH,uBAAuBI,QAAQ,CAACD;IACzC;IAEA,SAASE;QACP,OAAOL,uBAAuBC,MAAM,KAAK;IAC3C;IAEA,SAASK,sBACPtC,IAA4G,EAC5GuC,OAAgB,EAChBC,SAAkB;QAElB,MAAM7B,gBAAgB8B,SAASC,cAAc,CAACF;QAC9C,IAAI,cAAcxC,MAAM;YACtB,OAAO;gBACL2C,SAAS7D,MAAM6D,OAAO;gBACtBC,aACEL,WAAW,IACP,CAACd,QACCV,oBAAoBf,KAAKgB,KAAK,EAAEhB,KAAKiB,QAAQ,EAAEQ,OAAOd,iBACxDkC;gBACNC,aACEP,WAAW,IACP,CAACd,QACCV,oBAAoBf,KAAKgB,KAAK,EAAEhB,KAAKiB,QAAQ,EAAEQ,OAAOd,iBACxDkC;gBACNE,SAAS,CAACtB,QACRJ,oBAAoBrB,KAAKgB,KAAK,EAAEhB,KAAKiB,QAAQ,EAAEQ,OAAOd;gBACxDqC,QAAQ,IAAM1B;gBACd2B,YAAY,IAAM3B;YACpB;QACF,OAAO;YACL,OAAO;gBACLqB,SAAS7D,MAAM6D,OAAO;gBACtBC,aACEL,WAAW,IAAI,CAACd,QAAwChB,aAAaT,MAAMyB,OAAOd,iBAAiBkC;gBACrGC,aACEP,WAAW,IAAI,CAACd,QAAwChB,aAAaT,MAAMyB,OAAOd,iBAAiBkC;gBACrGE,SAAS,CAACtB,QAA4CZ,aAAab,MAAMyB,OAAOd;gBAChFqC,QAAQ,IAAM1B;gBACd2B,YAAY,IAAM3B;YACpB;QACF;IACF;IAEA,SAAS4B,mBAAmB,EAC1BC,IAAI,EACJC,CAAC,EACDC,CAAC,EACDnC,KAAK,EACLoC,SAAS,EACTf,OAAO,EAQR;QACC,IAAI,CAACY,MAAM;YACT,OAAO;QACT;QAEA,MAAMI,4BACJ,oBAACC;YACCJ,GAAGpE,QAAQyE,cAAcL,IAAIA;YAC7BC,GAAGA;YACHd,SAASA;YACTmB,YAAW;YACXC,mBAAkB;YAClBC,MAAMN;WAELtF,qBAAqBkD,MAAM2C,QAAQ,IAAI/E,MAAM6D,OAAO;QAIzD,IAAI3D,OAAO;YACT,qBAAO,oBAAC8E;gBAAEC,WAAW,CAAC,sBAAsB,EAAE,CAACN,YAAY,GAAG,CAAC;eAAGF;QACpE;QACA,OAAOA;IACT;IAEA,SAASS,qBAAqB,EAC5BC,GAAG,EACHC,KAAK,EACLN,IAAI,EACJrB,OAAO,EACP4B,SAAS,EACTnE,IAAI,EACJoE,QAAQ,EAcT;QACC,MAAM5B,YAAY,CAAC,eAAe,EAAEyB,KAAK;QACzC,MAAMI,gBAAgB/B,sBAAsBtC,MAAMuC,SAASC;QAC3D,MAAMc,YAAYrF,qBAAqB2F;QACvC,qBACE,oBAACE;YAAEG,KAAKA;yBACN,oBAACK;YAAKC,IAAI/B;YAAWgC,GAAGN;YAAON,MAAMA;YAAMrB,SAASA;YAAU,GAAG8B,aAAa;YAAED,UAAUA;YACzFD,2BAAa,oBAACL,KAAMO,eAAgBnB,mBAAmB;YAAE,GAAGiB,SAAS;YAAEb;YAAWf;QAAQ;IAGjG;IAEA,SAASkC,cACPC,eAAuB,EACvBC,cAAsB;QAGtB,MAAM,EAAE3E,IAAI,EAAE,GAAGlB;QACjB,MAAM2E,cAAckB;QACpB,MAAMC,eAAeF,kBAAkB;QAEvC,OAAO1E,KAAK6E,GAAG,CAAC,CAACL,GAAGM;YAClB,MAAMC,gBACJjG,MAAMH,WAAW,KAAK,aAClBP,iCAAiC;gBAAEoG;gBAAGM;gBAAG9E;gBAAMyD;gBAAamB;gBAAc5F;YAAM,KAChFb,mCAAmC;gBAAEqG;gBAAGM;gBAAG9E;gBAAMyD;gBAAamB;gBAAc5F;YAAM;YAExF,MAAM,EAAEkF,KAAK,EAAEc,KAAK,EAAEC,KAAK,EAAEC,cAAc,EAAE,GAAGH;YAChD,MAAMI,eAAe;YACrB,MAAMC,oBAAoB9C,sBAAsBkC;YAChD,MAAML,YAAY9F,oBAAoB;gBACpC6G;gBACAC;gBACAH;gBACAC;gBACA/D,OAAOsD,EAAEtD,KAAK;gBACd,GAAGkE,iBAAiB;YACtB;YAEA,OAAOpB,qBAAqB;gBAC1BC,KAAKa;gBACLZ;gBACAN,MAAMY,EAAErD,KAAK;gBACboB,SAASL,kBAAkBsC,EAAExD,KAAK,KAAeqB,wBAAwB,IAAI;gBAC7E8B;gBACAnE,MAAMwE;gBACNJ,UAAUlC,kBAAkBsC,EAAExD,KAAK,KAAeqB,wBAAwB,IAAIQ;YAChF;QACF;IACF;IAEA,SAAS9C,oBAAoBC,IAA4B;QACvD,OAAOqF,MAAMC,OAAO,CAACtF,SAASA,KAAKuF,KAAK,CAACvE,CAAAA,QAASqE,MAAMC,OAAO,CAACtE,MAAMwE,SAAS;IACjF;IAEA,SAASC,sBACPzE,KAA2B,EAC3BC,QAA4D,EAC5DyE,UAAkB,EAClBC,aAAqB,EACrBC,cAOC;QAGD,sDAAsD;QACtD,MAAMC,sBAAsBD,eAAeE,MAAM,CAACjB,GAAG,CAACkB,CAAAA,IAAM,CAAA;gBAC1D,GAAGA,CAAC;gBACJP,WAAWO,EAAEP,SAAS,IAAI,EAAE;YAC9B,CAAA;QACA,MAAMQ,OACJlH,MAAMH,WAAW,KAAK,aAClBJ,wCAAwC;YACtC,GAAGqH,cAAc;YACjBE,QAAQD;YACRf,GAAGY;YACHO,GAAGN;QACL,KACArH,0CAA0C;YACxC,GAAGsH,cAAc;YACjBE,QAAQD;YACRf,GAAGY;YACHO,GAAGN;QACL;QAEN,MAAMR,eAAe;QACrB,MAAMC,oBAAoB9C,sBAAsB;YAAEtB,OAAOA,MAAMA,KAAK;YAAYC;QAAS;QACzF,MAAMkD,YAAY9F,oBAAoB;YACpC6G,gBAAgBc,KAAKd,cAAc;YACnCC;YACAH,OAAOgB,KAAKhB,KAAK;YACjBC,OAAOe,KAAKf,KAAK;YACjB/D,OAAOD,SAASC,KAAK;YACrB,GAAGkE,iBAAiB;QACtB;QAEA,OAAOpB,qBAAqB;YAC1BC,KAAK,GAAGyB,WAAW,CAAC,EAAEC,eAAe;YACrCzB,OAAO8B,KAAK9B,KAAK;YACjBN,MAAM3C,SAASE,KAAK;YACpBoB,SACE,AAACxC,oBAAoBjB,MAAMkB,IAAI,KAAKkC,kBAAkBjB,SAASG,QAAQ,KAAMiB,wBAAwB,IAAI;YAC3G8B;YACAnE,MAAM;gBAAEgB,OAAOA,MAAMA,KAAK;gBAAYC;YAAS;YAC/CmD,UAAUlC,kBAAkBjB,SAASG,QAAQ,KAAKiB,wBAAwB,IAAIQ;QAChF;IACF;IAEA,SAASqD,qBACPxB,eAAuB,EACvBC,cAAsB;QAGtB,MAAM,EAAE3E,IAAI,EAAE,GAAGlB;QAEjB,MAAMgH,SAAS9F;QACf,MAAMmG,SAASL,OAAOjB,GAAG,CAACkB,CAAAA;gBAAKA;gBAAAA;mBAAAA,CAAAA,sBAAAA,cAAAA,yBAAAA,eAAAA,EAAGP,SAAS,cAAZO,mCAAAA,aAAcK,MAAM,CAAC,CAACC,KAAKpF,WAAaoF,MAAMpF,SAASC,KAAK,EAAE,gBAA9D6E,iCAAAA,sBAAoE;;QACnG,MAAMO,WAAWC,KAAKC,GAAG,IAAIL;QAE7B,MAAM1C,cAAckB;QACpB,MAAMC,eAAeF,kBAAkB;QAEvC,4DAA4D;QAC5D,MAAM+B,QAAsB,EAAE;QAE9B,MAAMb,iBAAiB;YACrBE;YACAK;YACAG;YACA7C;YACAmB;YACA5F;QACF;QAEA,IAAK,IAAI8F,IAAI,GAAGA,IAAIgB,OAAO7D,MAAM,EAAE6C,IAAK;YACtC,MAAM4B,MAAMZ,MAAM,CAAChB,EAAE;gBACA4B;YAArB,IAAK,IAAIT,IAAI,GAAGA,IAAI,AAACS,CAAAA,CAAAA,iBAAAA,IAAIlB,SAAS,cAAbkB,4BAAAA,iBAAiB,EAAE,AAAD,EAAGzE,MAAM,EAAEgE,IAAK;oBAC3CS;gBAAV,MAAMC,KAAID,kBAAAA,IAAIlB,SAAS,cAAbkB,sCAAAA,eAAe,CAACT,EAAE;gBAC5B,IAAI,CAACU,GAAG;oBACN;gBACF;gBACAF,MAAMG,IAAI,CAACnB,sBAAsBiB,KAAKC,GAAG7B,GAAGmB,GAAGL;YACjD;QACF;QACA,OAAOa;IACT;IAEA,SAASI;QAEP,IAAI/H,MAAMgI,UAAU,EAAE;YACpB,qBAAO;QACT;QACA,IAAIC;QAEJ,IAAIjH,WAAW;YACb,4CAA4C;YAC5C,MAAMkH,cAAsC,CAAC;YAC7ClI,MAAMkB,IAAI,CAACiH,OAAO,CAAC,CAACjG;gBACjBA,CAAAA,MAAMwE,SAAS,IAAI,EAAE,AAAD,EAAGyB,OAAO,CAACC,CAAAA;oBAC9B,IAAI,CAAEA,CAAAA,IAAI9F,QAAQ,IAAI4F,WAAU,GAAI;wBAClCA,WAAW,CAACE,IAAI9F,QAAQ,CAAC,GAAG8F,IAAI/F,KAAK;oBACvC;gBACF;YACF;YACA4F,UAAUI,OAAOC,OAAO,CAACJ,aAAanC,GAAG,CAAC,CAAC,CAACzD,UAAUD,MAAM,GAAM,CAAA;oBAChEkG,OAAOjG;oBACPD;oBACAmG,aAAa,IAAMpI,gBAAgBkC;oBACnCmG,kBAAkB,IAAMrI,gBAAgB;gBAC1C,CAAA;QACF,OAAO;YACL6H,UAAUjI,MAAMkB,IAAI,CAAC6E,GAAG,CAAC,CAACL,IAA6B,CAAA;oBACrD6C,OAAO7C,EAAExD,KAAK;oBACdG,OAAOqD,EAAErD,KAAK;oBACdmG,aAAa,IAAMpI,gBAAgBsF,EAAExD,KAAK;oBAC1CuG,kBAAkB,IAAMrI,gBAAgB;gBAC1C,CAAA;QACF;QAEA,qBACE,oBAACsI;YAAIC,OAAO;gBAAEC,SAAS;gBAAQC,gBAAgB;YAAS;yBACtD,oBAAC9J;YACCkJ,SAASA;YACTa,eAAe;YACf/F,UAAUC;YACT,GAAGhD,MAAMqB,WAAW;YACrB0H,WAAW5H;;IAInB;IAEA,SAAS6H;QACP,OAAO,CAAEhJ,CAAAA,MAAMkB,IAAI,IAAIlB,MAAMkB,IAAI,CAACiC,MAAM,GAAG,CAAA;IAC7C;IAEA,MAAM8F,UAAU7J,qBAAqBY;IAErC,MAAMkJ,eAAkC;QACtC,GAAGlJ,MAAMkJ,YAAY;QACrB7G,KAAK,EAAE/B,wBAAAA,kCAAAA,YAAa+B,KAAK;QACzB8G,WAAW,EAAE7I,wBAAAA,kCAAAA,YAAa4B,KAAK;QAC/BkH,MAAM,EAAE9I,wBAAAA,kCAAAA,YAAa8B,KAAK;IAC5B;IAEA,MAAMiH,QAAQrJ,MAAMqJ,KAAK,IAAI;IAC7B,MAAMC,SAAStJ,MAAMsJ,MAAM,IAAI;IAE/B,MAAMC,kBAAkB;IACxB,MAAM5E,cAAc0E,QAAQ;IAC5B,MAAMG,gBAAgB,AAACH,CAAAA,QAAQ1E,WAAU,IAAK;IAC9C,MAAM8E,kBAAkBzK;IAExB,OAAO,CAACgK,gCACN,oBAACN;QAAIgB,KAAK5I;QAAmB6I,WAAWV,QAAQW,IAAI;QAAG,GAAGH,eAAe;QAAEd,OAAO;YAAEU;YAAOC;QAAO;qBAChG,oBAACO;QAAIR,OAAOA;QAAOC,QAAQA;QAAQK,WAAWV,QAAQa,KAAK;QAAEC,MAAM;QAAOC,cAAYhK,MAAMiK,UAAU;qBACpG,oBAACjF;QACCC,WACE/E,QACI,CAAC,UAAU,EAAEsJ,gBAAgB7E,YAAY,EAAE,EAAE4E,gBAAgB,aAAa,CAAC,GAC3E,CAAC,UAAU,EAAEC,cAAc,EAAE,EAAED,gBAAgB,CAAC,CAAC;OAGtDvI,YACGoG,qBAAqBkC,SAASC,iBAAiB5E,eAC/CgB,cAAc2D,SAASC,iBAAiB5E,gBAG/CjE,+BACC,oBAACzB;QACE,GAAGe,MAAMkJ,YAAY;QACtBgB,MAAM,EAAEhB,yBAAAA,mCAAAA,aAAcC,WAAW;QACjCgB,aAAa,EAAEjB,yBAAAA,mCAAAA,aAAcE,MAAM;QACnCvF,SAAS7D,MAAM6D,OAAO;QACtBuG,aAAa;YACXC,QAAQzJ;QACV;QACAF,eAAeA;QACf2B,KAAK,EAAE6G,yBAAAA,mCAAAA,aAAc7G,KAAK;QAC1BiI,aAAa;QAGhBvC,kCAGH,oBAACW;QAAIjD,IAAIxF;QAAe8J,MAAM;QAASpB,OAAO;YAAElF,SAAS;QAAI;QAAGuG,cAAY;;AAEhF,GAAG;AACHrK,YAAY4K,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/FunnelChart/FunnelChart.tsx"],"sourcesContent":["'use client';\n\nimport * 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 } 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 } from '../../index';\nimport { useImageExport } from '../../utilities/hooks';\n\nexport const FunnelChart: React.FunctionComponent<FunnelChartProps> = React.forwardRef<\n  HTMLDivElement,\n  FunnelChartProps\n>(({ orientation = 'vertical', ...restProps }, forwardedRef) => {\n  const props = { orientation, ...restProps };\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 [isPopoverOpen, setPopoverOpen] = React.useState(false);\n  const [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\n  const isStacked = isStackedFunnelData(props.data);\n  const { chartContainerRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend, false);\n\n  React.useEffect(() => {\n    if (props.legendProps?.selectedLegends) {\n      setSelectedLegends(props.legendProps.selectedLegends);\n    }\n  }, [props.legendProps?.selectedLegends]);\n\n  function _handleHover(\n    data: FunnelChartDataPoint,\n    mouseEvent: React.MouseEvent<SVGElement>,\n    targetElement?: HTMLElement | null,\n  ) {\n    mouseEvent?.persist();\n    setCalloutData(data);\n    setRefSelected(targetElement!);\n    setPopoverOpen(true);\n  }\n\n  function _handleFocus(\n    data: FunnelChartDataPoint,\n    focusEvent: React.FocusEvent<SVGPathElement>,\n    targetElement?: HTMLElement | null,\n  ) {\n    focusEvent?.persist();\n    setCalloutData(data);\n    setRefSelected(targetElement!);\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    targetElement?: HTMLElement | null,\n  ) {\n    mouseEvent?.persist();\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setRefSelected(targetElement!);\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    targetElement?: HTMLElement | null,\n  ) {\n    focusEvent?.persist();\n    setCalloutData({\n      stage,\n      value: subValue.value,\n      color: subValue.color,\n      category: subValue.category,\n    } as FunnelChartDataPoint);\n    setRefSelected(targetElement!);\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    segmentId?: string,\n  ) {\n    const targetElement = document.getElementById(segmentId!);\n    if ('subValue' in data) {\n      return {\n        culture: props.culture,\n        onMouseOver:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) =>\n                _handleStackedHover(data.stage, data.subValue, event, targetElement)\n            : undefined,\n        onMouseMove:\n          opacity == 1\n            ? (event: React.MouseEvent<SVGElement>) =>\n                _handleStackedHover(data.stage, data.subValue, event, targetElement)\n            : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) =>\n          _handleStackedFocus(data.stage, data.subValue, event, targetElement),\n        onBlur: () => _handleMouseOut(),\n        onMouseOut: () => _handleMouseOut(),\n      };\n    } else {\n      return {\n        culture: props.culture,\n        onMouseOver:\n          opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event, targetElement) : undefined,\n        onMouseMove:\n          opacity == 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event, targetElement) : undefined,\n        onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event, targetElement),\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 segmentId = `funnel-segment-${key}`;\n    const eventHandlers = _getEventHandlerProps(data, opacity, segmentId);\n    const textColor = getContrastTextColor(fill);\n    return (\n      <g key={key}>\n        <path id={segmentId} 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(containerHeight: number, containerWidth: number): 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  ): 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(containerHeight: number, containerWidth: number): 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    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(): 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  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          positioning={{\n            target: refSelected,\n          }}\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"],"names":["React","useId","useRtl","Legends","useFocusableGroup","ChartPopover","formatToLocaleString","getContrastTextColor","useFunnelChartStyles","getHorizontalFunnelSegmentGeometry","getVerticalFunnelSegmentGeometry","getSegmentTextProps","getStackedHorizontalFunnelSegmentGeometry","getStackedVerticalFunnelSegmentGeometry","useImageExport","FunnelChart","forwardRef","orientation","restProps","forwardedRef","props","_emptyChartId","isRTL","hoveredStage","setHoveredStage","useState","calloutData","setCalloutData","selectedLegends","setSelectedLegends","isPopoverOpen","setPopoverOpen","refSelected","setRefSelected","isStacked","isStackedFunnelData","data","chartContainerRef","legendsRef","_legendsRef","componentRef","hideLegend","useEffect","legendProps","_handleHover","mouseEvent","targetElement","persist","_handleFocus","focusEvent","_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","segmentId","document","getElementById","culture","onMouseOver","undefined","onMouseMove","onFocus","onBlur","onMouseOut","_renderSegmentText","show","x","y","textColor","textElement","text","funnelWidth","textAnchor","alignmentBaseline","fill","toString","g","transform","_renderFunnelSegment","key","pathD","textProps","tabIndex","eventHandlers","path","id","d","_createFunnel","containerHeight","containerWidth","funnelHeight","map","i","geometryProps","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","legends","categoryMap","forEach","sub","Object","entries","title","hoverAction","onMouseOutAction","div","style","display","justifyContent","centerLegends","legendRef","_isChartEmpty","classes","calloutProps","hoverXValue","YValue","width","height","funnelMarginTop","funnelOffsetX","focusAttributes","ref","className","root","svg","chart","role","aria-label","chartTitle","XValue","yCalloutValue","positioning","target","isCartesian","displayName"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FunnelChart/FunnelChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\n\n/**\n * Data point for funnel chart\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartDataPoint {\n  /**\n   * Stage name or identifier\n   */\n  stage: string | number;\n  /**\n   * Sub-values for stacked funnel charts\n   * Each sub-value represents a category within the stage\n   */\n  subValues?: Array<{ category: string; value: number; color: string }>;\n  /**\n   * Value for the stage (used for non-stacked funnel charts)\n   */\n  value?: number;\n  /**\n   * Color for the stage (used for non-stacked funnel charts)\n   */\n  color?: string;\n}\n\n/**\n * Funnel Chart component props\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartProps {\n  /**\n   * Data points for the funnel chart\n   */\n  data: FunnelChartDataPoint[];\n  /**\n   * Title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: FunnelChartStyles;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Reference to the chart component\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  componentRef?: React.RefObject<any>;\n\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n\n  /**\n   * Orientation of the funnel chart\n   * @defaultvalue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * Funnel Chart style properties\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartStyleProps {\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n  /**\n   * Width of the chart\n   */\n  chartWidth: number;\n  /**\n   * Height of the chart\n   */\n  chartHeight: number;\n}\n\n/**\n * Funnel Chart styles\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: string;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: string;\n\n  /**\n   * Styles for text elements\n   */\n  text?: string;\n\n  /**\n   * Styles for the callout root element\n   */\n  calloutContentRoot?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/FunnelChart/FunnelChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\nimport { Chart } from '../../types/index';\n\n/**\n * Data point for funnel chart\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartDataPoint {\n  /**\n   * Stage name or identifier\n   */\n  stage: string | number;\n  /**\n   * Sub-values for stacked funnel charts\n   * Each sub-value represents a category within the stage\n   */\n  subValues?: Array<{ category: string; value: number; color: string }>;\n  /**\n   * Value for the stage (used for non-stacked funnel charts)\n   */\n  value?: number;\n  /**\n   * Color for the stage (used for non-stacked funnel charts)\n   */\n  color?: string;\n}\n\n/**\n * Funnel Chart component props\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartProps {\n  /**\n   * Data points for the funnel chart\n   */\n  data: FunnelChartDataPoint[];\n  /**\n   * Title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: FunnelChartStyles;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Reference to the chart component\n   */\n  componentRef?: React.Ref<Chart>;\n\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n\n  /**\n   * Orientation of the funnel chart\n   * @defaultvalue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * Funnel Chart style properties\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartStyleProps {\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n  /**\n   * Width of the chart\n   */\n  chartWidth: number;\n  /**\n   * Height of the chart\n   */\n  chartHeight: number;\n}\n\n/**\n * Funnel Chart styles\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: string;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: string;\n\n  /**\n   * Styles for text elements\n   */\n  text?: string;\n\n  /**\n   * Styles for the callout root element\n   */\n  calloutContentRoot?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/GanttChart/GanttChart.js

@@ -5,9 +5,9 @@ import { useId } from '@fluentui/react-utilities';
 import { Legends } from '../Legends/index';
 import { CartesianChart } from '../CommonComponents/index';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
-import { ChartTypes, YAxisType, XAxisTypes, getTypeOfAxis, getNextColor, findHBCWANumericMinMaxOfY, createYAxisForHorizontalBarChartWithAxis, createStringYAxisForHorizontalBarChartWithAxis, areArraysEqual, MIN_DOMAIN_MARGIN, sortAxisCategories, calculateAppropriateBarWidth, getColorFromToken, getScalePadding, getDateFormatLevel, useRtl } from '../../utilities/index';
+import { ChartTypes, YAxisType, XAxisTypes, getTypeOfAxis, getNextColor, findHBCWANumericMinMaxOfY, createYAxisForHorizontalBarChartWithAxis, createStringYAxisForHorizontalBarChartWithAxis, areArraysEqual, MIN_DOMAIN_MARGIN, sortAxisCategories, calculateAppropriateBarWidth, getColorFromToken, getScalePadding, getDateFormatLevel } from '../../utilities/index';
 import { formatDateToLocaleString, getMultiLevelDateTimeFormatOptions } from '@fluentui/chart-utilities';
-import { toImage } from '../../utilities/image-export-utils';
+import { useImageExport } from '../../utilities/hooks';
 const DEFAULT_BAR_HEIGHT = 24;
 const MIN_BAR_HEIGHT = 1;
 export const GanttChart = /*#__PURE__*/ React.forwardRef(({ useUTC = true, yAxisCategoryOrder = 'default', maxBarHeight = 24, ...props }, forwardedRef)=>{
@@ -31,9 +31,7 @@ export const GanttChart = /*#__PURE__*/ React.forwardRef(({ useUTC = true, yAxis
         y: 0
     });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
-    const cartesianChartRef = React.useRef(null);
-    const _legendsRef = React.useRef(null);
-    const _isRTL = useRtl();
+    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
     React.useEffect(()=>{
         var _prevProps_current_legendProps, _props_legendProps;
         if (!areArraysEqual((_prevProps_current_legendProps = _prevProps.current.legendProps) === null || _prevProps_current_legendProps === void 0 ? void 0 : _prevProps_current_legendProps.selectedLegends, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
@@ -44,17 +42,6 @@ export const GanttChart = /*#__PURE__*/ React.forwardRef(({ useUTC = true, yAxis
     }, [
         props
     ]);
-    React.useImperativeHandle(props.componentRef, ()=>{
-        var _cartesianChartRef_current;
-        var _cartesianChartRef_current_chartContainer;
-        return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
-            toImage: (opts)=>{
-                var _cartesianChartRef_current, _legendsRef_current;
-                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
-            }
-        };
-    }, []);
     const _points = React.useMemo(()=>{
         var _props_data;
         _legendMap.current = {};