@fluentui/react-charting 5.16.24 → 5.16.25

package/lib/components/LineChart/index.js

@@ -0,0 +1,4 @@
+export * from './LineChart';
+export * from './LineChart.types';
+export * from './eventAnnotation/Textbox';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IArcProps } from './Arc.types';
+export declare class Arc extends React.Component<IArcProps, {}> {
+    static defaultProps: Partial<IArcProps>;
+    state: {};
+    static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null;
+    updateChart: (newProps: IArcProps) => void;
+    render(): JSX.Element;
+}
+export declare class LabeledArc extends Arc {
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,57 @@
+import { __extends } from "tslib";
+import * as React from 'react';
+import * as shape from 'd3-shape';
+import { classNamesFunction } from '@fluentui/react/lib/Utilities';
+import { getStyles } from './Arc.styles';
+import { convertToLocaleString } from '../../../utilities/utilities';
+var Arc = /** @class */ (function (_super) {
+    __extends(Arc, _super);
+    function Arc() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {};
+        _this.updateChart = function (newProps) {
+            _updateChart(newProps);
+        };
+        return _this;
+    }
+    Arc.getDerivedStateFromProps = function (nextProps) {
+        _updateChart(nextProps);
+        return null;
+    };
+    Arc.prototype.render = function () {
+        var _a;
+        var _b = this.props, color = _b.color, arc = _b.arc;
+        var getClassNames = classNamesFunction();
+        var classNames = getClassNames(getStyles, { color: color });
+        return React.createElement("path", { d: arc(this.props.data), className: classNames.root, onClick: (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick });
+    };
+    Arc.defaultProps = {
+        arc: shape.arc(),
+    };
+    return Arc;
+}(React.Component));
+export { Arc };
+var LabeledArc = /** @class */ (function (_super) {
+    __extends(LabeledArc, _super);
+    function LabeledArc() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LabeledArc.prototype.render = function () {
+        var _a = this.props, data = _a.data, arc = _a.arc, culture = _a.culture;
+        var _b = arc.centroid(data), labelX = _b[0], labelY = _b[1];
+        var labelTranslate = "translate(" + labelX + ", " + labelY + ")";
+        return (React.createElement("g", { className: "arc" },
+            _super.prototype.render.call(this),
+            React.createElement("text", { transform: labelTranslate, textAnchor: "middle" },
+                data.data.x,
+                "-",
+                convertToLocaleString(data.data.y, culture))));
+    };
+    return LabeledArc;
+}(Arc));
+export { LabeledArc };
+function _updateChart(newProps) {
+    newProps.arc.innerRadius(newProps.innerRadius);
+    newProps.arc.outerRadius(newProps.outerRadius);
+}
+//# sourceMappingURL=Arc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE;IAAyB,uBAA8B;IAAvD;QAAA,qEAsBC;QAjBQ,WAAK,GAAO,EAAE,CAAC;QAOf,iBAAW,GAAG,UAAC,QAAmB;YACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC;;IAQJ,CAAC;IAfe,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAMM,oBAAM,GAAb;;QACQ,IAAA,KAAiB,IAAI,CAAC,KAAK,EAAzB,KAAK,WAAA,EAAE,GAAG,SAAe,CAAC;QAClC,IAAM,aAAa,GAAG,kBAAkB,EAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,SAAS,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;QACvD,OAAO,8BAAM,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,GAAI,CAAC;IAC/G,CAAC;IApBa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;KACjB,CAAC;IAmBJ,UAAC;CAAA,AAtBD,CAAyB,KAAK,CAAC,SAAS,GAsBvC;SAtBY,GAAG;AAwBhB;IAAgC,8BAAG;IAAnC;;IAeA,CAAC;IAdQ,2BAAM,GAAb;QACQ,IAAA,KAAyB,IAAI,CAAC,KAAK,EAAjC,IAAI,UAAA,EAAE,GAAG,SAAA,EAAE,OAAO,aAAe,CAAC;QACpC,IAAA,KAAmB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAApC,MAAM,QAAA,EAAE,MAAM,QAAsB,CAAC;QAC5C,IAAM,cAAc,GAAG,eAAa,MAAM,UAAK,MAAM,MAAG,CAAC;QAEzD,OAAO,CACL,2BAAG,SAAS,EAAC,KAAK;YACf,iBAAM,MAAM,WAAE;YACf,8BAAM,SAAS,EAAE,cAAc,EAAE,UAAU,EAAC,QAAQ;gBACjD,IAAK,CAAC,IAAK,CAAC,CAAC;;gBAAG,qBAAqB,CAAC,IAAK,CAAC,IAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CACzD,CACL,CACL,CAAC;IACJ,CAAC;IACH,iBAAC;AAAD,CAAC,AAfD,CAAgC,GAAG,GAelC;;AAED,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 * as shape from 'd3-shape';\nimport { IArcProps, IArcStyles } from './Arc.types';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { convertToLocaleString } from '../../../utilities/utilities';\n\nexport class Arc extends React.Component<IArcProps, {}> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: shape.arc(),\n  };\n\n  public state: {} = {};\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public updateChart = (newProps: IArcProps) => {\n    _updateChart(newProps);\n  };\n\n  public render(): JSX.Element {\n    const { color, arc } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(getStyles, { color });\n    return <path d={arc(this.props.data)} className={classNames.root} onClick={this.props.data?.data.onClick} />;\n  }\n}\n\nexport class LabeledArc extends Arc {\n  public render(): JSX.Element {\n    const { data, arc, culture } = this.props;\n    const [labelX, labelY] = arc.centroid(data);\n    const labelTranslate = `translate(${labelX}, ${labelY})`;\n\n    return (\n      <g className=\"arc\">\n        {super.render()}\n        <text transform={labelTranslate} textAnchor=\"middle\">\n          {data!.data!.x}-{convertToLocaleString(data!.data!.y, culture)}\n        </text>\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/components/PieChart/Arc/Arc.styles.d.ts

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

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

@@ -0,0 +1,8 @@
+import { DefaultPalette } from '@fluentui/react/lib/Styling';
+export var getStyles = function (props) {
+    var color = props.color;
+    return {
+        root: { fill: color, stroke: DefaultPalette.white, strokeWidth: 2 },
+    };
+};
+//# sourceMappingURL=Arc.styles.js.map

package/lib/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":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAgB;IAChC,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;IACxB,OAAO;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE;KACpE,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette } from '@fluentui/react/lib/Styling';\nexport const getStyles = (props: IArcProps): IArcStyles => {\n  const { color } = props;\n  return {\n    root: { fill: color, stroke: DefaultPalette.white, strokeWidth: 2 },\n  };\n};\n"]}

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

