@fluentui/react-charting 5.23.61 → 5.23.62

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

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabelLink = void 0;
-var React = require("react");
-var react_1 = require("@fluentui/react");
-var Textbox_1 = require("./Textbox");
-var colors_1 = require("../../../utilities/colors");
-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-commonjs/components/LineChart/eventAnnotation/LabelLink.js.map

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

@@ -1,13 +0,0 @@
-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-commonjs/components/LineChart/eventAnnotation/Textbox.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textbox = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var d3_selection_1 = require("d3-selection");
-var utilities_1 = require("../../../utilities/utilities");
-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-commonjs/components/LineChart/eventAnnotation/Textbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textbox.js","sourceRoot":"../src/","sources":["components/LineChart/eventAnnotation/Textbox.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,6CAAsC;AACtC,0DAA8D;AAavD,IAAM,OAAO,GAA2C,UAAA,KAAK;IAClE,IAAM,cAAc,GAAoC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAE3E,IAAM,SAAS,GAAG;QAChB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QACD,IAAM,IAAI,GAAG,IAAA,qBAAM,EAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAC5C,IAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,IAAI,GAAa,EAAE,CAAC;QACxB,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAkB,OAAO,CAAC,CAAC;QAClD,IAAI,QAAQ,GAAG,CAAC,CAAC;QAEjB,KAAK,CAAC,OAAO,CAAC,UAAA,IAAI;YAChB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAM,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;YAC1B,IAAI,IAAI,IAAI,IAAI,CAAC,qBAAqB,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC1E,QAAQ,EAAE,CAAC;gBACX,IAAI,CAAC,GAAG,EAAE,CAAC;gBACX,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC3B,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;gBACd,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;YAC3G,CAAC;QACH,CAAC,CAAC,CAAC;QACH,qBAAqB;QACrB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;QAE9C,OAAO;YACL,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC;QACnC,CAAC,CAAC;IACJ,CAAC,CAAC;IACF,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAEnB,IAAA,UAAU,GAAc,KAAK,WAAnB,EAAK,IAAI,kBAAK,KAAK,EAA/B,cAAuB,CAAF,CAAW;IAEtC,OAAO,+CAAM,GAAG,EAAE,cAAc,IAAM,IAAA,0BAAc,EAAC,IAAI,CAAC,EAAI,CAAC;AACjE,CAAC,CAAC;AArCW,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-commonjs/components/LineChart/index.d.ts

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

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

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./LineChart"), exports);
-tslib_1.__exportStar(require("./LineChart.types"), exports);
-tslib_1.__exportStar(require("./eventAnnotation/Textbox"), exports);
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/LineChart/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B;AAC5B,4DAAkC;AAClC,oEAA0C","sourcesContent":["export * from './LineChart';\nexport * from './LineChart.types';\nexport * from './eventAnnotation/Textbox';\n"]}

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

