@fluentui/react-charting 5.12.24 → 5.12.27

package/lib-commonjs/components/SankeyChart/SankeyChart.base.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SankeyChartBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var d3Sankey = require("d3-sankey");
+var getClassNames = Utilities_1.classNamesFunction();
+var SankeyChartBase = /** @class */ (function (_super) {
+    tslib_1.__extends(SankeyChartBase, _super);
+    function SankeyChartBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            containerHeight: 0,
+            containerWidth: 0,
+        };
+        return _this;
+    }
+    SankeyChartBase.prototype.componentDidMount = function () {
+        this._fitParentContainer();
+    };
+    SankeyChartBase.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.shouldResize !== this.props.shouldResize) {
+            this._fitParentContainer();
+        }
+    };
+    SankeyChartBase.prototype.componentWillUnmount = function () {
+        cancelAnimationFrame(this._reqID);
+    };
+    SankeyChartBase.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles, pathColor = _a.pathColor;
+        this._classNames = getClassNames(styles, {
+            theme: theme,
+            width: this.state.containerWidth,
+            height: this.state.containerHeight,
+            pathColor: pathColor,
+            className: className,
+        });
+        var margin = { top: 10, right: 0, bottom: 10, left: 0 };
+        var width = this.state.containerWidth - margin.left - margin.right;
+        var height = this.state.containerHeight - margin.top - margin.bottom > 0
+            ? this.state.containerHeight - margin.top - margin.bottom
+            : 0;
+        var sankey = d3Sankey
+            .sankey()
+            .nodeWidth(5)
+            .nodePadding(6)
+            .extent([
+            [1, 1],
+            [width - 1, height - 6],
+        ]);
+        sankey(this.props.data.SankeyChartData);
+        var nodeData = this._createNodes(width);
+        var linkData = this._createLinks();
+        return (React.createElement("div", { className: this._classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); } },
+            React.createElement("svg", { width: width, height: height, id: Utilities_1.getId('sankeyChart') },
+                React.createElement("g", { className: this._classNames.nodes }, nodeData),
+                React.createElement("g", { className: this._classNames.links, strokeOpacity: 0.2 }, linkData))));
+    };
+    SankeyChartBase.prototype._createLinks = function () {
+        var links = [];
+        if (this.props.data.SankeyChartData) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.props.data.SankeyChartData.links.forEach(function (singleLink, index) {
+                var path = d3Sankey.sankeyLinkHorizontal();
+                var pathValue = path(singleLink);
+                var link = (React.createElement("path", { key: index, d: pathValue ? pathValue : undefined, strokeWidth: Math.max(1, singleLink.width), id: Utilities_1.getId('link') },
+                    React.createElement("title", null,
+                        React.createElement("text", null, singleLink.source.name + ' → ' + singleLink.target.name + '\n' + singleLink.value))));
+                links.push(link);
+            });
+        }
+        return links;
+    };
+    SankeyChartBase.prototype._createNodes = function (width) {
+        var nodes = [];
+        if (this.props.data.SankeyChartData) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.props.data.SankeyChartData.nodes.forEach(function (singleNode, index) {
+                var height = singleNode.y1 - singleNode.y0 > 0 ? singleNode.y1 - singleNode.y0 : 0;
+                var node = (React.createElement("g", { id: Utilities_1.getId('nodeGElement'), key: index },
+                    React.createElement("rect", { x: singleNode.x0, y: singleNode.y0, height: height, width: singleNode.x1 - singleNode.x0, fill: singleNode.color, id: Utilities_1.getId('nodeBar') }),
+                    React.createElement("text", { x: singleNode.x0 < width / 2 ? singleNode.x1 + 6 : singleNode.x0 - 6, y: (singleNode.y1 + singleNode.y0) / 2, dy: '0.35em', textAnchor: singleNode.x0 < width / 2 ? 'start' : 'end' }, singleNode.name),
+                    React.createElement("title", null,
+                        React.createElement("text", null, singleNode.name + '\n' + singleNode.value))));
+                nodes.push(node);
+            });
+            return nodes;
+        }
+    };
+    SankeyChartBase.prototype._fitParentContainer = function () {
+        var _this = this;
+        var _a = this.state, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight;
+        this._reqID = requestAnimationFrame(function () {
+            var container = _this.props.parentRef ? _this.props.parentRef : _this.chartContainer;
+            var currentContainerWidth = container.getBoundingClientRect().width;
+            var currentContainerHeight = container.getBoundingClientRect().height;
+            var shouldResize = containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight;
+            if (shouldResize) {
+                _this.setState({
+                    containerWidth: currentContainerWidth,
+                    containerHeight: currentContainerHeight,
+                });
+            }
+        });
+    };
+    return SankeyChartBase;
+}(React.Component));
+exports.SankeyChartBase = SankeyChartBase;
+//# sourceMappingURL=SankeyChart.base.js.map

