@fluentui/react-charting 5.21.28 → 5.21.30

package/lib-amd/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":";;;;IASA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAA0C,CAAC;IASnF;QAAmC,yCAAiD;QAkBlF,uBAAY,KAAsB;YAAlC,YACE,kBAAM,KAAK,CAAC,SAQb;YA1BO,YAAM,GAAG;gBACf,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,IAAI,EAAE,CAAC;aACR,CAAC;YAUM,YAAM,GAAY,IAAA,kBAAM,GAAE,CAAC;YAIjC,KAAI,CAAC,KAAK,GAAG;gBACX,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM,IAAI,EAAE;gBAC/B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,MAAO,IAAI,EAAE;gBACjC,eAAe,EAAE,KAAI,CAAC,KAAK,CAAC,cAAe,IAAI,EAAE;aAClD,CAAC;YACF,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,uBAAuB,CAAC,CAAC;;QACtD,CAAC;QAEM,yCAAiB,GAAxB;YAAA,iBAoCC;YAnCC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;gBACzB,IAAM,IAAI,GAAG,IAAA,eAAM,GAAE;oBACnB,uDAAuD;qBACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;qBAC1B,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;oBACvB,uDAAuD;qBACtD,EAAE,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;qBAC3B,KAAK,CAAC,sBAAa,CAAC,CAAC;gBACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBAEjB,IAAM,IAAI,GAAG,IAAA,eAAM,GAAE;oBACnB,uDAAuD;qBACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;oBAC3B,uDAAuD;qBACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;qBAC1B,KAAK,CAAC,sBAAa,CAAC,CAAC;gBACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBAEjB,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;gBAEvD,uDAAuD;gBACjD,IAAA,KAAe,IAAA,iBAAQ,EAAC,MAAM,EAAE,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,EAA/C,IAAI,QAAA,EAAE,IAAI,QAAqC,CAAC;gBAEvD,IAAI,CAAC,CAAC,GAAG,IAAA,sBAAa,GAAE;qBACrB,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;qBACpB,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAM,CAAC,CAAC,CAAC;gBACtE,IAAI,CAAC,CAAC,GAAG,IAAA,sBAAa,GAAE;oBACtB,uDAAuD;qBACtD,MAAM,CAAC,CAAC,CAAC,EAAE,IAAA,cAAK,EAAC,MAAM,EAAE,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,CAAC,CAAC;qBAC3C,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,MAAO,EAAE,IAAI,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC;gBAEvE,IAAI,CAAC,QAAQ,CAAC;oBACZ,OAAO,EAAE,MAAM;iBAChB,CAAC,CAAC;aACJ;QACH,CAAC;QAEM,qCAAa,GAApB;YACE,OAAO,CACL;gBACE,8BACE,SAAS,EAAC,MAAM,EAChB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAChC,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,CAAC,EACV,WAAW,EAAE,CAAC,EACd,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,KAAM,GACjD;gBACF,8BACE,SAAS,EAAC,MAAM,EAChB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAChC,OAAO,EAAE,CAAC,EACV,WAAW,EAAE,GAAG,EAChB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,KAAM,EAC/C,IAAI,EAAC,KAAK,wBAEV,CACD,CACJ,CAAC;QACJ,CAAC;QAEM,8BAAM,GAAb;YACE,IAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAAE;gBACnD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;aACzB,CAAC,CAAC;YACH,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,oBAAC,uBAAS,IACR,SAAS,EAAE,gCAAkB,CAAC,UAAU,EACxC,oBAAoB,EAAE,IAAI,EAC1B,SAAS,EAAE,UAAU,CAAC,WAAW;gBAEjC,6BAAK,SAAS,EAAE,UAAU,CAAC,WAAW;oBACnC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CACrD,6BACE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACxB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,uBACP,IAAI,gBACX,+BAAwB,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAO,CAAE,IAE/E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAC7C,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN;oBACA,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CACpE,6BAAK,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,uBAAqB,IAAI;wBACzF,8BACE,CAAC,EAAC,IAAI,EACN,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EACzC,EAAE,EAAE,CAAC,EACL,CAAC,EAAC,MAAM,EACR,EAAE,EAAE,CAAC,CAAC,EACN,SAAS,EAAE,UAAU,CAAC,SAAS,IAE9B,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAO,CACtC,CACH,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CACG,CACI,CACb,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;QACJ,CAAC;QAEO,qCAAa,GAArB;YACE,OAAO,CAAC,CACN,IAAI,CAAC,KAAK,CAAC,IAAI;gBACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa;gBAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;gBACxC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAtB,CAAsB,CAAC,CAAC,MAAM,KAAK,CAAC,CAClF,CAAC;QACJ,CAAC;QACH,oBAAC;IAAD,CAAC,AAtJD,CAAmC,KAAK,CAAC,SAAS,GAsJjD;IAtJY,sCAAa","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, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\n\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  private _emptyChartId: string;\n  private _isRTL: boolean = getRTL();\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    this._emptyChartId = getId('_SparklineChart_empty');\n  }\n\n  public componentDidMount() {\n    if (!this._isChartEmpty()) {\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\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          role=\"img\"\n          aria-hidden\n        />\n      </>\n    );\n  }\n\n  public render() {\n    const classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n    });\n    return !this._isChartEmpty() ? (\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\n              width={this.state._width}\n              height={this.state._height}\n              data-is-focusable={true}\n              aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n            >\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\n                x=\"0%\"\n                textAnchor={this._isRTL ? 'end' : 'start'}\n                dx={8}\n                y=\"100%\"\n                dy={-5}\n                className={classNames.valueText}\n              >\n                {this.props.data!.lineChartData![0].legend!}\n              </text>\n            </svg>\n          ) : (\n            <></>\n          )}\n        </div>\n      </FocusZone>\n    ) : (\n      <div\n        id={this._emptyChartId}\n        role={'alert'}\n        style={{ opacity: '0' }}\n        aria-label={'Graph has no data to display'}\n      />\n    );\n  }\n\n  private _isChartEmpty(): boolean {\n    return !(\n      this.props.data &&\n      this.props.data.lineChartData &&\n      this.props.data.lineChartData.length > 0 &&\n      this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.tsx"],"names":[],"mappings":";;;;IAMA,2FAA2F;IAC3F;;;OAGG;IACU,QAAA,SAAS,GAA6C,IAAA,kBAAM,EAIvE,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.\n/**\n * Sparkline component\n * {@docCategory Sparkline}\n */\nexport const Sparkline: React.FunctionComponent<ISparklineProps> = styled<\n  ISparklineProps,\n  ISparklineStyleProps,\n  ISparklineStyles\n>(SparklineBase, getStyles);\n"]}

