@fluentui/react-charts 0.0.0-nightly-20250617-0407.1 → 0.0.0-nightly-20250619-0405.1

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

@@ -10,19 +10,15 @@ Object.defineProperty(exports, "ResponsiveContainer", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-const _useResponsiveContainerStylesstyles = require("./useResponsiveContainerStyles.styles");
+const _getWindow = require("../../utilities/getWindow");
 const ResponsiveContainer = (props)=>{
     const containerRef = _react.useRef(null);
     const onResizeRef = _react.useRef();
-    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const classes = (0, _useResponsiveContainerStylesstyles.useResponsiveContainerStyles)(props);
     const [size, setSize] = _react.useState({});
     onResizeRef.current = props.onResize;
-    const _window = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
     _react.useEffect(()=>{
+        const _window = (0, _getWindow.getWindow)(containerRef.current);
         let animationFrameId;
-        // eslint-disable-next-line no-restricted-globals
         let resizeObserver;
         const resizeCallback = (entries)=>{
             var _onResizeRef_current;
@@ -44,7 +40,7 @@ const ResponsiveContainer = (props)=>{
             });
             (_onResizeRef_current = onResizeRef.current) === null || _onResizeRef_current === void 0 ? void 0 : _onResizeRef_current.call(onResizeRef, containerWidth, containerHeight);
         };
-        if (_window === null || _window === void 0 ? void 0 : _window.ResizeObserver) {
+        if (_window && _window.ResizeObserver) {
             resizeObserver = new _window.ResizeObserver(resizeCallback);
             if (containerRef.current) {
                 resizeObserver.observe(containerRef.current);
@@ -56,21 +52,51 @@ const ResponsiveContainer = (props)=>{
             }
             resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
         };
+    }, []);
+    const chartContent = _react.useMemo(()=>{
+        let calculatedWidth = size.containerWidth;
+        let calculatedHeight = size.containerHeight;
+        if (typeof props.aspect === 'number' && props.aspect > 0) {
+            if (calculatedWidth) {
+                calculatedHeight = calculatedWidth / props.aspect;
+            } else if (calculatedHeight) {
+                calculatedWidth = calculatedHeight * props.aspect;
+            }
+            if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {
+                calculatedHeight = props.maxHeight;
+            }
+        }
+        var _props_width, _props_height;
+        return /*#__PURE__*/ _react.createElement("div", {
+            ref: containerRef,
+            style: {
+                width: (_props_width = props.width) !== null && _props_width !== void 0 ? _props_width : '100%',
+                height: (_props_height = props.height) !== null && _props_height !== void 0 ? _props_height : '100%',
+                minWidth: props.minWidth,
+                minHeight: props.minHeight,
+                maxHeight: props.maxHeight,
+                // Ensure the child element fills the parent container
+                // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
+                '--root-width': calculatedWidth + 'px',
+                '--root-height': calculatedHeight + 'px'
+            }
+        }, _react.Children.map(props.children, (child)=>{
+            return /*#__PURE__*/ _react.cloneElement(child, {
+                width: calculatedWidth,
+                height: calculatedHeight,
+                shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0)
+            });
+        }));
     }, [
-        _window
+        size,
+        props.aspect,
+        props.maxHeight,
+        props.children,
+        props.width,
+        props.height,
+        props.minHeight,
+        props.minWidth
     ]);
-    return /*#__PURE__*/ _react.createElement("div", {
-        ref: containerRef,
-        className: classes.root,
-        style: {
-            width: props.width,
-            height: props.height
-        }
-    }, _react.Children.map(props.children, (child)=>{
-        return /*#__PURE__*/ _react.cloneElement(child, {
-            width: size.containerWidth,
-            height: size.containerHeight
-        });
-    }));
+    return chartContent;
 };
 ResponsiveContainer.displayName = 'ResponsiveContainer';

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveContainerStyles } from './useResponsiveContainerStyles.styles';\n\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const { targetDocument } = useFluent_unstable();\n  const classes = useResponsiveContainerStyles(props);\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n  const _window = targetDocument?.defaultView;\n\n  React.useEffect(() => {\n    let animationFrameId: number | undefined;\n    // eslint-disable-next-line no-restricted-globals\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window?.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, [_window]);\n\n  return (\n    <div ref={containerRef} className={classes.root} style={{ width: props.width, height: props.height }}>\n      {React.Children.map(props.children, child => {\n        return React.cloneElement(child, {\n          width: size.containerWidth,\n          height: size.containerHeight,\n        });\n      })}\n    </div>\n  );\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["ResponsiveContainer","props","containerRef","React","useRef","onResizeRef","targetDocument","useFluent_unstable","classes","useResponsiveContainerStyles","size","setSize","useState","current","onResize","_window","defaultView","useEffect","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","createElement","div","ref","className","root","style","Children","map","children","child","cloneElement","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;qCACY;oDAEU;AAEtC,MAAMA,sBAA0DC,CAAAA;IACrE,MAAMC,eAAeC,OAAMC,MAAM,CAAiB;IAClD,MAAMC,cAAcF,OAAMC,MAAM;IAChC,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,UAAUC,IAAAA,gEAAAA,EAA6BR;IAE7C,MAAM,CAACS,MAAMC,QAAQ,GAAGR,OAAMS,QAAQ,CAAwD,CAAC;IAE/FP,YAAYQ,OAAO,GAAGZ,MAAMa,QAAQ;IACpC,MAAMC,UAAUT,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBU,WAAW;IAE3Cb,OAAMc,SAAS,CAAC;QACd,IAAIC;QACJ,iDAAiD;QACjD,IAAIC;QAEJ,MAAMC,iBAAiB,CAACC;gBAetBhB;YAdA,MAAM,EAAEiB,OAAOC,cAAc,EAAEC,QAAQC,eAAe,EAAE,GAAGJ,OAAO,CAAC,EAAE,CAACK,WAAW;YACjF,sEAAsE;YACtE,gGAAgG;YAChGR,mBAAmBH,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASY,qBAAqB,CAAC;gBAChDhB,QAAQiB,CAAAA;oBACN,MAAMC,eAAeC,KAAKC,KAAK,CAACR;oBAChC,MAAMS,gBAAgBF,KAAKC,KAAK,CAACN;oBACjC,IAAIG,SAASL,cAAc,KAAKM,gBAAgBD,SAASH,eAAe,KAAKO,eAAe;wBAC1F,OAAOJ;oBACT;oBAEA,OAAO;wBAAEL,gBAAgBM;wBAAcJ,iBAAiBO;oBAAc;gBACxE;YACF;YACA3B,CAAAA,uBAAAA,YAAYQ,OAAO,AAAPA,MAAO,QAAnBR,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,IAAAA,CAAAA,aAAsBkB,gBAAgBE;QACxC;QAEA,IAAIV,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASkB,cAAc,EAAE;YAC3Bd,iBAAiB,IAAIJ,QAAQkB,cAAc,CAACb;YAC5C,IAAIlB,aAAaW,OAAO,EAAE;gBACxBM,eAAee,OAAO,CAAChC,aAAaW,OAAO;YAC7C;QACF;QAEA,OAAO;YACL,IAAIK,kBAAkB;gBACpBH,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASoB,oBAAoB,CAACjB;YAChC;YAEAC,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBiB,UAAU;QAC5B;IACF,GAAG;QAACrB;KAAQ;IAEZ,OAAA,WAAA,GACEZ,OAAAkC,aAAA,CAACC,OAAAA;QAAIC,KAAKrC;QAAcsC,WAAWhC,QAAQiC,IAAI;QAAEC,OAAO;YAAEpB,OAAOrB,MAAMqB,KAAK;YAAEE,QAAQvB,MAAMuB,MAAM;QAAC;OAChGrB,OAAMwC,QAAQ,CAACC,GAAG,CAAC3C,MAAM4C,QAAQ,EAAEC,CAAAA;QAClC,OAAA,WAAA,GAAO3C,OAAM4C,YAAY,CAACD,OAAO;YAC/BxB,OAAOZ,KAAKa,cAAc;YAC1BC,QAAQd,KAAKe,eAAe;QAC9B;IACF;AAGN;AACAzB,oBAAoBgD,WAAW,GAAG"}
+{"version":3,"sources":["ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        style={\n          {\n            width: props.width ?? '100%',\n            height: props.height ?? '100%',\n            minWidth: props.minWidth,\n            minHeight: props.minHeight,\n            maxHeight: props.maxHeight,\n            // Ensure the child element fills the parent container\n            // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height\n            '--root-width': calculatedWidth + 'px',\n            '--root-height': calculatedHeight + 'px',\n          } as React.CSSProperties\n        }\n      >\n        {React.Children.map(props.children, child => {\n          return React.cloneElement<ResponsiveChildProps>(child, {\n            width: calculatedWidth,\n            height: calculatedHeight,\n            shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n          });\n        })}\n      </div>\n    );\n  }, [size, props.aspect, props.maxHeight, props.children, props.width, props.height, props.minHeight, props.minWidth]);\n\n  return chartContent;\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["ResponsiveContainer","props","containerRef","React","useRef","onResizeRef","size","setSize","useState","current","onResize","useEffect","_window","getWindow","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","createElement","div","ref","style","minWidth","minHeight","Children","map","children","child","cloneElement","shouldResize","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveContainer.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ResponsiveContainerProps {\n  children: React.ReactElement;\n  onResize?: (width: number, height: number) => void;\n  width?: number | string;\n  height?: number | string;\n}\n\nexport interface ResponsiveContainerStyles {\n  root: string;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["ResponsiveContainer.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Responsive Child props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveChildProps {\n  width?: number;\n  height?: number;\n  shouldResize?: number;\n}\n\n/**\n * Responsive Container props\n * {@docCategory ResponsiveContainer}\n */\nexport interface ResponsiveContainerProps {\n  /**\n   * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.\n   */\n  aspect?: number;\n\n  /**\n   * Width of the container\n   */\n  width?: number | string;\n\n  /**\n   * Height of the container\n   */\n  height?: number | string;\n\n  /**\n   * Minimum width of the container\n   */\n  minWidth?: number | string;\n\n  /**\n   * Minimum height of the container\n   */\n  minHeight?: number | string;\n\n  /**\n   * Maximum height of the container\n   */\n  maxHeight?: number;\n\n  /**\n   * Callback providing the updated chart width and height values when the container is resized\n   */\n  onResize?: (width: number, height: number) => void;\n\n  /**\n   * Child component to be rendered within the container\n   */\n  children: React.ReactElement<ResponsiveChildProps>;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

package/lib-commonjs/components/ResponsiveContainer/index.js

@@ -4,3 +4,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 const _export_star = require("@swc/helpers/_/_export_star");
 _export_star._(require("./ResponsiveContainer"), exports);
+_export_star._(require("./ResponsiveContainer.types"), exports);
+_export_star._(require("./withResponsiveContainer"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ResponsiveContainer';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ResponsiveContainer';\nexport * from './ResponsiveContainer.types';\nexport * from './withResponsiveContainer';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}

package/lib-commonjs/components/ResponsiveContainer/withResponsiveContainer.js

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "withResponsiveContainer", {
+    enumerable: true,
+    get: function() {
+        return withResponsiveContainer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _ResponsiveContainer = require("./ResponsiveContainer");
+function withResponsiveContainer(WrappedComponent) {
+    const ComponentWithResponsiveContainer = ({ aspect, width, height, minWidth, minHeight, maxHeight, onResize, ...restProps })=>{
+        return /*#__PURE__*/ _react.createElement(_ResponsiveContainer.ResponsiveContainer, {
+            aspect: aspect,
+            width: width,
+            height: height,
+            minWidth: minWidth,
+            minHeight: minHeight,
+            maxHeight: maxHeight,
+            onResize: onResize
+        }, /*#__PURE__*/ _react.createElement(WrappedComponent, restProps));
+    };
+    return ComponentWithResponsiveContainer;
+}

package/lib-commonjs/components/ResponsiveContainer/withResponsiveContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["withResponsiveContainer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { ResponsiveContainer } from './ResponsiveContainer';\nimport { ResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * An HOC to update wrapped component on container resize.\n * {@docCategory ResponsiveContainer}\n */\nexport function withResponsiveContainer<TProps extends Omit<ResponsiveContainerProps, 'children'>>(\n  WrappedComponent: React.ComponentType<TProps>,\n) {\n  const ComponentWithResponsiveContainer: React.FC<TProps> = ({\n    aspect,\n    width,\n    height,\n    minWidth,\n    minHeight,\n    maxHeight,\n    onResize,\n    ...restProps\n  }) => {\n    return (\n      <ResponsiveContainer\n        aspect={aspect}\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        onResize={onResize}\n      >\n        <WrappedComponent {...(restProps as any)} />\n      </ResponsiveContainer>\n    );\n  };\n\n  return ComponentWithResponsiveContainer;\n}\n"],"names":["withResponsiveContainer","WrappedComponent","ComponentWithResponsiveContainer","aspect","width","height","minWidth","minHeight","maxHeight","onResize","restProps","React","createElement","ResponsiveContainer"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,qDAAqD;;;;+BASrCA;;;eAAAA;;;;iEARO;qCACa;AAO7B,SAASA,wBACdC,gBAA6C;IAE7C,MAAMC,mCAAqD,CAAC,EAC1DC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ;QACC,OAAA,WAAA,GACEC,OAAAC,aAAA,CAACC,wCAAAA,EAAAA;YACCV,QAAQA;YACRC,OAAOA;YACPC,QAAQA;YACRC,UAAUA;YACVC,WAAWA;YACXC,WAAWA;YACXC,UAAUA;yBAEVE,OAAAC,aAAA,CAACX,kBAAsBS;IAG7B;IAEA,OAAOR;AACT"}

package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.js

@@ -32,8 +32,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bhrd7zp: "figsok6",
         Bg96gwp: "f1i3iumi",
         mc9l5x: "f22iagw",
-        a9b677: "fly5x3f",
-        Bqenvij: "f1l02sjl",
+        a9b677: "fsr8r2d",
+        Bqenvij: "f50j5g9",
         Beiy3e4: "f1vx9l62",
         B68tc82: 0,
         Bmxbyg5: 0,
@@ -106,8 +106,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".figsok6{font-weight:var(--fontWeightRegular);}",
         ".f1i3iumi{line-height:var(--lineHeightBase300);}",
         ".f22iagw{display:flex;}",
-        ".fly5x3f{width:100%;}",
-        ".f1l02sjl{height:100%;}",
+        ".fsr8r2d{width:var(--root-width, 100%);}",
+        ".f50j5g9{height:var(--root-height, 100%);}",
         ".f1vx9l62{flex-direction:column;}",
         [
             ".f1a3p1vp{overflow:hidden;}",

package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSankeyChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelectorBlack } from '../../utilities/index';\nexport const sankeyChartClassNames = {\n    root: 'fui-sc__root',\n    nodes: 'fui-sc__nodes',\n    links: 'fui-sc__links',\n    nodeTextContainer: 'fui-sc__nodeTextContainer',\n    toolTip: 'fui-sc__toolTip',\n    chartWrapper: 'fui-sc__chartWrapper'\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    },\n    links: {\n        fill: tokens.colorNeutralBackground1,\n        strokeWidth: '3px',\n        [HighContrastSelectorBlack]: {\n            fill: 'Canvas'\n        }\n    },\n    nodes: {\n        fill: '#F5F5F5',\n        [HighContrastSelectorBlack]: {\n            fill: 'Canvas'\n        }\n    },\n    toolTip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        padding: '8px',\n        position: 'absolute',\n        textAlign: 'center',\n        top: '0px',\n        background: tokens.colorNeutralBackground1,\n        borderRadius: '2px',\n        pointerEvents: 'none'\n    },\n    nodeTextContainer: {\n        '& text': {\n            [HighContrastSelectorBlack]: {\n                fill: 'CanvasText'\n            }\n        },\n        marginTop: '4px',\n        marginLeft: '8px',\n        marginBottom: '4px',\n        marginRight: '8px'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    }\n});\nexport const useSankeyChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),\n        nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/ ),\n        links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/ ),\n        nodeTextContainer: mergeClasses(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),\n        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),\n        chartWrapper: mergeClasses(sankeyChartClassNames.chartWrapper, props.enableReflow ? baseStyles.chartWrapper : '' /*, props.styles?.chartWrapper*/ )\n    };\n};\n"],"names":["sankeyChartClassNames","useSankeyChartStyles","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","Bkfmm31","Be5yapy","Bcjfw9x","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Dzfv0s","B6of3ja","Frg6f3","jrapky","t21cq0","d","p","m","props","baseStyles","mergeClasses","enableReflow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAyDAC,oBAAoB;eAApBA;;;uBA5D4B;AAGlC,MAAMD,wBAAwB;IACjCE,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;AAClB;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAP,MAAA;QAAAQ,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAhB,OAAA;QAAAiB,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAApB,OAAA;QAAAkB,SAAA;QAAAE,SAAA;IAAA;IAAAjB,SAAA;QAAAI,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAG,SAAA;QAAAO,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAA3C,mBAAA;QAAA4C,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAA9C,cAAA;QAAAW,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAkC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAiDX,MAAMvD,uBAAwBwD,CAAAA;IACjC,MAAMC,aAAalD;IACnB,OAAO;QACHN,MAAMyD,IAAAA,mBAAY,EAAC3D,sBAAsBE,IAAI,EAAEwD,WAAWxD,IAAI,CAAC,sBAAA;QAC/DC,OAAOwD,IAAAA,mBAAY,EAAC3D,sBAAsBG,KAAK,EAAEuD,WAAWvD,KAAK,CAAC,uBAAA;QAClEC,OAAOuD,IAAAA,mBAAY,EAAC3D,sBAAsBI,KAAK,EAAEsD,WAAWtD,KAAK,CAAC,uBAAA;QAClEC,mBAAmBsD,IAAAA,mBAAY,EAAC3D,sBAAsBK,iBAAiB,EAAEqD,WAAWrD,iBAAiB,CAAC,mCAAA;QACtGC,SAASqD,IAAAA,mBAAY,EAAC3D,sBAAsBM,OAAO,EAAEoD,WAAWpD,OAAO,CAAC,yBAAA;QACxEC,cAAcoD,IAAAA,mBAAY,EAAC3D,sBAAsBO,YAAY,EAAEkD,MAAMG,YAAY,GAAGF,WAAWnD,YAAY,GAAG,GAAG,8BAAA;IACrH;AACJ"}
+{"version":3,"sources":["useSankeyChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelectorBlack } from '../../utilities/index';\nexport const sankeyChartClassNames = {\n    root: 'fui-sc__root',\n    nodes: 'fui-sc__nodes',\n    links: 'fui-sc__links',\n    nodeTextContainer: 'fui-sc__nodeTextContainer',\n    toolTip: 'fui-sc__toolTip',\n    chartWrapper: 'fui-sc__chartWrapper'\n};\nconst useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: 'var(--root-width, 100%)',\n        height: 'var(--root-height, 100%)',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\n    links: {\n        fill: tokens.colorNeutralBackground1,\n        strokeWidth: '3px',\n        [HighContrastSelectorBlack]: {\n            fill: 'Canvas'\n        }\n    },\n    nodes: {\n        fill: '#F5F5F5',\n        [HighContrastSelectorBlack]: {\n            fill: 'Canvas'\n        }\n    },\n    toolTip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        padding: '8px',\n        position: 'absolute',\n        textAlign: 'center',\n        top: '0px',\n        background: tokens.colorNeutralBackground1,\n        borderRadius: '2px',\n        pointerEvents: 'none'\n    },\n    nodeTextContainer: {\n        '& text': {\n            [HighContrastSelectorBlack]: {\n                fill: 'CanvasText'\n            }\n        },\n        marginTop: '4px',\n        marginLeft: '8px',\n        marginBottom: '4px',\n        marginRight: '8px'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    }\n});\nexport const useSankeyChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),\n        nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/ ),\n        links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/ ),\n        nodeTextContainer: mergeClasses(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),\n        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),\n        chartWrapper: mergeClasses(sankeyChartClassNames.chartWrapper, props.enableReflow ? baseStyles.chartWrapper : '' /*, props.styles?.chartWrapper*/ )\n    };\n};\n"],"names":["sankeyChartClassNames","useSankeyChartStyles","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","Bkfmm31","Be5yapy","Bcjfw9x","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Dzfv0s","B6of3ja","Frg6f3","jrapky","t21cq0","d","p","m","props","baseStyles","mergeClasses","enableReflow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAyDAC,oBAAoB;eAApBA;;;uBA5D4B;AAGlC,MAAMD,wBAAwB;IACjCE,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;AAClB;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAP,MAAA;QAAAQ,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAhB,OAAA;QAAAiB,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAApB,OAAA;QAAAkB,SAAA;QAAAE,SAAA;IAAA;IAAAjB,SAAA;QAAAI,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAG,SAAA;QAAAO,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAA3C,mBAAA;QAAA4C,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAA9C,cAAA;QAAAW,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAkC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAiDX,MAAMvD,uBAAwBwD,CAAAA;IACjC,MAAMC,aAAalD;IACnB,OAAO;QACHN,MAAMyD,IAAAA,mBAAY,EAAC3D,sBAAsBE,IAAI,EAAEwD,WAAWxD,IAAI,CAAC,sBAAA;QAC/DC,OAAOwD,IAAAA,mBAAY,EAAC3D,sBAAsBG,KAAK,EAAEuD,WAAWvD,KAAK,CAAC,uBAAA;QAClEC,OAAOuD,IAAAA,mBAAY,EAAC3D,sBAAsBI,KAAK,EAAEsD,WAAWtD,KAAK,CAAC,uBAAA;QAClEC,mBAAmBsD,IAAAA,mBAAY,EAAC3D,sBAAsBK,iBAAiB,EAAEqD,WAAWrD,iBAAiB,CAAC,mCAAA;QACtGC,SAASqD,IAAAA,mBAAY,EAAC3D,sBAAsBM,OAAO,EAAEoD,WAAWpD,OAAO,CAAC,yBAAA;QACxEC,cAAcoD,IAAAA,mBAAY,EAAC3D,sBAAsBO,YAAY,EAAEkD,MAAMG,YAAY,GAAGF,WAAWnD,YAAY,GAAG,GAAG,8BAAA;IACrH;AACJ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["VerticalStackedBarChart.types.ts"],"sourcesContent":["import * as React from 'react';\n//import { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { RenderFunction } from '../../utilities/index';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  LineChartLineOptions,\n  VerticalStackedChartProps,\n  VSChartDataPoint,\n} from '../../index';\n\n/**\n * Vertical Stacked Bar Chart properties\n * {@docCategory VerticalStackedBarChart}\n */\nexport interface VerticalStackedBarChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: VerticalStackedChartProps[];\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   */\n  barWidth?: number | 'default' | 'auto';\n\n  /**\n   * Gap (max) between bars in a stack. When non-zero, the bars in a stack will\n   * be separated by gaps. The actual size of each gap is calculated as 20% of\n   * the height of that stack, with a minimum size of 1px and a maximum given by\n   * this prop.\n   * @default 0\n   */\n  barGapMax?: number;\n\n  /**\n   * Corner radius of the bars\n   * @default 0\n   */\n  barCornerRadius?: number;\n\n  /**\n   * The minimum height of a bar; bars below this height will be displayed at\n   * this height. Note that this setting will result in the height of these data\n   * points not being to scale.\n   * @default 0\n   */\n  barMinimumHeight?: number;\n\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * To display multi stack callout or single callout\n   * @default flase\n   */\n  isCalloutForStack?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: VerticalStackedBarChartStyles;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: RenderFunction<VerticalStackedChartProps>;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<VSChartDataPoint>;\n\n  /**\n   * yMinValue is not supported for bar charts, so only allow \"undefined\"\n   */\n  yMinValue?: undefined;\n\n  /**\n   * Allow hover actions on the legend\n   * @default true\n   */\n  allowHoverOnLegend?: boolean;\n\n  /**\n   * Click handler for bars; type of data is dependant on isCalloutForStack\n   */\n  onBarClick?: (event: React.MouseEvent<SVGElement>, data: VerticalStackedChartProps | VSChartDataPoint) => void;\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 Stacked Bar Chart style properties\n * {@docCategory VerticalStackedBarChart}\n */\nexport interface VerticalStackedBarChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Vertical Stacked Bar Chart styles\n * {@docCategory VerticalStackedBarChart}\n */\nexport interface VerticalStackedBarChartStyles extends CartesianChartStyles {\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: string;\n\n  /**\n   * Style for the bar labels\n   */\n  barLabel: string;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["VerticalStackedBarChart.types.ts"],"sourcesContent":["import * as React from 'react';\n//import { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { RenderFunction } from '../../utilities/index';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  LineChartLineOptions,\n  VerticalStackedChartProps,\n  VSChartDataPoint,\n} from '../../index';\n\n/**\n * Vertical Stacked Bar Chart properties\n * {@docCategory VerticalStackedBarChart}\n */\nexport interface VerticalStackedBarChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: VerticalStackedChartProps[];\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   */\n  barWidth?: number | 'default' | 'auto';\n\n  /**\n   * Gap (max) between bars in a stack. When non-zero, the bars in a stack will\n   * be separated by gaps. The actual size of each gap is calculated as 20% of\n   * the height of that stack, with a minimum size of 1px and a maximum given by\n   * this prop.\n   * @default 0\n   */\n  barGapMax?: number;\n\n  /**\n   * Corner radius of the bars\n   * @default 0\n   */\n  barCornerRadius?: number;\n\n  /**\n   * The minimum height of a bar; bars below this height will be displayed at\n   * this height. Note that this setting will result in the height of these data\n   * points not being to scale.\n   * @default 0\n   */\n  barMinimumHeight?: number;\n\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * To display multi stack callout or single callout\n   * @default flase\n   */\n  isCalloutForStack?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: VerticalStackedBarChartStyles;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: RenderFunction<VerticalStackedChartProps>;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<VSChartDataPoint>;\n\n  /**\n   * yMinValue is supported for bar charts that has only lines\n   */\n  yMinValue?: number | undefined;\n\n  /**\n   * Allow hover actions on the legend\n   * @default true\n   */\n  allowHoverOnLegend?: boolean;\n\n  /**\n   * Click handler for bars; type of data is dependant on isCalloutForStack\n   */\n  onBarClick?: (event: React.MouseEvent<SVGElement>, data: VerticalStackedChartProps | VSChartDataPoint) => void;\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 Stacked Bar Chart style properties\n * {@docCategory VerticalStackedBarChart}\n */\nexport interface VerticalStackedBarChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Vertical Stacked Bar Chart styles\n * {@docCategory VerticalStackedBarChart}\n */\nexport interface VerticalStackedBarChartStyles extends CartesianChartStyles {\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: string;\n\n  /**\n   * Style for the bar labels\n   */\n  barLabel: string;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

package/lib-commonjs/utilities/SVGTooltipText.js

@@ -28,7 +28,7 @@ const SVGTooltipText = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const tooltipHostId = (0, _react.useRef)((0, _reactutilities.useId)('tooltip-host')).current;
     const ignoreNextFocusEvent = (0, _react.useRef)(false);
     const portalMountNode = (0, _reactsharedcontexts.usePortalMountNode)();
-    const PADDING = 4;
+    const PADDING = 3;
     const wrapContentCallback = (0, _react.useCallback)(()=>{
         var _props_maxWidth;
         if (props.content && props.wrapContent && props.wrapContent(props.content, tooltipHostId, (_props_maxWidth = props.maxWidth) !== null && _props_maxWidth !== void 0 ? _props_maxWidth : 100, props.maxHeight)) {
@@ -153,12 +153,12 @@ const SVGTooltipText = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     ]);
     const showTooltip = props.isTooltipVisibleProp && isOverflowing && !!props.content || isTooltipVisible && !!props.content;
     const rectX = (typeof ((_props_textProps = props.textProps) === null || _props_textProps === void 0 ? void 0 : _props_textProps.x) === 'number' ? props.textProps.x : 0) - (textWidth !== null && textWidth !== void 0 ? textWidth : 0) / 2 - PADDING;
-    const rectY = (typeof ((_props_textProps1 = props.textProps) === null || _props_textProps1 === void 0 ? void 0 : _props_textProps1.y) === 'number' ? props.textProps.y : 0) - (textHeight !== null && textHeight !== void 0 ? textHeight : 0) / 2 - PADDING;
+    const rectY = (typeof ((_props_textProps1 = props.textProps) === null || _props_textProps1 === void 0 ? void 0 : _props_textProps1.y) === 'number' ? props.textProps.y : 0) - (textHeight !== null && textHeight !== void 0 ? textHeight : 0) / 2 - 2 * PADDING;
     return /*#__PURE__*/ _react.createElement(_react.Fragment, null, props.showBackground && /*#__PURE__*/ _react.createElement("rect", {
         x: rectX,
         y: rectY,
         width: (textWidth !== null && textWidth !== void 0 ? textWidth : 0) + 2 * PADDING,
-        height: (textHeight !== null && textHeight !== void 0 ? textHeight : 0) + 2 * PADDING,
+        height: (textHeight !== null && textHeight !== void 0 ? textHeight : 0) + PADDING,
         transform: (_props_textProps2 = props.textProps) === null || _props_textProps2 === void 0 ? void 0 : _props_textProps2.transform,
         className: props.className
     }), /*#__PURE__*/ _react.createElement(_reacttooltip.Tooltip, {

package/lib-commonjs/utilities/SVGTooltipText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SVGTooltipText.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\ninterface SVGTooltipTextProps {\n  closeDelay?: number;\n  content: string;\n  delay?: number;\n  tooltipProps?: React.ComponentProps<typeof Tooltip>;\n  textProps?: React.SVGAttributes<SVGTextElement>;\n  maxWidth?: number;\n  maxHeight?: number;\n  shouldReceiveFocus?: boolean;\n  isTooltipVisibleProp?: boolean;\n  wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n  showBackground?: boolean;\n  className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n  HTMLDivElement,\n  SVGTooltipTextProps\n>((props, forwardedRef) => {\n  const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const [textWidth, setTextWidth] = useState(0);\n  const [textHeight, setTextHeight] = useState(0);\n\n  const tooltipHostRef = useRef<SVGTextElement>(null);\n  const async = useRef(new Async()).current;\n  const dismissTimerId = useRef<number>();\n  const openTimerId = useRef<number>();\n  const tooltipHostId = useRef(useId('tooltip-host')).current;\n  const ignoreNextFocusEvent = useRef(false);\n  const portalMountNode = usePortalMountNode();\n  const PADDING = 4;\n\n  const wrapContentCallback = useCallback(() => {\n    if (\n      props.content &&\n      props.wrapContent &&\n      props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n      // ToDo - Specify a correct fallback value here\n    ) {\n      setIsOverflowing(true);\n    } else {\n      setIsOverflowing(false);\n    }\n  }, [props, tooltipHostId]);\n\n  const measureText = useCallback((): void => {\n    if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n      const bbox = tooltipHostRef.current.getBBox();\n      setTextWidth(bbox.width);\n      setTextHeight(bbox.height);\n    }\n  }, []);\n\n  useEffect(() => {\n    wrapContentCallback();\n    return () => {\n      async.dispose();\n    };\n  }, [wrapContentCallback, async]);\n\n  useEffect(() => {\n    wrapContentCallback();\n  }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n  useEffect(() => {\n    if (isTooltipVisible) {\n      measureText();\n    }\n  }, [isTooltipVisible, measureText]);\n\n  useEffect(() => {\n    // Recalculate text dimensions when content or dimensions change\n    measureText();\n  }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n  const hideTooltip = useCallback(() => {\n    async.clearTimeout(openTimerId.current!);\n    async.clearTimeout(dismissTimerId.current!);\n    setIsTooltipVisible(false);\n  }, [async]);\n\n  const onTooltipMouseEnter = useCallback(\n    (ev: React.MouseEvent<SVGElement>) => {\n      if (!isOverflowing) {\n        return;\n      }\n\n      if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n        return;\n      }\n\n      async.clearTimeout(dismissTimerId.current!);\n      async.clearTimeout(openTimerId.current!);\n\n      if (props.delay !== 0) {\n        openTimerId.current = async.setTimeout(() => {\n          setIsTooltipVisible(true);\n        }, props.delay!);\n      } else {\n        setIsTooltipVisible(true);\n      }\n    },\n    [isOverflowing, portalMountNode, async, props.delay],\n  );\n\n  const onTooltipMouseLeave = useCallback(\n    (ev: React.MouseEvent<SVGElement>) => {\n      async.clearTimeout(dismissTimerId.current!);\n      async.clearTimeout(openTimerId.current!);\n\n      if (props.closeDelay) {\n        dismissTimerId.current = async.setTimeout(() => {\n          setIsTooltipVisible(false);\n        }, props.closeDelay);\n      } else {\n        setIsTooltipVisible(false);\n      }\n    },\n    [async, props.closeDelay],\n  );\n\n  const onTooltipFocus = useCallback(\n    (ev: React.FocusEvent<SVGElement>) => {\n      if (ignoreNextFocusEvent.current) {\n        ignoreNextFocusEvent.current = false;\n        return;\n      }\n      onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n    },\n    [onTooltipMouseEnter],\n  );\n\n  const onTooltipBlur = useCallback(\n    (ev: React.FocusEvent<SVGElement>) => {\n      ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n      dismissTimerId.current = async.setTimeout(() => {\n        setIsTooltipVisible(false);\n      }, 0);\n    },\n    [async],\n  );\n\n  const onTooltipKeyDown = useCallback(\n    (ev: React.KeyboardEvent<SVGElement>) => {\n      if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n        hideTooltip();\n        ev.stopPropagation();\n      }\n    },\n    [isTooltipVisible, hideTooltip],\n  );\n\n  const showTooltip =\n    (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n  const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n  const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - PADDING;\n\n  return (\n    <>\n      {props.showBackground && (\n        <rect\n          x={rectX}\n          y={rectY}\n          width={(textWidth ?? 0) + 2 * PADDING}\n          height={(textHeight ?? 0) + 2 * PADDING}\n          transform={props.textProps?.transform}\n          className={props.className}\n        />\n      )}\n      <Tooltip\n        relationship=\"description\"\n        {...props.tooltipProps}\n        withArrow\n        content={props.content}\n        // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n        visible={showTooltip}\n      >\n        <text\n          {...props.textProps}\n          id={tooltipHostId}\n          ref={tooltipHostRef}\n          onFocusCapture={onTooltipFocus}\n          onBlurCapture={onTooltipBlur}\n          onMouseEnter={onTooltipMouseEnter}\n          onMouseLeave={onTooltipMouseLeave}\n          onKeyDown={onTooltipKeyDown}\n          data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n        >\n          {props.content}\n        </text>\n      </Tooltip>\n    </>\n  );\n});\n\nSVGTooltipText.defaultProps = {\n  delay: 0,\n  showBackground: false,\n};\n"],"names":["SVGTooltipText","React","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","useState","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","useRef","async","Async","current","dismissTimerId","openTimerId","tooltipHostId","useId","ignoreNextFocusEvent","portalMountNode","usePortalMountNode","PADDING","wrapContentCallback","useCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","useEffect","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","KeyCodes","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","createElement","Fragment","showBackground","rect","transform","className","Tooltip","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["SVGTooltipText.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\ninterface SVGTooltipTextProps {\n  closeDelay?: number;\n  content: string;\n  delay?: number;\n  tooltipProps?: React.ComponentProps<typeof Tooltip>;\n  textProps?: React.SVGAttributes<SVGTextElement>;\n  maxWidth?: number;\n  maxHeight?: number;\n  shouldReceiveFocus?: boolean;\n  isTooltipVisibleProp?: boolean;\n  wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n  showBackground?: boolean;\n  className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n  HTMLDivElement,\n  SVGTooltipTextProps\n>((props, forwardedRef) => {\n  const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const [textWidth, setTextWidth] = useState(0);\n  const [textHeight, setTextHeight] = useState(0);\n\n  const tooltipHostRef = useRef<SVGTextElement>(null);\n  const async = useRef(new Async()).current;\n  const dismissTimerId = useRef<number>();\n  const openTimerId = useRef<number>();\n  const tooltipHostId = useRef(useId('tooltip-host')).current;\n  const ignoreNextFocusEvent = useRef(false);\n  const portalMountNode = usePortalMountNode();\n  const PADDING = 3;\n\n  const wrapContentCallback = useCallback(() => {\n    if (\n      props.content &&\n      props.wrapContent &&\n      props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n      // ToDo - Specify a correct fallback value here\n    ) {\n      setIsOverflowing(true);\n    } else {\n      setIsOverflowing(false);\n    }\n  }, [props, tooltipHostId]);\n\n  const measureText = useCallback((): void => {\n    if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n      const bbox = tooltipHostRef.current.getBBox();\n      setTextWidth(bbox.width);\n      setTextHeight(bbox.height);\n    }\n  }, []);\n\n  useEffect(() => {\n    wrapContentCallback();\n    return () => {\n      async.dispose();\n    };\n  }, [wrapContentCallback, async]);\n\n  useEffect(() => {\n    wrapContentCallback();\n  }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n  useEffect(() => {\n    if (isTooltipVisible) {\n      measureText();\n    }\n  }, [isTooltipVisible, measureText]);\n\n  useEffect(() => {\n    // Recalculate text dimensions when content or dimensions change\n    measureText();\n  }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n  const hideTooltip = useCallback(() => {\n    async.clearTimeout(openTimerId.current!);\n    async.clearTimeout(dismissTimerId.current!);\n    setIsTooltipVisible(false);\n  }, [async]);\n\n  const onTooltipMouseEnter = useCallback(\n    (ev: React.MouseEvent<SVGElement>) => {\n      if (!isOverflowing) {\n        return;\n      }\n\n      if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n        return;\n      }\n\n      async.clearTimeout(dismissTimerId.current!);\n      async.clearTimeout(openTimerId.current!);\n\n      if (props.delay !== 0) {\n        openTimerId.current = async.setTimeout(() => {\n          setIsTooltipVisible(true);\n        }, props.delay!);\n      } else {\n        setIsTooltipVisible(true);\n      }\n    },\n    [isOverflowing, portalMountNode, async, props.delay],\n  );\n\n  const onTooltipMouseLeave = useCallback(\n    (ev: React.MouseEvent<SVGElement>) => {\n      async.clearTimeout(dismissTimerId.current!);\n      async.clearTimeout(openTimerId.current!);\n\n      if (props.closeDelay) {\n        dismissTimerId.current = async.setTimeout(() => {\n          setIsTooltipVisible(false);\n        }, props.closeDelay);\n      } else {\n        setIsTooltipVisible(false);\n      }\n    },\n    [async, props.closeDelay],\n  );\n\n  const onTooltipFocus = useCallback(\n    (ev: React.FocusEvent<SVGElement>) => {\n      if (ignoreNextFocusEvent.current) {\n        ignoreNextFocusEvent.current = false;\n        return;\n      }\n      onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n    },\n    [onTooltipMouseEnter],\n  );\n\n  const onTooltipBlur = useCallback(\n    (ev: React.FocusEvent<SVGElement>) => {\n      ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n      dismissTimerId.current = async.setTimeout(() => {\n        setIsTooltipVisible(false);\n      }, 0);\n    },\n    [async],\n  );\n\n  const onTooltipKeyDown = useCallback(\n    (ev: React.KeyboardEvent<SVGElement>) => {\n      if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n        hideTooltip();\n        ev.stopPropagation();\n      }\n    },\n    [isTooltipVisible, hideTooltip],\n  );\n\n  const showTooltip =\n    (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n  const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n  const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n\n  return (\n    <>\n      {props.showBackground && (\n        <rect\n          x={rectX}\n          y={rectY}\n          width={(textWidth ?? 0) + 2 * PADDING}\n          height={(textHeight ?? 0) + PADDING}\n          transform={props.textProps?.transform}\n          className={props.className}\n        />\n      )}\n      <Tooltip\n        relationship=\"description\"\n        {...props.tooltipProps}\n        withArrow\n        content={props.content}\n        // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n        visible={showTooltip}\n      >\n        <text\n          {...props.textProps}\n          id={tooltipHostId}\n          ref={tooltipHostRef}\n          onFocusCapture={onTooltipFocus}\n          onBlurCapture={onTooltipBlur}\n          onMouseEnter={onTooltipMouseEnter}\n          onMouseLeave={onTooltipMouseLeave}\n          onKeyDown={onTooltipKeyDown}\n          data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n        >\n          {props.content}\n        </text>\n      </Tooltip>\n    </>\n  );\n});\n\nSVGTooltipText.defaultProps = {\n  delay: 0,\n  showBackground: false,\n};\n"],"names":["SVGTooltipText","React","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","useState","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","useRef","async","Async","current","dismissTimerId","openTimerId","tooltipHostId","useId","ignoreNextFocusEvent","portalMountNode","usePortalMountNode","PADDING","wrapContentCallback","useCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","useEffect","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","KeyCodes","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","createElement","Fragment","showBackground","rect","transform","className","Tooltip","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/utilities/utilities.js

@@ -261,7 +261,7 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
     if (hideTickOverlap && typeof xAxisCount === 'undefined') {
         const longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '.fui-cart__xAxis text') + 20;
         const [start, end] = xAxisScale.range();
-        tickCount = Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
+        tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     }
     const xAxis = (0, _d3axis.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
     if (chartType === 6) {
@@ -508,7 +508,7 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
     };
     const longestLabelWidth = calculateLongestLabelWidth(xAxisScale.ticks().map(tickFormat), '.fui-cart__xAxis text') + 40;
     const [start, end] = xAxisScale.range();
-    const maxPossibleTickCount = Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
+    const maxPossibleTickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
     tickCount = Math.min(maxPossibleTickCount, xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : tickCount);
     const xAxis = (0, _d3axis.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
     tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';