@fluentui/react-charting 5.23.63 → 5.23.65

package/lib-amd/components/DonutChart/DonutChart.base.js

@@ -0,0 +1,296 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "../../index", "./Pie/index", "../../utilities/index", "../../utilities/locale-util", "../../utilities/image-export-utils"], function (require, exports, tslib_1, React, Utilities_1, Callout_1, react_focus_1, index_1, index_2, index_3, locale_util_1, image_export_utils_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DonutChartBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var LEGEND_CONTAINER_HEIGHT = 40;
+    var DonutChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(DonutChartBase, _super);
+        function DonutChartBase(props) {
+            var _a;
+            var _this = _super.call(this, props) || this;
+            _this.toImage = function (opts) {
+                var _a;
+                return (0, image_export_utils_1.toImage)(_this._rootElem, (_a = _this._legendsRef.current) === null || _a === void 0 ? void 0 : _a.toSVG, (0, Utilities_1.getRTL)(), opts);
+            };
+            _this._closeCallout = function () {
+                _this.setState({
+                    showHover: false,
+                });
+            };
+            _this._focusCallback = function (data, id, element) {
+                _this._currentHoverElement = element;
+                _this.setState({
+                    /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */
+                    showHover: _this._noLegendsHighlighted() || _this._isLegendHighlighted(data.legend),
+                    value: data.data.toString(),
+                    legend: data.legend,
+                    color: data.color,
+                    xCalloutValue: data.xAxisCalloutData,
+                    yCalloutValue: data.yAxisCalloutData,
+                    focusedArcId: id,
+                    dataPointCalloutProps: data,
+                    callOutAccessibilityData: data.callOutAccessibilityData,
+                });
+            };
+            _this._hoverCallback = function (data, e) {
+                var _a, _b, _c, _d;
+                if (_this._calloutAnchorPoint !== data) {
+                    _this._calloutAnchorPoint = data;
+                    _this._currentHoverElement = e;
+                    var color = data.color;
+                    if (_this.props.enableGradient) {
+                        var pointIndex = Math.max(((_b = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.chartData) === null || _b === void 0 ? void 0 : _b.findIndex(function (item) { return item.legend === data.legend; })) || 0, 0);
+                        color = ((_c = data.gradient) === null || _c === void 0 ? void 0 : _c[0]) || (0, index_3.getNextGradient)(pointIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
+                    }
+                    _this.setState({
+                        /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */
+                        showHover: _this._noLegendsHighlighted() || _this._isLegendHighlighted(data.legend),
+                        value: data.data.toString(),
+                        legend: data.legend,
+                        color: color,
+                        xCalloutValue: data.xAxisCalloutData,
+                        yCalloutValue: data.yAxisCalloutData,
+                        dataPointCalloutProps: data,
+                        callOutAccessibilityData: data.callOutAccessibilityData,
+                    });
+                }
+            };
+            _this._onBlur = function () {
+                _this.setState({ focusedArcId: '' });
+            };
+            _this._handleChartMouseLeave = function () {
+                _this._calloutAnchorPoint = null;
+                _this.setState({ showHover: false });
+            };
+            _this._isLegendHighlighted = function (legend) {
+                return _this._getHighlightedLegend().includes(legend);
+            };
+            _this._noLegendsHighlighted = function () {
+                return _this._getHighlightedLegend().length === 0;
+            };
+            _this._addDefaultColors = function (donutChartDataPoint) {
+                return donutChartDataPoint
+                    ? donutChartDataPoint.map(function (item, index) {
+                        var _a, _b;
+                        var color;
+                        // isInverted property is applicable to v8 themes only
+                        if (typeof item.color === 'undefined') {
+                            color = (0, index_3.getNextColor)(index, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                        }
+                        else {
+                            color = (0, index_3.getColorFromToken)(item.color, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                        }
+                        return tslib_1.__assign(tslib_1.__assign({}, item), { color: color });
+                    })
+                    : [];
+            };
+            (0, Utilities_1.initializeComponentRef)(_this);
+            _this.state = {
+                showHover: false,
+                value: '',
+                legend: '',
+                _width: _this.props.width || 200,
+                _height: _this.props.height || 200,
+                activeLegend: undefined,
+                color: '',
+                xCalloutValue: '',
+                yCalloutValue: '',
+                focusedArcId: '',
+                selectedLegends: ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || [],
+            };
+            _this._hoverCallback = _this._hoverCallback.bind(_this);
+            _this._focusCallback = _this._focusCallback.bind(_this);
+            _this._hoverLeave = _this._hoverLeave.bind(_this);
+            _this._calloutId = (0, Utilities_1.getId)('callout');
+            _this._uniqText = (0, Utilities_1.getId)('_Pie_');
+            _this._emptyChartId = (0, Utilities_1.getId)('_DonutChart_empty');
+            _this._legendsRef = React.createRef();
+            return _this;
+        }
+        DonutChartBase.getDerivedStateFromProps = function (nextProps, prevState) {
+            var widthState;
+            if (nextProps.width && nextProps.width !== prevState._width) {
+                widthState = { _width: nextProps.width };
+            }
+            var heightState;
+            if (nextProps.height && nextProps.height !== prevState._height) {
+                heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };
+            }
+            return tslib_1.__assign(tslib_1.__assign({}, widthState), heightState);
+        };
+        DonutChartBase.prototype.componentDidMount = function () {
+            if (this._rootElem) {
+                this.setState({
+                    _width: this._rootElem.offsetWidth,
+                    _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,
+                });
+            }
+        };
+        DonutChartBase.prototype.componentDidUpdate = function (prevProps) {
+            var _a, _b, _c;
+            if (!(0, index_3.areArraysEqual)((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
+                this.setState({
+                    selectedLegends: ((_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || [],
+                });
+            }
+        };
+        DonutChartBase.prototype.render = function () {
+            var _this = this;
+            var _a = this.props, data = _a.data, _b = _a.hideLegend, hideLegend = _b === void 0 ? false : _b;
+            var points = this._addDefaultColors(data === null || data === void 0 ? void 0 : data.chartData);
+            this._classNames = getClassNames(this.props.styles, {
+                theme: this.props.theme,
+                width: this.state._width,
+                height: this.state._height,
+                color: this.state.color,
+                className: this.props.className,
+            });
+            var legendBars = this._createLegends(points);
+            var donutMarginHorizontal = this.props.hideLabels ? 0 : 80;
+            var donutMarginVertical = this.props.hideLabels ? 0 : 40;
+            var outerRadius = Math.min(this.state._width - donutMarginHorizontal, this.state._height - donutMarginVertical) / 2;
+            var chartData = this._elevateToMinimums(points.filter(function (d) { return d.data >= 0; }));
+            var valueInsideDonut = this.props.innerRadius !== 0 ? this._valueInsideDonut(this.props.valueInsideDonut, chartData) : '';
+            return !this._isChartEmpty() ? (React.createElement("div", { className: this._classNames.root, ref: function (rootElem) { return (_this._rootElem = rootElem); }, onMouseLeave: this._handleChartMouseLeave },
+                React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, handleTabKey: react_focus_1.FocusZoneTabbableElements.all },
+                    React.createElement("div", null,
+                        React.createElement("svg", { className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle, ref: function (node) { return _this._setViewBox(node); } },
+                            React.createElement(index_2.Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, enableGradient: this.props.enableGradient, roundCorners: this.props.roundCorners, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels })))),
+                React.createElement(Callout_1.Callout, tslib_1.__assign({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: Callout_1.DirectionalHint.topAutoEdge, gapSpace: 15, hidden: !(!this.props.hideTooltip && this.state.showHover), id: this._calloutId, onDismiss: this._closeCallout, 
+                    // eslint-disable-next-line @typescript-eslint/no-deprecated
+                    preventDismissOnLostFocus: true, 
+                    /** Keep the callout updated with details of focused/hovered arc */
+                    shouldUpdateWhenHidden: true }, this.props.calloutProps, (0, index_3.getAccessibleDataObject)(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(index_1.ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value, color: this.state.color, culture: this.props.culture }))),
+                !hideLegend && React.createElement("div", { className: this._classNames.legendContainer }, legendBars))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+        };
+        Object.defineProperty(DonutChartBase.prototype, "chartContainer", {
+            get: function () {
+                return this._rootElem;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DonutChartBase.prototype._elevateToMinimums = function (data) {
+            var sumOfData = 0;
+            var minPercent = 0.01;
+            var elevatedData = [];
+            data.forEach(function (item) {
+                sumOfData += item.data;
+            });
+            data.forEach(function (item) {
+                elevatedData.push(minPercent * sumOfData > item.data && item.data > 0
+                    ? tslib_1.__assign(tslib_1.__assign({}, item), { data: minPercent * sumOfData, yAxisCalloutData: item.yAxisCalloutData === undefined ? item.data.toLocaleString() : item.yAxisCalloutData }) : item);
+            });
+            return elevatedData;
+        };
+        DonutChartBase.prototype._setViewBox = function (node) {
+            var _a, _b;
+            if (node === null) {
+                return;
+            }
+            var widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;
+            var heightVal = node.parentElement && ((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) > this.state._height
+                ? (_b = node.parentElement) === null || _b === void 0 ? void 0 : _b.offsetHeight
+                : this.state._height;
+            var viewbox = "0 0 ".concat(widthVal, " ").concat(heightVal);
+            node.setAttribute('viewBox', viewbox);
+        };
+        DonutChartBase.prototype._createLegends = function (chartData) {
+            var _this = this;
+            var legendDataItems = chartData.map(function (point, index) {
+                var _a, _b;
+                var color = _this.props.enableGradient
+                    ? ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || (0, index_3.getNextGradient)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0]
+                    : point.color;
+                // mapping data to the format Legends component needs
+                var legend = {
+                    title: point.legend,
+                    color: color,
+                    hoverAction: function () {
+                        _this._handleChartMouseLeave();
+                        _this.setState({ activeLegend: point.legend });
+                    },
+                    onMouseOutAction: function () {
+                        _this.setState({ activeLegend: undefined });
+                    },
+                };
+                return legend;
+            });
+            var legends = (React.createElement(index_1.Legends, tslib_1.__assign({ legends: legendDataItems, centerLegends: true, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, this.props.legendProps, { 
+                // eslint-disable-next-line react/jsx-no-bind
+                onChange: this._onLegendSelectionChange.bind(this), ref: this._legendsRef })));
+            return legends;
+        };
+        DonutChartBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {
+            var _a, _b;
+            if (this.props.legendProps && ((_a = this.props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends)) {
+                this.setState({ selectedLegends: selectedLegends });
+            }
+            else {
+                this.setState({ selectedLegends: selectedLegends.slice(-1) });
+            }
+            if ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
+                this.props.legendProps.onChange(selectedLegends, event, currentLegend);
+            }
+        };
+        DonutChartBase.prototype._hoverLeave = function () {
+            /**/
+        };
+        DonutChartBase.prototype._valueInsideDonut = function (valueInsideDonut, data) {
+            var _this = this;
+            var highlightedLegends = this._getHighlightedLegend();
+            if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || this.state.showHover)) {
+                var pointValue = data.find(function (point) { return _this._isLegendHighlighted(point.legend); });
+                return pointValue
+                    ? pointValue.yAxisCalloutData
+                        ? pointValue.yAxisCalloutData
+                        : pointValue.data
+                    : valueInsideDonut;
+            }
+            else if (highlightedLegends.length > 0) {
+                var totalValue_1 = 0;
+                data.forEach(function (point) {
+                    if (highlightedLegends.includes(point.legend)) {
+                        totalValue_1 += point.data;
+                    }
+                });
+                return totalValue_1;
+            }
+            else {
+                return valueInsideDonut;
+            }
+        };
+        DonutChartBase.prototype._toLocaleString = function (data) {
+            var localeString = (0, locale_util_1.convertToLocaleString)(data, this.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.
+         */
+        DonutChartBase.prototype._getHighlightedLegend = function () {
+            return this.state.selectedLegends.length > 0
+                ? this.state.selectedLegends
+                : this.state.activeLegend
+                    ? [this.state.activeLegend]
+                    : [];
+        };
+        DonutChartBase.prototype._isChartEmpty = function () {
+            return !(this.props.data &&
+                this.props.data.chartData &&
+                this.props.data.chartData.filter(function (d) { return d.data > 0; }).length > 0);
+        };
+        DonutChartBase.defaultProps = {
+            innerRadius: 0,
+            hideLabels: true,
+        };
+        return DonutChartBase;
+    }(React.Component));
+    exports.DonutChartBase = DonutChartBase;
+});
+//# sourceMappingURL=DonutChart.base.js.map

package/lib-amd/components/DonutChart/DonutChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":";;;;IAqBA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAA4C,CAAC;IACrF,IAAM,uBAAuB,GAAG,EAAE,CAAC;IAkBnC;QAAoC,0CAAmD;QAiCrF,wBAAY,KAAuB;;YACjC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YAgJR,aAAO,GAAG,UAAC,IAA0B;;gBAC1C,OAAO,IAAA,4BAAO,EAAC,KAAI,CAAC,SAAS,EAAE,MAAA,KAAI,CAAC,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,IAAA,kBAAM,GAAE,EAAE,IAAI,CAAC,CAAC;YAClF,CAAC,CAAC;YAEM,mBAAa,GAAG;gBACtB,KAAI,CAAC,QAAQ,CAAC;oBACZ,SAAS,EAAE,KAAK;iBACjB,CAAC,CAAC;YACL,CAAC,CAAC;YA0FM,oBAAc,GAAG,UAAC,IAAqB,EAAE,EAAU,EAAE,OAAuB;gBAClF,KAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;gBACpC,KAAI,CAAC,QAAQ,CAAC;oBACZ,iGAAiG;oBACjG,SAAS,EAAE,KAAI,CAAC,qBAAqB,EAAE,IAAI,KAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC;oBACjF,KAAK,EAAE,IAAI,CAAC,IAAK,CAAC,QAAQ,EAAE;oBAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,KAAK,EAAE,IAAI,CAAC,KAAM;oBAClB,aAAa,EAAE,IAAI,CAAC,gBAAiB;oBACrC,aAAa,EAAE,IAAI,CAAC,gBAAiB;oBACrC,YAAY,EAAE,EAAE;oBAChB,qBAAqB,EAAE,IAAI;oBAC3B,wBAAwB,EAAE,IAAI,CAAC,wBAAyB;iBACzD,CAAC,CAAC;YACL,CAAC,CAAC;YAEM,oBAAc,GAAG,UAAC,IAAqB,EAAE,CAAmC;;gBAClF,IAAI,KAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE,CAAC;oBACtC,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;oBAChC,KAAI,CAAC,oBAAoB,GAAG,CAAC,CAAC;oBAC9B,IAAI,KAAK,GAAW,IAAI,CAAC,KAAM,CAAC;oBAEhC,IAAI,KAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;wBAC9B,IAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA,MAAA,MAAA,KAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,SAAS,0CAAE,SAAS,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAA3B,CAA2B,CAAC,KAAI,CAAC,EAAE,CAAC,CAAC,CAAC;wBAChH,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAG,CAAC,CAAC,KAAI,IAAA,uBAAe,EAAC,UAAU,EAAE,CAAC,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;oBAChG,CAAC;oBAED,KAAI,CAAC,QAAQ,CAAC;wBACZ,iGAAiG;wBACjG,SAAS,EAAE,KAAI,CAAC,qBAAqB,EAAE,IAAI,KAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC;wBACjF,KAAK,EAAE,IAAI,CAAC,IAAK,CAAC,QAAQ,EAAE;wBAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,KAAK,OAAA;wBACL,aAAa,EAAE,IAAI,CAAC,gBAAiB;wBACrC,aAAa,EAAE,IAAI,CAAC,gBAAiB;wBACrC,qBAAqB,EAAE,IAAI;wBAC3B,wBAAwB,EAAE,IAAI,CAAC,wBAAyB;qBACzD,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC;YACM,aAAO,GAAG;gBAChB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;YACtC,CAAC,CAAC;YAMM,4BAAsB,GAAG;gBAC/B,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAChC,KAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;YACtC,CAAC,CAAC;YA6CM,0BAAoB,GAAG,UAAC,MAA0B;gBACxD,OAAO,KAAI,CAAC,qBAAqB,EAAE,CAAC,QAAQ,CAAC,MAAO,CAAC,CAAC;YACxD,CAAC,CAAC;YAEM,2BAAqB,GAAG;gBAC9B,OAAO,KAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;YACnD,CAAC,CAAC;YAUM,uBAAiB,GAAG,UAAC,mBAAuC;gBAClE,OAAO,mBAAmB;oBACxB,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;;wBAClC,IAAI,KAAa,CAAC;wBAClB,sDAAsD;wBACtD,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;4BACtC,KAAK,GAAG,IAAA,oBAAY,EAAC,KAAK,EAAE,CAAC,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,UAAU,CAAC,CAAC;wBAC/D,CAAC;6BAAM,CAAC;4BACN,KAAK,GAAG,IAAA,yBAAiB,EAAC,IAAI,CAAC,KAAK,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,UAAU,CAAC,CAAC;wBACtE,CAAC;wBAED,6CAAY,IAAI,KAAE,KAAK,OAAA,IAAG;oBAC5B,CAAC,CAAC;oBACJ,CAAC,CAAC,EAAE,CAAC;YACT,CAAC,CAAC;YA9WA,IAAA,kCAAsB,EAAC,KAAI,CAAC,CAAC;YAE7B,KAAI,CAAC,KAAK,GAAG;gBACX,SAAS,EAAE,KAAK;gBAChB,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,IAAI,GAAG;gBAC/B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,MAAM,IAAI,GAAG;gBACjC,YAAY,EAAE,SAAS;gBACvB,KAAK,EAAE,EAAE;gBACT,aAAa,EAAE,EAAE;gBACjB,aAAa,EAAE,EAAE;gBACjB,YAAY,EAAE,EAAE;gBAChB,eAAe,EAAE,CAAA,MAAA,KAAK,CAAC,WAAW,0CAAE,eAAe,KAAI,EAAE;aAC1D,CAAC;YACF,KAAI,CAAC,cAAc,GAAG,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;YACrD,KAAI,CAAC,cAAc,GAAG,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;YACrD,KAAI,CAAC,WAAW,GAAG,KAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;YAC/C,KAAI,CAAC,UAAU,GAAG,IAAA,iBAAK,EAAC,SAAS,CAAC,CAAC;YACnC,KAAI,CAAC,SAAS,GAAG,IAAA,iBAAK,EAAC,OAAO,CAAC,CAAC;YAChC,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,mBAAmB,CAAC,CAAC;YAChD,KAAI,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;;QACvC,CAAC;QA1Ca,uCAAwB,GAAtC,UACE,SAAqC,EACrC,SAAqC;YAErC,IAAI,UAA0C,CAAC;YAC/C,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;gBAC5D,UAAU,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;YAC3C,CAAC;YAED,IAAI,WAA4C,CAAC;YACjD,IAAI,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,OAAO,EAAE,CAAC;gBAC/D,WAAW,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,GAAG,uBAAuB,EAAE,CAAC;YACxE,CAAC;YAED,6CAAY,UAAU,GAAK,WAAW,EAAG;QAC3C,CAAC;QA6BM,0CAAiB,GAAxB;YACE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,CAAC;oBACZ,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW;oBAClC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,uBAAuB;iBAC/D,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAEM,2CAAkB,GAAzB,UAA0B,SAA2B;;YACnD,IAAI,CAAC,IAAA,sBAAc,EAAC,MAAA,SAAS,CAAC,WAAW,0CAAE,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,0CAAE,eAAe,CAAC,EAAE,CAAC;gBACrG,IAAI,CAAC,QAAQ,CAAC;oBACZ,eAAe,EAAE,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,0CAAE,eAAe,KAAI,EAAE;iBAC/D,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAEM,+BAAM,GAAb;YAAA,iBA+FC;YA9FO,IAAA,KAA+B,IAAI,CAAC,KAAK,EAAvC,IAAI,UAAA,EAAE,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAe,CAAC;YAChD,IAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,CAAC,CAAC;YAEvD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAAE;gBACnD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;gBACxB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAO;gBACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAQ;gBAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;gBACxB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAU;aACjC,CAAC,CAAC;YAEH,IAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/C,IAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7D,IAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3D,IAAM,WAAW,GACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,GAAG,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,OAAQ,GAAG,mBAAmB,CAAC,GAAG,CAAC,CAAC;YACtG,IAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,MAAM,CAAC,UAAC,CAAkB,IAAK,OAAA,CAAC,CAAC,IAAK,IAAI,CAAC,EAAZ,CAAY,CAAC,CAAC,CAAC;YAC/F,IAAM,gBAAgB,GACpB,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAiB,EAAE,SAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACvG,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,6BACE,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAChC,GAAG,EAAE,UAAC,QAA4B,IAAK,OAAA,CAAC,KAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,EAA3B,CAA2B,EAClE,YAAY,EAAE,IAAI,CAAC,sBAAsB;gBAEzC,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,UAAU,EAAE,YAAY,EAAE,uCAAyB,CAAC,GAAG;oBAC9F;wBACE,6BACE,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,gBACrB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,EAC5B,GAAG,EAAE,UAAC,IAAuB,IAAK,OAAA,KAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAtB,CAAsB;4BAExD,oBAAC,WAAG,IACF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAO,EACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAQ,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAY,EACpC,IAAI,EAAE,SAAU,EAChB,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EACzC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,eAAe,EAAE,IAAI,CAAC,cAAc,EACpC,eAAe,EAAE,IAAI,CAAC,cAAc,EACpC,kBAAkB,EAAE,IAAI,CAAC,WAAW,EACpC,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,cAAc,EAAE,IAAI,CAAC,OAAO,EAC5B,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,EACvC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,EAC3C,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,gBAAgB,EAAE,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,EACxD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM,EACxB,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,EACnD,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GACjC,CACE,CACF,CACI;gBACZ,oBAAC,iBAAO,qBACN,MAAM,EAAE,IAAI,CAAC,oBAAoB,EACjC,eAAe,EAAE,IAAI,EACrB,aAAa,EAAE,KAAK,EACpB,eAAe,EAAE,yBAAe,CAAC,WAAW,EAC5C,QAAQ,EAAE,EAAE,EACZ,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC1D,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa;oBAC7B,4DAA4D;oBAC5D,yBAAyB,EAAE,IAAI;oBAC/B,mEAAmE;oBACnE,sBAAsB,EAAE,IAAI,IACxB,IAAI,CAAC,KAAK,CAAC,YAAa,EACxB,IAAA,+BAAuB,EAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,EAAE,MAAM,EAAE,KAAK,CAAC,GAE9E,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC,CAAC,CACxC,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAsB,CAAC,CAC1E,CAAC,CAAC,CAAC,CACF,oBAAC,sBAAc,IACb,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAC/E,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAC3B,CACH,CACO;gBACT,CAAC,UAAU,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAG,UAAU,CAAO,CAChF,CACP,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAc,EACvB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;QACJ,CAAC;QAED,sBAAW,0CAAc;iBAAzB;gBACE,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,CAAC;;;WAAA;QAYO,2CAAkB,GAA1B,UAA2B,IAAuB;YAChD,IAAI,SAAS,GAAG,CAAC,CAAC;YAClB,IAAM,UAAU,GAAG,IAAI,CAAC;YACxB,IAAM,YAAY,GAAsB,EAAE,CAAC;YAC3C,IAAI,CAAC,OAAO,CAAC,UAAA,IAAI;gBACf,SAAS,IAAI,IAAI,CAAC,IAAK,CAAC;YAC1B,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,CAAC,UAAA,IAAI;gBACf,YAAY,CAAC,IAAI,CACf,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,IAAK,IAAI,IAAI,CAAC,IAAK,GAAG,CAAC;oBACnD,CAAC,uCACM,IAAI,KACP,IAAI,EAAE,UAAU,GAAG,SAAS,EAC5B,gBAAgB,EACd,IAAI,CAAC,gBAAgB,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAK,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,IAE/F,CAAC,CAAC,IAAI,CACT,CAAC;YACJ,CAAC,CAAC,CAAC;YACH,OAAO,YAAY,CAAC;QACtB,CAAC;QACO,oCAAW,GAAnB,UAAoB,IAAuB;;YACzC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,IAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YAEzF,IAAM,SAAS,GACb,IAAI,CAAC,aAAa,IAAI,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,IAAG,IAAI,CAAC,KAAK,CAAC,OAAQ;gBAC1E,CAAC,CAAC,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY;gBAClC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACzB,IAAM,OAAO,GAAG,cAAO,QAAS,cAAI,SAAU,CAAE,CAAC;YACjD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACxC,CAAC;QAEO,uCAAc,GAAtB,UAAuB,SAA4B;YAAnD,iBAmCC;YAlCC,IAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;;gBAC1E,IAAM,KAAK,GAAW,KAAI,CAAC,KAAK,CAAC,cAAc;oBAC7C,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAG,CAAC,CAAC,KAAI,IAAA,uBAAe,EAAC,KAAK,EAAE,CAAC,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,UAAU,CAAC,CAAC,CAAC,CAAC;oBACnF,CAAC,CAAC,KAAK,CAAC,KAAM,CAAC;gBAEjB,qDAAqD;gBACrD,IAAM,MAAM,GAAY;oBACtB,KAAK,EAAE,KAAK,CAAC,MAAO;oBACpB,KAAK,OAAA;oBACL,WAAW,EAAE;wBACX,KAAI,CAAC,sBAAsB,EAAE,CAAC;wBAC9B,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,MAAO,EAAE,CAAC,CAAC;oBACjD,CAAC;oBACD,gBAAgB,EAAE;wBAChB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC;oBAC7C,CAAC;iBACF,CAAC;gBACF,OAAO,MAAM,CAAC;YAChB,CAAC,CAAC,CAAC;YAEH,IAAM,OAAO,GAAG,CACd,oBAAC,eAAO,qBACN,OAAO,EAAE,eAAe,EACxB,aAAa,QACb,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAC9C,yBAAyB,EAAE,IAAI,CAAC,KAAK,CAAC,mCAAmC,EACzE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,IACxC,IAAI,CAAC,KAAK,CAAC,WAAW;gBAC1B,6CAA6C;gBAC7C,QAAQ,EAAE,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,EAClD,GAAG,EAAE,IAAI,CAAC,WAAW,IACrB,CACH,CAAC;YACF,OAAO,OAAO,CAAC;QACjB,CAAC;QAEO,iDAAwB,GAAhC,UACE,eAAyB,EACzB,KAA0C,EAC1C,aAAuB;;YAEvB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,0CAAE,wBAAwB,CAAA,EAAE,CAAC;gBAC/E,IAAI,CAAC,QAAQ,CAAC,EAAE,eAAe,iBAAA,EAAE,CAAC,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAChE,CAAC;YACD,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,0CAAE,QAAQ,EAAE,CAAC;gBACrC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC;YACzE,CAAC;QACH,CAAC;QA8CO,oCAAW,GAAnB;YACE,IAAI;QACN,CAAC;QAOO,0CAAiB,GAAzB,UAA0B,gBAA6C,EAAE,IAAuB;YAAhG,iBAoBC;YAnBC,IAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACxD,IAAI,gBAAgB,KAAK,SAAS,IAAI,CAAC,kBAAkB,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;gBAChG,IAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,KAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAvC,CAAuC,CAAC,CAAC;gBAC/E,OAAO,UAAU;oBACf,CAAC,CAAC,UAAU,CAAC,gBAAgB;wBAC3B,CAAC,CAAC,UAAU,CAAC,gBAAgB;wBAC7B,CAAC,CAAC,UAAU,CAAC,IAAK;oBACpB,CAAC,CAAC,gBAAgB,CAAC;YACvB,CAAC;iBAAM,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACzC,IAAI,YAAU,GAAG,CAAC,CAAC;gBACnB,IAAI,CAAC,OAAO,CAAC,UAAA,KAAK;oBAChB,IAAI,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAO,CAAC,EAAE,CAAC;wBAC/C,YAAU,IAAI,KAAK,CAAC,IAAK,CAAC;oBAC5B,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,OAAO,YAAU,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,OAAO,gBAAgB,CAAC;YAC1B,CAAC;QACH,CAAC;QAEO,wCAAe,GAAvB,UAAwB,IAAiC;YACvD,IAAM,YAAY,GAAG,IAAA,mCAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACrE,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,OAAO,IAAI,CAAC;YACd,CAAC;YACD,OAAO,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,EAAE,CAAC;QAClC,CAAC;QAED;;;;WAIG;QACK,8CAAqB,GAA7B;YACE,OAAO,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe;gBAC5B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;oBACzB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;oBAC3B,CAAC,CAAC,EAAE,CAAC;QACT,CAAC;QAUO,sCAAa,GAArB;YACE,OAAO,CAAC,CACN,IAAI,CAAC,KAAK,CAAC,IAAI;gBACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;gBACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAU,CAAC,MAAM,CAAC,UAAC,CAAkB,IAAK,OAAA,CAAC,CAAC,IAAK,GAAG,CAAC,EAAX,CAAW,CAAC,CAAC,MAAM,GAAG,CAAC,CAClF,CAAC;QACJ,CAAC;QAjYa,2BAAY,GAA8B;YACtD,WAAW,EAAE,CAAC;YACd,UAAU,EAAE,IAAI;SACjB,AAHyB,CAGxB;QA+YJ,qBAAC;KAAA,AAnZD,CAAoC,KAAK,CAAC,SAAS,GAmZlD;IAnZY,wCAAc","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { ScaleOrdinal } from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport {\n  getAccessibleDataObject,\n  getColorFromToken,\n  getNextColor,\n  getNextGradient,\n  areArraysEqual,\n} from '../../utilities/index';\nimport { convertToLocaleString } from '../../utilities/locale-util';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport { ILegendContainer } from '../Legends/index';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n  showHover?: boolean;\n  value?: string | undefined;\n  legend?: string | undefined;\n  _width?: number | undefined;\n  _height?: number | undefined;\n  activeLegend?: string;\n  color?: string | undefined;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  focusedArcId?: string;\n  dataPointCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n  selectedLegends: string[];\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {\n  public static defaultProps: Partial<IDonutChartProps> = {\n    innerRadius: 0,\n    hideLabels: true,\n  };\n  public _colors: ScaleOrdinal<string, {}>;\n  private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n  private _rootElem: HTMLElement | null;\n  private _uniqText: string;\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private _currentHoverElement: any;\n  private _calloutId: string;\n  private _calloutAnchorPoint: IChartDataPoint | null;\n  private _emptyChartId: string | null;\n  private _legendsRef: React.RefObject<ILegendContainer>;\n\n  public static getDerivedStateFromProps(\n    nextProps: Readonly<IDonutChartProps>,\n    prevState: Readonly<IDonutChartState>,\n  ): Partial<IDonutChartState> | null {\n    let widthState: { _width: number } | undefined;\n    if (nextProps.width && nextProps.width !== prevState._width) {\n      widthState = { _width: nextProps.width };\n    }\n\n    let heightState: { _height: number } | undefined;\n    if (nextProps.height && nextProps.height !== prevState._height) {\n      heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n    }\n\n    return { ...widthState, ...heightState };\n  }\n\n  constructor(props: IDonutChartProps) {\n    super(props);\n\n    initializeComponentRef(this);\n\n    this.state = {\n      showHover: false,\n      value: '',\n      legend: '',\n      _width: this.props.width || 200,\n      _height: this.props.height || 200,\n      activeLegend: undefined,\n      color: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n      focusedArcId: '',\n      selectedLegends: props.legendProps?.selectedLegends || [],\n    };\n    this._hoverCallback = this._hoverCallback.bind(this);\n    this._focusCallback = this._focusCallback.bind(this);\n    this._hoverLeave = this._hoverLeave.bind(this);\n    this._calloutId = getId('callout');\n    this._uniqText = getId('_Pie_');\n    this._emptyChartId = getId('_DonutChart_empty');\n    this._legendsRef = React.createRef();\n  }\n\n  public componentDidMount(): void {\n    if (this._rootElem) {\n      this.setState({\n        _width: this._rootElem.offsetWidth,\n        _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,\n      });\n    }\n  }\n\n  public componentDidUpdate(prevProps: IDonutChartProps): void {\n    if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) {\n      this.setState({\n        selectedLegends: this.props.legendProps?.selectedLegends || [],\n      });\n    }\n  }\n\n  public render(): JSX.Element {\n    const { data, hideLegend = false } = this.props;\n    const points = this._addDefaultColors(data?.chartData);\n\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: this.state._width!,\n      height: this.state._height!,\n      color: this.state.color!,\n      className: this.props.className!,\n    });\n\n    const legendBars = this._createLegends(points);\n    const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n    const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n    const outerRadius =\n      Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n    const chartData = this._elevateToMinimums(points.filter((d: IChartDataPoint) => d.data! >= 0));\n    const valueInsideDonut =\n      this.props.innerRadius !== 0 ? this._valueInsideDonut(this.props.valueInsideDonut!, chartData!) : '';\n    return !this._isChartEmpty() ? (\n      <div\n        className={this._classNames.root}\n        ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}\n        onMouseLeave={this._handleChartMouseLeave}\n      >\n        <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all}>\n          <div>\n            <svg\n              className={this._classNames.chart}\n              aria-label={data?.chartTitle}\n              ref={(node: SVGElement | null) => this._setViewBox(node)}\n            >\n              <Pie\n                width={this.state._width!}\n                height={this.state._height!}\n                outerRadius={outerRadius}\n                innerRadius={this.props.innerRadius!}\n                data={chartData!}\n                enableGradient={this.props.enableGradient}\n                roundCorners={this.props.roundCorners}\n                onFocusCallback={this._focusCallback}\n                hoverOnCallback={this._hoverCallback}\n                hoverLeaveCallback={this._hoverLeave}\n                uniqText={this._uniqText}\n                onBlurCallback={this._onBlur}\n                activeArc={this._getHighlightedLegend()}\n                focusedArcId={this.state.focusedArcId || ''}\n                href={this.props.href!}\n                calloutId={this._calloutId}\n                valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n                theme={this.props.theme!}\n                showLabelsInPercent={this.props.showLabelsInPercent}\n                hideLabels={this.props.hideLabels}\n              />\n            </svg>\n          </div>\n        </FocusZone>\n        <Callout\n          target={this._currentHoverElement}\n          alignTargetEdge={true}\n          isBeakVisible={false}\n          directionalHint={DirectionalHint.topAutoEdge}\n          gapSpace={15}\n          hidden={!(!this.props.hideTooltip && this.state.showHover)}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          preventDismissOnLostFocus={true}\n          /** Keep the callout updated with details of focused/hovered arc */\n          shouldUpdateWhenHidden={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n        >\n          {this.props.onRenderCalloutPerDataPoint ? (\n            this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n          ) : (\n            <ChartHoverCard\n              Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n              YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n              color={this.state.color}\n              culture={this.props.culture}\n            />\n          )}\n        </Callout>\n        {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\n      </div>\n    ) : (\n      <div\n        id={this._emptyChartId!}\n        role={'alert'}\n        style={{ opacity: '0' }}\n        aria-label={'Graph has no data to display'}\n      />\n    );\n  }\n\n  public get chartContainer(): HTMLElement | null {\n    return this._rootElem;\n  }\n\n  public toImage = (opts?: IImageExportOptions): Promise<string> => {\n    return toImage(this._rootElem, this._legendsRef.current?.toSVG, getRTL(), opts);\n  };\n\n  private _closeCallout = () => {\n    this.setState({\n      showHover: false,\n    });\n  };\n\n  private _elevateToMinimums(data: IChartDataPoint[]) {\n    let sumOfData = 0;\n    const minPercent = 0.01;\n    const elevatedData: IChartDataPoint[] = [];\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  private _setViewBox(node: SVGElement | null): void {\n    if (node === null) {\n      return;\n    }\n\n    const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n    const heightVal =\n      node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n        ? node.parentElement?.offsetHeight\n        : this.state._height;\n    const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n    node.setAttribute('viewBox', viewbox);\n  }\n\n  private _createLegends(chartData: IChartDataPoint[]): JSX.Element {\n    const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n      const color: string = this.props.enableGradient\n        ? point.gradient?.[0] || getNextGradient(index, 0, this.props.theme?.isInverted)[0]\n        : point.color!;\n\n      // mapping data to the format Legends component needs\n      const legend: ILegend = {\n        title: point.legend!,\n        color,\n        hoverAction: () => {\n          this._handleChartMouseLeave();\n          this.setState({ activeLegend: point.legend! });\n        },\n        onMouseOutAction: () => {\n          this.setState({ activeLegend: undefined });\n        },\n      };\n      return legend;\n    });\n\n    const legends = (\n      <Legends\n        legends={legendDataItems}\n        centerLegends\n        overflowProps={this.props.legendsOverflowProps}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        overflowText={this.props.legendsOverflowText}\n        {...this.props.legendProps}\n        // eslint-disable-next-line react/jsx-no-bind\n        onChange={this._onLegendSelectionChange.bind(this)}\n        ref={this._legendsRef}\n      />\n    );\n    return legends;\n  }\n\n  private _onLegendSelectionChange(\n    selectedLegends: string[],\n    event: React.MouseEvent<HTMLButtonElement>,\n    currentLegend?: ILegend,\n  ): void {\n    if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) {\n      this.setState({ selectedLegends });\n    } else {\n      this.setState({ selectedLegends: selectedLegends.slice(-1) });\n    }\n    if (this.props.legendProps?.onChange) {\n      this.props.legendProps.onChange(selectedLegends, event, currentLegend);\n    }\n  }\n\n  private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n    this._currentHoverElement = element;\n    this.setState({\n      /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */\n      showHover: this._noLegendsHighlighted() || this._isLegendHighlighted(data.legend),\n      value: data.data!.toString(),\n      legend: data.legend,\n      color: data.color!,\n      xCalloutValue: data.xAxisCalloutData!,\n      yCalloutValue: data.yAxisCalloutData!,\n      focusedArcId: id,\n      dataPointCalloutProps: data,\n      callOutAccessibilityData: data.callOutAccessibilityData!,\n    });\n  };\n\n  private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n    if (this._calloutAnchorPoint !== data) {\n      this._calloutAnchorPoint = data;\n      this._currentHoverElement = e;\n      let color: string = data.color!;\n\n      if (this.props.enableGradient) {\n        const pointIndex = Math.max(this.props.data?.chartData?.findIndex(item => item.legend === data.legend) || 0, 0);\n        color = data.gradient?.[0] || getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n      }\n\n      this.setState({\n        /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */\n        showHover: this._noLegendsHighlighted() || this._isLegendHighlighted(data.legend),\n        value: data.data!.toString(),\n        legend: data.legend,\n        color,\n        xCalloutValue: data.xAxisCalloutData!,\n        yCalloutValue: data.yAxisCalloutData!,\n        dataPointCalloutProps: data,\n        callOutAccessibilityData: data.callOutAccessibilityData!,\n      });\n    }\n  };\n  private _onBlur = (): void => {\n    this.setState({ focusedArcId: '' });\n  };\n\n  private _hoverLeave(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    this.setState({ showHover: false });\n  };\n\n  private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {\n    const highlightedLegends = this._getHighlightedLegend();\n    if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || this.state.showHover)) {\n      const pointValue = data.find(point => this._isLegendHighlighted(point.legend));\n      return pointValue\n        ? pointValue.yAxisCalloutData\n          ? pointValue.yAxisCalloutData\n          : pointValue.data!\n        : valueInsideDonut;\n    } else if (highlightedLegends.length > 0) {\n      let totalValue = 0;\n      data.forEach(point => {\n        if (highlightedLegends.includes(point.legend!)) {\n          totalValue += point.data!;\n        }\n      });\n      return totalValue;\n    } else {\n      return valueInsideDonut;\n    }\n  }\n\n  private _toLocaleString(data: string | number | undefined) {\n    const localeString = convertToLocaleString(data, this.props.culture);\n    if (!localeString) {\n      return data;\n    }\n    return localeString?.toString();\n  }\n\n  /**\n   * This function returns\n   * the selected legend if there is one\n   * or the hovered legend if none of the legends is selected.\n   */\n  private _getHighlightedLegend() {\n    return this.state.selectedLegends.length > 0\n      ? this.state.selectedLegends\n      : this.state.activeLegend\n      ? [this.state.activeLegend]\n      : [];\n  }\n\n  private _isLegendHighlighted = (legend: string | undefined): boolean => {\n    return this._getHighlightedLegend().includes(legend!);\n  };\n\n  private _noLegendsHighlighted = (): boolean => {\n    return this._getHighlightedLegend().length === 0;\n  };\n\n  private _isChartEmpty(): boolean {\n    return !(\n      this.props.data &&\n      this.props.data.chartData &&\n      this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n    );\n  }\n\n  private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n    return donutChartDataPoint\n      ? donutChartDataPoint.map((item, index) => {\n          let color: string;\n          // isInverted property is applicable to v8 themes only\n          if (typeof item.color === 'undefined') {\n            color = getNextColor(index, 0, this.props.theme?.isInverted);\n          } else {\n            color = getColorFromToken(item.color, this.props.theme?.isInverted);\n          }\n\n          return { ...item, color };\n        })\n      : [];\n  };\n}\n"]}

package/lib-amd/components/DonutChart/DonutChart.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IDonutChartProps } from './DonutChart.types';
+/**
+ * Donutchart component.
+ * {@docCategory DonutChart}
+ */
+export declare const DonutChart: React.FunctionComponent<IDonutChartProps>;

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

@@ -0,0 +1,12 @@
+define(["require", "exports", "../../Utilities", "./DonutChart.base", "./DonutChart.styles"], function (require, exports, Utilities_1, DonutChart_base_1, DonutChart_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DonutChart = void 0;
+    // Create a DonutChart variant which uses these default styles and this styled subcomponent.
+    /**
+     * Donutchart component.
+     * {@docCategory DonutChart}
+     */
+    exports.DonutChart = (0, Utilities_1.styled)(DonutChart_base_1.DonutChartBase, DonutChart_styles_1.getStyles);
+});
+//# sourceMappingURL=DonutChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.tsx"],"names":[],"mappings":";;;;IAMA,4FAA4F;IAC5F;;;OAGG;IACU,QAAA,UAAU,GAA8C,IAAA,kBAAM,EAIzE,gCAAc,EAAE,6BAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\nimport { DonutChartBase } from './DonutChart.base';\nimport { getStyles } from './DonutChart.styles';\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<IDonutChartProps> = styled<\n  IDonutChartProps,\n  IDonutChartStyleProps,\n  IDonutChartStyles\n>(DonutChartBase, getStyles);\n"]}

package/lib-amd/components/DonutChart/DonutChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';
+export declare const getStyles: (props: IDonutChartStyleProps) => IDonutChartStyles;

package/lib-amd/components/DonutChart/DonutChart.styles.js

@@ -0,0 +1,36 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        var className = props.className, width = props.width, height = props.height, theme = props.theme;
+        return {
+            root: [
+                theme.fonts.medium,
+                'ms-DonutChart',
+                {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                    height: '100%',
+                },
+                className,
+            ],
+            chart: {
+                width: width,
+                height: height,
+                boxSizing: 'content-box',
+                overflow: 'visible',
+                alignmentAdjust: 'center',
+                display: 'block',
+            },
+            legendContainer: {
+                paddingTop: '16px',
+                width: "".concat(width, "px"),
+            },
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=DonutChart.styles.js.map

package/lib-amd/components/DonutChart/DonutChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA4B;QAC5C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,MAAM,GAAY,KAAK,OAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAClD,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,eAAe;gBACf;oBACE,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,KAAK,OAAA;gBACL,MAAM,QAAA;gBACN,SAAS,EAAE,aAAa;gBACxB,QAAQ,EAAE,SAAS;gBACnB,eAAe,EAAE,QAAQ;gBACzB,OAAO,EAAE,OAAO;aACjB;YACD,eAAe,EAAE;gBACf,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,UAAG,KAAK,OAAI;aACpB;SACF,CAAC;IACJ,CAAC,CAAC;IA5BW,QAAA,SAAS,aA4BpB","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n  const { className, width, height, theme } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-DonutChart',\n      {\n        alignItems: 'center',\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n      },\n      className,\n    ],\n    chart: {\n      width,\n      height,\n      boxSizing: 'content-box',\n      overflow: 'visible',\n      alignmentAdjust: 'center',\n      display: 'block',\n    },\n    legendContainer: {\n      paddingTop: '16px',\n      width: `${width}px`,\n    },\n  };\n};\n"]}

package/lib-amd/components/DonutChart/DonutChart.types.d.ts

@@ -0,0 +1,90 @@
+import { IStyle } from '@fluentui/react/lib/Styling';
+import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { IChartProps, IChartDataPoint, IChart } from './index';
+export interface IDonutChart {
+}
+/**
+ * Donut Chart properties.
+ * {@docCategory DonutChart}
+ */
+export interface IDonutChartProps extends ICartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: IChartProps;
+    /**
+     * inner radius for donut size
+     */
+    innerRadius?: number;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;
+    /**
+     * props for inside donut value
+     */
+    valueInsideDonut?: string | number;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps>;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * Prop to show the arc labels in percentage format
+     * @default false
+     */
+    showLabelsInPercent?: boolean;
+    /**
+     * Prop to hide the arc labels
+     * @default true
+     */
+    hideLabels?: boolean;
+    /**
+     * Prop to enable the gradient in the chart
+     * @default false
+     */
+    enableGradient?: boolean;
+    /**
+     * Prop to enable the round corners in the chart
+     * @default false
+     */
+    roundCorners?: boolean;
+    /**
+     * Optional callback to access the IChart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IChart>;
+}
+/**
+ * Donut Chart style properties
+ * {@docCategory DonutChart}
+ */
+export interface IDonutChartStyleProps extends ICartesianChartStyleProps {
+}
+/**
+ * Donut Chart styles
+ * {@docCategory DonutChart}
+ */
+export interface IDonutChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root?: IStyle;
+    /**
+     * Style for the chart.
+     */
+    chart?: IStyle;
+    /**
+     * Style for the legend container.
+     */
+    legendContainer: IStyle;
+}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=DonutChart.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint, IChart } from './index';\n\nexport interface IDonutChart {}\n\n/**\n * Donut Chart properties.\n * {@docCategory DonutChart}\n */\nexport interface IDonutChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IChartProps;\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?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\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?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\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   * Prop to enable the gradient in the chart\n   * @default false\n   */\n  enableGradient?: boolean;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Optional callback to access the IChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IChart>;\n}\n\n/**\n * Donut Chart style properties\n * {@docCategory DonutChart}\n */\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * Donut Chart styles\n * {@docCategory DonutChart}\n */\nexport interface IDonutChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: IStyle;\n  /**\n   * Style for the legend container.\n   */\n  legendContainer: IStyle;\n}\n"]}

package/lib-amd/components/DonutChart/Pie/Pie.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IPieProps } from './index';
+import { IArcData } from '../Arc/index';
+export declare class Pie extends React.Component<IPieProps, {}> {
+    static defaultProps: Partial<IPieProps>;
+    private _pieForFocusRing;
+    private _totalValue;
+    constructor(props: IPieProps);
+    arcGenerator: (d: IArcData, i: number, focusData: IArcData, href?: string) => JSX.Element;
+    render(): JSX.Element;
+    componentDidUpdate(): void;
+    private _focusCallback;
+    private _hoverCallback;
+    private _computeTotalValue;
+}

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

