@fluentui/react-charts 1.1.0 → 9.0.0

package/lib/components/DonutChart/DonutChart.js

@@ -0,0 +1,291 @@
+/* eslint-disable react/jsx-no-bind */ import * as React from 'react';
+import { Pie } from './Pie/index';
+import { useDonutChartStyles } from './useDonutChartStyles.styles';
+import { convertToLocaleString } from '../../utilities/locale-util';
+import { getColorFromToken, getNextColor } from '../../utilities/index';
+import { Legends } from '../../index';
+import { useId } from '@fluentui/react-utilities';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { ChartPopover } from '../CommonComponents/ChartPopover';
+const MIN_LEGEND_CONTAINER_HEIGHT = 40;
+// Create a DonutChart variant which uses these default styles and this styled subcomponent.
+/**
+ * Donutchart component.
+ * {@docCategory DonutChart}
+ */ export const DonutChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const _rootElem = React.useRef(null);
+    const _uniqText = useId('_Pie_');
+    /* eslint-disable @typescript-eslint/no-explicit-any */ let _calloutAnchorPoint;
+    let _emptyChartId;
+    const legendContainer = React.useRef(null);
+    const prevSize = React.useRef({});
+    const [value, setValue] = React.useState('');
+    const [legend, setLegend] = React.useState('');
+    const [_width, setWidth] = React.useState(props.width || 200);
+    const [_height, setHeight] = React.useState(props.height || 200);
+    const [activeLegend, setActiveLegend] = React.useState('');
+    const [color, setColor] = React.useState('');
+    const [xCalloutValue, setXCalloutValue] = React.useState('');
+    const [yCalloutValue, setYCalloutValue] = React.useState('');
+    const [selectedLegend, setSelectedLegend] = React.useState('');
+    const [focusedArcId, setFocusedArcId] = React.useState('');
+    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState();
+    const [clickPosition, setClickPosition] = React.useState({
+        x: 0,
+        y: 0
+    });
+    const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    React.useEffect(()=>{
+        _fitParentContainer();
+    }, []);
+    React.useEffect(()=>{
+        if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {
+            _fitParentContainer();
+        }
+        prevSize.current.height = props.height;
+        prevSize.current.width = props.width;
+    }, [
+        props.width,
+        props.height
+    ]);
+    React.useImperativeHandle(props.componentRef, ()=>({
+            chartContainer: _rootElem.current
+        }), []);
+    function _elevateToMinimums(data) {
+        let sumOfData = 0;
+        const minPercent = 0.01;
+        const elevatedData = [];
+        data.forEach((item)=>{
+            sumOfData += item.data;
+        });
+        data.forEach((item)=>{
+            elevatedData.push(minPercent * sumOfData > item.data && item.data > 0 ? {
+                ...item,
+                data: minPercent * sumOfData,
+                yAxisCalloutData: item.yAxisCalloutData === undefined ? item.data.toLocaleString() : item.yAxisCalloutData
+            } : item);
+        });
+        return elevatedData;
+    }
+    function _createLegends(chartData) {
+        const legendDataItems = chartData.map((point, index)=>{
+            const color = point.color;
+            // mapping data to the format Legends component needs
+            const legend = {
+                title: point.legend,
+                color,
+                action: ()=>{
+                    if (selectedLegend === point.legend) {
+                        setSelectedLegend('');
+                    } else {
+                        setSelectedLegend(point.legend);
+                    }
+                },
+                hoverAction: ()=>{
+                    _handleChartMouseLeave();
+                    setActiveLegend(point.legend);
+                },
+                onMouseOutAction: ()=>{
+                    setActiveLegend('');
+                }
+            };
+            return legend;
+        });
+        const legends = /*#__PURE__*/ React.createElement(Legends, {
+            legends: legendDataItems,
+            centerLegends: true,
+            overflowText: props.legendsOverflowText,
+            ...props.legendProps
+        });
+        return legends;
+    }
+    function _focusCallback(data, id, element) {
+        setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
+        setValue(data.data.toString());
+        setLegend(data.legend);
+        setColor(data.color);
+        setXCalloutValue(data.xAxisCalloutData);
+        setYCalloutValue(data.yAxisCalloutData);
+        setFocusedArcId(id);
+        setDataPointCalloutProps(data);
+    }
+    function _hoverCallback(data, e) {
+        if (_calloutAnchorPoint !== data) {
+            _calloutAnchorPoint = data;
+            setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
+            setValue(data.data.toString());
+            setLegend(data.legend);
+            setColor(data.color);
+            setXCalloutValue(data.xAxisCalloutData);
+            setYCalloutValue(data.yAxisCalloutData);
+            setDataPointCalloutProps(data);
+            updatePosition(e.clientX, e.clientY);
+        }
+    }
+    function _onBlur() {
+        setFocusedArcId('');
+    }
+    function _hoverLeave() {
+    /**/ }
+    function _handleChartMouseLeave() {
+        _calloutAnchorPoint = null;
+        setPopoverOpen(false);
+    }
+    function _valueInsideDonut(valueInsideDonut, data) {
+        const highlightedLegend = _getHighlightedLegend();
+        if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {
+            let legendValue = valueInsideDonut;
+            data.map((point, index)=>{
+                if (point.legend === highlightedLegend || isPopoverOpen && point.legend === legend) {
+                    legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data;
+                }
+                return;
+            });
+            return legendValue;
+        } else {
+            return valueInsideDonut;
+        }
+    }
+    function _toLocaleString(data) {
+        const localeString = convertToLocaleString(data, props.culture);
+        if (!localeString) {
+            return data;
+        }
+        return localeString === null || localeString === void 0 ? void 0 : localeString.toString();
+    }
+    /**
+     * This function returns
+     * the selected legend if there is one
+     * or the hovered legend if none of the legends is selected.
+     * Note: This won't work in case of multiple legends selection.
+     */ function _getHighlightedLegend() {
+        return selectedLegend || activeLegend;
+    }
+    function _isChartEmpty() {
+        return !(props.data && props.data.chartData && props.data.chartData.filter((d)=>d.data > 0).length > 0);
+    }
+    function _addDefaultColors(donutChartDataPoint) {
+        return donutChartDataPoint ? donutChartDataPoint.map((item, index)=>{
+            let defaultColor;
+            if (typeof item.color === 'undefined') {
+                defaultColor = getNextColor(index, 0);
+            } else {
+                defaultColor = getColorFromToken(item.color);
+            }
+            return {
+                ...item,
+                defaultColor
+            };
+        }) : [];
+    }
+    function updatePosition(newX, newY) {
+        const threshold = 1; // Set a threshold for movement
+        const { x, y } = clickPosition;
+        // Calculate the distance moved
+        const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));
+        // Update the position only if the distance moved is greater than the threshold
+        if (distance > threshold) {
+            setClickPosition({
+                x: newX,
+                y: newY
+            });
+            setPopoverOpen(true);
+        }
+    }
+    /**
+     * When screen resizes, along with screen, chart also auto adjusted.
+     * This method used to adjust height and width of the charts.
+     */ function _fitParentContainer() {
+        //_reqID = requestAnimationFrame(() => {
+        let legendContainerHeight;
+        if (props.hideLegend) {
+            // If there is no legend, need not to allocate some space from total chart space.
+            legendContainerHeight = 0;
+        } else {
+            const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);
+            legendContainerHeight = (legendContainer.current && legendContainer.current.getBoundingClientRect().height || MIN_LEGEND_CONTAINER_HEIGHT) + parseFloat(legendContainerComputedStyles && legendContainerComputedStyles.marginTop || '0') + parseFloat(legendContainerComputedStyles && legendContainerComputedStyles.marginBottom || '0');
+        }
+        if (props.parentRef || _rootElem.current) {
+            const container = props.parentRef ? props.parentRef : _rootElem.current;
+            const currentContainerWidth = container.getBoundingClientRect().width;
+            const currentContainerHeight = container.getBoundingClientRect().height > legendContainerHeight ? container.getBoundingClientRect().height : 200;
+            const shouldResize = _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;
+            if (shouldResize) {
+                setWidth(currentContainerWidth);
+                setHeight(currentContainerHeight - legendContainerHeight);
+            }
+        }
+    //});
+    }
+    const { data, hideLegend = false } = props;
+    const points = _addDefaultColors(data === null || data === void 0 ? void 0 : data.chartData);
+    const classes = useDonutChartStyles(props);
+    const legendBars = _createLegends(points);
+    const donutMarginHorizontal = props.hideLabels ? 0 : 80;
+    const donutMarginVertical = props.hideLabels ? 0 : 40;
+    const outerRadius = Math.min(_width - donutMarginHorizontal, _height - donutMarginVertical) / 2;
+    const chartData = _elevateToMinimums(points.filter((d)=>d.data >= 0));
+    const valueInsideDonut = _valueInsideDonut(props.valueInsideDonut, chartData);
+    const focusAttributes = useFocusableGroup();
+    var _props_culture;
+    return !_isChartEmpty() ? /*#__PURE__*/ React.createElement("div", {
+        className: classes.root,
+        ref: (rootElem)=>_rootElem.current = rootElem,
+        onMouseLeave: _handleChartMouseLeave
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classes.chartWrapper,
+        ...focusAttributes
+    }, /*#__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(Pie, {
+        width: _width,
+        height: _height,
+        outerRadius: outerRadius,
+        innerRadius: props.innerRadius,
+        data: chartData,
+        onFocusCallback: _focusCallback,
+        hoverOnCallback: _hoverCallback,
+        hoverLeaveCallback: _hoverLeave,
+        uniqText: _uniqText,
+        onBlurCallback: _onBlur,
+        activeArc: _getHighlightedLegend(),
+        focusedArcId: focusedArcId || '',
+        href: props.href,
+        valueInsideDonut: _toLocaleString(valueInsideDonut),
+        showLabelsInPercent: props.showLabelsInPercent,
+        hideLabels: props.hideLabels
+    }))), /*#__PURE__*/ React.createElement(ChartPopover, {
+        xCalloutValue: xCalloutValue,
+        yCalloutValue: yCalloutValue,
+        culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+        clickPosition: clickPosition,
+        isPopoverOpen: !props.hideTooltip && isPopoverOpen,
+        legend: legend,
+        YValue: value,
+        color: color,
+        isCalloutForStack: false,
+        customCallout: {
+            customizedCallout: props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : undefined,
+            customCalloutProps: props.calloutPropsPerDataPoint ? props.calloutPropsPerDataPoint(dataPointCalloutProps) : undefined
+        },
+        isCartesian: false
+    }), !hideLegend && /*#__PURE__*/ React.createElement("div", {
+        ref: (e)=>legendContainer.current = e,
+        className: classes.legendContainer
+    }, legendBars)) : /*#__PURE__*/ React.createElement("div", {
+        id: _emptyChartId,
+        role: 'alert',
+        style: {
+            opacity: '0'
+        },
+        "aria-label": 'Graph has no data to display'
+    });
+});
+DonutChart.displayName = 'DonutChart';
+DonutChart.defaultProps = {
+    innerRadius: 0,
+    hideLabels: true
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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 { convertToLocaleString } from '../../utilities/locale-util';\nimport { getColorFromToken, getNextColor } from '../../utilities/index';\nimport { Legend, Legends } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\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\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      }),\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[]): JSX.Element {\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        />\n      );\n      return legends;\n    }\n\n    function _focusCallback(data: ChartDataPoint, id: string, element: SVGPathElement): void {\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 = convertToLocaleString(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 = _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","convertToLocaleString","getColorFromToken","getNextColor","Legends","useId","useFocusableGroup","ChartPopover","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","useEffect","_fitParentContainer","current","useImperativeHandle","componentRef","chartContainer","_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","_focusCallback","id","element","toString","xAxisCalloutData","_hoverCallback","e","updatePosition","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","getBoundingClientRect","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","chartWrapper","svg","chart","aria-label","chartTitle","innerRadius","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["DonutChart.types.ts"],"sourcesContent":["import * as React from 'react';\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) => JSX.Element | 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/**\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"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/DonutChart/Pie/Pie.js

@@ -0,0 +1,72 @@
+/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react/jsx-no-bind */ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react';
+import { pie as d3Pie } from 'd3-shape';
+import { Arc } from '../Arc/index';
+import { usePieStyles } from './usePieStyles.styles';
+import { wrapTextInsideDonut } from '../../../utilities/index';
+const TEXT_PADDING = 5;
+// Create a Pie within Donut Chart variant which uses these default styles and this styled subcomponent.
+/**
+ * Pie component within Donut Chart.
+ * {@docCategory PieDonutChart}
+ */ export const Pie = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    React.useEffect(()=>{
+        wrapTextInsideDonut(classes.insideDonutString, props.innerRadius * 2 - TEXT_PADDING);
+    }, []);
+    let _totalValue;
+    const classes = usePieStyles(props);
+    const pieForFocusRing = d3Pie().sort(null)// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    .value((d)=>d.data).padAngle(0);
+    function _focusCallback(data, id, e) {
+        props.onFocusCallback(data, id, e);
+    }
+    function _hoverCallback(data, e) {
+        props.hoverOnCallback(data, e);
+    }
+    function _computeTotalValue() {
+        let totalValue = 0;
+        props.data.forEach((arc)=>{
+            totalValue += arc.data;
+        });
+        return totalValue;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function arcGenerator(d, i, focusData, href) {
+        const color = d && d.data && d.data.color;
+        return /*#__PURE__*/ React.createElement(Arc, {
+            key: i,
+            data: d,
+            focusData: focusData,
+            innerRadius: props.innerRadius,
+            outerRadius: props.outerRadius,
+            color: color,
+            onFocusCallback: _focusCallback,
+            hoverOnCallback: _hoverCallback,
+            onBlurCallback: props.onBlurCallback,
+            hoverLeaveCallback: props.hoverLeaveCallback,
+            uniqText: props.uniqText,
+            activeArc: props.activeArc,
+            href: href,
+            calloutId: props.calloutId,
+            valueInsideDonut: props.valueInsideDonut,
+            focusedArcId: props.focusedArcId,
+            showLabelsInPercent: props.showLabelsInPercent,
+            totalValue: _totalValue,
+            hideLabels: props.hideLabels
+        });
+    }
+    const { data } = props;
+    const focusData = pieForFocusRing(data.map((d)=>d.data));
+    const piechart = d3Pie().sort(null)// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    .value((d)=>d.data).padAngle(0.02)(data);
+    const translate = `translate(${props.width / 2}, ${props.height / 2})`;
+    _totalValue = _computeTotalValue();
+    return /*#__PURE__*/ React.createElement("g", {
+        transform: translate
+    }, piechart.map((d, i)=>arcGenerator(d, i, focusData[i], props.href)), props.valueInsideDonut && /*#__PURE__*/ React.createElement("text", {
+        y: 5,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        className: classes.insideDonutString
+    }, props.valueInsideDonut));
+});
+Pie.displayName = 'Pie';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Pie.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/jsx-no-bind */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { pie as d3Pie } from 'd3-shape';\nimport { PieProps } from './index';\nimport { Arc } from '../Arc/index';\nimport { ChartDataPoint } from '../index';\nimport { usePieStyles } from './usePieStyles.styles';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\nconst TEXT_PADDING: number = 5;\n\n// Create a Pie within Donut Chart variant which uses these default styles and this styled subcomponent.\n/**\n * Pie component within Donut Chart.\n * {@docCategory PieDonutChart}\n */\nexport const Pie: React.FunctionComponent<PieProps> = React.forwardRef<HTMLDivElement, PieProps>(\n  (props, forwardedRef) => {\n    React.useEffect(() => {\n      wrapTextInsideDonut(classes.insideDonutString, props.innerRadius! * 2 - TEXT_PADDING);\n    }, []);\n\n    let _totalValue: number;\n    const classes = usePieStyles(props);\n    const pieForFocusRing = d3Pie()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0);\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: SVGPathElement): void {\n      props.onFocusCallback!(data, id, e);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      props.hoverOnCallback!(data, e);\n    }\n\n    function _computeTotalValue() {\n      let totalValue = 0;\n      props.data.forEach((arc: ChartDataPoint) => {\n        totalValue += arc.data!;\n      });\n      return totalValue;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function arcGenerator(d: any, i: number, focusData: any, href?: string): JSX.Element {\n      const color = d && d.data && d.data.color;\n      return (\n        <Arc\n          key={i}\n          data={d}\n          focusData={focusData}\n          innerRadius={props.innerRadius}\n          outerRadius={props.outerRadius}\n          color={color!}\n          onFocusCallback={_focusCallback}\n          hoverOnCallback={_hoverCallback}\n          onBlurCallback={props.onBlurCallback}\n          hoverLeaveCallback={props.hoverLeaveCallback}\n          uniqText={props.uniqText}\n          activeArc={props.activeArc}\n          href={href}\n          calloutId={props.calloutId}\n          valueInsideDonut={props.valueInsideDonut}\n          focusedArcId={props.focusedArcId}\n          showLabelsInPercent={props.showLabelsInPercent}\n          totalValue={_totalValue}\n          hideLabels={props.hideLabels}\n        />\n      );\n    }\n\n    const { data } = props;\n    const focusData = pieForFocusRing(data.map(d => d.data!));\n\n    const piechart = d3Pie<ChartDataPoint>()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0.02)(data);\n    const translate = `translate(${props.width / 2}, ${props.height / 2})`;\n\n    _totalValue = _computeTotalValue();\n\n    return (\n      <g transform={translate}>\n        {piechart.map((d: any, i: number) => arcGenerator(d, i, focusData[i], props.href))}\n        {props.valueInsideDonut && (\n          <text y={5} textAnchor=\"middle\" dominantBaseline=\"middle\" className={classes.insideDonutString}>\n            {props.valueInsideDonut}\n          </text>\n        )}\n      </g>\n    );\n  },\n);\nPie.displayName = 'Pie';\n"],"names":["React","pie","d3Pie","Arc","usePieStyles","wrapTextInsideDonut","TEXT_PADDING","Pie","forwardRef","props","forwardedRef","useEffect","classes","insideDonutString","innerRadius","_totalValue","pieForFocusRing","sort","value","d","data","padAngle","_focusCallback","id","e","onFocusCallback","_hoverCallback","hoverOnCallback","_computeTotalValue","totalValue","forEach","arc","arcGenerator","i","focusData","href","color","key","outerRadius","onBlurCallback","hoverLeaveCallback","uniqText","activeArc","calloutId","valueInsideDonut","focusedArcId","showLabelsInPercent","hideLabels","map","piechart","translate","width","height","g","transform","text","y","textAnchor","dominantBaseline","className","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,8CAA8C,GAC9C,oCAAoC,GACpC,qDAAqD,GACrD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAOC,KAAK,QAAQ,WAAW;AAExC,SAASC,GAAG,QAAQ,eAAe;AAEnC,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,MAAMC,eAAuB;AAE7B,wGAAwG;AACxG;;;CAGC,GACD,OAAO,MAAMC,oBAAyCP,MAAMQ,UAAU,CACpE,CAACC,OAAOC;IACNV,MAAMW,SAAS,CAAC;QACdN,oBAAoBO,QAAQC,iBAAiB,EAAEJ,MAAMK,WAAW,GAAI,IAAIR;IAC1E,GAAG,EAAE;IAEL,IAAIS;IACJ,MAAMH,UAAUR,aAAaK;IAC7B,MAAMO,kBAAkBd,QACrBe,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC;IAEZ,SAASC,eAAeF,IAAoB,EAAEG,EAAU,EAAEC,CAAiB;QACzEf,MAAMgB,eAAe,CAAEL,MAAMG,IAAIC;IACnC;IAEA,SAASE,eAAeN,IAAoB,EAAEI,CAAmC;QAC/Ef,MAAMkB,eAAe,CAAEP,MAAMI;IAC/B;IAEA,SAASI;QACP,IAAIC,aAAa;QACjBpB,MAAMW,IAAI,CAACU,OAAO,CAAC,CAACC;YAClBF,cAAcE,IAAIX,IAAI;QACxB;QACA,OAAOS;IACT;IAEA,8DAA8D;IAC9D,SAASG,aAAab,CAAM,EAAEc,CAAS,EAAEC,SAAc,EAAEC,IAAa;QACpE,MAAMC,QAAQjB,KAAKA,EAAEC,IAAI,IAAID,EAAEC,IAAI,CAACgB,KAAK;QACzC,qBACE,oBAACjC;YACCkC,KAAKJ;YACLb,MAAMD;YACNe,WAAWA;YACXpB,aAAaL,MAAMK,WAAW;YAC9BwB,aAAa7B,MAAM6B,WAAW;YAC9BF,OAAOA;YACPX,iBAAiBH;YACjBK,iBAAiBD;YACjBa,gBAAgB9B,MAAM8B,cAAc;YACpCC,oBAAoB/B,MAAM+B,kBAAkB;YAC5CC,UAAUhC,MAAMgC,QAAQ;YACxBC,WAAWjC,MAAMiC,SAAS;YAC1BP,MAAMA;YACNQ,WAAWlC,MAAMkC,SAAS;YAC1BC,kBAAkBnC,MAAMmC,gBAAgB;YACxCC,cAAcpC,MAAMoC,YAAY;YAChCC,qBAAqBrC,MAAMqC,mBAAmB;YAC9CjB,YAAYd;YACZgC,YAAYtC,MAAMsC,UAAU;;IAGlC;IAEA,MAAM,EAAE3B,IAAI,EAAE,GAAGX;IACjB,MAAMyB,YAAYlB,gBAAgBI,KAAK4B,GAAG,CAAC7B,CAAAA,IAAKA,EAAEC,IAAI;IAEtD,MAAM6B,WAAW/C,QACde,IAAI,CAAC,KACN,8DAA8D;KAC7DC,KAAK,CAAC,CAACC,IAAWA,EAAEC,IAAI,EACxBC,QAAQ,CAAC,MAAMD;IAClB,MAAM8B,YAAY,CAAC,UAAU,EAAEzC,MAAM0C,KAAK,GAAG,EAAE,EAAE,EAAE1C,MAAM2C,MAAM,GAAG,EAAE,CAAC,CAAC;IAEtErC,cAAca;IAEd,qBACE,oBAACyB;QAAEC,WAAWJ;OACXD,SAASD,GAAG,CAAC,CAAC7B,GAAQc,IAAcD,aAAab,GAAGc,GAAGC,SAAS,CAACD,EAAE,EAAExB,MAAM0B,IAAI,IAC/E1B,MAAMmC,gBAAgB,kBACrB,oBAACW;QAAKC,GAAG;QAAGC,YAAW;QAASC,kBAAiB;QAASC,WAAW/C,QAAQC,iBAAiB;OAC3FJ,MAAMmC,gBAAgB;AAKjC,GACA;AACFrC,IAAIqD,WAAW,GAAG"}

package/lib/components/DonutChart/Pie/Pie.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Pie.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\n\nexport interface PieProps {\n  /**\n   * Width of the Pie.\n   */\n  width: number;\n  /**\n   * Height of the Pie.\n   */\n  height: number;\n  /**\n   * outerRadius of the Pie.\n   */\n  outerRadius: number;\n  /**\n   * innerRadius of the Pie.\n   */\n  innerRadius: number;\n  /**\n   * Data to render in the Pie.\n   */\n  data: ChartDataPoint[];\n  /**\n   * shape for pie.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  pie?: any;\n\n  pieForFocusRing?: any;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: PieStyles;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n}\n\nexport interface PieStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: string;\n\n  /**\n   * Style set for the inside donut string\n   */\n  insideDonutString: string;\n}\n"],"names":[],"rangeMappings":"","mappings":"AAiGA,WAUC"}

package/lib/components/DonutChart/Pie/index.js

@@ -0,0 +1,2 @@
+export * from './Pie';
+export * from './Pie.types';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Pie';\nexport * from './Pie.types';\n"],"names":[],"rangeMappings":";","mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,cAAc"}

package/lib/components/DonutChart/Pie/usePieStyles.styles.js

@@ -0,0 +1,44 @@
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { HighContrastSelectorBlack } from '../../../utilities/index';
+import { __styles, mergeClasses } from '@griffel/react';
+/**
+ * @internal
+ */
+export const donutPieClassNames = {
+  root: 'fui-donut-pie__root',
+  insideDonutString: 'fui-donut-pie__insideDonutString'
+};
+/**
+ * Base Styles
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {},
+  insideDonutString: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fojgt09",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcen8rp",
+    Bkfmm31: "fhuob2q",
+    Bcjfw9x: "fy323tu"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"],
+  m: [["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.fy323tu{fill:rgb(179, 179, 179);}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }]]
+});
+/**
+ * Apply styling to the Pie inside donut chart component
+ */
+export const usePieStyles = props => {
+  var _props_styles, _props_styles1;
+  const {
+    className
+  } = props;
+  const baseStyles = useStyles();
+  return {
+    root: mergeClasses(donutPieClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+    insideDonutString: mergeClasses(donutPieClassNames.insideDonutString, baseStyles.insideDonutString, className, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.insideDonutString)
+  };
+};
+//# sourceMappingURL=usePieStyles.styles.js.map

package/lib/components/DonutChart/Pie/usePieStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","typographyStyles","HighContrastSelectorBlack","__styles","mergeClasses","donutPieClassNames","root","insideDonutString","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkfmm31","Bcjfw9x","d","m","usePieStyles","props","_props_styles","_props_styles1","className","baseStyles","styles"],"sources":["usePieStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelectorBlack } from '../../../utilities/index';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * @internal\n */ export const donutPieClassNames = {\n    root: 'fui-donut-pie__root',\n    insideDonutString: 'fui-donut-pie__insideDonutString'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {},\n    insideDonutString: {\n        ...typographyStyles.title2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelectorBlack]: {\n            fill: 'rgb(179, 179, 179)'\n        }\n    }\n});\n/**\n * Apply styling to the Pie inside donut chart component\n */ export const usePieStyles = (props)=>{\n    var _props_styles, _props_styles1;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutPieClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        insideDonutString: mergeClasses(donutPieClassNames.insideDonutString, baseStyles.insideDonutString, className, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.insideDonutString)\n    };\n};\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,yBAAyB,QAAQ,0BAA0B;AACpE,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAG;EAClCC,IAAI,EAAE,qBAAqB;EAC3BC,iBAAiB,EAAE;AACvB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;EAAAC,iBAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,YAAY,GAAIC,KAAK,IAAG;EACrC,IAAIC,aAAa,EAAEC,cAAc;EACjC,MAAM;IAAEC;EAAU,CAAC,GAAGH,KAAK;EAC3B,MAAMI,UAAU,GAAGd,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHF,IAAI,EAAEF,YAAY,CAACC,kBAAkB,CAACC,IAAI,EAAEgB,UAAU,CAAChB,IAAI,EAAEe,SAAS,EAAE,CAACF,aAAa,GAAGD,KAAK,CAACK,MAAM,MAAM,IAAI,IAAIJ,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACb,IAAI,CAAC;IAC1KC,iBAAiB,EAAEH,YAAY,CAACC,kBAAkB,CAACE,iBAAiB,EAAEe,UAAU,CAACf,iBAAiB,EAAEc,SAAS,EAAE,CAACD,cAAc,GAAGF,KAAK,CAACK,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACb,iBAAiB;EACpO,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/DonutChart/index.js

