@fluentui/react-charting 5.21.28 → 5.21.30

package/lib-amd/components/LineChart/eventAnnotation/Textbox.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface ITextboxProps {
+    text: string;
+    width: number;
+    x: number;
+    y: number;
+    lineHeight: number;
+    textAnchor?: 'start' | 'middle' | 'end';
+    fontSize?: string;
+    fill?: string;
+}
+export declare const Textbox: React.FunctionComponent<ITextboxProps>;
+export {};

package/lib-amd/components/LineChart/eventAnnotation/Textbox.js

@@ -0,0 +1,40 @@
+define(["require", "exports", "tslib", "react", "d3-selection"], function (require, exports, tslib_1, React, d3_selection_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Textbox = void 0;
+    var Textbox = function (props) {
+        var textElementRef = React.useRef(null);
+        var wrapWords = function () {
+            if (!textElementRef.current) {
+                return;
+            }
+            var text = (0, d3_selection_1.select)(textElementRef.current);
+            var words = props.text.split(/\s+/);
+            var line = [];
+            var tspan = text.append('tspan');
+            var numLines = 0;
+            words.forEach(function (word) {
+                line.push(word);
+                tspan.text(line.join(' '));
+                var node = tspan.node();
+                if (node && node.getComputedTextLength() > props.width && line.length > 1) {
+                    numLines++;
+                    line.pop();
+                    tspan.text(line.join(' '));
+                    line = [word];
+                    tspan = text.append('tspan').text(word).attr('dy', props.lineHeight).attr('x', props.x);
+                }
+            });
+            // bottom aligns text
+            text.attr('dy', -numLines * props.lineHeight);
+            return function () {
+                text.selectAll('tspan').remove();
+            };
+        };
+        React.useEffect(wrapWords);
+        var lineHeight = props.lineHeight, rest = tslib_1.__rest(props, ["lineHeight"]);
+        return React.createElement("text", tslib_1.__assign({ ref: textElementRef }, rest));
+    };
+    exports.Textbox = Textbox;
+});
+//# sourceMappingURL=Textbox.js.map

