@fluentui/react-charts 9.1.10 → 9.2.0

package/lib/components/DonutChart/DonutChart.js

@@ -2,11 +2,12 @@
 import { Pie } from './Pie/index';
 import { useDonutChartStyles } from './useDonutChartStyles.styles';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { getColorFromToken, getNextColor } from '../../utilities/index';
+import { getColorFromToken, getNextColor, useRtl } from '../../utilities/index';
 import { Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
+import { toImage } from '../../utilities/image-export-utils';
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
 // Create a DonutChart variant which uses these default styles and this styled subcomponent.
 /**
@@ -35,6 +36,8 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         y: 0
     });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const _legendsRef = React.useRef(null);
+    const _isRTL = useRtl();
     React.useEffect(()=>{
         _fitParentContainer();
     }, []);
@@ -49,7 +52,11 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         props.height
     ]);
     React.useImperativeHandle(props.componentRef, ()=>({
-            chartContainer: _rootElem.current
+            chartContainer: _rootElem.current,
+            toImage: (opts)=>{
+                var _legendsRef_current;
+                return toImage(_rootElem.current, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
+            }
         }), []);
     function _elevateToMinimums(data) {
         let sumOfData = 0;
@@ -95,7 +102,8 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
             legends: legendDataItems,
             centerLegends: true,
             overflowText: props.legendsOverflowText,
-            ...props.legendProps
+            ...props.legendProps,
+            legendRef: _legendsRef
         });
         return legends;
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["DonutChart.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { getColorFromToken, getNextColor } from '../../utilities/index';\nimport { Legend, Legends } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\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>('');\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\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      }),\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[]): JSX.Element {\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          action: () => {\n            if (selectedLegend === point.legend) {\n              setSelectedLegend('');\n            } else {\n              setSelectedLegend(point.legend!);\n            }\n          },\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend('');\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n        />\n      );\n      return legends;\n    }\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      let cx = 0;\n      let cy = 0;\n\n      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n      cx = targetRect.left + targetRect.width / 2;\n      cy = targetRect.top + targetRect.height / 2;\n      updatePosition(cx, cy);\n      setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);\n      setValue(data.data!.toString());\n      setLegend(data.legend);\n      setColor(data.color!);\n      setXCalloutValue(data.xAxisCalloutData!);\n      setYCalloutValue(data.yAxisCalloutData!);\n      setFocusedArcId(id);\n      setDataPointCalloutProps(data);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);\n        setValue(data.data!.toString());\n        setLegend(data.legend);\n        setColor(data.color!);\n        setXCalloutValue(data.xAxisCalloutData!);\n        setYCalloutValue(data.yAxisCalloutData!);\n        setDataPointCalloutProps(data);\n        updatePosition(e.clientX, e.clientY);\n      }\n    }\n    function _onBlur(): void {\n      setFocusedArcId('');\n    }\n\n    function _hoverLeave(): void {\n      /**/\n    }\n\n    function _handleChartMouseLeave() {\n      _calloutAnchorPoint = null;\n      setPopoverOpen(false);\n    }\n\n    function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n      const highlightedLegend = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {\n        let legendValue = valueInsideDonut;\n        data!.map((point: ChartDataPoint, index: number) => {\n          if (point.legend === highlightedLegend || (isPopoverOpen && point.legend === legend)) {\n            legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n          }\n          return;\n        });\n        return legendValue;\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     * Note: This won't work in case of multiple legends selection.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegend || activeLegend;\n    }\n\n    function _isChartEmpty(): boolean {\n      return !(\n        props.data &&\n        props.data.chartData &&\n        props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n      );\n    }\n\n    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n      return donutChartDataPoint\n        ? donutChartDataPoint.map((item, index) => {\n            let defaultColor: string;\n            if (typeof item.color === 'undefined') {\n              defaultColor = getNextColor(index, 0);\n            } else {\n              defaultColor = getColorFromToken(item.color);\n            }\n            return { ...item, defaultColor };\n          })\n        : [];\n    }\n\n    function updatePosition(newX: number, newY: number) {\n      const threshold = 1; // Set a threshold for movement\n      const { x, y } = clickPosition;\n      // Calculate the distance moved\n      const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n      // Update the position only if the distance moved is greater than the threshold\n      if (distance > threshold) {\n        setClickPosition({ x: newX, y: newY });\n        setPopoverOpen(true);\n      }\n    }\n\n    /**\n     * When screen resizes, along with screen, chart also auto adjusted.\n     * This method used to adjust height and width of the charts.\n     */\n    function _fitParentContainer(): void {\n      //_reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n        legendContainerHeight =\n          ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n            MIN_LEGEND_CONTAINER_HEIGHT) +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n      }\n      if (props.parentRef || _rootElem.current) {\n        const container = props.parentRef ? props.parentRef : _rootElem.current!;\n        const currentContainerWidth = container.getBoundingClientRect().width;\n        const currentContainerHeight =\n          container.getBoundingClientRect().height > legendContainerHeight\n            ? container.getBoundingClientRect().height\n            : 200;\n        const shouldResize =\n          _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n        if (shouldResize) {\n          setWidth(currentContainerWidth);\n          setHeight(currentContainerHeight - legendContainerHeight);\n        }\n      }\n      //});\n    }\n\n    const { data, hideLegend = false } = props;\n    const points = _addDefaultColors(data?.chartData);\n\n    const classes = useDonutChartStyles(props);\n\n    const legendBars = _createLegends(points);\n    const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n    const donutMarginVertical = props.hideLabels ? 0 : 40;\n    const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n    const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n    const valueInsideDonut = props.innerRadius !== 0 ? _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        <div className={classes.chartWrapper} {...focusAttributes}>\n          <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={!props.hideTooltip && isPopoverOpen}\n          legend={legend!}\n          YValue={value!}\n          color={color}\n          isCalloutForStack={false}\n          customCallout={{\n            customizedCallout: props.onRenderCalloutPerDataPoint\n              ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n            customCalloutProps: props.calloutPropsPerDataPoint\n              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n          }}\n          isCartesian={false}\n        />\n        {!hideLegend && (\n          <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","getColorFromToken","getNextColor","Legends","useId","useFocusableGroup","ChartPopover","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","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegend","setSelectedLegend","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","useEffect","_fitParentContainer","current","useImperativeHandle","componentRef","chartContainer","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","undefined","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","action","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegend","_getHighlightedLegend","legendValue","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","length","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"AAAA,oCAAoC,GACpC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,GAAG,QAAQ,cAAc;AAElC,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,iBAAiB,EAAEC,YAAY,QAAQ,wBAAwB;AACxE,SAAiBC,OAAO,QAAQ,cAAc;AAC9C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,YAAY,QAAQ,mCAAmC;AAEhE,MAAMC,8BAA8B;AAEpC,4FAA4F;AAC5F;;;CAGC,GACD,OAAO,MAAMC,2BAAuDX,MAAMY,UAAU,CAClF,CAACC,OAAOC;IACN,MAAMC,YAAYf,MAAMgB,MAAM,CAAwB;IACtD,MAAMC,YAAoBV,MAAM;IAChC,qDAAqD,GACrD,IAAIW;IACJ,IAAIC;IACJ,MAAMC,kBAAkBpB,MAAMgB,MAAM,CAAwB;IAC5D,MAAMK,WAAWrB,MAAMgB,MAAM,CAAsC,CAAC;IAEpE,MAAM,CAACM,OAAOC,SAAS,GAAGvB,MAAMwB,QAAQ,CAAqB;IAC7D,MAAM,CAACC,QAAQC,UAAU,GAAG1B,MAAMwB,QAAQ,CAAqB;IAC/D,MAAM,CAACG,QAAQC,SAAS,GAAG5B,MAAMwB,QAAQ,CAAqBX,MAAMgB,KAAK,IAAI;IAC7E,MAAM,CAACC,SAASC,UAAU,GAAG/B,MAAMwB,QAAQ,CAAqBX,MAAMmB,MAAM,IAAI;IAChF,MAAM,CAACC,cAAcC,gBAAgB,GAAGlC,MAAMwB,QAAQ,CAAS;IAC/D,MAAM,CAACW,OAAOC,SAAS,GAAGpC,MAAMwB,QAAQ,CAAqB;IAC7D,MAAM,CAACa,eAAeC,iBAAiB,GAAGtC,MAAMwB,QAAQ,CAAS;IACjE,MAAM,CAACe,eAAeC,iBAAiB,GAAGxC,MAAMwB,QAAQ,CAAS;IACjE,MAAM,CAACiB,gBAAgBC,kBAAkB,GAAG1C,MAAMwB,QAAQ,CAAS;IACnE,MAAM,CAACmB,cAAcC,gBAAgB,GAAG5C,MAAMwB,QAAQ,CAAS;IAC/D,MAAM,CAACqB,uBAAuBC,yBAAyB,GAAG9C,MAAMwB,QAAQ;IACxE,MAAM,CAACuB,eAAeC,iBAAiB,GAAGhD,MAAMwB,QAAQ,CAAC;QAAEyB,GAAG;QAAGC,GAAG;IAAE;IACtE,MAAM,CAACC,eAAeC,eAAe,GAAGpD,MAAMwB,QAAQ,CAAC;IAEvDxB,MAAMqD,SAAS,CAAC;QACdC;IACF,GAAG,EAAE;IAELtD,MAAMqD,SAAS,CAAC;QACd,IAAIhC,SAASkC,OAAO,CAACvB,MAAM,KAAKnB,MAAMmB,MAAM,IAAIX,SAASkC,OAAO,CAAC1B,KAAK,KAAKhB,MAAMgB,KAAK,EAAE;YACtFyB;QACF;QACAjC,SAASkC,OAAO,CAACvB,MAAM,GAAGnB,MAAMmB,MAAM;QACtCX,SAASkC,OAAO,CAAC1B,KAAK,GAAGhB,MAAMgB,KAAK;IACtC,GAAG;QAAChB,MAAMgB,KAAK;QAAEhB,MAAMmB,MAAM;KAAC;IAE9BhC,MAAMwD,mBAAmB,CACvB3C,MAAM4C,YAAY,EAClB,IAAO,CAAA;YACLC,gBAAgB3C,UAAUwC,OAAO;QACnC,CAAA,GACA,EAAE;IAGJ,SAASI,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,KAAKC,YAAYH,KAAKL,IAAI,CAAES,cAAc,KAAKJ,KAAKE,gBAAgB;YAC7F,IACAF;QAER;QACA,OAAOF;IACT;IACA,SAASO,eAAeC,SAA2B;QACjD,MAAMC,kBAAkBD,UAAUE,GAAG,CAAC,CAACC,OAAuBC;YAC5D,MAAMxC,QAAgBuC,MAAMvC,KAAK;YACjC,qDAAqD;YACrD,MAAMV,SAAiB;gBACrBmD,OAAOF,MAAMjD,MAAM;gBACnBU;gBACA0C,QAAQ;oBACN,IAAIpC,mBAAmBiC,MAAMjD,MAAM,EAAE;wBACnCiB,kBAAkB;oBACpB,OAAO;wBACLA,kBAAkBgC,MAAMjD,MAAM;oBAChC;gBACF;gBACAqD,aAAa;oBACXC;oBACA7C,gBAAgBwC,MAAMjD,MAAM;gBAC9B;gBACAuD,kBAAkB;oBAChB9C,gBAAgB;gBAClB;YACF;YACA,OAAOT;QACT;QACA,MAAMwD,wBACJ,oBAAC3E;YACC2E,SAAST;YACTU,eAAAA;YACAC,cAActE,MAAMuE,mBAAmB;YACtC,GAAGvE,MAAMwE,WAAW;;QAGzB,OAAOJ;IACT;IAEA,SAASK,eAAe1B,IAAoB,EAAE2B,EAAU,EAAEC,CAAmC;QAC3F,IAAIC,KAAK;QACT,IAAIC,KAAK;QAET,MAAMC,aAAa,AAACH,EAAEI,MAAM,CAAoBC,qBAAqB;QACrEJ,KAAKE,WAAWG,IAAI,GAAGH,WAAW9D,KAAK,GAAG;QAC1C6D,KAAKC,WAAWI,GAAG,GAAGJ,WAAW3D,MAAM,GAAG;QAC1CgE,eAAeP,IAAIC;QACnBtC,eAAeX,mBAAmB,MAAMA,mBAAmBmB,KAAKnC,MAAM;QACtEF,SAASqC,KAAKA,IAAI,CAAEqC,QAAQ;QAC5BvE,UAAUkC,KAAKnC,MAAM;QACrBW,SAASwB,KAAKzB,KAAK;QACnBG,iBAAiBsB,KAAKsC,gBAAgB;QACtC1D,iBAAiBoB,KAAKO,gBAAgB;QACtCvB,gBAAgB2C;QAChBzC,yBAAyBc;IAC3B;IAEA,SAASuC,eAAevC,IAAoB,EAAE4B,CAAmC;QAC/E,IAAItE,wBAAwB0C,MAAM;YAChC1C,sBAAsB0C;YACtBR,eAAeX,mBAAmB,MAAMA,mBAAmBmB,KAAKnC,MAAM;YACtEF,SAASqC,KAAKA,IAAI,CAAEqC,QAAQ;YAC5BvE,UAAUkC,KAAKnC,MAAM;YACrBW,SAASwB,KAAKzB,KAAK;YACnBG,iBAAiBsB,KAAKsC,gBAAgB;YACtC1D,iBAAiBoB,KAAKO,gBAAgB;YACtCrB,yBAAyBc;YACzBoC,eAAeR,EAAEY,OAAO,EAAEZ,EAAEa,OAAO;QACrC;IACF;IACA,SAASC;QACP1D,gBAAgB;IAClB;IAEA,SAAS2D;IACP,EAAE,GACJ;IAEA,SAASxB;QACP7D,sBAAsB;QACtBkC,eAAe;IACjB;IAEA,SAASoD,kBAAkBC,gBAA6C,EAAE7C,IAAsB;QAC9F,MAAM8C,oBAAoBC;QAC1B,IAAIF,qBAAqBrC,aAAcsC,CAAAA,sBAAsB,MAAMvD,aAAY,GAAI;YACjF,IAAIyD,cAAcH;YAClB7C,KAAMa,GAAG,CAAC,CAACC,OAAuBC;gBAChC,IAAID,MAAMjD,MAAM,KAAKiF,qBAAsBvD,iBAAiBuB,MAAMjD,MAAM,KAAKA,QAAS;oBACpFmF,cAAclC,MAAMP,gBAAgB,GAAGO,MAAMP,gBAAgB,GAAGO,MAAMd,IAAI;gBAC5E;gBACA;YACF;YACA,OAAOgD;QACT,OAAO;YACL,OAAOH;QACT;IACF;IAEA,SAASI,gBAAgBjD,IAAiC;QACxD,MAAMkD,eAAe3G,qBAAqByD,MAAM/C,MAAMkG,OAAO;QAC7D,IAAI,CAACD,cAAc;YACjB,OAAOlD;QACT;QACA,OAAOkD,yBAAAA,mCAAAA,aAAcb,QAAQ;IAC/B;IAEA;;;;;KAKC,GACD,SAASU;QACP,OAAOlE,kBAAkBR;IAC3B;IAEA,SAAS+E;QACP,OAAO,CACLnG,CAAAA,MAAM+C,IAAI,IACV/C,MAAM+C,IAAI,CAACW,SAAS,IACpB1D,MAAM+C,IAAI,CAACW,SAAS,CAAE0C,MAAM,CAAC,CAACC,IAAsBA,EAAEtD,IAAI,GAAI,GAAGuD,MAAM,GAAG,CAAA;IAE9E;IAEA,SAASC,kBAAkBC,mBAAsC;QAC/D,OAAOA,sBACHA,oBAAoB5C,GAAG,CAAC,CAACR,MAAMU;YAC7B,IAAI2C;YACJ,IAAI,OAAOrD,KAAK9B,KAAK,KAAK,aAAa;gBACrCmF,eAAejH,aAAasE,OAAO;YACrC,OAAO;gBACL2C,eAAelH,kBAAkB6D,KAAK9B,KAAK;YAC7C;YACA,OAAO;gBAAE,GAAG8B,IAAI;gBAAEqD;YAAa;QACjC,KACA,EAAE;IACR;IAEA,SAAStB,eAAeuB,IAAY,EAAEC,IAAY;QAChD,MAAMC,YAAY,GAAG,+BAA+B;QACpD,MAAM,EAAExE,CAAC,EAAEC,CAAC,EAAE,GAAGH;QACjB,+BAA+B;QAC/B,MAAM2E,WAAWC,KAAKC,IAAI,CAACD,KAAKE,GAAG,CAACN,OAAOtE,GAAG,KAAK0E,KAAKE,GAAG,CAACL,OAAOtE,GAAG;QACtE,+EAA+E;QAC/E,IAAIwE,WAAWD,WAAW;YACxBzE,iBAAiB;gBAAEC,GAAGsE;gBAAMrE,GAAGsE;YAAK;YACpCpE,eAAe;QACjB;IACF;IAEA;;;KAGC,GACD,SAASE;QACP,wCAAwC;QACxC,IAAIwE;QACJ,IAAIjH,MAAMkH,UAAU,EAAE;YACpB,iFAAiF;YACjFD,wBAAwB;QAC1B,OAAO;YACL,MAAME,gCAAgC5G,gBAAgBmC,OAAO,IAAI0E,iBAAiB7G,gBAAgBmC,OAAO;YACzGuE,wBACE,AAAC,CAAA,AAAC1G,gBAAgBmC,OAAO,IAAInC,gBAAgBmC,OAAO,CAACsC,qBAAqB,GAAG7D,MAAM,IACjFtB,2BAA0B,IAC5BwH,WAAW,AAACF,iCAAiCA,8BAA8BG,SAAS,IAAK,OACzFD,WAAW,AAACF,iCAAiCA,8BAA8BI,YAAY,IAAK;QAChG;QACA,IAAIvH,MAAMwH,SAAS,IAAItH,UAAUwC,OAAO,EAAE;YACxC,MAAM+E,YAAYzH,MAAMwH,SAAS,GAAGxH,MAAMwH,SAAS,GAAGtH,UAAUwC,OAAO;YACvE,MAAMgF,wBAAwBD,UAAUzC,qBAAqB,GAAGhE,KAAK;YACrE,MAAM2G,yBACJF,UAAUzC,qBAAqB,GAAG7D,MAAM,GAAG8F,wBACvCQ,UAAUzC,qBAAqB,GAAG7D,MAAM,GACxC;YACN,MAAMyG,eACJ9G,WAAW4G,yBAAyBzG,YAAY0G,yBAAyBV;YAC3E,IAAIW,cAAc;gBAChB7G,SAAS2G;gBACTxG,UAAUyG,yBAAyBV;YACrC;QACF;IACA,KAAK;IACP;IAEA,MAAM,EAAElE,IAAI,EAAEmE,aAAa,KAAK,EAAE,GAAGlH;IACrC,MAAM6H,SAAStB,kBAAkBxD,iBAAAA,2BAAAA,KAAMW,SAAS;IAEhD,MAAMoE,UAAUzI,oBAAoBW;IAEpC,MAAM+H,aAAatE,eAAeoE;IAClC,MAAMG,wBAAwBhI,MAAMiI,UAAU,GAAG,IAAI;IACrD,MAAMC,sBAAsBlI,MAAMiI,UAAU,GAAG,IAAI;IACnD,MAAME,cAAcrB,KAAKsB,GAAG,CAACtH,SAAUkH,uBAAuB/G,UAAWiH,uBAAuB;IAChG,MAAMxE,YAAYZ,mBAAmB+E,OAAOzB,MAAM,CAAC,CAACC,IAAsBA,EAAEtD,IAAI,IAAK;IACrF,MAAM6C,mBAAmB5F,MAAMqI,WAAW,KAAK,IAAI1C,kBAAkB3F,MAAM4F,gBAAgB,EAAGlC,aAAc;IAC5G,MAAM4E,kBAAkB3I;QAgCTK;IA/Bf,OAAO,CAACmG,gCACN,oBAACoC;QACCC,WAAWV,QAAQW,IAAI;QACvBC,KAAK,CAACC,WAAqCzI,UAAUwC,OAAO,GAAGiG;QAC/DC,cAAc1E;qBAEd,oBAACqE;QAAIC,WAAWV,QAAQe,YAAY;QAAG,GAAGP,eAAe;qBACvD,oBAACQ;QAAIN,WAAWV,QAAQiB,KAAK;QAAEC,YAAU,EAAEjG,iBAAAA,2BAAAA,KAAMkG,UAAU;QAAEjI,OAAOF;QAAQK,QAAQF;qBAClF,oBAAC7B;QACC4B,OAAOF;QACPK,QAAQF;QACRkH,aAAaA;QACbE,aAAarI,MAAMqI,WAAW;QAC9BtF,MAAMW;QACNwF,iBAAiBzE;QACjB0E,iBAAiB7D;QACjB8D,oBAAoB1D;QACpB2D,UAAUjJ;QACVkJ,gBAAgB7D;QAChB8D,WAAWzD;QACXhE,cAAcA,gBAAgB;QAC9B0H,MAAMxJ,MAAMwJ,IAAI;QAChB5D,kBAAkBI,gBAAgBJ;QAClC6D,qBAAqBzJ,MAAMyJ,mBAAmB;QAC9CxB,YAAYjI,MAAMiI,UAAU;wBAIlC,oBAACrI;QACC4B,eAAeA;QACfE,eAAeA;QACfwE,SAASlG,CAAAA,iBAAAA,MAAMkG,OAAO,cAAblG,4BAAAA,iBAAiB;QAC1BkC,eAAeA;QACfI,eAAe,CAACtC,MAAM0J,WAAW,IAAIpH;QACrC1B,QAAQA;QACR+I,QAAQlJ;QACRa,OAAOA;QACPsI,mBAAmB;QACnBC,eAAe;YACbC,mBAAmB9J,MAAM+J,2BAA2B,GAChD/J,MAAM+J,2BAA2B,CAAC/H,yBAClCuB;YACJyG,oBAAoBhK,MAAMiK,wBAAwB,GAC9CjK,MAAMiK,wBAAwB,CAACjI,yBAC/BuB;QACN;QACA2G,aAAa;QAEd,CAAChD,4BACA,oBAACqB;QAAIG,KAAK,CAAC/D,IAAuBpE,gBAAgBmC,OAAO,GAAGiC;QAAI6D,WAAWV,QAAQvH,eAAe;OAC/FwH,6BAKP,oBAACQ;QAAI7D,IAAIpE;QAAgB6J,MAAM;QAASC,OAAO;YAAEC,SAAS;QAAI;QAAGrB,cAAY;;AAEjF,GACA;AAEFlJ,WAAWwK,WAAW,GAAG;AACzBxK,WAAWyK,YAAY,GAAG;IACxBlC,aAAa;IACbJ,YAAY;AACd"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { getColorFromToken, getNextColor, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } 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>('');\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const _legendsRef = React.useRef<LegendContainer>(null);\n    const _isRTL: boolean = useRtl();\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\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[]): JSX.Element {\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          action: () => {\n            if (selectedLegend === point.legend) {\n              setSelectedLegend('');\n            } else {\n              setSelectedLegend(point.legend!);\n            }\n          },\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend('');\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      let cx = 0;\n      let cy = 0;\n\n      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n      cx = targetRect.left + targetRect.width / 2;\n      cy = targetRect.top + targetRect.height / 2;\n      updatePosition(cx, cy);\n      setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);\n      setValue(data.data!.toString());\n      setLegend(data.legend);\n      setColor(data.color!);\n      setXCalloutValue(data.xAxisCalloutData!);\n      setYCalloutValue(data.yAxisCalloutData!);\n      setFocusedArcId(id);\n      setDataPointCalloutProps(data);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);\n        setValue(data.data!.toString());\n        setLegend(data.legend);\n        setColor(data.color!);\n        setXCalloutValue(data.xAxisCalloutData!);\n        setYCalloutValue(data.yAxisCalloutData!);\n        setDataPointCalloutProps(data);\n        updatePosition(e.clientX, e.clientY);\n      }\n    }\n    function _onBlur(): void {\n      setFocusedArcId('');\n    }\n\n    function _hoverLeave(): void {\n      /**/\n    }\n\n    function _handleChartMouseLeave() {\n      _calloutAnchorPoint = null;\n      setPopoverOpen(false);\n    }\n\n    function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n      const highlightedLegend = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {\n        let legendValue = valueInsideDonut;\n        data!.map((point: ChartDataPoint, index: number) => {\n          if (point.legend === highlightedLegend || (isPopoverOpen && point.legend === legend)) {\n            legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n          }\n          return;\n        });\n        return legendValue;\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     * Note: This won't work in case of multiple legends selection.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegend || activeLegend;\n    }\n\n    function _isChartEmpty(): boolean {\n      return !(\n        props.data &&\n        props.data.chartData &&\n        props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n      );\n    }\n\n    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n      return donutChartDataPoint\n        ? donutChartDataPoint.map((item, index) => {\n            let defaultColor: string;\n            if (typeof item.color === 'undefined') {\n              defaultColor = getNextColor(index, 0);\n            } else {\n              defaultColor = getColorFromToken(item.color);\n            }\n            return { ...item, defaultColor };\n          })\n        : [];\n    }\n\n    function updatePosition(newX: number, newY: number) {\n      const threshold = 1; // Set a threshold for movement\n      const { x, y } = clickPosition;\n      // Calculate the distance moved\n      const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n      // Update the position only if the distance moved is greater than the threshold\n      if (distance > threshold) {\n        setClickPosition({ x: newX, y: newY });\n        setPopoverOpen(true);\n      }\n    }\n\n    /**\n     * When screen resizes, along with screen, chart also auto adjusted.\n     * This method used to adjust height and width of the charts.\n     */\n    function _fitParentContainer(): void {\n      //_reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n        legendContainerHeight =\n          ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n            MIN_LEGEND_CONTAINER_HEIGHT) +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n      }\n      if (props.parentRef || _rootElem.current) {\n        const container = props.parentRef ? props.parentRef : _rootElem.current!;\n        const currentContainerWidth = container.getBoundingClientRect().width;\n        const currentContainerHeight =\n          container.getBoundingClientRect().height > legendContainerHeight\n            ? container.getBoundingClientRect().height\n            : 200;\n        const shouldResize =\n          _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n        if (shouldResize) {\n          setWidth(currentContainerWidth);\n          setHeight(currentContainerHeight - legendContainerHeight);\n        }\n      }\n      //});\n    }\n\n    const { data, hideLegend = false } = props;\n    const points = _addDefaultColors(data?.chartData);\n\n    const classes = useDonutChartStyles(props);\n\n    const legendBars = _createLegends(points);\n    const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n    const donutMarginVertical = props.hideLabels ? 0 : 40;\n    const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n    const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n    const valueInsideDonut = props.innerRadius !== 0 ? _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        <div className={classes.chartWrapper} {...focusAttributes}>\n          <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={!props.hideTooltip && isPopoverOpen}\n          legend={legend!}\n          YValue={value!}\n          color={color}\n          isCalloutForStack={false}\n          customCallout={{\n            customizedCallout: props.onRenderCalloutPerDataPoint\n              ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n            customCalloutProps: props.calloutPropsPerDataPoint\n              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n          }}\n          isCartesian={false}\n        />\n        {!hideLegend && (\n          <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","getColorFromToken","getNextColor","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","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegend","setSelectedLegend","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","undefined","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","action","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","legendRef","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegend","_getHighlightedLegend","legendValue","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","length","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["Pie.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/jsx-no-bind */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { pie as d3Pie } from 'd3-shape';\nimport { PieProps } from './index';\nimport { Arc } from '../Arc/index';\nimport { ChartDataPoint } from '../index';\nimport { usePieStyles } from './usePieStyles.styles';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\nconst TEXT_PADDING: number = 5;\n\n// Create a Pie within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Pie component within Donut Chart.\n * {@docCategory PieDonutChart}\n */\nexport const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivElement, PieProps>(\n  (props, forwardedRef) => {\n    React.useEffect(() => {\n      wrapTextInsideDonut(classes.insideDonutString, props.innerRadius! * 2 - TEXT_PADDING);\n    }, []);\n\n    let _totalValue: number;\n    const classes = usePieStyles(props);\n    const pieForFocusRing = d3Pie()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0);\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      props.onFocusCallback!(data, id, e);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      props.hoverOnCallback!(data, e);\n    }\n\n    function _computeTotalValue() {\n      let totalValue = 0;\n      props.data.forEach((arc: ChartDataPoint) => {\n        totalValue += arc.data!;\n      });\n      return totalValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function arcGenerator(d: any, i: number, focusData: any, href?: string): JSX.Element {\n      const color = d && d.data && d.data.color;\n      return (\n        <Arc\n          key={i}\n          data={d}\n          focusData={focusData}\n          innerRadius={props.innerRadius}\n          outerRadius={props.outerRadius}\n          color={color!}\n          onFocusCallback={_focusCallback}\n          hoverOnCallback={_hoverCallback}\n          onBlurCallback={props.onBlurCallback}\n          hoverLeaveCallback={props.hoverLeaveCallback}\n          uniqText={props.uniqText}\n          activeArc={props.activeArc}\n          href={href}\n          calloutId={props.calloutId}\n          valueInsideDonut={props.valueInsideDonut}\n          focusedArcId={props.focusedArcId}\n          showLabelsInPercent={props.showLabelsInPercent}\n          totalValue={_totalValue}\n          hideLabels={props.hideLabels}\n        />\n      );\n    }\n\n    const { data } = props;\n    const focusData = pieForFocusRing(data.map(d => d.data!));\n\n    const piechart = d3Pie<ChartDataPoint>()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0.02)(data);\n    const translate = `translate(${props.width / 2}, ${props.height / 2})`;\n\n    _totalValue = _computeTotalValue();\n\n    return (\n      <g transform={translate}>\n        {piechart.map((d: any, i: number) => arcGenerator(d, i, focusData[i], props.href))}\n        {props.valueInsideDonut && (\n          <text y={5} textAnchor=\"middle\" dominantBaseline=\"middle\" className={classes.insideDonutString}>\n            {props.valueInsideDonut}\n          </text>\n        )}\n      </g>\n    );\n  },\n);\nPie.displayName = 'Pie';\n"],"names":["React","pie","d3Pie","Arc","usePieStyles","wrapTextInsideDonut","TEXT_PADDING","Pie","forwardRef","props","forwardedRef","useEffect","classes","insideDonutString","innerRadius","_totalValue","pieForFocusRing","sort","value","d","data","padAngle","_focusCallback","id","e","onFocusCallback","_hoverCallback","hoverOnCallback","_computeTotalValue","totalValue","forEach","arc","arcGenerator","i","focusData","href","color","key","outerRadius","onBlurCallback","hoverLeaveCallback","uniqText","activeArc","calloutId","valueInsideDonut","focusedArcId","showLabelsInPercent","hideLabels","map","piechart","translate","width","height","g","transform","text","y","textAnchor","dominantBaseline","className","displayName"],"mappings":"AAAA,8CAA8C,GAC9C,oCAAoC,GACpC,qDAAqD,GACrD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAOC,KAAK,QAAQ,WAAW;AAExC,SAASC,GAAG,QAAQ,eAAe;AAEnC,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,MAAMC,eAAuB;AAE7B,wGAAwG;AACxG;;;CAGC,GACD,OAAO,MAAMC,oBAAyCP,MAAMQ,UAAU,CACpE,CAACC,OAAOC;IACNV,MAAMW,SAAS,CAAC;QACdN,oBAAoBO,QAAQC,iBAAiB,EAAEJ,MAAMK,WAAW,GAAI,IAAIR;IAC1E,GAAG,EAAE;IAEL,IAAIS;IACJ,MAAMH,UAAUR,aAAaK;IAC7B,MAAMO,kBAAkBd,QACrBe,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC;IAEZ,SAASC,eAAeF,IAAoB,EAAEG,EAAU,EAAEC,CAAmC;QAC3Ff,MAAMgB,eAAe,CAAEL,MAAMG,IAAIC;IACnC;IAEA,SAASE,eAAeN,IAAoB,EAAEI,CAAmC;QAC/Ef,MAAMkB,eAAe,CAAEP,MAAMI;IAC/B;IAEA,SAASI;QACP,IAAIC,aAAa;QACjBpB,MAAMW,IAAI,CAACU,OAAO,CAAC,CAACC;YAClBF,cAAcE,IAAIX,IAAI;QACxB;QACA,OAAOS;IACT;IAEA,8DAA8D;IAC9D,SAASG,aAAab,CAAM,EAAEc,CAAS,EAAEC,SAAc,EAAEC,IAAa;QACpE,MAAMC,QAAQjB,KAAKA,EAAEC,IAAI,IAAID,EAAEC,IAAI,CAACgB,KAAK;QACzC,qBACE,oBAACjC;YACCkC,KAAKJ;YACLb,MAAMD;YACNe,WAAWA;YACXpB,aAAaL,MAAMK,WAAW;YAC9BwB,aAAa7B,MAAM6B,WAAW;YAC9BF,OAAOA;YACPX,iBAAiBH;YACjBK,iBAAiBD;YACjBa,gBAAgB9B,MAAM8B,cAAc;YACpCC,oBAAoB/B,MAAM+B,kBAAkB;YAC5CC,UAAUhC,MAAMgC,QAAQ;YACxBC,WAAWjC,MAAMiC,SAAS;YAC1BP,MAAMA;YACNQ,WAAWlC,MAAMkC,SAAS;YAC1BC,kBAAkBnC,MAAMmC,gBAAgB;YACxCC,cAAcpC,MAAMoC,YAAY;YAChCC,qBAAqBrC,MAAMqC,mBAAmB;YAC9CjB,YAAYd;YACZgC,YAAYtC,MAAMsC,UAAU;;IAGlC;IAEA,MAAM,EAAE3B,IAAI,EAAE,GAAGX;IACjB,MAAMyB,YAAYlB,gBAAgBI,KAAK4B,GAAG,CAAC7B,CAAAA,IAAKA,EAAEC,IAAI;IAEtD,MAAM6B,WAAW/C,QACde,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC,MAAMD;IAClB,MAAM8B,YAAY,CAAC,UAAU,EAAEzC,MAAM0C,KAAK,GAAG,EAAE,EAAE,EAAE1C,MAAM2C,MAAM,GAAG,EAAE,CAAC,CAAC;IAEtErC,cAAca;IAEd,qBACE,oBAACyB;QAAEC,WAAWJ;OACXD,SAASD,GAAG,CAAC,CAAC7B,GAAQc,IAAcD,aAAab,GAAGc,GAAGC,SAAS,CAACD,EAAE,EAAExB,MAAM0B,IAAI,IAC/E1B,MAAMmC,gBAAgB,kBACrB,oBAACW;QAAKC,GAAG;QAAGC,YAAW;QAASC,kBAAiB;QAASC,WAAW/C,QAAQC,iBAAiB;OAC3FJ,MAAMmC,gBAAgB;AAKjC,GACA;AACFrC,IAAIqD,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/DonutChart/Pie/Pie.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/jsx-no-bind */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { pie as d3Pie } from 'd3-shape';\nimport { PieProps } from './index';\nimport { Arc } from '../Arc/index';\nimport { ChartDataPoint } from '../index';\nimport { usePieStyles } from './usePieStyles.styles';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\nconst TEXT_PADDING: number = 5;\n\n// Create a Pie within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Pie component within Donut Chart.\n * {@docCategory PieDonutChart}\n */\nexport const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivElement, PieProps>(\n  (props, forwardedRef) => {\n    React.useEffect(() => {\n      wrapTextInsideDonut(classes.insideDonutString, props.innerRadius! * 2 - TEXT_PADDING);\n    }, []);\n\n    let _totalValue: number;\n    const classes = usePieStyles(props);\n    const pieForFocusRing = d3Pie()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0);\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      props.onFocusCallback!(data, id, e);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      props.hoverOnCallback!(data, e);\n    }\n\n    function _computeTotalValue() {\n      let totalValue = 0;\n      props.data.forEach((arc: ChartDataPoint) => {\n        totalValue += arc.data!;\n      });\n      return totalValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function arcGenerator(\n      d: any,\n      i: number,\n      focusData: any,\n      href?: string,\n    ): // eslint-disable-next-line @typescript-eslint/no-deprecated\n    JSX.Element {\n      const color = d && d.data && d.data.color;\n      return (\n        <Arc\n          key={i}\n          data={d}\n          focusData={focusData}\n          innerRadius={props.innerRadius}\n          outerRadius={props.outerRadius}\n          color={color!}\n          onFocusCallback={_focusCallback}\n          hoverOnCallback={_hoverCallback}\n          onBlurCallback={props.onBlurCallback}\n          hoverLeaveCallback={props.hoverLeaveCallback}\n          uniqText={props.uniqText}\n          activeArc={props.activeArc}\n          href={href}\n          calloutId={props.calloutId}\n          valueInsideDonut={props.valueInsideDonut}\n          focusedArcId={props.focusedArcId}\n          showLabelsInPercent={props.showLabelsInPercent}\n          totalValue={_totalValue}\n          hideLabels={props.hideLabels}\n        />\n      );\n    }\n\n    const { data } = props;\n    const focusData = pieForFocusRing(data.map(d => d.data!));\n\n    const piechart = d3Pie<ChartDataPoint>()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0.02)(data);\n    const translate = `translate(${props.width / 2}, ${props.height / 2})`;\n\n    _totalValue = _computeTotalValue();\n\n    return (\n      <g transform={translate}>\n        {piechart.map((d: any, i: number) => arcGenerator(d, i, focusData[i], props.href))}\n        {props.valueInsideDonut && (\n          <text y={5} textAnchor=\"middle\" dominantBaseline=\"middle\" className={classes.insideDonutString}>\n            {props.valueInsideDonut}\n          </text>\n        )}\n      </g>\n    );\n  },\n);\nPie.displayName = 'Pie';\n"],"names":["React","pie","d3Pie","Arc","usePieStyles","wrapTextInsideDonut","TEXT_PADDING","Pie","forwardRef","props","forwardedRef","useEffect","classes","insideDonutString","innerRadius","_totalValue","pieForFocusRing","sort","value","d","data","padAngle","_focusCallback","id","e","onFocusCallback","_hoverCallback","hoverOnCallback","_computeTotalValue","totalValue","forEach","arc","arcGenerator","i","focusData","href","color","key","outerRadius","onBlurCallback","hoverLeaveCallback","uniqText","activeArc","calloutId","valueInsideDonut","focusedArcId","showLabelsInPercent","hideLabels","map","piechart","translate","width","height","g","transform","text","y","textAnchor","dominantBaseline","className","displayName"],"mappings":"AAAA,8CAA8C,GAC9C,oCAAoC,GACpC,qDAAqD,GACrD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAOC,KAAK,QAAQ,WAAW;AAExC,SAASC,GAAG,QAAQ,eAAe;AAEnC,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,MAAMC,eAAuB;AAE7B,wGAAwG;AACxG;;;CAGC,GACD,OAAO,MAAMC,oBAAyCP,MAAMQ,UAAU,CACpE,CAACC,OAAOC;IACNV,MAAMW,SAAS,CAAC;QACdN,oBAAoBO,QAAQC,iBAAiB,EAAEJ,MAAMK,WAAW,GAAI,IAAIR;IAC1E,GAAG,EAAE;IAEL,IAAIS;IACJ,MAAMH,UAAUR,aAAaK;IAC7B,MAAMO,kBAAkBd,QACrBe,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC;IAEZ,SAASC,eAAeF,IAAoB,EAAEG,EAAU,EAAEC,CAAmC;QAC3Ff,MAAMgB,eAAe,CAAEL,MAAMG,IAAIC;IACnC;IAEA,SAASE,eAAeN,IAAoB,EAAEI,CAAmC;QAC/Ef,MAAMkB,eAAe,CAAEP,MAAMI;IAC/B;IAEA,SAASI;QACP,IAAIC,aAAa;QACjBpB,MAAMW,IAAI,CAACU,OAAO,CAAC,CAACC;YAClBF,cAAcE,IAAIX,IAAI;QACxB;QACA,OAAOS;IACT;IAEA,8DAA8D;IAC9D,SAASG,aACPb,CAAM,EACNc,CAAS,EACTC,SAAc,EACdC,IAAa;QAGb,MAAMC,QAAQjB,KAAKA,EAAEC,IAAI,IAAID,EAAEC,IAAI,CAACgB,KAAK;QACzC,qBACE,oBAACjC;YACCkC,KAAKJ;YACLb,MAAMD;YACNe,WAAWA;YACXpB,aAAaL,MAAMK,WAAW;YAC9BwB,aAAa7B,MAAM6B,WAAW;YAC9BF,OAAOA;YACPX,iBAAiBH;YACjBK,iBAAiBD;YACjBa,gBAAgB9B,MAAM8B,cAAc;YACpCC,oBAAoB/B,MAAM+B,kBAAkB;YAC5CC,UAAUhC,MAAMgC,QAAQ;YACxBC,WAAWjC,MAAMiC,SAAS;YAC1BP,MAAMA;YACNQ,WAAWlC,MAAMkC,SAAS;YAC1BC,kBAAkBnC,MAAMmC,gBAAgB;YACxCC,cAAcpC,MAAMoC,YAAY;YAChCC,qBAAqBrC,MAAMqC,mBAAmB;YAC9CjB,YAAYd;YACZgC,YAAYtC,MAAMsC,UAAU;;IAGlC;IAEA,MAAM,EAAE3B,IAAI,EAAE,GAAGX;IACjB,MAAMyB,YAAYlB,gBAAgBI,KAAK4B,GAAG,CAAC7B,CAAAA,IAAKA,EAAEC,IAAI;IAEtD,MAAM6B,WAAW/C,QACde,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC,MAAMD;IAClB,MAAM8B,YAAY,CAAC,UAAU,EAAEzC,MAAM0C,KAAK,GAAG,EAAE,EAAE,EAAE1C,MAAM2C,MAAM,GAAG,EAAE,CAAC,CAAC;IAEtErC,cAAca;IAEd,qBACE,oBAACyB;QAAEC,WAAWJ;OACXD,SAASD,GAAG,CAAC,CAAC7B,GAAQc,IAAcD,aAAab,GAAGc,GAAGC,SAAS,CAACD,EAAE,EAAExB,MAAM0B,IAAI,IAC/E1B,MAAMmC,gBAAgB,kBACrB,oBAACW;QAAKC,GAAG;QAAGC,YAAW;QAASC,kBAAiB;QAASC,WAAW/C,QAAQC,iBAAiB;OAC3FJ,MAAMmC,gBAAgB;AAKjC,GACA;AACFrC,IAAIqD,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Pie.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\n\nexport interface PieProps {\n  /**\n   * Width of the Pie.\n   */\n  width: number;\n  /**\n   * Height of the Pie.\n   */\n  height: number;\n  /**\n   * outerRadius of the Pie.\n   */\n  outerRadius: number;\n  /**\n   * innerRadius of the Pie.\n   */\n  innerRadius: number;\n  /**\n   * Data to render in the Pie.\n   */\n  data: ChartDataPoint[];\n  /**\n   * shape for pie.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  pie?: any;\n\n  pieForFocusRing?: any;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: PieStyles;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n}\n\nexport interface PieStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: string;\n\n  /**\n   * Style set for the inside donut string\n   */\n  insideDonutString: string;\n}\n"],"names":[],"mappings":"AAiGA,WAUC"}
+{"version":3,"sources":["../src/components/DonutChart/Pie/Pie.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\n\nexport interface PieProps {\n  /**\n   * Width of the Pie.\n   */\n  width: number;\n  /**\n   * Height of the Pie.\n   */\n  height: number;\n  /**\n   * outerRadius of the Pie.\n   */\n  outerRadius: number;\n  /**\n   * innerRadius of the Pie.\n   */\n  innerRadius: number;\n  /**\n   * Data to render in the Pie.\n   */\n  data: ChartDataPoint[];\n  /**\n   * shape for pie.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  pie?: any;\n\n  pieForFocusRing?: any;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: PieStyles;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n}\n\nexport interface PieStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: string;\n\n  /**\n   * Style set for the inside donut string\n   */\n  insideDonutString: string;\n}\n"],"names":[],"mappings":"AAiGA,WAUC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Pie';\nexport * from './Pie.types';\n"],"names":[],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,cAAc"}
+{"version":3,"sources":["../src/components/DonutChart/Pie/index.ts"],"sourcesContent":["export * from './Pie';\nexport * from './Pie.types';\n"],"names":[],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,cAAc"}

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

@@ -36,5 +36,4 @@ export const usePieStyles = props => {
     root: mergeClasses(donutPieClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
     insideDonutString: mergeClasses(donutPieClassNames.insideDonutString, baseStyles.insideDonutString, className, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.insideDonutString)
   };
-};
-//# sourceMappingURL=usePieStyles.styles.js.map
+};

package/lib/components/DonutChart/Pie/usePieStyles.styles.raw.js

@@ -0,0 +1,29 @@
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+/**
+ * @internal
+ */ export const donutPieClassNames = {
+    root: 'fui-donut-pie__root',
+    insideDonutString: 'fui-donut-pie__insideDonutString'
+};
+/**
+ * Base Styles
+ */ const useStyles = makeStyles({
+    root: {},
+    insideDonutString: {
+        ...typographyStyles.title2,
+        fill: tokens.colorNeutralForeground1,
+        forcedColorAdjust: 'auto'
+    }
+});
+/**
+ * Apply styling to the Pie inside donut chart component
+ */ export const usePieStyles = (props)=>{
+    var _props_styles, _props_styles1;
+    const { className } = props;
+    const baseStyles = useStyles();
+    return {
+        root: mergeClasses(donutPieClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        insideDonutString: mergeClasses(donutPieClassNames.insideDonutString, baseStyles.insideDonutString, className, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.insideDonutString)
+    };
+};

package/lib/components/DonutChart/Pie/usePieStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DonutChart/Pie/usePieStyles.styles.ts"],"sourcesContent":["import { PieProps, PieStyles } from './Pie.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const donutPieClassNames: SlotClassNames<PieStyles> = {\n  root: 'fui-donut-pie__root',\n  insideDonutString: 'fui-donut-pie__insideDonutString',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {},\n  insideDonutString: {\n    ...typographyStyles.title2,\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n});\n\n/**\n * Apply styling to the Pie inside donut chart component\n */\nexport const usePieStyles = (props: PieProps): PieStyles => {\n  const { className } = props;\n\n  const baseStyles = useStyles();\n  return {\n    root: mergeClasses(donutPieClassNames.root, baseStyles.root, className, props.styles?.root),\n    insideDonutString: mergeClasses(\n      donutPieClassNames.insideDonutString,\n      baseStyles.insideDonutString,\n      className,\n      props.styles?.insideDonutString,\n    ),\n  };\n};\n"],"names":["tokens","typographyStyles","makeStyles","mergeClasses","donutPieClassNames","root","insideDonutString","useStyles","title2","fill","colorNeutralForeground1","forcedColorAdjust","usePieStyles","props","className","baseStyles","styles"],"mappings":"AACA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D;;CAEC,GACD,OAAO,MAAMC,qBAAgD;IAC3DC,MAAM;IACNC,mBAAmB;AACrB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BG,MAAM,CAAC;IACPC,mBAAmB;QACjB,GAAGL,iBAAiBO,MAAM;QAC1BC,MAAMT,OAAOU,uBAAuB;QACpCC,mBAAmB;IACrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,eAAe,CAACC;QAK+CA,eAKtEA;IATJ,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,MAAME,aAAaR;IACnB,OAAO;QACLF,MAAMF,aAAaC,mBAAmBC,IAAI,EAAEU,WAAWV,IAAI,EAAES,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAcR,IAAI;QAC1FC,mBAAmBH,aACjBC,mBAAmBE,iBAAiB,EACpCS,WAAWT,iBAAiB,EAC5BQ,YACAD,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcP,iBAAiB;IAEnC;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DonutChart';\nexport * from './DonutChart.types';\nexport * from '../../types/index';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,oBAAoB"}
+{"version":3,"sources":["../src/components/DonutChart/index.ts"],"sourcesContent":["export * from './DonutChart';\nexport * from './DonutChart.types';\nexport * from '../../types/index';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,oBAAoB"}

package/lib/components/DonutChart/useDonutChartStyles.styles.js

@@ -55,5 +55,4 @@ export const useDonutChartStyles = props => {
     legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
     chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper)
   };
-};
-//# sourceMappingURL=useDonutChartStyles.styles.js.map
+};