package/lib-commonjs/components/SankeyChart/SankeyChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyChart.base.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { ISankeyChartProps, ISankeyChartStyleProps, ISankeyChartStyles } from './SankeyChart.types';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport * as d3Sankey from 'd3-sankey';\nconst getClassNames = classNamesFunction<ISankeyChartStyleProps, ISankeyChartStyles>();\n\nexport class SankeyChartBase extends React.Component<\n  ISankeyChartProps,\n  {\n    containerWidth: number;\n    containerHeight: number;\n  }\n> {\n  private _classNames: IProcessedStyleSet<ISankeyChartStyles>;\n  private chartContainer: HTMLDivElement;\n  private _reqID: number;\n  constructor(props: ISankeyChartProps) {\n    super(props);\n    this.state = {\n      containerHeight: 0,\n      containerWidth: 0,\n    };\n  }\n  public componentDidMount(): void {\n    this._fitParentContainer();\n  }\n\n  public componentDidUpdate(prevProps: ISankeyChartProps): void {\n    if (prevProps.shouldResize !== this.props.shouldResize) {\n      this._fitParentContainer();\n    }\n  }\n  public componentWillUnmount(): void {\n    cancelAnimationFrame(this._reqID);\n  }\n  public render(): React.ReactNode {\n    const { theme, className, styles, pathColor } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      width: this.state.containerWidth,\n      height: this.state.containerHeight,\n      pathColor: pathColor,\n      className,\n    });\n    const margin = { top: 10, right: 0, bottom: 10, left: 0 };\n    const width = this.state.containerWidth - margin.left - margin.right;\n    const height =\n      this.state.containerHeight - margin.top - margin.bottom > 0\n        ? this.state.containerHeight - margin.top - margin.bottom\n        : 0;\n\n    const sankey = d3Sankey\n      .sankey()\n      .nodeWidth(5)\n      .nodePadding(6)\n      .extent([\n        [1, 1],\n        [width - 1, height - 6],\n      ]);\n\n    sankey(this.props.data.SankeyChartData!);\n    const nodeData = this._createNodes(width);\n    const linkData = this._createLinks();\n    return (\n      <div\n        className={this._classNames.root}\n        role={'presentation'}\n        ref={(rootElem: HTMLDivElement) => (this.chartContainer = rootElem)}\n      >\n        <svg width={width} height={height} id={getId('sankeyChart')}>\n          <g className={this._classNames.nodes}>{nodeData}</g>\n          <g className={this._classNames.links} strokeOpacity={0.2}>\n            {linkData}\n          </g>\n        </svg>\n      </div>\n    );\n  }\n\n  private _createLinks(): React.ReactNode[] | undefined {\n    const links: React.ReactNode[] = [];\n    if (this.props.data.SankeyChartData) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      this.props.data.SankeyChartData.links.forEach((singleLink: any, index: number) => {\n        const path = d3Sankey.sankeyLinkHorizontal();\n        const pathValue = path(singleLink);\n        const link = (\n          <path\n            key={index}\n            d={pathValue ? pathValue : undefined}\n            strokeWidth={Math.max(1, singleLink.width)}\n            id={getId('link')}\n          >\n            <title>\n              <text>{singleLink.source.name + ' → ' + singleLink.target.name + '\\n' + singleLink.value}</text>\n            </title>\n          </path>\n        );\n        links.push(link);\n      });\n    }\n    return links;\n  }\n\n  private _createNodes(width: number): React.ReactNode[] | undefined {\n    const nodes: React.ReactNode[] = [];\n    if (this.props.data.SankeyChartData) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      this.props.data.SankeyChartData.nodes.forEach((singleNode: any, index: number) => {\n        const height = singleNode.y1 - singleNode.y0 > 0 ? singleNode.y1 - singleNode.y0 : 0;\n        const node = (\n          <g id={getId('nodeGElement')} key={index}>\n            <rect\n              x={singleNode.x0}\n              y={singleNode.y0}\n              height={height}\n              width={singleNode.x1 - singleNode.x0}\n              fill={singleNode.color}\n              id={getId('nodeBar')}\n            />\n            <text\n              x={singleNode.x0 < width / 2 ? singleNode.x1 + 6 : singleNode.x0 - 6}\n              y={(singleNode.y1 + singleNode.y0) / 2}\n              dy={'0.35em'}\n              textAnchor={singleNode.x0 < width / 2 ? 'start' : 'end'}\n            >\n              {singleNode.name}\n            </text>\n            <title>\n              <text>{singleNode.name + '\\n' + singleNode.value}</text>\n            </title>\n          </g>\n        );\n        nodes.push(node);\n      });\n      return nodes;\n    }\n  }\n  private _fitParentContainer(): void {\n    const { containerWidth, containerHeight } = this.state;\n    this._reqID = requestAnimationFrame(() => {\n      const container = this.props.parentRef ? this.props.parentRef : this.chartContainer;\n      const currentContainerWidth = container.getBoundingClientRect().width;\n      const currentContainerHeight = container.getBoundingClientRect().height;\n      const shouldResize = containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight;\n      if (shouldResize) {\n        this.setState({\n          containerWidth: currentContainerWidth,\n          containerHeight: currentContainerHeight,\n        });\n      }\n    });\n  }\n}\n"]}

