@fluentui/react-charts 0.0.0-nightly-20250728-0406.1 → 0.0.0-nightly-20250730-0406.1

package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VerticalBarChart.types.ts"],"sourcesContent":["import { RenderFunction } from '../../utilities/index';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  VerticalBarChartDataPoint,\n} from '../../index';\nimport { LineChartLineOptions } from '../../types/index';\n\n/**\n * Vertical Bar Chart properties\n * {@docCategory VerticalBarChart}\n */\nexport interface VerticalBarChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: VerticalBarChartDataPoint[];\n\n  /**\n   * Define a custom callout renderer for a data point.\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<VerticalBarChartDataPoint>;\n\n  /**\n   * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px,\n   * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values.\n   * @default 16\n   */\n  barWidth?: number | 'default' | 'auto';\n\n  /**\n   * Colors from which to select the color of each bar.\n   */\n  colors?: string[];\n\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Legend text for the line datapoint in the chart\n   */\n  lineLegendText?: string;\n\n  /**\n   * color for the legend  of the line in the chart\n   * @default theme.yellow\n   */\n\n  lineLegendColor?: string;\n\n  /**\n   * This prop makes sure that all the bars are of same color.\n   * it will take the first color from the array of colors in\n   * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight\n   * @default false\n   */\n  useSingleColor?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: Partial<VerticalBarChartStyles>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: LineChartLineOptions;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Maximum width of a bar, in pixels.\n   * @default 24\n   */\n  maxBarWidth?: number;\n\n  /**\n   * Padding between bars as a fraction of the [step](https://d3js.org/d3-scale/band#band_step).\n   * Takes a number in the range [0, 1]. Only applicable to string x-axis.\n   * @default 2/3\n   */\n  xAxisInnerPadding?: number;\n\n  /**\n   * Padding before the first bar and after the last bar as a fraction of\n   * the [step](https://d3js.org/d3-scale/band#band_step). Takes a number in the range [0, 1].\n   * Only applicable to string x-axis.\n   */\n  xAxisOuterPadding?: number;\n\n  /**\n   * @default false\n   * The prop used to enable gradient fill color for the chart.\n   */\n  enableGradient?: boolean;\n\n  /**\n   * @default false\n   * The prop used to enable rounded corners for the chart.\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Specifies the mode of the chart.\n   * @default 'default'\n   */\n  mode?: 'default' | 'plotly';\n}\n\n/**\n * Vertical Bar Chart style properties\n * {@docCategory VerticalBarChart}\n */\nexport interface VerticalBarChartStyleProps extends CartesianChartStyleProps {\n  /**\n   * color of the datapoint legend\n   */\n  legendColor?: string;\n}\n\n/**\n * Vertical Bar Chart styles\n * {@docCategory VerticalBarChart}\n */\nexport interface VerticalBarChartStyles extends CartesianChartStyles {\n  /**\n   * Style for the bar labels\n   */\n  barLabel: string;\n\n  /**\n   * Styles for line border\n   */\n  lineBorder: string;\n}\n"],"names":[],"rangeMappings":";;;","mappings":"AAyIA;;;CAGC"}
+{"version":3,"sources":["../src/components/VerticalBarChart/VerticalBarChart.types.ts"],"sourcesContent":["import { RenderFunction } from '../../utilities/index';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  VerticalBarChartDataPoint,\n} from '../../index';\nimport { LineChartLineOptions } from '../../types/index';\n\n/**\n * Vertical Bar Chart properties\n * {@docCategory VerticalBarChart}\n */\nexport interface VerticalBarChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: VerticalBarChartDataPoint[];\n\n  /**\n   * Define a custom callout renderer for a data point.\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<VerticalBarChartDataPoint>;\n\n  /**\n   * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px,\n   * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values.\n   * @default 16\n   */\n  barWidth?: number | 'default' | 'auto';\n\n  /**\n   * Colors from which to select the color of each bar.\n   */\n  colors?: string[];\n\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Legend text for the line datapoint in the chart\n   */\n  lineLegendText?: string;\n\n  /**\n   * color for the legend  of the line in the chart\n   * @default theme.yellow\n   */\n\n  lineLegendColor?: string;\n\n  /**\n   * This prop makes sure that all the bars are of same color.\n   * it will take the first color from the array of colors in\n   * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight\n   * @default false\n   */\n  useSingleColor?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: Partial<VerticalBarChartStyles>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: LineChartLineOptions;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Maximum width of a bar, in pixels.\n   * @default 24\n   */\n  maxBarWidth?: number;\n\n  /**\n   * Padding between bars as a fraction of the [step](https://d3js.org/d3-scale/band#band_step).\n   * Takes a number in the range [0, 1]. Only applicable to string x-axis.\n   * @default 2/3\n   */\n  xAxisInnerPadding?: number;\n\n  /**\n   * Padding before the first bar and after the last bar as a fraction of\n   * the [step](https://d3js.org/d3-scale/band#band_step). Takes a number in the range [0, 1].\n   * Only applicable to string x-axis.\n   */\n  xAxisOuterPadding?: number;\n\n  /**\n   * @default false\n   * The prop used to enable gradient fill color for the chart.\n   */\n  enableGradient?: boolean;\n\n  /**\n   * @default false\n   * The prop used to enable rounded corners for the chart.\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Specifies the mode of the chart.\n   * @default 'default'\n   */\n  mode?: 'default' | 'plotly' | 'histogram';\n}\n\n/**\n * Vertical Bar Chart style properties\n * {@docCategory VerticalBarChart}\n */\nexport interface VerticalBarChartStyleProps extends CartesianChartStyleProps {\n  /**\n   * color of the datapoint legend\n   */\n  legendColor?: string;\n}\n\n/**\n * Vertical Bar Chart styles\n * {@docCategory VerticalBarChart}\n */\nexport interface VerticalBarChartStyles extends CartesianChartStyles {\n  /**\n   * Style for the bar labels\n   */\n  barLabel: string;\n\n  /**\n   * Styles for line border\n   */\n  lineBorder: string;\n}\n"],"names":[],"mappings":"AAyIA;;;CAGC,GACD,WAUC"}

