npm - @fluentui/react-charts - Versions diffs - 9.3.2 → 9.3.4 - Mend

@fluentui/react-charts 9.3.2 → 9.3.4

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 (145) hide show

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

@@ -17,11 +17,8 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     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 [refSelected, setRefSelected] = React.useState(null);
     const chartContainerRef = React.useRef(null);
     const isStacked = isStackedFunnelData(props.data);
     const _legendsRef = React.useRef(null);
@@ -39,48 +36,38 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
                 return toImage(chartContainerRef.current, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, isRTL, opts);
             }
         }), []);
-    function _handleHover(data, mouseEvent) {
+    function _handleHover(data, mouseEvent, targetElement) {
         mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
-        updatePosition(mouseEvent.clientX, mouseEvent.clientY);
         setCalloutData(data);
+        setRefSelected(targetElement);
         setPopoverOpen(true);
     }
-    function _handleFocus(data, focusEvent) {
+    function _handleFocus(data, focusEvent, targetElement) {
         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);
+        setRefSelected(targetElement);
         setPopoverOpen(true);
     }
-    function _handleStackedHover(stage, subValue, mouseEvent) {
+    function _handleStackedHover(stage, subValue, mouseEvent, targetElement) {
         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
         });
+        setRefSelected(targetElement);
         setPopoverOpen(true);
     }
-    function _handleStackedFocus(stage, subValue, focusEvent) {
+    function _handleStackedFocus(stage, subValue, focusEvent, targetElement) {
         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
         });
+        setRefSelected(targetElement);
         setPopoverOpen(true);
     }
     function _handleMouseOut() {
@@ -113,22 +100,23 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     function noLegendHighlighted() {
         return getHighlightedLegend().length === 0;
     }
-    function _getEventHandlerProps(data, opacity) {
+    function _getEventHandlerProps(data, opacity, segmentId) {
+        const targetElement = document.getElementById(segmentId);
         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),
+                onMouseOver: opacity == 1 ? (event)=>_handleStackedHover(data.stage, data.subValue, event, targetElement) : undefined,
+                onMouseMove: opacity == 1 ? (event)=>_handleStackedHover(data.stage, data.subValue, event, targetElement) : undefined,
+                onFocus: (event)=>_handleStackedFocus(data.stage, data.subValue, event, targetElement),
                 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),
+                onMouseOver: opacity == 1 ? (event)=>_handleHover(data, event, targetElement) : undefined,
+                onMouseMove: opacity == 1 ? (event)=>_handleHover(data, event, targetElement) : undefined,
+                onFocus: (event)=>_handleFocus(data, event, targetElement),
                 onBlur: ()=>_handleMouseOut(),
                 onMouseOut: ()=>_handleMouseOut()
             };
