@fluentui/react-charts 9.3.4 → 9.3.5

package/lib-commonjs/components/DonutChart/DonutChart.js

@@ -21,8 +21,13 @@ const _reacttabster = require("@fluentui/react-tabster");
 const _ChartPopover = require("../CommonComponents/ChartPopover");
 const _imageexportutils = require("../../utilities/image-export-utils");
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
-const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+const DonutChart = /*#__PURE__*/ _react.forwardRef(({ innerRadius = 0, hideLabels = true, ...restProps }, forwardedRef)=>{
     var _props_legendProps;
+    const props = {
+        innerRadius,
+        hideLabels,
+        ...restProps
+    };
     const _rootElem = _react.useRef(null);
     const _uniqText = (0, _reactutilities.useId)('_Pie_');
     /* eslint-disable @typescript-eslint/no-explicit-any */ let _calloutAnchorPoint;
@@ -264,7 +269,9 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const focusAttributes = (0, _reacttabster.useFocusableGroup)();
     return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
         className: classes.root,
-        ref: (rootElem)=>_rootElem.current = rootElem,
+        ref: (rootElem)=>{
+            _rootElem.current = rootElem;
+        },
         onMouseLeave: _handleChartMouseLeave
     }, props.xAxisAnnotation && /*#__PURE__*/ _react.createElement("text", {
         className: classes.axisAnnotation,
@@ -314,7 +321,9 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         },
         isCartesian: false
     }), !hideLegend && /*#__PURE__*/ _react.createElement("div", {
-        ref: (e)=>legendContainer.current = e,
+        ref: (e)=>{
+            legendContainer.current = e;
+        },
         className: classes.legendContainer
     }, legendBars)) : /*#__PURE__*/ _react.createElement("div", {
         id: _emptyChartId,
@@ -326,7 +335,3 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     });
 });
 DonutChart.displayName = 'DonutChart';
-DonutChart.defaultProps = {
-    innerRadius: 0,
-    hideLabels: true
-};