package/lib-commonjs/components/SankeyChart/SankeyChart.d.ts

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

package/lib-commonjs/components/SankeyChart/SankeyChart.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SankeyChart = void 0;
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var SankeyChart_base_1 = require("./SankeyChart.base");
+var SankeyChart_styles_1 = require("./SankeyChart.styles");
+// Create a SankeyChart variant which uses these default styles and this styled subcomponent.
+exports.SankeyChart = Utilities_1.styled(SankeyChart_base_1.SankeyChartBase, SankeyChart_styles_1.getStyles);
+//# sourceMappingURL=SankeyChart.js.map

package/lib-commonjs/components/SankeyChart/SankeyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyChart.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,uDAAqD;AACrD,2DAAiD;AAEjD,6FAA6F;AAChF,QAAA,WAAW,GAA+C,kBAAM,CAI3E,kCAAe,EAAE,8BAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ISankeyChartProps, ISankeyChartStyleProps, ISankeyChartStyles } from './SankeyChart.types';\nimport { SankeyChartBase } from './SankeyChart.base';\nimport { getStyles } from './SankeyChart.styles';\n\n// Create a SankeyChart variant which uses these default styles and this styled subcomponent.\nexport const SankeyChart: React.FunctionComponent<ISankeyChartProps> = styled<\n  ISankeyChartProps,\n  ISankeyChartStyleProps,\n  ISankeyChartStyles\n>(SankeyChartBase, getStyles);\n"]}

package/lib-commonjs/components/SankeyChart/SankeyChart.styles.d.ts

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

