@fluentui/react-charts 9.2.3 → 9.3.0

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

@@ -1 +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} style={header?.style}>\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;YAAEjB,KAAK,EAAEa,mBAAAA,6BAAAA,OAAQb,KAAK;WAC9Da,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,KAAK,EAAEsB,iBAAAA,2BAAAA,KAAMtB,KAAK;eAC7DsB,KAAKJ,KAAK;AAarC,GACA;AAEF1C,WAAWkD,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\n\nfunction invertHexColor(hex: string): string {\n  const color = d3.color(hex);\n  if (!color) {\n    return tokens.colorNeutralForeground1!;\n  }\n  const rgb = color.rgb();\n  return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(v9Theme: Theme, foreground?: string, background?: string): string {\n  const fallbackFg = v9Theme.colorNeutralForeground1;\n  const fallbackBg = v9Theme.colorNeutralBackground1;\n\n  const fg = d3.color(foreground || fallbackFg);\n  const bg = d3.color(background || fallbackBg);\n  if (!fg || !bg) {\n    return fallbackBg;\n  }\n  const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n  if (contrast >= 3) {\n    return bg.formatHex();\n  }\n\n  const invertedBg = invertHexColor(bg.formatHex());\n  const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n  return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n  (props, forwardedRef) => {\n    const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n    const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\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    const bgColorSet = new Set<string>();\n    headers.forEach(header => {\n      const bg = header?.style?.backgroundColor;\n      const normalized = d3.color(bg || '')?.formatHex();\n      if (normalized) {\n        bgColorSet.add(normalized);\n      }\n    });\n    let sharedBackgroundColor: string | undefined;\n    let useSharedBackground = false;\n\n    /*\n    If we have only one or two unique background colors, we can consider using a shared background color\n    for the table headers. This is to ensure better contrast with the foreground text.\n    For size 1, we will consider that as default color if it satisfies the contrast ratio.\n    There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n    which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n    color won't run here. So will consider for size 2 as well.\n    For size greater than this, we will consider that user wants different colors and will let color contrast fail\n    if any.\n    */\n    if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n      const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n      for (const header of headers) {\n        const fg = header?.style?.color;\n        if (fg && getColorContrast(fg, candidateBg) >= 3) {\n          sharedBackgroundColor = candidateBg;\n          useSharedBackground = true;\n          break;\n        }\n      }\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                }}\n              >\n                <thead>\n                  <tr>\n                    {headers.map((header, idx) => {\n                      const style = { ...header?.style };\n                      const fg = style.color;\n                      const bg = style.backgroundColor;\n\n                      if (useSharedBackground) {\n                        style.backgroundColor = sharedBackgroundColor;\n                      } else if (fg || bg) {\n                        style.backgroundColor = getSafeBackgroundColor(v9Theme, fg, bg);\n                      }\n                      return (\n                        <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n                          {header.value}\n                        </th>\n                      );\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                          const style = { ...cell?.style };\n                          const fg = style.color;\n                          const bg = style.backgroundColor;\n                          if (fg || bg) {\n                            style.backgroundColor = getSafeBackgroundColor(v9Theme, fg, bg);\n                          }\n                          return (\n                            <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n                              {cell.value}\n                            </td>\n                          );\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","tokens","d3","getColorContrast","ThemeContext_unstable","V9ThemeContext","webLightTheme","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","v9Theme","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","parentV9Theme","useContext","headers","rows","width","height","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","chartContainer","current","opts","undefined","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","className","root","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 /**
@@ -24,7 +26,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bhrd7zp: "fl43uef",
     Bg96gwp: "fwrc4pm",
     De3pzq: "f16xq7d1",
-    sj55zd: "f19n0e5",
+    sj55zd: "f1o4jmwm",
     z8tnut: "f17mpqex",
     z189sj: ["f1vdfbxk", "f1f5gg8d"],
     Byoj8tv: "fdvome7",
@@ -66,12 +68,12 @@ const useStyles = /*#__PURE__*/__styles({
     h3c5rm: ["f7pw515", "fw35ms5"],
     B9xav0g: "frpde29",
     zhjwy3: ["fw35ms5", "f7pw515"],
-    sj55zd: "f19n0e5",
+    sj55zd: "f1o4jmwm",
     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);}"],
+  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);}", ".f1o4jmwm{color:black;}", ".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;}}", {

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

