@fluentui/react-charts 9.2.0 → 9.2.2

package/lib/components/ChartTable/ChartTable.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useChartTableStyles } from './useChartTableStyles.styles';
+import { useRtl } from '../../utilities/utilities';
+import { toImage } from '../../utilities/image-export-utils';
+export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { headers, rows, width, height } = props;
+    const _isRTL = useRtl();
+    const _rootElem = React.useRef(null);
+    const classes = useChartTableStyles(props);
+    React.useImperativeHandle(props.componentRef, ()=>({
+            chartContainer: _rootElem.current,
+            toImage: (opts)=>{
+                return toImage(_rootElem.current, undefined, _isRTL, opts);
+            }
+        }), []);
+    if (!headers || headers.length === 0) {
+        return /*#__PURE__*/ React.createElement("div", null, "No data available");
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: (el)=>_rootElem.current = el,
+        className: classes.root,
+        style: {
+            height: height ? `${height}px` : '650px',
+            overflow: 'hidden'
+        }
+    }, /*#__PURE__*/ React.createElement("svg", {
+        width: width !== null && width !== void 0 ? width : '100%',
+        height: height !== null && height !== void 0 ? height : '650px'
+    }, /*#__PURE__*/ React.createElement("foreignObject", {
+        x: "0",
+        y: "0",
+        width: "100%",
+        height: "100%"
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            maxHeight: height ? `${height}px` : '650px',
+            overflowY: 'auto',
+            overflowX: 'auto'
+        }
+    }, /*#__PURE__*/ React.createElement("table", {
+        className: classes.table,
+        style: {
+            width: width ? `${width}px` : '100%',
+            height: height ? `${height}px` : '650px'
+        }
+    }, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr", null, headers.map((header, idx)=>/*#__PURE__*/ React.createElement("th", {
+            key: idx,
+            className: classes.headerCell
+        }, header.value)))), rows && rows.length > 0 && /*#__PURE__*/ React.createElement("tbody", null, rows.map((row, rowIdx)=>/*#__PURE__*/ React.createElement("tr", {
+            key: rowIdx
+        }, row.map((cell, colIdx)=>/*#__PURE__*/ React.createElement("td", {
+                key: colIdx,
+                className: classes.bodyCell,
+                style: cell.style
+            }, cell.value))))))))));
+});
+ChartTable.displayName = 'ChartTable';

