@fluentui/react-charts 9.3.8 → 9.3.9

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

@@ -22,7 +22,7 @@ const _ChartPopover = require("../CommonComponents/ChartPopover");
 const _hooks = require("../../utilities/hooks");
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
 const DonutChart = /*#__PURE__*/ _react.forwardRef(({ innerRadius = 0, hideLabels = true, ...restProps }, forwardedRef)=>{
-    var _props_legendProps;
+    var _props_legendProps, _props_titleStyles_titleFont, _props_titleStyles;
     const props = {
         innerRadius,
         hideLabels,
@@ -254,7 +254,8 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef(({ innerRadius = 0, hideLabel
     const legendBars = _createLegends(points.filter((d)=>d.data >= 0));
     const donutMarginHorizontal = props.hideLabels ? 0 : 80;
     const donutMarginVertical = props.hideLabels ? 0 : 40;
-    const outerRadius = Math.min(_width - donutMarginHorizontal, _height - donutMarginVertical) / 2;
+    const titleHeight = (data === null || data === void 0 ? void 0 : data.chartTitle) ? Math.max((typeof ((_props_titleStyles = props.titleStyles) === null || _props_titleStyles === void 0 ? void 0 : (_props_titleStyles_titleFont = _props_titleStyles.titleFont) === null || _props_titleStyles_titleFont === void 0 ? void 0 : _props_titleStyles_titleFont.size) === 'number' ? props.titleStyles.titleFont.size : 13) + _index1.CHART_TITLE_PADDING, 36) : 0;
+    const outerRadius = Math.min(_width - donutMarginHorizontal, _height - donutMarginVertical - titleHeight) / 2;
     const chartData = _elevateToMinimums(points);
     const valueInsideDonut = props.innerRadius > _index1.MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut, chartData) : '';
     const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
@@ -279,8 +280,16 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef(({ innerRadius = 0, hideLabel
         className: classes.chart,
         "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle,
         width: _width,
-        height: _height
-    }, /*#__PURE__*/ _react.createElement(_index.Pie, {
+        height: _height + titleHeight / 2
+    }, !hideLegend && (data === null || data === void 0 ? void 0 : data.chartTitle) && /*#__PURE__*/ _react.createElement(_index1.ChartTitle, {
+        title: data.chartTitle,
+        x: _width / 2,
+        y: 0,
+        maxWidth: _width - 20,
+        className: classes.chartTitle,
+        titleStyles: props.titleStyles,
+        tooltipClassName: classes.svgTooltip
+    }), /*#__PURE__*/ _react.createElement(_index.Pie, {
         width: _width,
         height: _height,
         outerRadius: outerRadius,
@@ -318,7 +327,10 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef(({ innerRadius = 0, hideLabel
         ref: (e)=>{
             legendContainer.current = e;
         },
-        className: classes.legendContainer
+        className: classes.legendContainer,
+        style: {
+            marginTop: (data === null || data === void 0 ? void 0 : data.chartTitle) ? `-${titleHeight}px` : undefined
+        }
     }, legendBars)) : /*#__PURE__*/ _react.createElement("div", {
         id: _emptyChartId,
         role: 'alert',

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS } from '../../utilities/index';\nimport { Legend, Legends } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { useImageExport } from '../../utilities/hooks';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/**\n * Donutchart component.\n * {@docCategory DonutChart}\n */\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n  ({ innerRadius = 0, hideLabels = true, ...restProps }, forwardedRef) => {\n    const props = { innerRadius, hideLabels, ...restProps };\n    const { chartContainerRef: _rootElem, legendsRef: _legendsRef } = useImageExport(\n      props.componentRef,\n      props.hideLegend,\n      false,\n    );\n    const _uniqText: string = useId('_Pie_');\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    let _calloutAnchorPoint: ChartDataPoint | null;\n    let _emptyChartId: string | null;\n    const legendContainer = React.useRef<HTMLDivElement | null>(null);\n    const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n    const [value, setValue] = React.useState<string | undefined>('');\n    const [legend, setLegend] = React.useState<string | undefined>('');\n    const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n    const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n    const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const prevPropsRef = React.useRef<DonutChartProps | null>(null);\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\n\n    React.useEffect(() => {\n      if (prevPropsRef.current) {\n        const prevProps = prevPropsRef.current;\n        if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n          setSelectedLegends(props.legendProps?.selectedLegends || []);\n        }\n      }\n      prevPropsRef.current = props;\n    }, [props]);\n\n    React.useEffect(() => {\n      if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {\n        _fitParentContainer();\n      }\n      prevSize.current.height = props.height;\n      prevSize.current.width = props.width;\n    }, [props.width, props.height]);\n\n    function _elevateToMinimums(data: ChartDataPoint[]) {\n      let sumOfData = 0;\n      const minPercent = 0.01;\n      const elevatedData: ChartDataPoint[] = [];\n      data.forEach(item => {\n        sumOfData += item.data!;\n      });\n      data.forEach(item => {\n        elevatedData.push(\n          minPercent * sumOfData > item.data! && item.data! > 0\n            ? {\n                ...item,\n                data: minPercent * sumOfData,\n                yAxisCalloutData:\n                  item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n              }\n            : item,\n        );\n      });\n      return elevatedData;\n    }\n    function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n      if (props.order === 'sorted') {\n        chartData.sort((a: ChartDataPoint, b: ChartDataPoint) => {\n          return b.data! - a.data!;\n        });\n      }\n      const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n        const color: string = point.color!;\n        // mapping data to the format Legends component needs\n        const legend: Legend = {\n          title: point.legend!,\n          color,\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend(undefined);\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          // eslint-disable-next-line react/jsx-no-bind\n          onChange={_onLegendSelectionChange}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n    function _onLegendSelectionChange(\n      selectedLegends: string[],\n      event: React.MouseEvent<HTMLButtonElement>,\n      currentLegend?: Legend,\n    ): void {\n      if (props.legendProps && props.legendProps?.canSelectMultipleLegends) {\n        setSelectedLegends(selectedLegends);\n      } else {\n        setSelectedLegends(selectedLegends.slice(-1));\n      }\n      if (props.legendProps?.onChange) {\n        props.legendProps.onChange(selectedLegends, event, currentLegend);\n      }\n    }\n\n    function _focusCallback(\n      data: ChartDataPoint,\n      id: string,\n      e: React.FocusEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\n      setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n      setValue(data.data!.toString());\n      setLegend(data.legend);\n      setColor(data.color!);\n      setXCalloutValue(data.xAxisCalloutData!);\n      setYCalloutValue(data.yAxisCalloutData!);\n      setFocusedArcId(id);\n      setDataPointCalloutProps(data);\n      setRefSelected(targetElement!);\n    }\n\n    function _hoverCallback(\n      data: ChartDataPoint,\n      e: React.MouseEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n        setValue(data.data!.toString());\n        setLegend(data.legend);\n        setColor(data.color!);\n        setXCalloutValue(data.xAxisCalloutData!);\n        setYCalloutValue(data.yAxisCalloutData!);\n        setDataPointCalloutProps(data);\n        setRefSelected(targetElement!);\n      }\n    }\n    function _onBlur(): void {\n      setFocusedArcId('');\n    }\n\n    function _hoverLeave(): void {\n      /**/\n    }\n\n    function _handleChartMouseLeave() {\n      _calloutAnchorPoint = null;\n      setPopoverOpen(false);\n    }\n\n    function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n      const highlightedLegends = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {\n        const pointValue = data.find(point => _isLegendHighlighted(point.legend));\n        return pointValue\n          ? pointValue.yAxisCalloutData\n            ? pointValue.yAxisCalloutData\n            : pointValue.data!\n          : valueInsideDonut;\n      } else if (highlightedLegends.length > 0) {\n        let totalValue = 0;\n        data.forEach(point => {\n          if (highlightedLegends.includes(point.legend!)) {\n            totalValue += point.data!;\n          }\n        });\n        return totalValue;\n      } else {\n        return valueInsideDonut;\n      }\n    }\n\n    function _toLocaleString(data: string | number | undefined) {\n      const localeString = formatToLocaleString(data, props.culture);\n      if (!localeString) {\n        return data;\n      }\n      return localeString?.toString();\n    }\n\n    /**\n     * This function returns\n     * the selected legend if there is one\n     * or the hovered legend if none of the legends is selected.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n    }\n\n    function _isLegendHighlighted(legend: string | undefined): boolean {\n      return _getHighlightedLegend().includes(legend!);\n    }\n\n    function _noLegendsHighlighted(): boolean {\n      return _getHighlightedLegend().length === 0;\n    }\n\n    function _isChartEmpty(): boolean {\n      return !(\n        props.data &&\n        props.data.chartData &&\n        props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n      );\n    }\n\n    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n      return donutChartDataPoint\n        ? donutChartDataPoint.map((item, index) => {\n            let defaultColor: string;\n            if (typeof item.color === 'undefined') {\n              defaultColor = getNextColor(index, 0);\n            } else {\n              defaultColor = getColorFromToken(item.color);\n            }\n            return { ...item, defaultColor };\n          })\n        : [];\n    }\n\n    /**\n     * When screen resizes, along with screen, chart also auto adjusted.\n     * This method used to adjust height and width of the charts.\n     */\n    function _fitParentContainer(): void {\n      //_reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n        legendContainerHeight =\n          ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n            MIN_LEGEND_CONTAINER_HEIGHT) +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n      }\n      if (props.parentRef || _rootElem.current) {\n        const container = props.parentRef ? props.parentRef : _rootElem.current!;\n        const currentContainerWidth = container.getBoundingClientRect().width;\n        const currentContainerHeight =\n          container.getBoundingClientRect().height > legendContainerHeight\n            ? container.getBoundingClientRect().height\n            : 200;\n        const shouldResize =\n          _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n        if (shouldResize) {\n          setWidth(currentContainerWidth);\n          setHeight(currentContainerHeight - legendContainerHeight);\n        }\n      }\n      //});\n    }\n\n    const { data, hideLegend = false } = props;\n    const points = _addDefaultColors(data?.chartData);\n\n    const classes = useDonutChartStyles(props);\n\n    const legendBars = _createLegends(points.filter(d => d.data! >= 0));\n    const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n    const donutMarginVertical = props.hideLabels ? 0 : 40;\n    const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n    const chartData = _elevateToMinimums(points);\n    const valueInsideDonut =\n      props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n    const arrowAttributes = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n    return !_isChartEmpty() ? (\n      <div\n        className={classes.root}\n        ref={(rootElem: HTMLDivElement | null) => {\n          _rootElem.current = rootElem;\n        }}\n        onMouseLeave={_handleChartMouseLeave}\n      >\n        {props.xAxisAnnotation && (\n          <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n            {props.xAxisAnnotation}\n          </text>\n        )}\n        <div className={classes.chartWrapper} {...arrowAttributes}>\n          <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture}\n          positioning={{\n            target: refSelected,\n          }}\n          isPopoverOpen={\n            !props.hideTooltip && isPopoverOpen && (_noLegendsHighlighted() || _isLegendHighlighted(legend))\n          }\n          legend={legend!}\n          YValue={value!}\n          color={color}\n          isCalloutForStack={false}\n          customCallout={{\n            customizedCallout: props.onRenderCalloutPerDataPoint\n              ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n            customCalloutProps: props.calloutPropsPerDataPoint\n              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n          }}\n          isCartesian={false}\n        />\n        {!hideLegend && (\n          <div\n            ref={(e: HTMLDivElement) => {\n              legendContainer.current = e;\n            }}\n            className={classes.legendContainer}\n          >\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","Legends","useId","useArrowNavigationGroup","ChartPopover","useImageExport","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","innerRadius","hideLabels","restProps","forwardedRef","props","chartContainerRef","_rootElem","legendsRef","_legendsRef","componentRef","hideLegend","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","useRef","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","undefined","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegends","setSelectedLegends","legendProps","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","refSelected","setRefSelected","isPopoverOpen","setPopoverOpen","prevPropsRef","useEffect","_fitParentContainer","current","prevProps","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","toLocaleString","_createLegends","chartData","order","sort","a","b","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","targetElement","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","legendContainerHeight","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","donutMarginVertical","outerRadius","Math","min","arrowAttributes","circular","axis","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","x","y","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","positioning","target","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport {\n  areArraysEqual,\n  getColorFromToken,\n  getNextColor,\n  MIN_DONUT_RADIUS,\n  ChartTitle,\n  CHART_TITLE_PADDING,\n} from '../../utilities/index';\nimport { Legend, Legends } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { useImageExport } from '../../utilities/hooks';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/**\n * Donutchart component.\n * {@docCategory DonutChart}\n */\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n  ({ innerRadius = 0, hideLabels = true, ...restProps }, forwardedRef) => {\n    const props = { innerRadius, hideLabels, ...restProps };\n    const { chartContainerRef: _rootElem, legendsRef: _legendsRef } = useImageExport(\n      props.componentRef,\n      props.hideLegend,\n      false,\n    );\n    const _uniqText: string = useId('_Pie_');\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    let _calloutAnchorPoint: ChartDataPoint | null;\n    let _emptyChartId: string | null;\n    const legendContainer = React.useRef<HTMLDivElement | null>(null);\n    const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n    const [value, setValue] = React.useState<string | undefined>('');\n    const [legend, setLegend] = React.useState<string | undefined>('');\n    const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n    const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n    const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [refSelected, setRefSelected] = React.useState<HTMLElement | null>(null);\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const prevPropsRef = React.useRef<DonutChartProps | null>(null);\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\n\n    React.useEffect(() => {\n      if (prevPropsRef.current) {\n        const prevProps = prevPropsRef.current;\n        if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n          setSelectedLegends(props.legendProps?.selectedLegends || []);\n        }\n      }\n      prevPropsRef.current = props;\n    }, [props]);\n\n    React.useEffect(() => {\n      if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {\n        _fitParentContainer();\n      }\n      prevSize.current.height = props.height;\n      prevSize.current.width = props.width;\n    }, [props.width, props.height]);\n\n    function _elevateToMinimums(data: ChartDataPoint[]) {\n      let sumOfData = 0;\n      const minPercent = 0.01;\n      const elevatedData: ChartDataPoint[] = [];\n      data.forEach(item => {\n        sumOfData += item.data!;\n      });\n      data.forEach(item => {\n        elevatedData.push(\n          minPercent * sumOfData > item.data! && item.data! > 0\n            ? {\n                ...item,\n                data: minPercent * sumOfData,\n                yAxisCalloutData:\n                  item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n              }\n            : item,\n        );\n      });\n      return elevatedData;\n    }\n    function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n      if (props.order === 'sorted') {\n        chartData.sort((a: ChartDataPoint, b: ChartDataPoint) => {\n          return b.data! - a.data!;\n        });\n      }\n      const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n        const color: string = point.color!;\n        // mapping data to the format Legends component needs\n        const legend: Legend = {\n          title: point.legend!,\n          color,\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend(undefined);\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          // eslint-disable-next-line react/jsx-no-bind\n          onChange={_onLegendSelectionChange}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n    function _onLegendSelectionChange(\n      selectedLegends: string[],\n      event: React.MouseEvent<HTMLButtonElement>,\n      currentLegend?: Legend,\n    ): void {\n      if (props.legendProps && props.legendProps?.canSelectMultipleLegends) {\n        setSelectedLegends(selectedLegends);\n      } else {\n        setSelectedLegends(selectedLegends.slice(-1));\n      }\n      if (props.legendProps?.onChange) {\n        props.legendProps.onChange(selectedLegends, event, currentLegend);\n      }\n    }\n\n    function _focusCallback(\n      data: ChartDataPoint,\n      id: string,\n      e: React.FocusEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\n      setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n      setValue(data.data!.toString());\n      setLegend(data.legend);\n      setColor(data.color!);\n      setXCalloutValue(data.xAxisCalloutData!);\n      setYCalloutValue(data.yAxisCalloutData!);\n      setFocusedArcId(id);\n      setDataPointCalloutProps(data);\n      setRefSelected(targetElement!);\n    }\n\n    function _hoverCallback(\n      data: ChartDataPoint,\n      e: React.MouseEvent<SVGPathElement>,\n      targetElement?: HTMLElement | null,\n    ): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n        setValue(data.data!.toString());\n        setLegend(data.legend);\n        setColor(data.color!);\n        setXCalloutValue(data.xAxisCalloutData!);\n        setYCalloutValue(data.yAxisCalloutData!);\n        setDataPointCalloutProps(data);\n        setRefSelected(targetElement!);\n      }\n    }\n    function _onBlur(): void {\n      setFocusedArcId('');\n    }\n\n    function _hoverLeave(): void {\n      /**/\n    }\n\n    function _handleChartMouseLeave() {\n      _calloutAnchorPoint = null;\n      setPopoverOpen(false);\n    }\n\n    function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n      const highlightedLegends = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {\n        const pointValue = data.find(point => _isLegendHighlighted(point.legend));\n        return pointValue\n          ? pointValue.yAxisCalloutData\n            ? pointValue.yAxisCalloutData\n            : pointValue.data!\n          : valueInsideDonut;\n      } else if (highlightedLegends.length > 0) {\n        let totalValue = 0;\n        data.forEach(point => {\n          if (highlightedLegends.includes(point.legend!)) {\n            totalValue += point.data!;\n          }\n        });\n        return totalValue;\n      } else {\n        return valueInsideDonut;\n      }\n    }\n\n    function _toLocaleString(data: string | number | undefined) {\n      const localeString = formatToLocaleString(data, props.culture);\n      if (!localeString) {\n        return data;\n      }\n      return localeString?.toString();\n    }\n\n    /**\n     * This function returns\n     * the selected legend if there is one\n     * or the hovered legend if none of the legends is selected.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n    }\n\n    function _isLegendHighlighted(legend: string | undefined): boolean {\n      return _getHighlightedLegend().includes(legend!);\n    }\n\n    function _noLegendsHighlighted(): boolean {\n      return _getHighlightedLegend().length === 0;\n    }\n\n    function _isChartEmpty(): boolean {\n      return !(\n        props.data &&\n        props.data.chartData &&\n        props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n      );\n    }\n\n    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n      return donutChartDataPoint\n        ? donutChartDataPoint.map((item, index) => {\n            let defaultColor: string;\n            if (typeof item.color === 'undefined') {\n              defaultColor = getNextColor(index, 0);\n            } else {\n              defaultColor = getColorFromToken(item.color);\n            }\n            return { ...item, defaultColor };\n          })\n        : [];\n    }\n\n    /**\n     * When screen resizes, along with screen, chart also auto adjusted.\n     * This method used to adjust height and width of the charts.\n     */\n    function _fitParentContainer(): void {\n      //_reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n        legendContainerHeight =\n          ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n            MIN_LEGEND_CONTAINER_HEIGHT) +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n      }\n      if (props.parentRef || _rootElem.current) {\n        const container = props.parentRef ? props.parentRef : _rootElem.current!;\n        const currentContainerWidth = container.getBoundingClientRect().width;\n        const currentContainerHeight =\n          container.getBoundingClientRect().height > legendContainerHeight\n            ? container.getBoundingClientRect().height\n            : 200;\n        const shouldResize =\n          _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n        if (shouldResize) {\n          setWidth(currentContainerWidth);\n          setHeight(currentContainerHeight - legendContainerHeight);\n        }\n      }\n      //});\n    }\n\n    const { data, hideLegend = false } = props;\n    const points = _addDefaultColors(data?.chartData);\n\n    const classes = useDonutChartStyles(props);\n\n    const legendBars = _createLegends(points.filter(d => d.data! >= 0));\n    const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n    const donutMarginVertical = props.hideLabels ? 0 : 40;\n    const titleHeight = data?.chartTitle\n      ? Math.max(\n          (typeof props.titleStyles?.titleFont?.size === 'number' ? props.titleStyles.titleFont.size : 13) +\n            CHART_TITLE_PADDING,\n          36,\n        )\n      : 0;\n    const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical - titleHeight) / 2;\n    const chartData = _elevateToMinimums(points);\n    const valueInsideDonut =\n      props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n    const arrowAttributes = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n    return !_isChartEmpty() ? (\n      <div\n        className={classes.root}\n        ref={(rootElem: HTMLDivElement | null) => {\n          _rootElem.current = rootElem;\n        }}\n        onMouseLeave={_handleChartMouseLeave}\n      >\n        {props.xAxisAnnotation && (\n          <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n            {props.xAxisAnnotation}\n          </text>\n        )}\n        <div className={classes.chartWrapper} {...arrowAttributes}>\n          <svg\n            className={classes.chart}\n            aria-label={data?.chartTitle}\n            width={_width}\n            height={_height! + titleHeight / 2}\n          >\n            {!hideLegend && data?.chartTitle && (\n              <ChartTitle\n                title={data.chartTitle}\n                x={_width! / 2}\n                y={0}\n                maxWidth={_width! - 20}\n                className={classes.chartTitle}\n                titleStyles={props.titleStyles}\n                tooltipClassName={classes.svgTooltip}\n              />\n            )}\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture}\n          positioning={{\n            target: refSelected,\n          }}\n          isPopoverOpen={\n            !props.hideTooltip && isPopoverOpen && (_noLegendsHighlighted() || _isLegendHighlighted(legend))\n          }\n          legend={legend!}\n          YValue={value!}\n          color={color}\n          isCalloutForStack={false}\n          customCallout={{\n            customizedCallout: props.onRenderCalloutPerDataPoint\n              ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n            customCalloutProps: props.calloutPropsPerDataPoint\n              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n          }}\n          isCartesian={false}\n        />\n        {!hideLegend && (\n          <div\n            ref={(e: HTMLDivElement) => {\n              legendContainer.current = e;\n            }}\n            className={classes.legendContainer}\n            style={{ marginTop: data?.chartTitle ? `-${titleHeight}px` : undefined }}\n          >\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","ChartTitle","CHART_TITLE_PADDING","Legends","useId","useArrowNavigationGroup","ChartPopover","useImageExport","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","innerRadius","hideLabels","restProps","forwardedRef","props","chartContainerRef","_rootElem","legendsRef","_legendsRef","componentRef","hideLegend","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","useRef","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","undefined","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegends","setSelectedLegends","legendProps","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","refSelected","setRefSelected","isPopoverOpen","setPopoverOpen","prevPropsRef","useEffect","_fitParentContainer","current","prevProps","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","toLocaleString","_createLegends","chartData","order","sort","a","b","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","targetElement","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","legendContainerHeight","legendContainerComputedStyles","getComputedStyle","getBoundingClientRect","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","donutMarginVertical","titleHeight","chartTitle","Math","max","titleStyles","titleFont","size","outerRadius","min","arrowAttributes","circular","axis","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","x","y","textAnchor","chartWrapper","svg","chart","aria-label","maxWidth","tooltipClassName","svgTooltip","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","positioning","target","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","style","role","opacity","displayName"],"mappings":"AAAA;;;;;+BA+BagB;;;;;;;iEA5BU,QAAQ;uBACX,cAAc;2CAEE,+BAA+B;gCAE9B,4BAA4B;wBAQ1D,wBAAwB;wBACC,cAAc;gCACxB,4BAA4B;8BAEV,0BAA0B;8BACrC,mCAAmC;uBACjC,wBAAwB;AAEvD,MAAMD,8BAA8B;AAO7B,mBAAMC,WAAAA,GAAuDhB,OAAMiB,UAAU,CAClF,CAAC,EAAEC,cAAc,CAAC,EAAEC,aAAa,IAAI,EAAE,GAAGC,WAAW,EAAEC;QAsBkBC,oBAqQzDA,8BAAAA;IA1Rd,MAAMA,QAAQ;QAAEJ;QAAaC;QAAY,GAAGC,SAAS;IAAC;IACtD,MAAM,EAAEG,mBAAmBC,SAAS,EAAEC,YAAYC,WAAW,EAAE,OAAGZ,qBAAAA,EAChEQ,MAAMK,YAAY,EAClBL,MAAMM,UAAU,EAChB;IAEF,MAAMC,gBAAoBlB,qBAAAA,EAAM;IAChC,qDAAqD,GACrD,IAAImB;IACJ,IAAIC;IACJ,MAAMC,kBAAkBhC,OAAMiC,MAAM,CAAwB;IAC5D,MAAMC,WAAWlC,OAAMiC,MAAM,CAAsC,CAAC;IAEpE,MAAM,CAACE,OAAOC,SAAS,GAAGpC,OAAMqC,QAAQ,CAAqB;IAC7D,MAAM,CAACC,QAAQC,UAAU,GAAGvC,OAAMqC,QAAQ,CAAqB;IAC/D,MAAM,CAACG,QAAQC,SAAS,GAAGzC,OAAMqC,QAAQ,CAAqBf,MAAMoB,KAAK,IAAI;IAC7E,MAAM,CAACC,SAASC,UAAU,GAAG5C,OAAMqC,QAAQ,CAAqBf,MAAMuB,MAAM,IAAI;IAChF,MAAM,CAACC,cAAcC,gBAAgB,GAAG/C,OAAMqC,QAAQ,CAAqBW;IAC3E,MAAM,CAACC,OAAOC,SAAS,GAAGlD,OAAMqC,QAAQ,CAAqB;IAC7D,MAAM,CAACc,eAAeC,iBAAiB,GAAGpD,OAAMqC,QAAQ,CAAS;IACjE,MAAM,CAACgB,eAAeC,iBAAiB,GAAGtD,OAAMqC,QAAQ,CAAS;IACjE,MAAM,CAACkB,iBAAiBC,mBAAmB,GAAGxD,OAAMqC,QAAQ,CAAWf,CAAAA,CAAAA,qBAAAA,MAAMmC,WAAAA,AAAW,MAAA,QAAjBnC,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBiC,eAAAA,AAAe,KAAI,EAAE;IAC/G,MAAM,CAACG,cAAcC,gBAAgB,GAAG3D,OAAMqC,QAAQ,CAAS;IAC/D,MAAM,CAACuB,uBAAuBC,yBAAyB,GAAG7D,OAAMqC,QAAQ;IACxE,MAAM,CAACyB,aAAaC,eAAe,GAAG/D,OAAMqC,QAAQ,CAAqB;IACzE,MAAM,CAAC2B,eAAeC,eAAe,GAAGjE,OAAMqC,QAAQ,CAAC;IACvD,MAAM6B,eAAelE,OAAMiC,MAAM,CAAyB;IAE1DjC,OAAMmE,SAAS,CAAC;QACdC;IACF,GAAG,EAAE;IAELpE,OAAMmE,SAAS,CAAC;QACd,IAAID,aAAaG,OAAO,EAAE;gBAEJC,wBAAwChD;YAD5D,MAAMgD,YAAYJ,aAAaG,OAAO;YACtC,IAAI,KAACjE,sBAAAA,EAAAA,CAAekE,yBAAAA,UAAUb,WAAAA,AAAW,MAAA,QAArBa,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAuBf,eAAe,EAAA,CAAEjC,qBAAAA,MAAMmC,WAAAA,AAAW,MAAA,QAAjBnC,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBiC,eAAe,GAAG;oBAC5EjC;gBAAnBkC,mBAAmBlC,CAAAA,CAAAA,sBAAAA,MAAMmC,WAAAA,AAAW,MAAA,QAAjBnC,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAmBiC,eAAAA,AAAe,KAAI,EAAE;YAC7D;QACF;QACAW,aAAaG,OAAO,GAAG/C;IACzB,GAAG;QAACA;KAAM;IAEVtB,OAAMmE,SAAS,CAAC;QACd,IAAIjC,SAASmC,OAAO,CAACxB,MAAM,KAAKvB,MAAMuB,MAAM,IAAIX,SAASmC,OAAO,CAAC3B,KAAK,KAAKpB,MAAMoB,KAAK,EAAE;YACtF0B;QACF;QACAlC,SAASmC,OAAO,CAACxB,MAAM,GAAGvB,MAAMuB,MAAM;QACtCX,SAASmC,OAAO,CAAC3B,KAAK,GAAGpB,MAAMoB,KAAK;IACtC,GAAG;QAACpB,MAAMoB,KAAK;QAAEpB,MAAMuB,MAAM;KAAC;IAE9B,SAAS0B,mBAAmBC,IAAsB;QAChD,IAAIC,YAAY;QAChB,MAAMC,aAAa;QACnB,MAAMC,eAAiC,EAAE;QACzCH,KAAKI,OAAO,CAACC,CAAAA;YACXJ,aAAaI,KAAKL,IAAI;QACxB;QACAA,KAAKI,OAAO,CAACC,CAAAA;YACXF,aAAaG,IAAI,CACfJ,aAAaD,YAAYI,KAAKL,IAAI,IAAKK,KAAKL,IAAI,GAAI,IAChD;gBACE,GAAGK,IAAI;gBACPL,MAAME,aAAaD;gBACnBM,kBACEF,KAAKE,gBAAgB,KAAK/B,YAAY6B,KAAKL,IAAI,CAAEQ,cAAc,KAAKH,KAAKE,gBAAgB;YAC7F,IACAF;QAER;QACA,OAAOF;IACT;IACA,SAASM,eAAeC,SAA2B;QACjD,IAAI5D,MAAM6D,KAAK,KAAK,UAAU;YAC5BD,UAAUE,IAAI,CAAC,CAACC,GAAmBC;gBACjC,OAAOA,EAAEd,IAAI,GAAIa,EAAEb,IAAI;YACzB;QACF;QACA,MAAMe,kBAAkBL,UAAUM,GAAG,CAAC,CAACC,OAAuBC;YAC5D,MAAMzC,QAAgBwC,MAAMxC,KAAK;YACjC,qDAAqD;YACrD,MAAMX,SAAiB;gBACrBqD,OAAOF,MAAMnD,MAAM;gBACnBW;gBACA2C,aAAa;oBACXC;oBACA9C,gBAAgB0C,MAAMnD,MAAM;gBAC9B;gBACAwD,kBAAkB;oBAChB/C,gBAAgBC;gBAClB;YACF;YACA,OAAOV;QACT;QACA,MAAMyD,UAAAA,WAAAA,GACJ,OAAA,aAAA,CAACrF,eAAAA,EAAAA;YACCqF,SAASR;YACTS,eAAAA;YACAC,cAAc3E,MAAM4E,mBAAmB;YACtC,GAAG5E,MAAMmC,WAAW;YACrB,6CAA6C;YAC7C0C,UAAUC;YACVC,WAAW3E;;QAGf,OAAOqE;IACT;IACA,SAASK,yBACP7C,eAAyB,EACzB+C,KAA0C,EAC1CC,aAAsB;YAEGjF,oBAKrBA;QALJ,IAAIA,MAAMmC,WAAW,IAAA,CAAA,CAAInC,qBAAAA,MAAMmC,WAAAA,AAAW,MAAA,QAAjBnC,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBkF,wBAAAA,AAAwB,GAAE;YACpEhD,mBAAmBD;QACrB,OAAO;YACLC,mBAAmBD,gBAAgBkD,KAAK,CAAC,CAAC;QAC5C;QACA,IAAA,CAAInF,sBAAAA,MAAMmC,WAAAA,AAAW,MAAA,QAAjBnC,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAmB6E,QAAQ,EAAE;YAC/B7E,MAAMmC,WAAW,CAAC0C,QAAQ,CAAC5C,iBAAiB+C,OAAOC;QACrD;IACF;IAEA,SAASG,eACPlC,IAAoB,EACpBmC,EAAU,EACVC,CAAmC,EACnCC,aAAkC;QAElC5C,eAAe6C,2BAA2BC,qBAAqBvC,KAAKlC,MAAM;QAC1EF,SAASoC,KAAKA,IAAI,CAAEwC,QAAQ;QAC5BzE,UAAUiC,KAAKlC,MAAM;QACrBY,SAASsB,KAAKvB,KAAK;QACnBG,iBAAiBoB,KAAKyC,gBAAgB;QACtC3D,iBAAiBkB,KAAKO,gBAAgB;QACtCpB,gBAAgBgD;QAChB9C,yBAAyBW;QACzBT,eAAe8C;IACjB;IAEA,SAASK,eACP1C,IAAoB,EACpBoC,CAAmC,EACnCC,aAAkC;QAElC,IAAI/E,wBAAwB0C,MAAM;YAChC1C,sBAAsB0C;YACtBP,eAAe6C,2BAA2BC,qBAAqBvC,KAAKlC,MAAM;YAC1EF,SAASoC,KAAKA,IAAI,CAAEwC,QAAQ;YAC5BzE,UAAUiC,KAAKlC,MAAM;YACrBY,SAASsB,KAAKvB,KAAK;YACnBG,iBAAiBoB,KAAKyC,gBAAgB;YACtC3D,iBAAiBkB,KAAKO,gBAAgB;YACtClB,yBAAyBW;YACzBT,eAAe8C;QACjB;IACF;IACA,SAASM;QACPxD,gBAAgB;IAClB;IAEA,SAASyD;IACP,EAAE,GACJ;IAEA,SAASvB;QACP/D,sBAAsB;QACtBmC,eAAe;IACjB;IAEA,SAASoD,kBAAkBC,gBAA6C,EAAE9C,IAAsB;QAC9F,MAAM+C,qBAAqBC;QAC3B,IAAIF,qBAAqBtE,aAAcuE,CAAAA,mBAAmBE,MAAM,KAAK,KAAKzD,aAAAA,CAAY,EAAI;YACxF,MAAM0D,aAAalD,KAAKmD,IAAI,CAAClC,CAAAA,QAASsB,qBAAqBtB,MAAMnD,MAAM;YACvE,OAAOoF,aACHA,WAAW3C,gBAAgB,GACzB2C,WAAW3C,gBAAgB,GAC3B2C,WAAWlD,IAAI,GACjB8C;QACN,OAAO,IAAIC,mBAAmBE,MAAM,GAAG,GAAG;YACxC,IAAIG,aAAa;YACjBpD,KAAKI,OAAO,CAACa,CAAAA;gBACX,IAAI8B,mBAAmBM,QAAQ,CAACpC,MAAMnD,MAAM,GAAI;oBAC9CsF,cAAcnC,MAAMjB,IAAI;gBAC1B;YACF;YACA,OAAOoD;QACT,OAAO;YACL,OAAON;QACT;IACF;IAEA,SAASQ,gBAAgBtD,IAAiC;QACxD,MAAMuD,mBAAe5H,oCAAAA,EAAqBqE,MAAMlD,MAAM0G,OAAO;QAC7D,IAAI,CAACD,cAAc;YACjB,OAAOvD;QACT;QACA,OAAOuD,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcf,QAAQ;IAC/B;IAEA;;;;KAIC,GACD,SAASQ;QACP,OAAOjE,gBAAgBkE,MAAM,GAAG,IAAIlE,kBAAkBT,eAAe;YAACA;SAAa,GAAG,EAAE;IAC1F;IAEA,SAASiE,qBAAqBzE,MAA0B;QACtD,OAAOkF,wBAAwBK,QAAQ,CAACvF;IAC1C;IAEA,SAASwE;QACP,OAAOU,wBAAwBC,MAAM,KAAK;IAC5C;IAEA,SAASQ;QACP,OAAO,CACL3G,CAAAA,MAAMkD,IAAI,IACVlD,MAAMkD,IAAI,CAACU,SAAS,IACpB5D,MAAMkD,IAAI,CAACU,SAAS,CAAEgD,MAAM,CAAC,CAACC,IAAsBA,EAAE3D,IAAI,GAAI,GAAGiD,MAAM,IAAG,CAAA;IAE9E;IAEA,SAASW,kBAAkBC,mBAAsC;QAC/D,OAAOA,sBACHA,oBAAoB7C,GAAG,CAAC,CAACX,MAAMa;YAC7B,IAAI4C;YACJ,IAAI,OAAOzD,KAAK5B,KAAK,KAAK,aAAa;gBACrCqF,mBAAehI,oBAAAA,EAAaoF,OAAO;YACrC,OAAO;gBACL4C,mBAAejI,yBAAAA,EAAkBwE,KAAK5B,KAAK;YAC7C;YACA,OAAO;gBAAE,GAAG4B,IAAI;gBAAEyD;YAAa;QACjC,KACA,EAAE;IACR;IAEA;;;KAGC,GACD,SAASlE;QACP,wCAAwC;QACxC,IAAImE;QACJ,IAAIjH,MAAMM,UAAU,EAAE;YACpB,iFAAiF;YACjF2G,wBAAwB;QAC1B,OAAO;YACL,MAAMC,gCAAgCxG,gBAAgBqC,OAAO,IAAIoE,iBAAiBzG,gBAAgBqC,OAAO;YACzGkE,wBACG,CAACvG,gBAAgBqC,OAAO,IAAIrC,gBAAgBqC,OAAO,CAACqE,qBAAqB,GAAG7F,MAAM,IACjF9B,2BAAAA,CAA0B,GAC5B4H,WAAYH,iCAAiCA,8BAA8BI,SAAS,IAAK,OACzFD,WAAYH,iCAAiCA,8BAA8BK,YAAY,IAAK;QAChG;QACA,IAAIvH,MAAMwH,SAAS,IAAItH,UAAU6C,OAAO,EAAE;YACxC,MAAM0E,YAAYzH,MAAMwH,SAAS,GAAGxH,MAAMwH,SAAS,GAAGtH,UAAU6C,OAAO;YACvE,MAAM2E,wBAAwBD,UAAUL,qBAAqB,GAAGhG,KAAK;YACrE,MAAMuG,yBACJF,UAAUL,qBAAqB,GAAG7F,MAAM,GAAG0F,wBACvCQ,UAAUL,qBAAqB,GAAG7F,MAAM,GACxC;YACN,MAAMqG,eACJ1G,WAAWwG,yBAAyBrG,YAAYsG,yBAAyBV;YAC3E,IAAIW,cAAc;gBAChBzG,SAASuG;gBACTpG,UAAUqG,yBAAyBV;YACrC;QACF;IACA,KAAK;IACP;IAEA,MAAM,EAAE/D,IAAI,EAAE5C,aAAa,KAAK,EAAE,GAAGN;IACrC,MAAM6H,SAASf,kBAAkB5D,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMU,SAAS;IAEhD,MAAMkE,UAAUlJ,kDAAAA,EAAoBoB;IAEpC,MAAM+H,aAAapE,eAAekE,OAAOjB,MAAM,CAACC,CAAAA,IAAKA,EAAE3D,IAAI,IAAK;IAChE,MAAM8E,wBAAwBhI,MAAMH,UAAU,GAAG,IAAI;IACrD,MAAMoI,sBAAsBjI,MAAMH,UAAU,GAAG,IAAI;IACnD,MAAMqI,cAAchF,CAAAA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMiF,UAAU,AAAVA,IACtBC,KAAKC,GAAG,CACL,QAAA,CAAA,CAAOrI,qBAAAA,MAAMsI,WAAAA,AAAW,MAAA,QAAjBtI,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,+BAAAA,mBAAmBuI,SAAAA,AAAS,MAAA,QAA5BvI,iCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,6BAA8BwI,IAAAA,AAAI,MAAK,WAAWxI,MAAMsI,WAAW,CAACC,SAAS,CAACC,IAAI,GAAG,EAAA,CAAC,GAC5FrJ,2BAAAA,EACF,MAEF;IACJ,MAAMsJ,cAAcL,KAAKM,GAAG,CAACxH,SAAU8G,uBAAuB3G,UAAW4G,sBAAsBC,eAAe;IAC9G,MAAMtE,YAAYX,mBAAmB4E;IACrC,MAAM7B,mBACJhG,MAAMJ,WAAW,GAAIX,wBAAAA,GAAmB8G,kBAAkB/F,MAAMgG,gBAAgB,EAAGpC,aAAc;IACnG,MAAM+E,sBAAkBrJ,qCAAAA,EAAwB;QAAEsJ,UAAU;QAAMC,MAAM;IAAa;IACrF,OAAO,CAAClC,kBAAAA,WAAAA,GACN,OAAA,aAAA,CAACmC,OAAAA;QACCC,WAAWjB,QAAQkB,IAAI;QACvBC,KAAK,CAACC;YACJhJ,UAAU6C,OAAO,GAAGmG;QACtB;QACAC,cAAc5E;OAEbvE,MAAMoJ,eAAe,IAAA,WAAA,GACpB,OAAA,aAAA,CAACC,QAAAA;QAAKN,WAAWjB,QAAQwB,cAAc;QAAEC,GAAGrI,SAAU;QAAGsI,GAAGnI,UAAW;QAAIoI,YAAW;OACnFzJ,MAAMoJ,eAAe,GAAA,WAAA,GAG1B,OAAA,aAAA,CAACN,OAAAA;QAAIC,WAAWjB,QAAQ4B,YAAY;QAAG,GAAGf,eAAe;qBACvD,OAAA,aAAA,CAACgB,OAAAA;QACCZ,WAAWjB,QAAQ8B,KAAK;QACxBC,YAAU,EAAE3G,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMiF,UAAU;QAC5B/G,OAAOF;QACPK,QAAQF,UAAW6G,cAAc;OAEhC,CAAC5H,eAAc4C,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMiF,UAAAA,AAAU,KAAA,WAAA,GAC9B,OAAA,aAAA,CAACjJ,kBAAAA,EAAAA;QACCmF,OAAOnB,KAAKiF,UAAU;QACtBoB,GAAGrI,SAAU;QACbsI,GAAG;QACHM,UAAU5I,SAAU;QACpB6H,WAAWjB,QAAQK,UAAU;QAC7BG,aAAatI,MAAMsI,WAAW;QAC9ByB,kBAAkBjC,QAAQkC,UAAU;sBAGxC,OAAA,aAAA,CAACrL,UAAAA,EAAAA;QACCyC,OAAOF;QACPK,QAAQF;QACRoH,aAAaA;QACb7I,aAAaI,MAAMJ,WAAW;QAC9BsD,MAAMU;QACNqG,iBAAiB7E;QACjB8E,iBAAiBtE;QACjBuE,oBAAoBrE;QACpBsE,UAAU7J;QACV8J,gBAAgBxE;QAChByE,WAAWpE;QACX9D,cAAcA,gBAAgB;QAC9BmI,MAAMvK,MAAMuK,IAAI;QAChBvE,kBAAkBQ,gBAAgBR;QAClCwE,qBAAqBxK,MAAMwK,mBAAmB;QAC9C3K,YAAYG,MAAMH,UAAU;wBAIlC,OAAA,aAAA,CAACN,0BAAAA,EAAAA;QACCsC,eAAeA;QACfE,eAAeA;QACf2E,SAAS1G,MAAM0G,OAAO;QACtB+D,aAAa;YACXC,QAAQlI;QACV;QACAE,eACE,CAAC1C,MAAM2K,WAAW,IAAIjI,iBAAkB8C,CAAAA,2BAA2BC,qBAAqBzE,OAAAA,CAAM;QAEhGA,QAAQA;QACR4J,QAAQ/J;QACRc,OAAOA;QACPkJ,mBAAmB;QACnBC,eAAe;YACbC,mBAAmB/K,MAAMgL,2BAA2B,GAChDhL,MAAMgL,2BAA2B,CAAC1I,yBAClCZ;YACJuJ,oBAAoBjL,MAAMkL,wBAAwB,GAC9ClL,MAAMkL,wBAAwB,CAAC5I,yBAC/BZ;QACN;QACAyJ,aAAa;QAEd,CAAC7K,cAAAA,WAAAA,GACA,OAAA,aAAA,CAACwI,OAAAA;QACCG,KAAK,CAAC3D;YACJ5E,gBAAgBqC,OAAO,GAAGuC;QAC5B;QACAyD,WAAWjB,QAAQpH,eAAe;QAClC0K,OAAO;YAAE9D,WAAWpE,CAAAA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMiF,UAAAA,AAAU,IAAG,CAAC,CAAC,EAAED,YAAY,EAAE,CAAC,GAAGxG;QAAU;OAEtEqG,eAAAA,WAAAA,GAKP,OAAA,aAAA,CAACe,OAAAA;QAAIzD,IAAI5E;QAAgB4K,MAAM;QAASD,OAAO;YAAEE,SAAS;QAAI;QAAGzB,cAAY;;AAEjF,GACA;AAEFnK,WAAW6L,WAAW,GAAG"}

package/lib-commonjs/components/DonutChart/DonutChart.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/DonutChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CartesianChartProps, CartesianChartStyleProps } from '../CommonComponents/index';\nimport { ChartProps, ChartDataPoint, Chart } from './index';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\n\n/**\n * Donut Chart properties.\n * {@docCategory DonutChart}\n */\nexport interface DonutChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: ChartProps;\n\n  /**\n   * inner radius for donut size\n   */\n  innerRadius?: number;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: DonutChartStyles;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSXElement | undefined;\n\n  /**\n   * Define a custom callout props override\n   */\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   * @default false\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   * @default true\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Rendering order of the legend\n   * @default 'default'\n   * 'default' - as per data provided\n   * 'sorted' - in descending order of value\n   */\n  order?: 'default' | 'sorted';\n}\n\n/**\n * Donut Chart style properties\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Donut Chart styles\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: string;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: string;\n  /**\n   * Style for the legend container.\n   */\n  legendContainer: string;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { CartesianChartProps, CartesianChartStyleProps } from '../CommonComponents/index';\nimport { ChartProps, ChartDataPoint, Chart } from './index';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\nimport type { TitleStyles } from '../../utilities/Common.styles';\n\n/**\n * Donut Chart properties.\n * {@docCategory DonutChart}\n */\nexport interface DonutChartProps extends CartesianChartProps {\n  /**\n   * Title styles configuration for the chart title\n   */\n  titleStyles?: TitleStyles;\n\n  /**\n   * Data to render in the chart.\n   */\n  data?: ChartProps;\n\n  /**\n   * inner radius for donut size\n   */\n  innerRadius?: number;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: DonutChartStyles;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => JSXElement | undefined;\n\n  /**\n   * Define a custom callout props override\n   */\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   * @default false\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   * @default true\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Optional callback to access the Chart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.Ref<Chart>;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Rendering order of the legend\n   * @default 'default'\n   * 'default' - as per data provided\n   * 'sorted' - in descending order of value\n   */\n  order?: 'default' | 'sorted';\n}\n\n/**\n * Donut Chart style properties\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Donut Chart styles\n * {@docCategory DonutChart}\n */\nexport interface DonutChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: string;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: string;\n  /**\n   * Style for the legend container.\n   */\n  legendContainer: string;\n\n  /**\n   * Style for the chart title.\n   */\n  chartTitle?: string;\n\n  /**\n   * styles for axis annotation\n   */\n  axisAnnotation?: string;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: string;\n\n  /**\n   * Style for SVG tooltip text\n   */\n  svgTooltip?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

@@ -23,7 +23,9 @@ const donutClassNames = {
     chart: 'fui-donut__chart',
     legendContainer: 'fui-donut__legendContainer',
     chartWrapper: 'fui-donut__chartWrapper',
-    axisAnnotation: 'fui-donut__axisAnnotation'
+    axisAnnotation: 'fui-donut__axisAnnotation',
+    chartTitle: 'fui-donut__chartTitle',
+    svgTooltip: 'fui-donut__svgTooltip'
 };
 /**
  * Base Styles
@@ -64,6 +66,20 @@ const donutClassNames = {
         sj55zd: "fkfq4zb",
         Bkfmm31: "fhuob2q",
         Bxms50k: "f1yn2ez9"
+    },
+    chartTitle: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fcpl73t",
+        Bkfmm31: "fhuob2q",
+        Bvjb7m6: "fhv2zbx",
+        fsow6f: "f17mccla",
+        jrapky: "fqcjy3b"
+    },
+    svgTooltip: {
+        Bkfmm31: "f5q6cfr",
+        Bxms50k: "f1bgda6t"
     }
 }, {
     d: [
@@ -93,7 +109,10 @@ const donutClassNames = {
         ".fmd4ok8{font-style:normal;}",
         ".f17mccla{text-align:center;}",
         ".fkfq4zb{color:var(--colorNeutralForeground2);}",
-        ".fhuob2q{fill:var(--colorNeutralForeground1);}"
+        ".fhuob2q{fill:var(--colorNeutralForeground1);}",
+        ".fhv2zbx{forced-color-adjust:auto;}",
+        ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
+        ".f5q6cfr{fill:var(--colorNeutralBackground1);}"
     ],
     m: [
         [
@@ -101,11 +120,17 @@ const donutClassNames = {
             {
                 m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
             }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1bgda6t{fill:Canvas;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
         ]
     ]
 });
 const useDonutChartStyles = (props)=>{
-    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6;
     const { className } = props;
     const baseStyles = useStyles();
     return {
@@ -113,6 +138,8 @@ const useDonutChartStyles = (props)=>{
         chart: (0, _react.mergeClasses)(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
         legendContainer: (0, _react.mergeClasses)(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
         chartWrapper: (0, _react.mergeClasses)(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),
-        axisAnnotation: (0, _react.mergeClasses)(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)
+        axisAnnotation: (0, _react.mergeClasses)(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation),
+        chartTitle: (0, _react.mergeClasses)(donutClassNames.chartTitle, baseStyles.chartTitle, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitle),
+        svgTooltip: (0, _react.mergeClasses)(donutClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.svgTooltip)
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getAxisTitleStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const donutClassNames = {\n    root: 'fui-donut__root',\n    chart: 'fui-donut__chart',\n    legendContainer: 'fui-donut__legendContainer',\n    chartWrapper: 'fui-donut__chartWrapper',\n    axisAnnotation: 'fui-donut__axisAnnotation'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n        textAlign: 'left'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL,\n        width: '100%'\n    },\n    axisAnnotation: getAxisTitleStyle()\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),\n        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","fsow6f","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","B80ckks","sj55zd","Bkfmm31","Bxms50k","d","p","m","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","className","baseStyles","styles"],"mappings":"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"}
+{"version":3,"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getAxisTitleStyle, getChartTitleStyles, HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const donutClassNames = {\n    root: 'fui-donut__root',\n    chart: 'fui-donut__chart',\n    legendContainer: 'fui-donut__legendContainer',\n    chartWrapper: 'fui-donut__chartWrapper',\n    axisAnnotation: 'fui-donut__axisAnnotation',\n    chartTitle: 'fui-donut__chartTitle',\n    svgTooltip: 'fui-donut__svgTooltip'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n        textAlign: 'left'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL,\n        width: '100%'\n    },\n    axisAnnotation: getAxisTitleStyle(),\n    chartTitle: getChartTitleStyles(),\n    svgTooltip: {\n        fill: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),\n        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation),\n        chartTitle: mergeClasses(donutClassNames.chartTitle, baseStyles.chartTitle, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitle),\n        svgTooltip: mergeClasses(donutClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.svgTooltip)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","getChartTitleStyles","HighContrastSelector","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","chartTitle","svgTooltip","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","fsow6f","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","B80ckks","sj55zd","Bkfmm31","Bxms50k","Bvjb7m6","jrapky","d","p","m","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","_props_styles5","_props_styles6","className","baseStyles","styles"],"mappings":"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"}

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

@@ -25,7 +25,9 @@ const donutClassNames = {
     chart: 'fui-donut__chart',
     legendContainer: 'fui-donut__legendContainer',
     chartWrapper: 'fui-donut__chartWrapper',
-    axisAnnotation: 'fui-donut__axisAnnotation'
+    axisAnnotation: 'fui-donut__axisAnnotation',
+    chartTitle: 'fui-donut__chartTitle',
+    svgTooltip: 'fui-donut__svgTooltip'
 };
 /**
  * Base Styles
@@ -49,10 +51,17 @@ const donutClassNames = {
         paddingTop: _reacttheme.tokens.spacingVerticalL,
         width: '100%'
     },
-    axisAnnotation: (0, _index.getAxisTitleStyle)()
+    axisAnnotation: (0, _index.getAxisTitleStyle)(),
+    chartTitle: (0, _index.getChartTitleStyles)(),
+    svgTooltip: {
+        fill: _reacttheme.tokens.colorNeutralBackground1,
+        [_index.HighContrastSelector]: {
+            fill: 'Canvas'
+        }
+    }
 });
 const useDonutChartStyles = (props)=>{
-    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6;
     const { className } = props;
     const baseStyles = useStyles();
     return {
@@ -60,6 +69,8 @@ const useDonutChartStyles = (props)=>{
         chart: (0, _react.mergeClasses)(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
         legendContainer: (0, _react.mergeClasses)(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
         chartWrapper: (0, _react.mergeClasses)(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),
-        axisAnnotation: (0, _react.mergeClasses)(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)
+        axisAnnotation: (0, _react.mergeClasses)(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation),
+        chartTitle: (0, _react.mergeClasses)(donutClassNames.chartTitle, baseStyles.chartTitle, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.chartTitle),
+        svgTooltip: (0, _react.mergeClasses)(donutClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.svgTooltip)
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/useDonutChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DonutChartProps, DonutChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { getAxisTitleStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const donutClassNames: SlotClassNames<DonutChartStyles> = {\n  root: 'fui-donut__root',\n  chart: 'fui-donut__chart',\n  legendContainer: 'fui-donut__legendContainer',\n  chartWrapper: 'fui-donut__chartWrapper',\n  axisAnnotation: 'fui-donut__axisAnnotation',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    // alignItems: 'center',\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n    textAlign: 'left',\n  },\n  chart: {\n    boxSizing: 'content-box',\n    alignmentAdjust: 'center',\n    display: 'block',\n    overflow: 'visible',\n  },\n  legendContainer: {\n    paddingTop: tokens.spacingVerticalL,\n    width: '100%',\n  },\n  axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n});\n\n/**\n * Apply styling to the DonutChart component\n */\nexport const useDonutChartStyles = (props: DonutChartProps): DonutChartStyles => {\n  const { className } = props;\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(donutClassNames.root, baseStyles.root, className, props.styles?.root),\n    chart: mergeClasses(donutClassNames.chart, baseStyles.chart, props.styles?.chart),\n    legendContainer: mergeClasses(\n      donutClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n    chartWrapper: mergeClasses(donutClassNames.chartWrapper, props.styles?.chartWrapper),\n    axisAnnotation: mergeClasses(\n      donutClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      props.styles?.axisAnnotation,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","body1","display","flexDirection","width","height","textAlign","boxSizing","alignmentAdjust","overflow","paddingTop","spacingVerticalL","useDonutChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA;;;;;;;;;;;;IAWaK,eAAAA;;;uBAqCAkB;eAAAA;;;uBA9C0C,iBAAiB;4BAC/B,wBAAwB;uBAG/B,wBAAwB;AAKnD,wBAA0D;IAC/DjB,MAAM;IACNC,OAAO;IACPC,iBAAiB;IACjBC,cAAc;IACdC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYX,iBAAAA,EAAW;IAC3BM,MAAM;QACJ,wBAAwB;QACxB,GAAGH,4BAAAA,CAAiBS,KAAK;QACzBC,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,QAAQ;QACRC,WAAW;IACb;IACAV,OAAO;QACLW,WAAW;QACXC,iBAAiB;QACjBN,SAAS;QACTO,UAAU;IACZ;IACAZ,iBAAiB;QACfa,YAAYnB,kBAAAA,CAAOoB,gBAAgB;QACnCP,OAAO;IACT;IACAL,oBAAgBN,wBAAAA;AAClB;AAKO,4BAA4B,CAACoB;QAKqCA,eACRA,gBAI3DA,gBAEuDA,gBAIvDA;IAfJ,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAaf;IAEnB,OAAO;QACLL,UAAML,mBAAAA,EAAaI,gBAAgBC,IAAI,EAAEoB,WAAWpB,IAAI,EAAEmB,WAAAA,CAAWD,gBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAclB,IAAI;QACvFC,WAAON,mBAAAA,EAAaI,gBAAgBE,KAAK,EAAEmB,WAAWnB,KAAK,EAAA,CAAEiB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcjB,KAAK;QAChFC,iBAAiBP,uBAAAA,EACfI,gBAAgBG,eAAe,EAC/BkB,WAAWlB,eAAe,EAAA,CAC1BgB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAchB,eAAe;QAE/BC,kBAAcR,mBAAAA,EAAaI,gBAAgBI,YAAY,EAAA,CAAEe,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcf,YAAY;QACnFC,oBAAgBT,mBAAAA,EACdI,gBAAgBK,cAAc,EAC9BgB,WAAWhB,cAAc,EAAA,CACzBc,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcd,cAAc;IAEhC;AACF,EAAE"}
+{"version":3,"sources":["../src/components/DonutChart/useDonutChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DonutChartProps, DonutChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { getAxisTitleStyle, getChartTitleStyles, HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const donutClassNames: SlotClassNames<DonutChartStyles> = {\n  root: 'fui-donut__root',\n  chart: 'fui-donut__chart',\n  legendContainer: 'fui-donut__legendContainer',\n  chartWrapper: 'fui-donut__chartWrapper',\n  axisAnnotation: 'fui-donut__axisAnnotation',\n  chartTitle: 'fui-donut__chartTitle',\n  svgTooltip: 'fui-donut__svgTooltip',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    // alignItems: 'center',\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n    textAlign: 'left',\n  },\n  chart: {\n    boxSizing: 'content-box',\n    alignmentAdjust: 'center',\n    display: 'block',\n    overflow: 'visible',\n  },\n  legendContainer: {\n    paddingTop: tokens.spacingVerticalL,\n    width: '100%',\n  },\n  axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n  chartTitle: getChartTitleStyles() as GriffelStyle,\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the DonutChart component\n */\nexport const useDonutChartStyles = (props: DonutChartProps): DonutChartStyles => {\n  const { className } = props;\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(donutClassNames.root, baseStyles.root, className, props.styles?.root),\n    chart: mergeClasses(donutClassNames.chart, baseStyles.chart, props.styles?.chart),\n    legendContainer: mergeClasses(\n      donutClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n    chartWrapper: mergeClasses(donutClassNames.chartWrapper, props.styles?.chartWrapper),\n    axisAnnotation: mergeClasses(\n      donutClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      props.styles?.axisAnnotation,\n    ),\n    chartTitle: mergeClasses(donutClassNames.chartTitle, baseStyles.chartTitle, props.styles?.chartTitle),\n    svgTooltip: mergeClasses(donutClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","getChartTitleStyles","HighContrastSelector","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","chartTitle","svgTooltip","useStyles","body1","display","flexDirection","width","height","textAlign","boxSizing","alignmentAdjust","overflow","paddingTop","spacingVerticalL","fill","colorNeutralBackground1","useDonutChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA;;;;;;;;;;;;IAWaO,eAAAA;;;uBA8CAsB;eAAAA;;;uBAvD0C,iBAAiB;4BAC/B,wBAAwB;uBAGY,wBAAwB;AAK9F,wBAA0D;IAC/DrB,MAAM;IACNC,OAAO;IACPC,iBAAiB;IACjBC,cAAc;IACdC,gBAAgB;IAChBC,YAAY;IACZC,YAAY;AACd,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BQ,MAAM;QACJ,wBAAwB;QACxB,GAAGL,4BAAAA,CAAiBa,KAAK;QACzBC,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,QAAQ;QACRC,WAAW;IACb;IACAZ,OAAO;QACLa,WAAW;QACXC,iBAAiB;QACjBN,SAAS;QACTO,UAAU;IACZ;IACAd,iBAAiB;QACfe,YAAYvB,kBAAAA,CAAOwB,gBAAgB;QACnCP,OAAO;IACT;IACAP,oBAAgBR,wBAAAA;IAChBS,gBAAYR,0BAAAA;IACZS,YAAY;QACVa,MAAMzB,kBAAAA,CAAO0B,uBAAuB;QACpC,CAACtB,2BAAAA,CAAqB,EAAE;YACtBqB,MAAM;QACR;IACF;AACF;AAKO,4BAA4B,CAACG;QAKqCA,eACRA,gBAI3DA,gBAEuDA,gBAIvDA,gBAE0EA,gBACAA;IAlB9E,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAajB;IAEnB,OAAO;QACLP,UAAMP,mBAAAA,EAAaM,gBAAgBC,IAAI,EAAEwB,WAAWxB,IAAI,EAAEuB,WAAAA,CAAWD,gBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAActB,IAAI;QACvFC,WAAOR,mBAAAA,EAAaM,gBAAgBE,KAAK,EAAEuB,WAAWvB,KAAK,EAAA,CAAEqB,iBAAAA,MAAMG,MAAM,AAANA,MAAM,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcrB,KAAK;QAChFC,qBAAiBT,mBAAAA,EACfM,gBAAgBG,eAAe,EAC/BsB,WAAWtB,eAAe,EAAA,AAC1BoB,kBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcpB,eAAe;QAE/BC,kBAAcV,mBAAAA,EAAaM,gBAAgBI,YAAY,EAAA,CAAEmB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcnB,YAAY;QACnFC,gBAAgBX,uBAAAA,EACdM,gBAAgBK,cAAc,EAC9BoB,WAAWpB,cAAc,EAAA,CACzBkB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAclB,cAAc;QAE9BC,gBAAYZ,mBAAAA,EAAaM,gBAAgBM,UAAU,EAAEmB,WAAWnB,UAAU,EAAA,CAAEiB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcjB,UAAU;QACpGC,gBAAYb,mBAAAA,EAAaM,gBAAgBO,UAAU,EAAEkB,WAAWlB,UAAU,EAAA,CAAEgB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAchB,UAAU;IACtG;AACF,EAAE"}

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

@@ -22,7 +22,7 @@ const _useFunnelChartStylesstyles = require("./useFunnelChartStyles.styles");
 const _funnelGeometry = require("./funnelGeometry");
 const _hooks = require("../../utilities/hooks");
 const FunnelChart = /*#__PURE__*/ _react.forwardRef(({ orientation = 'vertical', ...restProps }, forwardedRef)=>{
-    var _props_legendProps;
+    var _props_legendProps, _props_titleStyles_titleFont, _props_titleStyles;
     const props = {
         orientation,
         ...restProps
@@ -108,6 +108,18 @@ const FunnelChart = /*#__PURE__*/ _react.forwardRef(({ orientation = 'vertical',
     function noLegendHighlighted() {
         return getHighlightedLegend().length === 0;
     }
+    function _getAriaLabel(data) {
+        if ('subValue' in data) {
+            // Stacked funnel segment
+            const formattedValue = (0, _chartutilities.formatToLocaleString)(data.subValue.value.toString(), props.culture);
+            return `${data.stage}, ${data.subValue.category}, ${formattedValue}.`;
+        } else {
+            var _data_value;
+            // Non-stacked funnel segment
+            const formattedValue = (0, _chartutilities.formatToLocaleString)(((_data_value = data.value) !== null && _data_value !== void 0 ? _data_value : 0).toString(), props.culture);
+            return `${data.stage}, ${formattedValue}.`;
+        }
+    }
     function _getEventHandlerProps(data, opacity, segmentId) {
         const targetElement = document.getElementById(segmentId);
         if ('subValue' in data) {
@@ -161,7 +173,9 @@ const FunnelChart = /*#__PURE__*/ _react.forwardRef(({ orientation = 'vertical',
             fill: fill,
             opacity: opacity,
             ...eventHandlers,
-            tabIndex: tabIndex
+            tabIndex: tabIndex,
+            role: "img",
+            "aria-label": _getAriaLabel(data)
         }), textProps && /*#__PURE__*/ _react.createElement("g", eventHandlers, _renderSegmentText({
             ...textProps,
             textColor,
@@ -344,7 +358,8 @@ const FunnelChart = /*#__PURE__*/ _react.forwardRef(({ orientation = 'vertical',
     };
     const width = props.width || 350;
     const height = props.height || 500;
-    const funnelMarginTop = 40;
+    const titleHeight = props.chartTitle ? Math.max((typeof ((_props_titleStyles = props.titleStyles) === null || _props_titleStyles === void 0 ? void 0 : (_props_titleStyles_titleFont = _props_titleStyles.titleFont) === null || _props_titleStyles_titleFont === void 0 ? void 0 : _props_titleStyles_titleFont.size) === 'number' ? props.titleStyles.titleFont.size : 13) + _index.CHART_TITLE_PADDING, 40) : 40;
+    const funnelMarginTop = titleHeight;
     const funnelWidth = width * 0.8;
     const funnelOffsetX = (width - funnelWidth) / 2;
     const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
@@ -354,7 +369,6 @@ const FunnelChart = /*#__PURE__*/ _react.forwardRef(({ orientation = 'vertical',
     return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
         ref: chartContainerRef,
         className: classes.root,
-        ...arrowAttributes,
         style: {
             width,
             height
@@ -363,9 +377,17 @@ const FunnelChart = /*#__PURE__*/ _react.forwardRef(({ orientation = 'vertical',
         width: width,
         height: height,
         className: classes.chart,
+        ...arrowAttributes,
         role: 'img',
         "aria-label": props.chartTitle
-    }, /*#__PURE__*/ _react.createElement("g", {
+    }, !props.hideLegend && props.chartTitle && /*#__PURE__*/ _react.createElement(_index.ChartTitle, {
+        title: props.chartTitle,
+        x: width / 2,
+        maxWidth: width - 20,
+        className: classes.chartTitle,
+        titleStyles: props.titleStyles,
+        tooltipClassName: classes.svgTooltip
+    }), /*#__PURE__*/ _react.createElement("g", {
         transform: isRTL ? `translate(${funnelOffsetX + funnelWidth}, ${funnelMarginTop}) scale(-1,1)` : `translate(${funnelOffsetX}, ${funnelMarginTop})`
     }, isStacked ? _createStackedFunnel(height - funnelMarginTop, funnelWidth) : _createFunnel(height - funnelMarginTop, funnelWidth))), isPopoverOpen && /*#__PURE__*/ _react.createElement(_ChartPopover.ChartPopover, {
         ...props.calloutProps,