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

@fluentui/react-charts 0.0.0-nightly-20251215-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 (103) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"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"],"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"],"mappings":"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"}
1	+ {"version":3,"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"],"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"],"mappings":"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"}

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

@@ -26,7 +26,7 @@ const cartesianchartClassNames = {
     chartWrapper: 'fui-cart__chartWrapper',
     plotContainer: 'fui-cart__plotContainer',
     axisTitle: 'fui-cart__axisTitle',
-    xAxis: 'fui-cart__xAxis',
+    xAxis: _utilities.CARTESIAN_XAXIS_CLASSNAME,
     yAxis: 'fui-cart__yAxis',
     opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',
     legendContainer: 'fui-cart__legendContainer',
@@ -50,7 +50,8 @@ const cartesianchartClassNames = {
         height: '100%',
         flexDirection: 'column',
         overflow: 'hidden',
-        textAlign: 'left'
+        textAlign: 'left',
+        position: 'relative'
     },
     chartWrapper: {
         position: 'relative'

package/lib-commonjs/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;;;;;;;;;;;;~~IAYaQ~~,wBAAAA;;;~~IA0GA4C~~,uBAAAA;;;;~~uBApH0C~~,iBAAiB;4BAG/B,wBAAwB;~~2BACpB~~,4BAA4B;~~uBACtB~~,wBAAwB;AAKpE,iCAAuE;IAC5E3C,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~~,qBAAAA,EAAW;~~IAC3BS~~,MAAM;QACJ,~~GAAGN~~,4BAAAA,~~CAAiBwB~~,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,eAAWN,wBAAAA;IACXgB,~~oBAAgBhB~~,~~wBAAAA~~;IAChBO,OAAO;QACL,UAAU;YACRuB,~~MAAMlC~~,kBAAAA,~~CAAOmC~~,uBAAuB;YACpC,~~GAAGlC~~,4BAAAA,~~CAAiBmC~~,cAAc;YAClCC,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQvC~~,kBAAAA,~~CAAOmC~~,uBAAuB;YACtCR,OAAO;YACPU,mBAAmB;QACrB;QACA,UAAU;YACRX,SAAS;QACX;IACF;IACAd,OAAO;QACL,UAAU;YACR,~~GAAGX~~,4BAAAA,~~CAAiBmC~~,cAAc;YAClCF,~~MAAMlC~~,kBAAAA,~~CAAOmC~~,uBAAuB;YACpCE,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQvC~~,kBAAAA,~~CAAOmC~~,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~~,kBAAAA,~~CAAO6C~~,gBAAgB;QAClCC,~~YAAY9C~~,kBAAAA,~~CAAO+C~~,mBAAmB;IACxC;IACAhC,YAAY;QACVmB,~~MAAMlC~~,kBAAAA,~~CAAOgD~~,uBAAuB;QACpC,CAAC9C,+BAAAA,CAAqB,EAAE;YACtBgC,MAAM;QACR;IACF;IACAX,iBAAiB;QACf0B,eAAe;IACjB;IACA9B,aAASd,sBAAAA;AACX;AAKO,gCAAgC,CAAC8C;QAI+BA,eAIjEA,oBACAA,gBAqBmFA,gBAWjCA;IAxCtD,MAAMC,cAAUjD,iBAAAA;IAChB,MAAMkD,aAAa7B;IACnB,OAAO;QACLjB,~~UAAMR~~,mBAAAA,~~EAAaO~~,yBAAyBC,IAAI,EAAE8C,WAAW9C,IAAI,EAAA,CAAE4C,gBAAAA,MAAMG,~~MAAM~~,~~AAANA~~,~~MAAM~~,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAc5C,IAAI;QACrFC,~~kBAAcT~~,mBAAAA,~~EACZO~~,yBAAyBE,YAAY,EACrC6C,WAAW7C,YAAY,EACvB2C,CAAAA,~~CAAAA~~,~~qBAAAA,~~MAAMI,WAAAA,AAAW,MAAA,QAAjBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBK,IAAAA,AAAI,MAAK,cAAcH,WAAWpB,oBAAoB,GAAGwB,WAAAA,~~CAC5EN~~,~~iBAAAA~~,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAc3C,YAAY;QAE5BC,~~mBAAeV~~,mBAAAA,~~EACbO~~,yBAAyBG,aAAa,EACtC4C,WAAW5C,aAAa,CAAC,6BAA6B;QAExDC,~~eAAWX~~,mBAAAA,~~EAAaO~~,yBAAyBI,SAAS,EAAE2C,WAAW3C,SAAS,CAAC,yBAAyB;QAC1GC,~~WAAOZ~~,mBAAAA,~~EAAaO~~,yBAAyBK,KAAK,EAAE0C,WAAW1C,KAAK,CAAC,qBAAqB;QAC1FC,~~WAAOb~~,~~mBAAAA~~,~~EACLO~~,yBAAyBM,KAAK,EAC9ByC,WAAWzC,KAAK,EAChBwC,UAAUC,WAAWb,GAAG,GAAGa,WAAWX,GAAG,CAAC,qBAAqB;QAEjE7B,~~0BAAsBd~~,mBAAAA,~~EACpBO~~,yBAAyBO,oBAAoB,EAC7CwC,WAAWxC,oBAAoB,CAAC,oCAAoC;QAEtEC,~~qBAAiBf~~,mBAAAA,~~EACfO~~,yBAAyBQ,eAAe,EACxCuC,WAAWvC,eAAe,CAAC,+BAA+B;QAE5DC,~~gBAAYhB~~,mBAAAA,~~EAAaO~~,yBAAyBS,UAAU,EAAEsC,WAAWtC,UAAU,EAAA,~~CAAEoC~~,~~iBAAAA~~,MAAMG,~~MAAAA~~,~~AAAM~~,~~MAAA~~,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcpC,UAAU;QAC7GQ,~~qBAAiBxB~~,mBAAAA,~~EACfO~~,yBAAyBiB,eAAe,EACxC8B,WAAW9B,eAAe,CAAC,+BAA+B;QAE5DJ,~~SAASpB~~,~~uBAAAA~~,~~EAAaO~~,yBAAyBa,OAAO,EAAEkC,WAAWlC,OAAO,CAAC,uBAAuB;QAClGC,~~oBAAgBrB~~,mBAAAA,~~EACdO~~,yBAAyBc,cAAc,EACvCiC,WAAWjC,cAAc;QAG3BE,~~WAAOvB~~,mBAAAA,~~EAAaO~~,yBAAyBgB,KAAK,EAAA,CAAE6B,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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":"AAAA;;;;;;;;;;;;IAYaS,wBAAAA;;;IA2GA4C,uBAAAA;;;;uBArH0C,iBAAiB;4BAG/B,wBAAwB;2BACO,4BAA4B;uBACjD,wBAAwB;AAKpE,iCAAuE;IAC5E3C,MAAM;IACNC,cAAc;IACdC,eAAe;IACfC,WAAW;IACXC,OAAOV,oCAAAA;IACPW,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,YAAY3B,qBAAAA,EAAW;IAC3BU,MAAM;QACJ,GAAGP,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;QACVC,WAAW;QACXC,UAAU;IACZ;IACAxB,cAAc;QACZwB,UAAU;IACZ;IACAC,sBAAsB;QACpBH,UAAU;IACZ;IACArB,eAAe;QACbuB,UAAU;QACVL,OAAO;QACPC,QAAQ;IACV;IACAlB,eAAWN,wBAAAA;IACXgB,gBAAgBhB,4BAAAA;IAChBO,OAAO;QACL,UAAU;YACRuB,MAAMnC,kBAAAA,CAAOoC,uBAAuB;YACpC,GAAGnC,4BAAAA,CAAiBoC,cAAc;YAClCC,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,QAAQxC,kBAAAA,CAAOoC,uBAAuB;YACtCR,OAAO;YACPU,mBAAmB;QACrB;QACA,UAAU;YACRX,SAAS;QACX;IACF;IACAd,OAAO;QACL,UAAU;YACR,GAAGZ,4BAAAA,CAAiBoC,cAAc;YAClCF,MAAMnC,kBAAAA,CAAOoC,uBAAuB;YACpCE,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,QAAQxC,kBAAAA,CAAOoC,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,WAAW7C,kBAAAA,CAAO8C,gBAAgB;QAClCC,YAAY/C,kBAAAA,CAAOgD,mBAAmB;IACxC;IACAhC,YAAY;QACVmB,MAAMnC,kBAAAA,CAAOiD,uBAAuB;QACpC,CAAC9C,+BAAAA,CAAqB,EAAE;YACtBgC,MAAM;QACR;IACF;IACAX,iBAAiB;QACf0B,eAAe;IACjB;IACA9B,aAASd,sBAAAA;AACX;AAKO,gCAAgC,CAAC8C;QAI+BA,eAIjEA,oBACAA,gBAqBmFA,gBAWjCA;IAxCtD,MAAMC,cAAUjD,iBAAAA;IAChB,MAAMkD,aAAa7B;IACnB,OAAO;QACLjB,UAAMT,mBAAAA,EAAaQ,yBAAyBC,IAAI,EAAE8C,WAAW9C,IAAI,EAAA,CAAE4C,gBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAc5C,IAAI;QACrFC,kBAAcV,mBAAAA,EACZQ,yBAAyBE,YAAY,EACrC6C,WAAW7C,YAAY,EACvB2C,CAAAA,sBAAAA,MAAMI,WAAAA,AAAW,MAAA,QAAjBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBK,IAAAA,AAAI,MAAK,cAAcH,WAAWpB,oBAAoB,GAAGwB,WAAAA,AAC5EN,kBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAc3C,YAAY;QAE5BC,mBAAeX,mBAAAA,EACbQ,yBAAyBG,aAAa,EACtC4C,WAAW5C,aAAa,CAAC,6BAA6B;QAExDC,eAAWZ,mBAAAA,EAAaQ,yBAAyBI,SAAS,EAAE2C,WAAW3C,SAAS,CAAC,yBAAyB;QAC1GC,WAAOb,mBAAAA,EAAaQ,yBAAyBK,KAAK,EAAE0C,WAAW1C,KAAK,CAAC,qBAAqB;QAC1FC,OAAOd,uBAAAA,EACLQ,yBAAyBM,KAAK,EAC9ByC,WAAWzC,KAAK,EAChBwC,UAAUC,WAAWb,GAAG,GAAGa,WAAWX,GAAG,CAAC,qBAAqB;QAEjE7B,0BAAsBf,mBAAAA,EACpBQ,yBAAyBO,oBAAoB,EAC7CwC,WAAWxC,oBAAoB,CAAC,oCAAoC;QAEtEC,qBAAiBhB,mBAAAA,EACfQ,yBAAyBQ,eAAe,EACxCuC,WAAWvC,eAAe,CAAC,+BAA+B;QAE5DC,gBAAYjB,mBAAAA,EAAaQ,yBAAyBS,UAAU,EAAEsC,WAAWtC,UAAU,EAAA,AAAEoC,kBAAAA,MAAMG,MAAM,AAANA,MAAM,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcpC,UAAU;QAC7GQ,qBAAiBzB,mBAAAA,EACfQ,yBAAyBiB,eAAe,EACxC8B,WAAW9B,eAAe,CAAC,+BAA+B;QAE5DJ,aAASrB,mBAAAA,EAAaQ,yBAAyBa,OAAO,EAAEkC,WAAWlC,OAAO,CAAC,uBAAuB;QAClGC,oBAAgBtB,mBAAAA,EACdQ,yBAAyBc,cAAc,EACvCiC,WAAWjC,cAAc;QAG3BE,WAAOxB,mBAAAA,EAAaQ,yBAAyBgB,KAAK,EAAA,CAAE6B,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAc7B,KAAK;IACzE;AACF,EAAE"}

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

@@ -313,6 +313,62 @@ const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNumber)=>{
     }
     return x;
 };