package/lib/components/ChartTable/ChartTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { useRtl } from '../../utilities/utilities';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n  (props, forwardedRef) => {\n    const { headers, rows, width, height } = props;\n    const _isRTL: boolean = useRtl();\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const classes = useChartTableStyles(props);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, undefined, _isRTL, opts);\n        },\n      }),\n      [],\n    );\n\n    if (!headers || headers.length === 0) {\n      return <div>No data available</div>;\n    }\n\n    return (\n      <div\n        ref={el => (_rootElem.current = el)}\n        className={classes.root as string}\n        style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n      >\n        <svg width={width ?? '100%'} height={height ?? '650px'}>\n          <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n            <div\n              style={{\n                maxHeight: height ? `${height}px` : '650px',\n                overflowY: 'auto',\n                overflowX: 'auto',\n              }}\n            >\n              <table\n                className={classes.table}\n                style={{\n                  width: width ? `${width}px` : '100%',\n                  height: height ? `${height}px` : '650px',\n                }}\n              >\n                <thead>\n                  <tr>\n                    {headers.map((header, idx) => (\n                      <th key={idx} className={classes.headerCell}>\n                        {header.value}\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n                {rows && rows.length > 0 && (\n                  <tbody>\n                    {rows.map((row, rowIdx) => (\n                      <tr key={rowIdx}>\n                        {row.map((cell, colIdx) => (\n                          <td key={colIdx} className={classes.bodyCell} style={cell.style}>\n                            {cell.value}\n                          </td>\n                        ))}\n                      </tr>\n                    ))}\n                  </tbody>\n                )}\n              </table>\n            </div>\n          </foreignObject>\n        </svg>\n      </div>\n    );\n  },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","useRtl","toImage","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","chartContainer","current","opts","undefined","length","div","ref","el","className","root","style","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","header","idx","th","key","headerCell","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,+BAA+B;AACnE,SAASC,MAAM,QAAQ,4BAA4B;AAEnD,SAASC,OAAO,QAAQ,qCAAqC;AAE7D,OAAO,MAAMC,2BAAuDJ,MAAMK,UAAU,CAClF,CAACC,OAAOC;IACN,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGL;IACzC,MAAMM,SAAkBV;IACxB,MAAMW,YAAYb,MAAMc,MAAM,CAAwB;IACtD,MAAMC,UAAUd,oBAAoBK;IAEpCN,MAAMgB,mBAAmB,CACvBV,MAAMW,YAAY,EAClB,IAAO,CAAA;YACLC,gBAAgBL,UAAUM,OAAO;YACjChB,SAAS,CAACiB;gBACR,OAAOjB,QAAQU,UAAUM,OAAO,EAAEE,WAAWT,QAAQQ;YACvD;QACF,CAAA,GACA,EAAE;IAGJ,IAAI,CAACZ,WAAWA,QAAQc,MAAM,KAAK,GAAG;QACpC,qBAAO,oBAACC,aAAI;IACd;IAEA,qBACE,oBAACA;QACCC,KAAKC,CAAAA,KAAOZ,UAAUM,OAAO,GAAGM;QAChCC,WAAWX,QAAQY,IAAI;QACvBC,OAAO;YAAEjB,QAAQA,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;YAASkB,UAAU;QAAS;qBAEtE,oBAACC;QAAIpB,OAAOA,kBAAAA,mBAAAA,QAAS;QAAQC,QAAQA,mBAAAA,oBAAAA,SAAU;qBAC7C,oBAACoB;QAAcC,GAAE;QAAIC,GAAE;QAAIvB,OAAM;QAAOC,QAAO;qBAC7C,oBAACY;QACCK,OAAO;YACLM,WAAWvB,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;YACpCwB,WAAW;YACXC,WAAW;QACb;qBAEA,oBAACC;QACCX,WAAWX,QAAQsB,KAAK;QACxBT,OAAO;YACLlB,OAAOA,QAAQ,GAAGA,MAAM,EAAE,CAAC,GAAG;YAC9BC,QAAQA,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;QACnC;qBAEA,oBAAC2B,6BACC,oBAACC,YACE/B,QAAQgC,GAAG,CAAC,CAACC,QAAQC,oBACpB,oBAACC;YAAGC,KAAKF;YAAKhB,WAAWX,QAAQ8B,UAAU;WACxCJ,OAAOK,KAAK,MAKpBrC,QAAQA,KAAKa,MAAM,GAAG,mBACrB,oBAACyB,eACEtC,KAAK+B,GAAG,CAAC,CAACQ,KAAKC,uBACd,oBAACV;YAAGK,KAAKK;WACND,IAAIR,GAAG,CAAC,CAACU,MAAMC,uBACd,oBAACC;gBAAGR,KAAKO;gBAAQzB,WAAWX,QAAQsC,QAAQ;gBAAEzB,OAAOsB,KAAKtB,KAAK;eAC5DsB,KAAKJ,KAAK;AAarC,GACA;AAEF1C,WAAWkD,WAAW,GAAG"}

package/lib/components/ChartTable/ChartTable.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/ChartTable/ChartTable.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ChartTable/ChartTable.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Chart } from './index';\n\n/**\n * Chart Table properties\n * {@docCategory ChartTable}\n */\nexport interface ChartTableProps {\n  /**\n   * 1d or 2d Array of header values.\n   */\n  headers: { value: string | number | boolean | null; style?: React.CSSProperties }[];\n\n  /**\n   * Array of rows. Each row corresponds to one data entry under each column.\n   */\n  rows: { value: string | number | boolean | null; style?: React.CSSProperties }[][];\n\n  /**\n   * Optional width for the table\n   * @default '100%'\n   */\n  width?: string | number;\n\n  /**\n   * Optional height for the table\n   * @default '650px'\n   */\n  height?: string | number;\n\n  /**\n   * Additional class name(s) to apply to the table chart\n   */\n  className?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: ChartTableStyles;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<Chart>;\n}\n\n/**\n * Table Chart styles\n * {@docCategory ChartTable}\n */\nexport interface ChartTableStyles {\n  root?: string | React.CSSProperties;\n  table?: string;\n  headerCell?: string;\n  bodyCell?: string;\n  chart?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/ChartTable/index.js

@@ -0,0 +1,3 @@
+export * from './ChartTable';
+export * from './ChartTable.types';
+export * from '../../types/index';

package/lib/components/ChartTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ChartTable/index.ts"],"sourcesContent":["export * from './ChartTable';\nexport * from './ChartTable.types';\nexport * from '../../types/index';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,oBAAoB"}

package/lib/components/ChartTable/useChartTableStyles.styles.js

@@ -0,0 +1,93 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+/**
+ * @internal
+ */
+export const chartTableClassNames = {
+  root: 'fui-ChartTable__root',
+  table: 'fui-ChartTable__table',
+  headerCell: 'fui-ChartTable__headerCell',
+  bodyCell: 'fui-ChartTable__bodyCell',
+  chart: 'fui-ChartTable__chart'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    a9b677: "fly5x3f",
+    B68tc82: "f1oy3dpc"
+  },
+  table: {
+    po53p8: "fgkb47j"
+  },
+  headerCell: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm",
+    De3pzq: "f16xq7d1",
+    sj55zd: "f19n0e5",
+    z8tnut: "f17mpqex",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "fdvome7",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    fsow6f: ["f1o700av", "fes3tcz"],
+    B4j52fo: "f18zi460",
+    Bekrc4i: ["f1wpluaz", "fsfsuhs"],
+    Bn0qgzm: "fmklw6v",
+    ibv6hh: ["fsfsuhs", "f1wpluaz"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"],
+    Bsw6fvg: "f8pusc0",
+    Bbusuzp: "fqgauei"
+  },
+  bodyCell: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    z8tnut: "f17mpqex",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "fdvome7",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    B4j52fo: "f18zi460",
+    Bekrc4i: ["f1wpluaz", "fsfsuhs"],
+    Bn0qgzm: "fmklw6v",
+    ibv6hh: ["fsfsuhs", "f1wpluaz"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"],
+    sj55zd: "f19n0e5",
+    fsow6f: ["f1o700av", "fes3tcz"],
+    Bbusuzp: "fqgauei"
+  }
+}, {
+  d: [".fly5x3f{width:100%;}", ".f1oy3dpc{overflow-x:auto;}", ".fgkb47j{border-collapse:collapse;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".figsok6{font-weight:var(--fontWeightRegular);}"],
+  m: [["@media (forced-colors: active){.f8pusc0{background-color:Window;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqgauei{color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+/**
+ * Apply styling to the ChartTable slots based on the state
+ */
+export const useChartTableStyles = props => {
+  const baseStyles = useStyles();
+  return {
+    root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/),
+    table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/),
+    headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/),
+    bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/),
+    chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/)
+  };
+};

