@fluentui/react-charting 5.23.60 → 5.23.62

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

@@ -1,304 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DonutChartBase = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var Utilities_1 = require("@fluentui/react/lib/Utilities");
-var Callout_1 = require("@fluentui/react/lib/Callout");
-var react_focus_1 = require("@fluentui/react-focus");
-var index_1 = require("../../index");
-var index_2 = require("./Pie/index");
-var index_3 = require("../../utilities/index");
-var locale_util_1 = require("../../utilities/locale-util");
-var image_export_utils_1 = require("../../utilities/image-export-utils");
-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-commonjs/components/DonutChart/DonutChart.base.js.map

@@ -1 +0,0 @@
-{"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-commonjs/components/DonutChart/DonutChart.d.ts

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

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

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DonutChart = void 0;
-var Utilities_1 = require("../../Utilities");
-var DonutChart_base_1 = require("./DonutChart.base");
-var DonutChart_styles_1 = require("./DonutChart.styles");
-// 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-commonjs/components/DonutChart/DonutChart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DonutChart.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.tsx"],"names":[],"mappings":";;;AACA,6CAAyC;AAEzC,qDAAmD;AACnD,yDAAgD;AAEhD,4FAA4F;AAC5F;;;GAGG;AACU,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-commonjs/components/DonutChart/DonutChart.styles.d.ts

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

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

@@ -1,34 +0,0 @@
-"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-commonjs/components/DonutChart/DonutChart.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":";;;AAEO,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;AA5BW,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-commonjs/components/DonutChart/DonutChart.types.d.ts

@@ -1,90 +0,0 @@
-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-commonjs/components/DonutChart/DonutChart.types.js

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

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

@@ -1 +0,0 @@
-{"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-commonjs/components/DonutChart/Pie/Pie.d.ts

@@ -1,15 +0,0 @@
-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-commonjs/components/DonutChart/Pie/Pie.js

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pie = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var d3_shape_1 = require("d3-shape");
-var index_1 = require("../Arc/index");
-var Utilities_1 = require("@fluentui/react/lib/Utilities");
-var Pie_styles_1 = require("./Pie.styles");
-var index_2 = require("../../../utilities/index");
-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