npm - @fluentui/react-charts - Versions diffs - 9.3.7 → 9.3.9 - Mend

@fluentui/react-charts 9.3.7 → 9.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (259) hide show

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

@@ -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,10 +254,14 @@ 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 focusAttributes = (0, _reacttabster.useFocusableGroup)();
+    const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        circular: true,
+        axis: 'horizontal'
+    });
     return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
         className: classes.root,
         ref: (rootElem)=>{
@@ -271,13 +275,21 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef(({ innerRadius = 0, hideLabel
         textAnchor: "middle"
     }, props.xAxisAnnotation), /*#__PURE__*/ _react.createElement("div", {
         className: classes.chartWrapper,
-        ...focusAttributes
+        ...arrowAttributes
     }, /*#__PURE__*/ _react.createElement("svg", {
         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,
@@ -315,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 CHANGED Viewed

	@@ -1 +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 { useFocusableGroup } 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 focusAttributes = useFocusableGroup();\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} {...focusAttributes}>\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","useFocusableGroup","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","focusAttributes","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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"}
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 {\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 CHANGED Viewed

	@@ -1 +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"}
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';\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"AAAA,YAAY;;;;;;;;;;;;~~IAMKK~~,eAAe;;;~~uBAiCI;eAAnB6B;;;uBAtCwB~~,gBAAgB;AAK9C,wBAAwB;IAC/~~B5B~~,IAAI,EAAE,iBAAiB;IACvBC,KAAK,EAAE,kBAAkB;IACzBC,eAAe,EAAE,4BAA4B;IAC7CC,YAAY,EAAE,yBAAyB;IACvCC,cAAc,EAAE;~~AACpB~~,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,~~OAAGX~~,eAAA,EAAA;~~IAAAM~~,IAAA,EAAA;~~QAAAM~~,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;~~IAAAb~~,KAAA,EAAA;~~QAAAc~~,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAN,MAAA,EAAA;QAAAO,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;~~IAAAjB~~,eAAA,EAAA;~~QAAAkB~~,MAAA,EAAA;QAAAR,MAAA,EAAA;IAAA;~~IAAAR~~,cAAA,EAAA;~~QAAAE~~,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAQ,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;~~IAAAC~~,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,~~CAqBrB~~,CAAC;AAGS,~~4BAA6BE~~,KAAK,IAAG;IAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;~~IACjF~~,MAAM,EAAEC,SAAAA,EAAW,~~GAAGN~~,KAAK;IAC3B,~~MAAMO~~,UAAU,~~GAAG/B~~,SAAS,CAAC,CAAC;IAC9B,OAAO;~~QACHL~~,IAAI,~~MAAEL~~,mBAAY,~~EAACI~~,eAAe,CAACC,IAAI,~~EAAEoC~~,UAAU,~~CAACpC~~,IAAI,~~EAAEmC~~,SAAS,~~EAAE~~,~~CAACL~~,~~aAAa~~,~~GAAGD~~,KAAK,~~CAACQ~~,MAAAA,AAAM,MAAM,IAAI,~~IAAIP~~,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,~~CAAC9B~~,IAAI,CAAC;QACvKC,KAAK,~~MAAEN~~,mBAAY,~~EAACI~~,eAAe,CAACE,KAAK,~~EAAEmC~~,UAAU,~~CAACnC~~,KAAK,~~EAAG8B~~,~~AAAD~~,~~cAAe~~,IAAGF,KAAK,~~CAACQ~~,~~MAAAA~~,~~AAAM~~,~~MAAM~~,IAAI,~~IAAIN~~,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAAC9B~~,KAAK,CAAC;QACnKC,eAAe,~~MAAEP~~,mBAAY,~~EAACI~~,eAAe,CAACG,eAAe,~~EAAEkC~~,UAAU,~~CAAClC~~,eAAe,EAAE,~~CAAC8B~~,cAAc,GAAGH,KAAK,~~CAACQ~~,MAAAA,AAAM,MAAM,IAAI,~~IAAIL~~,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAAC9B~~,eAAe,CAAC;QAC3MC,YAAY,~~MAAER~~,~~mBAAY~~,~~EAACI~~,eAAe,CAACI,YAAY,EAAE,~~CAAC8B~~,cAAc,GAAGJ,KAAK,~~CAACQ~~,MAAAA,AAAM,MAAM,IAAI,~~IAAIJ~~,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAAC9B~~,YAAY,CAAC;QACtKC,cAAc,~~MAAET~~,~~mBAAY~~,~~EAACI~~,eAAe,CAACK,cAAc,~~EAAEgC~~,UAAU,~~CAAChC~~,cAAc,EAAE,~~CAAC8B~~,cAAc,GAAGL,KAAK,~~CAACQ~~,MAAAA,AAAM,MAAM,IAAI,~~IAAIH~~,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,~~CAAC9B~~,cAAc;~~IAC1M~~,CAAC;AACL,CAAC"}
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, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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, 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 CHANGED Viewed

@@ -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,14 +358,17 @@ 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 focusAttributes = (0, _reacttabster.useFocusableGroup)();
+    const arrowAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        circular: true,
+        axis: 'horizontal'
+    });
     return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
         ref: chartContainerRef,
         className: classes.root,
-        ...focusAttributes,
         style: {
             width,
             height
@@ -360,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,