package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var getStyles = function (props) {
+    var className = props.className, theme = props.theme, pathColor = props.pathColor;
+    return {
+        root: [
+            theme.fonts.medium,
+            {
+                display: 'flex',
+                width: '100%',
+                height: '100%',
+                flexDirection: 'column',
+                overflow: 'hidden',
+            },
+            className,
+        ],
+        links: {
+            stroke: pathColor ? pathColor : theme.palette.blue,
+            fill: 'none',
+        },
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=SankeyChart.styles.js.map

package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyChart.styles.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.styles.ts"],"names":[],"mappings":";;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA6B;IAC7C,IAAA,SAAS,GAAuB,KAAK,UAA5B,EAAE,KAAK,GAAgB,KAAK,MAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAC9C,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,QAAQ;gBACvB,QAAQ,EAAE,QAAQ;aACnB;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;YAClD,IAAI,EAAE,MAAM;SACb;KACF,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,SAAS,aAmBpB","sourcesContent":["import { ISankeyChartStyleProps, ISankeyChartStyles } from './SankeyChart.types';\n\nexport const getStyles = (props: ISankeyChartStyleProps): ISankeyChartStyles => {\n  const { className, theme, pathColor } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      {\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden',\n      },\n      className,\n    ],\n    links: {\n      stroke: pathColor ? pathColor : theme.palette.blue,\n      fill: 'none',\n    },\n  };\n};\n"]}

package/lib-commonjs/components/SankeyChart/SankeyChart.types.d.ts

@@ -0,0 +1,63 @@
+import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IChartProps } from '../../types/IDataPoint';
+export { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';
+export interface ISankeyChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data: IChartProps;
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * Height of the chart.
+     */
+    height?: number;
+    /**
+     * Additional CSS class(es) to apply to the SankeyChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<ISankeyChartStyleProps, ISankeyChartStyles>;
+    /**
+     * this prop takes its parent as a HTML element to define the width and height of the Sankey chart
+     */
+    parentRef?: HTMLElement | null;
+    /**
+     * should chart resize when parent resize.
+     */
+    shouldResize?: number;
+    /**
+     * Color for path
+     */
+    pathColor?: string;
+}
+export interface ISankeyChartStyleProps {
+    theme: ITheme;
+    className?: string;
+    width: number;
+    height: number;
+    pathColor?: string;
+}
+export interface ISankeyChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root?: IStyle;
+    /**
+     *  Style for the nodes.
+     */
+    nodes?: IStyle;
+    /**
+     *  Style for the links.
+     */
+    links?: IStyle;
+}

package/lib-commonjs/components/SankeyChart/SankeyChart.types.js

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

package/lib-commonjs/components/SankeyChart/SankeyChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SankeyChart.types.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\n\nexport { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';\n\nexport interface ISankeyChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\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   * Additional CSS class(es) to apply to the SankeyChart.\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<ISankeyChartStyleProps, ISankeyChartStyles>;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the Sankey chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * should chart resize when parent resize.\n   */\n  shouldResize?: number;\n\n  /**\n   * Color for path\n   */\n  pathColor?: string;\n}\n\nexport interface ISankeyChartStyleProps {\n  theme: ITheme;\n  className?: string;\n  width: number;\n  height: number;\n  pathColor?: string;\n}\n\nexport interface ISankeyChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   *  Style for the nodes.\n   */\n  nodes?: IStyle;\n\n  /**\n   *  Style for the links.\n   */\n  links?: IStyle;\n}\n"]}

package/lib-commonjs/components/SankeyChart/index.d.ts

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SankeyChart/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B;AAC9B,8DAAoC","sourcesContent":["export * from './SankeyChart';\nexport * from './SankeyChart.types';\n"]}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ILineChartDataPoint } from '../../types/IDataPoint';
+import { ISparklineProps } from '../../index';
+export interface ISparklineState {
+    _points: ILineChartDataPoint[] | null;
+    _width: number;
+    _height: number;
+    _valueTextWidth: number;
+}
+export declare class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
+    private margin;
+    private x;
+    private y;
+    private area;
+    private line;
+    constructor(props: ISparklineProps);
+    componentDidMount(): void;
+    drawSparkline(): JSX.Element;
+    render(): JSX.Element;
+}

package/lib-commonjs/components/Sparkline/Sparkline.base.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparklineBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var d3_scale_1 = require("d3-scale");
+var d3_shape_1 = require("d3-shape");
+var d3_array_1 = require("d3-array");
+var react_focus_1 = require("@fluentui/react-focus");
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var getClassNames = Utilities_1.classNamesFunction();
+var SparklineBase = /** @class */ (function (_super) {
+    tslib_1.__extends(SparklineBase, _super);
+    function SparklineBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this.margin = {
+            top: 2,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        };
+        _this.state = {
+            _points: null,
+            _width: _this.props.width || 80,
+            _height: _this.props.height || 20,
+            _valueTextWidth: _this.props.valueTextWidth || 80,
+        };
+        return _this;
+    }
+    SparklineBase.prototype.componentDidMount = function () {
+        var _this = this;
+        var area = d3_shape_1.area()
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            .x(function (d) { return _this.x(d.x); })
+            .y0(this.state._height)
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            .y1(function (d) { return _this.y(d.y); })
+            .curve(d3_shape_1.curveLinear);
+        this.area = area;
+        var line = d3_shape_1.line()
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            .x(function (d) { return _this.x(d.x); })
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            .y(function (d) { return _this.y(d.y); })
+            .curve(d3_shape_1.curveLinear);
+        this.line = line;
+        var points = this.props.data.lineChartData[0].data;
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        var _a = d3_array_1.extent(points, function (d) { return d.x; }), xMin = _a[0], xMax = _a[1];
+        this.x = d3_scale_1.scaleLinear()
+            .domain([xMin, xMax])
+            .range([this.margin.left, this.state._width - this.margin.right]);
+        this.y = d3_scale_1.scaleLinear()
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            .domain([0, d3_array_1.max(points, function (d) { return d.y; })])
+            .range([this.state._height - this.margin.bottom, this.margin.top]);
+        this.setState({
+            _points: points,
+        });
+    };
+    SparklineBase.prototype.drawSparkline = function () {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("path", { className: "line", d: this.line(this.state._points), fill: 'transparent', opacity: 1, strokeWidth: 2, stroke: this.props.data.lineChartData[0].color }),
+            React.createElement("path", { className: "area", d: this.area(this.state._points), opacity: 1, fillOpacity: 0.2, fill: this.props.data.lineChartData[0].color, "aria-label": "Sparkline with label " + this.props.data.lineChartData[0].legend })));
+    };
+    SparklineBase.prototype.render = function () {
+        var classNames = getClassNames(this.props.styles, {
+            theme: this.props.theme,
+        });
+        return (React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, isCircularNavigation: true, className: classNames.inlineBlock },
+            React.createElement("div", { className: classNames.inlineBlock },
+                this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height, "data-is-focusable": true }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
+                this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("svg", { width: this.state._valueTextWidth, height: this.state._height, "data-is-focusable": true },
+                    React.createElement("text", { x: "0%", dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null)))));
+    };
+    return SparklineBase;
+}(React.Component));
+exports.SparklineBase = SparklineBase;
+//# sourceMappingURL=Sparkline.base.js.map

