@fluentui/react-charting 5.21.28 → 5.21.29

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

@@ -0,0 +1,88 @@
+define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib/Utilities", "./Arc.styles", "d3-format", "../../../utilities/index"], function (require, exports, tslib_1, React, d3_shape_1, Utilities_1, Arc_styles_1, d3_format_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Arc = void 0;
+    var Arc = exports.Arc = /** @class */ (function (_super) {
+        tslib_1.__extends(Arc, _super);
+        function Arc() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.state = {};
+            _this.currentRef = React.createRef();
+            _this._isRTL = (0, Utilities_1.getRTL)();
+            _this._hoverOff = function () {
+                _this.props.hoverLeaveCallback();
+            };
+            _this._onBlur = function () {
+                _this.props.onBlurCallback();
+            };
+            _this._getAriaLabel = function () {
+                var _a;
+                var point = _this.props.data.data;
+                var legend = point.xAxisCalloutData || point.legend;
+                var yValue = point.yAxisCalloutData || point.data || 0;
+                return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? "".concat(legend, ", ") : '') + "".concat(yValue, ".");
+            };
+            _this._renderArcLabel = function (className) {
+                var _a, _b;
+                var arc = (_a = _this.props, _a.arc), data = _a.data, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, showLabelsInPercent = _a.showLabelsInPercent, totalValue = _a.totalValue, hideLabels = _a.hideLabels, activeArc = _a.activeArc;
+                if (hideLabels ||
+                    Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 ||
+                    (activeArc !== data.data.legend && activeArc !== '')) {
+                    return null;
+                }
+                var base = (_b = arc.centroid(data), _b[0]), perp = _b[1];
+                var hyp = Math.sqrt(base * base + perp * perp);
+                var labelRadius = Math.max(innerRadius, outerRadius) + 2;
+                var angle = (data.startAngle + data.endAngle) / 2;
+                var arcValue = data.value;
+                return (React.createElement("text", { x: (hyp === 0 ? 0 : base / hyp) * labelRadius, y: (hyp === 0 ? 0 : perp / hyp) * labelRadius, textAnchor: angle > Math.PI !== _this._isRTL ? 'end' : 'start', dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto', className: className, "aria-hidden": true }, showLabelsInPercent
+                    ? (0, d3_format_1.format)('.0%')(totalValue === 0 ? 0 : arcValue / totalValue)
+                    : (0, index_1.formatValueWithSIPrefix)(arcValue)));
+            };
+            return _this;
+        }
+        Arc.getDerivedStateFromProps = function (nextProps) {
+            _updateChart(nextProps);
+            return null;
+        };
+        Arc.prototype.updateChart = function (newProps) {
+            _updateChart(newProps);
+        };
+        Arc.prototype.render = function () {
+            var _a;
+            var _b;
+            var arc = (_a = this.props, _a.arc), href = _a.href, focusedArcId = _a.focusedArcId;
+            var getClassNames = (0, Utilities_1.classNamesFunction)();
+            var classNames = getClassNames(Arc_styles_1.getStyles, {
+                color: this.props.color,
+                href: href,
+                theme: this.props.theme,
+            });
+            var id = this.props.uniqText + this.props.data.data.legend.replace(/\s+/, '') + this.props.data.data.data;
+            var opacity = this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '' ? 1 : 0.1;
+            return (React.createElement("g", { ref: this.currentRef },
+                !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc(this.props.focusData), className: classNames.focusRing })),
+                React.createElement("path", { id: id, d: arc(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '', onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, opacity: opacity, onClick: href ? this._redirectToUrl.bind(this, href) : (_b = this.props.data) === null || _b === void 0 ? void 0 : _b.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
+                this._renderArcLabel(classNames.arcLabel)));
+        };
+        Arc.prototype._onFocus = function (data, id) {
+            this.props.onFocusCallback(data, id, this.currentRef.current);
+        };
+        Arc.prototype._hoverOn = function (data, mouseEvent) {
+            mouseEvent.persist();
+            this.props.hoverOnCallback(data, mouseEvent);
+        };
+        Arc.prototype._redirectToUrl = function (href) {
+            href ? (window.location.href = href) : '';
+        };
+        Arc.defaultProps = {
+            arc: (0, d3_shape_1.arc)(),
+        };
+        return Arc;
+    }(React.Component));
+    function _updateChart(newProps) {
+        newProps.arc.innerRadius(newProps.innerRadius);
+        newProps.arc.outerRadius(newProps.outerRadius);
+    }
+});
+//# sourceMappingURL=Arc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatValueWithSIPrefix } from '../../../utilities/index';\n\nexport interface IArcState {\n  isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: d3Arc(),\n  };\n\n  public state: {} = {};\n\n  private currentRef = React.createRef<SVGPathElement>();\n  private _isRTL: boolean = getRTL();\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> | null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public updateChart(newProps: IArcProps): void {\n    _updateChart(newProps);\n  }\n\n  public render(): JSX.Element {\n    const { arc, href, focusedArcId } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(getStyles, {\n      color: this.props.color,\n      href: href!,\n      theme: this.props.theme!,\n    });\n    const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n    const opacity: number =\n      this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1;\n    return (\n      <g ref={this.currentRef}>\n        {!!focusedArcId && focusedArcId === id && (\n          <path id={id + 'focusRing'} d={arc(this.props.focusData)} className={classNames.focusRing} />\n        )}\n        <path\n          id={id}\n          d={arc(this.props.data)}\n          onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n          className={classNames.root}\n          data-is-focusable={this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === ''}\n          onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseLeave={this._hoverOff}\n          onBlur={this._onBlur}\n          opacity={opacity}\n          onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n          aria-label={this._getAriaLabel()}\n          role=\"img\"\n        />\n        {this._renderArcLabel(classNames.arcLabel)}\n      </g>\n    );\n  }\n\n  private _onFocus(data: IChartDataPoint, id: string): void {\n    this.props.onFocusCallback!(data, id, this.currentRef.current);\n  }\n\n  private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n    mouseEvent.persist();\n    this.props.hoverOnCallback!(data, mouseEvent);\n  }\n\n  private _hoverOff = (): void => {\n    this.props.hoverLeaveCallback!();\n  };\n\n  private _onBlur = (): void => {\n    this.props.onBlurCallback!();\n  };\n\n  private _redirectToUrl(href: string | undefined): void {\n    href ? (window.location.href = href) : '';\n  }\n\n  private _getAriaLabel = (): string => {\n    const point = this.props.data!.data;\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue = point.yAxisCalloutData || point.data || 0;\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  private _renderArcLabel = (className: string) => {\n    const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props;\n\n    if (\n      hideLabels ||\n      Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n      (activeArc !== data!.data.legend && activeArc !== '')\n    ) {\n      return null;\n    }\n\n    const [base, perp] = arc.centroid(data);\n    const hyp = Math.sqrt(base * base + perp * perp);\n    const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n    const angle = (data!.startAngle + data!.endAngle) / 2;\n    const arcValue = data!.value;\n\n    return (\n      <text\n        x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n        y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n        textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n        dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n        className={className}\n        aria-hidden={true}\n      >\n        {showLabelsInPercent\n          ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n          : formatValueWithSIPrefix(arcValue)}\n      </text>\n    );\n  };\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n  newProps.arc.innerRadius(newProps.innerRadius);\n  newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}

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

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

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

