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

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

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

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

@@ -22,7 +22,9 @@ const funnelClassNames = {
     root: 'fui-funnel__root',
     chart: 'fui-funnel__chart',
     text: 'fui-funnel__text',
-    calloutContentRoot: 'fui-funnel__callout-content-root'
+    calloutContentRoot: 'fui-funnel__callout-content-root',
+    chartTitle: 'fui-funnel__chartTitle',
+    svgTooltip: 'fui-funnel__svgTooltip'
 };
 /**
  * Base Styles
@@ -54,6 +56,20 @@ const funnelClassNames = {
     },
     calloutContentRoot: {
         B2u0y6b: "f15g8at8"
+    },
+    chartTitle: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fcpl73t",
+        Bkfmm31: "fhuob2q",
+        Bvjb7m6: "fhv2zbx",
+        fsow6f: "f17mccla",
+        jrapky: "fqcjy3b"
+    },
+    svgTooltip: {
+        Bkfmm31: "f5q6cfr",
+        Bxms50k: "f1bgda6t"
     }
 }, {
     d: [
@@ -70,17 +86,33 @@ const funnelClassNames = {
         ".f1aehjj5{pointer-events:none;}",
         ".fl43uef{font-weight:var(--fontWeightSemibold);}",
         ".fhuob2q{fill:var(--colorNeutralForeground1);}",
-        ".f15g8at8{max-width:238px;}"
+        ".f15g8at8{max-width:238px;}",
+        ".f13mqy1h{font-size:var(--fontSizeBase100);}",
+        ".fcpl73t{line-height:var(--lineHeightBase100);}",
+        ".fhv2zbx{forced-color-adjust:auto;}",
+        ".f17mccla{text-align:center;}",
+        ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
+        ".f5q6cfr{fill:var(--colorNeutralBackground1);}"
+    ],
+    m: [
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1bgda6t{fill:Canvas;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ]
     ]
 });
 const useFunnelChartStyles = (props)=>{
-    var _props_styles, _props_styles1, _props_styles2, _props_styles3;
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5;
     const { className } = props;
     const baseStyles = useStyles();
     return {
         root: (0, _react.mergeClasses)(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
         chart: (0, _react.mergeClasses)(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
         text: (0, _react.mergeClasses)(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.text),
-        calloutContentRoot: (0, _react.mergeClasses)(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)
+        calloutContentRoot: (0, _react.mergeClasses)(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot),
+        chartTitle: (0, _react.mergeClasses)(funnelClassNames.chartTitle, baseStyles.chartTitle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.chartTitle),
+        svgTooltip: (0, _react.mergeClasses)(funnelClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.svgTooltip)
     };
 };

package/lib-commonjs/components/FunnelChart/useFunnelChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKKG,gBAAgB;;;wBAqCI;eAApBmB;;;uBAzCwB,gBAAgB;AAI9C,yBAAyB;IAChClB,IAAI,EAAE,kBAAkB;IACxBC,KAAK,EAAE,mBAAmB;IAC1BC,IAAI,EAAE,kBAAkB;IACxBC,kBAAkB,EAAE;AACxB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAX,KAAA,EAAA;QAAAY,MAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAL,IAAA,EAAA;QAAAY,OAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAK,OAAA,EAAA;QAAAP,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAN,kBAAA,EAAA;QAAAa,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA0BrB,CAAC;AAGS,8BAA8BE,KAAK,IAAG;IAC7C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;IACjE,MAAM,EAAEC,SAAAA,EAAW,GAAGL,KAAK;IAC3B,MAAMM,UAAU,GAAGrB,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHJ,IAAI,MAAEH,mBAAY,EAACE,gBAAgB,CAACC,IAAI,EAAEyB,UAAU,CAACzB,IAAI,EAAEwB,SAAS,EAAE,CAACJ,aAAa,GAAGD,KAAK,CAACO,MAAAA,AAAM,MAAM,IAAI,IAAIN,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACpB,IAAI,CAAC;QACxKC,KAAK,EAAEJ,uBAAY,EAACE,gBAAgB,CAACE,KAAK,EAAEwB,UAAU,CAACxB,KAAK,EAAE,CAACoB,cAAc,GAAGF,KAAK,CAACO,MAAAA,AAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,KAAK,CAAC;QACpKC,IAAI,MAAEL,mBAAY,EAACE,gBAAgB,CAACG,IAAI,EAAEuB,UAAU,CAACvB,IAAI,EAAE,CAACoB,cAAc,GAAGH,KAAK,CAACO,MAAAA,AAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,IAAI,CAAC;QAChKC,kBAAkB,MAAEN,mBAAY,EAAC4B,UAAU,CAACtB,kBAAkB,EAAE,CAACoB,cAAc,GAAGJ,KAAK,CAACO,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,kBAAkB;IACtL,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useFunnelChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { getChartTitleStyles, HighContrastSelector } from '../../utilities/index';\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    chartTitle: 'fui-funnel__chartTitle',\n    svgTooltip: 'fui-funnel__svgTooltip'\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    chartTitle: getChartTitleStyles(),\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\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, _props_styles4, _props_styles5;\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        chartTitle: mergeClasses(funnelClassNames.chartTitle, baseStyles.chartTitle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.chartTitle),\n        svgTooltip: mergeClasses(funnelClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.svgTooltip)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","getChartTitleStyles","HighContrastSelector","funnelClassNames","root","chart","text","calloutContentRoot","chartTitle","svgTooltip","useStyles","Bt984gj","a9b677","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","qhf8xq","fsow6f","mc9l5x","Bkecrkj","Bkfmm31","B2u0y6b","Bg96gwp","Bvjb7m6","jrapky","Bxms50k","d","m","useFunnelChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","className","baseStyles","styles"],"mappings":"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"}

package/lib-commonjs/components/FunnelChart/useFunnelChartStyles.styles.raw.js

@@ -19,11 +19,14 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
+const _index = require("../../utilities/index");
 const funnelClassNames = {
     root: 'fui-funnel__root',
     chart: 'fui-funnel__chart',
     text: 'fui-funnel__text',
-    calloutContentRoot: 'fui-funnel__callout-content-root'
+    calloutContentRoot: 'fui-funnel__callout-content-root',
+    chartTitle: 'fui-funnel__chartTitle',
+    svgTooltip: 'fui-funnel__svgTooltip'
 };
 /**
  * Base Styles
@@ -52,16 +55,25 @@ const funnelClassNames = {
     },
     calloutContentRoot: {
         maxWidth: '238px'
+    },
+    chartTitle: (0, _index.getChartTitleStyles)(),
+    svgTooltip: {
+        fill: _reacttheme.tokens.colorNeutralBackground1,
+        [_index.HighContrastSelector]: {
+            fill: 'Canvas'
+        }
     }
 });
 const useFunnelChartStyles = (props)=>{
-    var _props_styles, _props_styles1, _props_styles2, _props_styles3;
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5;
     const { className } = props;
     const baseStyles = useStyles();
     return {
         root: (0, _react.mergeClasses)(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
         chart: (0, _react.mergeClasses)(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
         text: (0, _react.mergeClasses)(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.text),
-        calloutContentRoot: (0, _react.mergeClasses)(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)
+        calloutContentRoot: (0, _react.mergeClasses)(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot),
+        chartTitle: (0, _react.mergeClasses)(funnelClassNames.chartTitle, baseStyles.chartTitle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.chartTitle),
+        svgTooltip: (0, _react.mergeClasses)(funnelClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.svgTooltip)
     };
 };

package/lib-commonjs/components/FunnelChart/useFunnelChartStyles.styles.raw.js.map

@@ -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    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;;;;;;;;;;;;IAUaG,gBAAAA;;;wBAyCAuB;eAAAA;;;uBAjD4B,iBAAiB;4BACnC,wBAAwB;AAOxC,yBAA4D;IACjEtB,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYR,iBAAAA,EAAW;IAC3BI,MAAM;QACJK,YAAY;QACZC,OAAO;QACPC,QAAQ;QACRC,YAAYV,kBAAAA,CAAOW,cAAc;QACjCC,UAAUZ,kBAAAA,CAAOa,eAAe;QAChCC,YAAYd,kBAAAA,CAAOe,iBAAiB;QACpCC,UAAU;QACVC,WAAW;IACb;IACAd,OAAO;QACLe,SAAS;QACTV,OAAO;QACPC,QAAQ;IACV;IACAL,MAAM;QACJe,eAAe;QACfL,YAAYd,kBAAAA,CAAOoB,kBAAkB;QACrCC,MAAMrB,kBAAAA,CAAOsB,uBAAuB;QACpCZ,YAAYV,kBAAAA,CAAOW,cAAc;QACjCC,UAAUZ,kBAAAA,CAAOa,eAAe;IAClC;IACAR,oBAAoB;QAClBkB,UAAU;IACZ;AACF;AAKO,6BAA6B,CAACE;QAKqCA,eACRA,gBACHA,gBACKA;IAPlE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAarB;IAEnB,OAAO;QACLJ,UAAMH,mBAAAA,EAAaE,iBAAiBC,IAAI,EAAEyB,WAAWzB,IAAI,EAAEwB,WAAAA,CAAWD,gBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAcvB,IAAI;QACxFC,OAAOJ,uBAAAA,EAAaE,iBAAiBE,KAAK,EAAEwB,WAAWxB,KAAK,EAAA,CAAEsB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAActB,KAAK;QACjFC,UAAML,mBAAAA,EAAaE,iBAAiBG,IAAI,EAAEuB,WAAWvB,IAAI,EAAA,CAAEqB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcrB,IAAI;QAC7EC,wBAAoBN,mBAAAA,EAAa4B,WAAWtB,kBAAkB,EAAA,CAAEoB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcpB,kBAAkB;IAClG;AACF,EAAE"}
+{"version":3,"sources":["../src/components/FunnelChart/useFunnelChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { FunnelChartProps, FunnelChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { getChartTitleStyles, HighContrastSelector } from '../../utilities/index';\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  chartTitle: 'fui-funnel__chartTitle',\n  svgTooltip: 'fui-funnel__svgTooltip',\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  chartTitle: getChartTitleStyles() as GriffelStyle,\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\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    chartTitle: mergeClasses(funnelClassNames.chartTitle, baseStyles.chartTitle, props.styles?.chartTitle),\n    svgTooltip: mergeClasses(funnelClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","getChartTitleStyles","HighContrastSelector","funnelClassNames","root","chart","text","calloutContentRoot","chartTitle","svgTooltip","useStyles","alignItems","width","height","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","position","textAlign","display","pointerEvents","fontWeightSemibold","fill","colorNeutralForeground1","maxWidth","colorNeutralBackground1","useFunnelChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA;;;;;;;;;;;;IAWaK,gBAAAA;;;wBAkDA0B;eAAAA;;;uBA3D0C,iBAAiB;4BACjD,wBAAwB;uBAGW,wBAAwB;AAK3E,yBAA4D;IACjEzB,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,oBAAoB;IACpBC,YAAY;IACZC,YAAY;AACd,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYZ,iBAAAA,EAAW;IAC3BM,MAAM;QACJO,YAAY;QACZC,OAAO;QACPC,QAAQ;QACRC,YAAYd,kBAAAA,CAAOe,cAAc;QACjCC,UAAUhB,kBAAAA,CAAOiB,eAAe;QAChCC,YAAYlB,kBAAAA,CAAOmB,iBAAiB;QACpCC,UAAU;QACVC,WAAW;IACb;IACAhB,OAAO;QACLiB,SAAS;QACTV,OAAO;QACPC,QAAQ;IACV;IACAP,MAAM;QACJiB,eAAe;QACfL,YAAYlB,kBAAAA,CAAOwB,kBAAkB;QACrCC,MAAMzB,kBAAAA,CAAO0B,uBAAuB;QACpCZ,YAAYd,kBAAAA,CAAOe,cAAc;QACjCC,UAAUhB,kBAAAA,CAAOiB,eAAe;IAClC;IACAV,oBAAoB;QAClBoB,UAAU;IACZ;IACAnB,gBAAYP,0BAAAA;IACZQ,YAAY;QACVgB,MAAMzB,kBAAAA,CAAO4B,uBAAuB;QACpC,CAAC1B,2BAAAA,CAAqB,EAAE;YACtBuB,MAAM;QACR;IACF;AACF;AAKO,6BAA6B,CAACK;QAKqCA,eACRA,gBACHA,gBACKA,gBACaA,gBACAA;IAT/E,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAatB;IAEnB,OAAO;QACLN,MAAML,uBAAAA,EAAaI,iBAAiBC,IAAI,EAAE4B,WAAW5B,IAAI,EAAE2B,WAAAA,CAAWD,gBAAAA,MAAMG,MAAM,AAANA,MAAM,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAc1B,IAAI;QACxFC,WAAON,mBAAAA,EAAaI,iBAAiBE,KAAK,EAAE2B,WAAW3B,KAAK,EAAA,CAAEyB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAczB,KAAK;QACjFC,UAAMP,mBAAAA,EAAaI,iBAAiBG,IAAI,EAAE0B,WAAW1B,IAAI,EAAA,CAAEwB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcxB,IAAI;QAC7EC,wBAAoBR,mBAAAA,EAAaiC,WAAWzB,kBAAkB,EAAA,CAAEuB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcvB,kBAAkB;QAChGC,gBAAYT,mBAAAA,EAAaI,iBAAiBK,UAAU,EAAEwB,WAAWxB,UAAU,EAAA,CAAEsB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAActB,UAAU;QACrGC,gBAAYV,mBAAAA,EAAaI,iBAAiBM,UAAU,EAAEuB,WAAWvB,UAAU,EAAA,CAAEqB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcrB,UAAU;IACvG;AACF,EAAE"}

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

@@ -513,13 +513,14 @@ const GaugeChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         onMouseLeave: _handleMouseOut
     }, /*#__PURE__*/ _react.createElement("g", {
         transform: `translate(${_width / 2}, ${_height - (_margins.bottom + _legendsHeight)})`
-    }, props.chartTitle && /*#__PURE__*/ _react.createElement("text", {
+    }, props.chartTitle && /*#__PURE__*/ _react.createElement(_index.ChartTitle, {
+        title: props.chartTitle,
         x: 0,
         y: -(_outerRadius + TITLE_OFFSET),
-        textAnchor: "middle",
         className: classes.chartTitle,
-        "aria-hidden": true
-    }, props.chartTitle), !props.hideMinMax && /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("text", {
+        titleStyles: props.titleStyles,
+        tooltipClassName: classes.svgTooltip
+    }), !props.hideMinMax && /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("text", {
         x: (_isRTL ? 1 : -1) * (_outerRadius + LABEL_OFFSET),
         y: 0,
         textAnchor: "end",

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/GaugeChart/GaugeChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useGaugeChartStyles } from './useGaugeChartStyles.styles';\nimport { select as d3Select } from 'd3-selection';\nimport { arc as d3Arc } from 'd3-shape';\nimport { YValueHover } from '../../index';\nimport {\n  Points,\n  areArraysEqual,\n  formatScientificLimitWidth,\n  getAccessibleDataObject,\n  getColorFromToken,\n  getNextColor,\n  pointTypes,\n  useRtl,\n} from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { SVGTooltipText } from '../../utilities/SVGTooltipText';\nimport { Legend, LegendShape, Legends, Shape } from '../Legends/index';\nimport { GaugeChartVariant, GaugeValueFormat, GaugeChartProps, GaugeChartSegment } from './GaugeChart.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { useImageExport } from '../../utilities/hooks';\n\nconst GAUGE_MARGIN = 16;\nconst LABEL_WIDTH = 36;\nconst LABEL_HEIGHT = 16;\nconst LABEL_OFFSET = 4;\nconst TITLE_OFFSET = 11;\nconst EXTRA_NEEDLE_LENGTH = 4;\nexport const ARC_PADDING = 2;\nexport const BREAKPOINTS = [\n  { minRadius: 52, arcWidth: 12, fontSize: 20 },\n  { minRadius: 70, arcWidth: 16, fontSize: 24 },\n  { minRadius: 88, arcWidth: 20, fontSize: 32 },\n  { minRadius: 106, arcWidth: 24, fontSize: 32 },\n  { minRadius: 124, arcWidth: 28, fontSize: 40 },\n  { minRadius: 142, arcWidth: 32, fontSize: 40 },\n];\n\nexport const calcNeedleRotation = (chartValue: number, minValue: number, maxValue: number): number => {\n  let needleRotation = ((chartValue - minValue) / (maxValue - minValue)) * 180;\n  if (needleRotation < 0) {\n    needleRotation = 0;\n  } else if (needleRotation > 180) {\n    needleRotation = 180;\n  }\n\n  return needleRotation;\n};\n\nexport const getSegmentLabel = (\n  segment: ExtendedSegment,\n  minValue: number,\n  maxValue: number,\n  variant?: GaugeChartVariant,\n  isAriaLabel: boolean = false,\n): string => {\n  if (isAriaLabel) {\n    return minValue === 0 && variant === 'single-segment'\n      ? `${segment.legend}, ${segment.size} out of ${maxValue} or ${((segment.size / maxValue) * 100).toFixed()}%`\n      : `${segment.legend}, ${segment.start} to ${segment.end}`;\n  }\n\n  return minValue === 0 && variant === 'single-segment'\n    ? `${segment.size} (${((segment.size / maxValue) * 100).toFixed()}%)`\n    : `${segment.start} - ${segment.end}`;\n};\n\nexport const getChartValueLabel = (\n  chartValue: number,\n  minValue: number,\n  maxValue: number,\n  chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string),\n  forCallout: boolean = false,\n): string => {\n  if (forCallout) {\n    // When displaying the chart value as a percentage, use fractions in the callout, and vice versa.\n    // This helps clarify the actual value and avoid repetition.\n    return minValue !== 0\n      ? chartValue.toString()\n      : chartValueFormat === 'fraction'\n      ? `${((chartValue / maxValue) * 100).toFixed()}%`\n      : `${chartValue}/${maxValue}`;\n  }\n\n  return typeof chartValueFormat === 'function'\n    ? chartValueFormat([chartValue - minValue, maxValue - minValue])\n    : minValue !== 0\n    ? chartValue.toString()\n    : chartValueFormat === 'fraction'\n    ? `${chartValue}/${maxValue}`\n    : `${((chartValue / maxValue) * 100).toFixed()}%`;\n};\n\ninterface YValue extends Omit<YValueHover, 'y'> {\n  y?: string | number;\n}\nexport interface ExtendedSegment extends GaugeChartSegment {\n  start: number;\n  end: number;\n}\n\nexport const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwardRef<HTMLDivElement, GaugeChartProps>(\n  (props, forwardedRef) => {\n    const _getMargins = () => {\n      const { hideMinMax, chartTitle, sublabel } = props;\n      return {\n        left: (!hideMinMax ? LABEL_OFFSET + LABEL_WIDTH : 0) + GAUGE_MARGIN,\n        right: (!hideMinMax ? LABEL_OFFSET + LABEL_WIDTH : 0) + GAUGE_MARGIN,\n        top: (chartTitle ? TITLE_OFFSET + LABEL_HEIGHT : EXTRA_NEEDLE_LENGTH / 2) + GAUGE_MARGIN,\n        bottom: (sublabel ? LABEL_OFFSET + LABEL_HEIGHT : 0) + GAUGE_MARGIN,\n      };\n    };\n    const _margins: { left: number; right: number; top: number; bottom: number } = _getMargins();\n    const _legendsHeight: number = !props.hideLegend ? 32 : 0;\n    const { chartContainerRef: _rootElem, legendsRef: _legendsRef } = useImageExport(\n      props.componentRef,\n      props.hideLegend,\n      false,\n    );\n    const _isRTL: boolean = useRtl();\n    const [width, setWidth] = React.useState<number>(140 + _getMargins().left + _getMargins().right);\n    const [height, setHeight] = React.useState<number>(70 + _getMargins().top + _getMargins().bottom + _legendsHeight);\n    const [hoveredLegend, setHoveredLegend] = React.useState<string>('');\n    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n    const [focusedElement, setFocusedElement] = React.useState<string | undefined>('');\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const [hoverXValue, setHoverXValue] = React.useState<string | number>('');\n    const [hoverYValues, setHoverYValues] = React.useState<YValue[]>([]);\n    const [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\n    const prevPropsRef = React.useRef<GaugeChartProps | null>(null);\n    const _width = props.width || width;\n    const _height = props.height || height;\n    const _outerRadius: number = Math.min(\n      (_width - (_margins.left + _margins.right)) / 2,\n      _height - (_margins.top + _margins.bottom + _legendsHeight),\n    );\n    const { arcWidth, chartValueSize } = _getStylesBasedOnBreakpoint();\n    const _innerRadius: number = _outerRadius - arcWidth;\n    let _minValue!: number;\n    let _maxValue!: number;\n    let _segments!: ExtendedSegment[];\n    let _calloutAnchor: string = '';\n\n    React.useEffect(() => {\n      if (_rootElem.current) {\n        setWidth(_rootElem.current.clientWidth);\n        setHeight(_rootElem.current.clientHeight);\n      }\n    }, []);\n\n    React.useEffect(() => {\n      if (prevPropsRef.current) {\n        const prevProps = prevPropsRef.current;\n        if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n          setSelectedLegends(props.legendProps?.selectedLegends || []);\n        }\n      }\n      prevPropsRef.current = props;\n    }, [props]);\n\n    const classes = useGaugeChartStyles(props);\n    function _getStylesBasedOnBreakpoint() {\n      for (let index = BREAKPOINTS.length - 1; index >= 0; index -= 1) {\n        if (_outerRadius >= BREAKPOINTS[index].minRadius) {\n          return {\n            arcWidth: BREAKPOINTS[index].arcWidth,\n            chartValueSize: BREAKPOINTS[index].fontSize,\n          };\n        }\n      }\n      return {\n        arcWidth: BREAKPOINTS[0].arcWidth,\n        chartValueSize: BREAKPOINTS[0].fontSize,\n      };\n    }\n\n    function _processProps() {\n      const { minValue = 0, maxValue, segments, roundCorners } = props;\n\n      let total = minValue;\n      const processedSegments: ExtendedSegment[] = segments.map(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        (segment: { size: number; legend: any; color: string; accessibilityData: any }, index: number) => {\n          const size = Math.max(segment.size, 0);\n          total += size;\n          return {\n            legend: segment.legend,\n            size,\n            color:\n              typeof segment.color !== 'undefined'\n                ? getColorFromToken(segment.color, false)\n                : getNextColor(index, 0, false),\n            accessibilityData: segment.accessibilityData,\n            start: total - size,\n            end: total,\n          };\n        },\n      );\n      if (typeof maxValue !== 'undefined' && total < maxValue) {\n        processedSegments.push({\n          legend: 'Unknown',\n          size: maxValue - total,\n          color: 'neutralLight',\n          start: total,\n          end: maxValue,\n        });\n        total = maxValue;\n      }\n\n      const arcGenerator = d3Arc()\n        .cornerRadius(roundCorners ? 3 : 0)\n        .padAngle(ARC_PADDING / _outerRadius)\n        .padRadius(_outerRadius);\n      const rtlSafeSegments = _isRTL ? Array.from(processedSegments).reverse() : processedSegments;\n      let prevAngle = -Math.PI / 2;\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      const arcs = rtlSafeSegments.map((segment, index) => {\n        const endAngle = prevAngle + (segment.size / (total - minValue)) * Math.PI;\n        const d = arcGenerator({\n          innerRadius: _innerRadius,\n          outerRadius: _outerRadius,\n          startAngle: prevAngle,\n          endAngle,\n        })!;\n        prevAngle = endAngle;\n        return {\n          d,\n          segmentIndex: _isRTL ? processedSegments.length - 1 - index : index,\n          startAngle: prevAngle - (segment.size / (total - minValue)) * Math.PI,\n          endAngle,\n        };\n      });\n\n      _minValue = minValue;\n      _maxValue = total;\n      _segments = processedSegments;\n\n      return {\n        arcs,\n      };\n    }\n\n    function _renderNeedle() {\n      const needleRotation = calcNeedleRotation(props.chartValue, _minValue, _maxValue);\n      const rtlSafeNeedleRotation = _isRTL ? 180 - needleRotation : needleRotation;\n      const strokeWidth = 2;\n      const halfStrokeWidth = strokeWidth / 2;\n      const needleLength = _outerRadius - _innerRadius + EXTRA_NEEDLE_LENGTH;\n      const needleId = `gauge-chart-needle`;\n      return (\n        <g transform={`rotate(${rtlSafeNeedleRotation}, 0, 0)`}>\n          <path\n            d={`\n            M 0,${-halfStrokeWidth - 3}\n            L ${-needleLength},${-halfStrokeWidth - 1}\n            A ${halfStrokeWidth + 1},${halfStrokeWidth + 1},0,0,0,${-needleLength},${halfStrokeWidth + 1}\n            L 0,${halfStrokeWidth + 3}\n            A ${halfStrokeWidth + 3},${halfStrokeWidth + 3},0,0,0,0,${-halfStrokeWidth - 3}\n          `}\n            id={needleId}\n            strokeWidth={strokeWidth}\n            className={classes.needle}\n            transform={`translate(${-_innerRadius + EXTRA_NEEDLE_LENGTH / 2})`}\n            data-is-focusable={true}\n            onFocus={e => _handleFocus(e, 'Needle', needleId)}\n            onBlur={_handleBlur}\n            onMouseEnter={e => _handleMouseOver(e, 'Needle', needleId)}\n            onMouseMove={e => _handleMouseOver(e, 'Needle', needleId)}\n            role=\"img\"\n            aria-label={\n              'Current value: ' + getChartValueLabel(props.chartValue, _minValue, _maxValue, props.chartValueFormat)\n            }\n          />\n        </g>\n      );\n    }\n\n    function _renderLegends() {\n      if (props.hideLegend) {\n        return null;\n      }\n\n      const legends: Legend[] = _segments.map((segment, index) => {\n        const color: string = segment.color || getNextColor(index, 0, false);\n\n        return {\n          title: segment.legend,\n          color,\n          hoverAction: () => {\n            setHoveredLegend(segment.legend);\n          },\n          onMouseOutAction: () => {\n            setHoveredLegend('');\n          },\n        };\n      });\n\n      return (\n        <div className={classes.legendsContainer}>\n          <Legends\n            legends={legends}\n            centerLegends\n            {...props.legendProps}\n            // eslint-disable-next-line react/jsx-no-bind\n            onChange={_onLegendSelectionChange}\n            legendRef={_legendsRef}\n          />\n        </div>\n      );\n    }\n\n    function _onLegendSelectionChange(\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      selectedLegends: string[],\n      event: React.MouseEvent<HTMLButtonElement>,\n      currentLegend?: Legend,\n    ): void {\n      if (props.legendProps?.canSelectMultipleLegends) {\n        setSelectedLegends(selectedLegends);\n      } else {\n        setSelectedLegends(selectedLegends.slice(-1));\n      }\n      if (props.legendProps?.onChange) {\n        props.legendProps.onChange(selectedLegends, event, currentLegend);\n      }\n    }\n\n    /**\n     * This function checks if the given legend is highlighted or not.\n     * A legend can be highlighted in 2 ways:\n     * 1. selection: if the user clicks on it\n     * 2. hovering: if there is no selected legend and the user hovers over it\n     */\n    function _legendHighlighted(legend: string) {\n      return _getHighlightedLegend().includes(legend!);\n    }\n\n    /**\n     * This function checks if none of the legends is selected or hovered.\n     */\n    function _noLegendHighlighted() {\n      return _getHighlightedLegend().length === 0;\n    }\n\n    function _getHighlightedLegend() {\n      return selectedLegends.length > 0 ? selectedLegends : hoveredLegend ? [hoveredLegend] : [];\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    function _handleFocus(focusEvent: React.FocusEvent<SVGElement>, focusedElement: string, elementId?: string) {\n      _showCallout(focusEvent, focusedElement, true, elementId);\n    }\n\n    function _handleBlur() {\n      _hideCallout(true);\n    }\n\n    function _handleMouseOver(mouseEvent: React.MouseEvent<SVGElement>, hoveredElement: string, elementId?: string) {\n      _showCallout(mouseEvent, hoveredElement, false, elementId);\n    }\n\n    function _handleMouseOut() {\n      _hideCallout(false);\n    }\n\n    function _handleCalloutDismiss() {\n      _hideCallout(false);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function _showCallout(\n      event: React.MouseEvent<SVGElement, MouseEvent> | React.FocusEvent<SVGElement, Element>,\n      legend: string,\n      isFocusEvent: boolean,\n      elementId?: string,\n    ) {\n      if (_calloutAnchor === legend) {\n        return;\n      }\n      const targetElement = document.getElementById(elementId!);\n      _calloutAnchor = legend;\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      const hoverXValue: string =\n        'Current value is ' + getChartValueLabel(props.chartValue, _minValue, _maxValue, props.chartValueFormat, true);\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      const hoverYValues: YValue[] = _segments\n        .filter(segment => _noLegendHighlighted() || _legendHighlighted(segment.legend))\n        .map(segment => {\n          const yValue: YValue = {\n            legend: segment.legend,\n            y: getSegmentLabel(segment, _minValue, _maxValue, props.variant),\n            color: segment.color,\n          };\n          return yValue;\n        });\n      setPopoverOpen(\n        ['Needle', 'Chart value'].includes(legend) || _noLegendHighlighted() || _legendHighlighted(legend),\n      );\n      setRefSelected(targetElement);\n      setHoverXValue(hoverXValue);\n      setHoverYValues(hoverYValues);\n      if (isFocusEvent) {\n        setFocusedElement(legend);\n      }\n    }\n\n    function _hideCallout(isBlurEvent?: boolean) {\n      _calloutAnchor = '';\n      setPopoverOpen(false);\n      setHoverXValue('');\n      setHoverYValues([]);\n      if (isBlurEvent) {\n        setFocusedElement('');\n      }\n    }\n\n    function _wrapContent(content: string, id: string, maxWidth: number) {\n      const textElement = d3Select<SVGTextElement, {}>(`#${id}`);\n      textElement.text(content);\n      if (!textElement.node()) {\n        return false;\n      }\n\n      let isOverflowing = false;\n      let textLength = textElement.node()!.getComputedTextLength();\n      while (textLength > maxWidth && content.length > 0) {\n        content = content.slice(0, -1);\n        textElement.text(content + '...');\n        isOverflowing = true;\n        textLength = textElement.node()!.getComputedTextLength();\n      }\n      return isOverflowing;\n    }\n\n    // TO DO: Write a common functional component for Multi value callout and divide sub count method\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function _multiValueCallout(calloutProps: any) {\n      const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(calloutProps.YValueHover);\n      return (\n        <div className={classes.calloutContentRoot}>\n          <div\n            className={classes.calloutDateTimeContainer}\n            style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n          >\n            <div\n              className={classes.calloutContentX}\n              {...getAccessibleDataObject(calloutProps!.xAxisCalloutAccessibilityData, 'text', false)}\n            >\n              {formatToLocaleString(calloutProps!.hoverXValue, props.culture) as React.ReactNode}\n            </div>\n          </div>\n          <div className={classes.calloutInfoContainer} style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n            {calloutProps!.YValueHover &&\n              calloutProps!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n                const isLast: boolean = index + 1 === yValues.length;\n                const { shouldDrawBorderBottom = false } = yValue;\n                return (\n                  <div\n                    {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                    key={`callout-content-${index}`}\n                    style={\n                      yValueHoverSubCountsExists\n                        ? {\n                            display: 'inline-block',\n                            ...(shouldDrawBorderBottom && {\n                              paddingBottom: '10px',\n                            }),\n                          }\n                        : {\n                            ...(shouldDrawBorderBottom && {\n                              paddingBottom: '10px',\n                            }),\n                          }\n                    }\n                  >\n                    {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                  </div>\n                );\n              })}\n            {!!calloutProps.descriptionMessage && (\n              <div className={classes.descriptionMessage}>{calloutProps.descriptionMessage}</div>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]) {\n      if (yValueHover) {\n        return yValueHover.some(\n          (yValue: {\n            legend?: string;\n            y?: number;\n            color?: string;\n            yAxisCalloutData?: string | { [id: string]: number };\n          }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n        );\n      }\n      return false;\n    }\n\n    function _getCalloutContent(\n      xValue: YValueHover,\n      index: number,\n      yValueHoverSubCountsExists: boolean,\n      isLast: boolean,\n    ): React.ReactNode {\n      const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n      const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n      const { culture } = props;\n      const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n      if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n        return (\n          <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n            {yValueHoverSubCountsExists && (\n              <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n                {xValue.legend!} ({yValue})\n              </div>\n            )}\n            <div\n              id={`${index}_${xValue.y}`}\n              className={classes.calloutBlockContainer}\n              style={{ borderInlineStart: `4px solid ${xValue.color}` }}\n            >\n              {toDrawShape && (\n                <Shape\n                  svgProps={{\n                    className: classes.shapeStyles,\n                  }}\n                  pathProps={{ fill: xValue.color }}\n                  shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n                  style={{ display: 'flex' }}\n                />\n              )}\n              <div>\n                <div className={classes.calloutlegendText}> {xValue.legend}</div>\n                <div className={classes.calloutContentY}>\n                  {\n                    formatToLocaleString(\n                      xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,\n                      culture,\n                    ) as React.ReactNode\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        );\n      } else {\n        const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n        return (\n          <div style={marginStyle}>\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n            {Object.keys(subcounts).map((subcountName: string) => {\n              return (\n                <div key={subcountName} className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>\n                    {' '}\n                    {formatToLocaleString(subcountName, culture) as React.ReactNode}\n                  </div>\n                  <div className={classes.calloutContentY}>\n                    {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        );\n      }\n    }\n\n    function _getChartTitle(): string {\n      const { chartTitle } = props;\n      return (chartTitle ? `${chartTitle}. ` : '') + `Gauge chart with ${_segments.length} segments. `;\n    }\n    const { arcs } = _processProps();\n    const arrowAttributes = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n    return (\n      <div\n        className={classes.root}\n        ref={el => {\n          _rootElem.current = el;\n        }}\n      >\n        <div className={classes.chartWrapper} {...arrowAttributes}>\n          <svg\n            className={classes.chart}\n            width={_width}\n            height={_height - _legendsHeight}\n            role=\"region\"\n            aria-label={_getChartTitle()}\n            onMouseLeave={_handleMouseOut}\n          >\n            <g transform={`translate(${_width / 2}, ${_height - (_margins.bottom + _legendsHeight)})`}>\n              {props.chartTitle && (\n                <text\n                  x={0}\n                  y={-(_outerRadius + TITLE_OFFSET)}\n                  textAnchor=\"middle\"\n                  className={classes.chartTitle}\n                  aria-hidden={true}\n                >\n                  {props.chartTitle}\n                </text>\n              )}\n              {!props.hideMinMax && (\n                <>\n                  <text\n                    x={(_isRTL ? 1 : -1) * (_outerRadius + LABEL_OFFSET)}\n                    y={0}\n                    textAnchor=\"end\"\n                    className={classes.limits}\n                    role=\"img\"\n                    aria-label={`Min value: ${_minValue}`}\n                  >\n                    {formatScientificLimitWidth(_minValue)}\n                  </text>\n                  <text\n                    x={(_isRTL ? -1 : 1) * (_outerRadius + LABEL_OFFSET)}\n                    y={0}\n                    textAnchor=\"start\"\n                    className={classes.limits}\n                    role=\"img\"\n                    aria-label={`Max value: ${_maxValue}`}\n                  >\n                    {formatScientificLimitWidth(_maxValue)}\n                  </text>\n                </>\n              )}\n              {arcs.map((arc, index) => {\n                const segment = _segments[arc.segmentIndex];\n                const arcId = `gauge-chart-arc-${index}`;\n                return (\n                  <React.Fragment key={index}>\n                    <path\n                      d={arc.d}\n                      id={arcId}\n                      strokeWidth={focusedElement === segment.legend ? ARC_PADDING : 0}\n                      className={classes.segment}\n                      fill={segment.color}\n                      opacity={_legendHighlighted(segment.legend) || _noLegendHighlighted() ? 1 : 0.1}\n                      {...getAccessibleDataObject(\n                        {\n                          ariaLabel: getSegmentLabel(segment, _minValue, _maxValue, props.variant, true),\n                          ...segment.accessibilityData,\n                        },\n                        'img',\n                        true,\n                      )}\n                      onFocus={e => _handleFocus(e, segment.legend, arcId)}\n                      onBlur={_handleBlur}\n                      onMouseEnter={e => _handleMouseOver(e, segment.legend, arcId)}\n                      onMouseLeave={e => _handleCalloutDismiss()}\n                      onMouseMove={e => _handleMouseOver(e, segment.legend, arcId)}\n                      tabIndex={_legendHighlighted(segment.legend) || _noLegendHighlighted() ? 0 : undefined}\n                    />\n                  </React.Fragment>\n                );\n              })}\n              {_renderNeedle()}\n              <g\n                onMouseEnter={e => _handleMouseOver(e, 'Chart value')}\n                onMouseMove={e => _handleMouseOver(e, 'Chart value')}\n              >\n                <SVGTooltipText\n                  content={getChartValueLabel(props.chartValue, _minValue, _maxValue, props.chartValueFormat)}\n                  textProps={{\n                    x: 0,\n                    y: 0,\n                    textAnchor: 'middle',\n                    className: classes.chartValue,\n                    fontSize: chartValueSize,\n                    'aria-hidden': 'true',\n                  }}\n                  maxWidth={_innerRadius * 2 - 24}\n                  wrapContent={_wrapContent}\n                />\n              </g>\n              {props.sublabel && (\n                <SVGTooltipText\n                  content={props.sublabel}\n                  textProps={{\n                    x: 0,\n                    y: 4,\n                    textAnchor: 'middle',\n                    dominantBaseline: 'hanging',\n                    className: classes.sublabel,\n                  }}\n                  maxWidth={_innerRadius * 2}\n                  wrapContent={_wrapContent}\n                />\n              )}\n            </g>\n          </svg>\n        </div>\n        {_renderLegends()}\n        {!props.hideTooltip && isPopoverOpen && (\n          <ChartPopover\n            {...props.calloutProps}\n            positioning={{\n              target: refSelected,\n            }}\n            isPopoverOpen={isPopoverOpen}\n            customCallout={{\n              customizedCallout: _multiValueCallout({ hoverXValue: hoverXValue, YValueHover: hoverYValues }),\n            }}\n          />\n        )}\n      </div>\n    );\n  },\n);\nGaugeChart.displayName = 'GaugeChart';\n"],"names":["React","useGaugeChartStyles","select","d3Select","arc","d3Arc","Points","areArraysEqual","formatScientificLimitWidth","getAccessibleDataObject","getColorFromToken","getNextColor","pointTypes","useRtl","formatToLocaleString","SVGTooltipText","Legends","Shape","useArrowNavigationGroup","ChartPopover","useImageExport","GAUGE_MARGIN","LABEL_WIDTH","LABEL_HEIGHT","LABEL_OFFSET","TITLE_OFFSET","EXTRA_NEEDLE_LENGTH","ARC_PADDING","BREAKPOINTS","minRadius","arcWidth","fontSize","calcNeedleRotation","chartValue","minValue","maxValue","needleRotation","getSegmentLabel","segment","variant","isAriaLabel","legend","size","toFixed","start","end","getChartValueLabel","chartValueFormat","forCallout","toString","GaugeChart","forwardRef","props","forwardedRef","_getMargins","hideMinMax","chartTitle","sublabel","left","right","top","bottom","_margins","_legendsHeight","hideLegend","chartContainerRef","_rootElem","legendsRef","_legendsRef","componentRef","_isRTL","width","setWidth","useState","height","setHeight","hoveredLegend","setHoveredLegend","selectedLegends","setSelectedLegends","legendProps","focusedElement","setFocusedElement","isPopoverOpen","setPopoverOpen","hoverXValue","setHoverXValue","hoverYValues","setHoverYValues","refSelected","setRefSelected","prevPropsRef","useRef","_width","_height","_outerRadius","Math","min","chartValueSize","_getStylesBasedOnBreakpoint","_innerRadius","_minValue","_maxValue","_segments","_calloutAnchor","useEffect","current","clientWidth","clientHeight","prevProps","classes","index","length","_processProps","segments","roundCorners","total","processedSegments","map","max","color","accessibilityData","push","arcGenerator","cornerRadius","padAngle","padRadius","rtlSafeSegments","Array","from","reverse","prevAngle","PI","arcs","endAngle","d","innerRadius","outerRadius","startAngle","segmentIndex","_renderNeedle","rtlSafeNeedleRotation","strokeWidth","halfStrokeWidth","needleLength","needleId","g","transform","path","id","className","needle","data-is-focusable","onFocus","e","_handleFocus","onBlur","_handleBlur","onMouseEnter","_handleMouseOver","onMouseMove","role","aria-label","_renderLegends","legends","title","hoverAction","onMouseOutAction","div","legendsContainer","centerLegends","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_legendHighlighted","_getHighlightedLegend","includes","_noLegendHighlighted","focusEvent","elementId","_showCallout","_hideCallout","mouseEvent","hoveredElement","_handleMouseOut","_handleCalloutDismiss","isFocusEvent","targetElement","document","getElementById","filter","yValue","y","isBlurEvent","_wrapContent","content","maxWidth","textElement","text","node","isOverflowing","textLength","getComputedTextLength","_multiValueCallout","calloutProps","yValueHoverSubCountsExists","_yValueHoverSubCountsExists","YValueHover","calloutContentRoot","calloutDateTimeContainer","style","marginBottom","calloutContentX","xAxisCalloutAccessibilityData","culture","calloutInfoContainer","display","yValues","isLast","shouldDrawBorderBottom","callOutAccessibilityData","key","paddingBottom","_getCalloutContent","descriptionMessage","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","calloutBlockContainer","borderInlineStart","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutlegendText","calloutContentY","data","subcounts","subcountName","_getChartTitle","arrowAttributes","circular","axis","root","ref","el","chartWrapper","svg","chart","onMouseLeave","x","textAnchor","aria-hidden","limits","arcId","Fragment","opacity","ariaLabel","tabIndex","textProps","wrapContent","dominantBaseline","hideTooltip","positioning","target","customCallout","customizedCallout","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/GaugeChart/GaugeChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useGaugeChartStyles } from './useGaugeChartStyles.styles';\nimport { select as d3Select } from 'd3-selection';\nimport { arc as d3Arc } from 'd3-shape';\nimport { YValueHover } from '../../index';\nimport {\n  Points,\n  areArraysEqual,\n  formatScientificLimitWidth,\n  getAccessibleDataObject,\n  getColorFromToken,\n  getNextColor,\n  pointTypes,\n  useRtl,\n  ChartTitle,\n} from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { SVGTooltipText } from '../../utilities/SVGTooltipText';\nimport { Legend, LegendShape, Legends, Shape } from '../Legends/index';\nimport { GaugeChartVariant, GaugeValueFormat, GaugeChartProps, GaugeChartSegment } from './GaugeChart.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { useImageExport } from '../../utilities/hooks';\n\nconst GAUGE_MARGIN = 16;\nconst LABEL_WIDTH = 36;\nconst LABEL_HEIGHT = 16;\nconst LABEL_OFFSET = 4;\nconst TITLE_OFFSET = 11;\nconst EXTRA_NEEDLE_LENGTH = 4;\nexport const ARC_PADDING = 2;\nexport const BREAKPOINTS = [\n  { minRadius: 52, arcWidth: 12, fontSize: 20 },\n  { minRadius: 70, arcWidth: 16, fontSize: 24 },\n  { minRadius: 88, arcWidth: 20, fontSize: 32 },\n  { minRadius: 106, arcWidth: 24, fontSize: 32 },\n  { minRadius: 124, arcWidth: 28, fontSize: 40 },\n  { minRadius: 142, arcWidth: 32, fontSize: 40 },\n];\n\nexport const calcNeedleRotation = (chartValue: number, minValue: number, maxValue: number): number => {\n  let needleRotation = ((chartValue - minValue) / (maxValue - minValue)) * 180;\n  if (needleRotation < 0) {\n    needleRotation = 0;\n  } else if (needleRotation > 180) {\n    needleRotation = 180;\n  }\n\n  return needleRotation;\n};\n\nexport const getSegmentLabel = (\n  segment: ExtendedSegment,\n  minValue: number,\n  maxValue: number,\n  variant?: GaugeChartVariant,\n  isAriaLabel: boolean = false,\n): string => {\n  if (isAriaLabel) {\n    return minValue === 0 && variant === 'single-segment'\n      ? `${segment.legend}, ${segment.size} out of ${maxValue} or ${((segment.size / maxValue) * 100).toFixed()}%`\n      : `${segment.legend}, ${segment.start} to ${segment.end}`;\n  }\n\n  return minValue === 0 && variant === 'single-segment'\n    ? `${segment.size} (${((segment.size / maxValue) * 100).toFixed()}%)`\n    : `${segment.start} - ${segment.end}`;\n};\n\nexport const getChartValueLabel = (\n  chartValue: number,\n  minValue: number,\n  maxValue: number,\n  chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string),\n  forCallout: boolean = false,\n): string => {\n  if (forCallout) {\n    // When displaying the chart value as a percentage, use fractions in the callout, and vice versa.\n    // This helps clarify the actual value and avoid repetition.\n    return minValue !== 0\n      ? chartValue.toString()\n      : chartValueFormat === 'fraction'\n      ? `${((chartValue / maxValue) * 100).toFixed()}%`\n      : `${chartValue}/${maxValue}`;\n  }\n\n  return typeof chartValueFormat === 'function'\n    ? chartValueFormat([chartValue - minValue, maxValue - minValue])\n    : minValue !== 0\n    ? chartValue.toString()\n    : chartValueFormat === 'fraction'\n    ? `${chartValue}/${maxValue}`\n    : `${((chartValue / maxValue) * 100).toFixed()}%`;\n};\n\ninterface YValue extends Omit<YValueHover, 'y'> {\n  y?: string | number;\n}\nexport interface ExtendedSegment extends GaugeChartSegment {\n  start: number;\n  end: number;\n}\n\nexport const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwardRef<HTMLDivElement, GaugeChartProps>(\n  (props, forwardedRef) => {\n    const _getMargins = () => {\n      const { hideMinMax, chartTitle, sublabel } = props;\n      return {\n        left: (!hideMinMax ? LABEL_OFFSET + LABEL_WIDTH : 0) + GAUGE_MARGIN,\n        right: (!hideMinMax ? LABEL_OFFSET + LABEL_WIDTH : 0) + GAUGE_MARGIN,\n        top: (chartTitle ? TITLE_OFFSET + LABEL_HEIGHT : EXTRA_NEEDLE_LENGTH / 2) + GAUGE_MARGIN,\n        bottom: (sublabel ? LABEL_OFFSET + LABEL_HEIGHT : 0) + GAUGE_MARGIN,\n      };\n    };\n    const _margins: { left: number; right: number; top: number; bottom: number } = _getMargins();\n    const _legendsHeight: number = !props.hideLegend ? 32 : 0;\n    const { chartContainerRef: _rootElem, legendsRef: _legendsRef } = useImageExport(\n      props.componentRef,\n      props.hideLegend,\n      false,\n    );\n    const _isRTL: boolean = useRtl();\n    const [width, setWidth] = React.useState<number>(140 + _getMargins().left + _getMargins().right);\n    const [height, setHeight] = React.useState<number>(70 + _getMargins().top + _getMargins().bottom + _legendsHeight);\n    const [hoveredLegend, setHoveredLegend] = React.useState<string>('');\n    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n    const [focusedElement, setFocusedElement] = React.useState<string | undefined>('');\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const [hoverXValue, setHoverXValue] = React.useState<string | number>('');\n    const [hoverYValues, setHoverYValues] = React.useState<YValue[]>([]);\n    const [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\n    const prevPropsRef = React.useRef<GaugeChartProps | null>(null);\n    const _width = props.width || width;\n    const _height = props.height || height;\n    const _outerRadius: number = Math.min(\n      (_width - (_margins.left + _margins.right)) / 2,\n      _height - (_margins.top + _margins.bottom + _legendsHeight),\n    );\n    const { arcWidth, chartValueSize } = _getStylesBasedOnBreakpoint();\n    const _innerRadius: number = _outerRadius - arcWidth;\n    let _minValue!: number;\n    let _maxValue!: number;\n    let _segments!: ExtendedSegment[];\n    let _calloutAnchor: string = '';\n\n    React.useEffect(() => {\n      if (_rootElem.current) {\n        setWidth(_rootElem.current.clientWidth);\n        setHeight(_rootElem.current.clientHeight);\n      }\n    }, []);\n\n    React.useEffect(() => {\n      if (prevPropsRef.current) {\n        const prevProps = prevPropsRef.current;\n        if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n          setSelectedLegends(props.legendProps?.selectedLegends || []);\n        }\n      }\n      prevPropsRef.current = props;\n    }, [props]);\n\n    const classes = useGaugeChartStyles(props);\n    function _getStylesBasedOnBreakpoint() {\n      for (let index = BREAKPOINTS.length - 1; index >= 0; index -= 1) {\n        if (_outerRadius >= BREAKPOINTS[index].minRadius) {\n          return {\n            arcWidth: BREAKPOINTS[index].arcWidth,\n            chartValueSize: BREAKPOINTS[index].fontSize,\n          };\n        }\n      }\n      return {\n        arcWidth: BREAKPOINTS[0].arcWidth,\n        chartValueSize: BREAKPOINTS[0].fontSize,\n      };\n    }\n\n    function _processProps() {\n      const { minValue = 0, maxValue, segments, roundCorners } = props;\n\n      let total = minValue;\n      const processedSegments: ExtendedSegment[] = segments.map(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        (segment: { size: number; legend: any; color: string; accessibilityData: any }, index: number) => {\n          const size = Math.max(segment.size, 0);\n          total += size;\n          return {\n            legend: segment.legend,\n            size,\n            color:\n              typeof segment.color !== 'undefined'\n                ? getColorFromToken(segment.color, false)\n                : getNextColor(index, 0, false),\n            accessibilityData: segment.accessibilityData,\n            start: total - size,\n            end: total,\n          };\n        },\n      );\n      if (typeof maxValue !== 'undefined' && total < maxValue) {\n        processedSegments.push({\n          legend: 'Unknown',\n          size: maxValue - total,\n          color: 'neutralLight',\n          start: total,\n          end: maxValue,\n        });\n        total = maxValue;\n      }\n\n      const arcGenerator = d3Arc()\n        .cornerRadius(roundCorners ? 3 : 0)\n        .padAngle(ARC_PADDING / _outerRadius)\n        .padRadius(_outerRadius);\n      const rtlSafeSegments = _isRTL ? Array.from(processedSegments).reverse() : processedSegments;\n      let prevAngle = -Math.PI / 2;\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      const arcs = rtlSafeSegments.map((segment, index) => {\n        const endAngle = prevAngle + (segment.size / (total - minValue)) * Math.PI;\n        const d = arcGenerator({\n          innerRadius: _innerRadius,\n          outerRadius: _outerRadius,\n          startAngle: prevAngle,\n          endAngle,\n        })!;\n        prevAngle = endAngle;\n        return {\n          d,\n          segmentIndex: _isRTL ? processedSegments.length - 1 - index : index,\n          startAngle: prevAngle - (segment.size / (total - minValue)) * Math.PI,\n          endAngle,\n        };\n      });\n\n      _minValue = minValue;\n      _maxValue = total;\n      _segments = processedSegments;\n\n      return {\n        arcs,\n      };\n    }\n\n    function _renderNeedle() {\n      const needleRotation = calcNeedleRotation(props.chartValue, _minValue, _maxValue);\n      const rtlSafeNeedleRotation = _isRTL ? 180 - needleRotation : needleRotation;\n      const strokeWidth = 2;\n      const halfStrokeWidth = strokeWidth / 2;\n      const needleLength = _outerRadius - _innerRadius + EXTRA_NEEDLE_LENGTH;\n      const needleId = `gauge-chart-needle`;\n      return (\n        <g transform={`rotate(${rtlSafeNeedleRotation}, 0, 0)`}>\n          <path\n            d={`\n            M 0,${-halfStrokeWidth - 3}\n            L ${-needleLength},${-halfStrokeWidth - 1}\n            A ${halfStrokeWidth + 1},${halfStrokeWidth + 1},0,0,0,${-needleLength},${halfStrokeWidth + 1}\n            L 0,${halfStrokeWidth + 3}\n            A ${halfStrokeWidth + 3},${halfStrokeWidth + 3},0,0,0,0,${-halfStrokeWidth - 3}\n          `}\n            id={needleId}\n            strokeWidth={strokeWidth}\n            className={classes.needle}\n            transform={`translate(${-_innerRadius + EXTRA_NEEDLE_LENGTH / 2})`}\n            data-is-focusable={true}\n            onFocus={e => _handleFocus(e, 'Needle', needleId)}\n            onBlur={_handleBlur}\n            onMouseEnter={e => _handleMouseOver(e, 'Needle', needleId)}\n            onMouseMove={e => _handleMouseOver(e, 'Needle', needleId)}\n            role=\"img\"\n            aria-label={\n              'Current value: ' + getChartValueLabel(props.chartValue, _minValue, _maxValue, props.chartValueFormat)\n            }\n          />\n        </g>\n      );\n    }\n\n    function _renderLegends() {\n      if (props.hideLegend) {\n        return null;\n      }\n\n      const legends: Legend[] = _segments.map((segment, index) => {\n        const color: string = segment.color || getNextColor(index, 0, false);\n\n        return {\n          title: segment.legend,\n          color,\n          hoverAction: () => {\n            setHoveredLegend(segment.legend);\n          },\n          onMouseOutAction: () => {\n            setHoveredLegend('');\n          },\n        };\n      });\n\n      return (\n        <div className={classes.legendsContainer}>\n          <Legends\n            legends={legends}\n            centerLegends\n            {...props.legendProps}\n            // eslint-disable-next-line react/jsx-no-bind\n            onChange={_onLegendSelectionChange}\n            legendRef={_legendsRef}\n          />\n        </div>\n      );\n    }\n\n    function _onLegendSelectionChange(\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      selectedLegends: string[],\n      event: React.MouseEvent<HTMLButtonElement>,\n      currentLegend?: Legend,\n    ): void {\n      if (props.legendProps?.canSelectMultipleLegends) {\n        setSelectedLegends(selectedLegends);\n      } else {\n        setSelectedLegends(selectedLegends.slice(-1));\n      }\n      if (props.legendProps?.onChange) {\n        props.legendProps.onChange(selectedLegends, event, currentLegend);\n      }\n    }\n\n    /**\n     * This function checks if the given legend is highlighted or not.\n     * A legend can be highlighted in 2 ways:\n     * 1. selection: if the user clicks on it\n     * 2. hovering: if there is no selected legend and the user hovers over it\n     */\n    function _legendHighlighted(legend: string) {\n      return _getHighlightedLegend().includes(legend!);\n    }\n\n    /**\n     * This function checks if none of the legends is selected or hovered.\n     */\n    function _noLegendHighlighted() {\n      return _getHighlightedLegend().length === 0;\n    }\n\n    function _getHighlightedLegend() {\n      return selectedLegends.length > 0 ? selectedLegends : hoveredLegend ? [hoveredLegend] : [];\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    function _handleFocus(focusEvent: React.FocusEvent<SVGElement>, focusedElement: string, elementId?: string) {\n      _showCallout(focusEvent, focusedElement, true, elementId);\n    }\n\n    function _handleBlur() {\n      _hideCallout(true);\n    }\n\n    function _handleMouseOver(mouseEvent: React.MouseEvent<SVGElement>, hoveredElement: string, elementId?: string) {\n      _showCallout(mouseEvent, hoveredElement, false, elementId);\n    }\n\n    function _handleMouseOut() {\n      _hideCallout(false);\n    }\n\n    function _handleCalloutDismiss() {\n      _hideCallout(false);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function _showCallout(\n      event: React.MouseEvent<SVGElement, MouseEvent> | React.FocusEvent<SVGElement, Element>,\n      legend: string,\n      isFocusEvent: boolean,\n      elementId?: string,\n    ) {\n      if (_calloutAnchor === legend) {\n        return;\n      }\n      const targetElement = document.getElementById(elementId!);\n      _calloutAnchor = legend;\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      const hoverXValue: string =\n        'Current value is ' + getChartValueLabel(props.chartValue, _minValue, _maxValue, props.chartValueFormat, true);\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      const hoverYValues: YValue[] = _segments\n        .filter(segment => _noLegendHighlighted() || _legendHighlighted(segment.legend))\n        .map(segment => {\n          const yValue: YValue = {\n            legend: segment.legend,\n            y: getSegmentLabel(segment, _minValue, _maxValue, props.variant),\n            color: segment.color,\n          };\n          return yValue;\n        });\n      setPopoverOpen(\n        ['Needle', 'Chart value'].includes(legend) || _noLegendHighlighted() || _legendHighlighted(legend),\n      );\n      setRefSelected(targetElement);\n      setHoverXValue(hoverXValue);\n      setHoverYValues(hoverYValues);\n      if (isFocusEvent) {\n        setFocusedElement(legend);\n      }\n    }\n\n    function _hideCallout(isBlurEvent?: boolean) {\n      _calloutAnchor = '';\n      setPopoverOpen(false);\n      setHoverXValue('');\n      setHoverYValues([]);\n      if (isBlurEvent) {\n        setFocusedElement('');\n      }\n    }\n\n    function _wrapContent(content: string, id: string, maxWidth: number) {\n      const textElement = d3Select<SVGTextElement, {}>(`#${id}`);\n      textElement.text(content);\n      if (!textElement.node()) {\n        return false;\n      }\n\n      let isOverflowing = false;\n      let textLength = textElement.node()!.getComputedTextLength();\n      while (textLength > maxWidth && content.length > 0) {\n        content = content.slice(0, -1);\n        textElement.text(content + '...');\n        isOverflowing = true;\n        textLength = textElement.node()!.getComputedTextLength();\n      }\n      return isOverflowing;\n    }\n\n    // TO DO: Write a common functional component for Multi value callout and divide sub count method\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function _multiValueCallout(calloutProps: any) {\n      const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(calloutProps.YValueHover);\n      return (\n        <div className={classes.calloutContentRoot}>\n          <div\n            className={classes.calloutDateTimeContainer}\n            style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n          >\n            <div\n              className={classes.calloutContentX}\n              {...getAccessibleDataObject(calloutProps!.xAxisCalloutAccessibilityData, 'text', false)}\n            >\n              {formatToLocaleString(calloutProps!.hoverXValue, props.culture) as React.ReactNode}\n            </div>\n          </div>\n          <div className={classes.calloutInfoContainer} style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n            {calloutProps!.YValueHover &&\n              calloutProps!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n                const isLast: boolean = index + 1 === yValues.length;\n                const { shouldDrawBorderBottom = false } = yValue;\n                return (\n                  <div\n                    {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                    key={`callout-content-${index}`}\n                    style={\n                      yValueHoverSubCountsExists\n                        ? {\n                            display: 'inline-block',\n                            ...(shouldDrawBorderBottom && {\n                              paddingBottom: '10px',\n                            }),\n                          }\n                        : {\n                            ...(shouldDrawBorderBottom && {\n                              paddingBottom: '10px',\n                            }),\n                          }\n                    }\n                  >\n                    {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                  </div>\n                );\n              })}\n            {!!calloutProps.descriptionMessage && (\n              <div className={classes.descriptionMessage}>{calloutProps.descriptionMessage}</div>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]) {\n      if (yValueHover) {\n        return yValueHover.some(\n          (yValue: {\n            legend?: string;\n            y?: number;\n            color?: string;\n            yAxisCalloutData?: string | { [id: string]: number };\n          }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n        );\n      }\n      return false;\n    }\n\n    function _getCalloutContent(\n      xValue: YValueHover,\n      index: number,\n      yValueHoverSubCountsExists: boolean,\n      isLast: boolean,\n    ): React.ReactNode {\n      const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n      const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n      const { culture } = props;\n      const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n      if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n        return (\n          <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n            {yValueHoverSubCountsExists && (\n              <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n                {xValue.legend!} ({yValue})\n              </div>\n            )}\n            <div\n              id={`${index}_${xValue.y}`}\n              className={classes.calloutBlockContainer}\n              style={{ borderInlineStart: `4px solid ${xValue.color}` }}\n            >\n              {toDrawShape && (\n                <Shape\n                  svgProps={{\n                    className: classes.shapeStyles,\n                  }}\n                  pathProps={{ fill: xValue.color }}\n                  shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n                  style={{ display: 'flex' }}\n                />\n              )}\n              <div>\n                <div className={classes.calloutlegendText}> {xValue.legend}</div>\n                <div className={classes.calloutContentY}>\n                  {\n                    formatToLocaleString(\n                      xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,\n                      culture,\n                    ) as React.ReactNode\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        );\n      } else {\n        const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n        return (\n          <div style={marginStyle}>\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n            {Object.keys(subcounts).map((subcountName: string) => {\n              return (\n                <div key={subcountName} className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>\n                    {' '}\n                    {formatToLocaleString(subcountName, culture) as React.ReactNode}\n                  </div>\n                  <div className={classes.calloutContentY}>\n                    {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        );\n      }\n    }\n\n    function _getChartTitle(): string {\n      const { chartTitle } = props;\n      return (chartTitle ? `${chartTitle}. ` : '') + `Gauge chart with ${_segments.length} segments. `;\n    }\n    const { arcs } = _processProps();\n    const arrowAttributes = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n    return (\n      <div\n        className={classes.root}\n        ref={el => {\n          _rootElem.current = el;\n        }}\n      >\n        <div className={classes.chartWrapper} {...arrowAttributes}>\n          <svg\n            className={classes.chart}\n            width={_width}\n            height={_height - _legendsHeight}\n            role=\"region\"\n            aria-label={_getChartTitle()}\n            onMouseLeave={_handleMouseOut}\n          >\n            <g transform={`translate(${_width / 2}, ${_height - (_margins.bottom + _legendsHeight)})`}>\n              {props.chartTitle && (\n                <ChartTitle\n                  title={props.chartTitle}\n                  x={0}\n                  y={-(_outerRadius + TITLE_OFFSET)}\n                  className={classes.chartTitle}\n                  titleStyles={props.titleStyles}\n                  tooltipClassName={classes.svgTooltip}\n                />\n              )}\n              {!props.hideMinMax && (\n                <>\n                  <text\n                    x={(_isRTL ? 1 : -1) * (_outerRadius + LABEL_OFFSET)}\n                    y={0}\n                    textAnchor=\"end\"\n                    className={classes.limits}\n                    role=\"img\"\n                    aria-label={`Min value: ${_minValue}`}\n                  >\n                    {formatScientificLimitWidth(_minValue)}\n                  </text>\n                  <text\n                    x={(_isRTL ? -1 : 1) * (_outerRadius + LABEL_OFFSET)}\n                    y={0}\n                    textAnchor=\"start\"\n                    className={classes.limits}\n                    role=\"img\"\n                    aria-label={`Max value: ${_maxValue}`}\n                  >\n                    {formatScientificLimitWidth(_maxValue)}\n                  </text>\n                </>\n              )}\n              {arcs.map((arc, index) => {\n                const segment = _segments[arc.segmentIndex];\n                const arcId = `gauge-chart-arc-${index}`;\n                return (\n                  <React.Fragment key={index}>\n                    <path\n                      d={arc.d}\n                      id={arcId}\n                      strokeWidth={focusedElement === segment.legend ? ARC_PADDING : 0}\n                      className={classes.segment}\n                      fill={segment.color}\n                      opacity={_legendHighlighted(segment.legend) || _noLegendHighlighted() ? 1 : 0.1}\n                      {...getAccessibleDataObject(\n                        {\n                          ariaLabel: getSegmentLabel(segment, _minValue, _maxValue, props.variant, true),\n                          ...segment.accessibilityData,\n                        },\n                        'img',\n                        true,\n                      )}\n                      onFocus={e => _handleFocus(e, segment.legend, arcId)}\n                      onBlur={_handleBlur}\n                      onMouseEnter={e => _handleMouseOver(e, segment.legend, arcId)}\n                      onMouseLeave={e => _handleCalloutDismiss()}\n                      onMouseMove={e => _handleMouseOver(e, segment.legend, arcId)}\n                      tabIndex={_legendHighlighted(segment.legend) || _noLegendHighlighted() ? 0 : undefined}\n                    />\n                  </React.Fragment>\n                );\n              })}\n              {_renderNeedle()}\n              <g\n                onMouseEnter={e => _handleMouseOver(e, 'Chart value')}\n                onMouseMove={e => _handleMouseOver(e, 'Chart value')}\n              >\n                <SVGTooltipText\n                  content={getChartValueLabel(props.chartValue, _minValue, _maxValue, props.chartValueFormat)}\n                  textProps={{\n                    x: 0,\n                    y: 0,\n                    textAnchor: 'middle',\n                    className: classes.chartValue,\n                    fontSize: chartValueSize,\n                    'aria-hidden': 'true',\n                  }}\n                  maxWidth={_innerRadius * 2 - 24}\n                  wrapContent={_wrapContent}\n                />\n              </g>\n              {props.sublabel && (\n                <SVGTooltipText\n                  content={props.sublabel}\n                  textProps={{\n                    x: 0,\n                    y: 4,\n                    textAnchor: 'middle',\n                    dominantBaseline: 'hanging',\n                    className: classes.sublabel,\n                  }}\n                  maxWidth={_innerRadius * 2}\n                  wrapContent={_wrapContent}\n                />\n              )}\n            </g>\n          </svg>\n        </div>\n        {_renderLegends()}\n        {!props.hideTooltip && isPopoverOpen && (\n          <ChartPopover\n            {...props.calloutProps}\n            positioning={{\n              target: refSelected,\n            }}\n            isPopoverOpen={isPopoverOpen}\n            customCallout={{\n              customizedCallout: _multiValueCallout({ hoverXValue: hoverXValue, YValueHover: hoverYValues }),\n            }}\n          />\n        )}\n      </div>\n    );\n  },\n);\nGaugeChart.displayName = 'GaugeChart';\n"],"names":["React","useGaugeChartStyles","select","d3Select","arc","d3Arc","Points","areArraysEqual","formatScientificLimitWidth","getAccessibleDataObject","getColorFromToken","getNextColor","pointTypes","useRtl","ChartTitle","formatToLocaleString","SVGTooltipText","Legends","Shape","useArrowNavigationGroup","ChartPopover","useImageExport","GAUGE_MARGIN","LABEL_WIDTH","LABEL_HEIGHT","LABEL_OFFSET","TITLE_OFFSET","EXTRA_NEEDLE_LENGTH","ARC_PADDING","BREAKPOINTS","minRadius","arcWidth","fontSize","calcNeedleRotation","chartValue","minValue","maxValue","needleRotation","getSegmentLabel","segment","variant","isAriaLabel","legend","size","toFixed","start","end","getChartValueLabel","chartValueFormat","forCallout","toString","GaugeChart","forwardRef","props","forwardedRef","_getMargins","hideMinMax","chartTitle","sublabel","left","right","top","bottom","_margins","_legendsHeight","hideLegend","chartContainerRef","_rootElem","legendsRef","_legendsRef","componentRef","_isRTL","width","setWidth","useState","height","setHeight","hoveredLegend","setHoveredLegend","selectedLegends","setSelectedLegends","legendProps","focusedElement","setFocusedElement","isPopoverOpen","setPopoverOpen","hoverXValue","setHoverXValue","hoverYValues","setHoverYValues","refSelected","setRefSelected","prevPropsRef","useRef","_width","_height","_outerRadius","Math","min","chartValueSize","_getStylesBasedOnBreakpoint","_innerRadius","_minValue","_maxValue","_segments","_calloutAnchor","useEffect","current","clientWidth","clientHeight","prevProps","classes","index","length","_processProps","segments","roundCorners","total","processedSegments","map","max","color","accessibilityData","push","arcGenerator","cornerRadius","padAngle","padRadius","rtlSafeSegments","Array","from","reverse","prevAngle","PI","arcs","endAngle","d","innerRadius","outerRadius","startAngle","segmentIndex","_renderNeedle","rtlSafeNeedleRotation","strokeWidth","halfStrokeWidth","needleLength","needleId","g","transform","path","id","className","needle","data-is-focusable","onFocus","e","_handleFocus","onBlur","_handleBlur","onMouseEnter","_handleMouseOver","onMouseMove","role","aria-label","_renderLegends","legends","title","hoverAction","onMouseOutAction","div","legendsContainer","centerLegends","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_legendHighlighted","_getHighlightedLegend","includes","_noLegendHighlighted","focusEvent","elementId","_showCallout","_hideCallout","mouseEvent","hoveredElement","_handleMouseOut","_handleCalloutDismiss","isFocusEvent","targetElement","document","getElementById","filter","yValue","y","isBlurEvent","_wrapContent","content","maxWidth","textElement","text","node","isOverflowing","textLength","getComputedTextLength","_multiValueCallout","calloutProps","yValueHoverSubCountsExists","_yValueHoverSubCountsExists","YValueHover","calloutContentRoot","calloutDateTimeContainer","style","marginBottom","calloutContentX","xAxisCalloutAccessibilityData","culture","calloutInfoContainer","display","yValues","isLast","shouldDrawBorderBottom","callOutAccessibilityData","key","paddingBottom","_getCalloutContent","descriptionMessage","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","calloutBlockContainer","borderInlineStart","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutlegendText","calloutContentY","data","subcounts","subcountName","_getChartTitle","arrowAttributes","circular","axis","root","ref","el","chartWrapper","svg","chart","onMouseLeave","x","titleStyles","tooltipClassName","svgTooltip","textAnchor","limits","arcId","Fragment","opacity","ariaLabel","tabIndex","textProps","wrapContent","dominantBaseline","hideTooltip","positioning","target","customCallout","customizedCallout","displayName"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/GaugeChart/GaugeChart.types.ts"],"sourcesContent":["import { LegendsProps } from '../Legends/index';\nimport { AccessibilityProps, Chart } from '../../types/index';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\n\n/**\n * Gauge Chart segment interface.\n * {@docCategory GaugeChart}\n */\nexport interface GaugeChartSegment {\n  /**\n   * Legend text for a segment\n   */\n  legend: string;\n\n  /**\n   * Size of the segment\n   */\n  size: number;\n\n  /**\n   * Color of the segment\n   */\n  color?: string;\n\n  /**\n   * Gradient color of the segment\n   */\n  gradient?: [string, string];\n\n  /**\n   * Accessibility data for the segment\n   */\n  accessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory GaugeChart}\n */\nexport type GaugeValueFormat = 'percentage' | 'fraction';\n\n/**\n * {@docCategory GaugeChart}\n */\nexport type GaugeChartVariant = 'single-segment' | 'multiple-segments';\n\n/**\n * Gauge Chart properties\n * {@docCategory GaugeChart}\n */\nexport interface GaugeChartProps {\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Title of the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Current value of the gauge\n   */\n  chartValue: number;\n\n  /**\n   * Sections of the gauge\n   */\n  segments: GaugeChartSegment[];\n\n  /**\n   * Minimum value of the gauge\n   * @defaultvalue 0\n   */\n  minValue?: number;\n\n  /**\n   * Maximum value of the gauge\n   */\n  maxValue?: number;\n\n  /**\n   * Additional text to display below the chart value\n   */\n  sublabel?: string;\n\n  /**\n   * Hide the min and max values of the gauge\n   * @defaultvalue false\n   */\n  hideMinMax?: boolean;\n\n  /**\n   * Format of the chart value\n   * @defaultvalue GaugeValueFormat.Percentage\n   */\n  chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string);\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /*\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /**\n   * Do not show tooltips in chart\n   * @defaultvalue false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: GaugeChartStyles;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: Partial<ChartPopoverProps>;\n\n  /**\n   * Specifies the variant of GaugeChart to be rendered\n   * @defaultvalue GaugeChartVariant.MultipleSegments\n   */\n  variant?: GaugeChartVariant;\n\n  /**\n   * Prop to enable the gradient in the chart\n   * @default false\n   */\n  enableGradient?: boolean;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n}\n\n/**\n * Gauge Chart styles\n * {@docCategory GaugeChart}\n */\nexport interface GaugeChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: string;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: string;\n\n  /**\n   * Styles for the min and max values\n   */\n  limits?: string;\n\n  /**\n   * Styles for the chart value\n   */\n  chartValue?: string;\n\n  /**\n   * Styles for the sublabel\n   */\n  sublabel?: string;\n\n  /**\n   * Styles for the needle\n   */\n  needle?: string;\n\n  /**\n   * Styles for the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Styles for the segments\n   */\n  segment?: string;\n\n  /**\n   * Styles for gradient segments\n   */\n  gradientSegment?: string;\n\n  /**\n   * Styles for the legends container\n   */\n  legendsContainer?: string;\n\n  /**\n   * Styles for callout root-content\n   */\n  calloutContentRoot?: string;\n\n  /**\n   * Styles for callout x-content\n   */\n  calloutContentX?: string;\n\n  /**\n   * Styles for callout y-content\n   */\n  calloutContentY?: string;\n\n  /**\n   * Styles for description message\n   */\n  descriptionMessage?: string;\n\n  /**\n   * Styles for callout Date time container\n   */\n  calloutDateTimeContainer?: string;\n\n  /**\n   * Styles for callout info container\n   */\n  calloutInfoContainer?: string;\n\n  /**\n   * Styles for callout block container\n   */\n  calloutBlockContainer?: string;\n\n  /**\n   * Styles for callout legend text\n   */\n  calloutlegendText?: string;\n\n  /**\n   * Styles for the shape object in the callout\n   */\n  shapeStyles?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n}\n"],"names":[],"mappings":"AAgKA;;;CAGC,GACD,WAoGC"}
+{"version":3,"sources":["../src/components/GaugeChart/GaugeChart.types.ts"],"sourcesContent":["import { LegendsProps } from '../Legends/index';\nimport { AccessibilityProps, Chart } from '../../types/index';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport type { TitleStyles } from '../../utilities/Common.styles';\n\n/**\n * Gauge Chart segment interface.\n * {@docCategory GaugeChart}\n */\nexport interface GaugeChartSegment {\n  /**\n   * Legend text for a segment\n   */\n  legend: string;\n\n  /**\n   * Size of the segment\n   */\n  size: number;\n\n  /**\n   * Color of the segment\n   */\n  color?: string;\n\n  /**\n   * Gradient color of the segment\n   */\n  gradient?: [string, string];\n\n  /**\n   * Accessibility data for the segment\n   */\n  accessibilityData?: AccessibilityProps;\n}\n\n/**\n * {@docCategory GaugeChart}\n */\nexport type GaugeValueFormat = 'percentage' | 'fraction';\n\n/**\n * {@docCategory GaugeChart}\n */\nexport type GaugeChartVariant = 'single-segment' | 'multiple-segments';\n\n/**\n * Gauge Chart properties\n * {@docCategory GaugeChart}\n */\nexport interface GaugeChartProps {\n  /**\n   * Title styles configuration for the chart title\n   */\n  titleStyles?: TitleStyles;\n\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Title of the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Current value of the gauge\n   */\n  chartValue: number;\n\n  /**\n   * Sections of the gauge\n   */\n  segments: GaugeChartSegment[];\n\n  /**\n   * Minimum value of the gauge\n   * @defaultvalue 0\n   */\n  minValue?: number;\n\n  /**\n   * Maximum value of the gauge\n   */\n  maxValue?: number;\n\n  /**\n   * Additional text to display below the chart value\n   */\n  sublabel?: string;\n\n  /**\n   * Hide the min and max values of the gauge\n   * @defaultvalue false\n   */\n  hideMinMax?: boolean;\n\n  /**\n   * Format of the chart value\n   * @defaultvalue GaugeValueFormat.Percentage\n   */\n  chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string);\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /*\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /**\n   * Do not show tooltips in chart\n   * @defaultvalue false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: GaugeChartStyles;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: Partial<ChartPopoverProps>;\n\n  /**\n   * Specifies the variant of GaugeChart to be rendered\n   * @defaultvalue GaugeChartVariant.MultipleSegments\n   */\n  variant?: GaugeChartVariant;\n\n  /**\n   * Prop to enable the gradient in the chart\n   * @default false\n   */\n  enableGradient?: boolean;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n}\n\n/**\n * Gauge Chart styles\n * {@docCategory GaugeChart}\n */\nexport interface GaugeChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: string;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: string;\n\n  /**\n   * Styles for the min and max values\n   */\n  limits?: string;\n\n  /**\n   * Styles for the chart value\n   */\n  chartValue?: string;\n\n  /**\n   * Styles for the sublabel\n   */\n  sublabel?: string;\n\n  /**\n   * Styles for the needle\n   */\n  needle?: string;\n\n  /**\n   * Styles for the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Style for SVG tooltip text\n   */\n  svgTooltip?: string;\n\n  /**\n   * Styles for the segments\n   */\n  segment?: string;\n\n  /**\n   * Styles for gradient segments\n   */\n  gradientSegment?: string;\n\n  /**\n   * Styles for the legends container\n   */\n  legendsContainer?: string;\n\n  /**\n   * Styles for callout root-content\n   */\n  calloutContentRoot?: string;\n\n  /**\n   * Styles for callout x-content\n   */\n  calloutContentX?: string;\n\n  /**\n   * Styles for callout y-content\n   */\n  calloutContentY?: string;\n\n  /**\n   * Styles for description message\n   */\n  descriptionMessage?: string;\n\n  /**\n   * Styles for callout Date time container\n   */\n  calloutDateTimeContainer?: string;\n\n  /**\n   * Styles for callout info container\n   */\n  calloutInfoContainer?: string;\n\n  /**\n   * Styles for callout block container\n   */\n  calloutBlockContainer?: string;\n\n  /**\n   * Styles for callout legend text\n   */\n  calloutlegendText?: string;\n\n  /**\n   * Styles for the shape object in the callout\n   */\n  shapeStyles?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n}\n"],"names":[],"mappings":"AAsKA;;;CAGC,GACD,WAyGC"}

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

@@ -38,7 +38,8 @@ const gaugeChartClassNames = {
     descriptionMessage: 'fui-gc__descriptionMessage',
     calloutInfoContainer: '',
     legendsContainer: 'fui-gc__legendsContainer',
-    chartWrapper: 'fui-gc__chartWrapper'
+    chartWrapper: 'fui-gc__chartWrapper',
+    svgTooltip: 'fui-gc__svgTooltip'
 };
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
@@ -84,13 +85,19 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bkfmm31: "fhuob2q",
         ojy3ng: "f1yuyku4"
     },
+    svgTooltip: {
+        Bkfmm31: "f5q6cfr",
+        Bxms50k: "f1bgda6t"
+    },
     chartTitle: {
         Bahqtrf: "fk6fouc",
-        Be2twd7: "fy9rknc",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "fwrc4pm",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fcpl73t",
         Bkfmm31: "fhuob2q",
-        Bvjb7m6: "fhv2zbx"
+        Bvjb7m6: "fhv2zbx",
+        fsow6f: "f17mccla",
+        jrapky: "fqcjy3b"
     },
     segment: {
         Bw0xxkn: 0,
@@ -194,6 +201,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".fhuob2q{fill:var(--colorNeutralForeground1);}",
         ".fhv2zbx{forced-color-adjust:auto;}",
         ".f1yuyku4{stroke:var(--colorNeutralBackground1);}",
+        ".f5q6cfr{fill:var(--colorNeutralBackground1);}",
+        ".f13mqy1h{font-size:var(--fontSizeBase100);}",
+        ".fcpl73t{line-height:var(--lineHeightBase100);}",
+        ".f17mccla{text-align:center;}",
+        ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
         [
             ".f13htf1t{outline:none;}",
             {
@@ -231,10 +243,18 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
                 p: -1
             }
         ]
+    ],
+    m: [
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1bgda6t{fill:Canvas;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ]
     ]
 });
 const useGaugeChartStyles = (props)=>{
-    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12, _props_styles13, _props_styles14, _props_styles15, _props_styles16, _props_styles17, _props_styles18;
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9, _props_styles10, _props_styles11, _props_styles12, _props_styles13, _props_styles14, _props_styles15, _props_styles16, _props_styles17, _props_styles18, _props_styles19;
     const baseStyles = useStyles();
     return {
         root: (0, _react.mergeClasses)(gaugeChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
@@ -244,17 +264,18 @@ const useGaugeChartStyles = (props)=>{
         sublabel: (0, _react.mergeClasses)(gaugeChartClassNames.sublabel, baseStyles.sublabel, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.sublabel),
         needle: (0, _react.mergeClasses)(gaugeChartClassNames.needle, baseStyles.needle, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.needle),
         chartTitle: (0, _react.mergeClasses)(gaugeChartClassNames.chartTitle, baseStyles.chartTitle, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.chartTitle),
-        segment: (0, _react.mergeClasses)(gaugeChartClassNames.segment, baseStyles.segment, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.segment),
-        gradientSegment: (0, _react.mergeClasses)(gaugeChartClassNames.gradientSegment, baseStyles.gradientSegment, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.gradientSegment),
-        calloutContentRoot: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.calloutContentRoot),
-        calloutDateTimeContainer: (0, _react.mergeClasses)(gaugeChartClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.calloutDateTimeContainer),
-        calloutContentX: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentX, baseStyles.calloutContentX, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.calloutContentX),
-        calloutBlockContainer: (0, _react.mergeClasses)(gaugeChartClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.calloutBlockContainer),
-        shapeStyles: (0, _react.mergeClasses)(gaugeChartClassNames.shapeStyles, baseStyles.shapeStyles, (_props_styles13 = props.styles) === null || _props_styles13 === void 0 ? void 0 : _props_styles13.shapeStyles),
-        calloutlegendText: (0, _react.mergeClasses)(gaugeChartClassNames.calloutlegendText, baseStyles.calloutlegendText, (_props_styles14 = props.styles) === null || _props_styles14 === void 0 ? void 0 : _props_styles14.calloutlegendText),
-        calloutContentY: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentY, baseStyles.calloutContentY, (_props_styles15 = props.styles) === null || _props_styles15 === void 0 ? void 0 : _props_styles15.calloutContentY),
-        descriptionMessage: (0, _react.mergeClasses)(gaugeChartClassNames.descriptionMessage, baseStyles.descriptionMessage, (_props_styles16 = props.styles) === null || _props_styles16 === void 0 ? void 0 : _props_styles16.descriptionMessage),
-        chartWrapper: (0, _react.mergeClasses)(gaugeChartClassNames.chartWrapper, (_props_styles17 = props.styles) === null || _props_styles17 === void 0 ? void 0 : _props_styles17.chartWrapper),
-        legendsContainer: (0, _react.mergeClasses)(gaugeChartClassNames.legendsContainer, baseStyles.legendsContainer, (_props_styles18 = props.styles) === null || _props_styles18 === void 0 ? void 0 : _props_styles18.legendsContainer)
+        svgTooltip: (0, _react.mergeClasses)(gaugeChartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.svgTooltip),
+        segment: (0, _react.mergeClasses)(gaugeChartClassNames.segment, baseStyles.segment, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.segment),
+        gradientSegment: (0, _react.mergeClasses)(gaugeChartClassNames.gradientSegment, baseStyles.gradientSegment, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.gradientSegment),
+        calloutContentRoot: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles10 = props.styles) === null || _props_styles10 === void 0 ? void 0 : _props_styles10.calloutContentRoot),
+        calloutDateTimeContainer: (0, _react.mergeClasses)(gaugeChartClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer, (_props_styles11 = props.styles) === null || _props_styles11 === void 0 ? void 0 : _props_styles11.calloutDateTimeContainer),
+        calloutContentX: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentX, baseStyles.calloutContentX, (_props_styles12 = props.styles) === null || _props_styles12 === void 0 ? void 0 : _props_styles12.calloutContentX),
+        calloutBlockContainer: (0, _react.mergeClasses)(gaugeChartClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer, (_props_styles13 = props.styles) === null || _props_styles13 === void 0 ? void 0 : _props_styles13.calloutBlockContainer),
+        shapeStyles: (0, _react.mergeClasses)(gaugeChartClassNames.shapeStyles, baseStyles.shapeStyles, (_props_styles14 = props.styles) === null || _props_styles14 === void 0 ? void 0 : _props_styles14.shapeStyles),
+        calloutlegendText: (0, _react.mergeClasses)(gaugeChartClassNames.calloutlegendText, baseStyles.calloutlegendText, (_props_styles15 = props.styles) === null || _props_styles15 === void 0 ? void 0 : _props_styles15.calloutlegendText),
+        calloutContentY: (0, _react.mergeClasses)(gaugeChartClassNames.calloutContentY, baseStyles.calloutContentY, (_props_styles16 = props.styles) === null || _props_styles16 === void 0 ? void 0 : _props_styles16.calloutContentY),
+        descriptionMessage: (0, _react.mergeClasses)(gaugeChartClassNames.descriptionMessage, baseStyles.descriptionMessage, (_props_styles17 = props.styles) === null || _props_styles17 === void 0 ? void 0 : _props_styles17.descriptionMessage),
+        chartWrapper: (0, _react.mergeClasses)(gaugeChartClassNames.chartWrapper, (_props_styles18 = props.styles) === null || _props_styles18 === void 0 ? void 0 : _props_styles18.chartWrapper),
+        legendsContainer: (0, _react.mergeClasses)(gaugeChartClassNames.legendsContainer, baseStyles.legendsContainer, (_props_styles19 = props.styles) === null || _props_styles19 === void 0 ? void 0 : _props_styles19.legendsContainer)
     };
 };