@@ -154,11 +142,13 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
         return textElement;
     }
     function _renderFunnelSegment({ key, pathD, fill, opacity, textProps, data, tabIndex }) {
-        const eventHandlers = _getEventHandlerProps(data, opacity);
+        const segmentId = `funnel-segment-${key}`;
+        const eventHandlers = _getEventHandlerProps(data, opacity, segmentId);
         const textColor = getContrastTextColor(fill);
         return /*#__PURE__*/ React.createElement("g", {
             key: key
         }, /*#__PURE__*/ React.createElement("path", {
+            id: segmentId,
             d: pathD,
             fill: fill,
             opacity: opacity,
@@ -338,20 +328,6 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     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,
@@ -386,7 +362,9 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
         XValue: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.hoverXValue,
         yCalloutValue: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.YValue,
         culture: props.culture,
-        clickPosition: clickPosition,
+        positioning: {
+            target: refSelected
+        },
         isPopoverOpen: isPopoverOpen,
         color: calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.color,
         isCartesian: false

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

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

package/lib/components/FunnelChart/useFunnelChartStyles.styles.js CHANGED Viewed

@@ -22,7 +22,8 @@ const useStyles = /*#__PURE__*/__styles({
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
     Bhrd7zp: "figsok6",
-    qhf8xq: "f10pi13n"
+    qhf8xq: "f10pi13n",
+    fsow6f: ["f1o700av", "fes3tcz"]
   },
   chart: {
     mc9l5x: "ftgm304",
@@ -40,7 +41,7 @@ const useStyles = /*#__PURE__*/__styles({
     B2u0y6b: "f15g8at8"
   }
 }, {
-  d: [".f122n59{align-items:center;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f10pi13n{position:relative;}", ".ftgm304{display:block;}", ".f1aehjj5{pointer-events:none;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".f15g8at8{max-width:238px;}"]
+  d: [".f122n59{align-items:center;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f10pi13n{position:relative;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".ftgm304{display:block;}", ".f1aehjj5{pointer-events:none;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".f15g8at8{max-width:238px;}"]
 });
 /**
  * Apply styling to the FunnelChart component

package/lib/components/FunnelChart/useFunnelChartStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","funnelClassNames","root","chart","text","calloutContentRoot","useStyles","Bt984gj","a9b677","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","qhf8xq","mc9l5x","Bkecrkj","Bkfmm31","B2u0y6b","d","useFunnelChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","className","baseStyles","styles"],"sources":["useFunnelChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/*\n @internal\n / export const funnelClassNames = {\n root: 'fui-funnel__root',\n chart: 'fui-funnel__chart',\n text: 'fui-funnel__text',\n calloutContentRoot: 'fui-funnel__callout-content-root'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n width: '100%',\n height: '100%',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n position: 'relative'\n },\n chart: {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n text: {\n pointerEvents: 'none',\n fontWeight: tokens.fontWeightSemibold,\n fill: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300\n },\n calloutContentRoot: {\n maxWidth: '238px'\n }\n});\n/\n Apply styling to the FunnelChart component\n */ export const useFunnelChartStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2, _props_styles3;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n text: mergeClasses(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.text),\n calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)\n };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,GAAG;EAChCC,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE,mBAAmB;EAC1BC,IAAI,EAAE,kBAAkB;EACxBC,kBAAkB,EAAE;AACxB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;~~EAAAV~~,KAAA;~~IAAAW~~,MAAA;~~IAAAN~~,MAAA;IAAAC,OAAA;EAAA;EAAAL,IAAA;~~IAAAW~~,OAAA;~~IAAAH~~,OAAA;~~IAAAI~~,OAAA;~~IAAAN~~,OAAA;IAAAC,OAAA;EAAA;EAAAN,kBAAA;~~IAAAY~~,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,~~CAyBrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAIC,KAAK,IAAG;EAC7C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACjE,MAAM;IAAEC;EAAU,CAAC,GAAGL,KAAK;EAC3B,MAAMM,UAAU,~~GAAGpB~~,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHJ,IAAI,EAAEH,YAAY,CAACE,gBAAgB,CAACC,IAAI,~~EAAEwB~~,UAAU,~~CAACxB~~,IAAI,~~EAAEuB~~,SAAS,EAAE,CAACJ,aAAa,GAAGD,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIN,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,~~CAACnB~~,IAAI,CAAC;IACxKC,KAAK,EAAEJ,YAAY,CAACE,gBAAgB,CAACE,KAAK,~~EAAEuB~~,UAAU,~~CAACvB~~,KAAK,EAAE,~~CAACmB~~,cAAc,GAAGF,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACnB~~,KAAK,CAAC;IACpKC,IAAI,EAAEL,YAAY,CAACE,gBAAgB,CAACG,IAAI,~~EAAEsB~~,UAAU,~~CAACtB~~,IAAI,EAAE,~~CAACmB~~,cAAc,GAAGH,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACnB~~,IAAI,CAAC;IAChKC,kBAAkB,EAAEN,YAAY,~~CAAC2B~~,UAAU,~~CAACrB~~,kBAAkB,EAAE,~~CAACmB~~,cAAc,GAAGJ,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACnB~~,kBAAkB;EACtL,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","funnelClassNames","root","chart","text","calloutContentRoot","useStyles","Bt984gj","a9b677","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","qhf8xq","fsow6f","mc9l5x","Bkecrkj","Bkfmm31","B2u0y6b","d","useFunnelChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","className","baseStyles","styles"],"sources":["useFunnelChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/*\n @internal\n / export const funnelClassNames = {\n root: 'fui-funnel__root',\n chart: 'fui-funnel__chart',\n text: 'fui-funnel__text',\n calloutContentRoot: 'fui-funnel__callout-content-root'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n width: '100%',\n height: '100%',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n position: 'relative',\n textAlign: 'left'\n },\n chart: {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n text: {\n pointerEvents: 'none',\n fontWeight: tokens.fontWeightSemibold,\n fill: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300\n },\n calloutContentRoot: {\n maxWidth: '238px'\n }\n});\n/\n Apply styling to the FunnelChart component\n */ export const useFunnelChartStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2, _props_styles3;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n text: mergeClasses(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.text),\n calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)\n };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,gBAAgB,GAAG;EAChCC,IAAI,EAAE,kBAAkB;EACxBC,KAAK,EAAE,mBAAmB;EAC1BC,IAAI,EAAE,kBAAkB;EACxBC,kBAAkB,EAAE;AACxB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAX,KAAA;IAAAY,MAAA;IAAAP,MAAA;IAAAC,OAAA;EAAA;EAAAL,IAAA;IAAAY,OAAA;IAAAJ,OAAA;IAAAK,OAAA;IAAAP,OAAA;IAAAC,OAAA;EAAA;EAAAN,kBAAA;IAAAa,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CA0BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAIC,KAAK,IAAG;EAC7C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACjE,MAAM;IAAEC;EAAU,CAAC,GAAGL,KAAK;EAC3B,MAAMM,UAAU,GAAGrB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHJ,IAAI,EAAEH,YAAY,CAACE,gBAAgB,CAACC,IAAI,EAAEyB,UAAU,CAACzB,IAAI,EAAEwB,SAAS,EAAE,CAACJ,aAAa,GAAGD,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIN,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACpB,IAAI,CAAC;IACxKC,KAAK,EAAEJ,YAAY,CAACE,gBAAgB,CAACE,KAAK,EAAEwB,UAAU,CAACxB,KAAK,EAAE,CAACoB,cAAc,GAAGF,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,KAAK,CAAC;IACpKC,IAAI,EAAEL,YAAY,CAACE,gBAAgB,CAACG,IAAI,EAAEuB,UAAU,CAACvB,IAAI,EAAE,CAACoB,cAAc,GAAGH,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,IAAI,CAAC;IAChKC,kBAAkB,EAAEN,YAAY,CAAC4B,UAAU,CAACtB,kBAAkB,EAAE,CAACoB,cAAc,GAAGJ,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,kBAAkB;EACtL,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/FunnelChart/useFunnelChartStyles.styles.raw.js CHANGED Viewed

@@ -19,7 +19,8 @@ import { tokens } from '@fluentui/react-theme';
         fontFamily: tokens.fontFamilyBase,
         fontSize: tokens.fontSizeBase300,
         fontWeight: tokens.fontWeightRegular,
-        position: 'relative'
+        position: 'relative',
+        textAlign: 'left'
     },
     chart: {
         display: 'block',

package/lib/components/FunnelChart/useFunnelChartStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/FunnelChart/useFunnelChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { FunnelChartProps, FunnelChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/*\n @internal\n /\nexport const funnelClassNames: SlotClassNames<FunnelChartStyles> = {\n root: 'fui-funnel__root',\n chart: 'fui-funnel__chart',\n text: 'fui-funnel__text',\n calloutContentRoot: 'fui-funnel__callout-content-root',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n width: '100%',\n height: '100%',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n position: 'relative',\n },\n chart: {\n display: 'block',\n width: '100%',\n height: '100%',\n },\n text: {\n pointerEvents: 'none',\n fontWeight: tokens.fontWeightSemibold,\n fill: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n },\n calloutContentRoot: {\n maxWidth: '238px',\n },\n});\n\n/\n Apply styling to the FunnelChart component\n */\nexport const useFunnelChartStyles = (props: FunnelChartProps): FunnelChartStyles => {\n const { className } = props;\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(funnelClassNames.root, baseStyles.root, className, props.styles?.root),\n chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, props.styles?.chart),\n text: mergeClasses(funnelClassNames.text, baseStyles.text, props.styles?.text),\n calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, props.styles?.calloutContentRoot),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","funnelClassNames","root","chart","text","calloutContentRoot","useStyles","alignItems","width","height","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","position","display","pointerEvents","fontWeightSemibold","fill","colorNeutralForeground1","maxWidth","useFunnelChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C;;CAEC,GACD,OAAO,MAAMC,mBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BI,MAAM;QACJK,YAAY;QACZC,OAAO;QACPC,QAAQ;QACRC,YAAYV,OAAOW,cAAc;QACjCC,UAAUZ,OAAOa,eAAe;QAChCC,YAAYd,OAAOe,iBAAiB;QACpCC,UAAU;~~IACZ~~;~~IACAb~~,OAAO;~~QACLc~~,SAAS;~~QACTT~~,OAAO;QACPC,QAAQ;IACV;IACAL,MAAM;~~QACJc~~,eAAe;~~QACfJ~~,YAAYd,~~OAAOmB~~,kBAAkB;QACrCC,~~MAAMpB~~,~~OAAOqB~~,uBAAuB;~~QACpCX~~,YAAYV,OAAOW,cAAc;QACjCC,UAAUZ,OAAOa,eAAe;IAClC;IACAR,oBAAoB;~~QAClBiB~~,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;QAKqCA,eACRA,gBACHA,gBACKA;IAPlE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,~~aAAapB~~;IAEnB,OAAO;QACLJ,MAAMH,aAAaE,iBAAiBC,IAAI,~~EAAEwB~~,~~WAAWxB~~,IAAI,~~EAAEuB~~,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,~~cAActB~~,IAAI;QACxFC,OAAOJ,aAAaE,iBAAiBE,KAAK,~~EAAEuB~~,~~WAAWvB~~,KAAK,~~GAAEqB~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcrB~~,KAAK;QACjFC,MAAML,aAAaE,iBAAiBG,IAAI,~~EAAEsB~~,~~WAAWtB~~,IAAI,~~GAAEoB~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcpB~~,IAAI;QAC7EC,oBAAoBN,~~aAAa2B~~,~~WAAWrB~~,kBAAkB,~~GAAEmB~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcnB~~,kBAAkB;IAClG;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/FunnelChart/useFunnelChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { FunnelChartProps, FunnelChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/*\n @internal\n /\nexport const funnelClassNames: SlotClassNames<FunnelChartStyles> = {\n root: 'fui-funnel__root',\n chart: 'fui-funnel__chart',\n text: 'fui-funnel__text',\n calloutContentRoot: 'fui-funnel__callout-content-root',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n width: '100%',\n height: '100%',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n position: 'relative',\n textAlign: 'left',\n },\n chart: {\n display: 'block',\n width: '100%',\n height: '100%',\n },\n text: {\n pointerEvents: 'none',\n fontWeight: tokens.fontWeightSemibold,\n fill: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n },\n calloutContentRoot: {\n maxWidth: '238px',\n },\n});\n\n/\n Apply styling to the FunnelChart component\n */\nexport const useFunnelChartStyles = (props: FunnelChartProps): FunnelChartStyles => {\n const { className } = props;\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(funnelClassNames.root, baseStyles.root, className, props.styles?.root),\n chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, props.styles?.chart),\n text: mergeClasses(funnelClassNames.text, baseStyles.text, props.styles?.text),\n calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, props.styles?.calloutContentRoot),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","funnelClassNames","root","chart","text","calloutContentRoot","useStyles","alignItems","width","height","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","position","textAlign","display","pointerEvents","fontWeightSemibold","fill","colorNeutralForeground1","maxWidth","useFunnelChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C;;CAEC,GACD,OAAO,MAAMC,mBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BI,MAAM;QACJK,YAAY;QACZC,OAAO;QACPC,QAAQ;QACRC,YAAYV,OAAOW,cAAc;QACjCC,UAAUZ,OAAOa,eAAe;QAChCC,YAAYd,OAAOe,iBAAiB;QACpCC,UAAU;QACVC,WAAW;IACb;IACAd,OAAO;QACLe,SAAS;QACTV,OAAO;QACPC,QAAQ;IACV;IACAL,MAAM;QACJe,eAAe;QACfL,YAAYd,OAAOoB,kBAAkB;QACrCC,MAAMrB,OAAOsB,uBAAuB;QACpCZ,YAAYV,OAAOW,cAAc;QACjCC,UAAUZ,OAAOa,eAAe;IAClC;IACAR,oBAAoB;QAClBkB,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;QAKqCA,eACRA,gBACHA,gBACKA;IAPlE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAarB;IAEnB,OAAO;QACLJ,MAAMH,aAAaE,iBAAiBC,IAAI,EAAEyB,WAAWzB,IAAI,EAAEwB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAcvB,IAAI;QACxFC,OAAOJ,aAAaE,iBAAiBE,KAAK,EAAEwB,WAAWxB,KAAK,GAAEsB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAActB,KAAK;QACjFC,MAAML,aAAaE,iBAAiBG,IAAI,EAAEuB,WAAWvB,IAAI,GAAEqB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcrB,IAAI;QAC7EC,oBAAoBN,aAAa4B,WAAWtB,kBAAkB,GAAEoB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcpB,kBAAkB;IAClG;AACF,EAAE"}

package/lib/components/GaugeChart/GaugeChart.js CHANGED Viewed

@@ -96,14 +96,10 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
     const [hoveredLegend, setHoveredLegend] = React.useState('');
     const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const [focusedElement, setFocusedElement] = React.useState('');
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [clickPosition, setClickPosition] = React.useState({
-        x: 0,
-        y: 0
-    });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
     const [hoverXValue, setHoverXValue] = React.useState('');
     const [hoverYValues, setHoverYValues] = React.useState([]);
+    const [refSelected, setRefSelected] = React.useState(null);
     const prevPropsRef = React.useRef(null);
     const _width = props.width || width;
     const _height = props.height || height;
@@ -214,6 +210,7 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
         const strokeWidth = 2;
         const halfStrokeWidth = strokeWidth / 2;
         const needleLength = _outerRadius - _innerRadius + EXTRA_NEEDLE_LENGTH;
+        const needleId = `gauge-chart-needle`;
         return /*#__PURE__*/ React.createElement("g", {
             transform: `rotate(${rtlSafeNeedleRotation}, 0, 0)`
         }, /*#__PURE__*/ React.createElement("path", {
@@ -224,14 +221,15 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
             L 0,${halfStrokeWidth + 3}
             A ${halfStrokeWidth + 3},${halfStrokeWidth + 3},0,0,0,0,${-halfStrokeWidth - 3}
           `,
+            id: needleId,
             strokeWidth: strokeWidth,
             className: classes.needle,
             transform: `translate(${-_innerRadius + EXTRA_NEEDLE_LENGTH / 2})`,
             "data-is-focusable": true,
-            onFocus: (e)=>_handleFocus(e, 'Needle'),
+            onFocus: (e)=>_handleFocus(e, 'Needle', needleId),
             onBlur: _handleBlur,
-            onMouseEnter: (e)=>_handleMouseOver(e, 'Needle'),
-            onMouseMove: (e)=>_handleMouseOver(e, 'Needle'),
+            onMouseEnter: (e)=>_handleMouseOver(e, 'Needle', needleId),
+            onMouseMove: (e)=>_handleMouseOver(e, 'Needle', needleId),
             role: "img",
             "aria-label": 'Current value: ' + getChartValueLabel(props.chartValue, _minValue, _maxValue, props.chartValueFormat)
         }));
@@ -295,14 +293,14 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
         ] : [];
     }
     // eslint-disable-next-line @typescript-eslint/no-shadow
-    function _handleFocus(focusEvent, focusedElement) {
-        _showCallout(focusEvent, focusedElement, true);
+    function _handleFocus(focusEvent, focusedElement, elementId) {
+        _showCallout(focusEvent, focusedElement, true, elementId);
     }
     function _handleBlur() {
         _hideCallout(true);
     }
-    function _handleMouseOver(mouseEvent, hoveredElement) {
-        _showCallout(mouseEvent, hoveredElement, false);
+    function _handleMouseOver(mouseEvent, hoveredElement, elementId) {
+        _showCallout(mouseEvent, hoveredElement, false, elementId);
     }
     function _handleMouseOut() {
         _hideCallout(false);
@@ -311,24 +309,11 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
         _hideCallout(false);
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function _showCallout(event, legend, isFocusEvent) {
+    function _showCallout(event, legend, isFocusEvent, elementId) {
         if (_calloutAnchor === legend) {
             return;
         }
-        let clientX = 0;
-        let clientY = 0;
-        if ('clientX' in event) {
-            clientX = event.clientX;
-            clientY = event.clientY;
-        } else {
-            // eslint-disable-next-line @typescript-eslint/no-shadow
-            const target = event.currentTarget;
-            if (target && 'getBoundingClientRect' in target) {
-                const boundingRect = target.getBoundingClientRect();
-                clientX = boundingRect.left + boundingRect.width / 2;
-                clientY = boundingRect.top + boundingRect.height / 2;
-            }
-        }
+        const targetElement = document.getElementById(elementId);
         _calloutAnchor = legend;
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const hoverXValue = 'Current value is ' + getChartValueLabel(props.chartValue, _minValue, _maxValue, props.chartValueFormat, true);
@@ -341,11 +326,11 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
             };
             return yValue;
         });
-        _updatePosition(clientX, clientY);
         setPopoverOpen([
             'Needle',
             'Chart value'
         ].includes(legend) || _noLegendHighlighted() || _legendHighlighted(legend));
+        setRefSelected(targetElement);
         setHoverXValue(hoverXValue);
         setHoverYValues(hoverYValues);
         if (isFocusEvent) {
@@ -481,20 +466,6 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
             }));
         }
     }
-    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);
-        }
-    }
     function _getChartTitle() {
         const { chartTitle } = props;
         return (chartTitle ? `${chartTitle}. ` : '') + `Gauge chart with ${_segments.length} segments. `;
@@ -538,10 +509,12 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
         "aria-label": `Max value: ${_maxValue}`
     }, formatScientificLimitWidth(_maxValue))), arcs.map((arc, index)=>{
         const segment = _segments[arc.segmentIndex];
+        const arcId = `gauge-chart-arc-${index}`;
         return /*#__PURE__*/ React.createElement(React.Fragment, {
             key: index
         }, /*#__PURE__*/ React.createElement("path", {
             d: arc.d,
+            id: arcId,
             strokeWidth: focusedElement === segment.legend ? ARC_PADDING : 0,
             className: classes.segment,
             fill: segment.color,
@@ -550,11 +523,11 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
                 ariaLabel: getSegmentLabel(segment, _minValue, _maxValue, props.variant, true),
                 ...segment.accessibilityData
             }, 'img', true),
-            onFocus: (e)=>_handleFocus(e, segment.legend),
+            onFocus: (e)=>_handleFocus(e, segment.legend, arcId),
             onBlur: _handleBlur,
-            onMouseEnter: (e)=>_handleMouseOver(e, segment.legend),
+            onMouseEnter: (e)=>_handleMouseOver(e, segment.legend, arcId),
             onMouseLeave: (e)=>_handleCalloutDismiss(),
-            onMouseMove: (e)=>_handleMouseOver(e, segment.legend),
+            onMouseMove: (e)=>_handleMouseOver(e, segment.legend, arcId),
             tabIndex: _legendHighlighted(segment.legend) || _noLegendHighlighted() ? 0 : undefined
         }));
     }), _renderNeedle(), /*#__PURE__*/ React.createElement("g", {
@@ -585,7 +558,9 @@ export const GaugeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
         wrapContent: _wrapContent
     })))), _renderLegends(), !props.hideTooltip && isPopoverOpen && /*#__PURE__*/ React.createElement(ChartPopover, {
         ...props.calloutProps,
-        clickPosition: clickPosition,
+        positioning: {
+            target: refSelected
+        },
         isPopoverOpen: isPopoverOpen,
         customCallout: {
             customizedCallout: _multiValueCallout({