npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20250825-0406.1 → 0.0.0-nightly-20250826-0412.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20250825-0406.1 → 0.0.0-nightly-20250826-0412.1

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

package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n/*\n @internal\n / export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden'\n },\n chartWrapper: {\n overflow: 'auto'\n },\n axisTitle: {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n },\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n rtl: {\n '& g': {\n textAnchor: 'end'\n }\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1',\n cursor: 'default'\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas'\n }\n },\n tooltip: {\n ...typographyStyles.body1,\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(tokens.spacingHorizontalS),\n position: 'absolute',\n textAlign: 'center',\n top: tokens.spacingVerticalNone,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none'\n },\n axisAnnotation: {\n ...typographyStyles.caption2Strong,\n textAlign: 'center',\n fontStyle: 'normal',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n }\n});\n/\n Apply styling to the Carousel slots based on the state\n / export const useCartesianChartStyles = (props)=>{\n var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null \|\| _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/ ),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/ ),\n yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/ ),\n opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/ ),\n legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /props.styles?.legendContainer/ ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip*/ ),\n axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,EAAEC,MAAM,QAAQ,2BAA2B;AACxE;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAG;EACxCC,IAAI,EAAE,gBAAgB;EACtBC,YAAY,EAAE,wBAAwB;EACtCC,SAAS,EAAE,qBAAqB;EAChCC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,oBAAoB,EAAE,gCAAgC;EACtDC,eAAe,EAAE,2BAA2B;EAC5CC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,kBAAkB,EAAE,8BAA8B;EAClDC,KAAK,EAAE,iBAAiB;EACxBC,OAAO,EAAE,mBAAmB;EAC5BC,cAAc,EAAE,0BAA0B;EAC1CC,UAAU,EAAE,sBAAsB;EAClCC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGvB,QAAA;EAAAQ,IAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAzB,YAAA;IAAAuB,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAxB,SAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAQ,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA5B,KAAA;IAAA6B,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAtC,KAAA;IAAA6B,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;EAAAxC,oBAAA;IAAAyC,MAAA;IAAAC,OAAA;EAAA;EAAAzC,eAAA;IAAA0C,OAAA;IAAAC,MAAA;EAAA;EAAA1C,UAAA;IAAAuB,OAAA;IAAAC,MAAA;EAAA;EAAApB,OAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,OAAA;IAAA2B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAA1B,MAAA;IAAA2B,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAlD,cAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAS,MAAA;IAAAD,OAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAgC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA+FrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,IAAIC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACrF,MAAMC,OAAO,GAAG3E,MAAM,CAAC,CAAC;EACxB,MAAM4E,UAAU,GAAG3D,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHf,IAAI,EAAEP,YAAY,CAACM,wBAAwB,CAACC,IAAI,EAAE0E,UAAU,CAAC1E,IAAI,EAAE,CAACoE,aAAa,GAAGD,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIP,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACpE,IAAI,CAAC;IACrKC,YAAY,EAAER,YAAY,CAACM,wBAAwB,CAACE,YAAY,EAAE,CAAC,CAACoE,kBAAkB,GAAGF,KAAK,CAACS,WAAW,MAAM,IAAI,IAAIP,kBAAkB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,kBAAkB,CAACQ,IAAI,MAAM,WAAW,GAAGH,UAAU,CAACzE,YAAY,GAAG,EAAE,EAAE,CAACqE,cAAc,GAAGH,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACrE,YAAY,CAAC;IACvVC,SAAS,EAAET,YAAY,CAACM,wBAAwB,CAACG,SAAS,EAAEwE,UAAU,CAACxE,SAAS,CAAC,2BAA4B,CAAC;IAC9GC,KAAK,EAAEV,YAAY,CAACM,wBAAwB,CAACI,KAAK,EAAEuE,UAAU,CAACvE,KAAK,CAAC,uBAAwB,CAAC;IAC9FC,KAAK,EAAEX,YAAY,CAACM,wBAAwB,CAACK,KAAK,EAAEsE,UAAU,CAACtE,KAAK,EAAEqE,OAAO,GAAGC,UAAU,CAAC/B,GAAG,GAAG+B,UAAU,CAAC7B,GAAG,CAAC,uBAAwB,CAAC;IACzIxC,oBAAoB,EAAEZ,YAAY,CAACM,wBAAwB,CAACM,oBAAoB,EAAEqE,UAAU,CAACrE,oBAAoB,CAAC,sCAAuC,CAAC;IAC1JC,eAAe,EAAEb,YAAY,CAACM,wBAAwB,CAACO,eAAe,EAAEoE,UAAU,CAACpE,eAAe,CAAC,iCAAkC,CAAC;IACtIC,UAAU,EAAEd,YAAY,CAACM,wBAAwB,CAACQ,UAAU,EAAEmE,UAAU,CAACnE,UAAU,EAAE,CAACgE,cAAc,GAAGJ,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAChE,UAAU,CAAC;IAChMI,OAAO,EAAElB,YAAY,CAACM,wBAAwB,CAACY,OAAO,EAAE+D,UAAU,CAAC/D,OAAO,CAAC,yBAA0B,CAAC;IACtGC,cAAc,EAAEnB,YAAY,CAACM,wBAAwB,CAACa,cAAc,EAAE8D,UAAU,CAAC9D,cAAc,CAAC;IAChGE,KAAK,EAAErB,YAAY,CAACM,wBAAwB,CAACe,KAAK,EAAE,CAAC0D,cAAc,GAAGL,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1D,KAAK;EAC7J,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/*\n @internal\n / export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden'\n },\n chartWrapper: {\n overflow: 'auto'\n },\n axisTitle: getAxisTitleStyle(),\n axisAnnotation: getAxisTitleStyle(),\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n },\n '& path': {\n display: 'none'\n }\n },\n rtl: {\n '& g': {\n textAnchor: 'end'\n }\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1',\n cursor: 'default'\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas'\n }\n },\n tooltip: getTooltipStyle()\n});\n/\n \n * Apply styling to the Carousel slots based on the state\n / export const useCartesianChartStyles = (props)=>{\n var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null \|\| _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/ ),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/ ),\n yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/ ),\n opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/ ),\n legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /props.styles?.legendContainer/ ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip*/ ),\n axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js CHANGED Viewed

