@fluentui/react-charts 0.0.0-nightly-20250825-0406.1 → 0.0.0-nightly-20250826-2140.1

package/lib/components/DonutChart/DonutChart.js

@@ -246,12 +246,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         className: classes.root,
         ref: (rootElem)=>_rootElem.current = rootElem,
         onMouseLeave: _handleChartMouseLeave
-    }, props.xAxisAnnotation && /*#__PURE__*/ React.createElement("text", {
-        className: classes.axisAnnotation,
-        x: _width / 2,
-        y: _height - 10,
-        textAnchor: "middle"
-    }, props.xAxisAnnotation), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement("div", {
         className: classes.chartWrapper,
         ...focusAttributes
     }, /*#__PURE__*/ React.createElement("svg", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* 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 { getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } 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 { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\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  (props, forwardedRef) => {\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\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>('');\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const _legendsRef = React.useRef<LegendContainer>(null);\n    const _isRTL: boolean = useRtl();\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\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    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n        },\n      }),\n      [],\n    );\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      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          action: () => {\n            if (selectedLegend === point.legend) {\n              setSelectedLegend('');\n            } else {\n              setSelectedLegend(point.legend!);\n            }\n          },\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend('');\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      let cx = 0;\n      let cy = 0;\n\n      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n      cx = targetRect.left + targetRect.width / 2;\n      cy = targetRect.top + targetRect.height / 2;\n      updatePosition(cx, cy);\n      setPopoverOpen(selectedLegend === '' || selectedLegend === 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    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(selectedLegend === '' || selectedLegend === 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        updatePosition(e.clientX, e.clientY);\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 highlightedLegend = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {\n        let legendValue = valueInsideDonut;\n        data!.map((point: ChartDataPoint, index: number) => {\n          if (point.legend === highlightedLegend || (isPopoverOpen && point.legend === legend)) {\n            legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n          }\n          return;\n        });\n        return legendValue;\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     * Note: This won't work in case of multiple legends selection.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegend || activeLegend;\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    function updatePosition(newX: number, newY: number) {\n      const threshold = 1; // Set a threshold for movement\n      const { x, y } = clickPosition;\n      // Calculate the distance moved\n      const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n      // Update the position only if the distance moved is greater than the threshold\n      if (distance > threshold) {\n        setClickPosition({ x: newX, y: newY });\n        setPopoverOpen(true);\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);\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.filter((d: ChartDataPoint) => d.data! >= 0));\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) => (_rootElem.current = rootElem)}\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 ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={!props.hideTooltip && isPopoverOpen}\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 ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\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';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegend","setSelectedLegend","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","undefined","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","action","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","legendRef","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegend","_getHighlightedLegend","legendValue","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","length","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* 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 { getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } 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 { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\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  (props, forwardedRef) => {\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\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>('');\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const _legendsRef = React.useRef<LegendContainer>(null);\n    const _isRTL: boolean = useRtl();\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\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    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n        },\n      }),\n      [],\n    );\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      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          action: () => {\n            if (selectedLegend === point.legend) {\n              setSelectedLegend('');\n            } else {\n              setSelectedLegend(point.legend!);\n            }\n          },\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend('');\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      let cx = 0;\n      let cy = 0;\n\n      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n      cx = targetRect.left + targetRect.width / 2;\n      cy = targetRect.top + targetRect.height / 2;\n      updatePosition(cx, cy);\n      setPopoverOpen(selectedLegend === '' || selectedLegend === 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    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(selectedLegend === '' || selectedLegend === 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        updatePosition(e.clientX, e.clientY);\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 highlightedLegend = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {\n        let legendValue = valueInsideDonut;\n        data!.map((point: ChartDataPoint, index: number) => {\n          if (point.legend === highlightedLegend || (isPopoverOpen && point.legend === legend)) {\n            legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n          }\n          return;\n        });\n        return legendValue;\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     * Note: This won't work in case of multiple legends selection.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegend || activeLegend;\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    function updatePosition(newX: number, newY: number) {\n      const threshold = 1; // Set a threshold for movement\n      const { x, y } = clickPosition;\n      // Calculate the distance moved\n      const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n      // Update the position only if the distance moved is greater than the threshold\n      if (distance > threshold) {\n        setClickPosition({ x: newX, y: newY });\n        setPopoverOpen(true);\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);\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.filter((d: ChartDataPoint) => d.data! >= 0));\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) => (_rootElem.current = rootElem)}\n        onMouseLeave={_handleChartMouseLeave}\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 ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={!props.hideTooltip && isPopoverOpen}\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 ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\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';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegend","setSelectedLegend","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","undefined","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","action","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","legendRef","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegend","_getHighlightedLegend","legendValue","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","length","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}

package/lib/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.RefObject<Chart>;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\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":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { 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 {\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.RefObject<Chart>;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\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 the chart wrapper div\n   */\n  chartWrapper?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -1,6 +1,5 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/utilities';
 /**
  * @internal
  */
@@ -8,8 +7,7 @@ export const donutClassNames = {
   root: 'fui-donut__root',
   chart: 'fui-donut__chart',
   legendContainer: 'fui-donut__legendContainer',
-  chartWrapper: 'fui-donut__chartWrapper',
-  axisAnnotation: 'fui-donut__axisAnnotation'
+  chartWrapper: 'fui-donut__chartWrapper'
 };
 /**
  * Base Styles
@@ -36,31 +34,17 @@ const useStyles = /*#__PURE__*/__styles({
   legendContainer: {
     z8tnut: "fikn0iw",
     a9b677: "fly5x3f"
-  },
-  axisAnnotation: {
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "f13mqy1h",
-    Bhrd7zp: "fl43uef",
-    Bg96gwp: "fcpl73t",
-    fsow6f: "f17mccla",
-    B80ckks: "fmd4ok8",
-    sj55zd: "fkfq4zb",
-    Bkfmm31: "fhuob2q",
-    a6j6cd: "folz2wl"
   }
 }, {
   d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1e4lqlz{box-sizing:content-box;}", ".fzm18in{alignment-adjust:center;}", ".ftgm304{display:block;}", [".f1gl81tg{overflow:visible;}", {
     p: -1
-  }], ".fikn0iw{padding-top:var(--spacingVerticalL);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f17mccla{text-align:center;}", ".fmd4ok8{font-style:normal;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"],
-  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}", {
-    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
-  }]]
+  }], ".fikn0iw{padding-top:var(--spacingVerticalL);}"]
 });
 /**
  * Apply styling to the DonutChart component
  */
 export const useDonutChartStyles = props => {
-  var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
+  var _props_styles, _props_styles1, _props_styles2, _props_styles3;
   const {
     className
   } = props;
@@ -69,7 +53,6 @@ export const useDonutChartStyles = props => {
     root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
     chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
     legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
-    chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),
-    axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)
+    chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper)
   };
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","fsow6f","B80ckks","sj55zd","Bkfmm31","a6j6cd","d","p","m","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","className","baseStyles","styles"],"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\n/**\n * @internal\n */ export const donutClassNames = {\n    root: 'fui-donut__root',\n    chart: 'fui-donut__chart',\n    legendContainer: 'fui-donut__legendContainer',\n    chartWrapper: 'fui-donut__chartWrapper',\n    axisAnnotation: 'fui-donut__axisAnnotation'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL,\n        width: '100%'\n    },\n    axisAnnotation: {\n        ...typographyStyles.caption2Strong,\n        textAlign: 'center',\n        fontStyle: 'normal',\n        color: tokens.colorNeutralForeground2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\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;\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAG;EAC/BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,kBAAkB;EACzBC,eAAe,EAAE,4BAA4B;EAC7CC,YAAY,EAAE,yBAAyB;EACvCC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGX,QAAA;EAAAM,IAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,KAAA;IAAAa,OAAA;IAAAC,MAAA;IAAAL,MAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,eAAA;IAAAiB,MAAA;IAAAP,MAAA;EAAA;EAAAR,cAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAW,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA6BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACjF,MAAM;IAAEC;EAAU,CAAC,GAAGN,KAAK;EAC3B,MAAMO,UAAU,GAAG/B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEL,YAAY,CAACI,eAAe,CAACC,IAAI,EAAEoC,UAAU,CAACpC,IAAI,EAAEmC,SAAS,EAAE,CAACL,aAAa,GAAGD,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIP,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC9B,IAAI,CAAC;IACvKC,KAAK,EAAEN,YAAY,CAACI,eAAe,CAACE,KAAK,EAAEmC,UAAU,CAACnC,KAAK,EAAE,CAAC8B,cAAc,GAAGF,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIN,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,KAAK,CAAC;IACnKC,eAAe,EAAEP,YAAY,CAACI,eAAe,CAACG,eAAe,EAAEkC,UAAU,CAAClC,eAAe,EAAE,CAAC8B,cAAc,GAAGH,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,eAAe,CAAC;IAC3MC,YAAY,EAAER,YAAY,CAACI,eAAe,CAACI,YAAY,EAAE,CAAC8B,cAAc,GAAGJ,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,YAAY,CAAC;IACtKC,cAAc,EAAET,YAAY,CAACI,eAAe,CAACK,cAAc,EAAEgC,UAAU,CAAChC,cAAc,EAAE,CAAC8B,cAAc,GAAGL,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,cAAc;EAC1M,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","donutClassNames","root","chart","legendContainer","chartWrapper","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","d","p","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","className","baseStyles","styles"],"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\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};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL,\n        width: '100%'\n    }\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3;\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    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAG;EAC/BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,kBAAkB;EACzBC,eAAe,EAAE,4BAA4B;EAC7CC,YAAY,EAAE;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAX,KAAA;IAAAY,OAAA;IAAAC,MAAA;IAAAL,MAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAf,eAAA;IAAAgB,MAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;IAAAC,CAAA;EAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACjE,MAAM;IAAEC;EAAU,CAAC,GAAGL,KAAK;EAC3B,MAAMM,UAAU,GAAGxB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHJ,IAAI,EAAEJ,YAAY,CAACG,eAAe,CAACC,IAAI,EAAE4B,UAAU,CAAC5B,IAAI,EAAE2B,SAAS,EAAE,CAACJ,aAAa,GAAGD,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIN,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACvB,IAAI,CAAC;IACvKC,KAAK,EAAEL,YAAY,CAACG,eAAe,CAACE,KAAK,EAAE2B,UAAU,CAAC3B,KAAK,EAAE,CAACuB,cAAc,GAAGF,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACvB,KAAK,CAAC;IACnKC,eAAe,EAAEN,YAAY,CAACG,eAAe,CAACG,eAAe,EAAE0B,UAAU,CAAC1B,eAAe,EAAE,CAACuB,cAAc,GAAGH,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACvB,eAAe,CAAC;IAC3MC,YAAY,EAAEP,YAAY,CAACG,eAAe,CAACI,YAAY,EAAE,CAACuB,cAAc,GAAGJ,KAAK,CAACO,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACvB,YAAY;EACzK,CAAC;AACL,CAAC","ignoreList":[]}

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

