@fluentui/react-charts 9.1.6 → 9.1.7

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Fri, 04 Jul 2025 10:00:11 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Jul 2025 15:56:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.7)
+
+Fri, 11 Jul 2025 15:56:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.6..@fluentui/react-charts_v9.1.7)
+
+### Patches
+
+- fix accessibility bugs ([PR #34785](https://github.com/microsoft/fluentui/pull/34785) by anushgupta@microsoft.com)
+- sankey chart callout fix ([PR #34806](https://github.com/microsoft/fluentui/pull/34806) by anushgupta@microsoft.com)
+- fix accessibility issues ([PR #34798](https://github.com/microsoft/fluentui/pull/34798) by anushgupta@microsoft.com)
+- fix(react-charts): Fix hook used conditionally inside a function ([PR #34787](https://github.com/microsoft/fluentui/pull/34787) by 98592573+AtishayMsft@users.noreply.github.com)
+- Bump @fluentui/react-overflow to v9.4.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+- Bump @fluentui/react-popover to v9.11.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+- Bump @fluentui/react-tooltip to v9.7.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+
 ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.1.6)
 
-Fri, 04 Jul 2025 10:00:11 GMT 
+Fri, 04 Jul 2025 10:02:50 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.1.5..@fluentui/react-charts_v9.1.6)
 
 ### Patches

package/dist/index.d.ts

@@ -605,6 +605,7 @@ export declare interface ChartPopoverProps {
     descriptionMessage?: string;
     ratio?: [number, number];
     isCartesian?: boolean;
+    styles?: Partial<PopoverComponentStyles>;
 }
 
 /**
@@ -1540,6 +1541,7 @@ export declare interface HeatMapChartProps extends CartesianChartProps {
 export declare interface HeatMapChartStyles extends CartesianChartStyles {
     root?: string;
     text?: string;
+    calloutContentRoot?: string;
 }
 
 /**
@@ -3122,7 +3124,7 @@ export declare interface VerticalBarChartProps extends CartesianChartProps {
     /**
      * Call to provide customized styling that will layer on top of the variant rules.
      */
-    styles?: VerticalBarChartStyles;
+    styles?: Partial<VerticalBarChartStyles>;
     /**
      * The prop used to define the culture to localized the numbers
      */
@@ -3248,7 +3250,7 @@ export declare interface VerticalStackedBarChartProps extends CartesianChartProp
     /**
      * Call to provide customized styling that will layer on top of the variant rules.
      */
-    styles?: VerticalStackedBarChartStyles;
+    styles?: Partial<VerticalStackedBarChartStyles>;
     /**
      * Define a custom callout renderer for a stack; default is to render per data point
      */

package/lib/components/CommonComponents/ChartPopover.js

@@ -55,7 +55,8 @@ combining the logic for Callout and ChartHoverCard in v8 charts. */ export const
                 display: 'flex',
                 alignItems: 'flex-end'
             },
-            borderInlineStart: `4px solid ${props.color}`
+            borderInlineStart: `4px solid ${props.color}`,
+            marginTop: '11px'
         }
     }, /*#__PURE__*/ React.createElement("div", {
         className: classes.calloutBlockContainer

package/lib/components/CommonComponents/ChartPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. */\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n  HTMLDivElement,\n  ChartPopoverProps\n>((props, forwardedRef) => {\n  const virtualElement: PositioningVirtualElement = {\n    getBoundingClientRect: () => ({\n      top: props.clickPosition!.y,\n      left: props.clickPosition!.x,\n      right: props.clickPosition!.x,\n      bottom: props.clickPosition!.y,\n      x: props.clickPosition!.x,\n      y: props.clickPosition!.y,\n      width: 0,\n      height: 0,\n    }),\n  };\n  props = { ...props, ...props.customCallout?.customCalloutProps };\n  const classes = usePopoverStyles_unstable(props);\n  const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n  const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n  return (\n    <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n      <Popover\n        positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n        open={props.isPopoverOpen}\n        inline\n      >\n        <PopoverSurface>\n          {/** Given custom callout, then it will render */}\n          {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) &&\n            props.isCalloutForStack &&\n            _multiValueCallout()}\n          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n            <div className={classes.calloutContentRoot}>\n              <div className={classes.calloutDateTimeContainer}>\n                <div className={classes.calloutContentX}>{props.XValue} </div>\n                {/*TO DO  if we add time for callout then will use this */}\n                {/* <div className={classNames.calloutContentX}>07:00am</div> */}\n              </div>\n              <div\n                className={classes.calloutInfoContainer}\n                style={{\n                  ...(props.ratio && {\n                    display: 'flex',\n                    alignItems: 'flex-end',\n                  }),\n                  borderInlineStart: `4px solid ${props.color}`,\n                }}\n              >\n                <div className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>\n                    {formatToLocaleString(legend, props.culture) as React.ReactNode}\n                  </div>\n                  <div\n                    className={classes.calloutContentY}\n                    style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                  >\n                    {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n                  </div>\n                </div>\n                {!!props.ratio && (\n                  <div className={classes.ratio}>\n                    <>\n                      <span className={classes.numerator}>\n                        {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n                      </span>\n                      /\n                      <span className={classes.denominator}>\n                        {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n                      </span>\n                    </>\n                  </div>\n                )}\n              </div>\n              {!!props.descriptionMessage && (\n                <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n              )}\n            </div>\n          )}\n        </PopoverSurface>\n      </Popover>\n    </div>\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _multiValueCallout() {\n    const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n    return (\n      <div className={classes.calloutContentRoot}>\n        <div\n          className={classes.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={classes.calloutContentX}\n            {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n          </div>\n        </div>\n        <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n          {props!.YValueHover &&\n            props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const { shouldDrawBorderBottom = false } = yValue;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean | undefined {\n    return (\n      yValueHover &&\n      yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      )\n    );\n  }\n\n  function _getCalloutContent(\n    xValue: YValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const { culture } = props;\n    const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div\n            id={`${index}_${xValue.y}`}\n            className={classes.calloutBlockContainer}\n            style={{\n              marginTop: props.XValue ? '13px' : 'unset',\n              ...(!toDrawShape\n                ? {\n                    borderInlineStart: `4px solid ${xValue.color}`,\n                  }\n                : {}),\n            }}\n          >\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: classes.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div\n              className={mergeClasses(\n                classes.calloutBlockContainer,\n                toDrawShape\n                  ? classes.calloutBlockContainertoDrawShapetrue\n                  : classes.calloutBlockContainertoDrawShapefalse,\n              )}\n            >\n              <div className={classes.calloutlegendText}> {xValue.legend}</div>\n              <div className={classes.calloutContentY}>\n                {\n                  formatToLocaleString(\n                    xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n                    culture,\n                  ) as React.ReactNode\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={classes.calloutBlockContainer}>\n                <div className={classes.calloutlegendText}>\n                  {' '}\n                  {formatToLocaleString(subcountName, culture) as React.ReactNode}\n                </div>\n                <div\n                  className={classes.calloutContentY}\n                  style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                >\n                  {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","fontSize","marginTop","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","data","subcounts","subcountName","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. */\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n  HTMLDivElement,\n  ChartPopoverProps\n>((props, forwardedRef) => {\n  const virtualElement: PositioningVirtualElement = {\n    getBoundingClientRect: () => ({\n      top: props.clickPosition!.y,\n      left: props.clickPosition!.x,\n      right: props.clickPosition!.x,\n      bottom: props.clickPosition!.y,\n      x: props.clickPosition!.x,\n      y: props.clickPosition!.y,\n      width: 0,\n      height: 0,\n    }),\n  };\n  props = { ...props, ...props.customCallout?.customCalloutProps };\n  const classes = usePopoverStyles_unstable(props);\n  const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n  const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n  return (\n    <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n      <Popover\n        positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n        open={props.isPopoverOpen}\n        inline\n      >\n        <PopoverSurface>\n          {/** Given custom callout, then it will render */}\n          {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) &&\n            props.isCalloutForStack &&\n            _multiValueCallout()}\n          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n            <div className={classes.calloutContentRoot}>\n              <div className={classes.calloutDateTimeContainer}>\n                <div className={classes.calloutContentX}>{props.XValue} </div>\n                {/*TO DO  if we add time for callout then will use this */}\n                {/* <div className={classNames.calloutContentX}>07:00am</div> */}\n              </div>\n              <div\n                className={classes.calloutInfoContainer}\n                style={{\n                  ...(props.ratio && {\n                    display: 'flex',\n                    alignItems: 'flex-end',\n                  }),\n                  borderInlineStart: `4px solid ${props.color}`,\n                  marginTop: '11px',\n                }}\n              >\n                <div className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>\n                    {formatToLocaleString(legend, props.culture) as React.ReactNode}\n                  </div>\n                  <div\n                    className={classes.calloutContentY}\n                    style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                  >\n                    {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n                  </div>\n                </div>\n                {!!props.ratio && (\n                  <div className={classes.ratio}>\n                    <>\n                      <span className={classes.numerator}>\n                        {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n                      </span>\n                      /\n                      <span className={classes.denominator}>\n                        {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n                      </span>\n                    </>\n                  </div>\n                )}\n              </div>\n              {!!props.descriptionMessage && (\n                <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n              )}\n            </div>\n          )}\n        </PopoverSurface>\n      </Popover>\n    </div>\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _multiValueCallout() {\n    const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n    return (\n      <div className={classes.calloutContentRoot}>\n        <div\n          className={classes.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={classes.calloutContentX}\n            {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n          </div>\n        </div>\n        <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n          {props!.YValueHover &&\n            props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const { shouldDrawBorderBottom = false } = yValue;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean | undefined {\n    return (\n      yValueHover &&\n      yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      )\n    );\n  }\n\n  function _getCalloutContent(\n    xValue: YValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const { culture } = props;\n    const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div\n            id={`${index}_${xValue.y}`}\n            className={classes.calloutBlockContainer}\n            style={{\n              marginTop: props.XValue ? '13px' : 'unset',\n              ...(!toDrawShape\n                ? {\n                    borderInlineStart: `4px solid ${xValue.color}`,\n                  }\n                : {}),\n            }}\n          >\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: classes.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div\n              className={mergeClasses(\n                classes.calloutBlockContainer,\n                toDrawShape\n                  ? classes.calloutBlockContainertoDrawShapetrue\n                  : classes.calloutBlockContainertoDrawShapefalse,\n              )}\n            >\n              <div className={classes.calloutlegendText}> {xValue.legend}</div>\n              <div className={classes.calloutContentY}>\n                {\n                  formatToLocaleString(\n                    xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n                    culture,\n                  ) as React.ReactNode\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={classes.calloutBlockContainer}>\n                <div className={classes.calloutlegendText}>\n                  {' '}\n                  {formatToLocaleString(subcountName, culture) as React.ReactNode}\n                </div>\n                <div\n                  className={classes.calloutContentY}\n                  style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                >\n                  {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","fontSize","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","data","subcounts","subcountName","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAClE,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,uBAAuB,EAAEC,MAAM,EAAEC,UAAU,QAAQ,wBAAwB;AACpF,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,mBAAmB;AACzC,SAASC,yBAAyB,QAAQ,iCAAiC;AAK3E;iEACiE,GACjE,OAAO,MAAMC,6BAA2DZ,MAAMa,UAAU,CAGtF,CAACC,OAAOC;QAaeD;IAZvB,MAAME,iBAA4C;QAChDC,uBAAuB,IAAO,CAAA;gBAC5BC,KAAKJ,MAAMK,aAAa,CAAEC,CAAC;gBAC3BC,MAAMP,MAAMK,aAAa,CAAEG,CAAC;gBAC5BC,OAAOT,MAAMK,aAAa,CAAEG,CAAC;gBAC7BE,QAAQV,MAAMK,aAAa,CAAEC,CAAC;gBAC9BE,GAAGR,MAAMK,aAAa,CAAEG,CAAC;gBACzBF,GAAGN,MAAMK,aAAa,CAAEC,CAAC;gBACzBK,OAAO;gBACPC,QAAQ;YACV,CAAA;IACF;IACAZ,QAAQ;QAAE,GAAGA,KAAK;YAAKA,uBAAAA,MAAMa,aAAa,cAAnBb,2CAAAA,qBAAqBc,kBAAkB,AAA1C;IAA2C;IAC/D,MAAMC,UAAUlB,0BAA0BG;IAC1C,MAAMgB,SAAShB,MAAMiB,aAAa,GAAGjB,MAAMiB,aAAa,GAAGjB,MAAMgB,MAAM;IACvE,MAAME,SAASlB,MAAMmB,aAAa,GAAGnB,MAAMmB,aAAa,GAAGnB,MAAMkB,MAAM;IACvE,qBACE,oBAACE;QAAIC,IAAI9B,MAAM;QAAY+B,KAAKrB;QAAcsB,WAAWR,QAAQS,gBAAgB;qBAC/E,oBAACrC;QACCsC,aAAa;YAAEC,QAAQxB;YAAgByB,UAAU;YAAUC,QAAQ;YAAIC,aAAa;QAAM;QAC1FC,MAAM9B,MAAM+B,aAAa;QACzBC,QAAAA;qBAEA,oBAAC5C,sBAEEY,MAAMa,aAAa,IAAIb,MAAMa,aAAa,CAACoB,iBAAiB,IAAIjC,MAAMa,aAAa,CAACoB,iBAAiB,EAErG,AAAC,CAAA,CAACjC,MAAMa,aAAa,IAAI,CAACb,MAAMa,aAAa,CAACoB,iBAAiB,AAAD,KAC7DjC,MAAMkC,iBAAiB,IACvBC,sBAED,AAAC,CAAA,CAACnC,MAAMa,aAAa,IAAI,CAACb,MAAMa,aAAa,CAACoB,iBAAiB,AAAD,KAAM,CAACjC,MAAMkC,iBAAiB,kBAC3F,oBAACd;QAAIG,WAAWR,QAAQqB,kBAAkB;qBACxC,oBAAChB;QAAIG,WAAWR,QAAQsB,wBAAwB;qBAC9C,oBAACjB;QAAIG,WAAWR,QAAQuB,eAAe;OAAGtC,MAAMuC,MAAM,EAAC,qBAIzD,oBAACnB;QACCG,WAAWR,QAAQyB,oBAAoB;QACvCC,OAAO;YACL,GAAIzC,MAAM0C,KAAK,IAAI;gBACjBC,SAAS;gBACTC,YAAY;YACd,CAAC;YACDC,mBAAmB,CAAC,UAAU,EAAE7C,MAAM8C,KAAK,CAAC,CAAC;YAC7CC,WAAW;QACb;qBAEA,oBAAC3B;QAAIG,WAAWR,QAAQiC,qBAAqB;qBAC3C,oBAAC5B;QAAIG,WAAWR,QAAQkC,iBAAiB;OACtCtD,qBAAqBqB,QAAQhB,MAAMkD,OAAO,kBAE7C,oBAAC9B;QACCG,WAAWR,QAAQoC,eAAe;QAClCV,OAAO;YAAEK,OAAO9C,MAAM8C,KAAK,GAAG9C,MAAM8C,KAAK,GAAGxD,OAAO8D,uBAAuB;QAAC;OAE1EzD,qBAAqBuB,QAAQlB,MAAMkD,OAAO,KAG9C,CAAC,CAAClD,MAAM0C,KAAK,kBACZ,oBAACtB;QAAIG,WAAWR,QAAQ2B,KAAK;qBAC3B,wDACE,oBAACW;QAAK9B,WAAWR,QAAQuC,SAAS;OAC/B3D,qBAAqBK,MAAM0C,KAAK,CAAC,EAAE,EAAE1C,MAAMkD,OAAO,IAC9C,mBAEP,oBAACG;QAAK9B,WAAWR,QAAQwC,WAAW;OACjC5D,qBAAqBK,MAAM0C,KAAK,CAAC,EAAE,EAAE1C,MAAMkD,OAAO,OAM5D,CAAC,CAAClD,MAAMwD,kBAAkB,kBACzB,oBAACpC;QAAIG,WAAWR,QAAQyC,kBAAkB;OAAGxD,MAAMwD,kBAAkB;IASnF,8DAA8D;IAC9D,SAASrB;YACqCsB;QAA5C,MAAMC,6BAAsCD,CAAAA,+BAAAA,4BAA4BzD,MAAM2D,WAAW,eAA7CF,0CAAAA,+BAAkD;QAC9F,qBACE,oBAACrC;YAAIG,WAAWR,QAAQqB,kBAAkB;yBACxC,oBAAChB;YACCG,WAAWR,QAAQsB,wBAAwB;YAC3CI,OAAOiB,6BAA6B;gBAAEE,cAAc;YAAO,IAAI,CAAC;yBAEhE,oBAACxC;YACCG,WAAWR,QAAQuB,eAAe;YACjC,GAAG9C,wBAAwBQ,MAAO6D,6BAA6B,EAAE,QAAQ,MAAM;WAE/ElE,qBAAqBK,MAAO8D,WAAW,EAAE9D,MAAMkD,OAAO,mBAG3D,oBAAC9B;YAAIqB,OAAOiB,6BAA6B;gBAAEf,SAAS;YAAO,IAAI,CAAC;WAC7D3C,MAAO2D,WAAW,IACjB3D,MAAO2D,WAAW,CAACI,GAAG,CAAC,CAACC,QAAqBC,OAAeC;YAC1D,MAAMC,SAAkBF,QAAQ,MAAMC,QAAQE,MAAM;YACpD,MAAM,EAAEC,yBAAyB,KAAK,EAAE,GAAGL;YAC3C,qBACE,oBAAC5C;gBACE,GAAG5B,wBAAwBwE,OAAOM,wBAAwB,EAAE,QAAQ,MAAM;gBAC3EC,KAAK,CAAC,gBAAgB,EAAEN,MAAM,CAAC;gBAC/BxB,OACEiB,6BACI;oBACEf,SAAS;oBACT,GAAI0B,0BAA0B;wBAC5BG,cAAc,CAAC,UAAU,EAAElF,OAAOmF,mBAAmB,CAAC,CAAC;wBACvDC,eAAe;oBACjB,CAAC;gBACH,IACA;oBACE,GAAIL,0BAA0B;wBAC5BG,cAAc,CAAC,UAAU,EAAElF,OAAOmF,mBAAmB,CAAC,CAAC;wBACvDC,eAAe;oBACjB,CAAC;gBACH;eAGLC,mBAAmBX,QAAQC,OAAOP,4BAA4BS;QAGrE,IACD,CAAC,CAACnE,MAAMwD,kBAAkB,kBAAI,oBAACpC;YAAIG,WAAWR,QAAQyC,kBAAkB;WAAGxD,MAAMwD,kBAAkB;IAI5G;IAEA,SAASC,4BAA4BmB,WAA2B;QAC9D,OACEA,eACAA,YAAYC,IAAI,CACd,CAACb,SAKKA,OAAOc,gBAAgB,IAAI,OAAOd,OAAOc,gBAAgB,KAAK;IAG1E;IAEA,SAASH,mBACPI,MAAmB,EACnBd,KAAa,EACbP,0BAAmC,EACnCS,MAAe;QAEf,MAAMa,cAAmCb,SAAS,CAAC,IAAI;YAAEc,aAAa;QAAO;QAC7E,MAAMC,cAAcH,OAAOd,KAAK,KAAKkB,aAAaJ,OAAOd,KAAK,KAAK,CAAC;QACpE,MAAM,EAAEf,OAAO,EAAE,GAAGlD;QACpB,MAAMgE,SAASrE,qBAAqBoF,OAAOzE,CAAC,EAAE4C;QAC9C,IAAI,CAAC6B,OAAOD,gBAAgB,IAAI,OAAOC,OAAOD,gBAAgB,KAAK,UAAU;gBAyCTC;YAxClE,qBACE,oBAAC3D;gBAAIqB,OAAOiB,6BAA6BsB,cAAc,CAAC;eACrDtB,4CACC,oBAACtC;gBAAIG,WAAU;gBAAyBkB,OAAO;oBAAE2C,UAAU;gBAAO;eAC/DL,OAAO/D,MAAM,EAAE,MAAGgD,QAAO,oBAG9B,oBAAC5C;gBACCC,IAAI,CAAC,EAAE4C,MAAM,CAAC,EAAEc,OAAOzE,CAAC,CAAC,CAAC;gBAC1BiB,WAAWR,QAAQiC,qBAAqB;gBACxCP,OAAO;oBACLM,WAAW/C,MAAMuC,MAAM,GAAG,SAAS;oBACnC,GAAI,CAAC2C,cACD;wBACErC,mBAAmB,CAAC,UAAU,EAAEkC,OAAOjC,KAAK,CAAC,CAAC;oBAChD,IACA,CAAC,CAAC;gBACR;eAECoC,6BACC,oBAACtF;gBACCyF,UAAU;oBACR9D,WAAWR,QAAQuE,WAAW;gBAChC;gBACAC,WAAW;oBAAEC,MAAMT,OAAOjC,KAAK;gBAAC;gBAChC2C,OAAOhG,MAAM,CAACsF,OAAOd,KAAK,GAAIyB,OAAOC,IAAI,CAACjG,YAAY0E,MAAM,CAAC;8BAGjE,oBAAChD;gBACCG,WAAWlC,aACT0B,QAAQiC,qBAAqB,EAC7BkC,cACInE,QAAQ6E,oCAAoC,GAC5C7E,QAAQ8E,qCAAqC;6BAGnD,oBAACzE;gBAAIG,WAAWR,QAAQkC,iBAAiB;eAAE,KAAE8B,OAAO/D,MAAM,iBAC1D,oBAACI;gBAAIG,WAAWR,QAAQoC,eAAe;eAEnCxD,qBACEoF,OAAOD,gBAAgB,GAAGC,OAAOD,gBAAgB,GAAGC,CAAAA,YAAAA,OAAOzE,CAAC,cAARyE,uBAAAA,YAAYA,OAAOe,IAAI,EAC3E5C;QAQhB,OAAO;YACL,MAAM6C,YAAsChB,OAAOD,gBAAgB;YACnE,qBACE,oBAAC1D;gBAAIqB,OAAOuC;6BACV,oBAAC5D;gBAAIG,WAAU;gBAAyBkB,OAAO;oBAAE2C,UAAU;gBAAO;eAC/DL,OAAO/D,MAAM,EAAE,MAAGgD,QAAO,MAE3B0B,OAAOC,IAAI,CAACI,WAAWhC,GAAG,CAAC,CAACiC;gBAC3B,qBACE,oBAAC5E;oBAAImD,KAAKyB;oBAAczE,WAAWR,QAAQiC,qBAAqB;iCAC9D,oBAAC5B;oBAAIG,WAAWR,QAAQkC,iBAAiB;mBACtC,KACAtD,qBAAqBqG,cAAc9C,yBAEtC,oBAAC9B;oBACCG,WAAWR,QAAQoC,eAAe;oBAClCV,OAAO;wBAAEK,OAAO9C,MAAM8C,KAAK,GAAG9C,MAAM8C,KAAK,GAAGxD,OAAO8D,uBAAuB;oBAAC;mBAE1EzD,qBAAqBoG,SAAS,CAACC,aAAa,EAAE9C;YAIvD;QAGN;IACF;AACF,GAAG;AACHpD,aAAamG,WAAW,GAAG"}

package/lib/components/CommonComponents/ChartPopover.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChartPopover.types.ts"],"sourcesContent":["import { YValueHover } from '../../index';\n\nexport interface ChartPopoverProps {\n  clickPosition?: { x: number; y: number };\n  isPopoverOpen?: boolean;\n  xCalloutValue?: string;\n  legend?: string | number | Date;\n  yCalloutValue?: string;\n  YValue?: string | number | Date;\n  XValue?: string;\n  color?: string;\n  culture?: string;\n  customCallout?: {\n    customizedCallout?: JSX.Element;\n    customCalloutProps?: ChartPopoverProps;\n  };\n  isCalloutForStack?: boolean;\n  xAxisCalloutAccessibilityData?: { ariaLabel?: string; data?: string };\n  hoverXValue?: string | number;\n  YValueHover?: YValueHover[];\n  descriptionMessage?: string;\n  ratio?: [number, number];\n  isCartesian?: boolean;\n}\n\nexport interface PopoverComponentStyles {\n  calloutContentRoot: string;\n  calloutDateTimeContainer: string;\n  calloutContentX: string;\n  calloutBlockContainer: string;\n  calloutBlockContainertoDrawShapefalse: string;\n  calloutBlockContainertoDrawShapetrue: string;\n  shapeStyles: string;\n  calloutlegendText: string;\n  calloutContentY: string;\n  descriptionMessage: string;\n  ratio: string;\n  numerator: string;\n  denominator: string;\n  calloutInfoContainer: string;\n  calloutContainer: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AAyBA,WAgBC"}
+{"version":3,"sources":["ChartPopover.types.ts"],"sourcesContent":["import { YValueHover } from '../../index';\n\nexport interface ChartPopoverProps {\n  clickPosition?: { x: number; y: number };\n  isPopoverOpen?: boolean;\n  xCalloutValue?: string;\n  legend?: string | number | Date;\n  yCalloutValue?: string;\n  YValue?: string | number | Date;\n  XValue?: string;\n  color?: string;\n  culture?: string;\n  customCallout?: {\n    customizedCallout?: JSX.Element;\n    customCalloutProps?: ChartPopoverProps;\n  };\n  isCalloutForStack?: boolean;\n  xAxisCalloutAccessibilityData?: { ariaLabel?: string; data?: string };\n  hoverXValue?: string | number;\n  YValueHover?: YValueHover[];\n  descriptionMessage?: string;\n  ratio?: [number, number];\n  isCartesian?: boolean;\n  styles?: Partial<PopoverComponentStyles>;\n}\n\nexport interface PopoverComponentStyles {\n  calloutContentRoot: string;\n  calloutDateTimeContainer: string;\n  calloutContentX: string;\n  calloutBlockContainer: string;\n  calloutBlockContainertoDrawShapefalse: string;\n  calloutBlockContainertoDrawShapetrue: string;\n  shapeStyles: string;\n  calloutlegendText: string;\n  calloutContentY: string;\n  descriptionMessage: string;\n  ratio: string;\n  numerator: string;\n  denominator: string;\n  calloutInfoContainer: string;\n  calloutContainer: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AA0BA,WAgBC"}

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

@@ -134,7 +134,7 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the Carousel slots based on the state
  */
 export const useCartesianChartStyles = props => {
-  var _props_styles, _props_reflowProps, _props_styles1, _props_styles2;
+  var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;
   const _useRtl = useRtl();
   const baseStyles = useStyles();
   return {
@@ -145,9 +145,9 @@ export const useCartesianChartStyles = props => {
     yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/),
     opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/),
     legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/),
-    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip /*props.styles?.svgTooltip*/),
+    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),
     tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),
-    chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)
+    chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)
   };
 };
 //# sourceMappingURL=useCartesianChartStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","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","_useRtl","baseStyles","styles","reflowProps","mode"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\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    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: {\n        ...typographyStyles.caption2Strong,\n        fontStyle: 'normal',\n        textAlign: 'center',\n        color: tokens.colorNeutralForeground2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    },\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: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\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;\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.styles?.svgTooltip*/ ),\n        tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","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"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\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    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: {\n        ...typographyStyles.caption2Strong,\n        fontStyle: 'normal',\n        textAlign: 'center',\n        color: tokens.colorNeutralForeground2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    },\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: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        backgroundColor: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\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        chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -25,7 +25,7 @@ export const popoverClassNames = {
  */
 const useStyles = /*#__PURE__*/__styles({
   calloutContentRoot: {
-    mc9l5x: "f1bxpd7w",
+    mc9l5x: "f13qh94s",
     B68tc82: 0,
     Bmxbyg5: 0,
     Bpg54ce: "f1a3p1vp",
@@ -106,7 +106,10 @@ const useStyles = /*#__PURE__*/__styles({
     sj55zd: "fkfq4zb",
     B6of3ja: "f1gaxbfw",
     z8tnut: "f1ngh7ph",
-    B4j52fo: "f1pgliyk"
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    i8vvqc: "f16zin0e"
   },
   ratio: {
     Bahqtrf: "fk6fouc",
@@ -134,20 +137,23 @@ const useStyles = /*#__PURE__*/__styles({
   },
   calloutContainer: {}
 }, {
-  d: [".f1bxpd7w{display:contents;}", [".f1a3p1vp{overflow:hidden;}", {
+  d: [".f13qh94s{display:grid;}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
-  }], ".f1dvrhzg{padding-top:11px 16px 10px 16px;}", ".fjnv7mu{padding-right:11px 16px 10px 16px;}", ".fae8789{padding-left:11px 16px 10px 16px;}", ".f1av7aef{padding-bottom:11px 16px 10px 16px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fronft5{background-blend-mode:normal,luminosity;}", ".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fp25eh{opacity:0.8;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f7jvbu2{margin-top:13px;}", ".fdgv6k0{forced-color-adjust:none;}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".f82itaf{line-height:22px;}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".fwk3njj{display:inline-grid;}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fhv2zbx{forced-color-adjust:auto;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".flh3ekv{font-weight:var(--fontWeightBold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f1pgliyk{border-top-width:1px solid var(--colorNeutralStroke2);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f19n0e5{color:var(--colorNeutralForeground1);}"]
+  }], ".f1dvrhzg{padding-top:11px 16px 10px 16px;}", ".fjnv7mu{padding-right:11px 16px 10px 16px;}", ".fae8789{padding-left:11px 16px 10px 16px;}", ".f1av7aef{padding-bottom:11px 16px 10px 16px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fronft5{background-blend-mode:normal,luminosity;}", ".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fp25eh{opacity:0.8;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f7jvbu2{margin-top:13px;}", ".fdgv6k0{forced-color-adjust:none;}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".f82itaf{line-height:22px;}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".fwk3njj{display:inline-grid;}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fhv2zbx{forced-color-adjust:auto;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".flh3ekv{font-weight:var(--fontWeightBold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", [".f16zin0e{border-top:1px solid var(--colorNeutralStroke2);}", {
+    p: -1
+  }], ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f19n0e5{color:var(--colorNeutralForeground1);}"]
 });
 /**
  * Apply styling to the Carousel slots based on the state
  */
 export const usePopoverStyles_unstable = props => {
+  var _props_styles;
   const {
     isCartesian
   } = props;
   const baseStyles = useStyles();
   return {
-    calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*props.styles?. calloutContentRoot*/),
+    calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.calloutContentRoot),
     calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/),
     calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/),
     calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/, isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),

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

@@ -1 +1 @@
-{"version":3,"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","B6of3ja","Bvjb7m6","calloutBlockContainerNonCartesian","t21cq0","calloutLegendText","calloutContentYCartesian","calloutContentYNonCartesian","B4j52fo","Frg6f3","d","p","usePopoverStyles_unstable","props","isCartesian","baseStyles"],"sources":["useChartPopoverStyles.styles.js"],"sourcesContent":["import { 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: 'contents',\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        marginTop: '13px',\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    },\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        ...shorthands.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    const { isCartesian } = props;\n    const baseStyles = useStyles();\n    return {\n        calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*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"],"mappings":"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","ignoreList":[]}
+{"version":3,"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","B6of3ja","Bvjb7m6","calloutBlockContainerNonCartesian","t21cq0","calloutLegendText","calloutContentYCartesian","calloutContentYNonCartesian","g2u3we","icvyot","B4j52fo","i8vvqc","Frg6f3","d","p","usePopoverStyles_unstable","props","_props_styles","isCartesian","baseStyles","styles"],"sources":["useChartPopoverStyles.styles.js"],"sourcesContent":["import { 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        marginTop: '13px',\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    },\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"],"mappings":"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","ignoreList":[]}

package/lib/components/DonutChart/Arc/Arc.js

@@ -38,6 +38,11 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
         const yValue = point.yAxisCalloutData || point.data || 0;
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || (legend ? `${legend}, ` : '') + `${yValue}.`;
     }
+    function _shouldHighlightArc(legend) {
+        const { activeArc } = props;
+        // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.
+        return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend);
+    }
     function _renderArcLabel(className) {
         const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;
         if (hideLabels || Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 || activeArc !== data.data.legend && activeArc !== '') {
@@ -71,13 +76,14 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
     //TO DO 'replace' is throwing error
     const id = props.uniqText + (typeof props.data.data.legend === 'string' ? props.data.data.legend.replace(/\s+/g, '') : '') + props.data.data.data;
     const opacity = props.activeArc === props.data.data.legend || props.activeArc === '' ? 1 : 0.1;
+    const cornerRadius = props.roundCorners ? 3 : 0;
     return /*#__PURE__*/ React.createElement("g", {
         ref: currentRef
     }, !!focusedArcId && focusedArcId === id && // TODO innerradius and outerradius were absent
     /*#__PURE__*/ React.createElement("path", {
         id: id + 'focusRing',
-        d: arc({
-            ...props.focusData,
+        d: arc.cornerRadius(cornerRadius)({
+            ...props.data,
             innerRadius: props.innerRadius,
             outerRadius: props.outerRadius
         }),
@@ -85,7 +91,7 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
     }), /*#__PURE__*/ React.createElement("path", {
         // TODO innerradius and outerradius were absent
         id: id,
-        d: arc({
+        d: arc.cornerRadius(cornerRadius)({
             ...props.data,
             innerRadius: props.innerRadius,
             outerRadius: props.outerRadius
@@ -100,6 +106,7 @@ import { formatScientificLimitWidth, useRtl } from '../../../utilities/index';
         onMouseOver: _hoverOn.bind(this, props.data.data),
         onMouseMove: _hoverOn.bind(this, props.data.data),
         onMouseLeave: _hoverOff,
+        tabIndex: _shouldHighlightArc(props.data.data.legend) ? 0 : undefined,
         onBlur: _onBlur,
         opacity: opacity,
         onClick: (_props_data = props.data) === null || _props_data === void 0 ? void 0 : _props_data.data.onClick,

package/lib/components/DonutChart/Arc/Arc.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Arc.tsx"],"sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { useArcStyles } from './useArcStyles.styles';\nimport { ChartDataPoint } from '../index';\nimport { ArcProps } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatScientificLimitWidth, useRtl } from '../../../utilities/index';\n\n// Create a Arc within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Arc component within Donut Chart.\n * {@docCategory ArcDonutChart}\n */\nexport const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivElement, ArcProps>(\n  (props, forwardedRef) => {\n    const arc = d3Arc();\n    const currentRef = React.createRef<SVGPathElement>();\n    const _isRTL: boolean = useRtl();\n    const classes = useArcStyles(props);\n\n    React.useEffect(() => {\n      _updateChart(props);\n    }, [props]);\n\n    function _onFocus(data: ChartDataPoint, id: string): void {\n      props.onFocusCallback!(data, id, currentRef.current);\n    }\n\n    function _hoverOn(data: ChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n      mouseEvent.persist();\n      props.hoverOnCallback!(data, mouseEvent);\n    }\n\n    function _hoverOff(): void {\n      props.hoverLeaveCallback!();\n    }\n\n    function _onBlur(): void {\n      props.onBlurCallback!();\n    }\n\n    function _getAriaLabel(): string {\n      const point = props.data!.data;\n      const legend = point.xAxisCalloutData || point.legend;\n      const yValue = point.yAxisCalloutData || point.data || 0;\n      return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n    }\n\n    function _renderArcLabel(className: string) {\n      const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;\n\n      if (\n        hideLabels ||\n        Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n        (activeArc !== data!.data.legend && activeArc !== '')\n      ) {\n        return null;\n      }\n\n      const [base, perp] = arc.centroid({ ...data!, innerRadius, outerRadius });\n      const hyp = Math.sqrt(base * base + perp * perp);\n      const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n      const angle = (data!.startAngle + data!.endAngle) / 2;\n      const arcValue = data!.value;\n\n      return (\n        <text\n          x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n          y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n          textAnchor={angle > Math.PI !== _isRTL ? 'end' : 'start'}\n          dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n          className={className}\n          aria-hidden={true}\n        >\n          {showLabelsInPercent\n            ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n            : formatScientificLimitWidth(arcValue)}\n        </text>\n      );\n    }\n\n    function _updateChart(newProps: ArcProps): void {\n      if (newProps.arc && newProps.innerRadius && newProps.outerRadius) {\n        newProps.arc.innerRadius(newProps.innerRadius);\n        newProps.arc.outerRadius(newProps.outerRadius);\n      }\n    }\n\n    const { href, focusedArcId } = props;\n    //TO DO 'replace' is throwing error\n    const id =\n      props.uniqText! +\n      (typeof props.data!.data.legend === 'string' ? props.data!.data.legend.replace(/\\s+/g, '') : '') +\n      props.data!.data.data;\n    const opacity: number = props.activeArc === props.data!.data.legend || props.activeArc === '' ? 1 : 0.1;\n    return (\n      <g ref={currentRef}>\n        {!!focusedArcId && focusedArcId === id && (\n          // TODO innerradius and outerradius were absent\n          <path\n            id={id + 'focusRing'}\n            d={arc({ ...props.focusData!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!}\n            className={classes.focusRing}\n          />\n        )}\n        <path\n          // TODO innerradius and outerradius were absent\n          id={id}\n          d={arc({ ...props.data!, innerRadius: props.innerRadius, outerRadius: props.outerRadius })!}\n          className={classes.root}\n          style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}\n          onFocus={_onFocus.bind(this, props.data!.data, id)}\n          data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}\n          onMouseOver={_hoverOn.bind(this, props.data!.data)}\n          onMouseMove={_hoverOn.bind(this, props.data!.data)}\n          onMouseLeave={_hoverOff}\n          onBlur={_onBlur}\n          opacity={opacity}\n          onClick={props.data?.data.onClick}\n          aria-label={_getAriaLabel()}\n          role=\"img\"\n        />\n        {_renderArcLabel(classes.arcLabel)}\n      </g>\n    );\n  },\n);\nArc.displayName = 'Arc';\n"],"names":["React","arc","d3Arc","useArcStyles","format","d3Format","formatScientificLimitWidth","useRtl","Arc","forwardRef","props","forwardedRef","currentRef","createRef","_isRTL","classes","useEffect","_updateChart","_onFocus","data","id","onFocusCallback","current","_hoverOn","mouseEvent","persist","hoverOnCallback","_hoverOff","hoverLeaveCallback","_onBlur","onBlurCallback","_getAriaLabel","point","legend","xAxisCalloutData","yValue","yAxisCalloutData","callOutAccessibilityData","ariaLabel","_renderArcLabel","className","innerRadius","outerRadius","showLabelsInPercent","totalValue","hideLabels","activeArc","Math","abs","endAngle","startAngle","PI","base","perp","centroid","hyp","sqrt","labelRadius","max","angle","arcValue","value","text","x","y","textAnchor","dominantBaseline","aria-hidden","newProps","href","focusedArcId","uniqText","replace","opacity","g","ref","path","d","focusData","focusRing","root","style","fill","color","cursor","onFocus","bind","data-is-focusable","onMouseOver","onMouseMove","onMouseLeave","onBlur","onClick","aria-label","role","arcLabel","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["Arc.tsx"],"sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { useArcStyles } from './useArcStyles.styles';\nimport { ChartDataPoint } from '../index';\nimport { ArcProps } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatScientificLimitWidth, useRtl } from '../../../utilities/index';\n\n// Create a Arc within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Arc component within Donut Chart.\n * {@docCategory ArcDonutChart}\n */\nexport const Arc: React.FunctionComponent<ArcProps> = React.forwardRef<HTMLDivElement, ArcProps>(\n  (props, forwardedRef) => {\n    const arc = d3Arc();\n    const currentRef = React.createRef<SVGPathElement>();\n    const _isRTL: boolean = useRtl();\n    const classes = useArcStyles(props);\n\n    React.useEffect(() => {\n      _updateChart(props);\n    }, [props]);\n\n    function _onFocus(data: ChartDataPoint, id: string): void {\n      props.onFocusCallback!(data, id, currentRef.current);\n    }\n\n    function _hoverOn(data: ChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n      mouseEvent.persist();\n      props.hoverOnCallback!(data, mouseEvent);\n    }\n\n    function _hoverOff(): void {\n      props.hoverLeaveCallback!();\n    }\n\n    function _onBlur(): void {\n      props.onBlurCallback!();\n    }\n\n    function _getAriaLabel(): string {\n      const point = props.data!.data;\n      const legend = point.xAxisCalloutData || point.legend;\n      const yValue = point.yAxisCalloutData || point.data || 0;\n      return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n    }\n\n    function _shouldHighlightArc(legend?: string): boolean {\n      const { activeArc } = props;\n      // If no activeArc is provided, highlight all arcs. Otherwise, only highlight the arcs that are active.\n      return !activeArc || activeArc.length === 0 || legend === undefined || activeArc.includes(legend);\n    }\n\n    function _renderArcLabel(className: string) {\n      const { data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = props;\n\n      if (\n        hideLabels ||\n        Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n        (activeArc !== data!.data.legend && activeArc !== '')\n      ) {\n        return null;\n      }\n\n      const [base, perp] = arc.centroid({ ...data!, innerRadius, outerRadius });\n      const hyp = Math.sqrt(base * base + perp * perp);\n      const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n      const angle = (data!.startAngle + data!.endAngle) / 2;\n      const arcValue = data!.value;\n\n      return (\n        <text\n          x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n          y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n          textAnchor={angle > Math.PI !== _isRTL ? 'end' : 'start'}\n          dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n          className={className}\n          aria-hidden={true}\n        >\n          {showLabelsInPercent\n            ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n            : formatScientificLimitWidth(arcValue)}\n        </text>\n      );\n    }\n\n    function _updateChart(newProps: ArcProps): void {\n      if (newProps.arc && newProps.innerRadius && newProps.outerRadius) {\n        newProps.arc.innerRadius(newProps.innerRadius);\n        newProps.arc.outerRadius(newProps.outerRadius);\n      }\n    }\n\n    const { href, focusedArcId } = props;\n    //TO DO 'replace' is throwing error\n    const id =\n      props.uniqText! +\n      (typeof props.data!.data.legend === 'string' ? props.data!.data.legend.replace(/\\s+/g, '') : '') +\n      props.data!.data.data;\n    const opacity: number = props.activeArc === props.data!.data.legend || props.activeArc === '' ? 1 : 0.1;\n    const cornerRadius = props.roundCorners ? 3 : 0;\n    return (\n      <g ref={currentRef}>\n        {!!focusedArcId && focusedArcId === id && (\n          // TODO innerradius and outerradius were absent\n          <path\n            id={id + 'focusRing'}\n            d={\n              arc.cornerRadius(cornerRadius)({\n                ...props.data!,\n                innerRadius: props.innerRadius,\n                outerRadius: props.outerRadius,\n              })!\n            }\n            className={classes.focusRing}\n          />\n        )}\n        <path\n          // TODO innerradius and outerradius were absent\n          id={id}\n          d={\n            arc.cornerRadius(cornerRadius)({\n              ...props.data!,\n              innerRadius: props.innerRadius,\n              outerRadius: props.outerRadius,\n            })!\n          }\n          className={classes.root}\n          style={{ fill: props.color, cursor: href ? 'pointer' : 'default' }}\n          onFocus={_onFocus.bind(this, props.data!.data, id)}\n          data-is-focusable={props.activeArc === props.data!.data.legend || props.activeArc === ''}\n          onMouseOver={_hoverOn.bind(this, props.data!.data)}\n          onMouseMove={_hoverOn.bind(this, props.data!.data)}\n          onMouseLeave={_hoverOff}\n          tabIndex={_shouldHighlightArc(props.data!.data.legend!) ? 0 : undefined}\n          onBlur={_onBlur}\n          opacity={opacity}\n          onClick={props.data?.data.onClick}\n          aria-label={_getAriaLabel()}\n          role=\"img\"\n        />\n        {_renderArcLabel(classes.arcLabel)}\n      </g>\n    );\n  },\n);\nArc.displayName = 'Arc';\n"],"names":["React","arc","d3Arc","useArcStyles","format","d3Format","formatScientificLimitWidth","useRtl","Arc","forwardRef","props","forwardedRef","currentRef","createRef","_isRTL","classes","useEffect","_updateChart","_onFocus","data","id","onFocusCallback","current","_hoverOn","mouseEvent","persist","hoverOnCallback","_hoverOff","hoverLeaveCallback","_onBlur","onBlurCallback","_getAriaLabel","point","legend","xAxisCalloutData","yValue","yAxisCalloutData","callOutAccessibilityData","ariaLabel","_shouldHighlightArc","activeArc","length","undefined","includes","_renderArcLabel","className","innerRadius","outerRadius","showLabelsInPercent","totalValue","hideLabels","Math","abs","endAngle","startAngle","PI","base","perp","centroid","hyp","sqrt","labelRadius","max","angle","arcValue","value","text","x","y","textAnchor","dominantBaseline","aria-hidden","newProps","href","focusedArcId","uniqText","replace","opacity","cornerRadius","roundCorners","g","ref","path","d","focusRing","root","style","fill","color","cursor","onFocus","bind","data-is-focusable","onMouseOver","onMouseMove","onMouseLeave","tabIndex","onBlur","onClick","aria-label","role","arcLabel","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAOC,KAAK,QAAQ,WAAW;AACxC,SAASC,YAAY,QAAQ,wBAAwB;AAGrD,SAASC,UAAUC,QAAQ,QAAQ,YAAY;AAC/C,SAASC,0BAA0B,EAAEC,MAAM,QAAQ,2BAA2B;AAE9E,wGAAwG;AACxG;;;CAGC,GACD,OAAO,MAAMC,oBAAyCR,MAAMS,UAAU,CACpE,CAACC,OAAOC;QA4HSD;IA3Hf,MAAMT,MAAMC;IACZ,MAAMU,2BAAaZ,MAAMa,SAAS;IAClC,MAAMC,SAAkBP;IACxB,MAAMQ,UAAUZ,aAAaO;IAE7BV,MAAMgB,SAAS,CAAC;QACdC,aAAaP;IACf,GAAG;QAACA;KAAM;IAEV,SAASQ,SAASC,IAAoB,EAAEC,EAAU;QAChDV,MAAMW,eAAe,CAAEF,MAAMC,IAAIR,WAAWU,OAAO;IACrD;IAEA,SAASC,SAASJ,IAAoB,EAAEK,UAA4C;QAClFA,WAAWC,OAAO;QAClBf,MAAMgB,eAAe,CAAEP,MAAMK;IAC/B;IAEA,SAASG;QACPjB,MAAMkB,kBAAkB;IAC1B;IAEA,SAASC;QACPnB,MAAMoB,cAAc;IACtB;IAEA,SAASC;YAIAC;QAHP,MAAMA,QAAQtB,MAAMS,IAAI,CAAEA,IAAI;QAC9B,MAAMc,SAASD,MAAME,gBAAgB,IAAIF,MAAMC,MAAM;QACrD,MAAME,SAASH,MAAMI,gBAAgB,IAAIJ,MAAMb,IAAI,IAAI;QACvD,OAAOa,EAAAA,kCAAAA,MAAMK,wBAAwB,cAA9BL,sDAAAA,gCAAgCM,SAAS,KAAI,AAACL,CAAAA,SAAS,CAAC,EAAEA,OAAO,EAAE,CAAC,GAAG,EAAC,IAAK,CAAC,EAAEE,OAAO,CAAC,CAAC;IAClG;IAEA,SAASI,oBAAoBN,MAAe;QAC1C,MAAM,EAAEO,SAAS,EAAE,GAAG9B;QACtB,uGAAuG;QACvG,OAAO,CAAC8B,aAAaA,UAAUC,MAAM,KAAK,KAAKR,WAAWS,aAAaF,UAAUG,QAAQ,CAACV;IAC5F;IAEA,SAASW,gBAAgBC,SAAiB;QACxC,MAAM,EAAE1B,IAAI,EAAE2B,WAAW,EAAEC,WAAW,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,UAAU,EAAEV,SAAS,EAAE,GAAG9B;QAEnG,IACEwC,cACAC,KAAKC,GAAG,CAACjC,KAAMkC,QAAQ,GAAGlC,KAAMmC,UAAU,IAAIH,KAAKI,EAAE,GAAG,MACvDf,cAAcrB,KAAMA,IAAI,CAACc,MAAM,IAAIO,cAAc,IAClD;YACA,OAAO;QACT;QAEA,MAAM,CAACgB,MAAMC,KAAK,GAAGxD,IAAIyD,QAAQ,CAAC;YAAE,GAAGvC,IAAI;YAAG2B;YAAaC;QAAY;QACvE,MAAMY,MAAMR,KAAKS,IAAI,CAACJ,OAAOA,OAAOC,OAAOA;QAC3C,MAAMI,cAAcV,KAAKW,GAAG,CAAChB,aAAcC,eAAgB;QAC3D,MAAMgB,QAAQ,AAAC5C,CAAAA,KAAMmC,UAAU,GAAGnC,KAAMkC,QAAQ,AAAD,IAAK;QACpD,MAAMW,WAAW7C,KAAM8C,KAAK;QAE5B,qBACE,oBAACC;YACCC,GAAG,AAACR,CAAAA,QAAQ,IAAI,IAAIH,OAAOG,GAAE,IAAKE;YAClCO,GAAG,AAACT,CAAAA,QAAQ,IAAI,IAAIF,OAAOE,GAAE,IAAKE;YAClCQ,YAAYN,QAAQZ,KAAKI,EAAE,KAAKzC,SAAS,QAAQ;YACjDwD,kBAAkBP,QAAQZ,KAAKI,EAAE,GAAG,KAAKQ,QAAQ,AAAC,IAAIZ,KAAKI,EAAE,GAAI,IAAI,YAAY;YACjFV,WAAWA;YACX0B,eAAa;WAEZvB,sBACG3C,SAAS,OAAO4C,eAAgB,IAAI,IAAIe,WAAWf,cACnD3C,2BAA2B0D;IAGrC;IAEA,SAAS/C,aAAauD,QAAkB;QACtC,IAAIA,SAASvE,GAAG,IAAIuE,SAAS1B,WAAW,IAAI0B,SAASzB,WAAW,EAAE;YAChEyB,SAASvE,GAAG,CAAC6C,WAAW,CAAC0B,SAAS1B,WAAW;YAC7C0B,SAASvE,GAAG,CAAC8C,WAAW,CAACyB,SAASzB,WAAW;QAC/C;IACF;IAEA,MAAM,EAAE0B,IAAI,EAAEC,YAAY,EAAE,GAAGhE;IAC/B,mCAAmC;IACnC,MAAMU,KACJV,MAAMiE,QAAQ,GACb,CAAA,OAAOjE,MAAMS,IAAI,CAAEA,IAAI,CAACc,MAAM,KAAK,WAAWvB,MAAMS,IAAI,CAAEA,IAAI,CAACc,MAAM,CAAC2C,OAAO,CAAC,QAAQ,MAAM,EAAC,IAC9FlE,MAAMS,IAAI,CAAEA,IAAI,CAACA,IAAI;IACvB,MAAM0D,UAAkBnE,MAAM8B,SAAS,KAAK9B,MAAMS,IAAI,CAAEA,IAAI,CAACc,MAAM,IAAIvB,MAAM8B,SAAS,KAAK,KAAK,IAAI;IACpG,MAAMsC,eAAepE,MAAMqE,YAAY,GAAG,IAAI;IAC9C,qBACE,oBAACC;QAAEC,KAAKrE;OACL,CAAC,CAAC8D,gBAAgBA,iBAAiBtD,MAClC,+CAA+C;kBAC/C,oBAAC8D;QACC9D,IAAIA,KAAK;QACT+D,GACElF,IAAI6E,YAAY,CAACA,cAAc;YAC7B,GAAGpE,MAAMS,IAAI;YACb2B,aAAapC,MAAMoC,WAAW;YAC9BC,aAAarC,MAAMqC,WAAW;QAChC;QAEFF,WAAW9B,QAAQqE,SAAS;sBAGhC,oBAACF;QACC,+CAA+C;QAC/C9D,IAAIA;QACJ+D,GACElF,IAAI6E,YAAY,CAACA,cAAc;YAC7B,GAAGpE,MAAMS,IAAI;YACb2B,aAAapC,MAAMoC,WAAW;YAC9BC,aAAarC,MAAMqC,WAAW;QAChC;QAEFF,WAAW9B,QAAQsE,IAAI;QACvBC,OAAO;YAAEC,MAAM7E,MAAM8E,KAAK;YAAEC,QAAQhB,OAAO,YAAY;QAAU;QACjEiB,SAASxE,SAASyE,IAAI,CAAC,IAAI,EAAEjF,MAAMS,IAAI,CAAEA,IAAI,EAAEC;QAC/CwE,qBAAmBlF,MAAM8B,SAAS,KAAK9B,MAAMS,IAAI,CAAEA,IAAI,CAACc,MAAM,IAAIvB,MAAM8B,SAAS,KAAK;QACtFqD,aAAatE,SAASoE,IAAI,CAAC,IAAI,EAAEjF,MAAMS,IAAI,CAAEA,IAAI;QACjD2E,aAAavE,SAASoE,IAAI,CAAC,IAAI,EAAEjF,MAAMS,IAAI,CAAEA,IAAI;QACjD4E,cAAcpE;QACdqE,UAAUzD,oBAAoB7B,MAAMS,IAAI,CAAEA,IAAI,CAACc,MAAM,IAAK,IAAIS;QAC9DuD,QAAQpE;QACRgD,SAASA;QACTqB,OAAO,GAAExF,cAAAA,MAAMS,IAAI,cAAVT,kCAAAA,YAAYS,IAAI,CAAC+E,OAAO;QACjCC,cAAYpE;QACZqE,MAAK;QAENxD,gBAAgB7B,QAAQsF,QAAQ;AAGvC,GACA;AACF7F,IAAI8F,WAAW,GAAG"}

package/lib/components/DonutChart/Arc/Arc.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Arc.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\nexport interface ArcProps {\n  /**\n   * Data to render in the Arc.\n   */\n  data?: ArcData;\n\n  /**\n   * Data to render focused Arc\n   */\n  focusData?: ArcData;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n  /**\n   * shape for  Arc.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  arc?: any;\n\n  /**\n   * innerRadius of the Arc.\n   */\n  innerRadius: number;\n\n  /**\n   * outerRadius of the Arc.\n   */\n  outerRadius: number;\n\n  /**\n   * Color for the Arc.\n   */\n  color: string;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop used to define the sum of all arc values\n   */\n  totalValue?: number;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: ArcStyles;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n}\n\nexport interface ArcData {\n  /**\n   * Data to render in the chart for individual arc.\n   */\n  data: ChartDataPoint;\n  /**\n   * endAngle of the Arc\n   */\n  endAngle: number;\n  /**\n   * index of the Arc\n   */\n  index: number;\n  /**\n   * padAngle of the Arc\n   */\n  padAngle: number;\n  /**\n   * startAngle of the Arc\n   */\n  startAngle: number;\n  /**\n   * value of the Arc\n   */\n  value: number;\n}\n\nexport interface ArcStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: string;\n\n  /**\n   * styles for the focus\n   */\n  focusRing: string;\n\n  /**\n   * Style for the arc labels\n   */\n  arcLabel: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AAuIA,WAeC"}
+{"version":3,"sources":["Arc.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\nexport interface ArcProps {\n  /**\n   * Data to render in the Arc.\n   */\n  data?: ArcData;\n\n  /**\n   * Data to render focused Arc\n   */\n  focusData?: ArcData;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n  /**\n   * shape for  Arc.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  arc?: any;\n\n  /**\n   * innerRadius of the Arc.\n   */\n  innerRadius: number;\n\n  /**\n   * outerRadius of the Arc.\n   */\n  outerRadius: number;\n\n  /**\n   * Color for the Arc.\n   */\n  color: string;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop used to define the sum of all arc values\n   */\n  totalValue?: number;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: ArcStyles;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n}\n\nexport interface ArcData {\n  /**\n   * Data to render in the chart for individual arc.\n   */\n  data: ChartDataPoint;\n  /**\n   * endAngle of the Arc\n   */\n  endAngle: number;\n  /**\n   * index of the Arc\n   */\n  index: number;\n  /**\n   * padAngle of the Arc\n   */\n  padAngle: number;\n  /**\n   * startAngle of the Arc\n   */\n  startAngle: number;\n  /**\n   * value of the Arc\n   */\n  value: number;\n}\n\nexport interface ArcStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: string;\n\n  /**\n   * styles for the focus\n   */\n  focusRing: string;\n\n  /**\n   * Style for the arc labels\n   */\n  arcLabel: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AA6IA,WAeC"}

package/lib/components/DonutChart/Arc/useArcStyles.styles.js

@@ -14,7 +14,10 @@ export const donutArcClassNames = {
 const useStyles = /*#__PURE__*/__styles({
   root: {
     Bceei9c: "f158kwzp",
-    Bpd4iqm: "f2cu5sd",
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f1391ufr",
     ojy3ng: "f1yuyku4",
     B4ncu3z: "f138xzbb",
     zxy5zd: ["fny96iz", "fi0bkha"],
@@ -34,7 +37,9 @@ const useStyles = /*#__PURE__*/__styles({
     Bkfmm31: "fhuob2q"
   }
 }, {
-  d: [".f158kwzp{cursor:default;}", ".f2cu5sd{outline-width:transparent;}", ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".f138xzbb selectors::-moz-focus-inner{border-top-width:0;}", ".fny96iz selectors::-moz-focus-inner{border-right-width:0;}", ".fi0bkha selectors::-moz-focus-inner{border-left-width:0;}", ".f1jv8gm3 selectors::-moz-focus-inner{border-bottom-width:0;}", ".frcfrt5{stroke:var(--colorStrokeFocus2);}", ".f9nnx8l{stroke-width:var(--strokeWidthThickest);}", ".f1au8mb3{fill:transparent;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"]
+  d: [".f158kwzp{cursor:default;}", [".f1391ufr{outline:transparent;}", {
+    p: -1
+  }], ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".f138xzbb selectors::-moz-focus-inner{border-top-width:0;}", ".fny96iz selectors::-moz-focus-inner{border-right-width:0;}", ".fi0bkha selectors::-moz-focus-inner{border-left-width:0;}", ".f1jv8gm3 selectors::-moz-focus-inner{border-bottom-width:0;}", ".frcfrt5{stroke:var(--colorStrokeFocus2);}", ".f9nnx8l{stroke-width:var(--strokeWidthThickest);}", ".f1au8mb3{fill:transparent;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"]
 });
 /**
  * Apply styling to the Arc components

package/lib/components/DonutChart/Arc/useArcStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","donutArcClassNames","root","focusRing","arcLabel","useStyles","Bceei9c","Bpd4iqm","ojy3ng","B4ncu3z","zxy5zd","bkw2yb","Bjksbd0","Be5yapy","Bkfmm31","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useArcStyles","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","styles"],"sources":["useArcStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const donutArcClassNames = {\n    root: 'fui-donut-arc__root',\n    focusRing: 'fui-donut-arc__focusRing',\n    arcLabel: 'fui-donut-arc__arcLabel'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        cursor: 'default',\n        ...shorthands.outline('transparent'),\n        stroke: tokens.colorNeutralBackground1,\n        '& selectors': {\n            '::-moz-focus-inner': {\n                ...shorthands.border('0')\n            }\n        }\n    },\n    focusRing: {\n        stroke: tokens.colorStrokeFocus2,\n        strokeWidth: tokens.strokeWidthThickest,\n        fill: 'transparent'\n    },\n    arcLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1\n    }\n});\n/**\n * Apply styling to the Arc components\n */ export const useArcStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),\n        arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAM,IAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAT,SAAA;IAAAK,MAAA;IAAAK,OAAA;IAAAC,OAAA;EAAA;EAAAV,QAAA;IAAAW,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAJ,OAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAGrB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEL,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAEwB,UAAU,CAACxB,IAAI,EAAEuB,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACpB,IAAI,CAAC;IAC1KC,SAAS,EAAEN,YAAY,CAACI,kBAAkB,CAACE,SAAS,EAAEuB,UAAU,CAACvB,SAAS,EAAE,CAACoB,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,SAAS,CAAC;IACtLC,QAAQ,EAAEP,YAAY,CAACI,kBAAkB,CAACG,QAAQ,EAAEsB,UAAU,CAACtB,QAAQ,EAAE,CAACoB,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACpB,QAAQ;EACrL,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","donutArcClassNames","root","focusRing","arcLabel","useStyles","Bceei9c","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","ojy3ng","B4ncu3z","zxy5zd","bkw2yb","Bjksbd0","Be5yapy","Bkfmm31","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useArcStyles","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","styles"],"sources":["useArcStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const donutArcClassNames = {\n    root: 'fui-donut-arc__root',\n    focusRing: 'fui-donut-arc__focusRing',\n    arcLabel: 'fui-donut-arc__arcLabel'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        cursor: 'default',\n        outline: 'transparent',\n        stroke: tokens.colorNeutralBackground1,\n        '& selectors': {\n            '::-moz-focus-inner': {\n                ...shorthands.border('0')\n            }\n        }\n    },\n    focusRing: {\n        stroke: tokens.colorStrokeFocus2,\n        strokeWidth: tokens.strokeWidthThickest,\n        fill: 'transparent'\n    },\n    arcLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1\n    }\n});\n/**\n * Apply styling to the Arc components\n */ export const useArcStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutArcClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        focusRing: mergeClasses(donutArcClassNames.focusRing, baseStyles.focusRing, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.focusRing),\n        arcLabel: mergeClasses(donutArcClassNames.arcLabel, baseStyles.arcLabel, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.arcLabel)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,SAAS,EAAE,0BAA0B;EACrCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAM,IAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,SAAA;IAAAQ,MAAA;IAAAK,OAAA;IAAAC,OAAA;EAAA;EAAAb,QAAA;IAAAc,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAJ,OAAA;EAAA;AAAA;EAAAK,CAAA;IAAAC,CAAA;EAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAGzB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHH,IAAI,EAAEL,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE4B,UAAU,CAAC5B,IAAI,EAAE2B,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACxB,IAAI,CAAC;IAC1KC,SAAS,EAAEN,YAAY,CAACI,kBAAkB,CAACE,SAAS,EAAE2B,UAAU,CAAC3B,SAAS,EAAE,CAACwB,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACxB,SAAS,CAAC;IACtLC,QAAQ,EAAEP,YAAY,CAACI,kBAAkB,CAACG,QAAQ,EAAE0B,UAAU,CAAC1B,QAAQ,EAAE,CAACwB,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACxB,QAAQ;EACrL,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/GaugeChart/useGaugeChartStyles.styles.js

@@ -1,5 +1,5 @@
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 export const gaugeChartClassNames = {
   root: 'fui-gc__root',
   chart: 'fui-gc__chart',
@@ -86,10 +86,6 @@ const useStyles = /*#__PURE__*/__styles({
     B68tc82: 0,
     Bmxbyg5: 0,
     Bpg54ce: "f1a3p1vp",
-    z8tnut: "fpqefah",
-    z189sj: ["f1gbmcue", "f1rh9g5y"],
-    Byoj8tv: "f1fow5ox",
-    uwmqm3: ["f1rh9g5y", "f1gbmcue"],
     De3pzq: "fxugw4r",
     jy2i9i: "fronft5"
   },
@@ -155,7 +151,7 @@ const useStyles = /*#__PURE__*/__styles({
     p: -1
   }], ".f1v24fw0{stroke:var(--colorNeutralStroke1);}", ".f13qh94s{display:grid;}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
-  }], ".fpqefah{padding-top:11px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".f1fow5ox{padding-bottom:10px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fronft5{background-blend-mode:normal,luminosity;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".f104wqfl{line-height:16px;}", ".fd43bvn{opacity:0.85;}", ".f7jvbu2{margin-top:13px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f177v4lu{padding-left:8px;}", ".f19lj068{padding-right:8px;}", ".fdgv6k0{forced-color-adjust:none;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f82itaf{line-height:22px;}", ".ffemd8d{margin-top:10px;}", ".f1809wu7{padding-top:10px;}", [".f10ci6s2{border-top:1px solid var(--colorNeutralStroke1);}", {
+  }], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fronft5{background-blend-mode:normal,luminosity;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".f104wqfl{line-height:16px;}", ".fd43bvn{opacity:0.85;}", ".f7jvbu2{margin-top:13px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f177v4lu{padding-left:8px;}", ".f19lj068{padding-right:8px;}", ".fdgv6k0{forced-color-adjust:none;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f82itaf{line-height:22px;}", ".ffemd8d{margin-top:10px;}", ".f1809wu7{padding-top:10px;}", [".f10ci6s2{border-top:1px solid var(--colorNeutralStroke1);}", {
     p: -1
   }]]
 });