npm - @fluentui/react-charts - Versions diffs - 9.2.2 → 9.2.4 - Mend

@fluentui/react-charts 9.2.2 → 9.2.4

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

Files changed (229) hide show

package/lib/components/DonutChart/Arc/useArcStyles.styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { HighContrastSelector } from '../../../utilities/utilities';
 /**
  * @internal
  */
@@ -32,14 +33,18 @@ const useStyles = /*#__PURE__*/__styles({
   arcLabel: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
-    Bhrd7zp: "fl43uef",
+    Bhrd7zp: "figsok6",
     Bg96gwp: "fwrc4pm",
-    Bkfmm31: "fhuob2q"
+    Bkfmm31: "fhuob2q",
+    Bpvj6i6: "f1l20po4"
   }
 }, {
   d: [".f158kwzp{cursor:default;}", [".f1391ufr{outline:transparent;}", {
     p: -1
-  }], ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".f138xzbb selectors::-moz-focus-inner{border-top-width:0;}", ".fny96iz selectors::-moz-focus-inner{border-right-width:0;}", ".fi0bkha selectors::-moz-focus-inner{border-left-width:0;}", ".f1jv8gm3 selectors::-moz-focus-inner{border-bottom-width:0;}", ".frcfrt5{stroke:var(--colorStrokeFocus2);}", ".f9nnx8l{stroke-width:var(--strokeWidthThickest);}", ".f1au8mb3{fill:transparent;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"]
+  }], ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".f138xzbb selectors::-moz-focus-inner{border-top-width:0;}", ".fny96iz selectors::-moz-focus-inner{border-right-width:0;}", ".fi0bkha selectors::-moz-focus-inner{border-left-width:0;}", ".f1jv8gm3 selectors::-moz-focus-inner{border-bottom-width:0;}", ".frcfrt5{stroke:var(--colorStrokeFocus2);}", ".f9nnx8l{stroke-width:var(--strokeWidthThickest);}", ".f1au8mb3{fill:transparent;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"],
+  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1l20po4{stroke:CanvasText;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }]]
 });
 /**
  * Apply styling to the Arc components

package/lib/components/DonutChart/Arc/useArcStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","donutArcClassNames","root","focusRing","arcLabel","useStyles","Bceei9c","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","ojy3ng","B4ncu3z","zxy5zd","bkw2yb","Bjksbd0","Be5yapy","Bkfmm31","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useArcStyles","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","styles"],"sources":["useArcStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/*\n @internal\n / export const donutArcClassNames = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0')\n }\n }\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent'\n },\n arcLabel: {\n ...typographyStyles.~~caption1Strong~~,\n fill: tokens.colorNeutralForeground1\n }\n});\n/\n Apply styling to the Arc components\n */ export const useArcStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,~~gBAAGT~~,QAAA;~~EAAAM~~,IAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,SAAA;IAAAQ,MAAA;IAAAK,OAAA;IAAAC,OAAA;EAAA;EAAAb,QAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAJ,OAAA;EAAA;AAAA;~~EAAAK~~,CAAA;IAAAC,CAAA;EAAA;AAAA,~~CAoBrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,~~GAAGzB~~,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,~~EAAEL~~,YAAY,~~CAACI~~,kBAAkB,CAACC,IAAI,~~EAAE4B~~,UAAU,~~CAAC5B~~,IAAI,~~EAAE2B~~,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,~~CAACxB~~,IAAI,CAAC;IAC1KC,SAAS,~~EAAEN~~,YAAY,~~CAACI~~,kBAAkB,CAACE,SAAS,~~EAAE2B~~,UAAU,~~CAAC3B~~,SAAS,EAAE,~~CAACwB~~,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACxB~~,SAAS,CAAC;IACtLC,QAAQ,~~EAAEP~~,YAAY,~~CAACI~~,kBAAkB,CAACG,QAAQ,~~EAAE0B~~,UAAU,~~CAAC1B~~,QAAQ,EAAE,~~CAACwB~~,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACxB~~,QAAQ;EACrL,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","donutArcClassNames","root","focusRing","arcLabel","useStyles","Bceei9c","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","ojy3ng","B4ncu3z","zxy5zd","bkw2yb","Bjksbd0","Be5yapy","Bkfmm31","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bpvj6i6","d","p","m","useArcStyles","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","styles"],"sources":["useArcStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../../utilities/utilities';\n/*\n @internal\n / export const donutArcClassNames = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0')\n }\n }\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent'\n },\n arcLabel: {\n ...typographyStyles.caption1,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n stroke: 'CanvasText'\n }\n }\n});\n/\n Apply styling to the Arc components\n */ export const useArcStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,SAAA;IAAAQ,MAAA;IAAAK,OAAA;IAAAC,OAAA;EAAA;EAAAb,QAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAJ,OAAA;IAAAK,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAG3B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEN,YAAY,CAACK,kBAAkB,CAACC,IAAI,EAAE8B,UAAU,CAAC9B,IAAI,EAAE6B,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC1B,IAAI,CAAC;IAC1KC,SAAS,EAAEP,YAAY,CAACK,kBAAkB,CAACE,SAAS,EAAE6B,UAAU,CAAC7B,SAAS,EAAE,CAAC0B,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1B,SAAS,CAAC;IACtLC,QAAQ,EAAER,YAAY,CAACK,kBAAkB,CAACG,QAAQ,EAAE4B,UAAU,CAAC5B,QAAQ,EAAE,CAAC0B,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1B,QAAQ;EACrL,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/DonutChart/Arc/useArcStyles.styles.raw.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { HighContrastSelector } from '../../../utilities/utilities';
 /**
  * @internal
  */ export const donutArcClassNames = {
@@ -26,8 +27,11 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
         fill: 'transparent'
     },
     arcLabel: {
-        ...typographyStyles.caption1Strong,
-        fill: tokens.colorNeutralForeground1
+        ...typographyStyles.caption1,
+        fill: tokens.colorNeutralForeground1,
+        [HighContrastSelector]: {
+            stroke: 'CanvasText'
+        }
     }
 });
 /**

package/lib/components/DonutChart/Arc/useArcStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DonutChart/Arc/useArcStyles.styles.ts"],"sourcesContent":["import { ArcProps, ArcStyles } from './Arc.types';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/*\n @internal\n /\nexport const donutArcClassNames: SlotClassNames<ArcStyles> = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0'),\n },\n },\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent',\n },\n arcLabel: {\n ...typographyStyles.~~caption1Strong~~,\n fill: tokens.colorNeutralForeground1,\n },\n});\n\n/\n Apply styling to the Arc components\n */\nexport const useArcStyles = (props: ArcProps): ArcStyles => {\n const { className } = props;\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, props.styles?.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, props.styles?.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, props.styles?.arcLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","donutArcClassNames","root","focusRing","arcLabel","useStyles","cursor","outline","stroke","colorNeutralBackground1","border","colorStrokeFocus2","strokeWidth","strokeWidthThickest","fill","~~caption1Strong~~","colorNeutralForeground1","useArcStyles","props","className","baseStyles","styles"],"mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;~~AAGjE~~;;CAEC,GACD,OAAO,MAAMC,qBAAgD;IAC3DC,MAAM;IACNC,WAAW;IACXC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,~~YAAYT~~,WAAW;~~IAC3BM~~,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,~~QAAQT~~,~~OAAOU~~,uBAAuB;QACtC,eAAe;YACb,sBAAsB;gBACpB,~~GAAGX~~,~~WAAWY~~,MAAM,CAAC,IAAI;YAC3B;QACF;IACF;IACAP,WAAW;QACTK,~~QAAQT~~,~~OAAOY~~,iBAAiB;QAChCC,~~aAAab~~,~~OAAOc~~,mBAAmB;QACvCC,MAAM;IACR;IACAV,UAAU;QACR,~~GAAGJ~~,~~iBAAiBe~~,~~cAAc~~;~~QAClCD~~,~~MAAMf~~,~~OAAOiB~~,uBAAuB;~~IACtC~~;AACF;AAEA;;CAEC,GACD,OAAO,~~MAAMC~~,eAAe,CAACC;QAK+CA,eACIA,gBACHA;IAN3E,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAaf;IAEnB,OAAO;QACLH,~~MAAML~~,~~aAAaI~~,mBAAmBC,IAAI,EAAEkB,WAAWlB,IAAI,EAAEiB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAchB,IAAI;QAC1FC,~~WAAWN~~,~~aAAaI~~,mBAAmBE,SAAS,EAAEiB,WAAWjB,SAAS,GAAEe,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcf,SAAS;QACnGC,~~UAAUP~~,~~aAAaI~~,mBAAmBG,QAAQ,EAAEgB,WAAWhB,QAAQ,GAAEc,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcd,QAAQ;IACjG;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/DonutChart/Arc/useArcStyles.styles.ts"],"sourcesContent":["import { ArcProps, ArcStyles } from './Arc.types';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { HighContrastSelector } from '../../../utilities/utilities';\n\n/*\n @internal\n /\nexport const donutArcClassNames: SlotClassNames<ArcStyles> = {\n root: 'fui-donut-arc__root',\n focusRing: 'fui-donut-arc__focusRing',\n arcLabel: 'fui-donut-arc__arcLabel',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n cursor: 'default',\n outline: 'transparent',\n stroke: tokens.colorNeutralBackground1,\n '& selectors': {\n '::-moz-focus-inner': {\n ...shorthands.border('0'),\n },\n },\n },\n focusRing: {\n stroke: tokens.colorStrokeFocus2,\n strokeWidth: tokens.strokeWidthThickest,\n fill: 'transparent',\n },\n arcLabel: {\n ...typographyStyles.caption1,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n stroke: 'CanvasText',\n },\n },\n});\n\n/\n Apply styling to the Arc components\n */\nexport const useArcStyles = (props: ArcProps): ArcStyles => {\n const { className } = props;\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, props.styles?.root),\n focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, props.styles?.focusRing),\n arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, props.styles?.arcLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","donutArcClassNames","root","focusRing","arcLabel","useStyles","cursor","outline","stroke","colorNeutralBackground1","border","colorStrokeFocus2","strokeWidth","strokeWidthThickest","fill","caption1","colorNeutralForeground1","useArcStyles","props","className","baseStyles","styles"],"mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE;;CAEC,GACD,OAAO,MAAMC,qBAAgD;IAC3DC,MAAM;IACNC,WAAW;IACXC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BO,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,QAAQV,OAAOW,uBAAuB;QACtC,eAAe;YACb,sBAAsB;gBACpB,GAAGZ,WAAWa,MAAM,CAAC,IAAI;YAC3B;QACF;IACF;IACAP,WAAW;QACTK,QAAQV,OAAOa,iBAAiB;QAChCC,aAAad,OAAOe,mBAAmB;QACvCC,MAAM;IACR;IACAV,UAAU;QACR,GAAGL,iBAAiBgB,QAAQ;QAC5BD,MAAMhB,OAAOkB,uBAAuB;QACpC,CAAChB,qBAAqB,EAAE;YACtBQ,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMS,eAAe,CAACC;QAK+CA,eACIA,gBACHA;IAN3E,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAaf;IAEnB,OAAO;QACLH,MAAMN,aAAaK,mBAAmBC,IAAI,EAAEkB,WAAWlB,IAAI,EAAEiB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAchB,IAAI;QAC1FC,WAAWP,aAAaK,mBAAmBE,SAAS,EAAEiB,WAAWjB,SAAS,GAAEe,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcf,SAAS;QACnGC,UAAUR,aAAaK,mBAAmBG,QAAQ,EAAEgB,WAAWhB,QAAQ,GAAEc,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcd,QAAQ;IACjG;AACF,EAAE"}

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

