@fluentui/react-charts 9.2.1 → 9.2.3

package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js

@@ -19,6 +19,7 @@ _export(exports, {
 const _react = require("@griffel/react");
 const scatterChartClassNames = {
     tooltip: 'fui-line__tooltip',
+    markerLabel: 'fui-line__markerLabel',
     root: 'fui-line__root',
     xAxis: 'fui-line__xAxis',
     yAxis: 'fui-line__yAxis',
@@ -31,7 +32,8 @@ const scatterChartClassNames = {
     shapeStyles: 'fui-line__shapeStyles',
     chartWrapper: 'fui-line__chartWrapper',
     svgTooltip: '',
-    chart: ''
+    chart: '',
+    axisAnnotation: ''
 };
 /**
  * Base Styles
@@ -59,6 +61,15 @@ const scatterChartClassNames = {
         B7oj6ja: 0,
         Dimara: "fq9zq91",
         Bkecrkj: "f1aehjj5"
+    },
+    markerLabel: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        Bkfmm31: "fhuob2q",
+        jzqdnp: "fdxigdc",
+        a6j6cd: "folz2wl"
     }
 }, {
     d: [
@@ -78,12 +89,28 @@ const scatterChartClassNames = {
                 p: -1
             }
         ],
-        ".f1aehjj5{pointer-events:none;}"
+        ".f1aehjj5{pointer-events:none;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".fhuob2q{fill:var(--colorNeutralForeground1);}",
+        ".fdxigdc{text-anchor:middle;}"
+    ],
+    m: [
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ]
     ]
 });
 const useScatterChartStyles = (props)=>{
+    var _props_styles;
     const baseStyles = useStyles();
     return {
-        tooltip: (0, _react.mergeClasses)(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )
+        tooltip: (0, _react.mergeClasses)(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),
+        markerLabel: (0, _react.mergeClasses)(scatterChartClassNames.markerLabel, baseStyles.markerLabel, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.markerLabel)
     };
 };

package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useScatterChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const scatterChartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\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});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useScatterChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","scatterChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","useScatterChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAIiBI,sBAAsB;;;yBAiCD;;;;uBArCe,gBAAgB;AAI1D,+BAA+B;IACtCC,OAAO,EAAE,mBAAmB;IAC5BC,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,iBAAiB;IACxBC,KAAK,EAAE,iBAAiB;IACxBC,eAAe,EAAE,2BAA2B;IAC5CC,KAAK,EAAE,iBAAiB;IACxBC,kBAAkB,EAAE,8BAA8B;IAClDC,SAAS,EAAE,qBAAqB;IAChCC,UAAU,EAAE,sBAAsB;IAClCC,oBAAoB,EAAE,gCAAgC;IACtDC,WAAW,EAAE,uBAAuB;IACpCC,YAAY,EAAE,wBAAwB;IACtCC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGnB,mBAAA,EAAA;IAAAK,OAAA,EAAA;QAAAe,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;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,MAAMC,yBAAyBC,KAAK,IAAG;IAC9C,MAAMC,UAAU,GAAGrB,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHd,OAAO,MAAEJ,mBAAY,EAACG,sBAAsB,CAACC,OAAO,EAAEmC,UAAU,CAACnC,OAAO,CAAC,uBAAA,EAA0B;IACvG,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useScatterChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const scatterChartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\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    markerLabel: {\n        ...typographyStyles.body1,\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useScatterChartStyles = (props)=>{\n    var _props_styles;\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        markerLabel: mergeClasses(scatterChartClassNames.markerLabel, baseStyles.markerLabel, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.markerLabel)\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","scatterChartClassNames","tooltip","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","jzqdnp","a6j6cd","d","p","m","useScatterChartStyles","props","_props_styles","baseStyles","styles"],"mappings":";;;;;;;;;;;IAKiBM,sBAAsB;;;yBA2CD;eAArB2C;;;uBAhDoC,gBAAgB;AAK1D,+BAA+B;IACtC1C,OAAO,EAAE,mBAAmB;IAC5BC,WAAW,EAAE,uBAAuB;IACpCC,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,iBAAiB;IACxBC,KAAK,EAAE,iBAAiB;IACxBC,eAAe,EAAE,2BAA2B;IAC5CC,KAAK,EAAE,iBAAiB;IACxBC,kBAAkB,EAAE,8BAA8B;IAClDC,SAAS,EAAE,qBAAqB;IAChCC,UAAU,EAAE,sBAAsB;IAClCC,oBAAoB,EAAE,gCAAgC;IACtDC,WAAW,EAAE,uBAAuB;IACpCC,YAAY,EAAE,wBAAwB;IACtCC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGvB,eAAA,EAAA;IAAAO,OAAA,EAAA;QAAAiB,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;IAAA/B,WAAA,EAAA;QAAAgC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAV,OAAA,EAAA;QAAAW,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;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,CAoBrB,CAAC;AAGS,+BAA+BE,KAAK,IAAG;IAC9C,IAAIC,aAAa;IACjB,MAAMC,UAAU,GAAG7B,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHhB,OAAO,MAAEN,mBAAY,EAACK,sBAAsB,CAACC,OAAO,EAAE6C,UAAU,CAAC7C,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACpGC,WAAW,MAAEP,mBAAY,EAACK,sBAAsB,CAACE,WAAW,EAAE4C,UAAU,CAAC5C,WAAW,EAAE,CAAC2C,aAAa,GAAGD,KAAK,CAACG,MAAAA,AAAM,MAAM,IAAI,IAAIF,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC3C,WAAW;IAClM,CAAC;AACL,CAAC"}

package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js

@@ -18,8 +18,10 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
+const _index = require("../../utilities/index");
 const scatterChartClassNames = {
     tooltip: 'fui-line__tooltip',
+    markerLabel: 'fui-line__markerLabel',
     root: 'fui-line__root',
     xAxis: 'fui-line__xAxis',
     yAxis: 'fui-line__yAxis',
@@ -32,7 +34,8 @@ const scatterChartClassNames = {
     shapeStyles: 'fui-line__shapeStyles',
     chartWrapper: 'fui-line__chartWrapper',
     svgTooltip: '',
-    chart: ''
+    chart: '',
+    axisAnnotation: ''
 };
 /**
  * Base Styles
@@ -47,11 +50,21 @@ const scatterChartClassNames = {
         fill: _reacttheme.tokens.colorNeutralBackground1,
         borderRadius: _reacttheme.tokens.borderRadiusSmall,
         pointerEvents: 'none'
+    },
+    markerLabel: {
+        ..._reacttheme.typographyStyles.body1,
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        textAnchor: 'middle',
+        [_index.HighContrastSelector]: {
+            fill: 'CanvasText'
+        }
     }
 });
 const useScatterChartStyles = (props)=>{
+    var _props_styles;
     const baseStyles = useStyles();
     return {
-        tooltip: (0, _react.mergeClasses)(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )
+        tooltip: (0, _react.mergeClasses)(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),
+        markerLabel: (0, _react.mergeClasses)(scatterChartClassNames.markerLabel, baseStyles.markerLabel, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.markerLabel)
     };
 };

package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ScatterChart/useScatterChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { ScatterChartProps, ScatterChartStyles } from './ScatterChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\n\n/**\n * @internal\n */\nexport const scatterChartClassNames: SlotClassNames<ScatterChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: {\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});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useScatterChartStyles = (props: ScatterChartProps): ScatterChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","scatterChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","useScatterChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAQaI,sBAAAA;;;yBAqCA6B;;;;uBA7CwC,iBAAiB;4BAC/C,wBAAwB;AAOxC,+BAAmE;IACxE5B,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYnB,iBAAAA,EAAW;IAC3BK,SAAS;QACPe,SAAS;QACTC,eAAe;QACf,GAAGnB,iBAAAA,CAAWoB,OAAO,CAACnB,kBAAAA,CAAOoB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAKvB,kBAAAA,CAAOwB,mBAAmB;QAC/BC,MAAMzB,kBAAAA,CAAO0B,uBAAuB;QACpCC,cAAc3B,kBAAAA,CAAO4B,iBAAiB;QACtCC,eAAe;IACjB;AACF;AAKO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,aAAahB;IACnB,OAAO;QACLd,aAASJ,mBAAAA,EAAaG,uBAAuBC,OAAO,EAAE8B,WAAW9B,OAAO,CAAC,uBAAuB;IAClG;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ScatterChart/useScatterChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { ScatterChartProps, ScatterChartStyles } from './ScatterChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const scatterChartClassNames: SlotClassNames<ScatterChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: {\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  markerLabel: {\n    ...typographyStyles.body1,\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useScatterChartStyles = (props: ScatterChartProps): ScatterChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    markerLabel: mergeClasses(scatterChartClassNames.markerLabel, baseStyles.markerLabel, props.styles?.markerLabel),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","scatterChartClassNames","tooltip","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","body1","colorNeutralForeground1","textAnchor","useScatterChartStyles","props","baseStyles","styles"],"mappings":";;;;;;;;;;;IASaM,sBAAAA;;;yBA+CAkC;eAAAA;;;uBAxDwC,iBAAiB;4BAC7B,wBAAwB;uBAG5B,wBAAwB;AAKtD,+BAAmE;IACxEjC,SAAS;IACTC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYvB,qBAAAA,EAAW;IAC3BO,SAAS;QACPiB,SAAS;QACTC,eAAe;QACf,GAAGvB,iBAAAA,CAAWwB,OAAO,CAACvB,kBAAAA,CAAOwB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK3B,kBAAAA,CAAO4B,mBAAmB;QAC/BC,MAAM7B,kBAAAA,CAAO8B,uBAAuB;QACpCC,cAAc/B,kBAAAA,CAAOgC,iBAAiB;QACtCC,eAAe;IACjB;IACA5B,aAAa;QACX,GAAGJ,4BAAAA,CAAiBiC,KAAK;QACzBL,MAAM7B,kBAAAA,CAAOmC,uBAAuB;QACpCC,YAAY;QACZ,CAAClC,2BAAAA,CAAqB,EAAE;YACtB2B,MAAM;QACR;IACF;AACF;AAKO,8BAA8B,CAACS;QAIoDA;IAHxF,MAAMC,aAAanB;IACnB,OAAO;QACLhB,aAASN,mBAAAA,EAAaK,uBAAuBC,OAAO,EAAEmC,WAAWnC,OAAO,CAAC,uBAAuB;QAChGC,iBAAaP,mBAAAA,EAAaK,uBAAuBE,WAAW,EAAEkC,WAAWlC,WAAW,EAAA,CAAEiC,gBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAcjC,WAAW;IACjH;AACF,EAAE"}

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

@@ -26,7 +26,9 @@ var CircleVisbility = /*#__PURE__*/ function(CircleVisbility) {
     return CircleVisbility;
 }(CircleVisbility || {});
 const MIN_DOMAIN_MARGIN = 8;
-const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props = {
+    xAxisCategoryOrder: 'default'
+}, forwardedRef)=>{
     var _props_legendProps;
     let _points = [];
     let _barWidth = 0;
@@ -40,7 +42,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
     let _yMin;
     let _isHavingLine = _checkForLine();
     const _tooltipId = (0, _reactutilities.useId)('VCTooltipID_');
-    const _xAxisType = props.data && props.data.length > 0 ? (0, _index1.getTypeOfAxis)(props.data[0].x, true) : _index1.XAxisTypes.StringAxis;
+    let _xAxisType;
     let _calloutAnchorPoint;
     let _domainMargin;
     const _emptyChartId = (0, _reactutilities.useId)('_VBC_empty');
@@ -222,6 +224,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         });
     }
     function _adjustProps() {
+        _xAxisType = props.data && props.data.length > 0 ? (0, _index1.getTypeOfAxis)(props.data[0].x, true) : _index1.XAxisTypes.StringAxis;
         _points = props.data || [];
         _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, undefined, props.mode);
         const defaultColors = [
@@ -233,7 +236,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         ];
         _colors = props.colors || defaultColors;
         _isHavingLine = _checkForLine();