package/lib-amd/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-amd/components/Sparkline/Sparkline.styles.js

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

package/lib-amd/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":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;QACnD,OAAO;YACL,WAAW,EAAE;gBACX,OAAO,EAAE,QAAQ;aAClB;YACD,SAAS,wCACJ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,SAAS,KAC/B,IAAI,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,WAAW,GAC9C;SACF,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,SAAS,aAUpB","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      fill: props.theme!.semanticColors.messageText,\n    },\n  };\n};\n"]}

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

@@ -0,0 +1,59 @@
+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 {
+}
+/**
+ * Sparkline properties
+ * {@docCategory SparklineChart}
+ */
+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>;
+}
+/**
+ * Sparkline styles
+ * {@docCategory SparklineChart}
+ */
+export interface ISparklineStyles {
+    inlineBlock?: IStyle;
+    valueText?: IStyle;
+}

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

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

package/lib-amd/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\n/**\n * Sparkline properties\n * {@docCategory SparklineChart}\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\n/**\n * Sparkline styles\n * {@docCategory SparklineChart}\n */\nexport interface ISparklineStyles {\n  inlineBlock?: IStyle;\n  valueText?: IStyle;\n}\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1,70 @@
+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[];
+    selectedLegend: string;
+    activeLegend: string;
+    refSelected: any;
+    dataForHoverCard: number;
+    color: string;
+    xCalloutValue?: string;
+    yCalloutValue?: string;
+    dataPointCalloutProps?: IChartDataPoint;
+    callOutAccessibilityData?: IAccessibilityProps;
+    calloutLegend: string;
+    barSpacingInPercent: number;
+}
+export declare class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
+    static defaultProps: Partial<IMultiStackedBarChartProps>;
+    private _classNames;
+    private _calloutId;
+    private _calloutAnchorPoint;
+    private _longestBarTotalValue;
+    private _isRTL;
+    private barChartSvgRef;
+    private _emptyChartId;
+    private _barId;
+    private _barIdPlaceholderPartToWhole;
+    private _barIdEmpty;
+    constructor(props: IMultiStackedBarChartProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+    /**
+     * The Create bar functions returns an array of <rect> elements, which form the bars
+     * For each bar an x value, and a width needs to be specified
+     * The computations are done based on percentages
+     * Extra margin is also provided, in the x value to provide some spacing
+     */
+    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;
+    /**
+     * This function checks if the given legend is highlighted or not.
+     * A legend can be highlighted in 2 ways:
+     * 1. selection: if the user clicks on it
+     * 2. hovering: if there is no selected legend and the user hovers over it
+     */
+    private _legendHighlighted;
+    /**
+     * This function checks if none of the legends is selected or hovered.
+     */
+    private _noLegendHighlighted;
+    private _getAriaLabel;
+    private _computeLongestBarTotalValue;
+    private _isChartEmpty;
+}