package/lib/components/DonutChart/useDonutChartStyles.styles.raw.js

@@ -0,0 +1,45 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+/**
+ * @internal
+ */ export const donutClassNames = {
+    root: 'fui-donut__root',
+    chart: 'fui-donut__chart',
+    legendContainer: 'fui-donut__legendContainer',
+    chartWrapper: 'fui-donut__chartWrapper'
+};
+/**
+ * Base Styles
+ */ const useStyles = makeStyles({
+    root: {
+        // alignItems: 'center',
+        ...typographyStyles.body1,
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%'
+    },
+    chart: {
+        boxSizing: 'content-box',
+        alignmentAdjust: 'center',
+        display: 'block',
+        overflow: 'visible'
+    },
+    legendContainer: {
+        paddingTop: tokens.spacingVerticalL,
+        width: '100%'
+    }
+});
+/**
+ * Apply styling to the DonutChart component
+ */ export const useDonutChartStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3;
+    const { className } = props;
+    const baseStyles = useStyles();
+    return {
+        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
+        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
+        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper)
+    };
+};

package/lib/components/DonutChart/useDonutChartStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DonutChart/useDonutChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DonutChartProps, DonutChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const donutClassNames: SlotClassNames<DonutChartStyles> = {\n  root: 'fui-donut__root',\n  chart: 'fui-donut__chart',\n  legendContainer: 'fui-donut__legendContainer',\n  chartWrapper: 'fui-donut__chartWrapper',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    // alignItems: 'center',\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n  },\n  chart: {\n    boxSizing: 'content-box',\n    alignmentAdjust: 'center',\n    display: 'block',\n    overflow: 'visible',\n  },\n  legendContainer: {\n    paddingTop: tokens.spacingVerticalL,\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the DonutChart component\n */\nexport const useDonutChartStyles = (props: DonutChartProps): DonutChartStyles => {\n  const { className } = props;\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(donutClassNames.root, baseStyles.root, className, props.styles?.root),\n    chart: mergeClasses(donutClassNames.chart, baseStyles.chart, props.styles?.chart),\n    legendContainer: mergeClasses(\n      donutClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n    chartWrapper: mergeClasses(donutClassNames.chartWrapper, props.styles?.chartWrapper),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","donutClassNames","root","chart","legendContainer","chartWrapper","useStyles","body1","display","flexDirection","width","height","boxSizing","alignmentAdjust","overflow","paddingTop","spacingVerticalL","useDonutChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE;;CAEC,GACD,OAAO,MAAMC,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,iBAAiB;IACjBC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BK,MAAM;QACJ,wBAAwB;QACxB,GAAGF,iBAAiBO,KAAK;QACzBC,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,QAAQ;IACV;IACAR,OAAO;QACLS,WAAW;QACXC,iBAAiB;QACjBL,SAAS;QACTM,UAAU;IACZ;IACAV,iBAAiB;QACfW,YAAYhB,OAAOiB,gBAAgB;QACnCN,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,sBAAsB,CAACC;QAKqCA,eACRA,gBAI3DA,gBAEuDA;IAX3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAad;IAEnB,OAAO;QACLJ,MAAMJ,aAAaG,gBAAgBC,IAAI,EAAEkB,WAAWlB,IAAI,EAAEiB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAchB,IAAI;QACvFC,OAAOL,aAAaG,gBAAgBE,KAAK,EAAEiB,WAAWjB,KAAK,GAAEe,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcf,KAAK;QAChFC,iBAAiBN,aACfG,gBAAgBG,eAAe,EAC/BgB,WAAWhB,eAAe,GAC1Bc,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcd,eAAe;QAE/BC,cAAcP,aAAaG,gBAAgBI,YAAY,GAAEa,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcb,YAAY;IACrF;AACF,EAAE"}

package/lib/components/FunnelChart/FunnelChart.js

@@ -8,6 +8,7 @@ import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { getContrastTextColor } from '../../utilities/colors';
 import { useFunnelChartStyles } from './useFunnelChartStyles.styles';
 import { getHorizontalFunnelSegmentGeometry, getVerticalFunnelSegmentGeometry, getSegmentTextProps, getStackedHorizontalFunnelSegmentGeometry, getStackedVerticalFunnelSegmentGeometry } from './funnelGeometry';
+import { toImage } from '../../utilities/image-export-utils';
 export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     var _props_legendProps;
     const _emptyChartId = useId('_FunnelChart_empty');
@@ -22,6 +23,7 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
     const chartContainerRef = React.useRef(null);
     const isStacked = isStackedFunnelData(props.data);
+    const _legendsRef = React.useRef(null);
     React.useEffect(()=>{
         var _props_legendProps;
         if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) {
@@ -30,6 +32,12 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     }, [
         (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends
     ]);
+    React.useImperativeHandle(props.componentRef, ()=>({
+            toImage: (opts)=>{
+                var _legendsRef_current;
+                return toImage(chartContainerRef.current, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, isRTL, opts);
+            }
+        }), []);
     function _handleHover(data, mouseEvent) {
         mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
         updatePosition(mouseEvent.clientX, mouseEvent.clientY);
@@ -320,7 +328,8 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
             legends: legends,
             centerLegends: true,
             onChange: _onLegendSelectionChangeCallback,
-            ...props.legendProps
+            ...props.legendProps,
+            legendRef: _legendsRef
         }));
     }
     function _isChartEmpty() {

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

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

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

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