@@ -1,6 +1,7 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector, useRtl } from '../../utilities/utilities';
+import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
 /**
  * @internal
  */ export const cartesianchartClassNames = {
@@ -34,16 +35,8 @@ import { HighContrastSelector, useRtl } from '../../utilities/utilities';
     chartWrapper: {
         overflow: 'auto'
     },
-    axisTitle: {
-        ...typographyStyles.caption2Strong,
-        fontStyle: 'normal',
-        textAlign: 'center',
-        color: tokens.colorNeutralForeground2,
-        fill: tokens.colorNeutralForeground1,
-        [HighContrastSelector]: {
-            fill: 'CanvasText'
-        }
-    },
+    axisTitle: getAxisTitleStyle(),
+    axisAnnotation: getAxisTitleStyle(),
     xAxis: {
         '& text': {
             fill: tokens.colorNeutralForeground1,
@@ -95,30 +88,10 @@ import { HighContrastSelector, useRtl } from '../../utilities/utilities';
             fill: 'Canvas'
         }
     },
-    tooltip: {
-        ...typographyStyles.body1,
-        display: 'flex',
-        flexDirection: 'column',
-        ...shorthands.padding(tokens.spacingHorizontalS),
-        position: 'absolute',
-        textAlign: 'center',
-        top: tokens.spacingVerticalNone,
-        backgroundColor: tokens.colorNeutralBackground1,
-        borderRadius: tokens.borderRadiusSmall,
-        pointerEvents: 'none'
-    },
-    axisAnnotation: {
-        ...typographyStyles.caption2Strong,
-        textAlign: 'center',
-        fontStyle: 'normal',
-        color: tokens.colorNeutralForeground2,
-        fill: tokens.colorNeutralForeground1,
-        [HighContrastSelector]: {
-            fill: 'CanvasText'
-        }
-    }
+    tooltip: getTooltipStyle()
 });
 /**
+ *
  * Apply styling to the Carousel slots based on the state
  */ export const useCartesianChartStyles = (props)=>{
     var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;

package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n\n/*\n @internal\n /\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n },\n chartWrapper: {\n overflow: 'auto',\n },\n axisTitle: ~~{\n ...typographyStyles.caption2Strong,\n fontStyle:~~ ~~'normal',\n textAlign:~~ ~~'center'~~,\n ~~color~~: ~~tokens.colorNeutralForeground2,\n fill:~~ ~~tokens.colorNeutralForeground1,\n [HighContrastSelector]:~~ ~~{\n fill: 'CanvasText'~~,\n ~~},\n~~ ~~},\n~~ xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto',\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto',\n },\n '& path': {\n display: 'none',\n },\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n '& path': {\n display: 'none',\n },\n },\n rtl: {\n '& g': {\n textAnchor: 'end',\n },\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1', //supports custom opacity ??\n cursor: 'default', //supports custom cursor ??\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL,\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n tooltip: ~~{\n ...typographyStyles.body1,\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding~~(~~tokens.spacingHorizontalS~~)~~,\n position:~~ ~~'absolute',\n textAlign:~~ ~~'center'~~,\n ~~top: tokens.spacingVerticalNone,\n backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n~~ },\n axisAnnotation: {\n ...typographyStyles.caption2Strong,\n textAlign: 'center',\n fontStyle: 'normal',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n});\n/\n Apply styling to the Carousel slots based on the state\n /\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n chartWrapper: mergeClasses(\n cartesianchartClassNames.chartWrapper,\n props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n props.styles?.chartWrapper,\n ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/),\n yAxis: mergeClasses(\n cartesianchartClassNames.yAxis,\n baseStyles.yAxis,\n _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/,\n ),\n opacityChangeOnHover: mergeClasses(\n cartesianchartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/,\n ),\n legendContainer: mergeClasses(\n cartesianchartClassNames.legendContainer,\n baseStyles.legendContainer /props.styles?.legendContainer/,\n ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip/),\n axisAnnotation: mergeClasses(\n cartesianchartClassNames.axisAnnotation,\n baseStyles.axisAnnotation,\n /props.styles?.axisAnnotation,*/\n ),\n chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n };\n};\n"],"names":["makeStyles","mergeClasses","~~shorthands","~~tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","~~caption2Strong~~","~~fontStyle~~","~~textAlign~~","~~color","colorNeutralForeground2","fill","colorNeutralForeground1","~~forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","~~padding","spacingHorizontalS","position","top","spacingVerticalNone","backgroundColor","borderRadius","borderRadiusSmall","pointerEvents","~~useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,~~SAASA~~,UAAU,EAAEC,YAAY,~~EAAEC,UAAU,~~QAAQ,iBAAiB;~~AAGtE~~,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,EAAEC,MAAM,QAAQ,4BAA4B;~~AAEzE~~;;CAEC,GACD,OAAO,MAAMC,2BAAiE;IAC5EC,MAAM;IACNC,cAAc;IACdC,WAAW;IACXC,OAAO;IACPC,OAAO;IACPC,sBAAsB;IACtBC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,oBAAoB;IACpBC,OAAO;IACPC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,~~YAAYvB~~,WAAW;~~IAC3BQ~~,MAAM;QACJ,~~GAAGJ~~,~~iBAAiBoB~~,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;IACZ;IACApB,cAAc;QACZoB,UAAU;IACZ;IACAnB,~~WAAW~~;~~QACT~~,~~GAAGN,iBAAiB0B,cAAc~~;~~QAClCC~~,~~WAAW;QACXC,WAAW;QACXC,OAAO9B,~~OAAO~~+B,uBAAuB~~;~~QACrCC,MAAMhC,OAAOiC,uBAAuB;QACpC,CAAC/B,qBAAqB,EAAE;YACtB8B,MAAM;QACR;IACF;IACAxB,OAAO;~~QACL,UAAU;~~YACRwB~~,~~MAAMhC~~,~~OAAOiC~~,uBAAuB;YACpC,~~GAAGhC~~,~~iBAAiB0B~~,cAAc;~~YAClCO~~,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQpC~~,~~OAAOiC~~,uBAAuB;~~YACtCV~~,OAAO;~~YACPW~~,mBAAmB;QACrB;QACA,UAAU;~~YACRZ~~,SAAS;QACX;IACF;IACAb,OAAO;QACL,UAAU;YACR,~~GAAGR~~,~~iBAAiB0B~~,cAAc;~~YAClCK~~,~~MAAMhC~~,~~OAAOiC~~,uBAAuB;~~YACpCC~~,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQpC~~,~~OAAOiC~~,uBAAuB;~~YACtCC~~,mBAAmB;QACrB;QACA,UAAU;~~YACRZ~~,SAAS;QACX;IACF;~~IACAe~~,KAAK;QACH,OAAO;YACLC,YAAY;QACd;IACF;IACAC,KAAK,CAAC;~~IACN7B~~,sBAAsB;~~QACpByB~~,SAAS;QACTK,QAAQ;IACV;~~IACA7B~~,iBAAiB;~~QACf8B~~,~~WAAWzC~~,~~OAAO0C~~,gBAAgB;QAClCC,~~YAAY3C~~,~~OAAO4C~~,mBAAmB;IACxC;~~IACAhC~~,YAAY;~~QACVoB~~,~~MAAMhC~~,~~OAAO6C~~,uBAAuB;QACpC,~~CAAC3C~~,qBAAqB,EAAE;~~YACtB8B~~,MAAM;QACR;IACF;~~IACAhB~~,~~SAAS~~;~~QACP,GAAGf,iBAAiBoB,KAAK~~;QACzBC,SAAS;QACTG,eAAe;QACf,GAAG1B,WAAW+C,OAAO,CAAC9C,OAAO+C,kBAAkB,CAAC;QAChDC,UAAU;QACVnB,WAAW;QACXoB,KAAKjD,OAAOkD,mBAAmB;QAC/BC,iBAAiBnD,OAAO6C,uBAAuB;QAC/CO,cAAcpD,OAAOqD,iBAAiB;QACtCC,eAAe;IACjB;IACArC,gBAAgB;QACd,GAAGhB,iBAAiB0B,cAAc;QAClCE,WAAW;QACXD,WAAW;QACXE,OAAO9B,OAAO+B,uBAAuB;QACrCC,MAAMhC,OAAOiC,uBAAuB;QACpC,CAAC/B,qBAAqB,EAAE;YACtB8B,MAAM;QACR;IACF;AACF;AACA~~;;CAEC~~,GACD,OAAO,~~MAAMuB~~,0BAA0B,CAACC;QAI+BA,eAGjEA,oBACAA,gBAiBmFA,gBAOjCA;IA/BtD,MAAMC,~~UAAUtD~~;IAChB,~~MAAMuD~~,~~aAAatC~~;IACnB,OAAO;QACLf,~~MAAMP~~,~~aAAaM~~,yBAAyBC,IAAI,~~EAAEqD~~,~~WAAWrD~~,IAAI,~~GAAEmD~~,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,~~cAAcnD~~,IAAI;QACrFC,~~cAAcR~~,~~aACZM~~,yBAAyBE,YAAY,~~EACrCkD~~,EAAAA,qBAAAA,MAAMI,WAAW,cAAjBJ,yCAAAA,mBAAmBK,IAAI,MAAK,cAAcH,~~WAAWpD~~,YAAY,GAAG,~~KACpEkD~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAclD~~,YAAY;QAE5BC,~~WAAWT~~,~~aAAaM~~,yBAAyBG,SAAS,~~EAAEmD~~,~~WAAWnD~~,SAAS,CAAC,yBAAyB;QAC1GC,~~OAAOV~~,~~aAAaM~~,yBAAyBI,KAAK,~~EAAEkD~~,~~WAAWlD~~,KAAK,CAAC,qBAAqB;QAC1FC,~~OAAOX~~,~~aACLM~~,yBAAyBK,KAAK,~~EAC9BiD~~,~~WAAWjD~~,KAAK,~~EAChBgD~~,UAAUC,~~WAAWrB~~,GAAG,~~GAAGqB~~,~~WAAWnB~~,GAAG,CAAC,qBAAqB;~~QAEjE7B~~,~~sBAAsBZ~~,~~aACpBM~~,yBAAyBM,oBAAoB,~~EAC7CgD~~,~~WAAWhD~~,oBAAoB,CAAC,oCAAoC;QAEtEC,~~iBAAiBb~~,~~aACfM~~,yBAAyBO,eAAe,~~EACxC+C~~,~~WAAW/C~~,eAAe,CAAC,+BAA+B;QAE5DC,~~YAAYd~~,~~aAAaM~~,yBAAyBQ,UAAU,~~EAAE8C~~,~~WAAW9C~~,UAAU,~~GAAE4C~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAc5C~~,UAAU;QAC7GI,~~SAASlB~~,~~aAAaM~~,yBAAyBY,OAAO,~~EAAE0C~~,~~WAAW1C~~,OAAO,CAAC,uBAAuB;QAClGC,~~gBAAgBnB~~,~~aACdM~~,yBAAyBa,cAAc,~~EACvCyC~~,~~WAAWzC~~,cAAc;QAG3BE,~~OAAOrB~~,~~aAAaM~~,yBAAyBe,KAAK,~~GAAEqC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAcrC~~,KAAK;IACzE;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/*\n @internal\n /\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: 'fui-cart__xAxis',\n yAxis: 'fui-cart__yAxis',\n opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n legendContainer: 'fui-cart__legendContainer',\n svgTooltip: 'fui-cart_svgTooltip',\n shapeStyles: 'fui-cart__shapeStyles',\n descriptionMessage: 'fui-cart__descriptionMessage',\n hover: 'fui-cart__hover',\n tooltip: 'fui-cart__tooltip',\n axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart',\n};\n\n/\n Base Styles\n /\nconst useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n },\n chartWrapper: {\n overflow: 'auto',\n },\n axisTitle: getAxisTitleStyle() as GriffelStyle,\n axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n xAxis: {\n '& text': {\n fill: tokens.colorNeutralForeground1,\n ...typographyStyles.caption2Strong,\n forcedColorAdjust: 'auto',\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n width: '1px',\n forcedColorAdjust: 'auto',\n },\n '& path': {\n display: 'none',\n },\n },\n yAxis: {\n '& text': {\n ...typographyStyles.caption2Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n '& line': {\n opacity: 0.2,\n stroke: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n '& path': {\n display: 'none',\n },\n },\n rtl: {\n '& g': {\n textAnchor: 'end',\n },\n },\n ltr: {},\n opacityChangeOnHover: {\n opacity: '0.1', //supports custom opacity ??\n cursor: 'default', //supports custom cursor ??\n },\n legendContainer: {\n marginTop: tokens.spacingVerticalS,\n marginLeft: tokens.spacingHorizontalXL,\n },\n svgTooltip: {\n fill: tokens.colorNeutralBackground1,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n tooltip: getTooltipStyle() as GriffelStyle,\n});\n/\n \n * Apply styling to the Carousel slots based on the state\n /\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n chartWrapper: mergeClasses(\n cartesianchartClassNames.chartWrapper,\n props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n props.styles?.chartWrapper,\n ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/),\n yAxis: mergeClasses(\n cartesianchartClassNames.yAxis,\n baseStyles.yAxis,\n _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/,\n ),\n opacityChangeOnHover: mergeClasses(\n cartesianchartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/,\n ),\n legendContainer: mergeClasses(\n cartesianchartClassNames.legendContainer,\n baseStyles.legendContainer /props.styles?.legendContainer/,\n ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip/),\n axisAnnotation: mergeClasses(\n cartesianchartClassNames.axisAnnotation,\n baseStyles.axisAnnotation,\n /props.styles?.axisAnnotation,*/\n ),\n chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED Viewed

@@ -564,6 +564,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         const seriesOpacity = getOpacity(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
+        // if mode contains 'text', we prioritize showing the text over curving the line
         const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) ? getLineOptions(series.line) : undefined;
         const legendShape = getLegendShape(series);
         const validXYRanges = getValidXYRanges(series);