@@ -0,0 +1,60 @@
+import { IStyle } 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;
+}
+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
+     */
+    root: IStyle;
+}

package/lib/components/PieChart/Arc/Arc.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Arc.types.js.map

package/lib/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 } 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\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  root: IStyle;\n}\n"]}

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

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

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

@@ -0,0 +1,3 @@
+export * from './Arc';
+export * from './Arc.types';
+//# sourceMappingURL=index.js.map

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

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

package/lib/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/components/PieChart/Pie/Pie.js

@@ -0,0 +1,35 @@
+import { __extends } from "tslib";
+import * as React from 'react';
+import * as shape from 'd3-shape';
+import * as scale from 'd3-scale';
+import { LabeledArc } from '../Arc/Arc';
+var Pie = /** @class */ (function (_super) {
+    __extends(Pie, _super);
+    function Pie(props) {
+        var _this = _super.call(this, props) || this;
+        _this.arcGenerator = function (d, i) {
+            return (React.createElement(LabeledArc, { culture: _this.props.culture, key: i, data: d, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: "" + _this.colors(i) }));
+        };
+        return _this;
+    }
+    Pie.prototype.render = function () {
+        var _this = this;
+        // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();
+        var _a = this.props, pie = _a.pie, colors = _a.colors, data = _a.data, width = _a.width, height = _a.height, chartTitle = _a.chartTitle;
+        this.colors = scale.scaleOrdinal().range(colors);
+        var piechart = pie(data);
+        var translate = "translate(" + width / 2 + ", " + height / 2 + ")";
+        return (React.createElement("svg", { width: width, height: height, "aria-label": chartTitle },
+            React.createElement("g", { transform: translate }, piechart.map(function (d, i) { return _this.arcGenerator(d, i); }))));
+    };
+    Pie.defaultProps = {
+        pie: shape
+            .pie()
+            .sort(null)
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            .value(function (d) { return d.y; }),
+    };
+    return Pie;
+}(React.Component));
+export { Pie };
+//# sourceMappingURL=Pie.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGxC;IAAyB,uBAA8B;IAUrD,aAAY,KAAgB;QAA5B,YACE,kBAAM,KAAK,CAAC,SACb;QAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;YAC3C,OAAO,CACL,oBAAC,UAAU,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,KAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAG,GAC1B,CACH,CAAC;QACJ,CAAC,CAAC;;IAbF,CAAC;IAeM,oBAAM,GAAb;QAAA,iBAcC;QAbC,qEAAqE;QAC/D,IAAA,KAAmD,IAAI,CAAC,KAAK,EAA3D,GAAG,SAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;QAEpE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,MAAO,CAAC,CAAC;QAElD,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAM,SAAS,GAAG,eAAa,KAAK,GAAG,CAAC,UAAK,MAAM,GAAG,CAAC,MAAG,CAAC;QAE3D,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;YACvD,2BAAG,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,CAAK,CAC5F,CACP,CAAC;IACJ,CAAC;IAxCa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK;aACP,GAAG,EAAE;aACL,IAAI,CAAC,IAAI,CAAC;YACX,uDAAuD;aACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;KAC1B,CAAC;IAmCJ,UAAC;CAAA,AA1CD,CAAyB,KAAK,CAAC,SAAS,GA0CvC;SA1CY,GAAG","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport * as scale from 'd3-scale';\nimport { IPieProps } from './Pie.types';\nimport { LabeledArc } from '../Arc/Arc';\nimport { IArcData } from '../Arc/Arc.types';\n\nexport class Pie extends React.Component<IPieProps, {}> {\n  public static defaultProps: Partial<IPieProps> = {\n    pie: shape\n      .pie()\n      .sort(null)\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .value((d: any) => d.y),\n  };\n  private colors: scale.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      />\n    );\n  };\n\n  public render(): JSX.Element {\n    // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();\n    const { pie, colors, data, width, height, chartTitle } = this.props;\n\n    this.colors = scale.scaleOrdinal().range(colors!);\n\n    const piechart = pie(data);\n    const translate = `translate(${width / 2}, ${height / 2})`;\n\n    return (\n      <svg width={width} height={height} aria-label={chartTitle}>\n        <g transform={translate}>{piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}</g>\n      </svg>\n    );\n  }\n}\n"]}