package/lib/components/ChartTable/useChartTableStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","z8tnut","z189sj","Byoj8tv","uwmqm3","fsow6f","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bsw6fvg","Bbusuzp","d","m","useChartTableStyles","props","baseStyles"],"sources":["useChartTableStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const chartTableClassNames = {\n    root: 'fui-ChartTable__root',\n    table: 'fui-ChartTable__table',\n    headerCell: 'fui-ChartTable__headerCell',\n    bodyCell: 'fui-ChartTable__bodyCell',\n    chart: 'fui-ChartTable__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        overflowX: 'auto'\n    },\n    table: {\n        borderCollapse: 'collapse'\n    },\n    headerCell: {\n        ...typographyStyles.caption1,\n        fontWeight: tokens.fontWeightSemibold,\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground1,\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        textAlign: 'left',\n        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Window',\n            color: 'WindowText'\n        }\n    },\n    bodyCell: {\n        ...typographyStyles.caption1,\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n        color: tokens.colorNeutralForeground1,\n        textAlign: 'left',\n        '@media (forced-colors: active)': {\n            color: 'WindowText'\n        }\n    }\n});\n/**\n * Apply styling to the ChartTable slots based on the state\n */ export const useChartTableStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),\n        headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),\n        bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),\n        chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,sBAAsB;EAC5BC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,QAAQ,EAAE,0BAA0B;EACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGX,QAAA;EAAAM,IAAA;IAAAM,MAAA;IAAAC,OAAA;EAAA;EAAAN,KAAA;IAAAO,MAAA;EAAA;EAAAN,UAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA9B,QAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAjB,MAAA;IAAAK,MAAA;IAAAc,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA+BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,MAAMC,UAAU,GAAGjC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEL,YAAY,CAACI,oBAAoB,CAACC,IAAI,EAAEsC,UAAU,CAACtC,IAAI,CAAC,sBAAuB,CAAC;IACtFC,KAAK,EAAEN,YAAY,CAACI,oBAAoB,CAACE,KAAK,EAAEqC,UAAU,CAACrC,KAAK,CAAC,uBAAwB,CAAC;IAC1FC,UAAU,EAAEP,YAAY,CAACI,oBAAoB,CAACG,UAAU,EAAEoC,UAAU,CAACpC,UAAU,CAAC,4BAA6B,CAAC;IAC9GC,QAAQ,EAAER,YAAY,CAACI,oBAAoB,CAACI,QAAQ,EAAEmC,UAAU,CAACnC,QAAQ,CAAC,0BAA2B,CAAC;IACtGC,KAAK,EAAET,YAAY,CAACI,oBAAoB,CAACK,KAAK,CAAC,uBAAwB;EAC3E,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/ChartTable/useChartTableStyles.styles.raw.js