package/lib-commonjs/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  (props, forwardedRef) => {\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const _uniqText: string = useId('_Pie_');\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    let _calloutAnchorPoint: ChartDataPoint | null;\n    let _emptyChartId: string | null;\n    const legendContainer = React.useRef<HTMLDivElement | null>(null);\n    const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n    const [value, setValue] = React.useState<string | undefined>('');\n    const [legend, setLegend] = React.useState<string | undefined>('');\n    const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n    const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n    const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [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) => (_rootElem.current = rootElem)}\n        onMouseLeave={_handleChartMouseLeave}\n      >\n        {props.xAxisAnnotation && (\n          <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n            {props.xAxisAnnotation}\n          </text>\n        )}\n        <div className={classes.chartWrapper} {...focusAttributes}>\n          <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture}\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 ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","undefined","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegends","setSelectedLegends","legendProps","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","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","hideLabels","donutMarginVertical","outerRadius","Math","min","innerRadius","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","defaultProps"],"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, 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":"AAAA;;;;;+BAyBae;;;;;;;iEAtBU,QAAQ;uBACX,cAAc;2CAEE,+BAA+B;gCAE9B,4BAA4B;wBACyB,wBAAwB;wBACjE,cAAc;gCACzC,4BAA4B;8BAEhB,0BAA0B;8BAC/B,mCAAmC;kCAExC,qCAAqC;AAE7D,MAAMD,8BAA8B;AAO7B,mBAAMC,WAAAA,GAAuDf,OAAMgB,UAAU,CAClF,CAAC,EAAEC,cAAc,CAAC,EAAEC,aAAa,IAAI,EAAE,GAAGC,WAAW,EAAEC;QAkBkBC;IAjBvE,MAAMA,QAAQ;QAAEJ;QAAaC;QAAY,GAAGC,SAAS;IAAC;IACtD,MAAMG,YAAYtB,OAAMuB,MAAM,CAAwB;IACtD,MAAMC,YAAoBd,yBAAAA,EAAM;IAChC,qDAAqD,GACrD,IAAIe;IACJ,IAAIC;IACJ,MAAMC,kBAAkB3B,OAAMuB,MAAM,CAAwB;IAC5D,MAAMK,WAAW5B,OAAMuB,MAAM,CAAsC,CAAC;IAEpE,MAAM,CAACM,OAAOC,SAAS,GAAG9B,OAAM+B,QAAQ,CAAqB;IAC7D,MAAM,CAACC,QAAQC,UAAU,GAAGjC,OAAM+B,QAAQ,CAAqB;IAC/D,MAAM,CAACG,QAAQC,SAAS,GAAGnC,OAAM+B,QAAQ,CAAqBV,MAAMe,KAAK,IAAI;IAC7E,MAAM,CAACC,SAASC,UAAU,GAAGtC,OAAM+B,QAAQ,CAAqBV,MAAMkB,MAAM,IAAI;IAChF,MAAM,CAACC,cAAcC,gBAAgB,GAAGzC,OAAM+B,QAAQ,CAAqBW;IAC3E,MAAM,CAACC,OAAOC,SAAS,GAAG5C,OAAM+B,QAAQ,CAAqB;IAC7D,MAAM,CAACc,eAAeC,iBAAiB,GAAG9C,OAAM+B,QAAQ,CAAS;IACjE,MAAM,CAACgB,eAAeC,iBAAiB,GAAGhD,OAAM+B,QAAQ,CAAS;IACjE,MAAM,CAACkB,iBAAiBC,mBAAmB,GAAGlD,OAAM+B,QAAQ,CAAWV,CAAAA,CAAAA,qBAAAA,MAAM8B,WAAAA,AAAW,MAAA,QAAjB9B,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmB4B,eAAAA,AAAe,KAAI,EAAE;IAC/G,MAAM,CAACG,cAAcC,gBAAgB,GAAGrD,OAAM+B,QAAQ,CAAS;IAC/D,MAAM,CAACuB,uBAAuBC,yBAAyB,GAAGvD,OAAM+B,QAAQ;IACxE,MAAM,CAACyB,aAAaC,eAAe,GAAGzD,OAAM+B,QAAQ,CAAqB;IACzE,MAAM,CAAC2B,eAAeC,eAAe,GAAG3D,OAAM+B,QAAQ,CAAC;IACvD,MAAM6B,eAAe5D,OAAMuB,MAAM,CAAyB;IAC1D,MAAMsC,cAAc7D,OAAMuB,MAAM,CAAkB;IAClD,MAAMuC,aAAkBtD,cAAAA;IAExBR,OAAM+D,SAAS,CAAC;QACdC;IACF,GAAG,EAAE;IAELhE,OAAM+D,SAAS,CAAC;QACd,IAAIH,aAAaK,OAAO,EAAE;gBAEJC,wBAAwC7C;YAD5D,MAAM6C,YAAYN,aAAaK,OAAO;YACtC,IAAI,KAAC7D,sBAAAA,EAAAA,AAAe8D,0BAAAA,UAAUf,WAAAA,AAAW,MAAA,QAArBe,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAuBjB,eAAe,EAAA,CAAE5B,qBAAAA,MAAM8B,WAAAA,AAAW,MAAA,QAAjB9B,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmB4B,eAAe,GAAG;oBAC5E5B;gBAAnB6B,mBAAmB7B,CAAAA,CAAAA,sBAAAA,MAAM8B,WAAAA,AAAW,MAAA,QAAjB9B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAmB4B,eAAe,AAAfA,KAAmB,EAAE;YAC7D;QACF;QACAW,aAAaK,OAAO,GAAG5C;IACzB,GAAG;QAACA;KAAM;IAEVrB,OAAM+D,SAAS,CAAC;QACd,IAAInC,SAASqC,OAAO,CAAC1B,MAAM,KAAKlB,MAAMkB,MAAM,IAAIX,SAASqC,OAAO,CAAC7B,KAAK,KAAKf,MAAMe,KAAK,EAAE;YACtF4B;QACF;QACApC,SAASqC,OAAO,CAAC1B,MAAM,GAAGlB,MAAMkB,MAAM;QACtCX,SAASqC,OAAO,CAAC7B,KAAK,GAAGf,MAAMe,KAAK;IACtC,GAAG;QAACf,MAAMe,KAAK;QAAEf,MAAMkB,MAAM;KAAC;IAE9BvC,OAAMmE,mBAAmB,CACvB9C,MAAM+C,YAAY,EAClB,IAAO,CAAA;YACLC,gBAAgB/C,UAAU2C,OAAO;YACjCpD,SAAS,CAACyD;oBAC0BT;gBAAlC,WAAOhD,yBAAAA,EAAQS,UAAU2C,OAAO,EAAA,CAAEJ,sBAAAA,YAAYI,OAAAA,AAAO,MAAA,QAAnBJ,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAqBU,KAAK,EAAET,QAAQQ;YACxE;QACF,CAAA,GACA,EAAE;IAGJ,SAASE,mBAAmBC,IAAsB;QAChD,IAAIC,YAAY;QAChB,MAAMC,aAAa;QACnB,MAAMC,eAAiC,EAAE;QACzCH,KAAKI,OAAO,CAACC,CAAAA;YACXJ,aAAaI,KAAKL,IAAI;QACxB;QACAA,KAAKI,OAAO,CAACC,CAAAA;YACXF,aAAaG,IAAI,CACfJ,aAAaD,YAAYI,KAAKL,IAAI,IAAKK,KAAKL,IAAI,GAAI,IAChD;gBACE,GAAGK,IAAI;gBACPL,MAAME,aAAaD;gBACnBM,kBACEF,KAAKE,gBAAgB,KAAKtC,YAAYoC,KAAKL,IAAI,CAAEQ,cAAc,KAAKH,KAAKE,gBAAgB;YAC7F,IACAF;QAER;QACA,OAAOF;IACT;IACA,SAASM,eAAeC,SAA2B;QACjD,IAAI9D,MAAM+D,KAAK,KAAK,UAAU;YAC5BD,UAAUE,IAAI,CAAC,CAACC,GAAmBC;gBACjC,OAAOA,EAAEd,IAAI,GAAIa,EAAEb,IAAI;YACzB;QACF;QACA,MAAMe,kBAAkBL,UAAUM,GAAG,CAAC,CAACC,OAAuBC;YAC5D,MAAMhD,QAAgB+C,MAAM/C,KAAK;YACjC,qDAAqD;YACrD,MAAMX,SAAiB;gBACrB4D,OAAOF,MAAM1D,MAAM;gBACnBW;gBACAkD,aAAa;oBACXC;oBACArD,gBAAgBiD,MAAM1D,MAAM;gBAC9B;gBACA+D,kBAAkB;oBAChBtD,gBAAgBC;gBAClB;YACF;YACA,OAAOV;QACT;QACA,MAAMgE,UAAAA,WAAAA,GACJ,OAAA,aAAA,CAACvF,eAAAA,EAAAA;YACCuF,SAASR;YACTS,eAAAA;YACAC,cAAc7E,MAAM8E,mBAAmB;YACtC,GAAG9E,MAAM8B,WAAW;YACrB,6CAA6C;YAC7CiD,UAAUC;YACVC,WAAWzC;;QAGf,OAAOmC;IACT;IACA,SAASK,yBACPpD,eAAyB,EACzBsD,KAA0C,EAC1CC,aAAsB;YAEGnF,oBAKrBA;QALJ,IAAIA,MAAM8B,WAAW,IAAA,CAAA,CAAI9B,qBAAAA,MAAM8B,WAAAA,AAAW,MAAA,QAAjB9B,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBoF,wBAAwB,AAAxBA,GAA0B;YACpEvD,mBAAmBD;QACrB,OAAO;YACLC,mBAAmBD,gBAAgByD,KAAK,CAAC,CAAC;QAC5C;QACA,IAAA,AAAIrF,uBAAAA,MAAM8B,WAAW,AAAXA,MAAW,QAAjB9B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAmB+E,QAAQ,EAAE;YAC/B/E,MAAM8B,WAAW,CAACiD,QAAQ,CAACnD,iBAAiBsD,OAAOC;QACrD;IACF;IAEA,SAASG,eACPlC,IAAoB,EACpBmC,EAAU,EACVC,CAAmC,EACnCC,aAAkC;QAElCnD,eAAeoD,2BAA2BC,qBAAqBvC,KAAKzC,MAAM;QAC1EF,SAAS2C,KAAKA,IAAI,CAAEwC,QAAQ;QAC5BhF,UAAUwC,KAAKzC,MAAM;QACrBY,SAAS6B,KAAK9B,KAAK;QACnBG,iBAAiB2B,KAAKyC,gBAAgB;QACtClE,iBAAiByB,KAAKO,gBAAgB;QACtC3B,gBAAgBuD;QAChBrD,yBAAyBkB;QACzBhB,eAAeqD;IACjB;IAEA,SAASK,eACP1C,IAAoB,EACpBoC,CAAmC,EACnCC,aAAkC;QAElC,IAAIrF,wBAAwBgD,MAAM;YAChChD,sBAAsBgD;YACtBd,eAAeoD,2BAA2BC,qBAAqBvC,KAAKzC,MAAM;YAC1EF,SAAS2C,KAAKA,IAAI,CAAEwC,QAAQ;YAC5BhF,UAAUwC,KAAKzC,MAAM;YACrBY,SAAS6B,KAAK9B,KAAK;YACnBG,iBAAiB2B,KAAKyC,gBAAgB;YACtClE,iBAAiByB,KAAKO,gBAAgB;YACtCzB,yBAAyBkB;YACzBhB,eAAeqD;QACjB;IACF;IACA,SAASM;QACP/D,gBAAgB;IAClB;IAEA,SAASgE;IACP,EAAE,GACJ;IAEA,SAASvB;QACPrE,sBAAsB;QACtBkC,eAAe;IACjB;IAEA,SAAS2D,kBAAkBC,gBAA6C,EAAE9C,IAAsB;QAC9F,MAAM+C,qBAAqBC;QAC3B,IAAIF,qBAAqB7E,aAAc8E,CAAAA,mBAAmBE,MAAM,KAAK,KAAKhE,aAAAA,CAAY,EAAI;YACxF,MAAMiE,aAAalD,KAAKmD,IAAI,CAAClC,CAAAA,QAASsB,qBAAqBtB,MAAM1D,MAAM;YACvE,OAAO2F,aACHA,WAAW3C,gBAAgB,GACzB2C,WAAW3C,gBAAgB,GAC3B2C,WAAWlD,IAAI,GACjB8C;QACN,OAAO,IAAIC,mBAAmBE,MAAM,GAAG,GAAG;YACxC,IAAIG,aAAa;YACjBpD,KAAKI,OAAO,CAACa,CAAAA;gBACX,IAAI8B,mBAAmBM,QAAQ,CAACpC,MAAM1D,MAAM,GAAI;oBAC9C6F,cAAcnC,MAAMjB,IAAI;gBAC1B;YACF;YACA,OAAOoD;QACT,OAAO;YACL,OAAON;QACT;IACF;IAEA,SAASQ,gBAAgBtD,IAAiC;QACxD,MAAMuD,mBAAe7H,oCAAAA,EAAqBsE,MAAMpD,MAAM4G,OAAO;QAC7D,IAAI,CAACD,cAAc;YACjB,OAAOvD;QACT;QACA,OAAOuD,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcf,QAAQ;IAC/B;IAEA;;;;KAIC,GACD,SAASQ;QACP,OAAOxE,gBAAgByE,MAAM,GAAG,IAAIzE,kBAAkBT,eAAe;YAACA;SAAa,GAAG,EAAE;IAC1F;IAEA,SAASwE,qBAAqBhF,MAA0B;QACtD,OAAOyF,wBAAwBK,QAAQ,CAAC9F;IAC1C;IAEA,SAAS+E;QACP,OAAOU,wBAAwBC,MAAM,KAAK;IAC5C;IAEA,SAASQ;QACP,OAAO,CACL7G,CAAAA,MAAMoD,IAAI,IACVpD,MAAMoD,IAAI,CAACU,SAAS,IACpB9D,MAAMoD,IAAI,CAACU,SAAS,CAAEgD,MAAM,CAAC,CAACC,IAAsBA,EAAE3D,IAAI,GAAI,GAAGiD,MAAM,IAAG,CAAA;IAE9E;IAEA,SAASW,kBAAkBC,mBAAsC;QAC/D,OAAOA,sBACHA,oBAAoB7C,GAAG,CAAC,CAACX,MAAMa;YAC7B,IAAI4C;YACJ,IAAI,OAAOzD,KAAKnC,KAAK,KAAK,aAAa;gBACrC4F,mBAAejI,oBAAAA,EAAaqF,OAAO;YACrC,OAAO;gBACL4C,eAAelI,6BAAAA,EAAkByE,KAAKnC,KAAK;YAC7C;YACA,OAAO;gBAAE,GAAGmC,IAAI;gBAAEyD;YAAa;QACjC,KACA,EAAE;IACR;IAEA;;;KAGC,GACD,SAASvE;QACP,wCAAwC;QACxC,IAAIwE;QACJ,IAAInH,MAAMoH,UAAU,EAAE;YACpB,iFAAiF;YACjFD,wBAAwB;QAC1B,OAAO;YACL,MAAME,gCAAgC/G,gBAAgBsC,OAAO,IAAI0E,iBAAiBhH,gBAAgBsC,OAAO;YACzGuE,wBACG,CAAC7G,gBAAgBsC,OAAO,IAAItC,gBAAgBsC,OAAO,CAAC2E,qBAAqB,GAAGrG,MAAM,IACjFzB,2BAAAA,CAA0B,GAC5B+H,WAAYH,iCAAiCA,8BAA8BI,SAAS,IAAK,OACzFD,WAAYH,iCAAiCA,8BAA8BK,YAAY,IAAK;QAChG;QACA,IAAI1H,MAAM2H,SAAS,IAAI1H,UAAU2C,OAAO,EAAE;YACxC,MAAMgF,YAAY5H,MAAM2H,SAAS,GAAG3H,MAAM2H,SAAS,GAAG1H,UAAU2C,OAAO;YACvE,MAAMiF,wBAAwBD,UAAUL,qBAAqB,GAAGxG,KAAK;YACrE,MAAM+G,yBACJF,UAAUL,qBAAqB,GAAGrG,MAAM,GAAGiG,wBACvCS,UAAUL,qBAAqB,GAAGrG,MAAM,GACxC;YACN,MAAM6G,eACJlH,WAAWgH,yBAAyB7G,YAAY8G,yBAAyBX;YAC3E,IAAIY,cAAc;gBAChBjH,SAAS+G;gBACT5G,UAAU6G,yBAAyBX;YACrC;QACF;IACA,KAAK;IACP;IAEA,MAAM,EAAE/D,IAAI,EAAEgE,aAAa,KAAK,EAAE,GAAGpH;IACrC,MAAMgI,SAAShB,kBAAkB5D,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMU,SAAS;IAEhD,MAAMmE,cAAUpJ,8CAAAA,EAAoBmB;IAEpC,MAAMkI,aAAarE,eAAemE,OAAOlB,MAAM,CAACC,CAAAA,IAAKA,EAAE3D,IAAI,IAAK;IAChE,MAAM+E,wBAAwBnI,MAAMH,UAAU,GAAG,IAAI;IACrD,MAAMuI,sBAAsBpI,MAAMH,UAAU,GAAG,IAAI;IACnD,MAAMwI,cAAcC,KAAKC,GAAG,CAAC1H,SAAUsH,uBAAuBnH,UAAWoH,uBAAuB;IAChG,MAAMtE,YAAYX,mBAAmB6E;IACrC,MAAM9B,mBACJlG,MAAMJ,WAAW,GAAIV,wBAAAA,GAAmB+G,kBAAkBjG,MAAMkG,gBAAgB,EAAGpC,aAAc;IACnG,MAAM0E,sBAAkBlJ,+BAAAA;IACxB,OAAO,CAACuH,kBAAAA,WAAAA,GACN,OAAA,aAAA,CAAC4B,OAAAA;QACCC,WAAWT,QAAQU,IAAI;QACvBC,KAAK,CAACC;YACJ5I,UAAU2C,OAAO,GAAGiG;QACtB;QACAC,cAAcrE;OAEbzE,MAAM+I,eAAe,IAAA,WAAA,GACpB,OAAA,aAAA,CAACC,QAAAA;QAAKN,WAAWT,QAAQgB,cAAc;QAAEC,GAAGrI,SAAU;QAAGsI,GAAGnI,UAAW;QAAIoI,YAAW;OACnFpJ,MAAM+I,eAAe,GAAA,WAAA,GAG1B,OAAA,aAAA,CAACN,OAAAA;QAAIC,WAAWT,QAAQoB,YAAY;QAAG,GAAGb,eAAe;qBACvD,OAAA,aAAA,CAACc,OAAAA;QAAIZ,WAAWT,QAAQsB,KAAK;QAAEC,YAAU,EAAEpG,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMqG,UAAU;QAAE1I,OAAOF;QAAQK,QAAQF;qBAClF,OAAA,aAAA,CAACpC,UAAAA,EAAAA;QACCmC,OAAOF;QACPK,QAAQF;QACRqH,aAAaA;QACbzI,aAAaI,MAAMJ,WAAW;QAC9BwD,MAAMU;QACN4F,iBAAiBpE;QACjBqE,iBAAiB7D;QACjB8D,oBAAoB5D;QACpB6D,UAAU1J;QACV2J,gBAAgB/D;QAChBgE,WAAW3D;QACXrE,cAAcA,gBAAgB;QAC9BiI,MAAMhK,MAAMgK,IAAI;QAChB9D,kBAAkBQ,gBAAgBR;QAClC+D,qBAAqBjK,MAAMiK,mBAAmB;QAC9CpK,YAAYG,MAAMH,UAAU;wBAIlC,OAAA,aAAA,CAACN,0BAAAA,EAAAA;QACCiC,eAAeA;QACfE,eAAeA;QACfkF,SAAS5G,MAAM4G,OAAO;QACtBsD,aAAa;YACXC,QAAQhI;QACV;QACAE,eACE,CAACrC,MAAMoK,WAAW,IAAI/H,iBAAkBqD,CAAAA,2BAA2BC,qBAAqBhF,OAAAA,CAAM;QAEhGA,QAAQA;QACR0J,QAAQ7J;QACRc,OAAOA;QACPgJ,mBAAmB;QACnBC,eAAe;YACbC,mBAAmBxK,MAAMyK,2BAA2B,GAChDzK,MAAMyK,2BAA2B,CAACxI,yBAClCZ;YACJqJ,oBAAoB1K,MAAM2K,wBAAwB,GAC9C3K,MAAM2K,wBAAwB,CAAC1I,yBAC/BZ;QACN;QACAuJ,aAAa;QAEd,CAACxD,cAAAA,WAAAA,GACA,OAAA,aAAA,CAACqB,OAAAA;QACCG,KAAK,CAACpD;YACJlF,gBAAgBsC,OAAO,GAAG4C;QAC5B;QACAkD,WAAWT,QAAQ3H,eAAe;OAEjC4H,eAAAA,WAAAA,GAKP,OAAA,aAAA,CAACO,OAAAA;QAAIlD,IAAIlF;QAAgBwK,MAAM;QAASC,OAAO;YAAEC,SAAS;QAAI;QAAGvB,cAAY;;AAEjF,GACA;AAEF9J,WAAWsL,WAAW,GAAG"}