package/lib/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/components/PieChart/Pie/Pie.styles.js

@@ -0,0 +1,6 @@
+export var getStyles = function (props) {
+    return {
+        root: {},
+    };
+};
+//# sourceMappingURL=Pie.styles.js.map

package/lib/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":"AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAgB;IACxC,OAAO;QACL,IAAI,EAAE,EAAE;KACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IPieProps, IPieStyles } from './Pie.types';\n\nexport const getStyles = (props: IPieProps): IPieStyles => {\n  return {\n    root: {},\n  };\n};\n"]}

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

@@ -0,0 +1,46 @@
+import { IStyle } 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;
+}
+export interface IPieStyles {
+    /**
+     * Style set for the card header component root
+     */
+    root: IStyle;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Pie.types.js.map

package/lib/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 } 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\nexport interface IPieStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: IStyle;\n}\n"]}

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

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

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

@@ -0,0 +1,3 @@
+export * from './Pie';
+export * from './Pie.types';
+//# sourceMappingURL=index.js.map

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

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

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

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

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

@@ -0,0 +1,34 @@
+import { __extends } from "tslib";
+import * as React from 'react';
+import { classNamesFunction } from '@fluentui/react/lib/Utilities';
+import { Pie } from './Pie/Pie';
+var getClassNames = classNamesFunction();
+var PieChartBase = /** @class */ (function (_super) {
+    __extends(PieChartBase, _super);
+    function PieChartBase() {
+        return _super !== null && _super.apply(this, arguments) || 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 radius = Math.min(width, height) / 2;
+        var outerRadius = radius - 10;
+        return (React.createElement("div", { className: this._classNames.root },
+            this.props.chartTitle && React.createElement("p", { className: this._classNames.chartTitle }, this.props.chartTitle),
+            React.createElement(Pie, { culture: culture, width: width, height: height, outerRadius: outerRadius, innerRadius: 0, data: data, colors: colors, chartTitle: chartTitle })));
+    };
+    PieChartBase.defaultProps = {
+        data: [],
+        width: 600,
+        height: 350,
+    };
+    return PieChartBase;
+}(React.Component));
+export { PieChartBase };
+//# sourceMappingURL=PieChart.base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAEhC,IAAM,aAAa,GAAG,kBAAkB,EAAwC,CAAC;AAEjF;IAAkC,gCAAmC;IAArE;;IAqCA,CAAC;IA7BQ,6BAAM,GAAb;QACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;QAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;QACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,KAAK,EAAE,KAAM;YACb,MAAM,EAAE,MAAO;YACf,SAAS,WAAA;SACV,CAAC,CAAC;QACH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,EAAE,MAAO,CAAC,GAAG,CAAC,CAAC;QAC7C,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;QAEhC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;YAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;YAChG,oBAAC,GAAG,IACF,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAM,EACb,MAAM,EAAE,MAAO,EACf,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,MAAO,EACf,UAAU,EAAE,UAAW,GACvB,CACE,CACP,CAAC;IACJ,CAAC;IAnCa,yBAAY,GAA4B;QACpD,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ,CAAC;IAgCJ,mBAAC;CAAA,AArCD,CAAkC,KAAK,CAAC,SAAS,GAqChD;SArCY,YAAY","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { Pie } from './Pie/Pie';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nconst getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();\n\nexport class PieChartBase extends React.Component<IPieChartProps, {}> {\n  public static defaultProps: Partial<IPieChartProps> = {\n    data: [],\n    width: 600,\n    height: 350,\n  };\n  private _classNames: IProcessedStyleSet<IPieChartStyles>;\n\n  public render(): JSX.Element {\n    const { data, width, height, colors, chartTitle } = this.props;\n\n    const { theme, className, styles, culture } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      width: width!,\n      height: height!,\n      className,\n    });\n    const radius = Math.min(width!, height!) / 2;\n    const outerRadius = radius - 10;\n\n    return (\n      <div className={this._classNames.root}>\n        {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}\n        <Pie\n          culture={culture}\n          width={width!}\n          height={height!}\n          outerRadius={outerRadius}\n          innerRadius={0}\n          data={data!}\n          colors={colors!}\n          chartTitle={chartTitle!}\n        />\n      </div>\n    );\n  }\n}\n"]}

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

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