@@ -0,0 +1,55 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+/**
+ * @internal
+ */ export const chartTableClassNames = {
+    root: 'fui-ChartTable__root',
+    table: 'fui-ChartTable__table',
+    headerCell: 'fui-ChartTable__headerCell',
+    bodyCell: 'fui-ChartTable__bodyCell',
+    chart: 'fui-ChartTable__chart'
+};
+const useStyles = makeStyles({
+    root: {
+        width: '100%',
+        overflowX: 'auto'
+    },
+    table: {
+        borderCollapse: 'collapse'
+    },
+    headerCell: {
+        ...typographyStyles.caption1,
+        fontWeight: tokens.fontWeightSemibold,
+        backgroundColor: tokens.colorNeutralBackground3,
+        color: tokens.colorNeutralForeground1,
+        ...shorthands.padding(tokens.spacingHorizontalS),
+        textAlign: 'left',
+        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Window',
+            color: 'WindowText'
+        }
+    },
+    bodyCell: {
+        ...typographyStyles.caption1,
+        ...shorthands.padding(tokens.spacingHorizontalS),
+        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
+        color: tokens.colorNeutralForeground1,
+        textAlign: 'left',
+        '@media (forced-colors: active)': {
+            color: 'WindowText'
+        }
+    }
+});
+/**
+ * Apply styling to the ChartTable slots based on the state
+ */ export const useChartTableStyles = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),
+        table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),
+        headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),
+        bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),
+        chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/ )
+    };
+};