package/lib-commonjs/components/FunnelChart/FunnelChart.js

@@ -21,8 +21,12 @@ const _colors = require("../../utilities/colors");
 const _useFunnelChartStylesstyles = require("./useFunnelChartStyles.styles");
 const _funnelGeometry = require("./funnelGeometry");
 const _imageexportutils = require("../../utilities/image-export-utils");
-const FunnelChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+const FunnelChart = /*#__PURE__*/ _react.forwardRef(({ orientation = 'vertical', ...restProps }, forwardedRef)=>{
     var _props_legendProps;
+    const props = {
+        orientation,
+        ...restProps
+    };
     const _emptyChartId = (0, _reactutilities.useId)('_FunnelChart_empty');
     const isRTL = (0, _index.useRtl)();
     const [hoveredStage, setHoveredStage] = _react.useState(null);
@@ -389,7 +393,3 @@ const FunnelChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     });
 });
 FunnelChart.displayName = 'FunnelChart';
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-FunnelChart.defaultProps = {
-    orientation: 'vertical'
-};

package/lib-commonjs/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>((props, forwardedRef) => {\n  const _emptyChartId: string = useId('_FunnelChart_empty');\n  const isRTL = useRtl();\n\n  const [hoveredStage, setHoveredStage] = React.useState<string | null>(null);\n  const [calloutData, setCalloutData] = React.useState<FunnelChartDataPoint | null>(null);\n  const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);\n  const [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// eslint-disable-next-line @typescript-eslint/no-deprecated\nFunnelChart.defaultProps = {\n  orientation: 'vertical',\n};\n"],"names":["React","useId","useRtl","Legends","useFocusableGroup","ChartPopover","formatToLocaleString","getContrastTextColor","useFunnelChartStyles","getHorizontalFunnelSegmentGeometry","getVerticalFunnelSegmentGeometry","getSegmentTextProps","getStackedHorizontalFunnelSegmentGeometry","getStackedVerticalFunnelSegmentGeometry","toImage","FunnelChart","forwardRef","props","forwardedRef","_emptyChartId","isRTL","hoveredStage","setHoveredStage","useState","calloutData","setCalloutData","selectedLegends","setSelectedLegends","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","orientation","textX","textY","availableWidth","minTextWidth","eventHandlerProps","Array","isArray","every","subValues","_renderStackedSegment","stageIndex","subValueIndex","geometryParams","stagesWithSubValues","stages","s","geom","k","_createStackedFunnel","totals","reduce","sum","maxTotal","Math","max","paths","cur","v","push","_renderLegends","hideLegend","legends","categoryMap","forEach","sub","Object","entries","title","hoverAction","onMouseOutAction","div","style","display","justifyContent","centerLegends","legendRef","_isChartEmpty","classes","calloutProps","hoverXValue","YValue","width","height","funnelMarginTop","funnelOffsetX","focusAttributes","ref","className","root","svg","chart","role","aria-label","chartTitle","XValue","yCalloutValue","positioning","target","isCartesian","displayName","defaultProps"],"mappings":"AAAA;;;;;+BAuBae;;;;;;;iEArBU,QAAQ;gCACT,4BAA4B;uBAE3B,wBAAwB;wBAEE,mBAAmB;8BAClC,0BAA0B;8BAC/B,mCAAmC;gCAC3B,4BAA4B;wBAC5B,yBAAyB;4CACzB,gCAAgC;gCAO9D,mBAAmB;kCAEF,qCAAqC;AAEtD,oBAAMA,WAAAA,GAAyDf,OAAMgB,UAAU,CAGpF,CAACC,OAAOC;QAiBJD;IAhBJ,MAAME,oBAAwBlB,qBAAAA,EAAM;IACpC,MAAMmB,YAAQlB,aAAAA;IAEd,MAAM,CAACmB,cAAcC,gBAAgB,GAAGtB,OAAMuB,QAAQ,CAAgB;IACtE,MAAM,CAACC,aAAaC,eAAe,GAAGzB,OAAMuB,QAAQ,CAA8B;IAClF,MAAM,CAACG,iBAAiBC,mBAAmB,GAAG3B,OAAMuB,QAAQ,CAAW,EAAE;IACzE,MAAM,CAACK,eAAeC,eAAe,GAAG7B,OAAMuB,QAAQ,CAAC;IACvD,MAAM,CAACO,aAAaC,eAAe,GAAG/B,OAAMuB,QAAQ,CAAqB;IACzE,MAAMS,oBAAoBhC,OAAMiC,MAAM,CAAwB;IAC9D,MAAMC,YAAYC,oBAAoBlB,MAAMmB,IAAI;IAChD,MAAMC,cAAcrC,OAAMiC,MAAM,CAAkB;IAElDjC,OAAMsC,SAAS,CAAC;YACVrB;QAAJ,IAAA,CAAIA,qBAAAA,MAAMsB,WAAW,AAAXA,MAAW,QAAjBtB,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBS,eAAe,EAAE;YACtCC,mBAAmBV,MAAMsB,WAAW,CAACb,eAAe;QACtD;IACF,GAAG;SAACT,qBAAAA,MAAMsB,WAAW,AAAXA,MAAW,QAAjBtB,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBS,eAAe;KAAC;IAEvC1B,OAAMwC,mBAAmB,CACvBvB,MAAMwB,YAAY,EAClB,IAAO,CAAA;YACL3B,SAAS,CAAC4B;oBACkCL;gBAA1C,WAAOvB,yBAAAA,EAAQkB,kBAAkBW,OAAO,EAAEN,AAAF,uBAAEA,YAAYM,OAAAA,AAAO,MAAA,QAAnBN,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAqBO,KAAK,EAAExB,OAAOsB;YAC/E;SACF,CAAA,EACA,EAAE;IAGJ,SAASG,aACPT,IAA0B,EAC1BU,UAAwC,EACxCC,aAAkC;QAElCD,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYE,OAAO;QACnBvB,eAAeW;QACfL,eAAegB;QACflB,eAAe;IACjB;IAEA,SAASoB,aACPb,IAA0B,EAC1Bc,UAA4C,EAC5CH,aAAkC;QAElCG,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYF,OAAO;QACnBvB,eAAeW;QACfL,eAAegB;QACflB,eAAe;IACjB;IAEA,SAASsB,oBACPC,KAAa,EACbC,QAA4D,EAC5DP,UAAwC,EACxCC,aAAkC;QAElCD,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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;YAElB7C,oBAMAA;QANJ,IAAA,CAAIA,qBAAAA,MAAMsB,WAAAA,AAAW,MAAA,QAAjBtB,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmB8C,wBAAwB,EAAE;YAC/CpC,mBAAmBiC;QACrB,OAAO;YACLjC,mBAAmBiC,gBAAgBI,KAAK,CAAC,CAAC;QAC5C;QAEA,IAAA,CAAI/C,sBAAAA,MAAMsB,WAAAA,AAAW,MAAA,QAAjBtB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAmBgD,QAAQ,EAAE;YAC/BhD,MAAMsB,WAAW,CAAC0B,QAAQ,CAACL,iBAAiBC,OAAOC;QACrD;IACF;IAEA,MAAMI,mCAAmClE,OAAMmE,WAAW,CAACR,0BAA0B;QAAC1C,MAAMsB,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,SAAS9D,MAAM8D,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,SAAS9D,MAAM8D,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,cAAAA,WAAAA,GACJ,OAAA,aAAA,CAACC,QAAAA;YACCJ,GAAGpE,QAAQyE,cAAcL,IAAIA;YAC7BC,GAAGA;YACHd,SAASA;YACTmB,YAAW;YACXC,mBAAkB;YAClBC,MAAMN;eAELpF,oCAAAA,EAAqBgD,MAAM2C,QAAQ,IAAIhF,MAAM8D,OAAO;QAIzD,IAAI3D,OAAO;YACT,OAAA,WAAA,GAAO,OAAA,aAAA,CAAC8E,KAAAA;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,gBAAYnF,4BAAAA,EAAqByF;QACvC,OAAA,WAAA,GACE,OAAA,aAAA,CAACE,KAAAA;YAAEG,KAAKA;yBACN,OAAA,aAAA,CAACK,QAAAA;YAAKC,IAAI/B;YAAWgC,GAAGN;YAAON,MAAMA;YAAMrB,SAASA;YAAU,GAAG8B,aAAa;YAAED,UAAUA;YACzFD,aAAAA,WAAAA,GAAa,OAAA,aAAA,CAACL,KAAMO,eAAgBnB,mBAAmB;YAAE,GAAGiB,SAAS;YAAEb;YAAWf;QAAQ;IAGjG;IAEA,SAASkC,cACPC,eAAuB,EACvBC,cAAsB;QAGtB,MAAM,EAAE3E,IAAI,EAAE,GAAGnB;QACjB,MAAM4E,cAAckB;QACpB,MAAMC,eAAeF,kBAAkB;QAEvC,OAAO1E,KAAK6E,GAAG,CAAC,CAACL,GAAGM;YAClB,MAAMC,gBACJlG,MAAMmG,WAAW,KAAK,iBAClB1G,gDAAAA,EAAiC;gBAAEkG;gBAAGM;gBAAG9E;gBAAMyD;gBAAamB;gBAAc5F;YAAM,SAChFX,kDAAAA,EAAmC;gBAAEmG;gBAAGM;gBAAG9E;gBAAMyD;gBAAamB;gBAAc5F;YAAM;YAExF,MAAM,EAAEkF,KAAK,EAAEe,KAAK,EAAEC,KAAK,EAAEC,cAAc,EAAE,GAAGJ;YAChD,MAAMK,eAAe;YACrB,MAAMC,oBAAoB/C,sBAAsBkC;YAChD,MAAML,gBAAY5F,mCAAAA,EAAoB;gBACpC4G;gBACAC;gBACAH;gBACAC;gBACAhE,OAAOsD,EAAEtD,KAAK;gBACd,GAAGmE,iBAAiB;YACtB;YAEA,OAAOrB,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,OAAOsF,MAAMC,OAAO,CAACvF,SAASA,KAAKwF,KAAK,CAACxE,CAAAA,QAASsE,MAAMC,OAAO,CAACvE,MAAMyE,SAAS;IACjF;IAEA,SAASC,sBACP1E,KAA2B,EAC3BC,QAA4D,EAC5D0E,UAAkB,EAClBC,aAAqB,EACrBC,cAOC;QAGD,sDAAsD;QACtD,MAAMC,sBAAsBD,eAAeE,MAAM,CAAClB,GAAG,CAACmB,CAAAA,IAAM,CAAA;gBAC1D,GAAGA,CAAC;gBACJP,WAAWO,EAAEP,SAAS,IAAI,EAAE;aAC9B,CAAA;QACA,MAAMQ,OACJpH,MAAMmG,WAAW,KAAK,iBAClBvG,uDAAAA,EAAwC;YACtC,GAAGoH,cAAc;YACjBE,QAAQD;YACRhB,GAAGa;YACHO,GAAGN;QACL,SACApH,yDAAAA,EAA0C;YACxC,GAAGqH,cAAc;YACjBE,QAAQD;YACRhB,GAAGa;YACHO,GAAGN;QACL;QAEN,MAAMR,eAAe;QACrB,MAAMC,oBAAoB/C,sBAAsB;YAAEtB,OAAOA,MAAMA,KAAK;YAAYC;QAAS;QACzF,MAAMkD,gBAAY5F,mCAAAA,EAAoB;YACpC4G,gBAAgBc,KAAKd,cAAc;YACnCC;YACAH,OAAOgB,KAAKhB,KAAK;YACjBC,OAAOe,KAAKf,KAAK;YACjBhE,OAAOD,SAASC,KAAK;YACrB,GAAGmE,iBAAiB;QACtB;QAEA,OAAOrB,qBAAqB;YAC1BC,KAAK,GAAG0B,WAAW,CAAC,EAAEC,eAAe;YACrC1B,OAAO+B,KAAK/B,KAAK;YACjBN,MAAM3C,SAASE,KAAK;YACpBoB,SACGxC,oBAAoBlB,MAAMmB,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,SAASsD,qBACPzB,eAAuB,EACvBC,cAAsB;QAGtB,MAAM,EAAE3E,IAAI,EAAE,GAAGnB;QAEjB,MAAMkH,SAAS/F;QACf,MAAMoG,SAASL,OAAOlB,GAAG,CAACmB,CAAAA;gBAAKA;gBAAAA;mBAAAA,CAAAA,sBAAAA,MAAAA,QAAAA,MAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,eAAAA,EAAGP,SAAAA,AAAS,MAAA,QAAZO,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcK,MAAM,CAAC,CAACC,KAAKrF,WAAaqF,MAAMrF,SAASC,KAAK,EAAE,EAAA,MAAA,QAA9D8E,wBAAAA,KAAAA,IAAAA,sBAAoE;;QACnG,MAAMO,WAAWC,KAAKC,GAAG,IAAIL;QAE7B,MAAM3C,cAAckB;QACpB,MAAMC,eAAeF,kBAAkB;QAEvC,4DAA4D;QAC5D,MAAMgC,QAAsB,EAAE;QAE9B,MAAMb,iBAAiB;YACrBE;YACAK;YACAG;YACA9C;YACAmB;YACA5F;QACF;QAEA,IAAK,IAAI8F,IAAI,GAAGA,IAAIiB,OAAO9D,MAAM,EAAE6C,IAAK;YACtC,MAAM6B,MAAMZ,MAAM,CAACjB,EAAE;gBACA6B;YAArB,IAAK,IAAIT,IAAI,GAAGA,IAAKS,CAAAA,CAAAA,iBAAAA,IAAIlB,SAAAA,AAAS,MAAA,QAAbkB,mBAAAA,KAAAA,IAAAA,iBAAiB,EAAA,AAAC,EAAG1E,MAAM,EAAEiE,IAAK;oBAC3CS;gBAAV,MAAMC,IAAAA,CAAID,kBAAAA,IAAIlB,SAAAA,AAAS,MAAA,QAAbkB,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAe,CAACT,EAAE;gBAC5B,IAAI,CAACU,GAAG;oBACN;gBACF;gBACAF,MAAMG,IAAI,CAACnB,sBAAsBiB,KAAKC,GAAG9B,GAAGoB,GAAGL;YACjD;QACF;QACA,OAAOa;IACT;IAEA,SAASI;QAEP,IAAIjI,MAAMkI,UAAU,EAAE;YACpB,OAAA,WAAA,GAAO,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA;QACT;QACA,IAAIC;QAEJ,IAAIlH,WAAW;YACb,4CAA4C;YAC5C,MAAMmH,cAAsC,CAAC;YAC7CpI,MAAMmB,IAAI,CAACkH,OAAO,CAAC,CAAClG;iBACjBA,MAAMyE,SAAS,IAAI,EAAA,AAAC,EAAGyB,OAAO,CAACC,CAAAA;oBAC9B,IAAI,CAAEA,CAAAA,IAAI/F,QAAQ,IAAI6F,WAAAA,CAAU,EAAI;wBAClCA,WAAW,CAACE,IAAI/F,QAAQ,CAAC,GAAG+F,IAAIhG,KAAK;oBACvC;gBACF;YACF;YACA6F,UAAUI,OAAOC,OAAO,CAACJ,aAAapC,GAAG,CAAC,CAAC,CAACzD,UAAUD,MAAM,GAAM,CAAA;oBAChEmG,OAAOlG;oBACPD;oBACAoG,aAAa,IAAMrI,gBAAgBkC;oBACnCoG,kBAAkB,IAAMtI,gBAAgB;iBAC1C,CAAA;QACF,OAAO;YACL8H,UAAUnI,MAAMmB,IAAI,CAAC6E,GAAG,CAAC,CAACL,IAA6B,CAAA;oBACrD8C,OAAO9C,EAAExD,KAAK;oBACdG,OAAOqD,EAAErD,KAAK;oBACdoG,aAAa,IAAMrI,gBAAgBsF,EAAExD,KAAK;oBAC1CwG,kBAAkB,IAAMtI,gBAAgB;iBAC1C,CAAA;QACF;QAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACuI,OAAAA;YAAIC,OAAO;gBAAEC,SAAS;gBAAQC,gBAAgB;YAAS;yBACtD,OAAA,aAAA,CAAC7J,eAAAA,EAAAA;YACCiJ,SAASA;YACTa,eAAe;YACfhG,UAAUC;YACT,GAAGjD,MAAMsB,WAAW;YACrB2H,WAAW7H;;IAInB;IAEA,SAAS8H;QACP,OAAO,CAAElJ,CAAAA,MAAMmB,IAAI,IAAInB,MAAMmB,IAAI,CAACiC,MAAM,IAAG,CAAA;IAC7C;IAEA,MAAM+F,UAAU5J,oDAAAA,EAAqBS;IAErC,MAAMoJ,eAAkC;QACtC,GAAGpJ,MAAMoJ,YAAY;QACrB9G,KAAK,EAAE/B,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAa+B,KAAK;QACzB+G,WAAW,EAAE9I,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAa4B,KAAK;QAC/BmH,MAAM,EAAE/I,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAa8B,KAAK;IAC5B;IAEA,MAAMkH,QAAQvJ,MAAMuJ,KAAK,IAAI;IAC7B,MAAMC,SAASxJ,MAAMwJ,MAAM,IAAI;IAE/B,MAAMC,kBAAkB;IACxB,MAAM7E,cAAc2E,QAAQ;IAC5B,MAAMG,gBAAiBH,CAAAA,QAAQ3E,WAAAA,CAAU,GAAK;IAC9C,MAAM+E,sBAAkBxK,+BAAAA;IAExB,OAAO,CAAC+J,kBAAAA,WAAAA,GACN,OAAA,aAAA,CAACN,OAAAA;QAAIgB,KAAK7I;QAAmB8I,WAAWV,QAAQW,IAAI;QAAG,GAAGH,eAAe;QAAEd,OAAO;YAAEU;YAAOC;QAAO;qBAChG,OAAA,aAAA,CAACO,OAAAA;QAAIR,OAAOA;QAAOC,QAAQA;QAAQK,WAAWV,QAAQa,KAAK;QAAEC,MAAM;QAAOC,cAAYlK,MAAMmK,UAAU;qBACpG,OAAA,aAAA,CAAClF,KAAAA;QACCC,WACE/E,QACI,CAAC,UAAU,EAAEuJ,gBAAgB9E,YAAY,EAAE,EAAE6E,gBAAgB,aAAa,CAAC,GAC3E,CAAC,UAAU,EAAEC,cAAc,EAAE,EAAED,gBAAgB,CAAC,CAAC;OAGtDxI,YACGqG,qBAAqBkC,SAASC,iBAAiB7E,eAC/CgB,cAAc4D,SAASC,iBAAiB7E,gBAG/CjE,iBAAAA,WAAAA,GACC,OAAA,aAAA,CAACvB,0BAAAA,EAAAA;QACE,GAAGY,MAAMoJ,YAAY;QACtBgB,MAAM,EAAEhB,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcC,WAAW;QACjCgB,aAAa,EAAEjB,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcE,MAAM;QACnCxF,SAAS9D,MAAM8D,OAAO;QACtBwG,aAAa;YACXC,QAAQ1J;QACV;QACAF,eAAeA;QACf2B,KAAK,EAAE8G,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAc9G,KAAK;QAC1BkI,aAAa;QAGhBvC,oBAAAA,WAAAA,GAGH,OAAA,aAAA,CAACW,OAAAA;QAAIlD,IAAIxF;QAAe+J,MAAM;QAASpB,OAAO;YAAEnF,SAAS;QAAI;QAAGwG,cAAY;;AAEhF,GAAG;AACHpK,YAAY2K,WAAW,GAAG;AAC1B,4DAA4D;AAC5D3K,YAAY4K,YAAY,GAAG;IACzBvE,aAAa;AACf"}
+{"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":"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"}

package/lib-commonjs/components/GaugeChart/GaugeChart.js

@@ -503,7 +503,9 @@ const GaugeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const focusAttributes = (0, _reacttabster.useFocusableGroup)();
     return /*#__PURE__*/ _react.createElement("div", {
         className: classes.root,
-        ref: (el)=>_rootElem.current = el
+        ref: (el)=>{
+            _rootElem.current = el;
+        }
     }, /*#__PURE__*/ _react.createElement("div", {
         className: classes.chartWrapper,
         ...focusAttributes