@@ -1,17 +0,0 @@
-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-commonjs/components/PieChart/Arc/Arc.js

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabeledArc = exports.Arc = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var d3_shape_1 = require("d3-shape");
-var Utilities_1 = require("@fluentui/react/lib/Utilities");
-var Arc_styles_1 = require("./Arc.styles");
-var utilities_1 = require("../../../utilities/utilities");
-var SVGTooltipText_1 = require("../../../utilities/SVGTooltipText");
-var locale_util_1 = require("../../../utilities/locale-util");
-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-commonjs/components/PieChart/Arc/Arc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,qCAAwC;AAExC,2DAAkF;AAClF,2CAAyC;AACzC,0DAA2D;AAC3D,oEAAmE;AACnE,8DAAuE;AAEvE;IAAyB,+BAAqC;IAY5D,aAAmB,KAAgB;QACjC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAQR,iBAAW,GAAG,UAAC,QAAmB;YACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC;QAgBQ,cAAQ,GAAG;YACnB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC;QAEQ,aAAO,GAAG;YAClB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QA/BA,KAAI,CAAC,KAAK,GAAG;YACX,YAAY,EAAE,KAAK;SACpB,CAAC;QAEF,KAAI,CAAC,MAAM,GAAG,IAAA,iBAAK,EAAC,cAAc,CAAC,CAAC;;IACtC,CAAC;IAZa,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAeM,oBAAM,GAAb;QAAA,iBAYC;;QAXS,IAAA,GAAG,GAAK,IAAI,CAAC,KAAK,IAAf,CAAgB;QAC3B,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,sBAAS,EAAC,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAlC,CAAkC,uBAAO,IAAI,CAAC,KAAK,EAAG,CAAC;QAEjG,OAAO,CACL,8BACE,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EACvB,SAAS,EAAE,UAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAE,EACzF,OAAO,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,GACtC,CACH,CAAC;IACJ,CAAC;IApCa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,IAAA,cAAK,GAAE;KACb,AAFyB,CAExB;IA2CJ,UAAC;CAAA,AA9CD,CAAyB,KAAK,CAAC,SAAS,GA8CvC;AA9CY,kBAAG;AAgDhB;IAAgC,sCAAG;IAGjC,oBAAmB,KAAgB;QACjC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAHP,YAAM,GAAG,IAAA,kBAAM,GAAE,CAAC;QAIxB,KAAI,CAAC,MAAM,GAAG,IAAA,iBAAK,EAAC,cAAc,CAAC,CAAC;;IACtC,CAAC;IAEM,2BAAM,GAAb;QAAA,iBA+CC;;QA9CO,IAAA,KAAoB,IAAI,CAAC,KAAK,EAA5B,IAAI,UAAA,EAAE,OAAO,aAAe,CAAC;QACrC,IAAM,GAAG,GAAG,CAAC,CAAC;QACd,wCAAwC;QAClC,IAAA,KAAmB,IAAA,cAAK,GAAE,CAAC,QAAQ,CAAC;YACxC,QAAQ,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,KAAI,CAAC;YAC7B,UAAU,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,KAAI,CAAC;YACjC,QAAQ,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ;YACxB,WAAW,EAAE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,KAAI,CAAC;YACzC,WAAW,EAAE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,KAAI,CAAC,GAAG,GAAG;SAChD,CAAC,EANK,MAAM,QAAA,EAAE,MAAM,QAMnB,CAAC;QAEH,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,sBAAS,EAAC,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAlC,CAAkC,CAAC,CAAC;QAE9E,IAAM,KAAK,GAAG,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,KAAI,CAAC,CAAC,GAAG,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,KAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAEpE,IAAM,OAAO,GAAG,UAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,cAAI,IAAA,mCAAqB,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,CAAE,CAAC;QAElF,OAAO,CACL,2BACE,SAAS,EAAE,UAAG,UAAU,CAAC,GAAG,SAAM,uBACf,IAAI,EACvB,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,MAAM,EAAE,IAAI,CAAC,OAAO,gBACR,OAAO,EACnB,IAAI,EAAC,KAAK;YAET,gBAAK,CAAC,MAAM,WAAE;YACf,oBAAC,+BAAc,IACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE;oBACT,CAAC,EAAE,MAAM,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;oBACxC,CAAC,EAAE,MAAM,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;oBACzE,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;oBACvF,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;oBACnG,YAAY,EAAE,UAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,cAAI,IAAA,mCAAqB,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,CAAE;oBAC/E,SAAS,EAAE,UAAU,CAAC,OAAO;iBAC9B,EACD,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAC7C,kBAAkB,EAAE,KAAK,EACzB,QAAQ,EAAE,EAAE,EACZ,WAAW,EAAE,uBAAW,GACxB,CACA,CACL,CAAC;IACJ,CAAC;IACH,iBAAC;AAAD,CAAC,AAxDD,CAAgC,GAAG,GAwDlC;AAxDY,gCAAU;AA0DvB,SAAS,YAAY,CAAC,QAAmB;IACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACjD,CAAC","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-commonjs/components/PieChart/Arc/Arc.styles.d.ts