package/lib/components/ChartTable/useChartTableStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ChartTableProps, ChartTableStyles } from './ChartTable.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\n/**\n * @internal\n */\nexport const chartTableClassNames: SlotClassNames<ChartTableStyles> = {\n  root: 'fui-ChartTable__root',\n  table: 'fui-ChartTable__table',\n  headerCell: 'fui-ChartTable__headerCell',\n  bodyCell: 'fui-ChartTable__bodyCell',\n  chart: 'fui-ChartTable__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    overflowX: 'auto',\n  },\n  table: {\n    borderCollapse: 'collapse',\n  },\n  headerCell: {\n    ...typographyStyles.caption1,\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    textAlign: 'left',\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n  },\n  bodyCell: {\n    ...typographyStyles.caption1,\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n    color: tokens.colorNeutralForeground1,\n    textAlign: 'left',\n    '@media (forced-colors: active)': {\n      color: 'WindowText',\n    },\n  },\n});\n\n/**\n * Apply styling to the ChartTable slots based on the state\n */\nexport const useChartTableStyles = (props: ChartTableProps): ChartTableStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/),\n    table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/),\n    headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/),\n    bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/),\n    chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","width","overflowX","borderCollapse","caption1","fontWeight","fontWeightSemibold","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground1","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","useChartTableStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE;;CAEC,GACD,OAAO,MAAMC,uBAAyD;IACpEC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYX,WAAW;IAC3BM,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,iBAAiBW,QAAQ;QAC5BC,YAAYb,OAAOc,kBAAkB;QACrCC,iBAAiBf,OAAOgB,uBAAuB;QAC/CC,OAAOjB,OAAOkB,uBAAuB;QACrC,GAAGnB,WAAWoB,OAAO,CAACnB,OAAOoB,kBAAkB,CAAC;QAChDC,WAAW;QACX,GAAGtB,WAAWuB,MAAM,CAACtB,OAAOuB,gBAAgB,EAAE,SAASvB,OAAOwB,mBAAmB,CAAC;QAClF,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,iBAAiBW,QAAQ;QAC5B,GAAGb,WAAWoB,OAAO,CAACnB,OAAOoB,kBAAkB,CAAC;QAChD,GAAGrB,WAAWuB,MAAM,CAACtB,OAAOuB,gBAAgB,EAAE,SAASvB,OAAOwB,mBAAmB,CAAC;QAClFP,OAAOjB,OAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,sBAAsB,CAACC;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,MAAML,aAAaI,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,OAAON,aAAaI,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,YAAYP,aAAaI,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,UAAUR,aAAaI,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,OAAOT,aAAaI,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}

package/lib/components/CommonComponents/CartesianChart.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCartesianChartStyles } from './useCartesianChartStyles.styles';
 import { select as d3Select } from 'd3-selection';
-import { createNumericXAxis, createStringXAxis, createDateXAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, useRtl, truncateString, tooltipOfAxislabels, getSecureProps } from '../../utilities/index';
+import { createNumericXAxis, createStringXAxis, createDateXAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, useRtl, truncateString, tooltipOfAxislabels, getSecureProps, DEFAULT_WRAP_WIDTH } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
 import { ChartPopover } from './ChartPopover';
@@ -28,10 +28,14 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     let _xScale;
     let isIntegralDataset = true;
     let _tooltipId = useId('tooltip_');
+    /* Used for when WrapXAxisLabels props appeared.
+   * To display the total word (space separated words), Need to have more space than usual.
+   * This height will get total height need to disaply total word.
+   * These value need to be removed from actual svg height/graph height.
+   * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true.
+   */ let _removalValueForTextTuncate = 0;
     const [containerWidth, setContainerWidth] = React.useState(0);
     const [containerHeight, setContainerHeight] = React.useState(0);
-    const [isRemoveValCalculated, setIsRemoveValCalculated] = React.useState(true);
-    const [removalValueForTextTuncate, setRemovalValueForTextTuncate] = React.useState(0);
     const [startFromX, setStartFromX] = React.useState(0);
     const [prevProps, setPrevProps] = React.useState(null);
     const chartTypesToCheck = [
@@ -114,19 +118,6 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         props,
         prevProps
     ]);