package/lib-amd/components/StackedBarChart/MultiStackedBarChart.base.js

@@ -0,0 +1,412 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "../Legends/index", "./index", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "../../utilities/locale-util", "../../utilities/index", "../../utilities/FocusableTooltipText"], function (require, exports, tslib_1, React, Utilities_1, index_1, index_2, Callout_1, react_focus_1, locale_util_1, index_3, FocusableTooltipText_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MultiStackedBarChartBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var MultiStackedBarChartBase = exports.MultiStackedBarChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(MultiStackedBarChartBase, _super);
+        function MultiStackedBarChartBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._isRTL = (0, Utilities_1.getRTL)();
+            _this._adjustProps = function () {
+                var _a;
+                var theme = (_a = _this.props, _a.theme), className = _a.className, styles = _a.styles, width = _a.width, barHeight = _a.barHeight;
+                _this._classNames = getClassNames(styles, {
+                    legendColor: _this.state.color,
+                    theme: theme,
+                    width: width,
+                    className: className,
+                    barHeight: barHeight,
+                });
+            };
+            _this._getLegendData = function (data, hideRatio, palette) {
+                var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+                var actions = [];
+                data.forEach(function (singleChartData, index) {
+                    var validChartData = singleChartData.chartData.filter(function (_) { return !_.placeHolder; });
+                    if (validChartData.length < 3) {
+                        var hideNumber = hideRatio[index] === undefined ? false : hideRatio[index];
+                        if (hideNumber) {
+                            validChartData.forEach(function (point) {
+                                var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                                var checkSimilarLegends = actions.filter(function (leg) { return leg.title === point.legend && leg.color === color; });
+                                if (checkSimilarLegends.length > 0) {
+                                    return;
+                                }
+                                var legend = {
+                                    title: point.legend,
+                                    color: color,
+                                    action: function () {
+                                        _this._onClick(point.legend);
+                                    },
+                                    hoverAction: function () {
+                                        _this._handleChartMouseLeave();
+                                        _this._onHover(point.legend);
+                                    },
+                                    onMouseOutAction: function () {
+                                        _this._onLeave();
+                                    },
+                                };
+                                actions.push(legend);
+                            });
+                        }
+                    }
+                    else {
+                        validChartData.forEach(function (point) {
+                            var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                            var checkSimilarLegends = actions.filter(function (leg) { return leg.title === point.legend && leg.color === color; });
+                            if (checkSimilarLegends.length > 0) {
+                                return;
+                            }
+                            var legend = {
+                                title: point.legend,
+                                color: color,
+                                action: function () {
+                                    _this._onClick(point.legend);
+                                },
+                                hoverAction: function () {
+                                    _this._handleChartMouseLeave();
+                                    _this._onHover(point.legend);
+                                },
+                                onMouseOutAction: function () {
+                                    _this._onLeave();
+                                },
+                            };
+                            actions.push(legend);
+                        });
+                    }
+                });
+                return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: actions, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps)));
+            };
+            _this._handleChartMouseLeave = function () {
+                _this._calloutAnchorPoint = null;
+                _this.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            _this._closeCallout = function () {
+                _this.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            /**
+             * This function checks if the given legend is highlighted or not.
+             * A legend can be highlighted in 2 ways:
+             * 1. selection: if the user clicks on it
+             * 2. hovering: if there is no selected legend and the user hovers over it
+             */
+            _this._legendHighlighted = function (legendTitle) {
+                return (_this.state.selectedLegend === legendTitle ||
+                    (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
+            };
+            /**
+             * This function checks if none of the legends is selected or hovered.
+             */
+            _this._noLegendHighlighted = function () {
+                return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
+            };
+            _this._getAriaLabel = function (point) {
+                var _a;
+                var legend = point.xAxisCalloutData || point.legend;
+                var yValue = point.yAxisCalloutData || point.data || 0;
+                return (((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) ||
+                    (legend ? "".concat(legend, ", ") : point.placeHolder ? 'Remaining, ' : '') + "".concat(yValue, "."));
+            };
+            _this._computeLongestBarTotalValue = function () {
+                var longestBarTotalValue = 0;
+                _this.props.data.forEach(function (_a) {
+                    var chartData = _a.chartData;
+                    var barTotalValue = chartData.reduce(function (acc, point) { return acc + (point.data ? point.data : 0); }, 0);
+                    longestBarTotalValue = Math.max(longestBarTotalValue, barTotalValue);
+                });
+                return longestBarTotalValue;
+            };
+            _this.state = {
+                isCalloutVisible: false,
+                refArray: [],
+                selectedLegend: '',
+                activeLegend: '',
+                refSelected: null,
+                dataForHoverCard: 0,
+                color: '',
+                xCalloutValue: '',
+                yCalloutValue: '',
+                calloutLegend: '',
+                barSpacingInPercent: 0,
+            };
+            _this._onLeave = _this._onLeave.bind(_this);
+            _this._onBarLeave = _this._onBarLeave.bind(_this);
+            _this._calloutId = (0, Utilities_1.getId)('callout');
+            _this.barChartSvgRef = React.createRef();
+            _this._emptyChartId = (0, Utilities_1.getId)('_MSBC_empty');
+            _this._barId = (0, Utilities_1.getId)('_MSBC_rect_');
+            _this._barIdPlaceholderPartToWhole = (0, Utilities_1.getId)('_MSBC_rect_partToWhole_');
+            _this._barIdEmpty = (0, Utilities_1.getId)('_MSBC_rect_empty');
+            return _this;
+        }
+        MultiStackedBarChartBase.prototype.componentDidMount = function () {
+            var _a;
+            var svgWidth = ((_a = this.barChartSvgRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+            var MARGIN_WIDTH_IN_PX = 3;
+            if (svgWidth) {
+                var currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+                this.setState({ barSpacingInPercent: currentBarSpacing });
+            }
+        };
+        MultiStackedBarChartBase.prototype.render = function () {
+            var _a;
+            var _this = this;
+            if (!this._isChartEmpty()) {
+                var data = (_a = this.props, _a.data), theme = _a.theme, culture = _a.culture;
+                this._adjustProps();
+                var palette_1 = theme.palette;
+                var legends = this._getLegendData(data, this.props.hideRatio, palette_1);
+                var isCalloutVisible = this.state.isCalloutVisible;
+                this._classNames = getClassNames(this.props.styles, {
+                    legendColor: this.state.color,
+                    theme: theme,
+                    variant: this.props.variant,
+                    hideLabels: this.props.hideLabels,
+                });
+                var legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend;
+                var calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;
+                this._longestBarTotalValue = this._computeLongestBarTotalValue();
+                var bars = data.map(function (singleChartData, index) {
+                    var singleChartBars = _this._createBarsAndLegends(singleChartData, _this.props.barHeight, palette_1, _this.props.hideRatio[index], _this.props.hideDenominator[index], _this.props.href, index);
+                    return (React.createElement("div", { key: index, id: "_MSBC_bar-".concat(index) }, singleChartBars));
+                });
+                return (React.createElement("div", { className: this._classNames.root, onMouseLeave: this._handleChartMouseLeave },
+                    bars,
+                    !this.props.hideLegend && React.createElement("div", { className: this._classNames.legendContainer }, legends),
+                    React.createElement(Callout_1.Callout, tslib_1.__assign({ gapSpace: 15, isBeakVisible: false, target: this.state.refSelected, setInitialFocus: true, hidden: !(!this.props.hideTooltip && isCalloutVisible), directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true, 
+                        /** Keep the callout updated with details of focused/hovered bar */
+                        shouldUpdateWhenHidden: true }, this.props.calloutProps, (0, index_3.getAccessibleDataObject)(this.state.callOutAccessibilityData, 'text', false)),
+                        React.createElement(React.Fragment, null, this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(index_3.ChartHoverCard, { Legend: legendName, YValue: calloutYVal, color: this.state.color, culture: culture }))))));
+            }
+            return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+        };
+        /**
+         * The Create bar functions returns an array of <rect> elements, which form the bars
+         * For each bar an x value, and a width needs to be specified
+         * The computations are done based on percentages
+         * Extra margin is also provided, in the x value to provide some spacing
+         */
+        MultiStackedBarChartBase.prototype._createBarsAndLegends = function (data, barHeight, palette, hideRatio, hideDenominator, href, barNo) {
+            var _this = this;
+            var _a, _b;
+            var noOfBars = ((_a = data.chartData) === null || _a === void 0 ? void 0 : _a.reduce(function (count, point) { return (count += (point.data || 0) > 0 ? 1 : 0); }, 0)) ||
+                1;
+            var totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);
+            var culture = this.props.culture;
+            var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+            // calculating starting point of each bar and it's range
+            var startingPoint = [];
+            var barTotalValue = data.chartData.reduce(function (acc, point) { return acc + (point.data ? point.data : 0); }, 0);
+            var total = this.props.variant === index_2.MultiStackedBarChartVariant.AbsoluteScale ? this._longestBarTotalValue : barTotalValue;
+            var sumOfPercent = 0;
+            data.chartData.map(function (point, index) {
+                var pointData = point.data ? point.data : 0;
+                var currValue = (pointData / total) * 100;
+                var value = currValue ? currValue : 0;
+                if (value < 1 && value !== 0) {
+                    value = 1;
+                }
+                else if (value > 99 && value !== 100) {
+                    value = 99;
+                }
+                sumOfPercent += value;
+                return sumOfPercent;
+            });
+            // Include an imaginary placeholder bar with value equal to
+            // the difference between longestBarTotalValue and barTotalValue
+            // while calculating sumOfPercent to get correct scalingRatio for absolute-scale variant
+            if (this.props.variant === index_2.MultiStackedBarChartVariant.AbsoluteScale) {
+                var value_1 = total === 0 ? 0 : ((total - barTotalValue) / total) * 100;
+                if (value_1 < 1 && value_1 !== 0) {
+                    value_1 = 1;
+                }
+                else if (value_1 > 99 && value_1 !== 100) {
+                    value_1 = 99;
+                }
+                sumOfPercent += value_1;
+            }
+            /**
+             * The %age of the space occupied by the margin needs to subtracted
+             * while computing the scaling ratio, since the margins are not being
+             * scaled down, only the data is being scaled down from a higher percentage to lower percentage
+             * Eg: 95% of the space is taken by the bars, 5% by the margins
+             * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
+             * since that's only space available to the bars
+             */
+            var scalingRatio = sumOfPercent !== 0 ? sumOfPercent / (100 - totalMarginPercent) : 1;
+            var prevPosition = 0;
+            var value = 0;
+            var bars = data.chartData.map(function (point, index) {
+                var color = point.color
+                    ? point.color
+                    : point.placeHolder
+                        ? palette.neutralLight
+                        : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                var pointData = point.data ? point.data : 0;
+                if (index > 0) {
+                    prevPosition += value;
+                }
+                value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;
+                if (value < 1 && value !== 0) {
+                    value = 1 / scalingRatio;
+                }
+                else if (value > 99 && value !== 100) {
+                    value = 99 / scalingRatio;
+                }
+                else {
+                    value = value / scalingRatio;
+                }
+                startingPoint.push(prevPosition);
+                var styles = _this.props.styles;
+                var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
+                var hoverCardYColor = point.placeHolder ? _this.props.theme.semanticColors.bodyText : color;
+                _this._classNames = getClassNames(styles, {
+                    theme: _this.props.theme,
+                    shouldHighlight: shouldHighlight,
+                    href: href,
+                    variant: _this.props.variant,
+                    hideLabels: _this.props.hideLabels,
+                });
+                return (React.createElement("g", { key: index, className: point.placeHolder ? _this._classNames.placeHolderOnHover : _this._classNames.opacityChangeOnHover, ref: function (e) {
+                        _this._refCallback(e, point.legend);
+                    }, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, onFocus: _this._onBarFocus.bind(_this, pointData, hoverCardYColor, point), onBlur: _this._onBarLeave, role: "img", "aria-label": _this._getAriaLabel(point), onMouseOver: _this._onBarHover.bind(_this, pointData, hoverCardYColor, point), onMouseMove: _this._onBarHover.bind(_this, pointData, hoverCardYColor, point), onMouseLeave: _this._onBarLeave, onClick: href ? (point.placeHolder ? undefined : _this._redirectToUrl.bind(_this, href)) : point.onClick },
+                    React.createElement("rect", { key: index, id: "".concat(_this._barId, "-").concat(barNo, "-").concat(index), x: "".concat(_this._isRTL
+                            ? 100 - startingPoint[index] - value - _this.state.barSpacingInPercent * index
+                            : startingPoint[index] + _this.state.barSpacingInPercent * index, "%"), y: 0, width: value + '%', height: barHeight, fill: color })));
+            });
+            if (this.props.variant === index_2.MultiStackedBarChartVariant.AbsoluteScale && !this.props.hideLabels) {
+                var showLabel_1 = false;
+                var barLabel_1 = 0;
+                if (this._noLegendHighlighted()) {
+                    showLabel_1 = true;
+                    barLabel_1 = barTotalValue;
+                }
+                else {
+                    (_b = data.chartData) === null || _b === void 0 ? void 0 : _b.forEach(function (point) {
+                        if (_this._legendHighlighted(point.legend)) {
+                            showLabel_1 = true;
+                            barLabel_1 += point.data ? point.data : 0;
+                        }
+                    });
+                }
+                if (showLabel_1) {
+                    bars.push(React.createElement("text", { key: "text", x: "".concat(this._isRTL
+                            ? 100 - (startingPoint[startingPoint.length - 1] || 0) - value - totalMarginPercent
+                            : (startingPoint[startingPoint.length - 1] || 0) + value + totalMarginPercent, "%"), textAnchor: 'start', y: barHeight / 2, dominantBaseline: "central", transform: "translate(".concat(this._isRTL ? -4 : 4, ")"), className: this._classNames.barLabel, "aria-label": "Total: ".concat(barLabel_1), role: "img" }, (0, index_3.formatValueWithSIPrefix)(barLabel_1)));
+                }
+            }
+            else {
+                // Render placeholder bars only for part-to-whole variant
+                if (data.chartData.length === 0) {
+                    bars.push(React.createElement("g", { key: 0, className: this._classNames.noData, onClick: this._redirectToUrl.bind(this, href) },
+                        React.createElement("rect", { key: 0, id: this._barIdPlaceholderPartToWhole, x: '0%', y: 0, width: '100%', height: barHeight, fill: palette.neutralLight })));
+                }
+                if (barTotalValue === 0) {
+                    bars.push(React.createElement("g", { key: 'empty', className: this._classNames.noData, onClick: this._redirectToUrl.bind(this, href) },
+                        React.createElement("rect", { key: 0, id: this._barIdEmpty, x: '0%', y: 0, width: '100%', height: barHeight, fill: palette.neutralLight })));
+                }
+            }
+            var hideNumber = hideRatio === undefined ? false : hideRatio;
+            // Hide right side text of chart title for absolute-scale variant
+            var showRatio = this.props.variant !== index_2.MultiStackedBarChartVariant.AbsoluteScale && !hideNumber && data.chartData.length === 2;
+            var showNumber = this.props.variant !== index_2.MultiStackedBarChartVariant.AbsoluteScale && !hideNumber && data.chartData.length === 1;
+            var getChartData = function () { return (0, locale_util_1.convertToLocaleString)(data.chartData[0].data ? data.chartData[0].data : 0, culture); };
+            return (React.createElement("div", { className: this._classNames.singleChartRoot },
+                React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
+                    React.createElement("div", { className: this._classNames.chartTitle },
+                        data.chartTitle && (React.createElement(FocusableTooltipText_1.FocusableTooltipText, { className: this._classNames.chartTitleLeft, content: data.chartTitle, accessibilityData: data.chartTitleAccessibilityData })),
+                        showRatio && (React.createElement("div", tslib_1.__assign({}, (0, index_3.getAccessibleDataObject)(data.chartDataAccessibilityData, 'text', false)),
+                            React.createElement("span", { className: this._classNames.ratioNumerator }, getChartData()),
+                            !hideDenominator && (React.createElement("span", { className: this._classNames.ratioDenominator }, ' / ' + (0, locale_util_1.convertToLocaleString)(barTotalValue, culture))))),
+                        showNumber && (React.createElement("div", tslib_1.__assign({ className: this._classNames.ratioNumerator }, (0, index_3.getAccessibleDataObject)(data.chartDataAccessibilityData, 'text', false)), getChartData())))),
+                React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
+                    React.createElement("div", { className: this._classNames.chartWrapper },
+                        React.createElement("svg", { ref: this.barChartSvgRef, className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle }, bars)))));
+        };
+        MultiStackedBarChartBase.prototype._onBarFocus = function (pointData, color, point) {
+            var _this = this;
+            this.state.refArray.forEach(function (obj) {
+                if (obj.legendText === point.legend) {
+                    _this.setState({
+                        refSelected: obj.refElement,
+                        /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+                        isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === point.legend,
+                        calloutLegend: point.legend,
+                        dataForHoverCard: pointData,
+                        color: color,
+                        xCalloutValue: point.xAxisCalloutData,
+                        yCalloutValue: point.yAxisCalloutData,
+                        dataPointCalloutProps: point,
+                        callOutAccessibilityData: point.callOutAccessibilityData,
+                    });
+                }
+            });
+        };
+        MultiStackedBarChartBase.prototype._refCallback = function (element, legendTitle) {
+            this.state.refArray.push({ legendText: legendTitle, refElement: element });
+        };
+        MultiStackedBarChartBase.prototype._onHover = function (legendTitle) {
+            this.setState({
+                activeLegend: legendTitle,
+            });
+        };
+        MultiStackedBarChartBase.prototype._onClick = function (legendTitle) {
+            if (this.state.selectedLegend === legendTitle) {
+                this.setState({
+                    selectedLegend: '',
+                });
+            }
+            else {
+                this.setState({
+                    selectedLegend: legendTitle,
+                });
+            }
+        };
+        MultiStackedBarChartBase.prototype._onLeave = function () {
+            this.setState({
+                activeLegend: '',
+            });
+        };
+        MultiStackedBarChartBase.prototype._onBarHover = function (pointData, color, point, mouseEvent) {
+            mouseEvent.persist();
+            if (this._calloutAnchorPoint !== point) {
+                this._calloutAnchorPoint = point;
+                this.setState({
+                    refSelected: mouseEvent,
+                    /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+                    isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend,
+                    calloutLegend: point.legend,
+                    dataForHoverCard: pointData,
+                    color: color,
+                    xCalloutValue: point.xAxisCalloutData,
+                    yCalloutValue: point.yAxisCalloutData,
+                    dataPointCalloutProps: point,
+                    callOutAccessibilityData: point.callOutAccessibilityData,
+                });
+            }
+        };
+        MultiStackedBarChartBase.prototype._onBarLeave = function () {
+            /**/
+        };
+        MultiStackedBarChartBase.prototype._redirectToUrl = function (href) {
+            href ? (window.location.href = href) : '';
+        };
+        MultiStackedBarChartBase.prototype._isChartEmpty = function () {
+            return !(this.props.data &&
+                this.props.data.length > 0 &&
+                this.props.data.filter(function (item) { return item.chartData && item.chartData.length === 0 && (!item.chartTitle || item.chartTitle === ''); }).length === 0);
+        };
+        MultiStackedBarChartBase.defaultProps = {
+            barHeight: 12,
+            hideRatio: [],
+            hideDenominator: [],
+        };
+        return MultiStackedBarChartBase;
+    }(React.Component));
+});
+//# sourceMappingURL=MultiStackedBarChart.base.js.map