-        _xAxisInnerPadding = (0, _index1.getScalePadding)(props.xAxisInnerPadding, props.xAxisPadding, props.mode === 'histogram' ? 0 : _xAxisType === _index1.XAxisTypes.StringAxis ? 2 / 3 : 1 / 2);
+        _xAxisInnerPadding = props.mode === 'histogram' ? 0 : (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 _getMargins(_margins) {
@@ -828,9 +831,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
             }
         });
         const uniqueX = Object.values(mapX);
-        /** Total width available to render the bars */ const totalWidth = containerWidth - (margins.left + MIN_DOMAIN_MARGIN) - (margins.right + MIN_DOMAIN_MARGIN);
-        /** Rate at which the space between the bars changes wrt the bar width */ const barGapRate = _xAxisInnerPadding / (1 - _xAxisInnerPadding);
-        const numBars = uniqueX.length + (uniqueX.length - 1) * barGapRate;
+        /** Total width available to render the bars */ const totalWidth = (0, _index1.calcTotalWidth)(containerWidth, margins, MIN_DOMAIN_MARGIN);
         if (_xAxisType === _index1.XAxisTypes.StringAxis) {
             if ((0, _index1.isScalePaddingDefined)(props.xAxisOuterPadding, props.xAxisPadding)) {
                 // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
@@ -840,7 +841,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
                 // Update the bar width so that when CartesianChart rerenders,
                 // the following calculations don't use the previous bar width.
                 _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth);
-                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = numBars * _barWidth;
+                /** Total width required to render the bars. Directly proportional to bar width */ const reqWidth = (0, _index1.calcRequiredWidth)(_barWidth, uniqueX.length, _xAxisInnerPadding);
                 if (totalWidth >= reqWidth) {
                     // Center align the chart by setting equal left and right margins for domain
                     _domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
@@ -850,12 +851,14 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
                 'histogram'
             ].includes(props.mode) && uniqueX.length > 1) {
                 // Calculate the remaining width after rendering bars at their maximum allowable width
-                const bandwidth = totalWidth / numBars;
+                const bandwidth = (0, _index1.calcBandwidth)(totalWidth, uniqueX.length, _xAxisInnerPadding);
                 const barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, bandwidth, props.mode);
