@fluentui/react-charts 9.2.3 → 9.3.0

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -13,7 +14,38 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useChartTableStylesstyles = require("./useChartTableStyles.styles");
 const _utilities = require("../../utilities/utilities");
 const _imageexportutils = require("../../utilities/image-export-utils");
+const _reacttheme = require("@fluentui/react-theme");
+const _d3color = /*#__PURE__*/ _interop_require_wildcard._(require("d3-color"));
+const _colors = require("../../utilities/colors");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _tokens = require("@fluentui/tokens");
+function invertHexColor(hex) {
+    const color = _d3color.color(hex);
+    if (!color) {
+        return _reacttheme.tokens.colorNeutralForeground1;
+    }
+    const rgb = color.rgb();
+    return _d3color.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
+}
+function getSafeBackgroundColor(v9Theme, foreground, background) {
+    const fallbackFg = v9Theme.colorNeutralForeground1;
+    const fallbackBg = v9Theme.colorNeutralBackground1;
+    const fg = _d3color.color(foreground || fallbackFg);
+    const bg = _d3color.color(background || fallbackBg);
+    if (!fg || !bg) {
+        return fallbackBg;
+    }
+    const contrast = (0, _colors.getColorContrast)(fg.formatHex(), bg.formatHex());
+    if (contrast >= 3) {
+        return bg.formatHex();
+    }
+    const invertedBg = invertHexColor(bg.formatHex());
+    const invertedContrast = (0, _colors.getColorContrast)(fg.formatHex(), invertedBg);
+    return invertedContrast >= 3 ? invertedBg : fallbackBg;
+}
 const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    const parentV9Theme = _react.useContext(_reactsharedcontexts.ThemeContext_unstable);
+    const v9Theme = parentV9Theme ? parentV9Theme : _tokens.webLightTheme;
     const { headers, rows, width, height } = props;
     const _isRTL = (0, _utilities.useRtl)();
     const _rootElem = _react.useRef(null);
@@ -27,6 +59,38 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     if (!headers || headers.length === 0) {
         return /*#__PURE__*/ _react.createElement("div", null, "No data available");
     }
+    const bgColorSet = new Set();
+    headers.forEach((header)=>{
+        var _header_style, _d3_color;
+        const bg = header === null || header === void 0 ? void 0 : (_header_style = header.style) === null || _header_style === void 0 ? void 0 : _header_style.backgroundColor;
+        const normalized = (_d3_color = _d3color.color(bg || '')) === null || _d3_color === void 0 ? void 0 : _d3_color.formatHex();
+        if (normalized) {
+            bgColorSet.add(normalized);
+        }
+    });
+    let sharedBackgroundColor;
+    let useSharedBackground = false;
+    /*
+    If we have only one or two unique background colors, we can consider using a shared background color
+    for the table headers. This is to ensure better contrast with the foreground text.
+    For size 1, we will consider that as default color if it satisfies the contrast ratio.
+    There could also be a scenario where backgroundcolor array is of size 2, for eg: ["dimsgray", "gray"],
+    which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background
+    color won't run here. So will consider for size 2 as well.
+    For size greater than this, we will consider that user wants different colors and will let color contrast fail
+    if any.
+    */ if (bgColorSet.size === 1 || bgColorSet.size === 2) {
+        const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];
+        for (const header of headers){
+            var _header_style;
+            const fg = header === null || header === void 0 ? void 0 : (_header_style = header.style) === null || _header_style === void 0 ? void 0 : _header_style.color;
+            if (fg && (0, _colors.getColorContrast)(fg, candidateBg) >= 3) {
+                sharedBackgroundColor = candidateBg;
+                useSharedBackground = true;
+                break;
+            }
+        }
+    }
     return /*#__PURE__*/ _react.createElement("div", {
         ref: (el)=>_rootElem.current = el,
         className: classes.root,
@@ -51,19 +115,42 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     }, /*#__PURE__*/ _react.createElement("table", {
         className: classes.table,
         style: {
-            width: width ? `${width}px` : '100%',
-            height: height ? `${height}px` : '650px'
+            width: width ? `${width}px` : '100%'
         }
-    }, /*#__PURE__*/ _react.createElement("thead", null, /*#__PURE__*/ _react.createElement("tr", null, headers.map((header, idx)=>/*#__PURE__*/ _react.createElement("th", {
+    }, /*#__PURE__*/ _react.createElement("thead", null, /*#__PURE__*/ _react.createElement("tr", null, headers.map((header, idx)=>{
+        const style = {
+            ...header === null || header === void 0 ? void 0 : header.style
+        };
+        const fg = style.color;
+        const bg = style.backgroundColor;
+        if (useSharedBackground) {
+            style.backgroundColor = sharedBackgroundColor;
+        } else if (fg || bg) {
+            style.backgroundColor = getSafeBackgroundColor(v9Theme, fg, bg);
+        }
+        return /*#__PURE__*/ _react.createElement("th", {
             key: idx,
             className: classes.headerCell,
-            style: header === null || header === void 0 ? void 0 : header.style
-        }, header.value)))), rows && rows.length > 0 && /*#__PURE__*/ _react.createElement("tbody", null, rows.map((row, rowIdx)=>/*#__PURE__*/ _react.createElement("tr", {
+            style: style,
+            tabIndex: 0
+        }, 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", {
+        }, row.map((cell, colIdx)=>{
+            const style = {
+                ...cell === null || cell === void 0 ? void 0 : cell.style
+            };
+            const fg = style.color;
+            const bg = style.backgroundColor;
+            if (fg || bg) {
+                style.backgroundColor = getSafeBackgroundColor(v9Theme, fg, bg);
+            }
+            return /*#__PURE__*/ _react.createElement("td", {
                 key: colIdx,
                 className: classes.bodyCell,
-                style: cell === null || cell === void 0 ? void 0 : cell.style
-            }, cell.value))))))))));
+                style: style,
+                tabIndex: 0
+            }, cell.value);
+        })))))))));
 });
 ChartTable.displayName = 'ChartTable';