-    React.useEffect(()=>{
-        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === XAxisTypes.StringAxis) {
-            const rotateLabelProps = {
-                node: xAxisElement.current,
-                xAxis: _xScale
-            };
-            const rotatedHeight = rotateXAxisLabels(rotateLabelProps);
-            if (isRemoveValCalculated && removalValueForTextTuncate !== rotatedHeight + margins.bottom && rotatedHeight > 0) {
-                setRemovalValueForTextTuncate(rotatedHeight + margins.bottom);
-                setIsRemoveValCalculated(false);
-            }
-        }
-    });
     React.useImperativeHandle(props.componentRef, ()=>{
         var _chartContainer_current;
         return {
@@ -182,7 +173,13 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         const XAxisParams = {
             domainNRangeValues: props.getDomainNRangeValues(points, props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins, containerWidth, chartType, _useRtl, props.xAxisType, props.barwidth, props.tickValues, // This is only used for Horizontal Bar Chart with Axis for y as string axis
             startFromX),
-            containerHeight: containerHeight - removalValueForTextTuncate,
+            // FIXME: In XAxisParams, containerHeight is used by HBWA to generate vertical gridlines.
+            // Since the x-axis in HBWA is numeric, it typically doesn't require transformation.
+            // However, if transformation props are enabled, the updated _removalValueForTextTuncate
+            // will only be available in the next render, as it's set after the axis is created.
+            // Solution: Delay the creation of gridlines until after the transformation has been applied,
+            // or precompute the required height for transformed labels (_removalValueForTextTuncate).
+            containerHeight: containerHeight - _removalValueForTextTuncate,
             margins: margins,
             xAxisElement: xAxisElement.current,
             showRoundOffXTickValues: (_props_showRoundOffXTickValues = props.showRoundOffXTickValues) !== null && _props_showRoundOffXTickValues !== void 0 ? _props_showRoundOffXTickValues : true,
@@ -193,24 +190,8 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             xAxisInnerPadding: props.xAxisInnerPadding,
             xAxisOuterPadding: props.xAxisOuterPadding,
             containerWidth: containerWidth,
-            hideTickOverlap: props.hideTickOverlap && !props.rotateXAxisLables && !props.showXAxisLablesTooltip && !props.wrapXAxisLables
-        };
-        const YAxisParams = {
-            margins: props.getYDomainMargins ? props.getYDomainMargins(containerHeight) : margins,
-            containerWidth: containerWidth,
-            containerHeight: containerHeight - removalValueForTextTuncate,
-            yAxisElement: yAxisElement.current,
-            yAxisTickFormat: props.yAxisTickFormat,
-            yAxisTickCount: props.yAxisTickCount,
-            yMinValue: props.yMinValue || 0,
-            yMaxValue: props.yMaxValue || 0,
-            tickPadding: props.showYAxisLablesTooltip ? 15 : 10,
-            maxOfYVal: props.maxOfYVal,
-            yMinMaxValues: props.getMinMaxOfYAxis(points, props.yAxisType),
-            // please note these padding default values must be consistent in here
-            // and the parent chart(HBWA/Vertical etc..) for more details refer example
-            // http://using-d3js.com/04_07_ordinal_scales.html
-            yAxisPadding: props.yAxisPadding || 0
+            hideTickOverlap: props.rotateXAxisLables ? false : props.hideTickOverlap,
+            calcMaxLabelWidth: _calcMaxLabelWidthWithTransform
         };
         /**
      * These scales used for 2 purposes.
@@ -235,25 +216,24 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         }
         _xScale = xScale;
         _tickValues = tickValues;
-        /*
-     * To enable wrapping of x axis tick values or to display complete x axis tick values,
-     * we need to calculate how much space it needed to render the text.
-     * No need to re-calculate every time the chart renders and same time need to get an update. So using set
-     * Required space will be calculated first time chart rendering and if any width/height of chart updated.
-     * */ if (props.wrapXAxisLables || props.showXAxisLablesTooltip) {
-            const wrapLabelProps = {
-                node: xAxisElement.current,
-                xAxis: xScale,
-                showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,
-                noOfCharsToTruncate: props.noOfCharsToTruncate || 4
-            };
-            const temp = xScale && createWrapOfXLabels(wrapLabelProps);
-            // this value need to be updated for draw graph updated. So instead of using private value, using set
-            if (isRemoveValCalculated && removalValueForTextTuncate !== temp) {
-                setRemovalValueForTextTuncate(temp);
-                setIsRemoveValCalculated(false);
-            }
-        }
+        _transformXAxisLabels();
+        const YAxisParams = {
+            margins: props.getYDomainMargins ? props.getYDomainMargins(containerHeight) : margins,
+            containerWidth: containerWidth,
+            containerHeight: containerHeight - _removalValueForTextTuncate,
+            yAxisElement: yAxisElement.current,
+            yAxisTickFormat: props.yAxisTickFormat,
+            yAxisTickCount: props.yAxisTickCount,
+            yMinValue: props.yMinValue || 0,
+            yMaxValue: props.yMaxValue || 0,
+            tickPadding: 10,
+            maxOfYVal: props.maxOfYVal,
+            yMinMaxValues: props.getMinMaxOfYAxis(points, props.yAxisType),
+            // please note these padding default values must be consistent in here
+            // and the parent chart(HBWA/Vertical etc..) for more details refer example
+            // http://using-d3js.com/04_07_ordinal_scales.html
+            yAxisPadding: props.yAxisPadding || 0
+        };
         /**
      * These scales used for 2 purposes.
      * 1. To create x and y axis
@@ -280,7 +260,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
                 const YAxisParamsSecondary = {
                     margins: margins,
                     containerWidth: containerWidth,
-                    containerHeight: containerHeight - removalValueForTextTuncate,
+                    containerHeight: containerHeight - _removalValueForTextTuncate,
                     yAxisElement: yAxisElementSecondary.current,
                     yAxisTickFormat: props.yAxisTickFormat,
                     yAxisTickCount: props.yAxisTickCount,
@@ -327,7 +307,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         // Call back to the chart.
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const _getData = (xScale, yScalePrimary, yScaleSecondary)=>{
-            props.getGraphData && props.getGraphData(xScale, yScalePrimary, containerHeight - removalValueForTextTuncate, containerWidth, xAxisElement.current, yAxisElement.current, yScaleSecondary);
+            props.getGraphData && props.getGraphData(xScale, yScalePrimary, containerHeight - _removalValueForTextTuncate, containerWidth, xAxisElement.current, yAxisElement.current, yScaleSecondary);
         };
         props.getAxisData && props.getAxisData(axisData);
         // Callback function for chart, returns axis
@@ -348,7 +328,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         height: containerHeight
     };
     const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left - margins.right - startFromX;
-    const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - removalValueForTextTuncate - titleMargin;
+    const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - _removalValueForTextTuncate - titleMargin;
     /**
    * When screen resizes, along with screen, chart also auto adjusted.
    * This method used to adjust height and width of the charts.
@@ -379,39 +359,88 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         props.onChartMouseLeave && props.onChartMouseLeave();
     }
     function _calculateChartMinWidth() {
-        let labelWidth = 10; // Total padding on the left and right sides of the label
+        // Adding 10px for padding on both sides
+        const labelWidth = _calcMaxLabelWidthWithTransform(_tickValues) + 10;
+        let minChartWidth = margins.left + margins.right + labelWidth * (_tickValues.length - 1);
+        if ([
+            ChartTypes.GroupedVerticalBarChart,
+            ChartTypes.VerticalBarChart,
+            ChartTypes.VerticalStackedBarChart
+        ].includes(props.chartType)) {
+            const minDomainMargin = 8;
+            minChartWidth += minDomainMargin * 2;
+        }
+        return minChartWidth;
+    }
+    function _calcMaxLabelWidthWithTransform(x) {
         // Case: rotated labels
         if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === XAxisTypes.StringAxis) {
-            const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);
-            labelWidth += Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
-        } else if (props.showXAxisLablesTooltip) {
-            const tickValues = _tickValues.map((val)=>{
+            const longestLabelWidth = calculateLongestLabelWidth(x, `.${classes.xAxis} text`);
+            return Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
+        }
+        // Case: truncated labels
+        if (props.showXAxisLablesTooltip) {
+            const tickValues = x.map((val)=>{
                 const numChars = props.noOfCharsToTruncate || 4;
                 return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;
             });
             const longestLabelWidth = calculateLongestLabelWidth(tickValues, `.${classes.xAxis} text`);
-            labelWidth += Math.ceil(longestLabelWidth);
-        } else if (props.wrapXAxisLables) {
+            return Math.ceil(longestLabelWidth);
+        }
+        // Case: wrapped labels
+        if (props.wrapXAxisLables) {
+            // FIXME: Calculate the max width of lines instead of words. This requires applying
+            // the wrapping transformation earlier to obtain the actual rendered lines.
             const words = [];
-            _tickValues.forEach((val)=>{
+            x.forEach((val)=>{
                 words.push(...val.toString().split(/\s+/));
             });
+            // This approach works well in most cases, since overflow typically occurs only when
+            // a single word exceeds the specified width — otherwise, the text will wrap as expected.
             const longestLabelWidth = calculateLongestLabelWidth(words, `.${classes.xAxis} text`);
-            labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);
-        } else {
-            const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);
-            labelWidth += Math.ceil(longestLabelWidth);
+            return Math.max(Math.ceil(longestLabelWidth), DEFAULT_WRAP_WIDTH);
         }
-        let minChartWidth = margins.left + margins.right + labelWidth * (_tickValues.length - 1);
-        if ([
-            ChartTypes.GroupedVerticalBarChart,
-            ChartTypes.VerticalBarChart,
-            ChartTypes.VerticalStackedBarChart
-        ].includes(props.chartType)) {
-            const minDomainMargin = 8;
-            minChartWidth += minDomainMargin * 2;
+        // Default case
+        const longestLabelWidth = calculateLongestLabelWidth(x, `.${classes.xAxis} text`);
+        return Math.ceil(longestLabelWidth);
+    }
+    function _transformXAxisLabels() {
+        _removalValueForTextTuncate = 0;
+        /*
+     * To enable wrapping of x axis tick values or to display complete x axis tick values,
+     * we need to calculate how much space it needed to render the text.
+     * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
+     * Required space will be calculated first time chart rendering and if any width/height of chart updated.
+     * */ if (props.wrapXAxisLables || props.showXAxisLablesTooltip) {
+            let maxXAxisLabelWidth;
+            if (props.xAxisType === XAxisTypes.StringAxis) {
+                var _props_datasetForXAxisDomain;
+                if ((((_props_datasetForXAxisDomain = props.datasetForXAxisDomain) === null || _props_datasetForXAxisDomain === void 0 ? void 0 : _props_datasetForXAxisDomain.length) || 0) > 1) {
+                    maxXAxisLabelWidth = _xScale.step();
+                } else {
+                    maxXAxisLabelWidth = containerWidth;
+                }
+            }
+            const wrapLabelProps = {
+                node: xAxisElement.current,
+                xAxis: _xScale,
+                showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,
+                noOfCharsToTruncate: props.noOfCharsToTruncate || 4,
+                width: maxXAxisLabelWidth
+            };
+            var _createWrapOfXLabels;
+            _removalValueForTextTuncate = (_createWrapOfXLabels = createWrapOfXLabels(wrapLabelProps)) !== null && _createWrapOfXLabels !== void 0 ? _createWrapOfXLabels : 0;
+        }
+        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === XAxisTypes.StringAxis) {
+            const rotateLabelProps = {
+                node: xAxisElement.current,
+                xAxis: _xScale
+            };
+            var _rotateXAxisLabels;
+            const rotatedHeight = (_rotateXAxisLabels = rotateXAxisLabels(rotateLabelProps)) !== null && _rotateXAxisLabels !== void 0 ? _rotateXAxisLabels : 0;
+            // margins.bottom is used as padding here
+            _removalValueForTextTuncate = rotatedHeight + margins.bottom;
         }
-        return minChartWidth;
     }
     /**
    * We have use the {@link defaultTabbableElement } to fix
@@ -456,7 +485,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         },
         id: `xAxisGElement${idForGraph}`,
         // To add wrap of x axis lables feature, need to remove word height from svg height.
-        transform: `translate(0, ${svgDimensions.height - margins.bottom - removalValueForTextTuncate})`,
+        transform: `translate(0, ${svgDimensions.height - margins.bottom - _removalValueForTextTuncate})`,
         className: classes.xAxis
     }), props.xAxisTitle !== undefined && props.xAxisTitle !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
         content: props.xAxisTitle,
@@ -487,7 +516,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
         content: props.secondaryYAxistitle,
         textProps: {
-            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + removalValueForTextTuncate,
+            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
             y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
             textAnchor: 'middle',
             transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
@@ -501,7 +530,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
         content: props.yAxisTitle,
         textProps: {
-            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + removalValueForTextTuncate,
+            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
             y: _useRtl ? svgDimensions.width - margins.right / 2 + titleMargin : margins.left / 2 - titleMargin,
             textAnchor: 'middle',
             transform: `translate(0,