package/lib/components/PieChart/PieChart.js

@@ -0,0 +1,6 @@
+import { styled } from '@fluentui/react/lib/Utilities';
+import { PieChartBase } from './PieChart.base';
+import { getStyles } from './PieChart.styles';
+// Create a PieChart variant which uses these default styles and this styled subcomponent.
+export var PieChart = styled(PieChartBase, getStyles);
+//# sourceMappingURL=PieChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,0FAA0F;AAC1F,MAAM,CAAC,IAAM,QAAQ,GAA4C,MAAM,CAIrE,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { PieChartBase } from './PieChart.base';\nimport { getStyles } from './PieChart.styles';\n\n// Create a PieChart variant which uses these default styles and this styled subcomponent.\nexport const PieChart: React.FunctionComponent<IPieChartProps> = styled<\n  IPieChartProps,\n  IPieChartStyleProps,\n  IPieChartStyles\n>(PieChartBase, getStyles);\n"]}

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

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

package/lib/components/PieChart/PieChart.styles.js

@@ -0,0 +1,29 @@
+import { __assign } from "tslib";
+export var getStyles = function (props) {
+    var className = props.className, theme = props.theme, width = props.width, height = props.height;
+    var chartWidth = width + 30;
+    var chartPadding = 20;
+    var chartHeight = height + 10;
+    return {
+        root: [
+            theme.fonts.medium,
+            'ms-PieChart',
+            className,
+            {
+                width: chartWidth + 2 * chartPadding,
+            },
+        ],
+        chart: [
+            {
+                padding: chartPadding,
+                width: chartWidth,
+                height: chartHeight,
+                boxSizing: 'content-box',
+            },
+        ],
+        chartTitle: [
+            __assign({ textAlign: 'center' }, theme.fonts.mediumPlus),
+        ],
+    };
+};
+//# sourceMappingURL=PieChart.styles.js.map