@@ -0,0 +1,3 @@
+export * from './DonutChart';
+export * from './DonutChart.types';
+export * from '../../types/index';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DonutChart';\nexport * from './DonutChart.types';\nexport * from '../../types/index';\n"],"names":[],"rangeMappings":";;","mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,oBAAoB"}

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

@@ -0,0 +1,58 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+/**
+ * @internal
+ */
+export const donutClassNames = {
+  root: 'fui-donut__root',
+  chart: 'fui-donut__chart',
+  legendContainer: 'fui-donut__legendContainer',
+  chartWrapper: 'fui-donut__chartWrapper'
+};
+/**
+ * Base Styles
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    a9b677: "fly5x3f",
+    Bqenvij: "f1l02sjl"
+  },
+  chart: {
+    B7ck84d: "f1e4lqlz",
+    ek0pe7: "fzm18in",
+    mc9l5x: "ftgm304",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1gl81tg"
+  },
+  legendContainer: {
+    z8tnut: "fikn0iw"
+  }
+}, {
+  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);}"]
+});
+/**
+ * Apply styling to the DonutChart component
+ */
+export const useDonutChartStyles = props => {
+  var _props_styles, _props_styles1, _props_styles2;
+  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: donutClassNames.chartWrapper
+  };
+};
+//# sourceMappingURL=useDonutChartStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"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","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    }\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2;\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: donutClassNames.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;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAkBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc;EACjD,MAAM;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAGvB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHJ,IAAI,EAAEJ,YAAY,CAACG,eAAe,CAACC,IAAI,EAAE2B,UAAU,CAAC3B,IAAI,EAAE0B,SAAS,EAAE,CAACH,aAAa,GAAGD,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACvB,IAAI,CAAC;IACvKC,KAAK,EAAEL,YAAY,CAACG,eAAe,CAACE,KAAK,EAAE0B,UAAU,CAAC1B,KAAK,EAAE,CAACuB,cAAc,GAAGF,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACvB,KAAK,CAAC;IACnKC,eAAe,EAAEN,YAAY,CAACG,eAAe,CAACG,eAAe,EAAEyB,UAAU,CAACzB,eAAe,EAAE,CAACuB,cAAc,GAAGH,KAAK,CAACM,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACvB,eAAe,CAAC;IAC3MC,YAAY,EAAEJ,eAAe,CAACI;EAClC,CAAC;AACL,CAAC","ignoreList":[]}