package/lib-commonjs/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":";;;;+BAOaI;;;;;;;iEAPU,QAAQ;2CAEK,+BAA+B;2BAC5C,4BAA4B;kCAE3B,qCAAqC;AAEtD,mBAAMA,WAAAA,GAAuDJ,OAAMK,UAAU,CAClF,CAACC,OAAOC;IACN,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGL;IACzC,MAAMM,SAAkBV,qBAAAA;IACxB,MAAMW,YAAYb,OAAMc,MAAM,CAAwB;IACtD,MAAMC,cAAUd,8CAAAA,EAAoBK;IAEpCN,OAAMgB,mBAAmB,CACvBV,MAAMW,YAAY,EAClB,IAAO,CAAA;YACLC,gBAAgBL,UAAUM,OAAO;YACjChB,SAAS,CAACiB;gBACR,WAAOjB,yBAAAA,EAAQU,UAAUM,OAAO,EAAEE,WAAWT,QAAQQ;YACvD;SACF,CAAA,EACA,EAAE;IAGJ,IAAI,CAACZ,WAAWA,QAAQc,MAAM,KAAK,GAAG;QACpC,OAAA,WAAA,GAAO,OAAA,aAAA,CAACC,OAAAA,MAAI;IACd;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACA,OAAAA;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,OAAA,aAAA,CAACC,OAAAA;QAAIpB,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAS;QAAQC,QAAQA,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,SAAU;qBAC7C,OAAA,aAAA,CAACoB,iBAAAA;QAAcC,GAAE;QAAIC,GAAE;QAAIvB,OAAM;QAAOC,QAAO;qBAC7C,OAAA,aAAA,CAACY,OAAAA;QACCK,OAAO;YACLM,WAAWvB,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;YACpCwB,WAAW;YACXC,WAAW;QACb;qBAEA,OAAA,aAAA,CAACC,SAAAA;QACCX,WAAWX,QAAQsB,KAAK;QACxBT,OAAO;YACLlB,OAAOA,QAAQ,GAAGA,MAAM,EAAE,CAAC,GAAG;YAC9BC,QAAQA,SAAS,GAAGA,OAAO,EAAE,CAAC,GAAG;QACnC;qBAEA,OAAA,aAAA,CAAC2B,SAAAA,MAAAA,WAAAA,GACC,OAAA,aAAA,CAACC,MAAAA,MACE/B,QAAQgC,GAAG,CAAC,CAACC,QAAQC,MAAAA,WAAAA,GACpB,OAAA,aAAA,CAACC,MAAAA;YAAGC,KAAKF;YAAKhB,WAAWX,QAAQ8B,UAAU;YAAEjB,KAAK,EAAEa,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAQb,KAAK;WAC9Da,OAAOK,KAAK,MAKpBrC,QAAQA,KAAKa,MAAM,GAAG,KAAA,WAAA,GACrB,OAAA,aAAA,CAACyB,SAAAA,MACEtC,KAAK+B,GAAG,CAAC,CAACQ,KAAKC,SAAAA,WAAAA,GACd,OAAA,aAAA,CAACV,MAAAA;YAAGK,KAAKK;WACND,IAAIR,GAAG,CAAC,CAACU,MAAMC,SAAAA,WAAAA,GACd,OAAA,aAAA,CAACC,MAAAA;gBAAGR,KAAKO;gBAAQzB,WAAWX,QAAQsC,QAAQ;gBAAEzB,KAAK,EAAEsB,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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-commonjs/components/ChartTable/useChartTableStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -38,7 +39,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bhrd7zp: "fl43uef",
         Bg96gwp: "fwrc4pm",
         De3pzq: "f16xq7d1",