package/lib/components/PieChart/PieChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.styles.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.styles.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA0B;IAC1C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,KAAK,GAAa,KAAK,MAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;IAElD,IAAM,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC;IAC9B,IAAM,YAAY,GAAG,EAAE,CAAC;IACxB,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;IAEhC,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,aAAa;YACb,SAAS;YACT;gBACE,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,YAAY;aACrC;SACF;QACD,KAAK,EAAE;YACL;gBACE,OAAO,EAAE,YAAY;gBACrB,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,WAAW;gBACnB,SAAS,EAAE,aAAa;aACzB;SACF;QACD,UAAU,EAAE;uBAER,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,KAAK,CAAC,UAAU;SAE5B;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\n\nexport const getStyles = (props: IPieChartStyleProps): IPieChartStyles => {\n  const { className, theme, width, height } = props;\n\n  const chartWidth = width + 30;\n  const chartPadding = 20;\n  const chartHeight = height + 10;\n\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-PieChart',\n      className,\n      {\n        width: chartWidth + 2 * chartPadding,\n      },\n    ],\n    chart: [\n      {\n        padding: chartPadding,\n        width: chartWidth,\n        height: chartHeight,\n        boxSizing: 'content-box',\n      },\n    ],\n    chartTitle: [\n      {\n        textAlign: 'center',\n        ...theme.fonts.mediumPlus,\n      },\n    ],\n  };\n};\n"]}

package/lib/components/PieChart/PieChart.types.d.ts

@@ -0,0 +1,63 @@
+import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IDataPoint } from '../../types/IDataPoint';
+export type { IDataPoint } from '../../types/IDataPoint';
+export interface IPieChart {
+}
+export interface IPieChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: IDataPoint[];
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * Height of the chart.
+     */
+    height?: number;
+    /**
+     * colors to render in the chart.
+     */
+    colors?: string[];
+    /**
+     * Title to apply to the whole chart.
+     */
+    chartTitle?: string;
+    /**
+     * Additional CSS class(es) to apply to the PieChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IPieChartStyleProps, IPieChartStyles>;
+    /**
+     * Width of line stroke
+     */
+    strokeWidth?: number;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+export declare type IPieChartStyleProps = Required<Pick<IPieChartProps, 'theme' | 'width' | 'height'>> & Pick<IPieChartProps, 'className'>;
+export interface IPieChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root?: IStyle;
+    /**
+     * Style for the chart.
+     */
+    chart?: IStyle;
+    /**
+     * Style for the chart Title.
+     */
+    chartTitle?: IStyle;
+}

package/lib/components/PieChart/PieChart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PieChart.types.js.map

