@fluentui/react-charting 5.23.62 → 5.23.64

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

@@ -0,0 +1,42 @@
+define(["require", "exports", "react", "@fluentui/react", "./Textbox", "../../../utilities/colors"], function (require, exports, React, react_1, Textbox_1, colors_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.LabelLink = void 0;
+    var LabelLink = function (props) {
+        var _a, _b;
+        var gRef = React.useRef(null);
+        var _c = React.useState(false), showCard = _c[0], setShowCard = _c[1];
+        var onDismiss = function () { return setShowCard(false); };
+        var onClick = function () { return setShowCard(true); };
+        var onRenderCell = function (i) { return React.createElement("div", { "data-is-focusable": true }, i && i()); };
+        var callout = null;
+        if (showCard) {
+            var cards = props.labelDef.aggregatedIdx.map(function (i) { return props.lineDefs[i].onRenderCard; }).filter(function (c) { return !!c; });
+            if (cards.length > 0) {
+                callout = (React.createElement(react_1.Callout, { target: gRef.current, 
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onDismiss: onDismiss, setInitialFocus: true, role: "dialog" },
+                    React.createElement(react_1.FocusZone, { isCircularNavigation: true, direction: react_1.FocusZoneDirection.vertical },
+                        React.createElement(react_1.List, { items: cards, role: "alert", "aria-roledescription": " ", 
+                            // eslint-disable-next-line react/jsx-no-bind
+                            onRenderCell: onRenderCell }))));
+            }
+        }
+        var text;
+        var fill = props.textColor
+            ? (0, colors_1.getColorFromToken)(props.textColor, (_a = props.theme) === null || _a === void 0 ? void 0 : _a.isInverted)
+            : (_b = props.theme) === null || _b === void 0 ? void 0 : _b.semanticColors.messageText;
+        if (props.labelDef.aggregatedIdx.length === 1) {
+            text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;
+        }
+        else {
+            text = props.mergedLabel(props.labelDef.aggregatedIdx.length);
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("g", { ref: gRef, onClick: onClick, "data-is-focusable": true, style: { cursor: 'pointer' } },
+                React.createElement(Textbox_1.Textbox, { text: text, x: props.labelDef.x, y: props.textY, width: props.textWidth, lineHeight: props.textLineHeight, textAnchor: props.labelDef.anchor, fontSize: props.textFontSize, fill: fill })),
+            callout));
+    };
+    exports.LabelLink = LabelLink;
+});
+//# sourceMappingURL=LabelLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabelLink.js","sourceRoot":"../src/","sources":["components/LineChart/eventAnnotation/LabelLink.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Callout, FocusZone, FocusZoneDirection, List } from '@fluentui/react';\nimport { IEventAnnotation } from '../../../types/IEventAnnotation';\nimport { Textbox } from './Textbox';\nimport { ITheme } from '@fluentui/react/lib/Styling';\nimport { getColorFromToken } from '../../../utilities/colors';\n\nexport interface ILineDef extends IEventAnnotation {\n  x: number;\n}\n\nexport interface ILabelDef {\n  x: number;\n  aggregatedIdx: number[];\n  anchor: 'start' | 'end';\n}\n\ninterface ILabelLinkProps {\n  lineDefs: ILineDef[];\n  labelDef: ILabelDef;\n  textY: number;\n  textWidth: number;\n  textLineHeight: number;\n  textFontSize: string;\n  textColor: string | undefined;\n  theme: ITheme | undefined;\n  mergedLabel: (count: number) => string;\n}\n\nexport const LabelLink: React.FunctionComponent<ILabelLinkProps> = props => {\n  const gRef = React.useRef<SVGGElement>(null);\n  const [showCard, setShowCard] = React.useState(false);\n  const onDismiss = () => setShowCard(false);\n  const onClick = () => setShowCard(true);\n  const onRenderCell = (i: (() => React.ReactNode) | undefined) => <div data-is-focusable={true}>{i && i()}</div>;\n\n  let callout: React.ReactNode = null;\n  if (showCard) {\n    const cards = props.labelDef.aggregatedIdx.map(i => props.lineDefs[i].onRenderCard!).filter(c => !!c);\n    if (cards.length > 0) {\n      callout = (\n        <Callout\n          target={gRef.current}\n          // eslint-disable-next-line react/jsx-no-bind\n          onDismiss={onDismiss}\n          setInitialFocus={true}\n          role=\"dialog\"\n        >\n          <FocusZone isCircularNavigation={true} direction={FocusZoneDirection.vertical}>\n            <List<() => React.ReactNode>\n              items={cards}\n              role=\"alert\"\n              aria-roledescription=\" \"\n              // eslint-disable-next-line react/jsx-no-bind\n              onRenderCell={onRenderCell}\n            />\n          </FocusZone>\n        </Callout>\n      );\n    }\n  }\n\n  let text: string;\n  const fill: string | undefined = props.textColor\n    ? getColorFromToken(props.textColor, props.theme?.isInverted)\n    : props.theme?.semanticColors.messageText;\n\n  if (props.labelDef.aggregatedIdx.length === 1) {\n    text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;\n  } else {\n    text = props.mergedLabel(props.labelDef.aggregatedIdx.length);\n  }\n\n  return (\n    <>\n      <g ref={gRef} onClick={onClick} data-is-focusable={true} style={{ cursor: 'pointer' }}>\n        <Textbox\n          text={text}\n          x={props.labelDef.x}\n          y={props.textY}\n          width={props.textWidth}\n          lineHeight={props.textLineHeight}\n          textAnchor={props.labelDef.anchor}\n          fontSize={props.textFontSize}\n          fill={fill}\n        />\n      </g>\n      {callout}\n    </>\n  );\n};\n"]}

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", "../../../utilities/utilities"], function (require, exports, tslib_1, React, d3_selection_1, utilities_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 }, (0, utilities_1.getSecureProps)(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":";;;;IAeO,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,CAAC;gBAC5B,OAAO;YACT,CAAC;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,CAAC;oBAC1E,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;gBAC3G,CAAC;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,IAAA,0BAAc,EAAC,IAAI,CAAC,EAAI,CAAC;IACjE,CAAC,CAAC;IArCW,QAAA,OAAO,WAqClB","sourcesContent":["import * as React from 'react';\nimport { select } from 'd3-selection';\nimport { getSecureProps } from '../../../utilities/utilities';\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} {...getSecureProps(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,86 @@
+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 = /** @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));
+    exports.Arc = Arc;
+    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 + (angle > Math.PI ? -10 : 10),
+                        y: labelY + (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 10 : -10),
+                        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 + (angle > Math.PI ? -10 : 10),\n            y: labelY + (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 10 : -10),\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 = /** @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 _this = this;
+            // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();
+            var _a = this.props, pie = _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 _b = this.props.colors, 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));
+    exports.Pie = Pie;
+});
+//# 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;YAC1B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YAGR,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;YAC/D,IAAA,KAAkD,IAAI,CAAC,KAAK,EAA1D,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAe,CAAC;YAEnE,IAAM,aAAa,GAAkB,EAAE,CAAC;YACxC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;oBACrC,aAAa,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC,CAAC,CAAC;gBAC5D,CAAC;YACH,CAAC;YACO,IAAA,KAA2B,IAAI,CAAC,KAAK,OAAf,EAAtB,MAAM,mBAAG,aAAa,KAAA,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;IAvDY,kBAAG","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,47 @@
+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 = /** @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 = this.props, data = _a.data, width = _a.width, height = _a.height, colors = _a.colors, chartTitle = _a.chartTitle;
+            var _b = this.props, theme = _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;
+            var PADDING = 4;
+            /**
+             * 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 + 2 * PADDING, height: height + 2 * PADDING, 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));
+    exports.PieChartBase = PieChartBase;
+});
+//# sourceMappingURL=PieChart.base.js.map