@fluentui/react-charting 5.12.24 → 5.12.27

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

@@ -0,0 +1,76 @@
+define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib/Utilities", "./Arc.styles", "../../../utilities/index"], function (require, exports, tslib_1, React, shape, Utilities_1, Arc_styles_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Arc = void 0;
+    var TEXT_PADDING = 5;
+    var 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._hoverOff = function () {
+                _this.props.hoverLeaveCallback();
+            };
+            _this._onBlur = function () {
+                _this.props.onBlurCallback();
+            };
+            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 = this.props, arc = _b.arc, href = _b.href, focusedArcId = _b.focusedArcId;
+            var getClassNames = 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": true, 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) : (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick, "aria-labelledby": this.props.calloutId, role: "text" }),
+                React.createElement("text", { textAnchor: 'middle', className: classNames.insideDonutString, y: 5 }, this.props.valueInsideDonut)));
+        };
+        Arc.prototype.componentDidUpdate = function () {
+            var href = this.props.href;
+            var getClassNames = Utilities_1.classNamesFunction();
+            var classNames = getClassNames(Arc_styles_1.getStyles, {
+                color: this.props.color,
+                href: href,
+                theme: this.props.theme,
+            });
+            index_1.wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius * 2 - TEXT_PADDING);
+        };
+        Arc.prototype._onFocus = function (data, id) {
+            this.props.onFocusCallback(data, id, this.currentRef.current);
+        };
+        Arc.prototype._hoverOn = function (data, mouseEvent) {
+            mouseEvent.persist();
+            if (this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '') {
+                this.props.hoverOnCallback(data, mouseEvent);
+            }
+        };
+        Arc.prototype._redirectToUrl = function (href) {
+            href ? (window.location.href = href) : '';
+        };
+        Arc.defaultProps = {
+            arc: shape.arc(),
+        };
+        return Arc;
+    }(React.Component));
+    exports.Arc = Arc;
+    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 * as shape from 'd3-shape';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\n\nexport interface IArcState {\n  isCalloutVisible?: boolean;\n}\n\nconst TEXT_PADDING: number = 5;\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: shape.arc(),\n  };\n\n  public state: {} = {};\n\n  private currentRef = React.createRef<SVGPathElement>();\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={true}\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-labelledby={this.props.calloutId}\n          role=\"text\"\n        />\n        <text textAnchor={'middle'} className={classNames.insideDonutString} y={5}>\n          {this.props.valueInsideDonut!}\n        </text>\n      </g>\n    );\n  }\n\n  public componentDidUpdate(): void {\n    const { href } = 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\n    wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius! * 2 - TEXT_PADDING);\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    if (this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '') {\n      this.props.hoverOnCallback!(data, mouseEvent);\n    }\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\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,37 @@
+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 _a;
+        var color = props.color, href = props.href, theme = props.theme;
+        return {
+            root: {
+                fill: color,
+                cursor: href ? 'pointer' : 'default',
+                stroke: Styling_1.DefaultPalette.white,
+                outline: 'transparent',
+                selectors: {
+                    '::-moz-focus-inner': {
+                        border: '0',
+                    },
+                },
+            },
+            focusRing: {
+                stroke: theme.semanticColors.focusBorder,
+                strokeWidth: 4,
+            },
+            insideDonutString: {
+                fontSize: Styling_1.FontSizes.large,
+                fill: theme.semanticColors.bodyText,
+                selectors: (_a = {},
+                    _a[Styling_1.HighContrastSelectorBlack] = {
+                        fill: 'rgb(179, 179, 179)',
+                    },
+                    _a),
+            },
+        };
+    };
+    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,wBAAc,CAAC,KAAK;gBAC5B,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;aACf;YACD,iBAAiB,EAAE;gBACjB,QAAQ,EAAE,mBAAS,CAAC,KAAK;gBACzB,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;gBACnC,SAAS;oBACP,GAAC,mCAAyB,IAAG;wBAC3B,IAAI,EAAE,oBAAoB;qBAC3B;uBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IA5BW,QAAA,SAAS,aA4BpB","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, FontSizes, HighContrastSelectorBlack } 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: DefaultPalette.white,\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    },\n    insideDonutString: {\n      fontSize: FontSizes.large,\n      fill: theme.semanticColors.bodyText,\n      selectors: {\n        [HighContrastSelectorBlack]: {\n          fill: 'rgb(179, 179, 179)',\n        },\n      },\n    },\n  };\n};\n"]}

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