@@ -1,3 +0,0 @@
-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-commonjs/components/PieChart/Arc/Arc.styles.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStyles = void 0;
-var Styling_1 = require("@fluentui/react/lib/Styling");
-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-commonjs/components/PieChart/Arc/Arc.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;AACA,uDAAqE;AAC9D,IAAM,SAAS,GAAG,UAAC,KAAgB,EAAE,KAAyB;IAC3D,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;IACxB,OAAO;QACL,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QACxB,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;QACtG,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACxB,OAAO,EAAE,EAAE,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,wBAAc,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE;KACjF,CAAC;AACJ,CAAC,CAAC;AARW,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-commonjs/components/PieChart/Arc/Arc.types.d.ts

@@ -1,73 +0,0 @@
-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-commonjs/components/PieChart/Arc/Arc.types.js

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

package/lib-commonjs/components/PieChart/Arc/Arc.types.js.map

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

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

package/lib-commonjs/components/PieChart/Arc/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Arc"), exports);
-tslib_1.__exportStar(require("./Arc.types"), exports);
-//# sourceMappingURL=index.js.map

package/lib-commonjs/components/PieChart/Arc/index.js.map

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

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

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

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pie = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var d3_shape_1 = require("d3-shape");
-var d3_scale_1 = require("d3-scale");
-var Arc_1 = require("../Arc/Arc");
-var react_focus_1 = require("@fluentui/react-focus");
-var colors_1 = require("../../../utilities/colors");
-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-commonjs/components/PieChart/Pie/Pie.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,qCAAwC;AACxC,qCAAsD;AAEtD,kCAAwC;AAExC,qDAAsE;AACtE,oDAA4E;AAE5E;IAAyB,+BAA8B;IAUrD,aAAY,KAAgB;QAC1B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAGR,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;YAC3C,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;QACJ,CAAC,CAAC;;IAdF,CAAC;IAgBM,oBAAM,GAAb;QAAA,iBA0BC;QAzBC,qEAAqE;QAC/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;QAEnE,IAAM,aAAa,GAAkB,EAAE,CAAC;QACxC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACrC,aAAa,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC;QACO,IAAA,KAA2B,IAAI,CAAC,KAAK,OAAf,EAAtB,MAAM,mBAAG,aAAa,KAAA,CAAgB;QAE9C,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;QAElF,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;QAE3D,OAAO,CACL,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,QAAQ;YAC/C,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;gBACvD,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;IACJ,CAAC;IArDa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,IAAA,cAAK,GAAE;aACT,QAAQ,CAAC,IAAI,CAAC;aACd,IAAI,CAAC,IAAI,CAAC;YACX,uDAAuD;aACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;KAC1B,AANyB,CAMxB;IAgDJ,UAAC;CAAA,AAvDD,CAAyB,KAAK,CAAC,SAAS,GAuDvC;AAvDY,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-commonjs/components/PieChart/Pie/Pie.styles.d.ts

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Pie.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.styles.ts"],"names":[],"mappings":";;;AAEO,IAAM,SAAS,GAAG,UAAC,KAAgB;IACxC,OAAO;QACL,IAAI,EAAE,EAAE;KACT,CAAC;AACJ,CAAC,CAAC;AAJW,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-commonjs/components/PieChart/Pie/Pie.types.d.ts

@@ -1,47 +0,0 @@
-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-commonjs/components/PieChart/Pie/Pie.types.js

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

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

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

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

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

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Pie"), exports);
-tslib_1.__exportStar(require("./Pie.types"), exports);
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1,10 +0,0 @@
-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-commonjs/components/PieChart/PieChart.base.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PieChartBase = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var Utilities_1 = require("@fluentui/react/lib/Utilities");
-var Pie_1 = require("./Pie/Pie");
-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