package/lib-commonjs/components/VerticalBarChart/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './VerticalBarChart';\nexport * from './VerticalBarChart.types';\nexport * from '../../types/index';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/VerticalBarChart/index.ts"],"sourcesContent":["export * from './VerticalBarChart';\nexport * from './VerticalBarChart.types';\nexport * from '../../types/index';\n"],"names":[],"mappings":";;;;;uBAAc,qBAAqB;uBACrB,2BAA2B;uBAC3B,oBAAoB"}

package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js

@@ -124,4 +124,4 @@ const useVerticalBarChartStyles = (props)=>{
         barLabel: (0, _react.mergeClasses)(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ ),
         lineBorder: (0, _react.mergeClasses)(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )
     };
-}; //# sourceMappingURL=useVerticalBarChartStyles.styles.js.map
+};

package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\nexport const verticalbarchartClassNames = {\n    opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',\n    tooltip: 'fui-vbc__tooltip',\n    barLabel: 'fui-vbc__barLabel',\n    lineBorder: 'fui-vbc_lineBorder',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {},\n    tooltip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    },\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useVerticalBarChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(verticalbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ ),\n        lineBorder: mergeClasses(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )\n    };\n};\n"],"names":["useVerticalBarChartStyles","verticalbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Bvjb7m6","ojy3ng","Bpvj6i6","d","p","m","props","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiDiBA,yBAAyB;eAAzBA;;IA9CJC,0BAA0B;eAA1BA;;;uBAHwC;AAG9C,MAAMA,6BAA6B;IACtCC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACX;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAjB,sBAAA,CAAA;IAAAC,SAAA;QAAAiB,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAnC,UAAA;QAAAgB,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAU,SAAA;QAAAO,SAAA;IAAA;IAAAnC,YAAA;QAAAoC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AA4BP,MAAM7C,4BAA6B8C,CAAAA;IAC1C,MAAMC,aAAa7B;IACnB,OAAO;QACHhB,sBAAsB8C,IAAAA,mBAAY,EAAC/C,2BAA2BC,oBAAoB,EAAE6C,WAAW7C,oBAAoB,CAAC,oCAAA;QACpHC,SAAS6C,IAAAA,mBAAY,EAAC/C,2BAA2BE,OAAO,EAAE4C,WAAW5C,OAAO,CAAC,uBAAA;QAC7EC,UAAU4C,IAAAA,mBAAY,EAAC/C,2BAA2BG,QAAQ,EAAE2C,WAAW3C,QAAQ,CAAC,wBAAA;QAChFC,YAAY2C,IAAAA,mBAAY,EAAC/C,2BAA2BI,UAAU,EAAE0C,WAAW1C,UAAU,CAAC,0BAAA;IAC1F;AACJ"}
+{"version":3,"sources":["useVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\nexport const verticalbarchartClassNames = {\n    opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',\n    tooltip: 'fui-vbc__tooltip',\n    barLabel: 'fui-vbc__barLabel',\n    lineBorder: 'fui-vbc_lineBorder',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {},\n    tooltip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    },\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useVerticalBarChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(verticalbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ ),\n        lineBorder: mergeClasses(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","verticalbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Bvjb7m6","ojy3ng","Bpvj6i6","d","p","m","useVerticalBarChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;6BAiD0C;;;IA9C7BM,0BAA0B;;;;uBAHc,gBAAgB;AAG9D,mCAAmC;IACtCC,oBAAoB,EAAE,+BAA+B;IACrDC,OAAO,EAAE,kBAAkB;IAC3BC,QAAQ,EAAE,mBAAmB;IAC7BC,UAAU,EAAE,oBAAoB;IAChCC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,GAAGvB,mBAAA,EAAA;IAAAO,oBAAA,EAAA,CAAA;IAAAC,OAAA,EAAA;QAAAgB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAlC,QAAA,EAAA;QAAAe,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAU,OAAA,EAAA;QAAAO,OAAA,EAAA;IAAA;IAAAlC,UAAA,EAAA;QAAAmC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAyBjB,CAAC;AAGS,MAAMC,6BAA6BC,KAAK,IAAG;IAClD,MAAMC,UAAU,GAAG7B,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHhB,oBAAoB,MAAEN,mBAAY,EAACK,0BAA0B,CAACC,oBAAoB,EAAE6C,UAAU,CAAC7C,oBAAoB,CAAC,oCAAA,EAAuC,CAAC;QAC5JC,OAAO,MAAEP,mBAAY,EAACK,0BAA0B,CAACE,OAAO,EAAE4C,UAAU,CAAC5C,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACxGC,QAAQ,MAAER,mBAAY,EAACK,0BAA0B,CAACG,QAAQ,EAAE2C,UAAU,CAAC3C,QAAQ,CAAC,wBAAA,EAA2B,CAAC;QAC5GC,UAAU,MAAET,mBAAY,EAACK,0BAA0B,CAACI,UAAU,EAAE0C,UAAU,CAAC1C,UAAU,CAAC,0BAAA,EAA6B;IACvH,CAAC;AACL,CAAC"}

package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useVerticalBarChartStyles: function() {
+        return useVerticalBarChartStyles;
+    },
+    verticalbarchartClassNames: function() {
+        return verticalbarchartClassNames;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _utilities = require("../../utilities/utilities");
+const verticalbarchartClassNames = {
+    opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',
+    tooltip: 'fui-vbc__tooltip',
+    barLabel: 'fui-vbc__barLabel',
+    lineBorder: 'fui-vbc_lineBorder',
+    root: '',
+    xAxis: '',
+    yAxis: '',
+    legendContainer: '',
+    hover: '',
+    descriptionMessage: '',
+    axisTitle: '',
+    chartTitle: '',
+    shapeStyles: '',
+    chartWrapper: '',
+    svgTooltip: '',
+    chart: ''
+};
+const useStyles = (0, _react.makeStyles)({
+    opacityChangeOnHover: {},
+    tooltip: {
+        ..._reacttheme.typographyStyles.body1,
+        display: 'flex',
+        flexDirection: 'column',
+        ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
+        position: 'absolute',
+        textAlign: 'center',
+        top: _reacttheme.tokens.spacingVerticalNone,
+        fill: _reacttheme.tokens.colorNeutralBackground1,
+        borderRadius: _reacttheme.tokens.borderRadiusSmall,
+        pointerEvents: 'none'
+    },
+    barLabel: {
+        ..._reacttheme.typographyStyles.caption1Strong,
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        forcedColorAdjust: 'auto'
+    },
+    lineBorder: {
+        stroke: _reacttheme.tokens.colorNeutralBackground1,
+        [_utilities.HighContrastSelector]: {
+            stroke: 'Canvas'
+        }
+    }
+});
+const useVerticalBarChartStyles = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        opacityChangeOnHover: (0, _react.mergeClasses)(verticalbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),
+        tooltip: (0, _react.mergeClasses)(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),
+        barLabel: (0, _react.mergeClasses)(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ ),
+        lineBorder: (0, _react.mergeClasses)(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )
+    };
+};

package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/VerticalBarChart/useVerticalBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { VerticalBarChartProps, VerticalBarChartStyles } from '../../index';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\n\nexport const verticalbarchartClassNames: SlotClassNames<VerticalBarChartStyles> = {\n  opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',\n  tooltip: 'fui-vbc__tooltip',\n  barLabel: 'fui-vbc__barLabel',\n  lineBorder: 'fui-vbc_lineBorder',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n};\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {},\n  tooltip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    fill: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  barLabel: {\n    ...typographyStyles.caption1Strong,\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useVerticalBarChartStyles = (props: VerticalBarChartProps): VerticalBarChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(\n      verticalbarchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    tooltip: mergeClasses(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    barLabel: mergeClasses(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/),\n    lineBorder: mergeClasses(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","verticalbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","caption1Strong","colorNeutralForeground1","forcedColorAdjust","stroke","useVerticalBarChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;6BAsDa0C;;;IAhDApC,0BAAAA;;;;uBANwC,iBAAiB;4BAG7B,wBAAwB;2BAC5B,4BAA4B;AAE1D,mCAA2E;IAChFC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,YAAY;IACZC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AACF,MAAMC,gBAAYvB,iBAAAA,EAAW;IAC3BO,sBAAsB,CAAC;IACvBC,SAAS;QACP,GAAGJ,4BAAAA,CAAiBoB,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGxB,iBAAAA,CAAWyB,OAAO,CAACxB,kBAAAA,CAAOyB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK5B,kBAAAA,CAAO6B,mBAAmB;QAC/BC,MAAM9B,kBAAAA,CAAO+B,uBAAuB;QACpCC,cAAchC,kBAAAA,CAAOiC,iBAAiB;QACtCC,eAAe;IACjB;IACA5B,UAAU;QACR,GAAGL,4BAAAA,CAAiBkC,cAAc;QAClCL,MAAM9B,kBAAAA,CAAOoC,uBAAuB;QACpCC,mBAAmB;IACrB;IACA9B,YAAY;QACV+B,QAAQtC,kBAAAA,CAAO+B,uBAAuB;QACtC,CAAC7B,+BAAAA,CAAqB,EAAE;YACtBoC,QAAQ;QACV;IACF;AACF;AAKO,MAAMC,4BAA4B,CAACC;IACxC,MAAMC,aAAarB;IAEnB,OAAO;QACLhB,0BAAsBN,mBAAAA,EACpBK,2BAA2BC,oBAAoB,EAC/CqC,WAAWrC,oBAAoB,CAAC,oCAAoC;QAEtEC,aAASP,mBAAAA,EAAaK,2BAA2BE,OAAO,EAAEoC,WAAWpC,OAAO,CAAC,uBAAuB;QACpGC,cAAUR,mBAAAA,EAAaK,2BAA2BG,QAAQ,EAAEmC,WAAWnC,QAAQ,CAAC,wBAAwB;QACxGC,gBAAYT,mBAAAA,EAAaK,2BAA2BI,UAAU,EAAEkC,WAAWlC,UAAU,CAAC,0BAA0B;IAClH;AACF,EAAE"}

package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -21,11 +21,11 @@ const _index1 = require("../../utilities/index");
 const barGapMultiplier = 0.2;
 const barGapMin = 1;
 const MIN_DOMAIN_MARGIN = 8;
-var CircleVisbility;
-(function(CircleVisbility) {
+var CircleVisbility = /*#__PURE__*/ function(CircleVisbility) {
     CircleVisbility["show"] = "visibility";
     CircleVisbility["hide"] = "hidden";
-})(CircleVisbility || (CircleVisbility = {}));
+    return CircleVisbility;
+}(CircleVisbility || {});
 const VerticalStackedBarChart = (props)=>{
     var _props_legendProps;
     const _isRtl = (0, _index1.useRtl)();
@@ -232,7 +232,7 @@ const VerticalStackedBarChart = (props)=>{
         _colors = defaultColors;
         _xAxisType = (0, _index1.getTypeOfAxis)(props.data[0].xAxisPoint, true);
         _lineObject = _getFormattedLineData(props.data);
-        _xAxisInnerPadding = (0, _index1.getScalePadding)(props.xAxisInnerPadding, props.xAxisPadding, 2 / 3);
+        _xAxisInnerPadding = (0, _index1.getScalePadding)(props.xAxisInnerPadding, props.xAxisPadding, _xAxisType === _index1.XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
         _xAxisOuterPadding = (0, _index1.getScalePadding)(props.xAxisOuterPadding, props.xAxisPadding, 0);
     }
     function _createDataSetLayer() {
@@ -607,10 +607,13 @@ const VerticalStackedBarChart = (props)=>{
             ] : [
                 xMin,
                 xMax
-            ]).nice().range([
+            ]).range([
                 _margins.left + _domainMargin,
                 containerWidth - _margins.right - _domainMargin
             ]);
+            if (!(0, _index1.isScalePaddingDefined)(props.xAxisInnerPadding, props.xAxisPadding)) {
+                xBarScale.nice();
+            }
             return {
                 xBarScale,
                 yBarScale
@@ -692,16 +695,19 @@ const VerticalStackedBarChart = (props)=>{
                 const barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, bandwidth);
                 let reqWidth = (_xAxisLabels.length + (_xAxisLabels.length - 1) * barGapRate) * barWidth;
                 const margin1 = (totalWidth - reqWidth) / 2;
-                // Calculate the remaining width after accounting for the space required to render x-axis labels
-                const step = (0, _index1.calculateLongestLabelWidth)(_xAxisLabels) + 20;
-                reqWidth = (_xAxisLabels.length - _xAxisInnerPadding) * step;
-                const margin2 = (totalWidth - reqWidth) / 2;
+                let margin2 = Number.POSITIVE_INFINITY;
+                if (!props.hideTickOverlap) {
+                    // Calculate the remaining width after accounting for the space required to render x-axis labels
+                    const step = (0, _index1.calculateLongestLabelWidth)(_xAxisLabels) + 20;
+                    reqWidth = (_xAxisLabels.length - _xAxisInnerPadding) * step;
+                    margin2 = (totalWidth - reqWidth) / 2;
+                }
                 _domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
             }
         } else {
             var _props_data;
             const data = ((_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.map((point)=>point.xAxisPoint)) || [];
-            _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, (0, _index1.calculateAppropriateBarWidth)(data, totalWidth));
+            _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, (0, _index1.calculateAppropriateBarWidth)(data, totalWidth, _xAxisInnerPadding));
             _domainMargin = MIN_DOMAIN_MARGIN + _barWidth / 2;
         }
         return {
@@ -953,6 +959,7 @@ const VerticalStackedBarChart = (props)=>{
                 xAxisOuterPadding: _xAxisOuterPadding
             },
             componentRef: cartesianChartRef,
+            showRoundOffXTickValues: !(0, _index1.isScalePaddingDefined)(props.xAxisInnerPadding, props.xAxisPadding),
             /* eslint-disable react/jsx-no-bind */ children: (props)=>{
                 return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("g", null, _bars), /*#__PURE__*/ _react.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
             }