@@ -0,0 +1,73 @@
+define(["require", "exports", "tslib", "react", "d3-shape", "../Arc/index", "@fluentui/react/lib/Utilities", "./Pie.styles", "../../../utilities/index"], function (require, exports, tslib_1, React, d3_shape_1, index_1, Utilities_1, Pie_styles_1, index_2) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Pie = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var TEXT_PADDING = 5;
+    var Pie = /** @class */ (function (_super) {
+        tslib_1.__extends(Pie, _super);
+        function Pie(props) {
+            var _this = _super.call(this, props) || this;
+            _this.arcGenerator = function (d, i, focusData, href) {
+                var _a, _b, _c, _d;
+                var color = d && d.data && d.data.color;
+                var nextColor = color;
+                if (_this.props.enableGradient) {
+                    color = (_b = (_a = _this.props.data[i].gradient) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : (0, index_2.getNextGradient)(i, 0, _this.props.theme.isInverted)[0];
+                    nextColor = (_d = (_c = _this.props.data[i].gradient) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : (0, index_2.getNextGradient)(i, 0, _this.props.theme.isInverted)[1];
+                }
+                return (React.createElement(index_1.Arc, { key: i, data: d, focusData: focusData, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: color, nextColor: nextColor, enableGradient: _this.props.enableGradient, roundCorners: _this.props.roundCorners, onFocusCallback: _this._focusCallback, hoverOnCallback: _this._hoverCallback, onBlurCallback: _this.props.onBlurCallback, hoverLeaveCallback: _this.props.hoverLeaveCallback, uniqText: _this.props.uniqText, activeArc: _this.props.activeArc, href: href, calloutId: _this.props.calloutId, valueInsideDonut: _this.props.valueInsideDonut, theme: _this.props.theme, focusedArcId: _this.props.focusedArcId, showLabelsInPercent: _this.props.showLabelsInPercent, totalValue: _this._totalValue, hideLabels: _this.props.hideLabels }));
+            };
+            _this._focusCallback = function (data, id, e) {
+                _this.props.onFocusCallback(data, id, e);
+            };
+            _this._computeTotalValue = function () {
+                var totalValue = 0;
+                _this.props.data.forEach(function (arc) {
+                    totalValue += arc.data;
+                });
+                return totalValue;
+            };
+            _this._hoverCallback = _this._hoverCallback.bind(_this);
+            _this._pieForFocusRing = (0, d3_shape_1.pie)()
+                .sort(null)
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .value(function (d) { return d.data; })
+                .padAngle(0);
+            return _this;
+        }
+        Pie.prototype.render = function () {
+            var _this = this;
+            var _a = this.props, pie = _a.pie, data = _a.data;
+            var focusData = this._pieForFocusRing(data);
+            var piechart = pie(data);
+            var translate = "translate(".concat(this.props.width / 2, ", ").concat(this.props.height / 2, ")");
+            var classNames = getClassNames(Pie_styles_1.getStyles, {
+                theme: this.props.theme,
+            });
+            this._totalValue = this._computeTotalValue();
+            return (React.createElement("g", { transform: translate },
+                piechart.map(function (d, i) { return _this.arcGenerator(d, i, focusData[i], _this.props.href); }),
+                this.props.valueInsideDonut && (React.createElement("text", { y: 5, textAnchor: "middle", dominantBaseline: "middle", className: classNames.insideDonutString }, this.props.valueInsideDonut))));
+        };
+        Pie.prototype.componentDidUpdate = function () {
+            var classNames = getClassNames(Pie_styles_1.getStyles, {
+                theme: this.props.theme,
+            });
+            (0, index_2.wrapTextInsideDonut)(classNames.insideDonutString, this.props.innerRadius * 2 - TEXT_PADDING);
+        };
+        Pie.prototype._hoverCallback = function (data, e) {
+            this.props.hoverOnCallback(data, e);
+        };
+        Pie.defaultProps = {
+            pie: (0, d3_shape_1.pie)()
+                .sort(null)
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .value(function (d) { return d.data; })
+                .padAngle(0.02),
+        };
+        return Pie;
+    }(React.Component));
+    exports.Pie = Pie;
+});
+//# sourceMappingURL=Pie.js.map