@@ -2,7 +2,7 @@
 import { Pie } from './Pie/index';
 import { useDonutChartStyles } from './useDonutChartStyles.styles';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { getColorFromToken, getNextColor, useRtl } from '../../utilities/index';
+import { getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';
 import { Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
@@ -239,14 +239,19 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
     const donutMarginVertical = props.hideLabels ? 0 : 40;
     const outerRadius = Math.min(_width - donutMarginHorizontal, _height - donutMarginVertical) / 2;
     const chartData = _elevateToMinimums(points.filter((d)=>d.data >= 0));
-    const valueInsideDonut = props.innerRadius !== 0 ? _valueInsideDonut(props.valueInsideDonut, chartData) : '';
+    const valueInsideDonut = props.innerRadius > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut, chartData) : '';
     const focusAttributes = useFocusableGroup();
     var _props_culture;
     return !_isChartEmpty() ? /*#__PURE__*/ React.createElement("div", {
         className: classes.root,
         ref: (rootElem)=>_rootElem.current = rootElem,
         onMouseLeave: _handleChartMouseLeave
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, props.xAxisAnnotation && /*#__PURE__*/ React.createElement("text", {
+        className: classes.axisAnnotation,
+        x: _width / 2,
+        y: _height - 10,
+        textAnchor: "middle"
+    }, props.xAxisAnnotation), /*#__PURE__*/ React.createElement("div", {
         className: classes.chartWrapper,
         ...focusAttributes
     }, /*#__PURE__*/ React.createElement("svg", {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind /\nimport as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { getColorFromToken, getNextColor, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/*\n Donutchart component.\n * {@docCategory DonutChart}\n /\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n (props, forwardedRef) => {\n const _rootElem = React.useRef<HTMLDivElement \| null>(null);\n const _uniqText: string = useId('_Pie_');\n / eslint-disable @typescript-eslint/no-explicit-any /\n let _calloutAnchorPoint: ChartDataPoint \| null;\n let _emptyChartId: string \| null;\n const legendContainer = React.useRef<HTMLDivElement \| null>(null);\n const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n const [value, setValue] = React.useState<string \| undefined>('');\n const [legend, setLegend] = React.useState<string \| undefined>('');\n const [_width, setWidth] = React.useState<number \| undefined>(props.width \|\| 200);\n const [_height, setHeight] = React.useState<number \| undefined>(props.height \|\| 200);\n const [activeLegend, setActiveLegend] = React.useState<string>('');\n const [color, setColor] = React.useState<string \| undefined>('');\n const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint \| undefined>();\n const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n const _legendsRef = React.useRef<LegendContainer>(null);\n const _isRTL: boolean = useRtl();\n\n React.useEffect(() => {\n _fitParentContainer();\n }, []);\n\n React.useEffect(() => {\n if (prevSize.current.height !== props.height \|\| prevSize.current.width !== props.width) {\n _fitParentContainer();\n }\n prevSize.current.height = props.height;\n prevSize.current.width = props.width;\n }, [props.width, props.height]);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: _rootElem.current,\n toImage: (opts?: ImageExportOptions): Promise<string> => {\n return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n },\n }),\n [],\n );\n\n function _elevateToMinimums(data: ChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: ChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n const color: string = point.color!;\n // mapping data to the format Legends component needs\n const legend: Legend = {\n title: point.legend!,\n color,\n action: () => {\n if (selectedLegend === point.legend) {\n setSelectedLegend('');\n } else {\n setSelectedLegend(point.legend!);\n }\n },\n hoverAction: () => {\n _handleChartMouseLeave();\n setActiveLegend(point.legend!);\n },\n onMouseOutAction: () => {\n setActiveLegend('');\n },\n };\n return legend;\n });\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowText={props.legendsOverflowText}\n {...props.legendProps}\n legendRef={_legendsRef}\n />\n );\n return legends;\n }\n\n function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n let cx = 0;\n let cy = 0;\n\n const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n cx = targetRect.left + targetRect.width / 2;\n cy = targetRect.top + targetRect.height / 2;\n updatePosition(cx, cy);\n setPopoverOpen(selectedLegend === '' \|\| selectedLegend === data.legend);\n setValue(data.data!.toString());\n setLegend(data.legend);\n setColor(data.color!);\n setXCalloutValue(data.xAxisCalloutData!);\n setYCalloutValue(data.yAxisCalloutData!);\n setFocusedArcId(id);\n setDataPointCalloutProps(data);\n }\n\n function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n if (_calloutAnchorPoint !== data) {\n _calloutAnchorPoint = data;\n setPopoverOpen(selectedLegend === '' \|\| selectedLegend === data.legend);\n setValue(data.data!.toString());\n setLegend(data.legend);\n setColor(data.color!);\n setXCalloutValue(data.xAxisCalloutData!);\n setYCalloutValue(data.yAxisCalloutData!);\n setDataPointCalloutProps(data);\n updatePosition(e.clientX, e.clientY);\n }\n }\n function _onBlur(): void {\n setFocusedArcId('');\n }\n\n function _hoverLeave(): void {\n //\n }\n\n function _handleChartMouseLeave() {\n _calloutAnchorPoint = null;\n setPopoverOpen(false);\n }\n\n function _valueInsideDonut(valueInsideDonut: string \| number \| undefined, data: ChartDataPoint[]) {\n const highlightedLegend = _getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegend !== '' \|\| isPopoverOpen)) {\n let legendValue = valueInsideDonut;\n data!.map((point: ChartDataPoint, index: number) => {\n if (point.legend === highlightedLegend \|\| (isPopoverOpen && point.legend === legend)) {\n legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n }\n return;\n });\n return legendValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n function _toLocaleString(data: string \| number \| undefined) {\n const localeString = formatToLocaleString(data, props.culture);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /\n * This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n * Note: This won't work in case of multiple legends selection.\n /\n function _getHighlightedLegend() {\n return selectedLegend \|\| activeLegend;\n }\n\n function _isChartEmpty(): boolean {\n return !(\n props.data &&\n props.data.chartData &&\n props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let defaultColor: string;\n if (typeof item.color === 'undefined') {\n defaultColor = getNextColor(index, 0);\n } else {\n defaultColor = getColorFromToken(item.color);\n }\n return { ...item, defaultColor };\n })\n : [];\n }\n\n function updatePosition(newX: number, newY: number) {\n const threshold = 1; // Set a threshold for movement\n const { x, y } = clickPosition;\n // Calculate the distance moved\n const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n // Update the position only if the distance moved is greater than the threshold\n if (distance > threshold) {\n setClickPosition({ x: newX, y: newY });\n setPopoverOpen(true);\n }\n }\n\n /\n When screen resizes, along with screen, chart also auto adjusted.\n * This method used to adjust height and width of the charts.\n */\n function _fitParentContainer(): void {\n //_reqID = requestAnimationFrame(() => {\n let legendContainerHeight;\n if (props.hideLegend) {\n // If there is no legend, need not to allocate some space from total chart space.\n legendContainerHeight = 0;\n } else {\n const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n legendContainerHeight =\n ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) \|\|\n MIN_LEGEND_CONTAINER_HEIGHT) +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) \|\| '0') +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) \|\| '0');\n }\n if (props.parentRef \|\| _rootElem.current) {\n const container = props.parentRef ? props.parentRef : _rootElem.current!;\n const currentContainerWidth = container.getBoundingClientRect().width;\n const currentContainerHeight =\n container.getBoundingClientRect().height > legendContainerHeight\n ? container.getBoundingClientRect().height\n : 200;\n const shouldResize =\n _width !== currentContainerWidth \|\| _height !== currentContainerHeight - legendContainerHeight;\n if (shouldResize) {\n setWidth(currentContainerWidth);\n setHeight(currentContainerHeight - legendContainerHeight);\n }\n }\n //});\n }\n\n const { data, hideLegend = false } = props;\n const points = _addDefaultColors(data?.chartData);\n\n const classes = useDonutChartStyles(props);\n\n const legendBars = _createLegends(points);\n const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n const donutMarginVertical = props.hideLabels ? 0 : 40;\n const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n const valueInsideDonut = props.innerRadius !== 0 ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n const focusAttributes = useFocusableGroup();\n return !_isChartEmpty() ? (\n <div\n className={classes.root}\n ref={(rootElem: HTMLDivElement \| null) => (_rootElem.current = rootElem)}\n onMouseLeave={_handleChartMouseLeave}\n >\n <div className={classes.chartWrapper} {...focusAttributes}>\n <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n <Pie\n width={_width!}\n height={_height!}\n outerRadius={outerRadius}\n innerRadius={props.innerRadius!}\n data={chartData!}\n onFocusCallback={_focusCallback}\n hoverOnCallback={_hoverCallback}\n hoverLeaveCallback={_hoverLeave}\n uniqText={_uniqText}\n onBlurCallback={_onBlur}\n activeArc={_getHighlightedLegend()}\n focusedArcId={focusedArcId \|\| ''}\n href={props.href!}\n valueInsideDonut={_toLocaleString(valueInsideDonut)}\n showLabelsInPercent={props.showLabelsInPercent}\n hideLabels={props.hideLabels}\n />\n </svg>\n </div>\n <ChartPopover\n xCalloutValue={xCalloutValue}\n yCalloutValue={yCalloutValue}\n culture={props.culture ?? 'en-us'}\n clickPosition={clickPosition}\n isPopoverOpen={!props.hideTooltip && isPopoverOpen}\n legend={legend!}\n YValue={value!}\n color={color}\n isCalloutForStack={false}\n customCallout={{\n customizedCallout: props.onRenderCalloutPerDataPoint\n ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n : undefined,\n customCalloutProps: props.calloutPropsPerDataPoint\n ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n : undefined,\n }}\n isCartesian={false}\n />\n {!hideLegend && (\n <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n {legendBars}\n </div>\n )}\n </div>\n ) : (\n <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n innerRadius: 0,\n hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","getColorFromToken","getNextColor","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegend","setSelectedLegend","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","undefined","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","action","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","legendRef","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegend","_getHighlightedLegend","legendValue","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","length","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"AAAA,oCAAoC,GACpC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,GAAG,QAAQ,cAAc;AAElC,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,iBAAiB,EAAEC,YAAY,EAAEC,MAAM,QAAQ,wBAAwB;AAChF,SAAiBC,OAAO,QAAyB,cAAc;AAC/D,SAASC,KAAK,QAAQ,4BAA4B;AAElD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,YAAY,QAAQ,mCAAmC;AAEhE,SAASC,OAAO,QAAQ,qCAAqC;AAE7D,MAAMC,8BAA8B;AAEpC,4FAA4F;AAC5F;;;CAGC,GACD,OAAO,MAAMC,2BAAuDb,MAAMc,UAAU,CAClF,CAACC,OAAOC;IACN,MAAMC,YAAYjB,MAAMkB,MAAM,CAAwB;IACtD,MAAMC,YAAoBX,MAAM;IAChC,qDAAqD,GACrD,IAAIY;IACJ,IAAIC;IACJ,MAAMC,kBAAkBtB,MAAMkB,MAAM,CAAwB;IAC5D,MAAMK,WAAWvB,MAAMkB,MAAM,CAAsC,CAAC;IAEpE,MAAM,CAACM,OAAOC,SAAS,GAAGzB,MAAM0B,QAAQ,CAAqB;IAC7D,MAAM,CAACC,QAAQC,UAAU,GAAG5B,MAAM0B,QAAQ,CAAqB;IAC/D,MAAM,CAACG,QAAQC,SAAS,GAAG9B,MAAM0B,QAAQ,CAAqBX,MAAMgB,KAAK,IAAI;IAC7E,MAAM,CAACC,SAASC,UAAU,GAAGjC,MAAM0B,QAAQ,CAAqBX,MAAMmB,MAAM,IAAI;IAChF,MAAM,CAACC,cAAcC,gBAAgB,GAAGpC,MAAM0B,QAAQ,CAAS;IAC/D,MAAM,CAACW,OAAOC,SAAS,GAAGtC,MAAM0B,QAAQ,CAAqB;IAC7D,MAAM,CAACa,eAAeC,iBAAiB,GAAGxC,MAAM0B,QAAQ,CAAS;IACjE,MAAM,CAACe,eAAeC,iBAAiB,GAAG1C,MAAM0B,QAAQ,CAAS;IACjE,MAAM,CAACiB,gBAAgBC,kBAAkB,GAAG5C,MAAM0B,QAAQ,CAAS;IACnE,MAAM,CAACmB,cAAcC,gBAAgB,GAAG9C,MAAM0B,QAAQ,CAAS;IAC/D,MAAM,CAACqB,uBAAuBC,yBAAyB,GAAGhD,MAAM0B,QAAQ;IACxE,MAAM,CAACuB,eAAeC,iBAAiB,GAAGlD,MAAM0B,QAAQ,CAAC;QAAEyB,GAAG;QAAGC,GAAG;IAAE;IACtE,MAAM,CAACC,eAAeC,eAAe,GAAGtD,MAAM0B,QAAQ,CAAC;IACvD,MAAM6B,cAAcvD,MAAMkB,MAAM,CAAkB;IAClD,MAAMsC,SAAkBlD;IAExBN,MAAMyD,SAAS,CAAC;QACdC;IACF,GAAG,EAAE;IAEL1D,MAAMyD,SAAS,CAAC;QACd,IAAIlC,SAASoC,OAAO,CAACzB,MAAM,KAAKnB,MAAMmB,MAAM,IAAIX,SAASoC,OAAO,CAAC5B,KAAK,KAAKhB,MAAMgB,KAAK,EAAE;YACtF2B;QACF;QACAnC,SAASoC,OAAO,CAACzB,MAAM,GAAGnB,MAAMmB,MAAM;QACtCX,SAASoC,OAAO,CAAC5B,KAAK,GAAGhB,MAAMgB,KAAK;IACtC,GAAG;QAAChB,MAAMgB,KAAK;QAAEhB,MAAMmB,MAAM;KAAC;IAE9BlC,MAAM4D,mBAAmB,CACvB7C,MAAM8C,YAAY,EAClB,IAAO,CAAA;YACLC,gBAAgB7C,UAAU0C,OAAO;YACjChD,SAAS,CAACoD;oBAC0BR;gBAAlC,OAAO5C,QAAQM,UAAU0C,OAAO,GAAEJ,sBAAAA,YAAYI,OAAO,cAAnBJ,0CAAAA,oBAAqBS,KAAK,EAAER,QAAQO;YACxE;QACF,CAAA,GACA,EAAE;IAGJ,SAASE,mBAAmBC,IAAsB;QAChD,IAAIC,YAAY;QAChB,MAAMC,aAAa;QACnB,MAAMC,eAAiC,EAAE;QACzCH,KAAKI,OAAO,CAACC,CAAAA;YACXJ,aAAaI,KAAKL,IAAI;QACxB;QACAA,KAAKI,OAAO,CAACC,CAAAA;YACXF,aAAaG,IAAI,CACfJ,aAAaD,YAAYI,KAAKL,IAAI,IAAKK,KAAKL,IAAI,GAAI,IAChD;gBACE,GAAGK,IAAI;gBACPL,MAAME,aAAaD;gBACnBM,kBACEF,KAAKE,gBAAgB,KAAKC,YAAYH,KAAKL,IAAI,CAAES,cAAc,KAAKJ,KAAKE,gBAAgB;YAC7F,IACAF;QAER;QACA,OAAOF;IACT;IACA,SAASO,eAAeC,SAA2B;QACjD,MAAMC,kBAAkBD,UAAUE,GAAG,CAAC,CAACC,OAAuBC;YAC5D,MAAM5C,QAAgB2C,MAAM3C,KAAK;YACjC,qDAAqD;YACrD,MAAMV,SAAiB;gBACrBuD,OAAOF,MAAMrD,MAAM;gBACnBU;gBACA8C,QAAQ;oBACN,IAAIxC,mBAAmBqC,MAAMrD,MAAM,EAAE;wBACnCiB,kBAAkB;oBACpB,OAAO;wBACLA,kBAAkBoC,MAAMrD,MAAM;oBAChC;gBACF;gBACAyD,aAAa;oBACXC;oBACAjD,gBAAgB4C,MAAMrD,MAAM;gBAC9B;gBACA2D,kBAAkB;oBAChBlD,gBAAgB;gBAClB;YACF;YACA,OAAOT;QACT;QACA,MAAM4D,wBACJ,oBAAChF;YACCgF,SAAST;YACTU,eAAAA;YACAC,cAAc1E,MAAM2E,mBAAmB;YACtC,GAAG3E,MAAM4E,WAAW;YACrBC,WAAWrC;;QAGf,OAAOgC;IACT;IAEA,SAASM,eAAe3B,IAAoB,EAAE4B,EAAU,EAAEC,CAAmC;QAC3F,IAAIC,KAAK;QACT,IAAIC,KAAK;QAET,MAAMC,aAAa,AAACH,EAAEI,MAAM,CAAoBC,qBAAqB;QACrEJ,KAAKE,WAAWG,IAAI,GAAGH,WAAWnE,KAAK,GAAG;QAC1CkE,KAAKC,WAAWI,GAAG,GAAGJ,WAAWhE,MAAM,GAAG;QAC1CqE,eAAeP,IAAIC;QACnB3C,eAAeX,mBAAmB,MAAMA,mBAAmBuB,KAAKvC,MAAM;QACtEF,SAASyC,KAAKA,IAAI,CAAEsC,QAAQ;QAC5B5E,UAAUsC,KAAKvC,MAAM;QACrBW,SAAS4B,KAAK7B,KAAK;QACnBG,iBAAiB0B,KAAKuC,gBAAgB;QACtC/D,iBAAiBwB,KAAKO,gBAAgB;QACtC3B,gBAAgBgD;QAChB9C,yBAAyBkB;IAC3B;IAEA,SAASwC,eAAexC,IAAoB,EAAE6B,CAAmC;QAC/E,IAAI3E,wBAAwB8C,MAAM;YAChC9C,sBAAsB8C;YACtBZ,eAAeX,mBAAmB,MAAMA,mBAAmBuB,KAAKvC,MAAM;YACtEF,SAASyC,KAAKA,IAAI,CAAEsC,QAAQ;YAC5B5E,UAAUsC,KAAKvC,MAAM;YACrBW,SAAS4B,KAAK7B,KAAK;YACnBG,iBAAiB0B,KAAKuC,gBAAgB;YACtC/D,iBAAiBwB,KAAKO,gBAAgB;YACtCzB,yBAAyBkB;YACzBqC,eAAeR,EAAEY,OAAO,EAAEZ,EAAEa,OAAO;QACrC;IACF;IACA,SAASC;QACP/D,gBAAgB;IAClB;IAEA,SAASgE;IACP,EAAE,GACJ;IAEA,SAASzB;QACPjE,sBAAsB;QACtBkC,eAAe;IACjB;IAEA,SAASyD,kBAAkBC,gBAA6C,EAAE9C,IAAsB;QAC9F,MAAM+C,oBAAoBC;QAC1B,IAAIF,qBAAqBtC,aAAcuC,CAAAA,sBAAsB,MAAM5D,aAAY,GAAI;YACjF,IAAI8D,cAAcH;YAClB9C,KAAMa,GAAG,CAAC,CAACC,OAAuBC;gBAChC,IAAID,MAAMrD,MAAM,KAAKsF,qBAAsB5D,iBAAiB2B,MAAMrD,MAAM,KAAKA,QAAS;oBACpFwF,cAAcnC,MAAMP,gBAAgB,GAAGO,MAAMP,gBAAgB,GAAGO,MAAMd,IAAI;gBAC5E;gBACA;YACF;YACA,OAAOiD;QACT,OAAO;YACL,OAAOH;QACT;IACF;IAEA,SAASI,gBAAgBlD,IAAiC;QACxD,MAAMmD,eAAelH,qBAAqB+D,MAAMnD,MAAMuG,OAAO;QAC7D,IAAI,CAACD,cAAc;YACjB,OAAOnD;QACT;QACA,OAAOmD,yBAAAA,mCAAAA,aAAcb,QAAQ;IAC/B;IAEA;;;;;KAKC,GACD,SAASU;QACP,OAAOvE,kBAAkBR;IAC3B;IAEA,SAASoF;QACP,OAAO,CACLxG,CAAAA,MAAMmD,IAAI,IACVnD,MAAMmD,IAAI,CAACW,SAAS,IACpB9D,MAAMmD,IAAI,CAACW,SAAS,CAAE2C,MAAM,CAAC,CAACC,IAAsBA,EAAEvD,IAAI,GAAI,GAAGwD,MAAM,GAAG,CAAA;IAE9E;IAEA,SAASC,kBAAkBC,mBAAsC;QAC/D,OAAOA,sBACHA,oBAAoB7C,GAAG,CAAC,CAACR,MAAMU;YAC7B,IAAI4C;YACJ,IAAI,OAAOtD,KAAKlC,KAAK,KAAK,aAAa;gBACrCwF,eAAexH,aAAa4E,OAAO;YACrC,OAAO;gBACL4C,eAAezH,kBAAkBmE,KAAKlC,KAAK;YAC7C;YACA,OAAO;gBAAE,GAAGkC,IAAI;gBAAEsD;YAAa;QACjC,KACA,EAAE;IACR;IAEA,SAAStB,eAAeuB,IAAY,EAAEC,IAAY;QAChD,MAAMC,YAAY,GAAG,+BAA+B;QACpD,MAAM,EAAE7E,CAAC,EAAEC,CAAC,EAAE,GAAGH;QACjB,+BAA+B;QAC/B,MAAMgF,WAAWC,KAAKC,IAAI,CAACD,KAAKE,GAAG,CAACN,OAAO3E,GAAG,KAAK+E,KAAKE,GAAG,CAACL,OAAO3E,GAAG;QACtE,+EAA+E;QAC/E,IAAI6E,WAAWD,WAAW;YACxB9E,iBAAiB;gBAAEC,GAAG2E;gBAAM1E,GAAG2E;YAAK;YACpCzE,eAAe;QACjB;IACF;IAEA;;;KAGC,GACD,SAASI;QACP,wCAAwC;QACxC,IAAI2E;QACJ,IAAItH,MAAMuH,UAAU,EAAE;YACpB,iFAAiF;YACjFD,wBAAwB;QAC1B,OAAO;YACL,MAAME,gCAAgCjH,gBAAgBqC,OAAO,IAAI6E,iBAAiBlH,gBAAgBqC,OAAO;YACzG0E,wBACE,AAAC,CAAA,AAAC/G,gBAAgBqC,OAAO,IAAIrC,gBAAgBqC,OAAO,CAACyC,qBAAqB,GAAGlE,MAAM,IACjFtB,2BAA0B,IAC5B6H,WAAW,AAACF,iCAAiCA,8BAA8BG,SAAS,IAAK,OACzFD,WAAW,AAACF,iCAAiCA,8BAA8BI,YAAY,IAAK;QAChG;QACA,IAAI5H,MAAM6H,SAAS,IAAI3H,UAAU0C,OAAO,EAAE;YACxC,MAAMkF,YAAY9H,MAAM6H,SAAS,GAAG7H,MAAM6H,SAAS,GAAG3H,UAAU0C,OAAO;YACvE,MAAMmF,wBAAwBD,UAAUzC,qBAAqB,GAAGrE,KAAK;YACrE,MAAMgH,yBACJF,UAAUzC,qBAAqB,GAAGlE,MAAM,GAAGmG,wBACvCQ,UAAUzC,qBAAqB,GAAGlE,MAAM,GACxC;YACN,MAAM8G,eACJnH,WAAWiH,yBAAyB9G,YAAY+G,yBAAyBV;YAC3E,IAAIW,cAAc;gBAChBlH,SAASgH;gBACT7G,UAAU8G,yBAAyBV;YACrC;QACF;IACA,KAAK;IACP;IAEA,MAAM,EAAEnE,IAAI,EAAEoE,aAAa,KAAK,EAAE,GAAGvH;IACrC,MAAMkI,SAAStB,kBAAkBzD,iBAAAA,2BAAAA,KAAMW,SAAS;IAEhD,MAAMqE,UAAUhJ,oBAAoBa;IAEpC,MAAMoI,aAAavE,eAAeqE;IAClC,MAAMG,wBAAwBrI,MAAMsI,UAAU,GAAG,IAAI;IACrD,MAAMC,sBAAsBvI,MAAMsI,UAAU,GAAG,IAAI;IACnD,MAAME,cAAcrB,KAAKsB,GAAG,CAAC3H,SAAUuH,uBAAuBpH,UAAWsH,uBAAuB;IAChG,MAAMzE,YAAYZ,mBAAmBgF,OAAOzB,MAAM,CAAC,CAACC,IAAsBA,EAAEvD,IAAI,IAAK;IACrF,MAAM8C,mBAAmBjG,MAAM0I,WAAW,KAAK,IAAI1C,kBAAkBhG,MAAMiG,gBAAgB,EAAGnC,aAAc;IAC5G,MAAM6E,kBAAkBjJ;QAgCTM;IA/Bf,OAAO,CAACwG,gCACN,oBAACoC;QACCC,WAAWV,QAAQW,IAAI;QACvBC,KAAK,CAACC,WAAqC9I,UAAU0C,OAAO,GAAGoG;QAC/DC,cAAc3E;qBAEd,oBAACsE;QAAIC,WAAWV,QAAQe,YAAY;QAAG,GAAGP,eAAe;qBACvD,oBAACQ;QAAIN,WAAWV,QAAQiB,KAAK;QAAEC,YAAU,EAAElG,iBAAAA,2BAAAA,KAAMmG,UAAU;QAAEtI,OAAOF;QAAQK,QAAQF;qBAClF,oBAAC/B;QACC8B,OAAOF;QACPK,QAAQF;QACRuH,aAAaA;QACbE,aAAa1I,MAAM0I,WAAW;QAC9BvF,MAAMW;QACNyF,iBAAiBzE;QACjB0E,iBAAiB7D;QACjB8D,oBAAoB1D;QACpB2D,UAAUtJ;QACVuJ,gBAAgB7D;QAChB8D,WAAWzD;QACXrE,cAAcA,gBAAgB;QAC9B+H,MAAM7J,MAAM6J,IAAI;QAChB5D,kBAAkBI,gBAAgBJ;QAClC6D,qBAAqB9J,MAAM8J,mBAAmB;QAC9CxB,YAAYtI,MAAMsI,UAAU;wBAIlC,oBAAC3I;QACC6B,eAAeA;QACfE,eAAeA;QACf6E,SAASvG,CAAAA,iBAAAA,MAAMuG,OAAO,cAAbvG,4BAAAA,iBAAiB;QAC1BkC,eAAeA;QACfI,eAAe,CAACtC,MAAM+J,WAAW,IAAIzH;QACrC1B,QAAQA;QACRoJ,QAAQvJ;QACRa,OAAOA;QACP2I,mBAAmB;QACnBC,eAAe;YACbC,mBAAmBnK,MAAMoK,2BAA2B,GAChDpK,MAAMoK,2BAA2B,CAACpI,yBAClC2B;YACJ0G,oBAAoBrK,MAAMsK,wBAAwB,GAC9CtK,MAAMsK,wBAAwB,CAACtI,yBAC/B2B;QACN;QACA4G,aAAa;QAEd,CAAChD,4BACA,oBAACqB;QAAIG,KAAK,CAAC/D,IAAuBzE,gBAAgBqC,OAAO,GAAGoC;QAAI6D,WAAWV,QAAQ5H,eAAe;OAC/F6H,6BAKP,oBAACQ;QAAI7D,IAAIzE;QAAgBkK,MAAM;QAASC,OAAO;YAAEC,SAAS;QAAI;QAAGrB,cAAY;;AAEjF,GACA;AAEFvJ,WAAW6K,WAAW,GAAG;AACzB7K,WAAW8K,YAAY,GAAG;IACxBlC,aAAa;IACbJ,YAAY;AACd"}
1	+ {"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind /\nimport as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/*\n Donutchart component.\n * {@docCategory DonutChart}\n /\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n (props, forwardedRef) => {\n const _rootElem = React.useRef<HTMLDivElement \| null>(null);\n const _uniqText: string = useId('_Pie_');\n / eslint-disable @typescript-eslint/no-explicit-any /\n let _calloutAnchorPoint: ChartDataPoint \| null;\n let _emptyChartId: string \| null;\n const legendContainer = React.useRef<HTMLDivElement \| null>(null);\n const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n const [value, setValue] = React.useState<string \| undefined>('');\n const [legend, setLegend] = React.useState<string \| undefined>('');\n const [_width, setWidth] = React.useState<number \| undefined>(props.width \|\| 200);\n const [_height, setHeight] = React.useState<number \| undefined>(props.height \|\| 200);\n const [activeLegend, setActiveLegend] = React.useState<string>('');\n const [color, setColor] = React.useState<string \| undefined>('');\n const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint \| undefined>();\n const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n const _legendsRef = React.useRef<LegendContainer>(null);\n const _isRTL: boolean = useRtl();\n\n React.useEffect(() => {\n _fitParentContainer();\n }, []);\n\n React.useEffect(() => {\n if (prevSize.current.height !== props.height \|\| prevSize.current.width !== props.width) {\n _fitParentContainer();\n }\n prevSize.current.height = props.height;\n prevSize.current.width = props.width;\n }, [props.width, props.height]);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: _rootElem.current,\n toImage: (opts?: ImageExportOptions): Promise<string> => {\n return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n },\n }),\n [],\n );\n\n function _elevateToMinimums(data: ChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: ChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n const color: string = point.color!;\n // mapping data to the format Legends component needs\n const legend: Legend = {\n title: point.legend!,\n color,\n action: () => {\n if (selectedLegend === point.legend) {\n setSelectedLegend('');\n } else {\n setSelectedLegend(point.legend!);\n }\n },\n hoverAction: () => {\n _handleChartMouseLeave();\n setActiveLegend(point.legend!);\n },\n onMouseOutAction: () => {\n setActiveLegend('');\n },\n };\n return legend;\n });\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowText={props.legendsOverflowText}\n {...props.legendProps}\n legendRef={_legendsRef}\n />\n );\n return legends;\n }\n\n function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n let cx = 0;\n let cy = 0;\n\n const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n cx = targetRect.left + targetRect.width / 2;\n cy = targetRect.top + targetRect.height / 2;\n updatePosition(cx, cy);\n setPopoverOpen(selectedLegend === '' \|\| selectedLegend === data.legend);\n setValue(data.data!.toString());\n setLegend(data.legend);\n setColor(data.color!);\n setXCalloutValue(data.xAxisCalloutData!);\n setYCalloutValue(data.yAxisCalloutData!);\n setFocusedArcId(id);\n setDataPointCalloutProps(data);\n }\n\n function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n if (_calloutAnchorPoint !== data) {\n _calloutAnchorPoint = data;\n setPopoverOpen(selectedLegend === '' \|\| selectedLegend === data.legend);\n setValue(data.data!.toString());\n setLegend(data.legend);\n setColor(data.color!);\n setXCalloutValue(data.xAxisCalloutData!);\n setYCalloutValue(data.yAxisCalloutData!);\n setDataPointCalloutProps(data);\n updatePosition(e.clientX, e.clientY);\n }\n }\n function _onBlur(): void {\n setFocusedArcId('');\n }\n\n function _hoverLeave(): void {\n //\n }\n\n function _handleChartMouseLeave() {\n _calloutAnchorPoint = null;\n setPopoverOpen(false);\n }\n\n function _valueInsideDonut(valueInsideDonut: string \| number \| undefined, data: ChartDataPoint[]) {\n const highlightedLegend = _getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegend !== '' \|\| isPopoverOpen)) {\n let legendValue = valueInsideDonut;\n data!.map((point: ChartDataPoint, index: number) => {\n if (point.legend === highlightedLegend \|\| (isPopoverOpen && point.legend === legend)) {\n legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n }\n return;\n });\n return legendValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n function _toLocaleString(data: string \| number \| undefined) {\n const localeString = formatToLocaleString(data, props.culture);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /\n * This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n * Note: This won't work in case of multiple legends selection.\n /\n function _getHighlightedLegend() {\n return selectedLegend \|\| activeLegend;\n }\n\n function _isChartEmpty(): boolean {\n return !(\n props.data &&\n props.data.chartData &&\n props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let defaultColor: string;\n if (typeof item.color === 'undefined') {\n defaultColor = getNextColor(index, 0);\n } else {\n defaultColor = getColorFromToken(item.color);\n }\n return { ...item, defaultColor };\n })\n : [];\n }\n\n function updatePosition(newX: number, newY: number) {\n const threshold = 1; // Set a threshold for movement\n const { x, y } = clickPosition;\n // Calculate the distance moved\n const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n // Update the position only if the distance moved is greater than the threshold\n if (distance > threshold) {\n setClickPosition({ x: newX, y: newY });\n setPopoverOpen(true);\n }\n }\n\n /\n When screen resizes, along with screen, chart also auto adjusted.\n * This method used to adjust height and width of the charts.\n */\n function _fitParentContainer(): void {\n //_reqID = requestAnimationFrame(() => {\n let legendContainerHeight;\n if (props.hideLegend) {\n // If there is no legend, need not to allocate some space from total chart space.\n legendContainerHeight = 0;\n } else {\n const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n legendContainerHeight =\n ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) \|\|\n MIN_LEGEND_CONTAINER_HEIGHT) +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) \|\| '0') +\n parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) \|\| '0');\n }\n if (props.parentRef \|\| _rootElem.current) {\n const container = props.parentRef ? props.parentRef : _rootElem.current!;\n const currentContainerWidth = container.getBoundingClientRect().width;\n const currentContainerHeight =\n container.getBoundingClientRect().height > legendContainerHeight\n ? container.getBoundingClientRect().height\n : 200;\n const shouldResize =\n _width !== currentContainerWidth \|\| _height !== currentContainerHeight - legendContainerHeight;\n if (shouldResize) {\n setWidth(currentContainerWidth);\n setHeight(currentContainerHeight - legendContainerHeight);\n }\n }\n //});\n }\n\n const { data, hideLegend = false } = props;\n const points = _addDefaultColors(data?.chartData);\n\n const classes = useDonutChartStyles(props);\n\n const legendBars = _createLegends(points);\n const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n const donutMarginVertical = props.hideLabels ? 0 : 40;\n const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n const valueInsideDonut =\n props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n const focusAttributes = useFocusableGroup();\n return !_isChartEmpty() ? (\n <div\n className={classes.root}\n ref={(rootElem: HTMLDivElement \| null) => (_rootElem.current = rootElem)}\n onMouseLeave={_handleChartMouseLeave}\n >\n {props.xAxisAnnotation && (\n <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n {props.xAxisAnnotation}\n </text>\n )}\n <div className={classes.chartWrapper} {...focusAttributes}>\n <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n <Pie\n width={_width!}\n height={_height!}\n outerRadius={outerRadius}\n innerRadius={props.innerRadius!}\n data={chartData!}\n onFocusCallback={_focusCallback}\n hoverOnCallback={_hoverCallback}\n hoverLeaveCallback={_hoverLeave}\n uniqText={_uniqText}\n onBlurCallback={_onBlur}\n activeArc={_getHighlightedLegend()}\n focusedArcId={focusedArcId \|\| ''}\n href={props.href!}\n valueInsideDonut={_toLocaleString(valueInsideDonut)}\n showLabelsInPercent={props.showLabelsInPercent}\n hideLabels={props.hideLabels}\n />\n </svg>\n </div>\n <ChartPopover\n xCalloutValue={xCalloutValue}\n yCalloutValue={yCalloutValue}\n culture={props.culture ?? 'en-us'}\n clickPosition={clickPosition}\n isPopoverOpen={!props.hideTooltip && isPopoverOpen}\n legend={legend!}\n YValue={value!}\n color={color}\n isCalloutForStack={false}\n customCallout={{\n customizedCallout: props.onRenderCalloutPerDataPoint\n ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n : undefined,\n customCalloutProps: props.calloutPropsPerDataPoint\n ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n : undefined,\n }}\n isCartesian={false}\n />\n {!hideLegend && (\n <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n {legendBars}\n </div>\n )}\n </div>\n ) : (\n <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n innerRadius: 0,\n hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegend","setSelectedLegend","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","undefined","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","action","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","legendRef","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegend","_getHighlightedLegend","legendValue","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","length","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}

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

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

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

@@ -1,5 +1,6 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { getAxisTitleStyle } from '../../utilities/index';
 /**
  * @internal
  */
@@ -7,7 +8,8 @@ export const donutClassNames = {
   root: 'fui-donut__root',
   chart: 'fui-donut__chart',
   legendContainer: 'fui-donut__legendContainer',
-  chartWrapper: 'fui-donut__chartWrapper'
+  chartWrapper: 'fui-donut__chartWrapper',
+  axisAnnotation: 'fui-donut__axisAnnotation'
 };
 /**
  * Base Styles
@@ -34,17 +36,31 @@ const useStyles = /*#__PURE__*/__styles({
   legendContainer: {
     z8tnut: "fikn0iw",
     a9b677: "fly5x3f"
+  },
+  axisAnnotation: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcpl73t",
+    B80ckks: "fmd4ok8",
+    fsow6f: "f17mccla",
+    sj55zd: "fkfq4zb",
+    Bkfmm31: "fhuob2q",
+    a6j6cd: "folz2wl"
   }
 }, {
   d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1e4lqlz{box-sizing:content-box;}", ".fzm18in{alignment-adjust:center;}", ".ftgm304{display:block;}", [".f1gl81tg{overflow:visible;}", {
     p: -1
-  }], ".fikn0iw{padding-top:var(--spacingVerticalL);}"]
+  }], ".fikn0iw{padding-top:var(--spacingVerticalL);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fmd4ok8{font-style:normal;}", ".f17mccla{text-align:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"],
+  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }]]
 });
 /**
  * Apply styling to the DonutChart component
  */
 export const useDonutChartStyles = props => {
-  var _props_styles, _props_styles1, _props_styles2, _props_styles3;
+  var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
   const {
     className
   } = props;
@@ -53,6 +69,7 @@ export const useDonutChartStyles = props => {
     root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
     chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
     legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
-    chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper)
+    chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),
+    axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)
   };
 };

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","donutClassNames","root","chart","legendContainer","chartWrapper","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","d","p","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","className","baseStyles","styles"],"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/*\n @internal\n / export const donutClassNames = {\n root: 'fui-donut__root',\n chart: 'fui-donut__chart',\n legendContainer: 'fui-donut__legendContainer',\n chartWrapper: 'fui-donut__chartWrapper'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n // alignItems: 'center',\n ...typographyStyles.body1,\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%'\n },\n chart: {\n boxSizing: 'content-box',\n alignmentAdjust: 'center',\n display: 'block',\n overflow: 'visible'\n },\n legendContainer: {\n paddingTop: tokens.spacingVerticalL,\n width: '100%'\n }\n});\n/\n Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2, _props_styles3;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper)\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAG;EAC/BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,kBAAkB;EACzBC,eAAe,EAAE,4BAA4B;EAC7CC,YAAY,EAAE;~~AAClB~~,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,~~gBAAGT~~,QAAA;~~EAAAK~~,IAAA;~~IAAAK~~,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;~~EAAAX~~,KAAA;~~IAAAY~~,OAAA;IAAAC,MAAA;IAAAL,MAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;~~EAAAf~~,eAAA;~~IAAAgB~~,MAAA;IAAAP,MAAA;EAAA;AAAA;~~EAAAQ~~,CAAA;IAAAC,CAAA;EAAA;AAAA,~~CAmBrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;~~EACjE~~,MAAM;IAAEC;EAAU,CAAC,~~GAAGL~~,KAAK;EAC3B,~~MAAMM~~,UAAU,~~GAAGxB~~,SAAS,CAAC,CAAC;EAC9B,OAAO;~~IACHJ~~,IAAI,~~EAAEJ~~,YAAY,~~CAACG~~,eAAe,CAACC,IAAI,~~EAAE4B~~,UAAU,~~CAAC5B~~,IAAI,~~EAAE2B~~,SAAS,EAAE,~~CAACJ~~,aAAa,GAAGD,KAAK,~~CAACO~~,MAAM,MAAM,IAAI,~~IAAIN~~,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,~~CAACvB~~,IAAI,CAAC;IACvKC,KAAK,~~EAAEL~~,YAAY,~~CAACG~~,eAAe,CAACE,KAAK,~~EAAE2B~~,UAAU,~~CAAC3B~~,KAAK,EAAE,~~CAACuB~~,cAAc,GAAGF,KAAK,~~CAACO~~,MAAM,MAAM,IAAI,~~IAAIL~~,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACvB~~,KAAK,CAAC;IACnKC,eAAe,~~EAAEN~~,YAAY,~~CAACG~~,eAAe,CAACG,eAAe,~~EAAE0B~~,UAAU,~~CAAC1B~~,eAAe,EAAE,~~CAACuB~~,cAAc,GAAGH,KAAK,~~CAACO~~,MAAM,MAAM,IAAI,~~IAAIJ~~,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACvB~~,eAAe,CAAC;IAC3MC,YAAY,~~EAAEP~~,YAAY,~~CAACG~~,eAAe,CAACI,YAAY,EAAE,~~CAACuB~~,cAAc,GAAGJ,KAAK,~~CAACO~~,MAAM,MAAM,IAAI,~~IAAIH~~,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAACvB~~,YAAY;~~EACzK~~,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","d","p","m","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","className","baseStyles","styles"],"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getAxisTitleStyle } from '../../utilities/index';\n/*\n @internal\n / export const donutClassNames = {\n root: 'fui-donut__root',\n chart: 'fui-donut__chart',\n legendContainer: 'fui-donut__legendContainer',\n chartWrapper: 'fui-donut__chartWrapper',\n axisAnnotation: 'fui-donut__axisAnnotation'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n // alignItems: 'center',\n ...typographyStyles.body1,\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%'\n },\n chart: {\n boxSizing: 'content-box',\n alignmentAdjust: 'center',\n display: 'block',\n overflow: 'visible'\n },\n legendContainer: {\n paddingTop: tokens.spacingVerticalL,\n width: '100%'\n },\n axisAnnotation: getAxisTitleStyle()\n});\n/\n Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;\n const { className } = props;\n const baseStyles = useStyles();\n return {\n root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),\n axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null \|\| _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAG;EAC/BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,kBAAkB;EACzBC,eAAe,EAAE,4BAA4B;EAC7CC,YAAY,EAAE,yBAAyB;EACvCC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGX,QAAA;EAAAM,IAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,KAAA;IAAAa,OAAA;IAAAC,MAAA;IAAAL,MAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,eAAA;IAAAiB,MAAA;IAAAP,MAAA;EAAA;EAAAR,cAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAW,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACjF,MAAM;IAAEC;EAAU,CAAC,GAAGN,KAAK;EAC3B,MAAMO,UAAU,GAAG/B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEL,YAAY,CAACI,eAAe,CAACC,IAAI,EAAEoC,UAAU,CAACpC,IAAI,EAAEmC,SAAS,EAAE,CAACL,aAAa,GAAGD,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIP,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC9B,IAAI,CAAC;IACvKC,KAAK,EAAEN,YAAY,CAACI,eAAe,CAACE,KAAK,EAAEmC,UAAU,CAACnC,KAAK,EAAE,CAAC8B,cAAc,GAAGF,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIN,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,KAAK,CAAC;IACnKC,eAAe,EAAEP,YAAY,CAACI,eAAe,CAACG,eAAe,EAAEkC,UAAU,CAAClC,eAAe,EAAE,CAAC8B,cAAc,GAAGH,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,eAAe,CAAC;IAC3MC,YAAY,EAAER,YAAY,CAACI,eAAe,CAACI,YAAY,EAAE,CAAC8B,cAAc,GAAGJ,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,YAAY,CAAC;IACtKC,cAAc,EAAET,YAAY,CAACI,eAAe,CAACK,cAAc,EAAEgC,UAAU,CAAChC,cAAc,EAAE,CAAC8B,cAAc,GAAGL,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,cAAc;EAC1M,CAAC;AACL,CAAC","ignoreList":[]}

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

@@ -1,12 +1,14 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { getAxisTitleStyle } from '../../utilities/index';
 /**
  * @internal
  */ export const donutClassNames = {
     root: 'fui-donut__root',
     chart: 'fui-donut__chart',
     legendContainer: 'fui-donut__legendContainer',
-    chartWrapper: 'fui-donut__chartWrapper'
+    chartWrapper: 'fui-donut__chartWrapper',
+    axisAnnotation: 'fui-donut__axisAnnotation'
 };
 /**
  * Base Styles
@@ -28,18 +30,20 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
     legendContainer: {
         paddingTop: tokens.spacingVerticalL,
         width: '100%'
-    }
+    },
+    axisAnnotation: getAxisTitleStyle()
 });
 /**
  * Apply styling to the DonutChart component
  */ export const useDonutChartStyles = (props)=>{
-    var _props_styles, _props_styles1, _props_styles2, _props_styles3;
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
     const { className } = props;
     const baseStyles = useStyles();
     return {
         root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
         chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
         legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
-        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper)
+        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),
+        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)
     };
 };

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

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

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

@@ -133,13 +133,14 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
             };
         }
     }
-    function _renderSegmentText({ show, x, y, value, textColor }) {
+    function _renderSegmentText({ show, x, y, value, textColor, opacity }) {
         if (!show) {
             return null;
         }
         const textElement = /*#__PURE__*/ React.createElement("text", {
             x: isRTL ? funnelWidth - x : x,
             y: y,
+            opacity: opacity,
             textAnchor: "middle",
             alignmentBaseline: "middle",
             fill: textColor
@@ -164,7 +165,8 @@ export const FunnelChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
             tabIndex: tabIndex
         }), textProps && /*#__PURE__*/ React.createElement("g", eventHandlers, _renderSegmentText({
             ...textProps,
-            textColor
+            textColor,
+            opacity
         })));
     }
     function _createFunnel(containerHeight, containerWidth) {