@fluentui/react-charts 0.0.0-nightly-20260108-0406.1 → 0.0.0-nightly-20260112-0407.1

package/lib/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","color","d3Color","DEFAULT_ANNOTATION_BACKGROUND_OPACITY","DEFAULT_ANNOTATION_PADDING","DEFAULT_CONNECTOR_START_PADDING","DEFAULT_CONNECTOR_END_PADDING","DEFAULT_CONNECTOR_STROKE_WIDTH","DEFAULT_CONNECTOR_ARROW","applyOpacityToColor","opacity","options","undefined","parsed","originalOpacity","_options_preserveOriginalOpacity","preserveOriginalOpacity","toString","Math","max","min","getDefaultAnnotationBackgroundColor","colorNeutralBackground1","getDefaultConnectorStrokeColor","colorNeutralForeground1","chartAnnotationLayerClassNames","root","annotation","connectorLayer","measurement","annotationContent","annotationForeignObject","annotationContentInteractive","annotationForeignObjectInteractive","connectorGroup","useStyles","qhf8xq","Bhzewxz","oyh7mz","j35jbq","B5kzvoi","a9b677","Bqenvij","Bkecrkj","B68tc82","Bmxbyg5","Bpg54ce","Bj3rh1h","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Bt984gj","Brf1p80","fsow6f","sj55zd","z8tnut","Byoj8tv","uwmqm3","z189sj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Huce71","Bcdw1i0","d","p","useChartAnnotationLayerStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","baseStyles","className","styles"],"sources":["useChartAnnotationLayer.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { color as d3Color } from 'd3-color';\nexport const DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;\nexport const DEFAULT_ANNOTATION_PADDING = '4px 8px';\nexport const DEFAULT_CONNECTOR_START_PADDING = 12;\nexport const DEFAULT_CONNECTOR_END_PADDING = 0;\nexport const DEFAULT_CONNECTOR_STROKE_WIDTH = 2;\nexport const DEFAULT_CONNECTOR_ARROW = 'end';\nexport const applyOpacityToColor = (color, opacity, options)=>{\n    if (!color) {\n        return undefined;\n    }\n    const parsed = d3Color(color);\n    if (!parsed) {\n        return color;\n    }\n    const originalOpacity = typeof parsed.opacity === 'number' ? parsed.opacity : 1;\n    var _options_preserveOriginalOpacity;\n    const preserveOriginalOpacity = (_options_preserveOriginalOpacity = options === null || options === void 0 ? void 0 : options.preserveOriginalOpacity) !== null && _options_preserveOriginalOpacity !== void 0 ? _options_preserveOriginalOpacity : true;\n    if (preserveOriginalOpacity && originalOpacity < 1) {\n        return parsed.toString();\n    }\n    parsed.opacity = Math.max(0, Math.min(1, opacity));\n    return parsed.toString();\n};\n/**\n * Get default annotation background color with opacity applied\n * Updated for v9 - uses tokens instead of theme\n */ export const getDefaultAnnotationBackgroundColor = ()=>applyOpacityToColor(tokens.colorNeutralBackground1, DEFAULT_ANNOTATION_BACKGROUND_OPACITY);\n/**\n * Get default connector stroke color\n * Updated for v9 - uses tokens instead of theme\n */ export const getDefaultConnectorStrokeColor = ()=>tokens.colorNeutralForeground1;\n/**\n * @internal\n */ export const chartAnnotationLayerClassNames = {\n    root: 'fui-chartAnnotationLayer__root',\n    annotation: 'fui-chartAnnotationLayer__annotation',\n    connectorLayer: 'fui-chartAnnotationLayer__connectorLayer',\n    measurement: 'fui-chartAnnotationLayer__measurement',\n    annotationContent: 'fui-chartAnnotationLayer__annotationContent',\n    annotationForeignObject: 'fui-chartAnnotationLayer__annotationForeignObject',\n    annotationContentInteractive: 'fui-chartAnnotationLayer__annotationContentInteractive',\n    annotationForeignObjectInteractive: 'fui-chartAnnotationLayer__annotationForeignObjectInteractive',\n    connectorGroup: 'fui-chartAnnotationLayer__connectorGroup'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        position: 'absolute',\n        top: '0',\n        left: '0',\n        right: '0',\n        bottom: '0',\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n        overflow: 'visible',\n        zIndex: 1\n    },\n    annotation: {\n        ...typographyStyles.caption1,\n        position: 'absolute',\n        pointerEvents: 'none',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        color: tokens.colorNeutralForeground1,\n        paddingTop: '4px',\n        paddingBottom: '4px',\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: tokens.shadow16,\n        border: `1px solid ${tokens.colorNeutralStroke1}`,\n        whiteSpace: 'pre-wrap',\n        zIndex: 2\n    },\n    connectorLayer: {\n        position: 'absolute',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n        overflow: 'visible'\n    },\n    measurement: {\n        position: 'absolute',\n        visibility: 'hidden',\n        pointerEvents: 'none'\n    },\n    annotationContent: {\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none'\n    },\n    annotationForeignObject: {\n        overflow: 'visible',\n        pointerEvents: 'none'\n    },\n    annotationContentInteractive: {\n        pointerEvents: 'auto'\n    },\n    annotationForeignObjectInteractive: {\n        pointerEvents: 'auto'\n    },\n    connectorGroup: {\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the ChartAnnotationLayer slots based on the state\n */ export const useChartAnnotationLayerStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(chartAnnotationLayerClassNames.root, baseStyles.root, props.className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        annotation: mergeClasses(chartAnnotationLayerClassNames.annotation, baseStyles.annotation, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.annotation),\n        connectorLayer: mergeClasses(chartAnnotationLayerClassNames.connectorLayer, baseStyles.connectorLayer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.connectorLayer),\n        measurement: mergeClasses(chartAnnotationLayerClassNames.measurement, baseStyles.measurement, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.measurement),\n        annotationContent: mergeClasses(chartAnnotationLayerClassNames.annotationContent, baseStyles.annotationContent, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.annotationContent),\n        annotationForeignObject: mergeClasses(chartAnnotationLayerClassNames.annotationForeignObject, baseStyles.annotationForeignObject, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.annotationForeignObject),\n        annotationContentInteractive: mergeClasses(chartAnnotationLayerClassNames.annotationContentInteractive, baseStyles.annotationContentInteractive, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.annotationContentInteractive),\n        annotationForeignObjectInteractive: mergeClasses(chartAnnotationLayerClassNames.annotationForeignObjectInteractive, baseStyles.annotationForeignObjectInteractive, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.annotationForeignObjectInteractive),\n        connectorGroup: mergeClasses(chartAnnotationLayerClassNames.connectorGroup, baseStyles.connectorGroup, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.connectorGroup)\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","color","d3Color","DEFAULT_ANNOTATION_BACKGROUND_OPACITY","DEFAULT_ANNOTATION_PADDING","DEFAULT_CONNECTOR_START_PADDING","DEFAULT_CONNECTOR_END_PADDING","DEFAULT_CONNECTOR_STROKE_WIDTH","DEFAULT_CONNECTOR_ARROW","applyOpacityToColor","opacity","options","undefined","parsed","originalOpacity","_options_preserveOriginalOpacity","preserveOriginalOpacity","toString","Math","max","min","getDefaultAnnotationBackgroundColor","colorNeutralBackground1","getDefaultConnectorStrokeColor","colorNeutralForeground1","chartAnnotationLayerClassNames","root","annotation","annotationNoDefaults","connectorLayer","measurement","annotationContent","annotationForeignObject","annotationContentInteractive","annotationForeignObjectInteractive","connectorGroup","annotationBaseStyles","caption1","position","pointerEvents","display","alignItems","justifyContent","textAlign","paddingTop","paddingBottom","paddingLeft","paddingRight","borderRadius","borderRadiusMedium","whiteSpace","zIndex","useStyles","qhf8xq","Bhzewxz","oyh7mz","j35jbq","B5kzvoi","a9b677","Bqenvij","Bkecrkj","B68tc82","Bmxbyg5","Bpg54ce","Bj3rh1h","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Bt984gj","Brf1p80","fsow6f","sj55zd","z8tnut","Byoj8tv","uwmqm3","z189sj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Huce71","E5pizo","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcdw1i0","d","p","useChartAnnotationLayerStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","_props_styles7","_props_styles8","baseStyles","className","styles"],"sources":["useChartAnnotationLayer.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { color as d3Color } from 'd3-color';\nexport const DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;\nexport const DEFAULT_ANNOTATION_PADDING = '4px 8px';\nexport const DEFAULT_CONNECTOR_START_PADDING = 12;\nexport const DEFAULT_CONNECTOR_END_PADDING = 0;\nexport const DEFAULT_CONNECTOR_STROKE_WIDTH = 2;\nexport const DEFAULT_CONNECTOR_ARROW = 'end';\nexport const applyOpacityToColor = (color, opacity, options)=>{\n    if (!color) {\n        return undefined;\n    }\n    const parsed = d3Color(color);\n    if (!parsed) {\n        return color;\n    }\n    const originalOpacity = typeof parsed.opacity === 'number' ? parsed.opacity : 1;\n    var _options_preserveOriginalOpacity;\n    const preserveOriginalOpacity = (_options_preserveOriginalOpacity = options === null || options === void 0 ? void 0 : options.preserveOriginalOpacity) !== null && _options_preserveOriginalOpacity !== void 0 ? _options_preserveOriginalOpacity : true;\n    if (preserveOriginalOpacity && originalOpacity < 1) {\n        return parsed.toString();\n    }\n    parsed.opacity = Math.max(0, Math.min(1, opacity));\n    return parsed.toString();\n};\n/**\n * Get default annotation background color with opacity applied\n * Updated for v9 - uses tokens instead of theme\n */ export const getDefaultAnnotationBackgroundColor = ()=>applyOpacityToColor(tokens.colorNeutralBackground1, DEFAULT_ANNOTATION_BACKGROUND_OPACITY);\n/**\n * Get default connector stroke color\n * Updated for v9 - uses tokens instead of theme\n */ export const getDefaultConnectorStrokeColor = ()=>tokens.colorNeutralForeground1;\n/**\n * @internal\n */ export const chartAnnotationLayerClassNames = {\n    root: 'fui-chartAnnotationLayer__root',\n    annotation: 'fui-chartAnnotationLayer__annotation',\n    annotationNoDefaults: 'fui-chartAnnotationLayer__annotationNoDefaults',\n    connectorLayer: 'fui-chartAnnotationLayer__connectorLayer',\n    measurement: 'fui-chartAnnotationLayer__measurement',\n    annotationContent: 'fui-chartAnnotationLayer__annotationContent',\n    annotationForeignObject: 'fui-chartAnnotationLayer__annotationForeignObject',\n    annotationContentInteractive: 'fui-chartAnnotationLayer__annotationContentInteractive',\n    annotationForeignObjectInteractive: 'fui-chartAnnotationLayer__annotationForeignObjectInteractive',\n    connectorGroup: 'fui-chartAnnotationLayer__connectorGroup'\n};\n/**\n * Base Styles\n */ const annotationBaseStyles = {\n    ...typographyStyles.caption1,\n    position: 'absolute',\n    pointerEvents: 'none',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    textAlign: 'center',\n    color: tokens.colorNeutralForeground1,\n    paddingTop: '4px',\n    paddingBottom: '4px',\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    borderRadius: tokens.borderRadiusMedium,\n    whiteSpace: 'pre-wrap',\n    zIndex: 2\n};\nconst useStyles = makeStyles({\n    root: {\n        position: 'absolute',\n        top: '0',\n        left: '0',\n        right: '0',\n        bottom: '0',\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n        overflow: 'visible',\n        zIndex: 1\n    },\n    annotation: {\n        ...annotationBaseStyles,\n        boxShadow: tokens.shadow16,\n        border: `1px solid ${tokens.colorNeutralStroke1}`\n    },\n    annotationNoDefaults: {\n        ...annotationBaseStyles\n    },\n    connectorLayer: {\n        position: 'absolute',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none',\n        overflow: 'visible'\n    },\n    measurement: {\n        position: 'absolute',\n        visibility: 'hidden',\n        pointerEvents: 'none'\n    },\n    annotationContent: {\n        width: '100%',\n        height: '100%',\n        pointerEvents: 'none'\n    },\n    annotationForeignObject: {\n        overflow: 'visible',\n        pointerEvents: 'none'\n    },\n    annotationContentInteractive: {\n        pointerEvents: 'auto'\n    },\n    annotationForeignObjectInteractive: {\n        pointerEvents: 'auto'\n    },\n    connectorGroup: {\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the ChartAnnotationLayer slots based on the state\n */ export const useChartAnnotationLayerStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(chartAnnotationLayerClassNames.root, baseStyles.root, props.className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        annotation: mergeClasses(chartAnnotationLayerClassNames.annotation, baseStyles.annotation, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.annotation),\n        connectorLayer: mergeClasses(chartAnnotationLayerClassNames.connectorLayer, baseStyles.connectorLayer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.connectorLayer),\n        measurement: mergeClasses(chartAnnotationLayerClassNames.measurement, baseStyles.measurement, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.measurement),\n        annotationContent: mergeClasses(chartAnnotationLayerClassNames.annotationContent, baseStyles.annotationContent, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.annotationContent),\n        annotationForeignObject: mergeClasses(chartAnnotationLayerClassNames.annotationForeignObject, baseStyles.annotationForeignObject, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.annotationForeignObject),\n        annotationContentInteractive: mergeClasses(chartAnnotationLayerClassNames.annotationContentInteractive, baseStyles.annotationContentInteractive, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.annotationContentInteractive),\n        annotationForeignObjectInteractive: mergeClasses(chartAnnotationLayerClassNames.annotationForeignObjectInteractive, baseStyles.annotationForeignObjectInteractive, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.annotationForeignObjectInteractive),\n        connectorGroup: mergeClasses(chartAnnotationLayerClassNames.connectorGroup, baseStyles.connectorGroup, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.connectorGroup)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.raw.js

@@ -38,6 +38,7 @@ export const applyOpacityToColor = (color, opacity, options)=>{
  */ export const chartAnnotationLayerClassNames = {
     root: 'fui-chartAnnotationLayer__root',
     annotation: 'fui-chartAnnotationLayer__annotation',
+    annotationNoDefaults: 'fui-chartAnnotationLayer__annotationNoDefaults',
     connectorLayer: 'fui-chartAnnotationLayer__connectorLayer',
     measurement: 'fui-chartAnnotationLayer__measurement',
     annotationContent: 'fui-chartAnnotationLayer__annotationContent',
@@ -48,7 +49,24 @@ export const applyOpacityToColor = (color, opacity, options)=>{
 };
 /**
  * Base Styles
- */ const useStyles = makeStyles({
+ */ const annotationBaseStyles = {
+    ...typographyStyles.caption1,
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    color: tokens.colorNeutralForeground1,
+    paddingTop: '4px',
+    paddingBottom: '4px',
+    paddingLeft: '8px',
+    paddingRight: '8px',
+    borderRadius: tokens.borderRadiusMedium,
+    whiteSpace: 'pre-wrap',
+    zIndex: 2
+};
+const useStyles = makeStyles({
     root: {
         position: 'absolute',
         top: '0',
@@ -62,23 +80,12 @@ export const applyOpacityToColor = (color, opacity, options)=>{
         zIndex: 1
     },
     annotation: {
-        ...typographyStyles.caption1,
-        position: 'absolute',
-        pointerEvents: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textAlign: 'center',
-        color: tokens.colorNeutralForeground1,
-        paddingTop: '4px',
-        paddingBottom: '4px',
-        paddingLeft: '8px',
-        paddingRight: '8px',
-        borderRadius: tokens.borderRadiusMedium,
+        ...annotationBaseStyles,
         boxShadow: tokens.shadow16,
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
-        whiteSpace: 'pre-wrap',
-        zIndex: 2
+        border: `1px solid ${tokens.colorNeutralStroke1}`
+    },
+    annotationNoDefaults: {
+        ...annotationBaseStyles
     },
     connectorLayer: {
         position: 'absolute',

package/lib/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { color as d3Color } from 'd3-color';\nimport { ChartAnnotationArrowHead } from '../../../types/ChartAnnotation';\n\nexport interface ChartAnnotationLayerStyles {\n  root?: string;\n  annotation?: string;\n  connectorLayer?: string;\n  measurement?: string;\n  annotationContent?: string;\n  annotationForeignObject?: string;\n  annotationContentInteractive?: string;\n  annotationForeignObjectInteractive?: string;\n  connectorGroup?: string;\n}\n\nexport interface ChartAnnotationLayerStyleProps {\n  className?: string;\n  styles?: Partial<ChartAnnotationLayerStyles>;\n}\n\nexport const DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;\nexport const DEFAULT_ANNOTATION_PADDING = '4px 8px';\nexport const DEFAULT_CONNECTOR_START_PADDING = 12;\nexport const DEFAULT_CONNECTOR_END_PADDING = 0;\nexport const DEFAULT_CONNECTOR_STROKE_WIDTH = 2;\nexport const DEFAULT_CONNECTOR_ARROW: ChartAnnotationArrowHead = 'end';\n\nexport const applyOpacityToColor = (\n  color: string | undefined,\n  opacity: number,\n  options?: {\n    preserveOriginalOpacity?: boolean;\n  },\n): string | undefined => {\n  if (!color) {\n    return undefined;\n  }\n\n  const parsed = d3Color(color);\n  if (!parsed) {\n    return color;\n  }\n\n  const originalOpacity = typeof parsed.opacity === 'number' ? parsed.opacity : 1;\n  const preserveOriginalOpacity = options?.preserveOriginalOpacity ?? true;\n\n  if (preserveOriginalOpacity && originalOpacity < 1) {\n    return parsed.toString();\n  }\n\n  parsed.opacity = Math.max(0, Math.min(1, opacity));\n  return parsed.toString();\n};\n\n/**\n * Get default annotation background color with opacity applied\n * Updated for v9 - uses tokens instead of theme\n */\nexport const getDefaultAnnotationBackgroundColor = (): string | undefined =>\n  applyOpacityToColor(tokens.colorNeutralBackground1, DEFAULT_ANNOTATION_BACKGROUND_OPACITY);\n\n/**\n * Get default connector stroke color\n * Updated for v9 - uses tokens instead of theme\n */\nexport const getDefaultConnectorStrokeColor = (): string => tokens.colorNeutralForeground1;\n\n/**\n * @internal\n */\nexport const chartAnnotationLayerClassNames: SlotClassNames<ChartAnnotationLayerStyles> = {\n  root: 'fui-chartAnnotationLayer__root',\n  annotation: 'fui-chartAnnotationLayer__annotation',\n  connectorLayer: 'fui-chartAnnotationLayer__connectorLayer',\n  measurement: 'fui-chartAnnotationLayer__measurement',\n  annotationContent: 'fui-chartAnnotationLayer__annotationContent',\n  annotationForeignObject: 'fui-chartAnnotationLayer__annotationForeignObject',\n  annotationContentInteractive: 'fui-chartAnnotationLayer__annotationContentInteractive',\n  annotationForeignObjectInteractive: 'fui-chartAnnotationLayer__annotationForeignObjectInteractive',\n  connectorGroup: 'fui-chartAnnotationLayer__connectorGroup',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    right: '0',\n    bottom: '0',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n    overflow: 'visible',\n    zIndex: 1,\n  },\n  annotation: {\n    ...typographyStyles.caption1,\n    position: 'absolute',\n    pointerEvents: 'none',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    textAlign: 'center',\n    color: tokens.colorNeutralForeground1,\n    paddingTop: '4px',\n    paddingBottom: '4px',\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: tokens.shadow16,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    whiteSpace: 'pre-wrap',\n    zIndex: 2,\n  },\n  connectorLayer: {\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n    overflow: 'visible',\n  },\n  measurement: {\n    position: 'absolute',\n    visibility: 'hidden',\n    pointerEvents: 'none',\n  },\n  annotationContent: {\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n  },\n  annotationForeignObject: {\n    overflow: 'visible',\n    pointerEvents: 'none',\n  },\n  annotationContentInteractive: {\n    pointerEvents: 'auto',\n  },\n  annotationForeignObjectInteractive: {\n    pointerEvents: 'auto',\n  },\n  connectorGroup: {\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the ChartAnnotationLayer slots based on the state\n */\nexport const useChartAnnotationLayerStyles = (props: ChartAnnotationLayerStyleProps): ChartAnnotationLayerStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(chartAnnotationLayerClassNames.root, baseStyles.root, props.className, props.styles?.root),\n    annotation: mergeClasses(\n      chartAnnotationLayerClassNames.annotation,\n      baseStyles.annotation,\n      props.styles?.annotation,\n    ),\n    connectorLayer: mergeClasses(\n      chartAnnotationLayerClassNames.connectorLayer,\n      baseStyles.connectorLayer,\n      props.styles?.connectorLayer,\n    ),\n    measurement: mergeClasses(\n      chartAnnotationLayerClassNames.measurement,\n      baseStyles.measurement,\n      props.styles?.measurement,\n    ),\n    annotationContent: mergeClasses(\n      chartAnnotationLayerClassNames.annotationContent,\n      baseStyles.annotationContent,\n      props.styles?.annotationContent,\n    ),\n    annotationForeignObject: mergeClasses(\n      chartAnnotationLayerClassNames.annotationForeignObject,\n      baseStyles.annotationForeignObject,\n      props.styles?.annotationForeignObject,\n    ),\n    annotationContentInteractive: mergeClasses(\n      chartAnnotationLayerClassNames.annotationContentInteractive,\n      baseStyles.annotationContentInteractive,\n      props.styles?.annotationContentInteractive,\n    ),\n    annotationForeignObjectInteractive: mergeClasses(\n      chartAnnotationLayerClassNames.annotationForeignObjectInteractive,\n      baseStyles.annotationForeignObjectInteractive,\n      props.styles?.annotationForeignObjectInteractive,\n    ),\n    connectorGroup: mergeClasses(\n      chartAnnotationLayerClassNames.connectorGroup,\n      baseStyles.connectorGroup,\n      props.styles?.connectorGroup,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","color","d3Color","DEFAULT_ANNOTATION_BACKGROUND_OPACITY","DEFAULT_ANNOTATION_PADDING","DEFAULT_CONNECTOR_START_PADDING","DEFAULT_CONNECTOR_END_PADDING","DEFAULT_CONNECTOR_STROKE_WIDTH","DEFAULT_CONNECTOR_ARROW","applyOpacityToColor","opacity","options","undefined","parsed","originalOpacity","preserveOriginalOpacity","toString","Math","max","min","getDefaultAnnotationBackgroundColor","colorNeutralBackground1","getDefaultConnectorStrokeColor","colorNeutralForeground1","chartAnnotationLayerClassNames","root","annotation","connectorLayer","measurement","annotationContent","annotationForeignObject","annotationContentInteractive","annotationForeignObjectInteractive","connectorGroup","useStyles","position","top","left","right","bottom","width","height","pointerEvents","overflow","zIndex","caption1","display","alignItems","justifyContent","textAlign","paddingTop","paddingBottom","paddingLeft","paddingRight","borderRadius","borderRadiusMedium","boxShadow","shadow16","border","colorNeutralStroke1","whiteSpace","visibility","useChartAnnotationLayerStyles","props","baseStyles","className","styles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { color as d3Color } from 'd3-color';\nimport { ChartAnnotationArrowHead } from '../../../types/ChartAnnotation';\n\nexport interface ChartAnnotationLayerStyles {\n  root?: string;\n  annotation?: string;\n  annotationNoDefaults?: string;\n  connectorLayer?: string;\n  measurement?: string;\n  annotationContent?: string;\n  annotationForeignObject?: string;\n  annotationContentInteractive?: string;\n  annotationForeignObjectInteractive?: string;\n  connectorGroup?: string;\n}\n\nexport interface ChartAnnotationLayerStyleProps {\n  className?: string;\n  styles?: Partial<ChartAnnotationLayerStyles>;\n}\n\nexport const DEFAULT_ANNOTATION_BACKGROUND_OPACITY = 0.8;\nexport const DEFAULT_ANNOTATION_PADDING = '4px 8px';\nexport const DEFAULT_CONNECTOR_START_PADDING = 12;\nexport const DEFAULT_CONNECTOR_END_PADDING = 0;\nexport const DEFAULT_CONNECTOR_STROKE_WIDTH = 2;\nexport const DEFAULT_CONNECTOR_ARROW: ChartAnnotationArrowHead = 'end';\n\nexport const applyOpacityToColor = (\n  color: string | undefined,\n  opacity: number,\n  options?: {\n    preserveOriginalOpacity?: boolean;\n  },\n): string | undefined => {\n  if (!color) {\n    return undefined;\n  }\n\n  const parsed = d3Color(color);\n  if (!parsed) {\n    return color;\n  }\n\n  const originalOpacity = typeof parsed.opacity === 'number' ? parsed.opacity : 1;\n  const preserveOriginalOpacity = options?.preserveOriginalOpacity ?? true;\n\n  if (preserveOriginalOpacity && originalOpacity < 1) {\n    return parsed.toString();\n  }\n\n  parsed.opacity = Math.max(0, Math.min(1, opacity));\n  return parsed.toString();\n};\n\n/**\n * Get default annotation background color with opacity applied\n * Updated for v9 - uses tokens instead of theme\n */\nexport const getDefaultAnnotationBackgroundColor = (): string | undefined =>\n  applyOpacityToColor(tokens.colorNeutralBackground1, DEFAULT_ANNOTATION_BACKGROUND_OPACITY);\n\n/**\n * Get default connector stroke color\n * Updated for v9 - uses tokens instead of theme\n */\nexport const getDefaultConnectorStrokeColor = (): string => tokens.colorNeutralForeground1;\n\n/**\n * @internal\n */\nexport const chartAnnotationLayerClassNames: SlotClassNames<ChartAnnotationLayerStyles> = {\n  root: 'fui-chartAnnotationLayer__root',\n  annotation: 'fui-chartAnnotationLayer__annotation',\n  annotationNoDefaults: 'fui-chartAnnotationLayer__annotationNoDefaults',\n  connectorLayer: 'fui-chartAnnotationLayer__connectorLayer',\n  measurement: 'fui-chartAnnotationLayer__measurement',\n  annotationContent: 'fui-chartAnnotationLayer__annotationContent',\n  annotationForeignObject: 'fui-chartAnnotationLayer__annotationForeignObject',\n  annotationContentInteractive: 'fui-chartAnnotationLayer__annotationContentInteractive',\n  annotationForeignObjectInteractive: 'fui-chartAnnotationLayer__annotationForeignObjectInteractive',\n  connectorGroup: 'fui-chartAnnotationLayer__connectorGroup',\n};\n\n/**\n * Base Styles\n */\nconst annotationBaseStyles = {\n  ...typographyStyles.caption1,\n  position: 'absolute',\n  pointerEvents: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  textAlign: 'center',\n  color: tokens.colorNeutralForeground1,\n  paddingTop: '4px',\n  paddingBottom: '4px',\n  paddingLeft: '8px',\n  paddingRight: '8px',\n  borderRadius: tokens.borderRadiusMedium,\n  whiteSpace: 'pre-wrap',\n  zIndex: 2,\n} as const;\n\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    right: '0',\n    bottom: '0',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n    overflow: 'visible',\n    zIndex: 1,\n  },\n  annotation: {\n    ...annotationBaseStyles,\n    boxShadow: tokens.shadow16,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n  },\n  annotationNoDefaults: {\n    ...annotationBaseStyles,\n  },\n  connectorLayer: {\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n    overflow: 'visible',\n  },\n  measurement: {\n    position: 'absolute',\n    visibility: 'hidden',\n    pointerEvents: 'none',\n  },\n  annotationContent: {\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n  },\n  annotationForeignObject: {\n    overflow: 'visible',\n    pointerEvents: 'none',\n  },\n  annotationContentInteractive: {\n    pointerEvents: 'auto',\n  },\n  annotationForeignObjectInteractive: {\n    pointerEvents: 'auto',\n  },\n  connectorGroup: {\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the ChartAnnotationLayer slots based on the state\n */\nexport const useChartAnnotationLayerStyles = (props: ChartAnnotationLayerStyleProps): ChartAnnotationLayerStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(chartAnnotationLayerClassNames.root, baseStyles.root, props.className, props.styles?.root),\n    annotation: mergeClasses(\n      chartAnnotationLayerClassNames.annotation,\n      baseStyles.annotation,\n      props.styles?.annotation,\n    ),\n    connectorLayer: mergeClasses(\n      chartAnnotationLayerClassNames.connectorLayer,\n      baseStyles.connectorLayer,\n      props.styles?.connectorLayer,\n    ),\n    measurement: mergeClasses(\n      chartAnnotationLayerClassNames.measurement,\n      baseStyles.measurement,\n      props.styles?.measurement,\n    ),\n    annotationContent: mergeClasses(\n      chartAnnotationLayerClassNames.annotationContent,\n      baseStyles.annotationContent,\n      props.styles?.annotationContent,\n    ),\n    annotationForeignObject: mergeClasses(\n      chartAnnotationLayerClassNames.annotationForeignObject,\n      baseStyles.annotationForeignObject,\n      props.styles?.annotationForeignObject,\n    ),\n    annotationContentInteractive: mergeClasses(\n      chartAnnotationLayerClassNames.annotationContentInteractive,\n      baseStyles.annotationContentInteractive,\n      props.styles?.annotationContentInteractive,\n    ),\n    annotationForeignObjectInteractive: mergeClasses(\n      chartAnnotationLayerClassNames.annotationForeignObjectInteractive,\n      baseStyles.annotationForeignObjectInteractive,\n      props.styles?.annotationForeignObjectInteractive,\n    ),\n    connectorGroup: mergeClasses(\n      chartAnnotationLayerClassNames.connectorGroup,\n      baseStyles.connectorGroup,\n      props.styles?.connectorGroup,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","color","d3Color","DEFAULT_ANNOTATION_BACKGROUND_OPACITY","DEFAULT_ANNOTATION_PADDING","DEFAULT_CONNECTOR_START_PADDING","DEFAULT_CONNECTOR_END_PADDING","DEFAULT_CONNECTOR_STROKE_WIDTH","DEFAULT_CONNECTOR_ARROW","applyOpacityToColor","opacity","options","undefined","parsed","originalOpacity","preserveOriginalOpacity","toString","Math","max","min","getDefaultAnnotationBackgroundColor","colorNeutralBackground1","getDefaultConnectorStrokeColor","colorNeutralForeground1","chartAnnotationLayerClassNames","root","annotation","annotationNoDefaults","connectorLayer","measurement","annotationContent","annotationForeignObject","annotationContentInteractive","annotationForeignObjectInteractive","connectorGroup","annotationBaseStyles","caption1","position","pointerEvents","display","alignItems","justifyContent","textAlign","paddingTop","paddingBottom","paddingLeft","paddingRight","borderRadius","borderRadiusMedium","whiteSpace","zIndex","useStyles","top","left","right","bottom","width","height","overflow","boxShadow","shadow16","border","colorNeutralStroke1","visibility","useChartAnnotationLayerStyles","props","baseStyles","className","styles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,SAASC,OAAO,QAAQ,WAAW;AAqB5C,OAAO,MAAMC,wCAAwC,IAAI;AACzD,OAAO,MAAMC,6BAA6B,UAAU;AACpD,OAAO,MAAMC,kCAAkC,GAAG;AAClD,OAAO,MAAMC,gCAAgC,EAAE;AAC/C,OAAO,MAAMC,iCAAiC,EAAE;AAChD,OAAO,MAAMC,0BAAoD,MAAM;AAEvE,OAAO,MAAMC,sBAAsB,CACjCR,OACAS,SACAC;IAIA,IAAI,CAACV,OAAO;QACV,OAAOW;IACT;IAEA,MAAMC,SAASX,QAAQD;IACvB,IAAI,CAACY,QAAQ;QACX,OAAOZ;IACT;IAEA,MAAMa,kBAAkB,OAAOD,OAAOH,OAAO,KAAK,WAAWG,OAAOH,OAAO,GAAG;QAC9CC;IAAhC,MAAMI,0BAA0BJ,CAAAA,mCAAAA,oBAAAA,8BAAAA,QAASI,uBAAuB,cAAhCJ,8CAAAA,mCAAoC;IAEpE,IAAII,2BAA2BD,kBAAkB,GAAG;QAClD,OAAOD,OAAOG,QAAQ;IACxB;IAEAH,OAAOH,OAAO,GAAGO,KAAKC,GAAG,CAAC,GAAGD,KAAKE,GAAG,CAAC,GAAGT;IACzC,OAAOG,OAAOG,QAAQ;AACxB,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMI,sCAAsC,IACjDX,oBAAoBV,OAAOsB,uBAAuB,EAAElB,uCAAuC;AAE7F;;;CAGC,GACD,OAAO,MAAMmB,iCAAiC,IAAcvB,OAAOwB,uBAAuB,CAAC;AAE3F;;CAEC,GACD,OAAO,MAAMC,iCAA6E;IACxFC,MAAM;IACNC,YAAY;IACZC,sBAAsB;IACtBC,gBAAgB;IAChBC,aAAa;IACbC,mBAAmB;IACnBC,yBAAyB;IACzBC,8BAA8B;IAC9BC,oCAAoC;IACpCC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuB;IAC3B,GAAGnC,iBAAiBoC,QAAQ;IAC5BC,UAAU;IACVC,eAAe;IACfC,SAAS;IACTC,YAAY;IACZC,gBAAgB;IAChBC,WAAW;IACXzC,OAAOF,OAAOwB,uBAAuB;IACrCoB,YAAY;IACZC,eAAe;IACfC,aAAa;IACbC,cAAc;IACdC,cAAchD,OAAOiD,kBAAkB;IACvCC,YAAY;IACZC,QAAQ;AACV;AAEA,MAAMC,YAAYtD,WAAW;IAC3B4B,MAAM;QACJY,UAAU;QACVe,KAAK;QACLC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,OAAO;QACPC,QAAQ;QACRnB,eAAe;QACfoB,UAAU;QACVR,QAAQ;IACV;IACAxB,YAAY;QACV,GAAGS,oBAAoB;QACvBwB,WAAW5D,OAAO6D,QAAQ;QAC1BC,QAAQ,CAAC,UAAU,EAAE9D,OAAO+D,mBAAmB,EAAE;IACnD;IACAnC,sBAAsB;QACpB,GAAGQ,oBAAoB;IACzB;IACAP,gBAAgB;QACdS,UAAU;QACVe,KAAK;QACLC,MAAM;QACNG,OAAO;QACPC,QAAQ;QACRnB,eAAe;QACfoB,UAAU;IACZ;IACA7B,aAAa;QACXQ,UAAU;QACV0B,YAAY;QACZzB,eAAe;IACjB;IACAR,mBAAmB;QACjB0B,OAAO;QACPC,QAAQ;QACRnB,eAAe;IACjB;IACAP,yBAAyB;QACvB2B,UAAU;QACVpB,eAAe;IACjB;IACAN,8BAA8B;QAC5BM,eAAe;IACjB;IACAL,oCAAoC;QAClCK,eAAe;IACjB;IACAJ,gBAAgB;QACdI,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAM0B,gCAAgC,CAACC;QAIgDA,eAIxFA,gBAKAA,gBAKAA,gBAKAA,gBAKAA,gBAKAA,gBAKAA,gBAKAA;IA1CJ,MAAMC,aAAaf;IAEnB,OAAO;QACL1B,MAAM3B,aAAa0B,+BAA+BC,IAAI,EAAEyC,WAAWzC,IAAI,EAAEwC,MAAME,SAAS,GAAEF,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAcxC,IAAI;QAC5GC,YAAY5B,aACV0B,+BAA+BE,UAAU,EACzCwC,WAAWxC,UAAU,GACrBuC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcvC,UAAU;QAE1BE,gBAAgB9B,aACd0B,+BAA+BI,cAAc,EAC7CsC,WAAWtC,cAAc,GACzBqC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcrC,cAAc;QAE9BC,aAAa/B,aACX0B,+BAA+BK,WAAW,EAC1CqC,WAAWrC,WAAW,GACtBoC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcpC,WAAW;QAE3BC,mBAAmBhC,aACjB0B,+BAA+BM,iBAAiB,EAChDoC,WAAWpC,iBAAiB,GAC5BmC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcnC,iBAAiB;QAEjCC,yBAAyBjC,aACvB0B,+BAA+BO,uBAAuB,EACtDmC,WAAWnC,uBAAuB,GAClCkC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAclC,uBAAuB;QAEvCC,8BAA8BlC,aAC5B0B,+BAA+BQ,4BAA4B,EAC3DkC,WAAWlC,4BAA4B,GACvCiC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcjC,4BAA4B;QAE5CC,oCAAoCnC,aAClC0B,+BAA+BS,kCAAkC,EACjEiC,WAAWjC,kCAAkC,GAC7CgC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAchC,kCAAkC;QAElDC,gBAAgBpC,aACd0B,+BAA+BU,cAAc,EAC7CgC,WAAWhC,cAAc,GACzB+B,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAc/B,cAAc;IAEhC;AACF,EAAE"}

package/lib/components/FunnelChart/FunnelChart.js

@@ -97,6 +97,18 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef(({ orientation = 'vert
     function noLegendHighlighted() {
         return getHighlightedLegend().length === 0;
     }
+    function _getAriaLabel(data) {
+        if ('subValue' in data) {
+            // Stacked funnel segment
+            const formattedValue = formatToLocaleString(data.subValue.value.toString(), props.culture);
+            return `${data.stage}, ${data.subValue.category}, ${formattedValue}.`;
+        } else {
+            var _data_value;
+            // Non-stacked funnel segment
+            const formattedValue = formatToLocaleString(((_data_value = data.value) !== null && _data_value !== void 0 ? _data_value : 0).toString(), props.culture);
+            return `${data.stage}, ${formattedValue}.`;
+        }
+    }
     function _getEventHandlerProps(data, opacity, segmentId) {
         const targetElement = document.getElementById(segmentId);
         if ('subValue' in data) {
@@ -150,7 +162,9 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef(({ orientation = 'vert
             fill: fill,
             opacity: opacity,
             ...eventHandlers,
-            tabIndex: tabIndex
+            tabIndex: tabIndex,
+            role: "img",
+            "aria-label": _getAriaLabel(data)
         }), textProps && /*#__PURE__*/ React.createElement("g", eventHandlers, _renderSegmentText({
             ...textProps,
             textColor,
@@ -352,7 +366,6 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef(({ orientation = 'vert
         height: height,
         className: classes.chart,
         ...arrowAttributes,
-        role: 'img',
         "aria-label": props.chartTitle
     }, /*#__PURE__*/ React.createElement("g", {
         transform: isRTL ? `translate(${funnelOffsetX + funnelWidth}, ${funnelMarginTop}) scale(-1,1)` : `translate(${funnelOffsetX}, ${funnelMarginTop})`

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

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

package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js

@@ -577,8 +577,9 @@ export const HorizontalBarChartWithAxis = /*#__PURE__*/ React.forwardRef((props
     function _getAriaLabel(point) {
         var _point_callOutAccessibilityData;
         const xValue = point.xAxisCalloutData || point.x;
+        const legend = point.legend;
         const yValue = point.yAxisCalloutData || point.y;
-        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ` + `${yValue}.`;
+        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${yValue}. ` + (legend ? `${legend}, ` : '') + `${xValue}.`;
     }
     function _renderBarLabel(xPosition, yPosition, value, isPositiveBar) {
         if (props.hideLabels || _barHeight < 16) {