-        sj55zd: "f19n0e5",
+        sj55zd: "f1o4jmwm",
         z8tnut: "f17mpqex",
         z189sj: [
             "f1vdfbxk",
@@ -131,7 +132,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fw35ms5",
             "f7pw515"
         ],
-        sj55zd: "f19n0e5",
+        sj55zd: "f1o4jmwm",
         fsow6f: [
             "f1o700av",
             "fes3tcz"
@@ -148,7 +149,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".fl43uef{font-weight:var(--fontWeightSemibold);}",
         ".fwrc4pm{line-height:var(--lineHeightBase200);}",
         ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
-        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".f1o4jmwm{color:black;}",
         ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
         ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
         ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",

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

@@ -1 +1 @@
-{"version":3,"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"],"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"],"mappings":"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"}
+{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKKK,oBAAoB;;;uBAyCD;eAAnBqC;;;uBA7CoC,gBAAgB;AAI1D,6BAA6B;IACpCpC,IAAI,EAAE,sBAAsB;IAC5BC,KAAK,EAAE,uBAAuB;IAC9BC,UAAU,EAAE,4BAA4B;IACxCC,QAAQ,EAAE,0BAA0B;IACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGX,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAM,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAN,KAAA,EAAA;QAAAO,MAAA,EAAA;IAAA;IAAAN,UAAA,EAAA;QAAAO,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA9B,QAAA,EAAA;QAAAM,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAjB,MAAA,EAAA;QAAAK,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAc,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA+BjB,CAAC;AAGS,6BAA6BE,KAAK,IAAG;IAC5C,MAAMC,UAAU,GAAGjC,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHL,IAAI,MAAEL,mBAAY,EAACI,oBAAoB,CAACC,IAAI,EAAEsC,UAAU,CAACtC,IAAI,CAAC,oBAAA,EAAuB,CAAC;QACtFC,KAAK,MAAEN,mBAAY,EAACI,oBAAoB,CAACE,KAAK,EAAEqC,UAAU,CAACrC,KAAK,CAAC,qBAAA,EAAwB,CAAC;QAC1FC,UAAU,EAAEP,uBAAY,EAACI,oBAAoB,CAACG,UAAU,EAAEoC,UAAU,CAACpC,UAAU,CAAC,0BAAA,EAA6B,CAAC;QAC9GC,QAAQ,MAAER,mBAAY,EAACI,oBAAoB,CAACI,QAAQ,EAAEmC,UAAU,CAACnC,QAAQ,CAAC,wBAAA,EAA2B,CAAC;QACtGC,KAAK,MAAET,mBAAY,EAACI,oBAAoB,CAACK,KAAK,CAAC,qBAAA,EAAwB;IAC3E,CAAC;AACL,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -37,7 +38,7 @@ const useStyles = (0, _react.makeStyles)({
         ..._reacttheme.typographyStyles.caption1,
         fontWeight: _reacttheme.tokens.fontWeightSemibold,
         backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
-        color: _reacttheme.tokens.colorNeutralForeground1,
+        color: 'black',
         ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
         textAlign: 'left',
         ..._react.shorthands.border(_reacttheme.tokens.strokeWidthThick, 'solid', _reacttheme.tokens.colorNeutralStroke2),
@@ -50,7 +51,7 @@ const useStyles = (0, _react.makeStyles)({
         ..._reacttheme.typographyStyles.caption1,
         ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
         ..._react.shorthands.border(_reacttheme.tokens.strokeWidthThick, 'solid', _reacttheme.tokens.colorNeutralStroke2),
-        color: _reacttheme.tokens.colorNeutralForeground1,
+        color: 'black',
         textAlign: 'left',
         '@media (forced-colors: active)': {
             color: 'WindowText'

package/lib-commonjs/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":";;;;;;;;;;;IAQaK,oBAAAA;;;IA4CAuB,mBAAAA;;;;uBApDwC,iBAAiB;4BAG7B,wBAAwB;AAK1D,6BAA+D;IACpEtB,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAYX,iBAAAA,EAAW;IAC3BM,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,4BAAAA,CAAiBW,QAAQ;QAC5BC,YAAYb,kBAAAA,CAAOc,kBAAkB;QACrCC,iBAAiBf,kBAAAA,CAAOgB,uBAAuB;QAC/CC,OAAOjB,kBAAAA,CAAOkB,uBAAuB;QACrC,GAAGnB,iBAAAA,CAAWoB,OAAO,CAACnB,kBAAAA,CAAOoB,kBAAkB,CAAC;QAChDC,WAAW;QACX,GAAGtB,iBAAAA,CAAWuB,MAAM,CAACtB,kBAAAA,CAAOuB,gBAAgB,EAAE,SAASvB,kBAAAA,CAAOwB,mBAAmB,CAAC;QAClF,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,4BAAAA,CAAiBW,QAAQ;QAC5B,GAAGb,iBAAAA,CAAWoB,OAAO,CAACnB,kBAAAA,CAAOoB,kBAAkB,CAAC;QAChD,GAAGrB,iBAAAA,CAAWuB,MAAM,CAACtB,kBAAAA,CAAOuB,gBAAgB,EAAE,SAASvB,kBAAAA,CAAOwB,mBAAmB,CAAC;QAClFP,OAAOjB,kBAAAA,CAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAKO,4BAA4B,CAACS;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,UAAML,mBAAAA,EAAaI,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,OAAON,uBAAAA,EAAaI,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,gBAAYP,mBAAAA,EAAaI,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,cAAUR,mBAAAA,EAAaI,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,WAAOT,mBAAAA,EAAaI,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;;;;;;;;;;;;IAUaK,oBAAAA;;;uBA4CAsB;;;;uBApDwC,iBAAiB;4BAG7B,wBAAwB;AAK1D,6BAA+D;IACpErB,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAYX,iBAAAA,EAAW;IAC3BM,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,4BAAAA,CAAiBW,QAAQ;QAC5BC,YAAYb,kBAAAA,CAAOc,kBAAkB;QACrCC,iBAAiBf,kBAAAA,CAAOgB,uBAAuB;QAC/CC,OAAO;QACP,GAAGlB,iBAAAA,CAAWmB,OAAO,CAAClB,kBAAAA,CAAOmB,kBAAkB,CAAC;QAChDC,WAAW;QACX,GAAGrB,iBAAAA,CAAWsB,MAAM,CAACrB,kBAAAA,CAAOsB,gBAAgB,EAAE,SAAStB,kBAAAA,CAAOuB,mBAAmB,CAAC;QAClF,kCAAkC;YAChCR,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,4BAAAA,CAAiBW,QAAQ;QAC5B,GAAGb,iBAAAA,CAAWmB,OAAO,CAAClB,kBAAAA,CAAOmB,kBAAkB,CAAC;QAChD,GAAGpB,iBAAAA,CAAWsB,MAAM,CAACrB,kBAAAA,CAAOsB,gBAAgB,EAAE,SAAStB,kBAAAA,CAAOuB,mBAAmB,CAAC;QAClFN,OAAO;QACPG,WAAW;QACX,kCAAkC;YAChCH,OAAO;QACT;IACF;AACF;AAKO,MAAMO,sBAAsB,CAACC;IAClC,MAAMC,aAAalB;IAEnB,OAAO;QACLL,UAAML,mBAAAA,EAAaI,qBAAqBC,IAAI,EAAEuB,WAAWvB,IAAI,CAAC,oBAAoB;QAClFC,WAAON,mBAAAA,EAAaI,qBAAqBE,KAAK,EAAEsB,WAAWtB,KAAK,CAAC,qBAAqB;QACtFC,gBAAYP,mBAAAA,EAAaI,qBAAqBG,UAAU,EAAEqB,WAAWrB,UAAU,CAAC,0BAA0B;QAC1GC,cAAUR,mBAAAA,EAAaI,qBAAqBI,QAAQ,EAAEoB,WAAWpB,QAAQ,CAAC,wBAAwB;QAClGC,WAAOT,mBAAAA,EAAaI,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}

package/lib-commonjs/components/CommonComponents/CartesianChart.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -34,7 +35,11 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     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 = (0, _reactutilities.useId)('tooltip_');
     /* Used for when WrapXAxisLabels props appeared.
    * To display the total word (space separated words), Need to have more space than usual.
@@ -50,7 +55,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         _index.ChartTypes.HorizontalBarChartWithAxis,
         _index.ChartTypes.HeatMapChart,
         _index.ChartTypes.VerticalStackedBarChart,
-        _index.ChartTypes.GanttChart
+        _index.ChartTypes.GanttChart,
+        _index.ChartTypes.ScatterChart
     ];
     var _props_margins_top, _props_margins_bottom, _props_margins_left, _props_margins_right, _props_margins_right1, _props_margins_left1;
     /**
@@ -65,33 +71,34 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         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 = (0, _useCartesianChartStylesstyles.useCartesianChartStyles)(props);
@@ -113,8 +120,6 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         } 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);
         };
@@ -136,10 +141,6 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         } 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
@@ -189,6 +190,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     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 = {
@@ -211,7 +213,9 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             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.
@@ -223,16 +227,16 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         let tickValues;
         switch(props.xAxisType){
             case _index.XAxisTypes.NumericAxis:
-                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture));
+                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture, props.xScaleType, _useRtl));
                 break;
             case _index.XAxisTypes.DateAxis:
                 ({ xScale, tickValues } = (0, _index.createDateXAxis)(XAxisParams, props.tickParams, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter, props.useUTC, props.chartType));
                 break;
             case _index.XAxisTypes.StringAxis:
-                ({ xScale, tickValues } = (0, _index.createStringXAxis)(XAxisParams, props.tickParams, props.datasetForXAxisDomain, culture));
+                ({ xScale, tickValues } = (0, _index.createStringXAxis)(XAxisParams, props.tickParams, props.datasetForXAxisDomain, culture, _useRtl));
                 break;
             default:
-                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture));
+                ({ xScale, tickValues } = (0, _index.createNumericXAxis)(XAxisParams, props.tickParams, props.chartType, culture, props.xScaleType, _useRtl));
         }
         _xScale = xScale;
         _tickValues = tickValues;
@@ -252,7 +256,10 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             // 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.
@@ -290,9 +297,9 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                     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 === _index.YAxisType.StringAxis) {
             // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
@@ -349,6 +356,12 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     };
     const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left - margins.right - startFromX;
     const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - _removalValueForTextTuncate - titleMargin;
+    const commonSvgToolTipProps = {
+        wrapContent: _index.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.
@@ -508,6 +521,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         transform: `translate(0, ${svgDimensions.height - margins.bottom - _removalValueForTextTuncate})`,
         className: classes.xAxis
     }), props.xAxisTitle !== undefined && props.xAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.xAxisTitle,
         textProps: {
             x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
@@ -515,11 +529,9 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             className: classes.axisTitle,
             textAnchor: 'middle'
         },
-        maxWidth: xAxisTitleMaximumAllowedWidth,
-        wrapContent: _index.wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: xAxisTitleMaximumAllowedWidth
     }), props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.xAxisAnnotation,
         textProps: {
             x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
@@ -528,10 +540,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             textAnchor: 'middle',
             'aria-hidden': true
         },
-        maxWidth: xAxisTitleMaximumAllowedWidth,
-        wrapContent: _index.wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: xAxisTitleMaximumAllowedWidth
     }), /*#__PURE__*/ _react.createElement("g", {
         ref: (e)=>{
             yAxisElement.current = e;
@@ -547,6 +556,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         transform: `translate(${_useRtl ? margins.left + startFromX : svgDimensions.width - margins.right - startFromX}, 0)`,
         className: classes.yAxis
     }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.secondaryYAxistitle,
         textProps: {
             x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
@@ -556,11 +566,9 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                  ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
             className: classes.axisTitle
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight,
-        wrapContent: _index.wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: yAxisTitleMaximumAllowedHeight
     })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.yAxisTitle,
         textProps: {
             x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
@@ -570,11 +578,9 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                  ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
             className: classes.axisTitle
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight,
-        wrapContent: _index.wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: yAxisTitleMaximumAllowedHeight
     }), props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '') && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        ...commonSvgToolTipProps,
         content: props.yAxisAnnotation,
         textProps: {
             x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
@@ -585,10 +591,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             className: classes.axisAnnotation,
             'aria-hidden': true
         },
-        maxWidth: yAxisTitleMaximumAllowedHeight,
-        wrapContent: _index.wrapContent,
-        showBackground: true,
-        className: classes.svgTooltip
+        maxWidth: yAxisTitleMaximumAllowedHeight
     }))), !props.hideLegend && /*#__PURE__*/ _react.createElement("div", {
         ref: (e)=>legendContainer = e,
         className: classes.legendContainer