-                let reqWidth = numBars * barWidth;
+                let reqWidth = (0, _index1.calcRequiredWidth)(barWidth, uniqueX.length, _xAxisInnerPadding);
                 const margin1 = (totalWidth - reqWidth) / 2;
                 let margin2 = Number.POSITIVE_INFINITY;
-                if (!props.hideTickOverlap) {
+                // This logic may introduce gaps between histogram bars when the barWidth is restricted.
+                // So disable it for histogram mode.
+                if (props.mode !== 'histogram') {
                     // Calculate the remaining width after accounting for the space required to render x-axis labels
                     const step = (0, _index1.calculateLongestLabelWidth)(uniqueX) + 20;
                     reqWidth = (uniqueX.length - _xAxisInnerPadding) * step;
@@ -869,7 +872,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
                 // This only works if the bin centers are consistent across all legend groups; otherwise,
                 // the calculated domainMargin may be too small.
                 const barWidth = props.maxBarWidth;
-                const reqWidth = numBars * barWidth;
+                const reqWidth = (0, _index1.calcRequiredWidth)(barWidth, uniqueX.length, _xAxisInnerPadding);
                 _domainMargin += Math.max(0, (totalWidth - reqWidth) / 2);
             }
             // The histogram may appear distorted when bin centers/sizes vary across different legend groups.
@@ -880,7 +883,8 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
             // which can cause the same issue.
             // Solution: Instead of estimating the appropriate bar width, render each bar to span the full range
             // of its corresponding bin explicitly.
-            _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, (0, _index1.calculateAppropriateBarWidth)(uniqueX, totalWidth - 2 * (_domainMargin - MIN_DOMAIN_MARGIN), _xAxisInnerPadding), props.mode);
+            _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, (0, _index1.calculateAppropriateBarWidth)(uniqueX, (0, _index1.calcTotalWidth)(containerWidth, margins, _domainMargin), _xAxisInnerPadding), props.mode);
+            _domainMargin += _barWidth / 2;
             _domainMargin += _barWidth / 2;
         }
         return {
@@ -892,6 +896,26 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
     function _isChartEmpty() {
         return _points.length === 0 || _points.every((point)=>point.y === 0) && !_isHavingLine;
     }
+    function _getOrderedXAxisLabels() {
+        if (_xAxisType !== _index1.XAxisTypes.StringAxis) {
+            return [];
+        }
+        return (0, _index1.sortAxisCategories)(_mapCategoryToValues(), props.xAxisCategoryOrder);
+    }
+    function _mapCategoryToValues() {
+        const categoryToValues = {};
+        _points.forEach((point)=>{
+            const xValue = point.x;
+            if (!categoryToValues[xValue]) {
+                categoryToValues[xValue] = [];
+            }
+            categoryToValues[xValue].push(point.y);
+            if (point.lineData) {
+                categoryToValues[xValue].push(point.lineData.y);
+            }
+        });
+        return categoryToValues;
+    }
     function updatePosition(newX, newY) {
         const threshold = 1; // Set a threshold for movement
         const { x, y } = clickPosition;
@@ -907,7 +931,7 @@ const VerticalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>
         }
     }
     _adjustProps();
-    _xAxisLabels = _points.map((point)=>point.x);
+    _xAxisLabels = _getOrderedXAxisLabels();
     _yMax = Math.max((0, _d3array.max)(_points, (point)=>point.y), props.yMaxValue || 0);
     _yMin = Math.min((0, _d3array.min)(_points, (point)=>point.y), props.yMinValue || 0);
     const legendBars = _getLegendData(_points);