@@ -0,0 +1,33 @@
+define(["require", "exports", "@fluentui/react/lib/Styling"], function (require, exports, Styling_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        var color = props.color, href = props.href, theme = props.theme;
+        return {
+            root: {
+                fill: color,
+                cursor: href ? 'pointer' : 'default',
+                stroke: theme.semanticColors.bodyBackground,
+                outline: 'transparent',
+                selectors: {
+                    '::-moz-focus-inner': {
+                        border: '0',
+                    },
+                },
+            },
+            focusRing: {
+                stroke: theme.semanticColors.focusBorder,
+                strokeWidth: 4,
+                fill: 'transparent',
+            },
+            arcLabel: {
+                fontSize: Styling_1.FontSizes.small,
+                fontWeight: Styling_1.FontWeights.semibold,
+                fill: theme.palette.neutralPrimary,
+            },
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=Arc.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAgB;QAChC,IAAA,KAAK,GAAkB,KAAK,MAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QACrC,OAAO;YACL,IAAI,EAAE;gBACJ,IAAI,EAAE,KAAK;gBACX,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACpC,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;gBAC3C,OAAO,EAAE,aAAa;gBACtB,SAAS,EAAE;oBACT,oBAAoB,EAAE;wBACpB,MAAM,EAAE,GAAG;qBACZ;iBACF;aACF;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;gBACxC,WAAW,EAAE,CAAC;gBACd,IAAI,EAAE,aAAa;aACpB;YACD,QAAQ,EAAE;gBACR,QAAQ,EAAE,mBAAS,CAAC,KAAK;gBACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;SACF,CAAC;IACJ,CAAC,CAAC;IAzBW,QAAA,SAAS,aAyBpB","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IArcProps): IArcStyles => {\n  const { color, href, theme } = props;\n  return {\n    root: {\n      fill: color,\n      cursor: href ? 'pointer' : 'default',\n      stroke: theme.semanticColors.bodyBackground,\n      outline: 'transparent',\n      selectors: {\n        '::-moz-focus-inner': {\n          border: '0',\n        },\n      },\n    },\n    focusRing: {\n      stroke: theme.semanticColors.focusBorder,\n      strokeWidth: 4,\n      fill: 'transparent',\n    },\n    arcLabel: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n  };\n};\n"]}

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

@@ -0,0 +1,124 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IChartDataPoint } from '../index';
+export interface IArcProps {
+    /**
+     * Theme
+     */
+    theme: ITheme;
+    /**
+     * Data to render in the Arc.
+     */
+    data?: IArcData;
+    /**
+     * Data to render focused Arc
+     */
+    focusData?: IArcData;
+    /**
+     * id of the focused arc
+     */
+    focusedArcId?: string;
+    /**
+     * shape for  Arc.
+     */
+    arc?: any;
+    /**
+     * innerRadius of the Arc.
+     */
+    innerRadius?: number;
+    /**
+     * outerRadius of the Arc.
+     */
+    outerRadius?: number;
+    /**
+     * Color for the Arc.
+     */
+    color: string;
+    /**
+     * Defines the function that is executed upon hovering over the legend
+     */
+    hoverOnCallback?: Function;
+    /**
+     * Defines the function that is executed upon hovering over the legend
+     */
+    onFocusCallback?: Function;
+    /**
+     * Defines the function that is executed upon hovering Leave the legend
+     */
+    onBlurCallback?: Function;
+    /**
+     * Defines the function that is executed upon hovering Leave the legend
+     */
+    hoverLeaveCallback?: Function;
+    /**
+     * Uniq string for chart
+     */
+    uniqText?: string;
+    /**
+     * string for callout id
+     */
+    calloutId?: string;
+    /**
+     * Active Arc for chart
+     */
+    activeArc?: string;
+    /**
+     * internal prop for href
+     */
+    href?: string;
+    /**
+     * props for inside donut value
+     */
+    valueInsideDonut?: string | number;
+    /**
+     * Prop to show the arc labels in percentage format
+     */
+    showLabelsInPercent?: boolean;
+    /**
+     * Prop used to define the sum of all arc values
+     */
+    totalValue?: number;
+    /**
+     * Prop to hide the arc labels
+     */
+    hideLabels?: boolean;
+}
+export interface IArcData {
+    /**
+     * Data to render in the chart for individual arc.
+     */
+    data: IChartDataPoint;
+    /**
+     * endAngle of the Arc
+     */
+    endAngle: number;
+    /**
+     * index of the Arc
+     */
+    index: number;
+    /**
+     * padAngle of the Arc
+     */
+    padAngle: number;
+    /**
+     * startAngle of the Arc
+     */
+    startAngle: number;
+    /**
+     * value of the Arc
+     */
+    value: number;
+}
+export interface IArcStyles {
+    /**
+     * Style set for the card header component root
+     */
+    root: IStyle;
+    /**
+     * styles for the focus
+     */
+    focusRing: IStyle;
+    /**
+     * Style for the arc labels
+     */
+    arcLabel: IStyle;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n  /**\n   * Theme\n   */\n  theme: ITheme;\n  /**\n   * Data to render in the Arc.\n   */\n  data?: IArcData;\n\n  /**\n   * Data to render focused Arc\n   */\n  focusData?: IArcData;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n  /**\n   * shape for  Arc.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  arc?: any;\n\n  /**\n   * innerRadius of the Arc.\n   */\n  innerRadius?: number;\n\n  /**\n   * outerRadius of the Arc.\n   */\n  outerRadius?: number;\n\n  /**\n   * Color for the Arc.\n   */\n  color: string;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop used to define the sum of all arc values\n   */\n  totalValue?: number;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IArcData {\n  /**\n   * Data to render in the chart for individual arc.\n   */\n  data: IChartDataPoint;\n  /**\n   * endAngle of the Arc\n   */\n  endAngle: number;\n  /**\n   * index of the Arc\n   */\n  index: number;\n  /**\n   * padAngle of the Arc\n   */\n  padAngle: number;\n  /**\n   * startAngle of the Arc\n   */\n  startAngle: number;\n  /**\n   * value of the Arc\n   */\n  value: number;\n}\n\nexport interface IArcStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: IStyle;\n\n  /**\n   * styles for the focus\n   */\n  focusRing: IStyle;\n\n  /**\n   * Style for the arc labels\n   */\n  arcLabel: IStyle;\n}\n"]}

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

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

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

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./Arc", "./Arc.types"], function (require, exports, tslib_1, Arc_1, Arc_types_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Arc_1, exports);
+    tslib_1.__exportStar(Arc_types_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/index.ts"],"names":[],"mappings":";;;IAAA,qCAAsB;IACtB,2CAA4B","sourcesContent":["export * from './Arc';\nexport * from './Arc.types';\n"]}

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ScaleOrdinal } from 'd3-scale';
+import { IAccessibilityProps } from '../../index';
+import { IChartDataPoint, IDonutChartProps } from './index';
+export interface IDonutChartState {
+    showHover?: boolean;
+    value?: string | undefined;
+    legend?: string | undefined;
+    _width?: number | undefined;
+    _height?: number | undefined;
+    activeLegend?: string;
+    color?: string | undefined;
+    xCalloutValue?: string;
+    yCalloutValue?: string;
+    focusedArcId?: string;
+    selectedLegend: string;
+    dataPointCalloutProps?: IChartDataPoint;
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export declare class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {
+    static defaultProps: Partial<IDonutChartProps>;
+    _colors: ScaleOrdinal<string, {}>;
+    private _classNames;
+    private _rootElem;
+    private _uniqText;
+    private _currentHoverElement;
+    private _calloutId;
+    private _calloutAnchorPoint;
+    private _emptyChartId;
+    static getDerivedStateFromProps(nextProps: Readonly<IDonutChartProps>, prevState: Readonly<IDonutChartState>): Partial<IDonutChartState> | null;
+    constructor(props: IDonutChartProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+    private _closeCallout;
+    private _elevateToMinimums;
+    private _setViewBox;
+    private _createLegends;
+    private _focusCallback;
+    private _hoverCallback;
+    private _onBlur;
+    private _hoverLeave;
+    private _handleChartMouseLeave;
+    private _valueInsideDonut;
+    private _toLocaleString;
+    /**
+     * This function returns
+     * the selected legend if there is one
+     * or the hovered legend if none of the legends is selected.
+     * Note: This won't work in case of multiple legends selection.
+     */
+    private _getHighlightedLegend;
+    private _isChartEmpty;
+    private _addDefaultColors;
+}

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

@@ -0,0 +1,241 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "../../index", "./Pie/index", "../../utilities/index", "../../utilities/locale-util"], function (require, exports, tslib_1, React, Utilities_1, Callout_1, react_focus_1, index_1, index_2, index_3, locale_util_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DonutChartBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var LEGEND_CONTAINER_HEIGHT = 40;
+    var DonutChartBase = exports.DonutChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(DonutChartBase, _super);
+        function DonutChartBase(props) {
+            var _this = _super.call(this, props) || this;
+            _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.state.selectedLegend === '' || _this.state.selectedLegend === 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) {
+                if (_this._calloutAnchorPoint !== data) {
+                    _this._calloutAnchorPoint = data;
+                    _this._currentHoverElement = e;
+                    _this.setState({
+                        /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */
+                        showHover: _this.state.selectedLegend === '' || _this.state.selectedLegend === data.legend,
+                        value: data.data.toString(),
+                        legend: data.legend,
+                        color: data.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._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 });
+                    })
+                    : [];
+            };
+            _this.state = {
+                showHover: false,
+                value: '',
+                legend: '',
+                _width: _this.props.width || 200,
+                _height: _this.props.height || 200,
+                activeLegend: '',
+                color: '',
+                xCalloutValue: '',
+                yCalloutValue: '',
+                selectedLegend: '',
+                focusedArcId: '',
+            };
+            _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');
+            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.render = function () {
+            var _a, _b;
+            var _this = this;
+            var data = (_a = this.props, _a.data), hideLegend = (_b = _a.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._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, 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, 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' }));
+        };
+        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 color = point.color;
+                // mapping data to the format Legends component needs
+                var legend = {
+                    title: point.legend,
+                    color: color,
+                    action: function () {
+                        if (_this.state.selectedLegend === point.legend) {
+                            _this.setState({ selectedLegend: '' });
+                        }
+                        else {
+                            _this.setState({ selectedLegend: point.legend });
+                        }
+                    },
+                    hoverAction: function () {
+                        _this._handleChartMouseLeave();
+                        _this.setState({ activeLegend: point.legend });
+                    },
+                    onMouseOutAction: function () {
+                        _this.setState({ activeLegend: '' });
+                    },
+                };
+                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)));
+            return legends;
+        };
+        DonutChartBase.prototype._hoverLeave = function () {
+            /**/
+        };
+        DonutChartBase.prototype._valueInsideDonut = function (valueInsideDonut, data) {
+            var _this = this;
+            var highlightedLegend = this._getHighlightedLegend();
+            if (valueInsideDonut !== undefined && (highlightedLegend !== '' || this.state.showHover)) {
+                var legendValue_1 = valueInsideDonut;
+                data.map(function (point, index) {
+                    if (point.legend === highlightedLegend || (_this.state.showHover && point.legend === _this.state.legend)) {
+                        legendValue_1 = point.yAxisCalloutData ? point.yAxisCalloutData : point.data;
+                    }
+                    return;
+                });
+                return legendValue_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.
+         * Note: This won't work in case of multiple legends selection.
+         */
+        DonutChartBase.prototype._getHighlightedLegend = function () {
+            return this.state.selectedLegend || 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));
+});
+//# sourceMappingURL=DonutChart.base.js.map