package/lib/components/PieChart/PieChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.types.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IDataPoint } from '../../types/IDataPoint';\nexport type { IDataPoint } from '../../types/IDataPoint';\nexport interface IPieChart {}\n\nexport interface IPieChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IDataPoint[];\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * colors to render in the chart.\n   */\n  colors?: string[];\n\n  /**\n   * Title to apply to the whole chart.\n   */\n  chartTitle?: string;\n\n  /**\n   * Additional CSS class(es) to apply to the PieChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IPieChartStyleProps, IPieChartStyles>;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\nexport type IPieChartStyleProps = Required<Pick<IPieChartProps, 'theme' | 'width' | 'height'>> &\n  Pick<IPieChartProps, 'className'>;\nexport interface IPieChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: IStyle;\n}\n"]}

package/lib/components/PieChart/index.d.ts

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

package/lib/components/PieChart/index.js

@@ -0,0 +1,3 @@
+export * from './PieChart';
+export * from './PieChart.types';
+//# sourceMappingURL=index.js.map

package/lib/components/PieChart/index.js.map

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

package/lib/components/SankeyChart/SankeyChart.base.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { ISankeyChartProps } from './SankeyChart.types';
+import { IBasestate, IChartHoverCardProps, SLink, SNode } from '../../index';
+export interface ISankeyChartState extends IBasestate, IChartHoverCardProps {
+    containerWidth: number;
+    containerHeight: number;
+    selectedState: boolean;
+    selectedLinks: Set<Number>;
+    selectedNodes: Set<Number>;
+    selectedNode?: SNode;
+    refSelected?: any;
+    selectedLink?: SLink;
+    shouldOverflow: boolean;
+}
+export declare class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyChartState> {
+    private _classNames;
+    private chartContainer;
+    private _reqID;
+    private _calloutId;
+    private _linkId;
+    private _nodesInColumn;
+    private _sankey;
+    private _margins;
+    private _isRtl;
+    private _normalizeData;
+    constructor(props: ISankeyChartProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ISankeyChartProps): void;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+    private _preRenderLayout;
+    /**
+     * This is used for calculating the node non normalized value based on link non normalized value.
+     *
+     */
+    private _populateNodeActualValue;
+    private _normalizeSankeyData;
+    /**
+     *
+     * This is used to group nodes by column index.
+     */
+    private _populateNodeInColumns;
+    /**
+     * This is used to normalize the nodes value whose value is less than 1% of the total column value.
+     *
+     */
+    private _adjustOnePercentHeightNodes;
+    /**
+     *
+     * This is used for normalizing each links value for reflecting the normalized node value.
+     */
+    private _changeColumnValue;
+    /**
+     *
+     * This is used to introduce dynamic padding for cases where the number of nodes in a column is huge
+     * so that we maintain a node to space ratio for such columns as if we fail to do so the
+     * chart is devoid of nodes and only shows links.
+     */
+    private _adjustPadding;
+    private _createLinks;
+    private _createNodes;
+    private _onLeave;
+    private _onHover;
+    private _onStreamHover;
+    private _onStreamLeave;
+    private _onFocusLink;
+    private _onCloseCallout;
+    private _onBlur;
+    private _fillNodeColors;
+    /**
+     * This is used to assign node fillcolors and borderColor cyclically when the user doesnt
+     * provide color to  individual node.
+     */
+    private _assignNodeColors;
+    private _fillStreamColors;
+    private _fillStreamBorder;
+    private _fillNodeBorder;
+    private _getSelectedNodes;
+    private _getSelectedLinks;
+    private _getSelectedLinksforStreamHover;
+    private _getOpacityStream;
+    private _getOpacityStreamBorder;
+    private _fitParentContainer;
+    /**
+     *
+     * @param text is the text which we are trying to truncate
+     * @param rectangleWidth is the width of the rectangle which will contain the text
+     * @param padding is the space we need to leave between the rect lines and other text
+     * @param nodeWeight is the text if present needs to be accomodate in the same line as text.
+     * @returns the truncated text , if truncated given the above parameters.
+     */
+    private _truncateText;
+    private _showTooltip;
+    private _hideTooltip;
+}