package/lib-amd/components/LineChart/eventAnnotation/Textbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textbox.js","sourceRoot":"../src/","sources":["components/LineChart/eventAnnotation/Textbox.tsx"],"names":[],"mappings":";;;;IAcO,IAAM,OAAO,GAA2C,UAAA,KAAK;QAClE,IAAM,cAAc,GAAoC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAE3E,IAAM,SAAS,GAAG;YAChB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;gBAC3B,OAAO;aACR;YACD,IAAM,IAAI,GAAG,IAAA,qBAAM,EAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAC5C,IAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACtC,IAAI,IAAI,GAAa,EAAE,CAAC;YACxB,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAkB,OAAO,CAAC,CAAC;YAClD,IAAI,QAAQ,GAAG,CAAC,CAAC;YAEjB,KAAK,CAAC,OAAO,CAAC,UAAA,IAAI;gBAChB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAChB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC3B,IAAM,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;gBAC1B,IAAI,IAAI,IAAI,IAAI,CAAC,qBAAqB,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;oBACzE,QAAQ,EAAE,CAAC;oBACX,IAAI,CAAC,GAAG,EAAE,CAAC;oBACX,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;oBAC3B,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;oBACd,KAAK,GAAG,IAAI,CAAC,MAAM,CAAkB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;iBAC1G;YACH,CAAC,CAAC,CAAC;YACH,qBAAqB;YACrB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;YAE9C,OAAO;gBACL,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC;YACnC,CAAC,CAAC;QACJ,CAAC,CAAC;QACF,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAEnB,IAAA,UAAU,GAAc,KAAK,WAAnB,EAAK,IAAI,kBAAK,KAAK,EAA/B,cAAuB,CAAF,CAAW;QAEtC,OAAO,+CAAM,GAAG,EAAE,cAAc,IAAM,IAAI,EAAI,CAAC;IACjD,CAAC,CAAC;IArCW,QAAA,OAAO,WAqClB","sourcesContent":["import * as React from 'react';\nimport { select } from 'd3-selection';\n\ninterface ITextboxProps {\n  text: string;\n  width: number;\n  x: number;\n  y: number;\n  lineHeight: number;\n  textAnchor?: 'start' | 'middle' | 'end';\n  fontSize?: string;\n  fill?: string;\n}\n\nexport const Textbox: React.FunctionComponent<ITextboxProps> = props => {\n  const textElementRef: React.RefObject<SVGTextElement> = React.useRef(null);\n\n  const wrapWords = () => {\n    if (!textElementRef.current) {\n      return;\n    }\n    const text = select(textElementRef.current);\n    const words = props.text.split(/\\s+/);\n    let line: string[] = [];\n    let tspan = text.append<SVGTSpanElement>('tspan');\n    let numLines = 0;\n\n    words.forEach(word => {\n      line.push(word);\n      tspan.text(line.join(' '));\n      const node = tspan.node();\n      if (node && node.getComputedTextLength() > props.width && line.length > 1) {\n        numLines++;\n        line.pop();\n        tspan.text(line.join(' '));\n        line = [word];\n        tspan = text.append<SVGTSpanElement>('tspan').text(word).attr('dy', props.lineHeight).attr('x', props.x);\n      }\n    });\n    // bottom aligns text\n    text.attr('dy', -numLines * props.lineHeight);\n\n    return () => {\n      text.selectAll('tspan').remove();\n    };\n  };\n  React.useEffect(wrapWords);\n\n  const { lineHeight, ...rest } = props;\n\n  return <text ref={textElementRef} {...rest} />;\n};\n"]}

package/lib-amd/components/LineChart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './LineChart';
+export * from './LineChart.types';
+export * from './eventAnnotation/Textbox';

package/lib-amd/components/LineChart/index.js

@@ -0,0 +1,8 @@
+define(["require", "exports", "tslib", "./LineChart", "./LineChart.types", "./eventAnnotation/Textbox"], function (require, exports, tslib_1, LineChart_1, LineChart_types_1, Textbox_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(LineChart_1, exports);
+    tslib_1.__exportStar(LineChart_types_1, exports);
+    tslib_1.__exportStar(Textbox_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/LineChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/LineChart/index.ts"],"names":[],"mappings":";;;IAAA,2CAA4B;IAC5B,iDAAkC;IAClC,yCAA0C","sourcesContent":["export * from './LineChart';\nexport * from './LineChart.types';\nexport * from './eventAnnotation/Textbox';\n"]}

package/lib-amd/components/PieChart/Arc/Arc.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IArcProps, IArcState } from './Arc.types';
+export declare class Arc extends React.Component<IArcProps, IArcState> {
+    static defaultProps: Partial<IArcProps>;
+    protected _arcId: string;
+    static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null;
+    constructor(props: IArcProps);
+    updateChart: (newProps: IArcProps) => void;
+    render(): JSX.Element;
+    protected _onFocus: () => void;
+    protected _onBlur: () => void;
+}
+export declare class LabeledArc extends Arc {
+    private _isRTL;
+    constructor(props: IArcProps);
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,85 @@
+define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib/Utilities", "./Arc.styles", "../../../utilities/utilities", "../../../utilities/SVGTooltipText", "../../../utilities/locale-util"], function (require, exports, tslib_1, React, d3_shape_1, Utilities_1, Arc_styles_1, utilities_1, SVGTooltipText_1, locale_util_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.LabeledArc = exports.Arc = void 0;
+    var Arc = exports.Arc = /** @class */ (function (_super) {
+        tslib_1.__extends(Arc, _super);
+        function Arc(props) {
+            var _this = _super.call(this, props) || this;
+            _this.updateChart = function (newProps) {
+                _updateChart(newProps);
+            };
+            _this._onFocus = function () {
+                _this.setState({ isArcFocused: true });
+            };
+            _this._onBlur = function () {
+                _this.setState({ isArcFocused: false });
+            };
+            _this.state = {
+                isArcFocused: false,
+            };
+            _this._arcId = (0, Utilities_1.getId)('piechart_arc');
+            return _this;
+        }
+        Arc.getDerivedStateFromProps = function (nextProps) {
+            _updateChart(nextProps);
+            return null;
+        };
+        Arc.prototype.render = function () {
+            var _this = this;
+            var _a;
+            var arc = this.props.arc;
+            var getClassNames = (0, Utilities_1.classNamesFunction)();
+            var classNames = getClassNames(function (props) { return (0, Arc_styles_1.getStyles)(props, _this.props.theme); }, tslib_1.__assign({}, this.props));
+            return (React.createElement("path", { d: arc(this.props.data), className: "".concat(this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot), onClick: (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick }));
+        };
+        Arc.defaultProps = {
+            arc: (0, d3_shape_1.arc)(),
+        };
+        return Arc;
+    }(React.Component));
+    var LabeledArc = /** @class */ (function (_super) {
+        tslib_1.__extends(LabeledArc, _super);
+        function LabeledArc(props) {
+            var _this = _super.call(this, props) || this;
+            _this._isRTL = (0, Utilities_1.getRTL)();
+            _this._arcId = (0, Utilities_1.getId)('piechart_arc');
+            return _this;
+        }
+        LabeledArc.prototype.render = function () {
+            var _this = this;
+            var _a, _b;
+            var _c = this.props, data = _c.data, culture = _c.culture;
+            var gap = 4;
+            // placing the labels on the outside arc
+            var _d = (0, d3_shape_1.arc)().centroid({
+                endAngle: (data === null || data === void 0 ? void 0 : data.endAngle) || 0,
+                startAngle: (data === null || data === void 0 ? void 0 : data.startAngle) || 0,
+                padAngle: data === null || data === void 0 ? void 0 : data.padAngle,
+                innerRadius: ((_a = this.props) === null || _a === void 0 ? void 0 : _a.outerRadius) || 0,
+                outerRadius: ((_b = this.props) === null || _b === void 0 ? void 0 : _b.outerRadius) || 0 + gap,
+            }), labelX = _d[0], labelY = _d[1];
+            var getClassNames = (0, Utilities_1.classNamesFunction)();
+            var classNames = getClassNames(function (props) { return (0, Arc_styles_1.getStyles)(props, _this.props.theme); });
+            var angle = (((data === null || data === void 0 ? void 0 : data.startAngle) || 0) + ((data === null || data === void 0 ? void 0 : data.endAngle) || 0)) / 2;
+            var content = "".concat(data === null || data === void 0 ? void 0 : data.data.x, "-").concat((0, locale_util_1.convertToLocaleString)(data === null || data === void 0 ? void 0 : data.data.y, culture));
+            return (React.createElement("g", { className: "".concat(classNames.arc, " arc"), "data-is-focusable": true, id: this._arcId, onFocus: this._onFocus, onBlur: this._onBlur, "aria-label": content, role: "img" },
+                _super.prototype.render.call(this),
+                React.createElement(SVGTooltipText_1.SVGTooltipText, { content: content, textProps: {
+                        x: labelX,
+                        y: labelY,
+                        dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',
+                        textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',
+                        'aria-label': "".concat(data === null || data === void 0 ? void 0 : data.data.x, "-").concat((0, locale_util_1.convertToLocaleString)(data === null || data === void 0 ? void 0 : data.data.y, culture)),
+                        className: classNames.arcText,
+                    }, isTooltipVisibleProp: this.state.isArcFocused, shouldReceiveFocus: false, maxWidth: 40, wrapContent: utilities_1.wrapContent })));
+        };
+        return LabeledArc;
+    }(Arc));
+    exports.LabeledArc = LabeledArc;
+    function _updateChart(newProps) {
+        newProps.arc.innerRadius(newProps.innerRadius);
+        newProps.arc.outerRadius(newProps.outerRadius);
+    }
+});
+//# sourceMappingURL=Arc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { IArcProps, IArcState, IArcStyles } from './Arc.types';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { wrapContent } from '../../../utilities/utilities';\nimport { SVGTooltipText } from '../../../utilities/SVGTooltipText';\nimport { convertToLocaleString } from '../../../utilities/locale-util';\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: d3Arc(),\n  };\n\n  protected _arcId: string;\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public constructor(props: IArcProps) {\n    super(props);\n    this.state = {\n      isArcFocused: false,\n    };\n\n    this._arcId = getId('piechart_arc');\n  }\n\n  public updateChart = (newProps: IArcProps) => {\n    _updateChart(newProps);\n  };\n\n  public render(): JSX.Element {\n    const { arc } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(props => getStyles(props, this.props.theme), { ...this.props });\n\n    return (\n      <path\n        d={arc(this.props.data)}\n        className={`${this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot}`}\n        onClick={this.props.data?.data.onClick}\n      />\n    );\n  }\n\n  protected _onFocus = () => {\n    this.setState({ isArcFocused: true });\n  };\n\n  protected _onBlur = () => {\n    this.setState({ isArcFocused: false });\n  };\n}\n\nexport class LabeledArc extends Arc {\n  private _isRTL = getRTL();\n\n  public constructor(props: IArcProps) {\n    super(props);\n    this._arcId = getId('piechart_arc');\n  }\n\n  public render(): JSX.Element {\n    const { data, culture } = this.props;\n    const gap = 4;\n    // placing the labels on the outside arc\n    const [labelX, labelY] = d3Arc().centroid({\n      endAngle: data?.endAngle || 0,\n      startAngle: data?.startAngle || 0,\n      padAngle: data?.padAngle,\n      innerRadius: this.props?.outerRadius || 0,\n      outerRadius: this.props?.outerRadius || 0 + gap,\n    });\n\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(props => getStyles(props, this.props.theme));\n\n    const angle = ((data?.startAngle || 0) + (data?.endAngle || 0)) / 2;\n\n    const content = `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`;\n\n    return (\n      <g\n        className={`${classNames.arc} arc`}\n        data-is-focusable={true}\n        id={this._arcId}\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        aria-label={content}\n        role=\"img\"\n      >\n        {super.render()}\n        <SVGTooltipText\n          content={content}\n          textProps={{\n            x: labelX,\n            y: labelY,\n            dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',\n            textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',\n            'aria-label': `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`,\n            className: classNames.arcText,\n          }}\n          isTooltipVisibleProp={this.state.isArcFocused}\n          shouldReceiveFocus={false}\n          maxWidth={40}\n          wrapContent={wrapContent}\n        />\n      </g>\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/PieChart/Arc/Arc.styles.d.ts

@@ -0,0 +1,3 @@
+import { IArcProps, IArcStyles } from './Arc.types';
+import { ITheme } from '@fluentui/react/lib/Styling';
+export declare const getStyles: (props: IArcProps, theme: ITheme | undefined) => IArcStyles;

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

@@ -0,0 +1,16 @@
+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, theme) {
+        var color = props.color;
+        return {
+            arcRoot: { fill: color },
+            arcRootFocussed: { fill: color, stroke: (theme === null || theme === void 0 ? void 0 : theme.palette.black) || Styling_1.DefaultPalette.black, strokeWidth: 2 },
+            arc: { outline: 'none' },
+            arcText: { fill: (theme === null || theme === void 0 ? void 0 : theme.palette.black) || Styling_1.DefaultPalette.black, outline: 'none' },
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=Arc.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAgB,EAAE,KAAyB;QAC3D,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,OAAO;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,eAAe,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,wBAAc,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE;YACtG,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YACxB,OAAO,EAAE,EAAE,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,wBAAc,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE;SACjF,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,SAAS,aAQpB","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, ITheme } from '@fluentui/react/lib/Styling';\nexport const getStyles = (props: IArcProps, theme: ITheme | undefined): IArcStyles => {\n  const { color } = props;\n  return {\n    arcRoot: { fill: color },\n    arcRootFocussed: { fill: color, stroke: theme?.palette.black || DefaultPalette.black, strokeWidth: 2 },\n    arc: { outline: 'none' },\n    arcText: { fill: theme?.palette.black || DefaultPalette.black, outline: 'none' },\n  };\n};\n"]}

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

@@ -0,0 +1,73 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IDataPoint } from '../PieChart.types';
+export interface IArcProps {
+    /**
+     * Data to render in the Arc.
+     */
+    data?: IArcData;
+    /**
+     * shape for  Arc.
+     */
+    arc?: any;
+    /**
+     * innerRadius of the Arc.
+     */
+    innerRadius?: number;
+    /**
+     * outerRadius of the Arc.
+     */
+    outerRadius?: number;
+    /**
+     * Color for the Arc.
+     */
+    color: string;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * to pass the theme
+     */
+    theme?: ITheme;
+}
+export interface IArcState {
+    /**
+     * The state controls, whether the arc needs to be focused or not
+     */
+    isArcFocused?: boolean;
+}
+export interface IArcData {
+    /**
+     * Data to render in the chart for individual arc.
+     */
+    data: IDataPoint;
+    /**
+     * 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
+     */
+    arcRoot: IStyle;
+    arc: IStyle;
+    arcRootFocussed: IStyle;
+    arcText: IStyle;
+}

package/lib-amd/components/PieChart/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/PieChart/Arc/Arc.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IArcProps {\n  /**\n   * Data to render in the Arc.\n   */\n  data?: IArcData;\n\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   * outerRadius of the Arc.\n   */\n  outerRadius?: number;\n  /**\n   * Color for the Arc.\n   */\n  color: string;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n  /**\n   * to pass the theme\n   */\n  theme?: ITheme;\n}\n\nexport interface IArcState {\n  /**\n   * The state controls, whether the arc needs to be focused or not\n   */\n  isArcFocused?: boolean;\n}\n\nexport interface IArcData {\n  /**\n   * Data to render in the chart for individual arc.\n   */\n  data: IDataPoint;\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  arcRoot: IStyle;\n\n  arc: IStyle;\n\n  arcRootFocussed: IStyle;\n\n  arcText: IStyle;\n}\n"]}

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

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

package/lib-amd/components/PieChart/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/PieChart/Arc/index.js.map

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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IPieProps } from './Pie.types';
+import { IArcData } from '../Arc/Arc.types';
+export declare class Pie extends React.Component<IPieProps, {}> {
+    static defaultProps: Partial<IPieProps>;
+    private colors;
+    constructor(props: IPieProps);
+    arcGenerator: (d: IArcData, i: number) => JSX.Element;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,43 @@
+define(["require", "exports", "tslib", "react", "d3-shape", "d3-scale", "../Arc/Arc", "@fluentui/react-focus", "../../../utilities/colors"], function (require, exports, tslib_1, React, d3_shape_1, d3_scale_1, Arc_1, react_focus_1, colors_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Pie = void 0;
+    var Pie = exports.Pie = /** @class */ (function (_super) {
+        tslib_1.__extends(Pie, _super);
+        function Pie(props) {
+            var _this = _super.call(this, props) || this;
+            _this.arcGenerator = function (d, i) {
+                return (React.createElement(Arc_1.LabeledArc, { culture: _this.props.culture, key: i, data: d, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: "".concat(_this.colors(i)), theme: _this.props.theme }));
+            };
+            return _this;
+        }
+        Pie.prototype.render = function () {
+            var _a, _b;
+            var _this = this;
+            // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();
+            var pie = (_a = this.props, _a.pie), data = _a.data, width = _a.width, height = _a.height, chartTitle = _a.chartTitle, theme = _a.theme;
+            var defaultColors = [];
+            if (data && !this.props.colors) {
+                for (var i = 0; i < data.length; i++) {
+                    defaultColors.push((0, colors_1.getNextColor)(i, 0, theme === null || theme === void 0 ? void 0 : theme.isInverted));
+                }
+            }
+            var colors = (_b = this.props.colors, _b === void 0 ? defaultColors : _b);
+            this.colors = (0, d3_scale_1.scaleOrdinal)().range(colors.map(function (color) { return (0, colors_1.getColorFromToken)(color); }));
+            var piechart = pie(data);
+            var translate = "translate(".concat(width / 2, ", ").concat(height / 2, ")");
+            return (React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.domOrder },
+                React.createElement("svg", { width: width, height: height, "aria-label": chartTitle },
+                    React.createElement("g", { className: "pie", transform: translate }, piechart.map(function (d, i) { return _this.arcGenerator(d, i); })))));
+        };
+        Pie.defaultProps = {
+            pie: (0, d3_shape_1.pie)()
+                .padAngle(0.01)
+                .sort(null)
+                /* eslint-disable @typescript-eslint/no-explicit-any */
+                .value(function (d) { return d.y; }),
+        };
+        return Pie;
+    }(React.Component));
+});
+//# sourceMappingURL=Pie.js.map

package/lib-amd/components/PieChart/Pie/Pie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;IASA;QAAyB,+BAA8B;QAUrD,aAAY,KAAgB;YAA5B,YACE,kBAAM,KAAK,CAAC,SACb;YAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;gBAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,EAC1B,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,GACvB,CACH,CAAC;YACJ,CAAC,CAAC;;QAdF,CAAC;QAgBM,oBAAM,GAAb;;YAAA,iBA0BC;YAzBC,qEAAqE;YAC7D,IAAA,GAAG,IAAL,KAAkD,IAAI,CAAC,KAAK,SAAvD,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAA,CAAgB;YAEnE,IAAM,aAAa,GAAkB,EAAE,CAAC;YACxC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;gBAC9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACpC,aAAa,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC,CAAC,CAAC;iBAC3D;aACF;YACO,IAAA,MAAM,IAAN,KAA2B,IAAI,CAAC,KAAK,OAAf,kBAAb,aAAa,MAAA,CAAgB;YAE9C,IAAI,CAAC,MAAM,GAAG,IAAA,uBAAY,GAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,0BAAiB,EAAC,KAAK,CAAC,EAAxB,CAAwB,CAAC,CAAC,CAAC;YAElF,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;YAE3D,OAAO,CACL,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,QAAQ;gBAC/C,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;oBACvD,2BAAG,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,SAAS,IACpC,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,CAChE,CACA,CACI,CACb,CAAC;QACJ,CAAC;QArDa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,IAAA,cAAK,GAAE;iBACT,QAAQ,CAAC,IAAI,CAAC;iBACd,IAAI,CAAC,IAAI,CAAC;gBACX,uDAAuD;iBACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;SAC1B,AANyB,CAMxB;QAgDJ,UAAC;KAAA,AAvDD,CAAyB,KAAK,CAAC,SAAS,GAuDvC","sourcesContent":["import * as React from 'react';\nimport { pie as d3Pie } from 'd3-shape';\nimport { ScaleOrdinal, scaleOrdinal } from 'd3-scale';\nimport { IPieProps } from './Pie.types';\nimport { LabeledArc } from '../Arc/Arc';\nimport { IArcData } from '../Arc/Arc.types';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { getColorFromToken, getNextColor } from '../../../utilities/colors';\n\nexport class Pie extends React.Component<IPieProps, {}> {\n  public static defaultProps: Partial<IPieProps> = {\n    pie: d3Pie()\n      .padAngle(0.01)\n      .sort(null)\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .value((d: any) => d.y),\n  };\n  private colors: ScaleOrdinal<string | number, any>;\n\n  constructor(props: IPieProps) {\n    super(props);\n  }\n\n  public arcGenerator = (d: IArcData, i: number): JSX.Element => {\n    return (\n      <LabeledArc\n        culture={this.props.culture}\n        key={i}\n        data={d}\n        innerRadius={this.props.innerRadius}\n        outerRadius={this.props.outerRadius}\n        color={`${this.colors(i)}`}\n        theme={this.props.theme}\n      />\n    );\n  };\n\n  public render(): JSX.Element {\n    // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();\n    const { pie, data, width, height, chartTitle, theme } = this.props;\n\n    const defaultColors: Array<string> = [];\n    if (data && !this.props.colors) {\n      for (let i = 0; i < data.length; i++) {\n        defaultColors.push(getNextColor(i, 0, theme?.isInverted));\n      }\n    }\n    const { colors = defaultColors } = this.props;\n\n    this.colors = scaleOrdinal().range(colors.map(color => getColorFromToken(color)));\n\n    const piechart = pie(data);\n    const translate = `translate(${width / 2}, ${height / 2})`;\n\n    return (\n      <FocusZone direction={FocusZoneDirection.domOrder}>\n        <svg width={width} height={height} aria-label={chartTitle}>\n          <g className=\"pie\" transform={translate}>\n            {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}\n          </g>\n        </svg>\n      </FocusZone>\n    );\n  }\n}\n"]}

package/lib-amd/components/PieChart/Pie/Pie.styles.d.ts

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

package/lib-amd/components/PieChart/Pie/Pie.styles.js

@@ -0,0 +1,12 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        return {
+            root: {},
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=Pie.styles.js.map

package/lib-amd/components/PieChart/Pie/Pie.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pie.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAgB;QACxC,OAAO;YACL,IAAI,EAAE,EAAE;SACT,CAAC;IACJ,CAAC,CAAC;IAJW,QAAA,SAAS,aAIpB","sourcesContent":["import { IPieProps, IPieStyles } from './Pie.types';\n\nexport const getStyles = (props: IPieProps): IPieStyles => {\n  return {\n    root: {},\n  };\n};\n"]}

package/lib-amd/components/PieChart/Pie/Pie.types.d.ts

@@ -0,0 +1,47 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IDataPoint } from '../PieChart.types';
+export interface IPieProps {
+    /**
+     * Width of the Pie.
+     */
+    width: number;
+    /**
+     * Height of the Pie.
+     */
+    height: number;
+    /**
+     * outerRadius of the Pie.
+     */
+    outerRadius: number;
+    /**
+     * innerRadius of the Pie.
+     */
+    innerRadius: number;
+    /**
+     * Data to render in the Pie.
+     */
+    data: IDataPoint[];
+    /**
+     * colors to render in the Pie.
+     */
+    colors?: string[];
+    /**
+     * Title to apply to the whole chart.
+     */
+    chartTitle?: string;
+    /**
+     * shape for pie.
+     */
+    pie?: any;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    theme?: ITheme;
+}
+export interface IPieStyles {
+    /**
+     * Style set for the card header component root
+     */
+    root: IStyle;
+}

package/lib-amd/components/PieChart/Pie/Pie.types.js

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

package/lib-amd/components/PieChart/Pie/Pie.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pie.types.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IPieProps {\n  /**\n   * Width of the Pie.\n   */\n  width: number;\n  /**\n   * Height of the Pie.\n   */\n  height: number;\n  /**\n   * outerRadius of the Pie.\n   */\n  outerRadius: number;\n  /**\n   * innerRadius of the Pie.\n   */\n  innerRadius: number;\n  /**\n   * Data to render in the Pie.\n   */\n  data: IDataPoint[];\n  /**\n   * colors to render in the Pie.\n   */\n  colors?: string[];\n  /**\n   * Title to apply to the whole chart.\n   */\n  chartTitle?: string;\n  /**\n   * shape for pie.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  pie?: any;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  theme?: ITheme;\n}\n\nexport interface IPieStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: IStyle;\n}\n"]}

package/lib-amd/components/PieChart/Pie/index.d.ts

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

package/lib-amd/components/PieChart/Pie/index.js

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

package/lib-amd/components/PieChart/Pie/index.js.map

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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IPieChartProps } from './PieChart.types';
+export declare class PieChartBase extends React.Component<IPieChartProps, {}> {
+    static defaultProps: Partial<IPieChartProps>;
+    private _classNames;
+    private _emptyChartId;
+    constructor(props: IPieChartProps);
+    render(): JSX.Element;
+    private _isChartEmpty;
+}

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

@@ -0,0 +1,46 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "./Pie/Pie"], function (require, exports, tslib_1, React, Utilities_1, Pie_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PieChartBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var PieChartBase = exports.PieChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(PieChartBase, _super);
+        function PieChartBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._emptyChartId = (0, Utilities_1.getId)('_PieChart_empty');
+            return _this;
+        }
+        PieChartBase.prototype.render = function () {
+            var _a, _b;
+            var data = (_a = this.props, _a.data), width = _a.width, height = _a.height, colors = _a.colors, chartTitle = _a.chartTitle;
+            var theme = (_b = this.props, _b.theme), className = _b.className, styles = _b.styles, culture = _b.culture;
+            this._classNames = getClassNames(styles, {
+                theme: theme,
+                width: width,
+                height: height,
+                className: className,
+            });
+            var TEXT_MAX_WIDTH = 40;
+            var TEXT_LINE_HEIGHT = 16;
+            /**
+             * The radius for the pie chart is computed based on the space available inside the svg
+             * after subtracting the max amount of space that can be used by the text in pie chart
+             */
+            var radius = Math.min(width - 2 * TEXT_MAX_WIDTH, height - 2 * TEXT_LINE_HEIGHT) / 2;
+            var outerRadius = radius;
+            return !this._isChartEmpty() ? (React.createElement("div", { className: this._classNames.root },
+                this.props.chartTitle && React.createElement("p", { className: this._classNames.chartTitle }, this.props.chartTitle),
+                React.createElement(Pie_1.Pie, { culture: culture, width: width, height: height, outerRadius: outerRadius, innerRadius: 1, data: data, colors: colors, chartTitle: chartTitle, theme: theme }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+        };
+        PieChartBase.prototype._isChartEmpty = function () {
+            return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(function (item) { return item.y > 0; }).length > 0);
+        };
+        PieChartBase.defaultProps = {
+            data: [],
+            width: 600,
+            height: 350,
+        };
+        return PieChartBase;
+    }(React.Component));
+});
+//# sourceMappingURL=PieChart.base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";;;;IAMA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;IAEjF;QAAkC,wCAAmC;QASnE,sBAAmB,KAAqB;YAAxC,YACE,kBAAM,KAAK,CAAC,SAEb;YADC,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,iBAAiB,CAAC,CAAC;;QAChD,CAAC;QAEM,6BAAM,GAAb;;YACU,IAAA,IAAI,IAAN,KAA8C,IAAI,CAAC,KAAK,UAAlD,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,CAAgB;YAEvD,IAAA,KAAK,IAAP,KAAwC,IAAI,CAAC,KAAK,WAA3C,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,CAAgB;YACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,KAAK,EAAE,KAAM;gBACb,MAAM,EAAE,MAAO;gBACf,SAAS,WAAA;aACV,CAAC,CAAC;YAEH,IAAM,cAAc,GAAG,EAAE,CAAC;YAC1B,IAAM,gBAAgB,GAAG,EAAE,CAAC;YAE5B;;;eAGG;YAEH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,GAAG,CAAC,GAAG,cAAc,EAAE,MAAO,GAAG,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;YACzF,IAAM,WAAW,GAAG,MAAM,CAAC;YAE3B,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;gBAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;gBAChG,oBAAC,SAAG,IACF,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAM,EACb,MAAM,EAAE,MAAO,EACf,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,MAAO,EACf,UAAU,EAAE,UAAW,EACvB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;QACJ,CAAC;QAEO,oCAAa,GAArB;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnH,CAAC;QA9Da,yBAAY,GAA4B;YACpD,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,CAAC;QA2DJ,mBAAC;KAAA,AAhED,CAAkC,KAAK,CAAC,SAAS,GAgEhD","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { Pie } from './Pie/Pie';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\n\nconst getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();\n\nexport class PieChartBase extends React.Component<IPieChartProps, {}> {\n  public static defaultProps: Partial<IPieChartProps> = {\n    data: [],\n    width: 600,\n    height: 350,\n  };\n  private _classNames: IProcessedStyleSet<IPieChartStyles>;\n  private _emptyChartId: string;\n\n  public constructor(props: IPieChartProps) {\n    super(props);\n    this._emptyChartId = getId('_PieChart_empty');\n  }\n\n  public render(): JSX.Element {\n    const { data, width, height, colors, chartTitle } = this.props;\n\n    const { theme, className, styles, culture } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      width: width!,\n      height: height!,\n      className,\n    });\n\n    const TEXT_MAX_WIDTH = 40;\n    const TEXT_LINE_HEIGHT = 16;\n\n    /**\n     * The radius for the pie chart is computed based on the space available inside the svg\n     * after subtracting the max amount of space that can be used by the text in pie chart\n     */\n\n    const radius = Math.min(width! - 2 * TEXT_MAX_WIDTH, height! - 2 * TEXT_LINE_HEIGHT) / 2;\n    const outerRadius = radius;\n\n    return !this._isChartEmpty() ? (\n      <div className={this._classNames.root}>\n        {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}\n        <Pie\n          culture={culture}\n          width={width!}\n          height={height!}\n          outerRadius={outerRadius}\n          innerRadius={1}\n          data={data!}\n          colors={colors!}\n          chartTitle={chartTitle!}\n          theme={theme}\n        />\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  private _isChartEmpty(): boolean {\n    return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.tsx"],"names":[],"mappings":";;;;IAMA,0FAA0F;IAC1F;;;OAGG;IACU,QAAA,QAAQ,GAA4C,IAAA,kBAAM,EAIrE,4BAAY,EAAE,2BAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { PieChartBase } from './PieChart.base';\nimport { getStyles } from './PieChart.styles';\n\n// Create a PieChart variant which uses these default styles and this styled subcomponent.\n/**\n * Piechart component\n * {@docCategory PieChart}\n */\nexport const PieChart: React.FunctionComponent<IPieChartProps> = styled<\n  IPieChartProps,\n  IPieChartStyleProps,\n  IPieChartStyles\n>(PieChartBase, getStyles);\n"]}

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

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