+/**
+ * Formats text values according to the texttemplate specification
+ * Supports D3 format specifiers within %{text:format} patterns
+ * @param textValue The raw text value to format
+ * @param textTemplate The template string (e.g., "%{text:.1f}%", "%{text:.2%}", "%{text:,.0f}")
+ * @param index Optional index for array-based templates
+ * @returns Formatted text string
+ *
+ * Examples:
+ * - "%{text:.1f}%" → Formats number with 1 decimal place and adds % suffix
+ * - "%{text:.2%}" → Formats as percentage with 2 decimal places
+ * - "%{text:,.0f}" → Formats with thousands separator and no decimals
+ * - "%{text:$,.2f}" → Formats as currency with thousands separator and 2 decimals
+ */ const formatTextWithTemplate = (textValue, textTemplate, index)=>{
+    if (!textTemplate) {
+        return String(textValue);
+    }
+    const numVal = typeof textValue === 'number' ? textValue : parseFloat(String(textValue));
+    if (isNaN(numVal)) {
+        return String(textValue);
+    }
+    const template = typeof textTemplate === 'string' ? textTemplate : textTemplate[index || 0] || '';
+    // Match Plotly's texttemplate pattern: %{text:format} or %{text}
+    // Can be followed by any literal text like %, $, etc.
+    const plotlyPattern = /%\{text(?::([^}]+))?\}(.*)$/;
+    const match = template.match(plotlyPattern);
+    if (match) {
+        const formatSpec = match[1]; // The format specifier (e.g., ".1f", ".2%", ",.0f") or undefined
+        const suffix = match[2]; // Any text after the closing brace (e.g., "%", " units")
+        // If no format specifier is provided (e.g., %{text}%), try to infer from suffix
+        if (!formatSpec) {
+            // Check if suffix starts with % - assume simple percentage with 1 decimal
+            if (suffix.startsWith('%')) {
+                return `${numVal.toFixed(1)}${suffix}`;
+            }
+            // No format specifier, just return the number with the suffix
+            return `${numVal}${suffix}`;
+        }
+        try {
+            // Use D3 format function to apply the format specifier
+            const formatter = (0, _d3format.format)(formatSpec);
+            const formattedValue = formatter(numVal);
+            return `${formattedValue}${suffix}`;
+        } catch (error) {
+            // Try to extract precision for basic fallback
+            const precisionMatch = formatSpec.match(/\.(\d+)[f%]/);
+            const precision = precisionMatch ? parseInt(precisionMatch[1], 10) : 2;
+            // Check if it's a percentage format
+            if (formatSpec.includes('%')) {
+                return `${(numVal * 100).toFixed(precision)}%${suffix}`;
+            }
+            return `${numVal.toFixed(precision)}${suffix}`;
+        }
+    }
+    return String(textValue);
+};
 /**
  * Extracts unique X-axis categories from Plotly data traces
  * @param data Array of Plotly data traces
@@ -964,7 +1020,8 @@ const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayT
     const hideLabels = firstData.textinfo ? ![
         'value',
         'percent',
-        'label+percent'
+        'label+percent',
+        'percent+label'
     ].includes(firstData.textinfo) : false;
     const donutMarginHorizontal = hideLabels ? 0 : 80;
     const donutMarginVertical = 40 + (hideLabels ? 0 : 40);
@@ -997,14 +1054,15 @@ const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayT
         hideLabels,
         showLabelsInPercent: firstData.textinfo ? [
             'percent',
-            'label+percent'
+            'label+percent',
+            'percent+label'
         ].includes(firstData.textinfo) : true,
         roundCorners: true,
         order: 'sorted'
     };
 };
 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;
@@ -1024,6 +1082,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
         validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
+            const textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : typeof series.text === 'string' ? series.text : undefined;
             rangeXValues.forEach((x, index2)=>{
                 var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
                 if (!mapXToDataPoints[x]) {
@@ -1039,6 +1098,11 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
                 const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index2);
                 const yVal = rangeYValues[index2];
                 const yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
+                let barLabel = Array.isArray(textValues) ? textValues[index2] : textValues;
+                // Apply texttemplate formatting if specified
+                if (barLabel && series.texttemplate) {
+                    barLabel = formatTextWithTemplate(barLabel, series.texttemplate, index2);
+                }
                 if (series.type === 'bar') {
                     var _rgb_copy_formatHex8;
                     mapXToDataPoints[x].chartData.push({
@@ -1047,7 +1111,10 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
                         color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
                             opacity
                         }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
-                        yAxisCalloutData
+                        yAxisCalloutData,
+                        ...barLabel ? {
+                            barLabel: String(barLabel)
+                        } : {}
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -1156,7 +1223,6 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
         yMinValue,
         mode: 'plotly',
         ...secondaryYAxisValues,
-        wrapXAxisLables: typeof ((_vsbcData_ = vsbcData[0]) === null || _vsbcData_ === void 0 ? void 0 : _vsbcData_.xAxisPoint) === 'string',
         hideTickOverlap: true,
         barGapMax: 2,
         hideLegend,
@@ -1234,6 +1300,12 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
                     const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[xIndex % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedBarColors, xIndex, legend, colorMap, (_processedInput_layout = processedInput.layout) === null || _processedInput_layout === void 0 ? void 0 : (_processedInput_layout_template = _processedInput_layout.template) === null || _processedInput_layout_template === void 0 ? void 0 : (_processedInput_layout_template_layout = _processedInput_layout_template.layout) === null || _processedInput_layout_template_layout === void 0 ? void 0 : _processedInput_layout_template_layout.colorway, isDarkTheme);
                     const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, xIndex);
                     const yVal = series.y[xIndex];
+                    // Extract text value for barLabel
+                    let barLabel = Array.isArray(series.text) ? series.text[xIndex] : series.text;
+                    // Apply texttemplate formatting if specified
+                    if (barLabel && series.texttemplate) {
+                        barLabel = formatTextWithTemplate(barLabel, series.texttemplate, xIndex);
+                    }
                     var _rgb_copy_formatHex8;
                     return {
                         x: x.toString(),
@@ -1241,7 +1313,10 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
                         yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
                         color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
                             opacity
-                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
+                        ...barLabel ? {
+                            barLabel: String(barLabel)
+                        } : {}
                     };
                 }).filter((item)=>typeof item !== 'undefined'),
                 useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout)
@@ -1292,7 +1367,6 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        wrapXAxisLables: true,
         hideLegend,
         roundCorners: true,
         showYAxisLables: true,
@@ -1311,7 +1385,7 @@ const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayTy
     };
 };
 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;
@@ -1358,6 +1432,11 @@ const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayTyp
             const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
             const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
+            // Handle text values and texttemplate formatting for histogram bins
+            let barLabel = Array.isArray(series.text) ? series.text[index] : series.text;
+            if (barLabel && series.texttemplate) {
+                barLabel = formatTextWithTemplate(barLabel, series.texttemplate, index);
+            }
             var _rgb_copy_formatHex8;
             vbcData.push({
                 x: isXString ? bin.join(', ') : getBinCenter(bin),
@@ -1368,7 +1447,10 @@ const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayTyp
                 }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                 ...isXString ? {} : {
                     xAxisCalloutData: `[${bin.x0} - ${bin.x1})`
-                }
+                },
+                ...barLabel ? {
+                    barLabel: String(barLabel)
+                } : {}
             });
         });
     });
@@ -1380,7 +1462,6 @@ const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayTyp
         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,
@@ -1443,9 +1524,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;
@@ -1604,7 +1683,6 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         hideTickOverlap: true,
         hideLegend,
         useUTC: false,
-        wrapXAxisLabels: shouldWrapLabels,
         optimizeLargeData: numDataPoints > 1000,
         showYAxisLables: true,
         roundedTicks: true,
@@ -1785,11 +1863,53 @@ const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMap, colo
     };
 };
 const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_layout, _input_layout_coloraxis, _input_layout1, _input_layout_template_layout, _input_layout_template, _input_layout2, _input_layout_template_data_histogram2d_, _input_layout_template_data_histogram2d, _input_layout_template_data, _input_layout_template1, _input_layout3, _input_layout_template_data_heatmap_, _input_layout_template_data_heatmap, _input_layout_template_data1, _input_layout_template2, _input_layout4, _input_layout5, _input_layout6;
+    var _input_layout, _input_layout1, _input_layout_coloraxis, _input_layout2, _input_layout_template_layout, _input_layout_template, _input_layout3, _input_layout_template_data_histogram2d_, _input_layout_template_data_histogram2d, _input_layout_template_data, _input_layout_template1, _input_layout4, _input_layout_template_data_heatmap_, _input_layout_template_data_heatmap, _input_layout_template_data1, _input_layout_template2, _input_layout5, _input_layout6, _input_layout7;
     const firstData = input.data[0];
     const heatmapDataPoints = [];
     let zMin = Number.POSITIVE_INFINITY;
     let zMax = Number.NEGATIVE_INFINITY;
+    // Build a 2D array of annotations based on their grid position
+    const annotationGrid = [];
+    const rawAnnotations = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.annotations;
+    if (rawAnnotations) {
+        const annotationsArray = Array.isArray(rawAnnotations) ? rawAnnotations : [
+            rawAnnotations
+        ];
+        // Collect all unique x and y values from valid annotations
+        const xSet = new Set();
+        const ySet = new Set();
+        const validAnnotations = [];
+        annotationsArray.forEach((a)=>{
+            if (a && typeof a.x === 'number' && typeof a.y === 'number' && typeof a.text === 'string' && (a.xref === 'x' || a.xref === undefined) && (a.yref === 'y' || a.yref === undefined)) {
+                xSet.add(a.x);
+                ySet.add(a.y);
+                validAnnotations.push({
+                    x: a.x,
+                    y: a.y,
+                    text: cleanText(a.text)
+                });
+            }
+        });
+        if (validAnnotations.length > 0) {
+            // Get sorted unique x and y values
+            const xValues = Array.from(xSet).sort((a, b)=>a - b);
+            const yValues = Array.from(ySet).sort((a, b)=>a - b);
+            // Initialize 2D grid and populate
+            validAnnotations.forEach((annotation)=>{
+                const xIdx = xValues.indexOf(annotation.x);
+                const yIdx = yValues.indexOf(annotation.y);
+                if (!annotationGrid[yIdx]) {
+                    annotationGrid[yIdx] = [];
+                }
+                annotationGrid[yIdx][xIdx] = annotation.text;
+            });
+        }
+    }
+    // Helper function to get annotation from 2D grid by index
+    const getAnnotationByIndex = (xIdx, yIdx)=>{
+        var _annotationGrid_yIdx;
+        return (_annotationGrid_yIdx = annotationGrid[yIdx]) === null || _annotationGrid_yIdx === void 0 ? void 0 : _annotationGrid_yIdx[xIdx];
+    };
     if (firstData.type === 'histogram2d') {
         var _firstData_x, _firstData_xbins, _firstData_xbins1, _firstData_xbins2, _firstData_ybins, _firstData_ybins1, _firstData_ybins2;
         const xValues = [];
@@ -1829,11 +1949,12 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
         xBins.forEach((xBin, xIdx)=>{
             yBins.forEach((yBin, yIdx)=>{
                 const zVal = calculateHistNorm(firstData.histnorm, z[yIdx][xIdx], total, isXString ? xBin.length : getBinSize(xBin), isYString ? yBin.length : getBinSize(yBin));
+                const annotationText = getAnnotationByIndex(xIdx, yIdx);
                 heatmapDataPoints.push({
                     x: isXString ? xBin.join(', ') : getBinCenter(xBin),
                     y: isYString ? yBin.join(', ') : getBinCenter(yBin),
                     value: zVal,
-                    rectText: zVal
+                    rectText: annotationText || zVal
                 });
                 if (typeof zVal === 'number') {
                     zMin = Math.min(zMin, zVal);
@@ -1842,17 +1963,34 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
             });
         });
     } else {
-        var _firstData_x1;
-        (_firstData_x1 = firstData.x) === null || _firstData_x1 === void 0 ? void 0 : _firstData_x1.forEach((xVal, xIdx)=>{
-            var _firstData_y;
-            (_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y.forEach((yVal, yIdx)=>{
-                var _firstData_z_yIdx, _firstData_z, _input_layout_xaxis, _input_layout, _input_layout_yaxis, _input_layout1;
-                const zVal = (_firstData_z = firstData.z) === null || _firstData_z === void 0 ? void 0 : (_firstData_z_yIdx = _firstData_z[yIdx]) === null || _firstData_z_yIdx === void 0 ? void 0 : _firstData_z_yIdx[xIdx];
+        var _zArray_;
+        // If x and y are not provided, generate indices based on z dimensions
+        const zArray = firstData.z;
+        const xValues = firstData.x;
+        const yValues = firstData.y;
+        var _zArray_length;
+        // Determine the dimensions from z array
+        const yLength = (_zArray_length = zArray === null || zArray === void 0 ? void 0 : zArray.length) !== null && _zArray_length !== void 0 ? _zArray_length : 0;
+        var _zArray__length;
+        const xLength = (_zArray__length = zArray === null || zArray === void 0 ? void 0 : (_zArray_ = zArray[0]) === null || _zArray_ === void 0 ? void 0 : _zArray_.length) !== null && _zArray__length !== void 0 ? _zArray__length : 0;
+        // Use provided x/y values or generate indices
+        const xData = xValues !== null && xValues !== void 0 ? xValues : Array.from({
+            length: xLength
+        }, (_, i)=>i);
+        const yData = yValues !== null && yValues !== void 0 ? yValues : Array.from({
+            length: yLength
+        }, (_, i)=>yLength - 1 - i);
+        xData.forEach((xVal, xIdx)=>{
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            yData.forEach((yVal, yIdx)=>{
+                var _zArray_yIdx, _input_layout_xaxis, _input_layout, _input_layout_yaxis, _input_layout1;
+                const zVal = zArray === null || zArray === void 0 ? void 0 : (_zArray_yIdx = zArray[yIdx]) === null || _zArray_yIdx === void 0 ? void 0 : _zArray_yIdx[xIdx];
+                const annotationText = getAnnotationByIndex(xIdx, yIdx);
                 heatmapDataPoints.push({
                     x: ((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_xaxis = _input_layout.xaxis) === null || _input_layout_xaxis === void 0 ? void 0 : _input_layout_xaxis.type) === 'date' ? xVal : xVal !== null && xVal !== void 0 ? xVal : 0,
                     y: ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_yaxis = _input_layout1.yaxis) === null || _input_layout_yaxis === void 0 ? void 0 : _input_layout_yaxis.type) === 'date' ? yVal : yVal,
                     value: zVal,
-                    rectText: zVal
+                    rectText: annotationText || zVal
                 });
                 if (typeof zVal === 'number') {
                     zMin = Math.min(zMin, zVal);
@@ -1879,7 +2017,7 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
         (0, _colors.getColorFromToken)(_colors.DataVizPalette.color3)
     ];
     var _firstData_colorscale, _ref, _ref1, _ref2, _ref3;
-    let colorscale = (_ref3 = (_ref2 = (_ref1 = (_ref = (_firstData_colorscale = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _firstData_colorscale !== void 0 ? _firstData_colorscale : (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.colorscale) !== null && _ref !== void 0 ? _ref : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout1.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : _input_layout_coloraxis.colorscale) !== null && _ref1 !== void 0 ? _ref1 : (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_template = _input_layout2.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorscale) !== null && _ref2 !== void 0 ? _ref2 : firstData.type === 'histogram2d' && ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_template1 = _input_layout3.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_data = _input_layout_template1.data) === null || _input_layout_template_data === void 0 ? void 0 : (_input_layout_template_data_histogram2d = _input_layout_template_data.histogram2d) === null || _input_layout_template_data_histogram2d === void 0 ? void 0 : (_input_layout_template_data_histogram2d_ = _input_layout_template_data_histogram2d[0]) === null || _input_layout_template_data_histogram2d_ === void 0 ? void 0 : _input_layout_template_data_histogram2d_.colorscale)) !== null && _ref3 !== void 0 ? _ref3 : (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_template2 = _input_layout4.template) === null || _input_layout_template2 === void 0 ? void 0 : (_input_layout_template_data1 = _input_layout_template2.data) === null || _input_layout_template_data1 === void 0 ? void 0 : (_input_layout_template_data_heatmap = _input_layout_template_data1.heatmap) === null || _input_layout_template_data_heatmap === void 0 ? void 0 : (_input_layout_template_data_heatmap_ = _input_layout_template_data_heatmap[0]) === null || _input_layout_template_data_heatmap_ === void 0 ? void 0 : _input_layout_template_data_heatmap_.colorscale;
+    let colorscale = (_ref3 = (_ref2 = (_ref1 = (_ref = (_firstData_colorscale = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _firstData_colorscale !== void 0 ? _firstData_colorscale : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.colorscale) !== null && _ref !== void 0 ? _ref : (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout2.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : _input_layout_coloraxis.colorscale) !== null && _ref1 !== void 0 ? _ref1 : (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_template = _input_layout3.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorscale) !== null && _ref2 !== void 0 ? _ref2 : firstData.type === 'histogram2d' && ((_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_template1 = _input_layout4.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_data = _input_layout_template1.data) === null || _input_layout_template_data === void 0 ? void 0 : (_input_layout_template_data_histogram2d = _input_layout_template_data.histogram2d) === null || _input_layout_template_data_histogram2d === void 0 ? void 0 : (_input_layout_template_data_histogram2d_ = _input_layout_template_data_histogram2d[0]) === null || _input_layout_template_data_histogram2d_ === void 0 ? void 0 : _input_layout_template_data_histogram2d_.colorscale)) !== null && _ref3 !== void 0 ? _ref3 : (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_template2 = _input_layout5.template) === null || _input_layout_template2 === void 0 ? void 0 : (_input_layout_template_data1 = _input_layout_template2.data) === null || _input_layout_template_data1 === void 0 ? void 0 : (_input_layout_template_data_heatmap = _input_layout_template_data1.heatmap) === null || _input_layout_template_data_heatmap === void 0 ? void 0 : (_input_layout_template_data_heatmap_ = _input_layout_template_data_heatmap[0]) === null || _input_layout_template_data_heatmap_ === void 0 ? void 0 : _input_layout_template_data_heatmap_.colorscale;
     // determine if the types diverging, sequential or sequentialminus are present in colorscale
     if (colorscale && typeof colorscale === 'object' && ('diverging' in colorscale || 'sequential' in colorscale || 'sequentialminus' in colorscale)) {
         const isDivergent = zMin < 0 && zMax > 0; // Data spans both positive and negative values
@@ -1905,12 +2043,11 @@ const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwa
         hideLegend: true,
         showYAxisLables: true,
         sortOrder: 'none',
-        width: (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.width,
-        height: (_input_layout_height = (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
+        width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
+        height: (_input_layout_height = (_input_layout7 = input.layout) === null || _input_layout7 === void 0 ? void 0 : _input_layout7.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        wrapXAxisLables: true,
         ...getTitles(input.layout),
         ...getAxisCategoryOrderProps([
             firstData
@@ -2755,7 +2892,10 @@ const isNonPlotType = (chartType)=>{
         'donut',
         'sankey',
         'pie',
-        'annotation'
+        'annotation',
+        'table',
+        'gauge',
+        'funnel'
     ].includes(chartType);
 };
 const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
@@ -3018,16 +3158,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') && (0, _chartutilities.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
                 };
             }
@@ -3038,11 +3185,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
                 };