@@ -0,0 +1,112 @@
+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;
+}
+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;
+    /**
+     * Style set for the inside donut string
+     */
+    insideDonutString: IStyle;
+    /**
+     * styles for the focus
+     */
+    focusRing: 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\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   * Style set for the inside donut string\n   */\n  insideDonutString: IStyle;\n\n  /**\n   * styles for the focus\n   */\n  focusRing: 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,44 @@
+import * as React from 'react';
+import * as scale 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;
+    isLegendSelected?: boolean;
+    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: scale.ScaleOrdinal<string, {}>;
+    private _classNames;
+    private _rootElem;
+    private _uniqText;
+    private _currentHoverElement;
+    private _calloutId;
+    private _calloutAnchorPoint;
+    static getDerivedStateFromProps(nextProps: Readonly<IDonutChartProps>, prevState: Readonly<IDonutChartState>): Partial<IDonutChartState> | null;
+    constructor(props: IDonutChartProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+    private _closeCallout;
+    private _setViewBox;
+    private _createLegends;
+    private _focusCallback;
+    private _hoverCallback;
+    private _onBlur;
+    private _hoverLeave;
+    private _handleChartMouseLeave;
+    private _valueInsideDonut;
+    private _toLocaleString;
+}

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

@@ -0,0 +1,206 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "../../index", "./Pie/index", "../../utilities/index"], function (require, exports, tslib_1, React, Utilities_1, Callout_1, react_focus_1, index_1, index_2, index_3) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DonutChartBase = void 0;
+    var getClassNames = Utilities_1.classNamesFunction();
+    var 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({
+                    showHover: true,
+                    value: data.data.toString(),
+                    legend: data.legend,
+                    activeLegend: data.legend,
+                    color: data.color,
+                    selectedLegend: data.legend,
+                    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({
+                        showHover: true,
+                        value: data.data.toString(),
+                        selectedLegend: data.legend,
+                        legend: data.legend,
+                        color: data.color,
+                        xCalloutValue: data.xAxisCalloutData,
+                        yCalloutValue: data.yAxisCalloutData,
+                        activeLegend: data.legend,
+                        dataPointCalloutProps: data,
+                        callOutAccessibilityData: data.callOutAccessibilityData,
+                    });
+                }
+            };
+            _this._onBlur = function () {
+                _this.setState({ showHover: false, focusedArcId: '', activeLegend: '', selectedLegend: 'none' });
+            };
+            _this._handleChartMouseLeave = function () {
+                _this._calloutAnchorPoint = null;
+                _this.setState({ showHover: false });
+            };
+            _this.state = {
+                showHover: false,
+                value: '',
+                legend: '',
+                _width: _this.props.width || 200,
+                _height: _this.props.height || 200,
+                activeLegend: '',
+                color: '',
+                isLegendSelected: false,
+                xCalloutValue: '',
+                yCalloutValue: '',
+                selectedLegend: 'none',
+                focusedArcId: '',
+            };
+            _this._hoverCallback = _this._hoverCallback.bind(_this);
+            _this._focusCallback = _this._focusCallback.bind(_this);
+            _this._hoverLeave = _this._hoverLeave.bind(_this);
+            _this._calloutId = Utilities_1.getId('callout');
+            _this._uniqText = Utilities_1.getId('_Pie_');
+            return _this;
+        }
+        DonutChartBase.getDerivedStateFromProps = function (nextProps, prevState) {
+            if (nextProps.height && nextProps.height !== prevState._height && nextProps.width !== prevState._width) {
+                var reducedHeight = nextProps.height / 5;
+                return { _width: nextProps.width, _height: nextProps.height - reducedHeight };
+            }
+            return null;
+        };
+        DonutChartBase.prototype.componentDidMount = function () {
+            /* 80% Height to the Chart
+               20% Height to the Legends
+            */
+            var reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;
+            this.setState({
+                _width: (this._rootElem && this._rootElem.offsetWidth),
+                _height: (this._rootElem && this._rootElem.offsetHeight - reducedHeight),
+            });
+        };
+        DonutChartBase.prototype.render = function () {
+            var _this = this;
+            var _a;
+            var _b = this.props, data = _b.data, _c = _b.hideLegend, hideLegend = _c === void 0 ? false : _c;
+            var palette = this.props.theme.palette;
+            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(data, palette);
+            var outerRadius = Math.min(this.state._width, this.state._height) / 2;
+            var chartData = data && ((_a = data.chartData) === null || _a === void 0 ? void 0 : _a.filter(function (d) { return d.data > 0; }));
+            var valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut, chartData);
+            return (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, isCircularNavigation: true },
+                    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.state.activeLegend, focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme })))),
+                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 }, this.props.calloutProps, 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)));
+        };
+        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 " + widthVal + " " + heightVal;
+            node.setAttribute('viewBox', viewbox);
+        };
+        DonutChartBase.prototype._createLegends = function (data, palette) {
+            var _this = this;
+            var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+            var legendDataItems = data &&
+                data.chartData.map(function (point, index) {
+                    var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                    // mapping data to the format Legends component needs
+                    var legend = {
+                        title: point.legend,
+                        color: color,
+                        action: function () {
+                            if (_this.state.isLegendSelected) {
+                                if (_this.state.activeLegend !== point.legend || _this.state.activeLegend === '') {
+                                    _this.setState({ activeLegend: point.legend, isLegendSelected: true });
+                                }
+                                else {
+                                    _this.setState({ activeLegend: point.legend });
+                                }
+                            }
+                            else {
+                                _this.setState({ activeLegend: point.legend, isLegendSelected: true });
+                            }
+                        },
+                        hoverAction: function () {
+                            if (_this.state.activeLegend !== point.legend || _this.state.activeLegend === '') {
+                                _this.setState({ activeLegend: point.legend });
+                            }
+                            else {
+                                _this.setState({ activeLegend: point.legend });
+                            }
+                        },
+                        onMouseOutAction: function () {
+                            _this.setState({
+                                showHover: false,
+                                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, selectedLegend: this.state.selectedLegend }, this.props.legendProps)));
+            return legends;
+        };
+        DonutChartBase.prototype._hoverLeave = function () {
+            this.setState({ activeLegend: '', selectedLegend: 'none', focusedArcId: '' });
+        };
+        DonutChartBase.prototype._valueInsideDonut = function (valueInsideDonut, data) {
+            var _this = this;
+            if (valueInsideDonut !== undefined && this.state.activeLegend !== '' && !this.state.showHover) {
+                var legendValue_1 = valueInsideDonut;
+                data.map(function (point, index) {
+                    if (point.legend === _this.state.activeLegend) {
+                        legendValue_1 = point.yAxisCalloutData ? point.yAxisCalloutData : point.data;
+                    }
+                    return;
+                });
+                return legendValue_1;
+            }
+            else {
+                return valueInsideDonut;
+            }
+        };
+        DonutChartBase.prototype._toLocaleString = function (data) {
+            var localeString = index_3.convertToLocaleString(data, this.props.culture);
+            if (!localeString) {
+                return data;
+            }
+            return localeString === null || localeString === void 0 ? void 0 : localeString.toString();
+        };
+        DonutChartBase.defaultProps = {
+            innerRadius: 0,
+        };
+        return DonutChartBase;
+    }(React.Component));
+    exports.DonutChartBase = DonutChartBase;
+});
+//# sourceMappingURL=DonutChart.base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport * as scale from 'd3-scale';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IChartProps, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\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  isLegendSelected?: boolean;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  focusedArcId?: string;\n  selectedLegend: string;\n  dataPointCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {\n  public static defaultProps: Partial<IDonutChartProps> = {\n    innerRadius: 0,\n  };\n  public _colors: scale.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\n  public static getDerivedStateFromProps(\n    nextProps: Readonly<IDonutChartProps>,\n    prevState: Readonly<IDonutChartState>,\n  ): Partial<IDonutChartState> | null {\n    if (nextProps.height && nextProps.height !== prevState._height && nextProps.width !== prevState._width) {\n      const reducedHeight = nextProps.height / 5;\n      return { _width: nextProps.width, _height: nextProps.height - reducedHeight };\n    }\n    return null;\n  }\n\n  constructor(props: IDonutChartProps) {\n    super(props);\n    this.state = {\n      showHover: false,\n      value: '',\n      legend: '',\n      _width: this.props.width || 200,\n      _height: this.props.height || 200,\n      activeLegend: '',\n      color: '',\n      isLegendSelected: false,\n      xCalloutValue: '',\n      yCalloutValue: '',\n      selectedLegend: 'none',\n      focusedArcId: '',\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  }\n  public componentDidMount(): void {\n    /* 80% Height to the Chart\n       20% Height to the Legends\n    */\n    const reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;\n    this.setState({\n      _width: (this._rootElem && this._rootElem!.offsetWidth)!,\n      _height: (this._rootElem && this._rootElem!.offsetHeight - reducedHeight!)!,\n    });\n  }\n\n  public render(): JSX.Element {\n    const { data, hideLegend = false } = this.props;\n    const { palette } = this.props.theme!;\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(data!, palette);\n    const outerRadius = Math.min(this.state._width!, this.state._height!) / 2;\n    const chartData = data && data.chartData?.filter((d: IChartDataPoint) => d.data! > 0);\n    const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n    return (\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} isCircularNavigation={true}>\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                onFocusCallback={this._focusCallback}\n                hoverOnCallback={this._hoverCallback}\n                hoverLeaveCallback={this._hoverLeave}\n                uniqText={this._uniqText}\n                onBlurCallback={this._onBlur}\n                activeArc={this.state.activeLegend}\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              />\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          preventDismissOnLostFocus={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  }\n\n  private _closeCallout = () => {\n    this.setState({\n      showHover: false,\n    });\n  };\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  private _createLegends(data: IChartProps, palette: IPalette): JSX.Element {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    const legendDataItems =\n      data &&\n      data!.chartData!.map((point: IChartDataPoint, index: number) => {\n        const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n        // mapping data to the format Legends component needs\n        const legend: ILegend = {\n          title: point.legend!,\n          color: color,\n          action: () => {\n            if (this.state.isLegendSelected) {\n              if (this.state.activeLegend !== point.legend || this.state.activeLegend === '') {\n                this.setState({ activeLegend: point.legend!, isLegendSelected: true });\n              } else {\n                this.setState({ activeLegend: point.legend });\n              }\n            } else {\n              this.setState({ activeLegend: point.legend!, isLegendSelected: true });\n            }\n          },\n          hoverAction: () => {\n            if (this.state.activeLegend !== point.legend || this.state.activeLegend === '') {\n              this.setState({ activeLegend: point.legend! });\n            } else {\n              this.setState({ activeLegend: point.legend });\n            }\n          },\n          onMouseOutAction: () => {\n            this.setState({\n              showHover: false,\n              activeLegend: '',\n            });\n          },\n        };\n        return legend;\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        selectedLegend={this.state.selectedLegend}\n        {...this.props.legendProps}\n      />\n    );\n    return legends;\n  }\n\n  private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n    this._currentHoverElement = element;\n    this.setState({\n      showHover: true,\n      value: data.data!.toString(),\n      legend: data.legend,\n      activeLegend: data.legend,\n      color: data.color!,\n      selectedLegend: data.legend!,\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      this.setState({\n        showHover: true,\n        value: data.data!.toString(),\n        selectedLegend: data.legend!,\n        legend: data.legend,\n        color: data.color!,\n        xCalloutValue: data.xAxisCalloutData!,\n        yCalloutValue: data.yAxisCalloutData!,\n        activeLegend: data.legend,\n        dataPointCalloutProps: data,\n        callOutAccessibilityData: data.callOutAccessibilityData!,\n      });\n    }\n  };\n  private _onBlur = (): void => {\n    this.setState({ showHover: false, focusedArcId: '', activeLegend: '', selectedLegend: 'none' });\n  };\n\n  private _hoverLeave(): void {\n    this.setState({ activeLegend: '', selectedLegend: 'none', focusedArcId: '' });\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    if (valueInsideDonut !== undefined && this.state.activeLegend !== '' && !this.state.showHover) {\n      let legendValue = valueInsideDonut;\n      data!.map((point: IChartDataPoint, index: number) => {\n        if (point.legend === this.state.activeLegend) {\n          legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n        }\n        return;\n      });\n      return legendValue;\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"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.tsx"],"names":[],"mappings":";;;;IAMA,4FAA4F;IAC/E,QAAA,UAAU,GAA8C,kBAAM,CAIzE,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.\nexport const DonutChart: React.FunctionComponent<IDonutChartProps> = styled<\n  IDonutChartProps,\n  IDonutChartStyleProps,\n  IDonutChartStyles\n>(DonutChartBase, getStyles);\n"]}

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

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