@fluentui/react-charts 0.0.0-nightly-20251023-0407.1 → 0.0.0-nightly-20251027-0407.1

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

@@ -17,8 +17,6 @@ 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) {
@@ -27,14 +25,19 @@ function invertHexColor(hex) {
     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) {
+function getSafeBackgroundColor(chartContainer, foreground, background) {
+    const fallbackFg = _reacttheme.tokens.colorNeutralForeground1;
+    const fallbackBg = _reacttheme.tokens.colorNeutralBackground1;
+    if (!chartContainer) {
         return fallbackBg;
     }
+    const resolvedFg = (0, _utilities.resolveCSSVariables)(chartContainer, foreground || fallbackFg);
+    const resolvedBg = (0, _utilities.resolveCSSVariables)(chartContainer, background || fallbackBg);
+    const fg = _d3color.color(resolvedFg);
+    const bg = _d3color.color(resolvedBg);
+    if (!fg || !bg) {
+        return resolvedBg;
+    }
     const contrast = (0, _colors.getColorContrast)(fg.formatHex(), bg.formatHex());
     if (contrast >= 3) {
         return bg.formatHex();
@@ -44,8 +47,6 @@ function getSafeBackgroundColor(v9Theme, foreground, background) {
     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);
@@ -126,7 +127,7 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         if (useSharedBackground) {
             style.backgroundColor = sharedBackgroundColor;
         } else if (fg || bg) {
-            style.backgroundColor = getSafeBackgroundColor(v9Theme, fg, bg);
+            style.backgroundColor = getSafeBackgroundColor(_rootElem.current, fg, bg);
         }
         return /*#__PURE__*/ _react.createElement("th", {
             key: idx,
@@ -143,7 +144,7 @@ const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             const fg = style.color;
             const bg = style.backgroundColor;
             if (fg || bg) {
-                style.backgroundColor = getSafeBackgroundColor(v9Theme, fg, bg);
+                style.backgroundColor = getSafeBackgroundColor(_rootElem.current, fg, bg);
             }
             return /*#__PURE__*/ _react.createElement("td", {
                 key: colIdx,

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

@@ -1 +1 @@
-{"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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"}
+{"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 { resolveCSSVariables } from '../../utilities/utilities';\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(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n  const fallbackFg = tokens.colorNeutralForeground1;\n  const fallbackBg = tokens.colorNeutralBackground1;\n  if (!chartContainer) {\n    return fallbackBg;\n  }\n\n  const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);\n  const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);\n\n  const fg = d3.color(resolvedFg);\n  const bg = d3.color(resolvedBg);\n\n  if (!fg || !bg) {\n    return resolvedBg;\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 { 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(_rootElem.current!, 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(_rootElem.current!, 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","resolveCSSVariables","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","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

@@ -39,7 +39,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bhrd7zp: "fl43uef",
         Bg96gwp: "fwrc4pm",
         De3pzq: "f16xq7d1",
-        sj55zd: "f1o4jmwm",
+        sj55zd: "f19n0e5",
         z8tnut: "f17mpqex",
         z189sj: [
             "f1vdfbxk",
@@ -132,7 +132,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fw35ms5",
             "f7pw515"
         ],
-        sj55zd: "f1o4jmwm",
+        sj55zd: "f19n0e5",
         fsow6f: [
             "f1o700av",
             "fes3tcz"
@@ -149,7 +149,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".fl43uef{font-weight:var(--fontWeightSemibold);}",
         ".fwrc4pm{line-height:var(--lineHeightBase200);}",
         ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
-        ".f1o4jmwm{color:black;}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
         ".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":["'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":"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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: 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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"}

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

@@ -38,7 +38,7 @@ const useStyles = (0, _react.makeStyles)({
         ..._reacttheme.typographyStyles.caption1,
         fontWeight: _reacttheme.tokens.fontWeightSemibold,
         backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
-        color: 'black',
+        color: _reacttheme.tokens.colorNeutralForeground1,
         ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
         textAlign: 'left',
         ..._react.shorthands.border(_reacttheme.tokens.strokeWidthThick, 'solid', _reacttheme.tokens.colorNeutralStroke2),
@@ -51,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: 'black',
+        color: _reacttheme.tokens.colorNeutralForeground1,
         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":["'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"}
+{"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: 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;;;;;;;;;;;;IAUaK,oBAAAA;;;uBA4CAuB;eAAAA;;;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,WAAON,mBAAAA,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"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js

@@ -50,7 +50,11 @@ const cartesianchartClassNames = {
         Beiy3e4: "f1vx9l62",
         B68tc82: 0,
         Bmxbyg5: 0,
-        Bpg54ce: "f1a3p1vp"
+        Bpg54ce: "f1a3p1vp",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ]
     },
     chartWrapper: {
         B68tc82: 0,
@@ -168,6 +172,8 @@ const cartesianchartClassNames = {
                 p: -1
             }
         ],
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}",
         [
             ".f1enuhaj{overflow:auto;}",
             {

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n    root: 'fui-cart__root',\n    chartWrapper: 'fui-cart__chartWrapper',\n    axisTitle: 'fui-cart__axisTitle',\n    xAxis: 'fui-cart__xAxis',\n    yAxis: 'fui-cart__yAxis',\n    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n    legendContainer: 'fui-cart__legendContainer',\n    svgTooltip: 'fui-cart_svgTooltip',\n    shapeStyles: 'fui-cart__shapeStyles',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    hover: 'fui-cart__hover',\n    tooltip: 'fui-cart__tooltip',\n    axisAnnotation: 'fui-cart__axisAnnotation',\n    chartTitle: 'fui-cart__chartTitle',\n    chart: 'fui-cart__chart'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    },\n    axisTitle: getAxisTitleStyle(),\n    axisAnnotation: getAxisTitleStyle(),\n    xAxis: {\n        '& text': {\n            fill: tokens.colorNeutralForeground1,\n            ...typographyStyles.caption2Strong,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            width: '1px',\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    yAxis: {\n        '& text': {\n            ...typographyStyles.caption2Strong,\n            fill: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    rtl: {\n        '& g': {\n            textAnchor: 'end'\n        }\n    },\n    ltr: {},\n    opacityChangeOnHover: {\n        opacity: '0.1',\n        cursor: 'default'\n    },\n    legendContainer: {\n        marginTop: tokens.spacingVerticalS,\n        marginLeft: tokens.spacingHorizontalXL\n    },\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    tooltip: getTooltipStyle()\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n        xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n        yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n        opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),\n        svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n        tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}
+{"version":3,"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n    root: 'fui-cart__root',\n    chartWrapper: 'fui-cart__chartWrapper',\n    axisTitle: 'fui-cart__axisTitle',\n    xAxis: 'fui-cart__xAxis',\n    yAxis: 'fui-cart__yAxis',\n    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n    legendContainer: 'fui-cart__legendContainer',\n    svgTooltip: 'fui-cart_svgTooltip',\n    shapeStyles: 'fui-cart__shapeStyles',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    hover: 'fui-cart__hover',\n    tooltip: 'fui-cart__tooltip',\n    axisAnnotation: 'fui-cart__axisAnnotation',\n    chartTitle: 'fui-cart__chartTitle',\n    chart: 'fui-cart__chart'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        textAlign: 'left'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    },\n    axisTitle: getAxisTitleStyle(),\n    axisAnnotation: getAxisTitleStyle(),\n    xAxis: {\n        '& text': {\n            fill: tokens.colorNeutralForeground1,\n            ...typographyStyles.caption2Strong,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            width: '1px',\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    yAxis: {\n        '& text': {\n            ...typographyStyles.caption2Strong,\n            fill: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            forcedColorAdjust: 'auto'\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    rtl: {\n        '& g': {\n            textAnchor: 'end'\n        }\n    },\n    ltr: {},\n    opacityChangeOnHover: {\n        opacity: '0.1',\n        cursor: 'default'\n    },\n    legendContainer: {\n        marginTop: tokens.spacingVerticalS,\n        marginLeft: tokens.spacingHorizontalXL\n    },\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    tooltip: getTooltipStyle()\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n        xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n        yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n        opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),\n        svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n        tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","B80ckks","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAOKQ,wBAAwB;;;2BA0FD;eAAvBmE;;;uBAhGwB,gBAAgB;2BAEZ,2BAA2B;AAI7D,iCAAiC;IACxClE,IAAI,EAAE,gBAAgB;IACtBC,YAAY,EAAE,wBAAwB;IACtCC,SAAS,EAAE,qBAAqB;IAChCC,KAAK,EAAE,iBAAiB;IACxBC,KAAK,EAAE,iBAAiB;IACxBC,oBAAoB,EAAE,gCAAgC;IACtDC,eAAe,EAAE,2BAA2B;IAC5CC,UAAU,EAAE,qBAAqB;IACjCC,WAAW,EAAE,uBAAuB;IACpCC,kBAAkB,EAAE,8BAA8B;IAClDC,KAAK,EAAE,iBAAiB;IACxBC,OAAO,EAAE,mBAAmB;IAC5BC,cAAc,EAAE,0BAA0B;IAC1CC,UAAU,EAAE,sBAAsB;IAClCC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGxB,eAAA,EAAA;IAAAS,IAAA,EAAA;QAAAgB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA1B,YAAA,EAAA;QAAAuB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAxB,SAAA,EAAA;QAAAc,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAD,MAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAnB,cAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAD,MAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA5B,KAAA,EAAA;QAAA6B,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAtC,KAAA,EAAA;QAAA6B,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAJ,OAAA,EAAA;QAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,GAAA,EAAA,CAAA;IAAAxC,oBAAA,EAAA;QAAAyC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAzC,eAAA,EAAA;QAAA0C,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA1C,UAAA,EAAA;QAAAuB,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAApB,OAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAA2B,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAA3B,MAAA,EAAA;QAAA4B,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAjC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAkC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;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;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAmErB,CAAC;AAIS,iCAAiCE,KAAK,IAAG;IAChD,IAAIC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;IACrF,MAAMC,OAAO,OAAG7E,iBAAM,CAAC,CAAC;IACxB,MAAM8E,UAAU,GAAG3D,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHf,IAAI,MAAER,mBAAY,EAACO,wBAAwB,CAACC,IAAI,EAAE0E,UAAU,CAAC1E,IAAI,EAAE,CAACoE,aAAa,GAAGD,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIP,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACpE,IAAI,CAAC;QACrKC,YAAY,MAAET,mBAAY,EAACO,wBAAwB,CAACE,YAAY,EAAG,AAAD,CAAEoE,kBAAkB,IAAGF,KAAK,CAACS,WAAAA,AAAW,MAAM,IAAI,IAAIP,kBAAkB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,kBAAkB,CAACQ,IAAI,AAAJA,MAAU,WAAW,GAAGH,UAAU,CAACzE,YAAY,GAAG,EAAE,EAAE,CAACqE,cAAc,GAAGH,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACrE,YAAY,CAAC;QACvVC,SAAS,MAAEV,mBAAY,EAACO,wBAAwB,CAACG,SAAS,EAAEwE,UAAU,CAACxE,SAAS,CAAC,yBAAA,EAA4B,CAAC;QAC9GC,KAAK,MAAEX,mBAAY,EAACO,wBAAwB,CAACI,KAAK,EAAEuE,UAAU,CAACvE,KAAK,CAAC,qBAAA,EAAwB,CAAC;QAC9FC,KAAK,MAAEZ,mBAAY,EAACO,wBAAwB,CAACK,KAAK,EAAEsE,UAAU,CAACtE,KAAK,EAAEqE,OAAO,GAAGC,UAAU,CAAC/B,GAAG,GAAG+B,UAAU,CAAC7B,GAAG,CAAC,qBAAA,EAAwB,CAAC;QACzIxC,oBAAoB,MAAEb,mBAAY,EAACO,wBAAwB,CAACM,oBAAoB,EAAEqE,UAAU,CAACrE,oBAAoB,CAAC,oCAAA,EAAuC,CAAC;QAC1JC,eAAe,EAAEd,uBAAY,EAACO,wBAAwB,CAACO,eAAe,EAAEoE,UAAU,CAACpE,eAAe,CAAC,+BAAA,EAAkC,CAAC;QACtIC,UAAU,MAAEf,mBAAY,EAACO,wBAAwB,CAACQ,UAAU,EAAEmE,UAAU,CAACnE,UAAU,EAAE,CAACgE,cAAc,GAAGJ,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAChE,UAAU,CAAC;QAChMI,OAAO,MAAEnB,mBAAY,EAACO,wBAAwB,CAACY,OAAO,EAAE+D,UAAU,CAAC/D,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACtGC,cAAc,MAAEpB,mBAAY,EAACO,wBAAwB,CAACa,cAAc,EAAE8D,UAAU,CAAC9D,cAAc,CAAC;QAChGE,KAAK,MAAEtB,mBAAY,EAACO,wBAAwB,CAACe,KAAK,EAAE,CAAC0D,cAAc,GAAGL,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC1D,KAAK;IAC7J,CAAC;AACL,CAAC"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js

@@ -47,7 +47,8 @@ const cartesianchartClassNames = {
         width: '100%',
         height: '100%',
         flexDirection: 'column',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        textAlign: 'left'
     },
     chartWrapper: {
         overflow: 'auto'

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n  root: 'fui-cart__root',\n  chartWrapper: 'fui-cart__chartWrapper',\n  axisTitle: 'fui-cart__axisTitle',\n  xAxis: 'fui-cart__xAxis',\n  yAxis: 'fui-cart__yAxis',\n  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n  legendContainer: 'fui-cart__legendContainer',\n  svgTooltip: 'fui-cart_svgTooltip',\n  shapeStyles: 'fui-cart__shapeStyles',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  hover: 'fui-cart__hover',\n  tooltip: 'fui-cart__tooltip',\n  axisAnnotation: 'fui-cart__axisAnnotation',\n  chartTitle: 'fui-cart__chartTitle',\n  chart: 'fui-cart__chart',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  axisTitle: getAxisTitleStyle() as GriffelStyle,\n  axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n  xAxis: {\n    '& text': {\n      fill: tokens.colorNeutralForeground1,\n      ...typographyStyles.caption2Strong,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      width: '1px',\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  yAxis: {\n    '& text': {\n      ...typographyStyles.caption2Strong,\n      fill: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  rtl: {\n    '& g': {\n      textAnchor: 'end',\n    },\n  },\n  ltr: {},\n  opacityChangeOnHover: {\n    opacity: '0.1', //supports custom opacity ??\n    cursor: 'default', //supports custom cursor ??\n  },\n  legendContainer: {\n    marginTop: tokens.spacingVerticalS,\n    marginLeft: tokens.spacingHorizontalXL,\n  },\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  tooltip: getTooltipStyle() as GriffelStyle,\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n  const _useRtl = useRtl();\n  const baseStyles = useStyles();\n  return {\n    root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n    chartWrapper: mergeClasses(\n      cartesianchartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),\n    xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),\n    yAxis: mergeClasses(\n      cartesianchartClassNames.yAxis,\n      baseStyles.yAxis,\n      _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/,\n    ),\n    opacityChangeOnHover: mergeClasses(\n      cartesianchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    legendContainer: mergeClasses(\n      cartesianchartClassNames.legendContainer,\n      baseStyles.legendContainer /*props.styles?.legendContainer*/,\n    ),\n    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n    tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    axisAnnotation: mergeClasses(\n      cartesianchartClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      /*props.styles?.axisAnnotation,*/\n    ),\n    chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n  root: 'fui-cart__root',\n  chartWrapper: 'fui-cart__chartWrapper',\n  axisTitle: 'fui-cart__axisTitle',\n  xAxis: 'fui-cart__xAxis',\n  yAxis: 'fui-cart__yAxis',\n  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n  legendContainer: 'fui-cart__legendContainer',\n  svgTooltip: 'fui-cart_svgTooltip',\n  shapeStyles: 'fui-cart__shapeStyles',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  hover: 'fui-cart__hover',\n  tooltip: 'fui-cart__tooltip',\n  axisAnnotation: 'fui-cart__axisAnnotation',\n  chartTitle: 'fui-cart__chartTitle',\n  chart: 'fui-cart__chart',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    textAlign: 'left',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  axisTitle: getAxisTitleStyle() as GriffelStyle,\n  axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n  xAxis: {\n    '& text': {\n      fill: tokens.colorNeutralForeground1,\n      ...typographyStyles.caption2Strong,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      width: '1px',\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  yAxis: {\n    '& text': {\n      ...typographyStyles.caption2Strong,\n      fill: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  rtl: {\n    '& g': {\n      textAnchor: 'end',\n    },\n  },\n  ltr: {},\n  opacityChangeOnHover: {\n    opacity: '0.1', //supports custom opacity ??\n    cursor: 'default', //supports custom cursor ??\n  },\n  legendContainer: {\n    marginTop: tokens.spacingVerticalS,\n    marginLeft: tokens.spacingHorizontalXL,\n  },\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  tooltip: getTooltipStyle() as GriffelStyle,\n});\n/**\n *\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n  const _useRtl = useRtl();\n  const baseStyles = useStyles();\n  return {\n    root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n    chartWrapper: mergeClasses(\n      cartesianchartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),\n    xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),\n    yAxis: mergeClasses(\n      cartesianchartClassNames.yAxis,\n      baseStyles.yAxis,\n      _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/,\n    ),\n    opacityChangeOnHover: mergeClasses(\n      cartesianchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    legendContainer: mergeClasses(\n      cartesianchartClassNames.legendContainer,\n      baseStyles.legendContainer /*props.styles?.legendContainer*/,\n    ),\n    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n    tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    axisAnnotation: mergeClasses(\n      cartesianchartClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      /*props.styles?.axisAnnotation,*/\n    ),\n    chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/useChartPopoverStyles.styles.js

@@ -70,7 +70,11 @@ const popoverClassNames = {
         sj55zd: "fkfq4zb"
     },
     calloutBlockContainer: {
-        sj55zd: "fkfq4zb"
+        sj55zd: "fkfq4zb",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ]
     },
     calloutBlockContainerCartesian: {
         Bahqtrf: "fk6fouc",
@@ -192,6 +196,8 @@ const popoverClassNames = {
         ".fwrc4pm{line-height:var(--lineHeightBase200);}",
         ".fp25eh{opacity:0.8;}",
         ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}",
         ".fdgv6k0{forced-color-adjust:none;}",
         ".fojgt09{font-size:var(--fontSizeHero700);}",
         ".f82itaf{line-height:22px;}",

package/lib-commonjs/components/CommonComponents/useChartPopoverStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useChartPopoverStyles.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 popoverClassNames = {\n    calloutContentRoot: 'fui-cart__calloutContentRoot',\n    calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n    calloutContentX: 'fui-cart__calloutContentX',\n    calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n    calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n    calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n    shapeStyles: 'fui-cart__shapeStyles',\n    calloutlegendText: 'fui-cart__calloutlegendText',\n    calloutContentY: 'fui-cart__calloutContentY',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    ratio: 'fui-cart__ratio',\n    numerator: 'fui-cart__numerator',\n    denominator: 'fui-cart__denominator',\n    calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n    calloutContainer: 'fui-cart__calloutContainer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    calloutContentRoot: {\n        display: 'grid',\n        overflow: 'hidden',\n        ...shorthands.padding('11px 16px 10px 16px'),\n        backgroundColor: tokens.colorNeutralBackground1,\n        backgroundBlendMode: 'normal, luminosity'\n    },\n    calloutDateTimeContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between'\n    },\n    calloutContentX: {\n        ...typographyStyles.caption1,\n        opacity: '0.8',\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainer: {\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainerCartesian: {\n        ...typographyStyles.caption1,\n        forcedColorAdjust: 'none'\n    },\n    calloutBlockContainerNonCartesian: {\n        fontSize: tokens.fontSizeHero700,\n        lineHeight: '22px',\n        forcedColorAdjust: 'none'\n    },\n    calloutBlockContainertoDrawShapefalse: {\n        paddingLeft: tokens.spacingHorizontalS,\n        forcedColorAdjust: 'none'\n    },\n    calloutBlockContainertoDrawShapetrue: {\n        display: 'inline-grid'\n    },\n    shapeStyles: {\n        marginRight: tokens.spacingHorizontalS\n    },\n    calloutLegendText: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        forcedColorAdjust: 'auto',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    calloutContentY: {\n        forcedColorAdjust: 'auto'\n    },\n    calloutContentYCartesian: {\n        ...typographyStyles.subtitle2Stronger\n    },\n    calloutContentYNonCartesian: {\n        ...typographyStyles.title2\n    },\n    descriptionMessage: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        marginTop: tokens.spacingVerticalMNudge,\n        paddingTop: tokens.spacingVerticalMNudge,\n        borderTop: `1px solid ${tokens.colorNeutralStroke2}`\n    },\n    ratio: {\n        ...typographyStyles.caption2,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        color: tokens.colorNeutralForeground1\n    },\n    numerator: {\n        ...typographyStyles.caption2Strong\n    },\n    denominator: {\n        ...typographyStyles.caption2Strong\n    },\n    calloutInfoContainer: {\n        paddingLeft: tokens.spacingHorizontalS,\n        forcedColorAdjust: 'none'\n    },\n    calloutContainer: {}\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const usePopoverStyles_unstable = (props)=>{\n    var _props_styles;\n    const { isCartesian } = props;\n    const baseStyles = useStyles();\n    return {\n        calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.calloutContentRoot),\n        calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/ ),\n        calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/ ),\n        calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/ , isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),\n        calloutBlockContainertoDrawShapefalse: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/ ),\n        calloutBlockContainertoDrawShapetrue: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/ ),\n        shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/ ),\n        calloutlegendText: mergeClasses(popoverClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/ ),\n        calloutContentY: mergeClasses(popoverClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/ , isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian),\n        descriptionMessage: mergeClasses(popoverClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/ ),\n        ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /*props.styles?.ratio*/ ),\n        numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /*props.styles?.numerator*/ ),\n        denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /*props.styles?.denominator*/ ),\n        calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n        calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","mc9l5x","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","z189sj","Byoj8tv","uwmqm3","De3pzq","jy2i9i","Beiy3e4","Brf1p80","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","abs64n","sj55zd","calloutBlockContainerCartesian","Bvjb7m6","calloutBlockContainerNonCartesian","t21cq0","calloutLegendText","jrapky","calloutContentYCartesian","calloutContentYNonCartesian","B6of3ja","g2u3we","icvyot","B4j52fo","i8vvqc","Frg6f3","d","p","usePopoverStyles_unstable","props","_props_styles","isCartesian","baseStyles","styles"],"mappings":"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"}
+{"version":3,"sources":["useChartPopoverStyles.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 popoverClassNames = {\n    calloutContentRoot: 'fui-cart__calloutContentRoot',\n    calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n    calloutContentX: 'fui-cart__calloutContentX',\n    calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n    calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n    calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n    shapeStyles: 'fui-cart__shapeStyles',\n    calloutlegendText: 'fui-cart__calloutlegendText',\n    calloutContentY: 'fui-cart__calloutContentY',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    ratio: 'fui-cart__ratio',\n    numerator: 'fui-cart__numerator',\n    denominator: 'fui-cart__denominator',\n    calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n    calloutContainer: 'fui-cart__calloutContainer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    calloutContentRoot: {\n        display: 'grid',\n        overflow: 'hidden',\n        ...shorthands.padding('11px 16px 10px 16px'),\n        backgroundColor: tokens.colorNeutralBackground1,\n        backgroundBlendMode: 'normal, luminosity'\n    },\n    calloutDateTimeContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between'\n    },\n    calloutContentX: {\n        ...typographyStyles.caption1,\n        opacity: '0.8',\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainer: {\n        color: tokens.colorNeutralForeground2,\n        textAlign: 'left'\n    },\n    calloutBlockContainerCartesian: {\n        ...typographyStyles.caption1,\n        forcedColorAdjust: 'none'\n    },\n    calloutBlockContainerNonCartesian: {\n        fontSize: tokens.fontSizeHero700,\n        lineHeight: '22px',\n        forcedColorAdjust: 'none'\n    },\n    calloutBlockContainertoDrawShapefalse: {\n        paddingLeft: tokens.spacingHorizontalS,\n        forcedColorAdjust: 'none'\n    },\n    calloutBlockContainertoDrawShapetrue: {\n        display: 'inline-grid'\n    },\n    shapeStyles: {\n        marginRight: tokens.spacingHorizontalS\n    },\n    calloutLegendText: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        forcedColorAdjust: 'auto',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    calloutContentY: {\n        forcedColorAdjust: 'auto'\n    },\n    calloutContentYCartesian: {\n        ...typographyStyles.subtitle2Stronger\n    },\n    calloutContentYNonCartesian: {\n        ...typographyStyles.title2\n    },\n    descriptionMessage: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        marginTop: tokens.spacingVerticalMNudge,\n        paddingTop: tokens.spacingVerticalMNudge,\n        borderTop: `1px solid ${tokens.colorNeutralStroke2}`\n    },\n    ratio: {\n        ...typographyStyles.caption2,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        color: tokens.colorNeutralForeground1\n    },\n    numerator: {\n        ...typographyStyles.caption2Strong\n    },\n    denominator: {\n        ...typographyStyles.caption2Strong\n    },\n    calloutInfoContainer: {\n        paddingLeft: tokens.spacingHorizontalS,\n        forcedColorAdjust: 'none'\n    },\n    calloutContainer: {}\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const usePopoverStyles_unstable = (props)=>{\n    var _props_styles;\n    const { isCartesian } = props;\n    const baseStyles = useStyles();\n    return {\n        calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.calloutContentRoot),\n        calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/ ),\n        calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/ ),\n        calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/ , isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),\n        calloutBlockContainertoDrawShapefalse: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/ ),\n        calloutBlockContainertoDrawShapetrue: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/ ),\n        shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/ ),\n        calloutlegendText: mergeClasses(popoverClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/ ),\n        calloutContentY: mergeClasses(popoverClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/ , isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian),\n        descriptionMessage: mergeClasses(popoverClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/ ),\n        ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /*props.styles?.ratio*/ ),\n        numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /*props.styles?.numerator*/ ),\n        denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /*props.styles?.denominator*/ ),\n        calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n        calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","mc9l5x","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","z189sj","Byoj8tv","uwmqm3","De3pzq","jy2i9i","Beiy3e4","Brf1p80","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","abs64n","sj55zd","fsow6f","calloutBlockContainerCartesian","Bvjb7m6","calloutBlockContainerNonCartesian","t21cq0","calloutLegendText","jrapky","calloutContentYCartesian","calloutContentYNonCartesian","B6of3ja","g2u3we","icvyot","B4j52fo","i8vvqc","Frg6f3","d","p","usePopoverStyles_unstable","props","_props_styles","isCartesian","baseStyles","styles"],"mappings":"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"}

package/lib-commonjs/components/CommonComponents/useChartPopoverStyles.styles.raw.js

@@ -57,7 +57,8 @@ const popoverClassNames = {
         color: _reacttheme.tokens.colorNeutralForeground2
     },
     calloutBlockContainer: {
-        color: _reacttheme.tokens.colorNeutralForeground2
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        textAlign: 'left'
     },
     calloutBlockContainerCartesian: {
         ..._reacttheme.typographyStyles.caption1,

package/lib-commonjs/components/CommonComponents/useChartPopoverStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/useChartPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { ChartPopoverProps, PopoverComponentStyles } from './ChartPopover.types';\n\n/**\n * @internal\n */\nexport const popoverClassNames: SlotClassNames<PopoverComponentStyles> = {\n  calloutContentRoot: 'fui-cart__calloutContentRoot',\n  calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n  calloutContentX: 'fui-cart__calloutContentX',\n  calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n  calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n  calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n  shapeStyles: 'fui-cart__shapeStyles',\n  calloutlegendText: 'fui-cart__calloutlegendText',\n  calloutContentY: 'fui-cart__calloutContentY',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  ratio: 'fui-cart__ratio',\n  numerator: 'fui-cart__numerator',\n  denominator: 'fui-cart__denominator',\n  calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n  calloutContainer: 'fui-cart__calloutContainer',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  calloutContentRoot: {\n    display: 'grid',\n    overflow: 'hidden',\n    ...shorthands.padding('11px 16px 10px 16px'),\n    backgroundColor: tokens.colorNeutralBackground1,\n    backgroundBlendMode: 'normal, luminosity',\n  },\n  calloutDateTimeContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  calloutContentX: {\n    ...typographyStyles.caption1,\n    opacity: '0.8',\n    color: tokens.colorNeutralForeground2,\n  },\n  calloutBlockContainer: {\n    color: tokens.colorNeutralForeground2,\n  },\n  calloutBlockContainerCartesian: {\n    ...typographyStyles.caption1,\n    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainerNonCartesian: {\n    fontSize: tokens.fontSizeHero700,\n    lineHeight: '22px',\n    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainertoDrawShapefalse: {\n    paddingLeft: tokens.spacingHorizontalS,\n    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainertoDrawShapetrue: { display: 'inline-grid' },\n  shapeStyles: {\n    marginRight: tokens.spacingHorizontalS,\n  },\n  calloutLegendText: {\n    ...typographyStyles.caption1,\n    color: tokens.colorNeutralForeground2,\n    forcedColorAdjust: 'auto',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n  calloutContentY: {\n    forcedColorAdjust: 'auto',\n  },\n  calloutContentYCartesian: {\n    ...typographyStyles.subtitle2Stronger,\n  },\n  calloutContentYNonCartesian: {\n    ...typographyStyles.title2,\n  },\n  descriptionMessage: {\n    ...typographyStyles.caption1,\n    color: tokens.colorNeutralForeground2,\n    marginTop: tokens.spacingVerticalMNudge,\n    paddingTop: tokens.spacingVerticalMNudge,\n    borderTop: `1px solid ${tokens.colorNeutralStroke2}`,\n  },\n  ratio: {\n    ...typographyStyles.caption2,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    color: tokens.colorNeutralForeground1,\n  },\n  numerator: {\n    ...typographyStyles.caption2Strong,\n  },\n  denominator: {\n    ...typographyStyles.caption2Strong,\n  },\n  calloutInfoContainer: {\n    paddingLeft: tokens.spacingHorizontalS,\n    forcedColorAdjust: 'none',\n  },\n  calloutContainer: {},\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const usePopoverStyles_unstable = (props: ChartPopoverProps): PopoverComponentStyles => {\n  const { isCartesian } = props;\n  const baseStyles = useStyles();\n  return {\n    calloutContentRoot: mergeClasses(\n      popoverClassNames.calloutContentRoot,\n      baseStyles.calloutContentRoot,\n      props.styles?.calloutContentRoot,\n    ),\n    calloutDateTimeContainer: mergeClasses(\n      popoverClassNames.calloutDateTimeContainer,\n      baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/,\n    ),\n    calloutContentX: mergeClasses(\n      popoverClassNames.calloutContentX,\n      baseStyles.calloutContentX /*props.styles?.calloutContentX*/,\n    ),\n    calloutBlockContainer: mergeClasses(\n      popoverClassNames.calloutBlockContainer,\n      baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/,\n      isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian,\n    ),\n    calloutBlockContainertoDrawShapefalse: mergeClasses(\n      popoverClassNames.calloutBlockContainertoDrawShapefalse,\n      baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/,\n    ),\n    calloutBlockContainertoDrawShapetrue: mergeClasses(\n      popoverClassNames.calloutBlockContainertoDrawShapetrue,\n      baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/,\n    ),\n    shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/),\n    calloutlegendText: mergeClasses(\n      popoverClassNames.calloutlegendText,\n      baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/,\n    ),\n    calloutContentY: mergeClasses(\n      popoverClassNames.calloutContentY,\n      baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/,\n      isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian,\n    ),\n    descriptionMessage: mergeClasses(\n      popoverClassNames.descriptionMessage,\n      baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/,\n    ),\n    ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /*props.styles?.ratio*/),\n    numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /*props.styles?.numerator*/),\n    denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /*props.styles?.denominator*/),\n    calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n    calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","display","overflow","padding","backgroundColor","colorNeutralBackground1","backgroundBlendMode","flexDirection","justifyContent","caption1","opacity","color","colorNeutralForeground2","calloutBlockContainerCartesian","forcedColorAdjust","calloutBlockContainerNonCartesian","fontSize","fontSizeHero700","lineHeight","paddingLeft","spacingHorizontalS","marginRight","calloutLegendText","marginBottom","spacingVerticalXS","calloutContentYCartesian","subtitle2Stronger","calloutContentYNonCartesian","title2","marginTop","spacingVerticalMNudge","paddingTop","borderTop","colorNeutralStroke2","caption2","marginLeft","spacingHorizontalSNudge","colorNeutralForeground1","caption2Strong","usePopoverStyles_unstable","props","isCartesian","baseStyles","styles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CommonComponents/useChartPopoverStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { ChartPopoverProps, PopoverComponentStyles } from './ChartPopover.types';\n\n/**\n * @internal\n */\nexport const popoverClassNames: SlotClassNames<PopoverComponentStyles> = {\n  calloutContentRoot: 'fui-cart__calloutContentRoot',\n  calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n  calloutContentX: 'fui-cart__calloutContentX',\n  calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n  calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n  calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n  shapeStyles: 'fui-cart__shapeStyles',\n  calloutlegendText: 'fui-cart__calloutlegendText',\n  calloutContentY: 'fui-cart__calloutContentY',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  ratio: 'fui-cart__ratio',\n  numerator: 'fui-cart__numerator',\n  denominator: 'fui-cart__denominator',\n  calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n  calloutContainer: 'fui-cart__calloutContainer',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  calloutContentRoot: {\n    display: 'grid',\n    overflow: 'hidden',\n    ...shorthands.padding('11px 16px 10px 16px'),\n    backgroundColor: tokens.colorNeutralBackground1,\n    backgroundBlendMode: 'normal, luminosity',\n  },\n  calloutDateTimeContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  calloutContentX: {\n    ...typographyStyles.caption1,\n    opacity: '0.8',\n    color: tokens.colorNeutralForeground2,\n  },\n  calloutBlockContainer: {\n    color: tokens.colorNeutralForeground2,\n    textAlign: 'left',\n  },\n  calloutBlockContainerCartesian: {\n    ...typographyStyles.caption1,\n    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainerNonCartesian: {\n    fontSize: tokens.fontSizeHero700,\n    lineHeight: '22px',\n    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainertoDrawShapefalse: {\n    paddingLeft: tokens.spacingHorizontalS,\n    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainertoDrawShapetrue: { display: 'inline-grid' },\n  shapeStyles: {\n    marginRight: tokens.spacingHorizontalS,\n  },\n  calloutLegendText: {\n    ...typographyStyles.caption1,\n    color: tokens.colorNeutralForeground2,\n    forcedColorAdjust: 'auto',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n  calloutContentY: {\n    forcedColorAdjust: 'auto',\n  },\n  calloutContentYCartesian: {\n    ...typographyStyles.subtitle2Stronger,\n  },\n  calloutContentYNonCartesian: {\n    ...typographyStyles.title2,\n  },\n  descriptionMessage: {\n    ...typographyStyles.caption1,\n    color: tokens.colorNeutralForeground2,\n    marginTop: tokens.spacingVerticalMNudge,\n    paddingTop: tokens.spacingVerticalMNudge,\n    borderTop: `1px solid ${tokens.colorNeutralStroke2}`,\n  },\n  ratio: {\n    ...typographyStyles.caption2,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    color: tokens.colorNeutralForeground1,\n  },\n  numerator: {\n    ...typographyStyles.caption2Strong,\n  },\n  denominator: {\n    ...typographyStyles.caption2Strong,\n  },\n  calloutInfoContainer: {\n    paddingLeft: tokens.spacingHorizontalS,\n    forcedColorAdjust: 'none',\n  },\n  calloutContainer: {},\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const usePopoverStyles_unstable = (props: ChartPopoverProps): PopoverComponentStyles => {\n  const { isCartesian } = props;\n  const baseStyles = useStyles();\n  return {\n    calloutContentRoot: mergeClasses(\n      popoverClassNames.calloutContentRoot,\n      baseStyles.calloutContentRoot,\n      props.styles?.calloutContentRoot,\n    ),\n    calloutDateTimeContainer: mergeClasses(\n      popoverClassNames.calloutDateTimeContainer,\n      baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/,\n    ),\n    calloutContentX: mergeClasses(\n      popoverClassNames.calloutContentX,\n      baseStyles.calloutContentX /*props.styles?.calloutContentX*/,\n    ),\n    calloutBlockContainer: mergeClasses(\n      popoverClassNames.calloutBlockContainer,\n      baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/,\n      isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian,\n    ),\n    calloutBlockContainertoDrawShapefalse: mergeClasses(\n      popoverClassNames.calloutBlockContainertoDrawShapefalse,\n      baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/,\n    ),\n    calloutBlockContainertoDrawShapetrue: mergeClasses(\n      popoverClassNames.calloutBlockContainertoDrawShapetrue,\n      baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/,\n    ),\n    shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/),\n    calloutlegendText: mergeClasses(\n      popoverClassNames.calloutlegendText,\n      baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/,\n    ),\n    calloutContentY: mergeClasses(\n      popoverClassNames.calloutContentY,\n      baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/,\n      isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian,\n    ),\n    descriptionMessage: mergeClasses(\n      popoverClassNames.descriptionMessage,\n      baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/,\n    ),\n    ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /*props.styles?.ratio*/),\n    numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /*props.styles?.numerator*/),\n    denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /*props.styles?.denominator*/),\n    calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n    calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","display","overflow","padding","backgroundColor","colorNeutralBackground1","backgroundBlendMode","flexDirection","justifyContent","caption1","opacity","color","colorNeutralForeground2","textAlign","calloutBlockContainerCartesian","forcedColorAdjust","calloutBlockContainerNonCartesian","fontSize","fontSizeHero700","lineHeight","paddingLeft","spacingHorizontalS","marginRight","calloutLegendText","marginBottom","spacingVerticalXS","calloutContentYCartesian","subtitle2Stronger","calloutContentYNonCartesian","title2","marginTop","spacingVerticalMNudge","paddingTop","borderTop","colorNeutralStroke2","caption2","marginLeft","spacingHorizontalSNudge","colorNeutralForeground1","caption2Strong","usePopoverStyles_unstable","props","isCartesian","baseStyles","styles"],"mappings":"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"}

package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.js

@@ -36,7 +36,11 @@ const donutClassNames = {
         mc9l5x: "f22iagw",
         Beiy3e4: "f1vx9l62",
         a9b677: "fly5x3f",
-        Bqenvij: "f1l02sjl"
+        Bqenvij: "f1l02sjl",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ]
     },
     chart: {
         B7ck84d: "f1e4lqlz",
@@ -71,6 +75,8 @@ const donutClassNames = {
         ".f1vx9l62{flex-direction:column;}",
         ".fly5x3f{width:100%;}",
         ".f1l02sjl{height:100%;}",
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}",
         ".f1e4lqlz{box-sizing:content-box;}",
         ".fzm18in{alignment-adjust:center;}",
         ".ftgm304{display:block;}",

package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getAxisTitleStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const donutClassNames = {\n    root: 'fui-donut__root',\n    chart: 'fui-donut__chart',\n    legendContainer: 'fui-donut__legendContainer',\n    chartWrapper: 'fui-donut__chartWrapper',\n    axisAnnotation: 'fui-donut__axisAnnotation'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL,\n        width: '100%'\n    },\n    axisAnnotation: getAxisTitleStyle()\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),\n        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","d","p","m","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","className","baseStyles","styles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAMKK,eAAe;;;IAgCf6B,mBAAmB;;;;uBArCK,gBAAgB;AAK9C,wBAAwB;IAC/B5B,IAAI,EAAE,iBAAiB;IACvBC,KAAK,EAAE,kBAAkB;IACzBC,eAAe,EAAE,4BAA4B;IAC7CC,YAAY,EAAE,yBAAyB;IACvCC,cAAc,EAAE;AACpB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGX,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAM,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAZ,KAAA,EAAA;QAAAa,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAL,MAAA,EAAA;QAAAM,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,eAAA,EAAA;QAAAiB,MAAA,EAAA;QAAAP,MAAA,EAAA;IAAA;IAAAR,cAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAW,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAoBrB,CAAC;AAGS,6BAA6BE,KAAK,IAAG;IAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;IACjF,MAAM,EAAEC,SAAAA,EAAW,GAAGN,KAAK;IAC3B,MAAMO,UAAU,GAAG/B,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHL,IAAI,EAAEL,uBAAY,EAACI,eAAe,CAACC,IAAI,EAAEoC,UAAU,CAACpC,IAAI,EAAEmC,SAAS,EAAE,CAACL,aAAa,GAAGD,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIP,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC9B,IAAI,CAAC;QACvKC,KAAK,MAAEN,mBAAY,EAACI,eAAe,CAACE,KAAK,EAAEmC,UAAU,CAACnC,KAAK,EAAE,CAAC8B,cAAc,GAAGF,KAAK,CAACQ,MAAM,AAANA,MAAY,IAAI,IAAIN,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,KAAK,CAAC;QACnKC,eAAe,MAAEP,mBAAY,EAACI,eAAe,CAACG,eAAe,EAAEkC,UAAU,CAAClC,eAAe,EAAE,CAAC8B,cAAc,GAAGH,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,eAAe,CAAC;QAC3MC,YAAY,MAAER,mBAAY,EAACI,eAAe,CAACI,YAAY,EAAE,CAAC8B,cAAc,GAAGJ,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,YAAY,CAAC;QACtKC,cAAc,MAAET,mBAAY,EAACI,eAAe,CAACK,cAAc,EAAEgC,UAAU,CAAChC,cAAc,EAAE,CAAC8B,cAAc,GAAGL,KAAK,CAACQ,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,cAAc;IAC1M,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getAxisTitleStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const donutClassNames = {\n    root: 'fui-donut__root',\n    chart: 'fui-donut__chart',\n    legendContainer: 'fui-donut__legendContainer',\n    chartWrapper: 'fui-donut__chartWrapper',\n    axisAnnotation: 'fui-donut__axisAnnotation'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n        textAlign: 'left'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL,\n        width: '100%'\n    },\n    axisAnnotation: getAxisTitleStyle()\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),\n        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","fsow6f","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","B80ckks","sj55zd","Bkfmm31","a6j6cd","d","p","m","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","className","baseStyles","styles"],"mappings":"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"}

package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.raw.js

@@ -36,7 +36,8 @@ const donutClassNames = {
         display: 'flex',
         flexDirection: 'column',
         width: '100%',
-        height: '100%'
+        height: '100%',
+        textAlign: 'left'
     },
     chart: {
         boxSizing: 'content-box',