package/lib-commonjs/components/Sparkline/Sparkline.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILineChartDataPoint } from '../../types/IDataPoint';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\nconst getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();\n\nexport interface ISparklineState {\n  _points: ILineChartDataPoint[] | null;\n  _width: number;\n  _height: number;\n  _valueTextWidth: number;\n}\n\nexport class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {\n  private margin = {\n    top: 2,\n    right: 0,\n    bottom: 0,\n    left: 0,\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private x: any;\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private y: any;\n  private area: any;\n  private line: any;\n\n  constructor(props: ISparklineProps) {\n    super(props);\n    this.state = {\n      _points: null,\n      _width: this.props.width! || 80,\n      _height: this.props.height! || 20,\n      _valueTextWidth: this.props.valueTextWidth! || 80,\n    };\n  }\n\n  public componentDidMount() {\n    const area = d3Area()\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .x((d: any) => this.x(d.x))\n      .y0(this.state._height)\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .y1((d: any) => this.y(d.y))\n      .curve(d3curveLinear);\n    this.area = area;\n\n    const line = d3Line()\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .x((d: any) => this.x(d.x))\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .y((d: any) => this.y(d.y))\n      .curve(d3curveLinear);\n    this.line = line;\n\n    const points = this.props.data!.lineChartData![0].data;\n\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    const [xMin, xMax] = d3Extent(points, (d: any) => d.x);\n\n    this.x = d3ScaleLinear()\n      .domain([xMin, xMax])\n      .range([this.margin.left!, this.state._width - this.margin.right!]);\n    this.y = d3ScaleLinear()\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .domain([0, d3Max(points, (d: any) => d.y)])\n      .range([this.state._height - this.margin.bottom!, this.margin.top!]);\n\n    this.setState({\n      _points: points,\n    });\n  }\n\n  public drawSparkline() {\n    return (\n      <>\n        <path\n          className=\"line\"\n          d={this.line(this.state._points)}\n          fill={'transparent'}\n          opacity={1}\n          strokeWidth={2}\n          stroke={this.props.data!.lineChartData![0].color!}\n        />\n        <path\n          className=\"area\"\n          d={this.area(this.state._points)}\n          opacity={1}\n          fillOpacity={0.2}\n          fill={this.props.data!.lineChartData![0].color!}\n          aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n        />\n      </>\n    );\n  }\n\n  public render() {\n    const classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n    });\n    return (\n      <FocusZone\n        direction={FocusZoneDirection.horizontal}\n        isCircularNavigation={true}\n        className={classNames.inlineBlock}\n      >\n        <div className={classNames.inlineBlock}>\n          {this.state._width >= 50 && this.state._height >= 16 ? (\n            <svg width={this.state._width} height={this.state._height} data-is-focusable={true}>\n              {this.state._points ? this.drawSparkline() : null}\n            </svg>\n          ) : (\n            <></>\n          )}\n          {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n            <svg width={this.state._valueTextWidth} height={this.state._height} data-is-focusable={true}>\n              <text x=\"0%\" dx={8} y=\"100%\" dy={-5} className={classNames.valueText}>\n                {this.props.data!.lineChartData![0].legend!}\n              </text>\n            </svg>\n          ) : (\n            <></>\n          )}\n        </div>\n      </FocusZone>\n    );\n  }\n}\n"]}

package/lib-commonjs/components/Sparkline/Sparkline.d.ts

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

package/lib-commonjs/components/Sparkline/Sparkline.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sparkline = void 0;
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var Sparkline_base_1 = require("./Sparkline.base");
+var Sparkline_styles_1 = require("./Sparkline.styles");
+// Create a Sparkline variant which uses these default styles and this styled subcomponent.
+exports.Sparkline = Utilities_1.styled(Sparkline_base_1.SparklineBase, Sparkline_styles_1.getStyles);
+//# sourceMappingURL=Sparkline.js.map

package/lib-commonjs/components/Sparkline/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,mDAAiD;AACjD,uDAA+C;AAE/C,2FAA2F;AAC9E,QAAA,SAAS,GAA6C,kBAAM,CAIvE,8BAAa,EAAE,4BAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ISparklineStyles, ISparklineProps, ISparklineStyleProps } from '../../index';\nimport { SparklineBase } from './Sparkline.base';\nimport { getStyles } from './Sparkline.styles';\n\n// Create a Sparkline variant which uses these default styles and this styled subcomponent.\nexport const Sparkline: React.FunctionComponent<ISparklineProps> = styled<\n  ISparklineProps,\n  ISparklineStyleProps,\n  ISparklineStyles\n>(SparklineBase, getStyles);\n"]}

package/lib-commonjs/components/Sparkline/Sparkline.styles.d.ts

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

package/lib-commonjs/components/Sparkline/Sparkline.styles.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var tslib_1 = require("tslib");
+var getStyles = function (props) {
+    return {
+        inlineBlock: {
+            display: 'inline',
+        },
+        valueText: tslib_1.__assign({}, props.theme.fonts.smallPlus),
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=Sparkline.styles.js.map

package/lib-commonjs/components/Sparkline/Sparkline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;QACD,SAAS,uBACJ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,SAAS,CAChC;KACF,CAAC;AACJ,CAAC,CAAC;AATW,QAAA,SAAS,aASpB","sourcesContent":["import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';\n\nexport const getStyles = (props: ISparklineStyleProps): ISparklineStyles => {\n  return {\n    inlineBlock: {\n      display: 'inline',\n    },\n    valueText: {\n      ...props.theme!.fonts.smallPlus,\n    },\n  };\n};\n"]}

package/lib-commonjs/components/Sparkline/Sparkline.types.d.ts

@@ -0,0 +1,51 @@
+import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IChartProps } from '../../types/IDataPoint';
+import { ICartesianChartStyleProps } from '../CommonComponents/index';
+export interface ISparklineStyleProps extends ICartesianChartStyleProps {
+}
+export interface ISparklineProps {
+    /**
+     * An array of chart data points for the Sparkline chart
+     */
+    data?: IChartProps;
+    /**
+     * Width of chart
+     * * @default 80
+     */
+    width?: number;
+    /**
+     * Height of chart
+     * @default 20
+     */
+    height?: number;
+    /**
+     * Width of value text
+     * * @default 80
+     */
+    valueTextWidth?: number;
+    /**
+     * Additional CSS class(es) to apply to the SparklineChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * Prop used to determine whether to show the legend or not
+     */
+    showLegend?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;
+}
+export interface ISparklineStyles {
+    inlineBlock?: IStyle;
+    valueText?: IStyle;
+}

package/lib-commonjs/components/Sparkline/Sparkline.types.js

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

package/lib-commonjs/components/Sparkline/Sparkline.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n  /**\n   * An array of chart data points for the Sparkline chart\n   */\n  data?: IChartProps;\n\n  /**\n   * Width of chart\n   * * @default 80\n   */\n  width?: number;\n\n  /**\n   * Height of chart\n   * @default 20\n   */\n  height?: number;\n\n  /**\n   * Width of value text\n   * * @default 80\n   */\n  valueTextWidth?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the SparklineChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop used to determine whether to show the legend or not\n   */\n  showLegend?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n  inlineBlock?: IStyle;\n  valueText?: IStyle;\n}\n"]}

package/lib-commonjs/components/Sparkline/index.d.ts

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

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

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

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

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

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.base.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { IAccessibilityProps, IChartDataPoint, IMultiStackedBarChartProps } from './index';
+export interface IRefArrayData {
+    legendText?: string;
+    refElement?: SVGGElement;
+}
+export interface IMultiStackedBarChartState {
+    isCalloutVisible: boolean;
+    refArray: IRefArrayData[];
+    selectedLegendTitle: string;
+    refSelected: any;
+    dataForHoverCard: number;
+    color: string;
+    isLegendHovered: boolean;
+    isLegendSelected: boolean;
+    xCalloutValue?: string;
+    yCalloutValue?: string;
+    dataPointCalloutProps?: IChartDataPoint;
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export declare class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
+    static defaultProps: Partial<IMultiStackedBarChartProps>;
+    private _classNames;
+    private _calloutId;
+    private _calloutAnchorPoint;
+    constructor(props: IMultiStackedBarChartProps);
+    render(): JSX.Element;
+    private _createBarsAndLegends;
+    private _onBarFocus;
+    private _refCallback;
+    private _adjustProps;
+    private _onHover;
+    private _getLegendData;
+    private _onClick;
+    private _onLeave;
+    private _onBarHover;
+    private _onBarLeave;
+    private _handleChartMouseLeave;
+    private _redirectToUrl;
+    private _closeCallout;
+}