@fluentui/react-charting 5.23.63 → 5.23.65

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

@@ -0,0 +1,301 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';
+import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
+import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
+import { ChartHoverCard, Legends } from '../../index';
+import { Pie } from './Pie/index';
+import { getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient, areArraysEqual, } from '../../utilities/index';
+import { convertToLocaleString } from '../../utilities/locale-util';
+import { toImage } from '../../utilities/image-export-utils';
+var getClassNames = classNamesFunction();
+var LEGEND_CONTAINER_HEIGHT = 40;
+var DonutChartBase = /** @class */ (function (_super) {
+    __extends(DonutChartBase, _super);
+    function DonutChartBase(props) {
+        var _a;
+        var _this = _super.call(this, props) || this;
+        _this.toImage = function (opts) {
+            var _a;
+            return toImage(_this._rootElem, (_a = _this._legendsRef.current) === null || _a === void 0 ? void 0 : _a.toSVG, 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]) || 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 = getNextColor(index, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                    }
+                    else {
+                        color = getColorFromToken(item.color, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                    }
+                    return __assign(__assign({}, item), { color: color });
+                })
+                : [];
+        };
+        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 = getId('callout');
+        _this._uniqText = getId('_Pie_');
+        _this._emptyChartId = 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 __assign(__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 (!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(FocusZone, { direction: FocusZoneDirection.horizontal, handleTabKey: 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(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, __assign({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: 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, getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(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
+                ? __assign(__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]) || 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(Legends, __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 = 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));
+export { DonutChartBase };
+//# sourceMappingURL=DonutChart.base.js.map

package/lib/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":"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","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/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/components/DonutChart/DonutChart.js

@@ -0,0 +1,10 @@
+import { styled } from '../../Utilities';
+import { DonutChartBase } from './DonutChart.base';
+import { getStyles } from './DonutChart.styles';
+// Create a DonutChart variant which uses these default styles and this styled subcomponent.
+/**
+ * Donutchart component.
+ * {@docCategory DonutChart}
+ */
+export var DonutChart = styled(DonutChartBase, getStyles);
+//# sourceMappingURL=DonutChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,4FAA4F;AAC5F;;;GAGG;AACH,MAAM,CAAC,IAAM,UAAU,GAA8C,MAAM,CAIzE,cAAc,EAAE,SAAS,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/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/components/DonutChart/DonutChart.styles.js

@@ -0,0 +1,30 @@
+export 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"),
+        },
+    };
+};
+//# sourceMappingURL=DonutChart.styles.js.map

package/lib/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":"AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA4B;IAC5C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,MAAM,GAAY,KAAK,OAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAClD,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,eAAe;YACf;gBACE,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,KAAK,OAAA;YACL,MAAM,QAAA;YACN,SAAS,EAAE,aAAa;YACxB,QAAQ,EAAE,SAAS;YACnB,eAAe,EAAE,QAAQ;YACzB,OAAO,EAAE,OAAO;SACjB;QACD,eAAe,EAAE;YACf,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,UAAG,KAAK,OAAI;SACpB;KACF,CAAC;AACJ,CAAC,CAAC","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/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/components/DonutChart/DonutChart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DonutChart.types.js.map

package/lib/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/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/components/DonutChart/Pie/Pie.js

@@ -0,0 +1,75 @@
+import { __extends } from "tslib";
+import * as React from 'react';
+import { pie as d3Pie } from 'd3-shape';
+import { Arc } from '../Arc/index';
+import { classNamesFunction } from '@fluentui/react/lib/Utilities';
+import { getStyles } from './Pie.styles';
+import { getNextGradient, wrapTextInsideDonut } from '../../../utilities/index';
+var getClassNames = classNamesFunction();
+var TEXT_PADDING = 5;
+var Pie = /** @class */ (function (_super) {
+    __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 : 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 : getNextGradient(i, 0, _this.props.theme.isInverted)[1];
+            }
+            return (React.createElement(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 = d3Pie()
+            .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(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(getStyles, {
+            theme: this.props.theme,
+        });
+        wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius * 2 - TEXT_PADDING);
+    };
+    Pie.prototype._hoverCallback = function (data, e) {
+        this.props.hoverOnCallback(data, e);
+    };
+    Pie.defaultProps = {
+        pie: d3Pie()
+            .sort(null)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .value(function (d) { return d.data; })
+            .padAngle(0.02),
+    };
+    return Pie;
+}(React.Component));
+export { Pie };
+//# sourceMappingURL=Pie.js.map