npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20251216-0407.1 → 0.0.0-nightly-20251217-0407.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20251216-0407.1 → 0.0.0-nightly-20251217-0407.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 (101) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","qhf8xq","chartWrapperMinWidth","B80ckks","sj55zd","Bkfmm31","Bxms50k","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","Bkecrkj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 plotContainer: 'fui-cart__plotContainer',\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 annotationLayer: 'fui-cart__annotationLayer'\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 textAlign: 'left'\n },\n chartWrapper: {\n position: 'relative'\n },\n chartWrapperMinWidth: {\n overflow: 'auto'\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%'\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 annotationLayer: {\n pointerEvents: 'none'\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, baseStyles.chartWrapper, ((_props_reflowProps = props.reflowProps) === null \|\| _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /props.styles?.plotContainer/ ),\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 annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /props.styles?.annotationLayer/ ),\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":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","CARTESIAN_XAXIS_CLASSNAME","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","qhf8xq","chartWrapperMinWidth","B80ckks","sj55zd","Bkfmm31","Bxms50k","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","Bkecrkj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { CARTESIAN_XAXIS_CLASSNAME, 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 plotContainer: 'fui-cart__plotContainer',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: CARTESIAN_XAXIS_CLASSNAME,\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 annotationLayer: 'fui-cart__annotationLayer'\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 textAlign: 'left',\n position: 'relative'\n },\n chartWrapper: {\n position: 'relative'\n },\n chartWrapperMinWidth: {\n overflow: 'auto'\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%'\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 annotationLayer: {\n pointerEvents: 'none'\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, baseStyles.chartWrapper, ((_props_reflowProps = props.reflowProps) === null \|\| _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined, (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /props.styles?.plotContainer/ ),\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 annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /props.styles?.annotationLayer/ ),\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,7 +1,7 @@
 'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector, useRtl } from '../../utilities/utilities';
+import { CARTESIAN_XAXIS_CLASSNAME, HighContrastSelector, useRtl } from '../../utilities/utilities';
 import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
 /**
  * @internal
@@ -10,7 +10,7 @@ import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
     chartWrapper: 'fui-cart__chartWrapper',
     plotContainer: 'fui-cart__plotContainer',
     axisTitle: 'fui-cart__axisTitle',
-    xAxis: 'fui-cart__xAxis',
+    xAxis: CARTESIAN_XAXIS_CLASSNAME,
     yAxis: 'fui-cart__yAxis',
     opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',
     legendContainer: 'fui-cart__legendContainer',
@@ -34,7 +34,8 @@ import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
         height: '100%',
         flexDirection: 'column',
         overflow: 'hidden',
-        textAlign: 'left'
+        textAlign: 'left',
+        position: 'relative'
     },
     chartWrapper: {
         position: 'relative'

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 plotContainer: 'fui-cart__plotContainer',\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 annotationLayer: 'fui-cart__annotationLayer',\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 textAlign: 'left',\n },\n chartWrapper: {\n position: 'relative',\n },\n chartWrapperMinWidth: {\n overflow: 'auto',\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%',\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 annotationLayer: {\n pointerEvents: 'none',\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 baseStyles.chartWrapper,\n props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined,\n props.styles?.chartWrapper,\n ),\n plotContainer: mergeClasses(\n cartesianchartClassNames.plotContainer,\n baseStyles.plotContainer /props.styles?.plotContainer/,\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 annotationLayer: mergeClasses(\n cartesianchartClassNames.annotationLayer,\n baseStyles.annotationLayer /props.styles?.annotationLayer/,\n ),\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","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","position","chartWrapperMinWidth","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,EAAEC,MAAM,QAAQ,4BAA4B;~~AACzE~~,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,wBAAwB;AAE3E;;CAEC,GACD,OAAO,MAAMC,2BAAiE;IAC5EC,MAAM;IACNC,cAAc;IACdC,eAAe;IACfC,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;IACPC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,~~YAAY1B~~,WAAW;~~IAC3BS~~,MAAM;QACJ,~~GAAGN~~,~~iBAAiBwB~~,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;QACVC,WAAW;~~IACb~~;~~IACAvB~~,cAAc;QACZwB,UAAU;IACZ;IACAC,sBAAsB;QACpBH,UAAU;IACZ;IACArB,eAAe;QACbuB,UAAU;QACVL,OAAO;QACPC,QAAQ;IACV;IACAlB,WAAWN;IACXgB,gBAAgBhB;IAChBO,OAAO;QACL,UAAU;YACRuB,~~MAAMlC~~,~~OAAOmC~~,uBAAuB;YACpC,~~GAAGlC~~,~~iBAAiBmC~~,cAAc;YAClCC,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQvC~~,~~OAAOmC~~,uBAAuB;YACtCR,OAAO;YACPU,mBAAmB;QACrB;QACA,UAAU;YACRX,SAAS;QACX;IACF;IACAd,OAAO;QACL,UAAU;YACR,~~GAAGX~~,~~iBAAiBmC~~,cAAc;YAClCF,~~MAAMlC~~,~~OAAOmC~~,uBAAuB;YACpCE,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQvC~~,~~OAAOmC~~,uBAAuB;YACtCE,mBAAmB;QACrB;QACA,UAAU;YACRX,SAAS;QACX;IACF;IACAc,KAAK;QACH,OAAO;YACLC,YAAY;QACd;IACF;IACAC,KAAK,CAAC;IACN7B,sBAAsB;QACpByB,SAAS;QACTK,QAAQ;IACV;IACA7B,iBAAiB;QACf8B,~~WAAW5C~~,~~OAAO6C~~,gBAAgB;QAClCC,~~YAAY9C,OAAO+~~C,mBAAmB;IACxC;IACAhC,YAAY;QACVmB,~~MAAMlC~~,~~OAAOgD~~,uBAAuB;QACpC,CAAC9C,qBAAqB,EAAE;YACtBgC,MAAM;QACR;IACF;IACAX,iBAAiB;QACf0B,eAAe;IACjB;IACA9B,SAASd;AACX;AACA;;;CAGC,GACD,OAAO,MAAM6C,0BAA0B,CAACC;QAI+BA,eAIjEA,oBACAA,gBAqBmFA,gBAWjCA;IAxCtD,MAAMC,UAAUjD;IAChB,MAAMkD,aAAa7B;IACnB,OAAO;QACLjB,~~MAAMR~~,~~aAAaO~~,yBAAyBC,IAAI,EAAE8C,WAAW9C,IAAI,GAAE4C,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAc5C,IAAI;QACrFC,~~cAAcT~~,~~aACZO~~,yBAAyBE,YAAY,EACrC6C,WAAW7C,YAAY,EACvB2C,EAAAA,qBAAAA,MAAMI,WAAW,cAAjBJ,yCAAAA,mBAAmBK,IAAI,MAAK,cAAcH,WAAWpB,oBAAoB,GAAGwB,YAC5EN,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAc3C,YAAY;QAE5BC,~~eAAeV~~,~~aACbO~~,yBAAyBG,aAAa,EACtC4C,WAAW5C,aAAa,CAAC,6BAA6B;QAExDC,~~WAAWX~~,~~aAAaO~~,yBAAyBI,SAAS,EAAE2C,WAAW3C,SAAS,CAAC,yBAAyB;QAC1GC,~~OAAOZ~~,~~aAAaO~~,yBAAyBK,KAAK,EAAE0C,WAAW1C,KAAK,CAAC,qBAAqB;QAC1FC,~~OAAOb~~,~~aACLO~~,yBAAyBM,KAAK,EAC9ByC,WAAWzC,KAAK,EAChBwC,UAAUC,WAAWb,GAAG,GAAGa,WAAWX,GAAG,CAAC,qBAAqB;QAEjE7B,~~sBAAsBd~~,~~aACpBO~~,yBAAyBO,oBAAoB,EAC7CwC,WAAWxC,oBAAoB,CAAC,oCAAoC;QAEtEC,~~iBAAiBf~~,~~aACfO~~,yBAAyBQ,eAAe,EACxCuC,WAAWvC,eAAe,CAAC,+BAA+B;QAE5DC,~~YAAYhB~~,~~aAAaO~~,yBAAyBS,UAAU,EAAEsC,WAAWtC,UAAU,GAAEoC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcpC,UAAU;QAC7GQ,~~iBAAiBxB~~,~~aACfO~~,yBAAyBiB,eAAe,EACxC8B,WAAW9B,eAAe,CAAC,+BAA+B;QAE5DJ,~~SAASpB~~,~~aAAaO~~,yBAAyBa,OAAO,EAAEkC,WAAWlC,OAAO,CAAC,uBAAuB;QAClGC,~~gBAAgBrB~~,~~aACdO~~,yBAAyBc,cAAc,EACvCiC,WAAWjC,cAAc;QAG3BE,~~OAAOvB~~,~~aAAaO~~,yBAAyBgB,KAAK,GAAE6B,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAc7B,KAAK;IACzE;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 { CARTESIAN_XAXIS_CLASSNAME, 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 plotContainer: 'fui-cart__plotContainer',\n axisTitle: 'fui-cart__axisTitle',\n xAxis: CARTESIAN_XAXIS_CLASSNAME,\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 annotationLayer: 'fui-cart__annotationLayer',\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 textAlign: 'left',\n position: 'relative',\n },\n chartWrapper: {\n position: 'relative',\n },\n chartWrapperMinWidth: {\n overflow: 'auto',\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%',\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 annotationLayer: {\n pointerEvents: 'none',\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 baseStyles.chartWrapper,\n props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapperMinWidth : undefined,\n props.styles?.chartWrapper,\n ),\n plotContainer: mergeClasses(\n cartesianchartClassNames.plotContainer,\n baseStyles.plotContainer /props.styles?.plotContainer/,\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 annotationLayer: mergeClasses(\n cartesianchartClassNames.annotationLayer,\n baseStyles.annotationLayer /props.styles?.annotationLayer/,\n ),\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","CARTESIAN_XAXIS_CLASSNAME","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","position","chartWrapperMinWidth","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode","undefined"],"mappings":"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"}

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

@@ -971,7 +971,7 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     };
 };
 export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
-    var _input_layout, _input_layout1, _input_layout2, _vsbcData_;
+    var _input_layout, _input_layout1, _input_layout2;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
     let yMinValue = 0;
@@ -1132,7 +1132,6 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         yMinValue,
         mode: 'plotly',
         ...secondaryYAxisValues,
-        wrapXAxisLables: typeof ((_vsbcData_ = vsbcData[0]) === null || _vsbcData_ === void 0 ? void 0 : _vsbcData_.xAxisPoint) === 'string',
         hideTickOverlap: true,
         barGapMax: 2,
         hideLegend,
@@ -1277,7 +1276,6 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        wrapXAxisLables: true,
         hideLegend,
         roundCorners: true,
         showYAxisLables: true,
@@ -1296,7 +1294,7 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
     };
 };
 export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_layout, _input_layout1, _vbcData_;
+    var _input_layout, _input_layout1;
     const vbcData = [];
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
@@ -1373,7 +1371,6 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         mode: 'histogram',
         hideTickOverlap: true,
-        wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
         maxBarWidth: 50,
         hideLegend,
         roundCorners: true,
@@ -1436,9 +1433,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-    const xAxisType = getAxisType(input.data, getAxisObjects(input.data, input.layout).x);
-    const resolveXValue = getAxisValueResolver(xAxisType);
-    const shouldWrapLabels = xAxisType === 'category';
+    const resolveXValue = getAxisValueResolver(getAxisType(input.data, getAxisObjects(input.data, input.layout).x));
     const chartData = input.data.map((series, index)=>{
         var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_mode1;
         const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
@@ -1597,7 +1592,6 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         hideTickOverlap: true,
         hideLegend,
         useUTC: false,
-        wrapXAxisLabels: shouldWrapLabels,
         optimizeLargeData: numDataPoints > 1000,
         showYAxisLables: true,
         roundedTicks: true,
@@ -1963,7 +1957,6 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        wrapXAxisLables: true,
         ...getTitles(input.layout),
         ...getAxisCategoryOrderProps([
             firstData
@@ -3079,16 +3072,23 @@ const getAxisScaleTypeProps = (data, layout)=>{
             return;
         }
         const axType = getAxisType(data, ax);
+        if (axId === 'x' && axType === 'category') {
+            props.xAxis = {
+                tickLayout: 'auto'
+            };
+        }
         if ((!ax.tickmode || ax.tickmode === 'array') && isArrayOrTypedArray(ax.tickvals)) {
             const tickValues = axType === 'date' ? ax.tickvals.map((v)=>new Date(v)) : ax.tickvals;
             if (axId === 'x') {
                 props.tickValues = tickValues;
                 props.xAxis = {
+                    ...props.xAxis,
                     tickText: ax.ticktext
                 };
             } else if (axId === 'y') {
                 props.yAxisTickValues = tickValues;
                 props.yAxis = {
+                    ...props.yAxis,
                     tickText: ax.ticktext
                 };
             }
@@ -3099,11 +3099,13 @@ const getAxisScaleTypeProps = (data, layout)=>{
             const tick0 = plotlyTick0(ax.tick0, axType, dtick);
             if (axId === 'x') {
                 props.xAxis = {
+                    ...props.xAxis,
                     tickStep: dtick,
                     tick0
                 };
             } else if (axId === 'y') {
                 props.yAxis = {
+                    ...props.yAxis,
                     tickStep: dtick,
                     tick0
                 };