@@ -1 +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":[]}
+{"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":["'use client';\nimport { 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: 'black',\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: 'black',\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,YAAY;;AACZ,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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 /**
@@ -21,7 +22,7 @@ const useStyles = makeStyles({
         ...typographyStyles.caption1,
         fontWeight: tokens.fontWeightSemibold,
         backgroundColor: tokens.colorNeutralBackground3,
-        color: tokens.colorNeutralForeground1,
+        color: 'black',
         ...shorthands.padding(tokens.spacingHorizontalS),
         textAlign: 'left',
         ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
@@ -34,7 +35,7 @@ const useStyles = makeStyles({
         ...typographyStyles.caption1,
         ...shorthands.padding(tokens.spacingHorizontalS),
         ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
-        color: tokens.colorNeutralForeground1,
+        color: 'black',
         textAlign: 'left',
         '@media (forced-colors: active)': {
             color: 'WindowText'

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

@@ -1 +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"}
+{"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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: 'black',\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: 'black',\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","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","useChartTableStyles","props","baseStyles"],"mappings":"AAAA;AAEA,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,OAAO;QACP,GAAGlB,WAAWmB,OAAO,CAAClB,OAAOmB,kBAAkB,CAAC;QAChDC,WAAW;QACX,GAAGrB,WAAWsB,MAAM,CAACrB,OAAOsB,gBAAgB,EAAE,SAAStB,OAAOuB,mBAAmB,CAAC;QAClF,kCAAkC;YAChCR,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,iBAAiBW,QAAQ;QAC5B,GAAGb,WAAWmB,OAAO,CAAClB,OAAOmB,kBAAkB,CAAC;QAChD,GAAGpB,WAAWsB,MAAM,CAACrB,OAAOsB,gBAAgB,EAAE,SAAStB,OAAOuB,mBAAmB,CAAC;QAClFN,OAAO;QACPG,WAAW;QACX,kCAAkC;YAChCH,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,sBAAsB,CAACC;IAClC,MAAMC,aAAalB;IAEnB,OAAO;QACLL,MAAML,aAAaI,qBAAqBC,IAAI,EAAEuB,WAAWvB,IAAI,CAAC,oBAAoB;QAClFC,OAAON,aAAaI,qBAAqBE,KAAK,EAAEsB,WAAWtB,KAAK,CAAC,qBAAqB;QACtFC,YAAYP,aAAaI,qBAAqBG,UAAU,EAAEqB,WAAWrB,UAAU,CAAC,0BAA0B;QAC1GC,UAAUR,aAAaI,qBAAqBI,QAAQ,EAAEoB,WAAWpB,QAAQ,CAAC,wBAAwB;QAClGC,OAAOT,aAAaI,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}

package/lib/components/CommonComponents/CartesianChart.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCartesianChartStyles } from './useCartesianChartStyles.styles';
 import { select as d3Select } from 'd3-selection';
@@ -26,7 +27,11 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     const _isFirstRender = React.useRef(true);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _xScale;
-    let isIntegralDataset = true;
+    const isIntegralDataset = React.useMemo(()=>{
+        return !props.points.some((point)=>point.y % 1 !== 0);
+    }, [
+        props.points
+    ]);
     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.
@@ -42,7 +47,8 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         ChartTypes.HorizontalBarChartWithAxis,
         ChartTypes.HeatMapChart,
         ChartTypes.VerticalStackedBarChart,
-        ChartTypes.GanttChart
+        ChartTypes.GanttChart,
+        ChartTypes.ScatterChart
     ];
     var _props_margins_top, _props_margins_bottom, _props_margins_left, _props_margins_right, _props_margins_right1, _props_margins_left1;
     /**
@@ -57,33 +63,34 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         right: _useRtl ? (_props_margins_left = (_props_margins2 = props.margins) === null || _props_margins2 === void 0 ? void 0 : _props_margins2.left) !== null && _props_margins_left !== void 0 ? _props_margins_left : 40 : ((_props_margins_right = (_props_margins3 = props.margins) === null || _props_margins3 === void 0 ? void 0 : _props_margins3.right) !== null && _props_margins_right !== void 0 ? _props_margins_right : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20,
         left: _useRtl ? ((_props_margins_right1 = (_props_margins4 = props.margins) === null || _props_margins4 === void 0 ? void 0 : _props_margins4.right) !== null && _props_margins_right1 !== void 0 ? _props_margins_right1 : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20 : (_props_margins_left1 = (_props_margins5 = props.margins) === null || _props_margins5 === void 0 ? void 0 : _props_margins5.left) !== null && _props_margins_left1 !== void 0 ? _props_margins_left1 : 40
     };
-    const TITLE_MARGIN = 20;
+    const TITLE_MARGIN_HORIZONTAL = 24;
+    const TITLE_MARGIN_VERTICAL = 20;
     if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {
         var _props_margins6;
         var _props_margins_bottom1;
-        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : margins.bottom + TITLE_MARGIN;
+        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : margins.bottom + TITLE_MARGIN_VERTICAL;
     }
     if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {
         var _props_margins7, _props_margins8, _props_margins9, _props_margins10;
         var _props_margins_right2, _props_margins_left2;
-        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN : margins.right + TITLE_MARGIN : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : margins.left + TITLE_MARGIN;
+        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN_HORIZONTAL : margins.right + TITLE_MARGIN_HORIZONTAL : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : margins.left + TITLE_MARGIN_HORIZONTAL;
         var _props_margins_left3, _props_margins_right3;
-        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : margins.left + TITLE_MARGIN : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN : margins.right + TITLE_MARGIN;
+        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : margins.left + TITLE_MARGIN_HORIZONTAL : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN_HORIZONTAL : margins.right + TITLE_MARGIN_HORIZONTAL;
     }
     if (props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '') {
         var _props_margins11;
         var _props_margins_top1;
-        margins.top = (_props_margins_top1 = (_props_margins11 = props.margins) === null || _props_margins11 === void 0 ? void 0 : _props_margins11.top) !== null && _props_margins_top1 !== void 0 ? _props_margins_top1 : margins.top + TITLE_MARGIN;
+        margins.top = (_props_margins_top1 = (_props_margins11 = props.margins) === null || _props_margins11 === void 0 ? void 0 : _props_margins11.top) !== null && _props_margins_top1 !== void 0 ? _props_margins_top1 : margins.top + TITLE_MARGIN_VERTICAL;
     }
     if (props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '')) {
         if (_useRtl) {
             var _props_margins12;
             var _props_margins_right4;
-            margins.left = (_props_margins_right4 = (_props_margins12 = props.margins) === null || _props_margins12 === void 0 ? void 0 : _props_margins12.right) !== null && _props_margins_right4 !== void 0 ? _props_margins_right4 : margins.right + TITLE_MARGIN;
+            margins.left = (_props_margins_right4 = (_props_margins12 = props.margins) === null || _props_margins12 === void 0 ? void 0 : _props_margins12.right) !== null && _props_margins_right4 !== void 0 ? _props_margins_right4 : margins.right + TITLE_MARGIN_HORIZONTAL;
         } else {
             var _props_margins13;
             var _props_margins_right5;
-            margins.right = (_props_margins_right5 = (_props_margins13 = props.margins) === null || _props_margins13 === void 0 ? void 0 : _props_margins13.right) !== null && _props_margins_right5 !== void 0 ? _props_margins_right5 : margins.right + TITLE_MARGIN;
+            margins.right = (_props_margins_right5 = (_props_margins13 = props.margins) === null || _props_margins13 === void 0 ? void 0 : _props_margins13.right) !== null && _props_margins_right5 !== void 0 ? _props_margins_right5 : margins.right + TITLE_MARGIN_HORIZONTAL;
         }
     }
     const classes = useCartesianChartStyles(props);
@@ -105,8 +112,6 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         } else if (startFromX !== 0) {
             setStartFromX(0);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        isIntegralDataset = !props.points.some((point)=>point.y % 1 !== 0);
         return ()=>{
             cancelAnimationFrame(_reqID);
         };
@@ -128,10 +133,6 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         } else if (startFromX !== 0) {
             setStartFromX(0);
         }
-        if (prevProps !== null && prevProps.points !== props.points) {
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            isIntegralDataset = !props.points.some((point)=>point.y % 1 !== 0);
-        }
     }, [
         props,
         prevProps
@@ -181,6 +182,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     let callout = null;
     let children = null;
     if (props.enableFirstRenderOptimization && chartContainer.current || !props.enableFirstRenderOptimization) {
+        var _props_xAxis, _props_xAxis1, _props_yAxis, _props_yAxis1;
         _isFirstRender.current = false;
         var _props_showRoundOffXTickValues;
         const XAxisParams = {
@@ -204,7 +206,9 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             xAxisOuterPadding: props.xAxisOuterPadding,
             containerWidth: containerWidth,
             hideTickOverlap: props.rotateXAxisLables ? false : props.hideTickOverlap,
-            calcMaxLabelWidth: _calcMaxLabelWidthWithTransform
+            calcMaxLabelWidth: _calcMaxLabelWidthWithTransform,
+            tickStep: (_props_xAxis = props.xAxis) === null || _props_xAxis === void 0 ? void 0 : _props_xAxis.tickStep,
+            tick0: (_props_xAxis1 = props.xAxis) === null || _props_xAxis1 === void 0 ? void 0 : _props_xAxis1.tick0
         };
         /**
      * These scales used for 2 purposes.
@@ -216,16 +220,16 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         let tickValues;
         switch(props.xAxisType){
             case XAxisTypes.NumericAxis:
-                ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams, props.chartType, culture));
+                ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams, props.chartType, culture, props.xScaleType, _useRtl));
                 break;
             case XAxisTypes.DateAxis:
                 ({ xScale, tickValues } = createDateXAxis(XAxisParams, props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, props.useUTC, props.chartType));
                 break;
             case XAxisTypes.StringAxis:
-                ({ xScale, tickValues } = createStringXAxis(XAxisParams, props.tickParams, props.datasetForXAxisDomain, culture));
+                ({ xScale, tickValues } = createStringXAxis(XAxisParams, props.tickParams, props.datasetForXAxisDomain, culture, _useRtl));
                 break;
             default:
-                ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams, props.chartType, culture));
+                ({ xScale, tickValues } = createNumericXAxis(XAxisParams, props.tickParams, props.chartType, culture, props.xScaleType, _useRtl));
         }
         _xScale = xScale;
         _tickValues = tickValues;
@@ -245,7 +249,10 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             // 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
+            yAxisPadding: props.yAxisPadding || 0,
+            tickValues: props.yAxisTickValues,
+            tickStep: (_props_yAxis = props.yAxis) === null || _props_yAxis === void 0 ? void 0 : _props_yAxis.tickStep,
+            tick0: (_props_yAxis1 = props.yAxis) === null || _props_yAxis1 === void 0 ? void 0 : _props_yAxis1.tick0
         };
         /**
      * These scales used for 2 purposes.
@@ -283,9 +290,9 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
                     yMinMaxValues: props.getMinMaxOfYAxis(points, props.yAxisType, true),
                     yAxisPadding: props.yAxisPadding
                 };
-                yScaleSecondary = props.createYAxis(YAxisParamsSecondary, _useRtl, axisData, isIntegralDataset, chartType, true, props.roundedTicks);
+                yScaleSecondary = props.createYAxis(YAxisParamsSecondary, _useRtl, axisData, isIntegralDataset, chartType, true, props.roundedTicks, props.secondaryYScaleType, _useRtl);
             }
-            yScalePrimary = props.createYAxis(YAxisParams, _useRtl, axisData, isIntegralDataset, chartType, false, props.roundedTicks);
+            yScalePrimary = props.createYAxis(YAxisParams, _useRtl, axisData, isIntegralDataset, chartType, false, props.roundedTicks, props.yScaleType, _useRtl);
         }
         if (chartTypesWithStringYAxis.includes(props.chartType) && props.yAxisType === YAxisType.StringAxis) {
             // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
@@ -342,6 +349,12 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     };
     const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left - margins.right - startFromX;
     const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - _removalValueForTextTuncate - titleMargin;
+    const commonSvgToolTipProps = {
+        wrapContent,
+        showBackground: true,
+        className: classes.svgTooltip,
+        content: ''
+    };
     /**
    * When screen resizes, along with screen, chart also auto adjusted.
    * This method used to adjust height and width of the charts.
@@ -501,6 +514,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         transform: `translate(0, ${svgDimensions.height - margins.bottom - _removalValueForTextTuncate})`,
         className: classes.xAxis
     }), props.xAxisTitle !== undefined && props.xAxisTitle !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.xAxisTitle,
         textProps: {
             x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
@@ -508,11 +522,9 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             className: classes.axisTitle,
             textAnchor: 'middle'
         },
-        maxWidth: xAxisTitleMaximumAllowedWidth,
-        wrapContent: wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: xAxisTitleMaximumAllowedWidth
     }), props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.xAxisAnnotation,
         textProps: {
             x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
@@ -521,10 +533,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             textAnchor: 'middle',
             'aria-hidden': true
         },
-        maxWidth: xAxisTitleMaximumAllowedWidth,
-        wrapContent: wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: xAxisTitleMaximumAllowedWidth
     }), /*#__PURE__*/ React.createElement("g", {
         ref: (e)=>{
             yAxisElement.current = e;
@@ -540,6 +549,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         transform: `translate(${_useRtl ? margins.left + startFromX : svgDimensions.width - margins.right - startFromX}, 0)`,
         className: classes.yAxis
     }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.secondaryYAxistitle,
         textProps: {
             x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
@@ -549,11 +559,9 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
                  ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
             className: classes.axisTitle
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight,
-        wrapContent: wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: yAxisTitleMaximumAllowedHeight
     })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ React.createElement(SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.yAxisTitle,
         textProps: {
             x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
@@ -563,11 +571,9 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
                  ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
             className: classes.axisTitle
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight,
-        wrapContent: wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: yAxisTitleMaximumAllowedHeight
     }), props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '') && /*#__PURE__*/ React.createElement(SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.yAxisAnnotation,
         textProps: {
             x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
@@ -578,10 +584,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             className: classes.axisAnnotation,
             'aria-hidden': true
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight,
-        wrapContent: wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: yAxisTitleMaximumAllowedHeight
     }))), !props.hideLegend && /*#__PURE__*/ React.createElement("div", {
         ref: (e)=>legendContainer = e,
         className: classes.legendContainer