@@ -1,14 +1,12 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/utilities';
 /**
  * @internal
  */ export const donutClassNames = {
     root: 'fui-donut__root',
     chart: 'fui-donut__chart',
     legendContainer: 'fui-donut__legendContainer',
-    chartWrapper: 'fui-donut__chartWrapper',
-    axisAnnotation: 'fui-donut__axisAnnotation'
+    chartWrapper: 'fui-donut__chartWrapper'
 };
 /**
  * Base Styles
@@ -30,29 +28,18 @@ import { HighContrastSelector } from '../../utilities/utilities';
     legendContainer: {
         paddingTop: tokens.spacingVerticalL,
         width: '100%'
-    },
-    axisAnnotation: {
-        ...typographyStyles.caption2Strong,
-        textAlign: 'center',
-        fontStyle: 'normal',
-        color: tokens.colorNeutralForeground2,
-        fill: tokens.colorNeutralForeground1,
-        [HighContrastSelector]: {
-            fill: 'CanvasText'
-        }
     }
 });
 /**
  * Apply styling to the DonutChart component
  */ export const useDonutChartStyles = (props)=>{
-    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3;
     const { className } = props;
     const baseStyles = useStyles();
     return {
         root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
         chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
         legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
-        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),
-        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)
+        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper)
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/useDonutChartStyles.styles.ts"],"sourcesContent":["import { 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 { HighContrastSelector } from '../../utilities/utilities';\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  },\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: {\n    ...typographyStyles.caption2Strong,\n    textAlign: 'center',\n    fontStyle: 'normal',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\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  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","body1","display","flexDirection","width","height","boxSizing","alignmentAdjust","overflow","paddingTop","spacingVerticalL","caption2Strong","textAlign","fontStyle","color","colorNeutralForeground2","fill","colorNeutralForeground1","useDonutChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE;;CAEC,GACD,OAAO,MAAMC,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,iBAAiB;IACjBC,cAAc;IACdC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYX,WAAW;IAC3BM,MAAM;QACJ,wBAAwB;QACxB,GAAGH,iBAAiBS,KAAK;QACzBC,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,QAAQ;IACV;IACAT,OAAO;QACLU,WAAW;QACXC,iBAAiB;QACjBL,SAAS;QACTM,UAAU;IACZ;IACAX,iBAAiB;QACfY,YAAYlB,OAAOmB,gBAAgB;QACnCN,OAAO;IACT;IACAL,gBAAgB;QACd,GAAGP,iBAAiBmB,cAAc;QAClCC,WAAW;QACXC,WAAW;QACXC,OAAOvB,OAAOwB,uBAAuB;QACrCC,MAAMzB,OAAO0B,uBAAuB;QACpC,CAACxB,qBAAqB,EAAE;YACtBuB,MAAM;QACR;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAACC;QAKqCA,eACRA,gBAI3DA,gBAEuDA,gBAIvDA;IAfJ,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAarB;IAEnB,OAAO;QACLL,MAAML,aAAaI,gBAAgBC,IAAI,EAAE0B,WAAW1B,IAAI,EAAEyB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAcxB,IAAI;QACvFC,OAAON,aAAaI,gBAAgBE,KAAK,EAAEyB,WAAWzB,KAAK,GAAEuB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcvB,KAAK;QAChFC,iBAAiBP,aACfI,gBAAgBG,eAAe,EAC/BwB,WAAWxB,eAAe,GAC1BsB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAActB,eAAe;QAE/BC,cAAcR,aAAaI,gBAAgBI,YAAY,GAAEqB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcrB,YAAY;QACnFC,gBAAgBT,aACdI,gBAAgBK,cAAc,EAC9BsB,WAAWtB,cAAc,GACzBoB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcpB,cAAc;IAEhC;AACF,EAAE"}
+{"version":3,"sources":["../src/components/DonutChart/useDonutChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DonutChartProps, DonutChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\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};\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  },\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});\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  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","donutClassNames","root","chart","legendContainer","chartWrapper","useStyles","body1","display","flexDirection","width","height","boxSizing","alignmentAdjust","overflow","paddingTop","spacingVerticalL","useDonutChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE;;CAEC,GACD,OAAO,MAAMC,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,iBAAiB;IACjBC,cAAc;AAChB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BK,MAAM;QACJ,wBAAwB;QACxB,GAAGF,iBAAiBO,KAAK;QACzBC,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,QAAQ;IACV;IACAR,OAAO;QACLS,WAAW;QACXC,iBAAiB;QACjBL,SAAS;QACTM,UAAU;IACZ;IACAV,iBAAiB;QACfW,YAAYhB,OAAOiB,gBAAgB;QACnCN,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,sBAAsB,CAACC;QAKqCA,eACRA,gBAI3DA,gBAEuDA;IAX3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAad;IAEnB,OAAO;QACLJ,MAAMJ,aAAaG,gBAAgBC,IAAI,EAAEkB,WAAWlB,IAAI,EAAEiB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAchB,IAAI;QACvFC,OAAOL,aAAaG,gBAAgBE,KAAK,EAAEiB,WAAWjB,KAAK,GAAEe,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcf,KAAK;QAChFC,iBAAiBN,aACfG,gBAAgBG,eAAe,EAC/BgB,WAAWhB,eAAe,GAC1Bc,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcd,eAAe;QAE/BC,cAAcP,aAAaG,gBAAgBI,YAAY,GAAEa,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcb,YAAY;IACrF;AACF,EAAE"}

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js

@@ -4,7 +4,7 @@ import { select as d3Select } from 'd3-selection';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { scaleBand as d3ScaleBand } from 'd3-scale';
 import { useId } from '@fluentui/react-utilities';
-import { ChartTypes, getAccessibleDataObject, tooltipOfAxislabels, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getScalePadding, getBarWidth, isScalePaddingDefined, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, getNextColor, areArraysEqual, calculateLongestLabelWidth, useRtl, calcRequiredWidth, calcTotalWidth, calcBandwidth, calcTotalBandUnits, sortAxisCategories } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, tooltipOfAxislabels, XAxisTypes, getTypeOfAxis, formatScientificLimitWidth, getScalePadding, getBarWidth, isScalePaddingDefined, createNumericYAxis, domainRangeOfXStringAxis, createStringYAxis, getNextColor, areArraysEqual, calculateLongestLabelWidth, useRtl, calcRequiredWidth, calcTotalWidth, calcBandwidth, calcTotalBandUnits } from '../../utilities/index';
 import { CartesianChart, Legends } from '../../index';
 import { toImage } from '../../utilities/image-export-utils';
 const MIN_DOMAIN_MARGIN = 8;
@@ -12,8 +12,7 @@ const X1_INNER_PADDING = 0.1;
 const VERTICAL_BAR_GAP = 1;
 const MIN_BAR_HEIGHT = 1;
 export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
-    maxBarWidth: 24,
-    xAxisCategoryOrder: 'default'
+    maxBarWidth: 24
 }, forwardedRef)=>{
     var _props_legendProps, _props_legendProps1;
     const _tooltipId = useId('GVBCTooltipId_');
@@ -118,7 +117,7 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
     };
     const _createDataSetOfGVBC = (points)=>{
         const legends = new Set();
-        const xAxisLabels = _getOrderedXAxisLabels(points);
+        const xAxisLabels = points.map((singlePoint)=>singlePoint.name);
         points.forEach((point)=>{
             point.series.forEach((seriesPoint)=>{
                 legends.add(seriesPoint.legend);
@@ -197,30 +196,12 @@ export const GroupedVerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
             };
         })) !== null && _data_map !== void 0 ? _data_map : [];
     };
-    const _getOrderedXAxisLabels = (points)=>{
-        if (_xAxisType !== XAxisTypes.StringAxis) {
-            return [];
-        }
-        return sortAxisCategories(_mapCategoryToValues(points), props.xAxisCategoryOrder);
-    };
-    const _mapCategoryToValues = (points)=>{
-        const categoryToValues = {};
-        points.forEach((point)=>{
-            if (!categoryToValues[point.name]) {
-                categoryToValues[point.name] = [];
-            }
-            point.series.forEach((seriesPoint)=>{
-                categoryToValues[point.name].push(seriesPoint.data);
-            });
-        });
-        return categoryToValues;
-    };
     const points = _addDefaultColors(props.data);
-    const _xAxisType = getTypeOfAxis(points[0].name, true);
     const { legends, xAxisLabels, datasetForBars } = _createDataSetOfGVBC(points);
     _legends = legends;
     _xAxisLabels = xAxisLabels;
     _datasetForBars = datasetForBars;
+    const _xAxisType = getTypeOfAxis(points[0].name, true);
     const legendBars = _getLegendData(points);
     _adjustProps();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Add commentMore actions