npm - @fluentui/react-charts - Versions diffs - 9.1.9 → 9.1.10 - Mend

@fluentui/react-charts 9.1.9 → 9.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (306) hide show

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

	@@ -1 +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, element: SVGPathElement): void {\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","element","toString","xAxisCalloutData","_hoverCallback","e","updatePosition","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","getBoundingClientRect","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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":"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"}

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

	@@ -1 +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"],"~~rangeMappings":"","~~mappings":"AAAA,YAAYA,WAAW,QAAQ"}
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"}

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

	@@ -1 +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: 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"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~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,~~CAAiB~~;~~QACzEf~~,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"}
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"}

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

	@@ -1 +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":[],"~~rangeMappings":"","~~mappings":"AAiGA,WAUC"}
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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DonutChart';\nexport * from './DonutChart.types';\nexport * from '../../types/index';\n"],"names":[],"~~rangeMappings":";;","~~mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,oBAAoB"}
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"}

package/lib/components/FunnelChart/FunnelChart.js ADDED Viewed

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