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/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

@@ -217,6 +217,62 @@ export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNum
     }
     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 = d3Format(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
@@ -873,7 +929,8 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     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);
@@ -906,14 +963,15 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
         hideLabels,
         showLabelsInPercent: firstData.textinfo ? [
             'percent',
-            'label+percent'
+            'label+percent',
+            'percent+label'
         ].includes(firstData.textinfo) : true,
         roundCorners: true,
         order: 'sorted'
     };
 };
 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;
@@ -933,6 +991,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         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]) {
@@ -948,6 +1007,11 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                 const opacity = 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({
@@ -956,7 +1020,10 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                         color: (_rgb_copy_formatHex8 = 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);
@@ -1065,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,
@@ -1143,6 +1209,12 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
                     const color = colorScale ? colorScale(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) : 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 = 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(),
@@ -1150,7 +1222,10 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
                         yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
                         color: (_rgb_copy_formatHex8 = 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)
@@ -1201,7 +1276,6 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        wrapXAxisLables: true,
         hideLegend,
         roundCorners: true,
         showYAxisLables: true,
@@ -1220,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;
@@ -1267,6 +1341,11 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
             const color = colorScale ? colorScale(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) : 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 = 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),
@@ -1277,7 +1356,10 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
                 }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                 ...isXString ? {} : {
                     xAxisCalloutData: `[${bin.x0} - ${bin.x1})`
-                }
+                },
+                ...barLabel ? {
+                    barLabel: String(barLabel)
+                } : {}
             });
         });
     });
@@ -1289,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,
@@ -1352,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;
@@ -1513,7 +1592,6 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         hideTickOverlap: true,
         hideLegend,
         useUTC: false,
-        wrapXAxisLabels: shouldWrapLabels,
         optimizeLargeData: numDataPoints > 1000,
         showYAxisLables: true,
         roundedTicks: true,
@@ -1694,11 +1772,53 @@ export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMa
     };
 };
 export 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 = [];
@@ -1738,11 +1858,12 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         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);
@@ -1751,18 +1872,34 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
             });
         });
     } else {
-        var _firstData_x1;
-        (_firstData_x1 = firstData.x) === null || _firstData_x1 === void 0 ? void 0 : _firstData_x1.forEach((xVal, xIdx)=>{
-            var // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            _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);
@@ -1789,7 +1926,7 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         getColorFromToken(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
@@ -1815,12 +1952,11 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         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
@@ -2670,7 +2806,10 @@ export const isNonPlotType = (chartType)=>{
         'donut',
         'sankey',
         'pie',
-        'annotation'
+        'annotation',
+        'table',
+        'gauge',
+        'funnel'
     ].includes(chartType);
 };
 export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
@@ -2933,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
                 };
             }
@@ -2953,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
                 };