@fluentui/react-charting 5.16.36 → 5.16.38

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

@@ -1 +1 @@
-{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":";;;;IAOA;QAAyB,oCAA8B;QAAvD;YAAA,qEAsBC;YAjBQ,WAAK,GAAO,EAAE,CAAC;YAOf,iBAAW,GAAG,UAAC,QAAmB;gBACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC,CAAC;;QAQJ,CAAC;QAfe,4BAAwB,GAAtC,UAAuC,SAA8B;YACnE,YAAY,CAAC,SAAS,CAAC,CAAC;YACxB,OAAO,IAAI,CAAC;QACd,CAAC;QAMM,oBAAM,GAAb;;YACQ,IAAA,KAAiB,IAAI,CAAC,KAAK,EAAzB,KAAK,WAAA,EAAE,GAAG,SAAe,CAAC;YAClC,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAyB,CAAC;YAClE,IAAM,UAAU,GAAG,aAAa,CAAC,sBAAS,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;YACvD,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;QAC/G,CAAC;QApBa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;SACjB,CAAC;QAmBJ,UAAC;KAAA,AAtBD,CAAyB,KAAK,CAAC,SAAS,GAsBvC;IAtBY,kBAAG;IAwBhB;QAAgC,2CAAG;QAAnC;;QAeA,CAAC;QAdQ,2BAAM,GAAb;YACQ,IAAA,KAAyB,IAAI,CAAC,KAAK,EAAjC,IAAI,UAAA,EAAE,GAAG,SAAA,EAAE,OAAO,aAAe,CAAC;YACpC,IAAA,KAAmB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAApC,MAAM,QAAA,EAAE,MAAM,QAAsB,CAAC;YAC5C,IAAM,cAAc,GAAG,oBAAa,MAAM,eAAK,MAAM,MAAG,CAAC;YAEzD,OAAO,CACL,2BAAG,SAAS,EAAC,KAAK;gBACf,iBAAM,MAAM,WAAE;gBACf,8BAAM,SAAS,EAAE,cAAc,EAAE,UAAU,EAAC,QAAQ;oBACjD,IAAK,CAAC,IAAK,CAAC,CAAC;;oBAAG,IAAA,iCAAqB,EAAC,IAAK,CAAC,IAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CACzD,CACL,CACL,CAAC;QACJ,CAAC;QACH,iBAAC;IAAD,CAAC,AAfD,CAAgC,GAAG,GAelC;IAfY,gCAAU;IAiBvB,SAAS,YAAY,CAAC,QAAmB;QACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IACjD,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"]}
+{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":";;;;IAOA;QAAyB,+BAA8B;QAAvD;YAAA,qEAsBC;YAjBQ,WAAK,GAAO,EAAE,CAAC;YAOf,iBAAW,GAAG,UAAC,QAAmB;gBACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC,CAAC;;QAQJ,CAAC;QAfe,4BAAwB,GAAtC,UAAuC,SAA8B;YACnE,YAAY,CAAC,SAAS,CAAC,CAAC;YACxB,OAAO,IAAI,CAAC;QACd,CAAC;QAMM,oBAAM,GAAb;;YACQ,IAAA,KAAiB,IAAI,CAAC,KAAK,EAAzB,KAAK,WAAA,EAAE,GAAG,SAAe,CAAC;YAClC,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAyB,CAAC;YAClE,IAAM,UAAU,GAAG,aAAa,CAAC,sBAAS,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;YACvD,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;QAC/G,CAAC;QApBa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;SACjB,CAAC;QAmBJ,UAAC;KAAA,AAtBD,CAAyB,KAAK,CAAC,SAAS,GAsBvC;IAtBY,kBAAG;IAwBhB;QAAgC,sCAAG;QAAnC;;QAeA,CAAC;QAdQ,2BAAM,GAAb;YACQ,IAAA,KAAyB,IAAI,CAAC,KAAK,EAAjC,IAAI,UAAA,EAAE,GAAG,SAAA,EAAE,OAAO,aAAe,CAAC;YACpC,IAAA,KAAmB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAApC,MAAM,QAAA,EAAE,MAAM,QAAsB,CAAC;YAC5C,IAAM,cAAc,GAAG,oBAAa,MAAM,eAAK,MAAM,MAAG,CAAC;YAEzD,OAAO,CACL,2BAAG,SAAS,EAAC,KAAK;gBACf,iBAAM,MAAM,WAAE;gBACf,8BAAM,SAAS,EAAE,cAAc,EAAE,UAAU,EAAC,QAAQ;oBACjD,IAAK,CAAC,IAAK,CAAC,CAAC;;oBAAG,IAAA,iCAAqB,EAAC,IAAK,CAAC,IAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CACzD,CACL,CACL,CAAC;QACJ,CAAC;QACH,iBAAC;IAAD,CAAC,AAfD,CAAgC,GAAG,GAelC;IAfY,gCAAU;IAiBvB,SAAS,YAAY,CAAC,QAAmB;QACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IACjD,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-amd/components/PieChart/Arc/index.js

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

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

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

package/lib-amd/components/PieChart/Pie/Pie.js

@@ -3,7 +3,7 @@ define(["require", "exports", "tslib", "react", "d3-shape", "d3-scale", "../Arc/
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Pie = void 0;
     var Pie = /** @class */ (function (_super) {
-        (0, tslib_1.__extends)(Pie, _super);
+        tslib_1.__extends(Pie, _super);
         function Pie(props) {
             var _this = _super.call(this, props) || this;
             _this.arcGenerator = function (d, i) {

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

@@ -1 +1 @@
-{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;IAOA;QAAyB,oCAA8B;QAUrD,aAAY,KAAgB;YAA5B,YACE,kBAAM,KAAK,CAAC,SACb;YAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;gBAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,GAC1B,CACH,CAAC;YACJ,CAAC,CAAC;;QAbF,CAAC;QAeM,oBAAM,GAAb;YAAA,iBAcC;YAbC,qEAAqE;YAC/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;YAEpE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,MAAO,CAAC,CAAC;YAElD,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;YAE3D,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;gBACvD,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;QACJ,CAAC;QAxCa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,KAAK;iBACP,GAAG,EAAE;iBACL,IAAI,CAAC,IAAI,CAAC;gBACX,uDAAuD;iBACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;SAC1B,CAAC;QAmCJ,UAAC;KAAA,AA1CD,CAAyB,KAAK,CAAC,SAAS,GA0CvC;IA1CY,kBAAG","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"]}
+{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;IAOA;QAAyB,+BAA8B;QAUrD,aAAY,KAAgB;YAA5B,YACE,kBAAM,KAAK,CAAC,SACb;YAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;gBAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,GAC1B,CACH,CAAC;YACJ,CAAC,CAAC;;QAbF,CAAC;QAeM,oBAAM,GAAb;YAAA,iBAcC;YAbC,qEAAqE;YAC/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;YAEpE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,MAAO,CAAC,CAAC;YAElD,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;YAE3D,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;gBACvD,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;QACJ,CAAC;QAxCa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,KAAK;iBACP,GAAG,EAAE;iBACL,IAAI,CAAC,IAAI,CAAC;gBACX,uDAAuD;iBACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;SAC1B,CAAC;QAmCJ,UAAC;KAAA,AA1CD,CAAyB,KAAK,CAAC,SAAS,GA0CvC;IA1CY,kBAAG","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-amd/components/PieChart/Pie/index.js

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

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

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

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { IPieChartProps } from './PieChart.types';
-export declare class PieChartBase extends React.Component<IPieChartProps, {}> {
+export interface IPieChartState {
+    emptyChart?: boolean;
+}
+export declare class PieChartBase extends React.Component<IPieChartProps, IPieChartState> {
     static defaultProps: Partial<IPieChartProps>;
     private _classNames;
+    constructor(props: IPieChartProps);
+    componentDidMount(): void;
     render(): JSX.Element;
 }

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

@@ -4,10 +4,22 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
     exports.PieChartBase = void 0;
     var getClassNames = (0, Utilities_1.classNamesFunction)();
     var PieChartBase = /** @class */ (function (_super) {
-        (0, tslib_1.__extends)(PieChartBase, _super);
-        function PieChartBase() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        tslib_1.__extends(PieChartBase, _super);
+        function PieChartBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this.state = {
+                emptyChart: false,
+            };
+            return _this;
         }
+        PieChartBase.prototype.componentDidMount = function () {
+            var isChartEmpty = !(this.props.data &&
+                this.props.data.length > 0 &&
+                this.props.data.filter(function (item) { return item.y > 0; }).length > 0);
+            if (this.state.emptyChart !== isChartEmpty) {
+                this.setState({ emptyChart: isChartEmpty });
+            }
+        };
         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;
@@ -19,9 +31,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             });
             var radius = Math.min(width, height) / 2;
             var outerRadius = radius - 10;
-            return (React.createElement("div", { className: this._classNames.root },
+            return !this.state.emptyChart ? (React.createElement("div", { className: this._classNames.root },
                 this.props.chartTitle && React.createElement("p", { className: this._classNames.chartTitle }, this.props.chartTitle),
-                React.createElement(Pie_1.Pie, { culture: culture, width: width, height: height, outerRadius: outerRadius, innerRadius: 0, data: data, colors: colors, chartTitle: chartTitle })));
+                React.createElement(Pie_1.Pie, { culture: culture, width: width, height: height, outerRadius: outerRadius, innerRadius: 0, data: data, colors: colors, chartTitle: chartTitle }))) : (React.createElement("div", { id: (0, Utilities_1.getId)('_PieChart_'), role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
         };
         PieChartBase.defaultProps = {
             data: [],

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";;;;IAKA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;IAEjF;QAAkC,6CAAmC;QAArE;;QAqCA,CAAC;QA7BQ,6BAAM,GAAb;YACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;YAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;YACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,KAAK,EAAE,KAAM;gBACb,MAAM,EAAE,MAAO;gBACf,SAAS,WAAA;aACV,CAAC,CAAC;YACH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,EAAE,MAAO,CAAC,GAAG,CAAC,CAAC;YAC7C,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;YAEhC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;gBAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;gBAChG,oBAAC,SAAG,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;QACJ,CAAC;QAnCa,yBAAY,GAA4B;YACpD,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,CAAC;QAgCJ,mBAAC;KAAA,AArCD,CAAkC,KAAK,CAAC,SAAS,GAqChD;IArCY,oCAAY","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"]}
+{"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";;;;IAMA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;IAKjF;QAAkC,wCAA+C;QAQ/E,sBAAmB,KAAqB;YAAxC,YACE,kBAAM,KAAK,CAAC,SAIb;YAHC,KAAI,CAAC,KAAK,GAAG;gBACX,UAAU,EAAE,KAAK;aAClB,CAAC;;QACJ,CAAC;QAEM,wCAAiB,GAAxB;YACE,IAAM,YAAY,GAAG,CAAC,CACpB,IAAI,CAAC,KAAK,CAAC,IAAI;gBACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CACtD,CAAC;YACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,YAAY,EAAE;gBAC1C,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;aAC7C;QACH,CAAC;QAEM,6BAAM,GAAb;YACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;YAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;YACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;gBACxC,KAAK,EAAE,KAAM;gBACb,KAAK,EAAE,KAAM;gBACb,MAAM,EAAE,MAAO;gBACf,SAAS,WAAA;aACV,CAAC,CAAC;YACH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,EAAE,MAAO,CAAC,GAAG,CAAC,CAAC;YAC7C,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;YAEhC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAC9B,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;gBAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;gBAChG,oBAAC,SAAG,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,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAA,iBAAK,EAAC,YAAY,CAAC,EACvB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;QACJ,CAAC;QA5Da,yBAAY,GAA4B;YACpD,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,CAAC;QAyDJ,mBAAC;KAAA,AA9DD,CAAkC,KAAK,CAAC,SAAS,GA8DhD;IA9DY,oCAAY","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { Pie } from './Pie/Pie';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\n\nconst getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();\nexport interface IPieChartState {\n  emptyChart?: boolean;\n}\n\nexport class PieChartBase extends React.Component<IPieChartProps, IPieChartState> {\n  public static defaultProps: Partial<IPieChartProps> = {\n    data: [],\n    width: 600,\n    height: 350,\n  };\n  private _classNames: IProcessedStyleSet<IPieChartStyles>;\n\n  public constructor(props: IPieChartProps) {\n    super(props);\n    this.state = {\n      emptyChart: false,\n    };\n  }\n\n  public componentDidMount(): void {\n    const isChartEmpty = !(\n      this.props.data &&\n      this.props.data.length > 0 &&\n      this.props.data.filter(item => item.y > 0).length > 0\n    );\n    if (this.state.emptyChart !== isChartEmpty) {\n      this.setState({ emptyChart: isChartEmpty });\n    }\n  }\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 !this.state.emptyChart ? (\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      <div\n        id={getId('_PieChart_')}\n        role={'alert'}\n        style={{ opacity: '0' }}\n        aria-label={'Graph has no data to display'}\n      />\n    );\n  }\n}\n"]}

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

@@ -25,7 +25,7 @@ define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
                 },
             ],
             chartTitle: [
-                (0, tslib_1.__assign)({ textAlign: 'center' }, theme.fonts.mediumPlus),
+                tslib_1.__assign({ textAlign: 'center' }, theme.fonts.mediumPlus),
             ],
         };
     };

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.styles.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA0B;QAC1C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,KAAK,GAAa,KAAK,MAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;QAElD,IAAM,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC;QAC9B,IAAM,YAAY,GAAG,EAAE,CAAC;QACxB,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;QAEhC,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,aAAa;gBACb,SAAS;gBACT;oBACE,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,YAAY;iBACrC;aACF;YACD,KAAK,EAAE;gBACL;oBACE,OAAO,EAAE,YAAY;oBACrB,KAAK,EAAE,UAAU;oBACjB,MAAM,EAAE,WAAW;oBACnB,SAAS,EAAE,aAAa;iBACzB;aACF;YACD,UAAU,EAAE;wCAER,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,KAAK,CAAC,UAAU;aAE5B;SACF,CAAC;IACJ,CAAC,CAAC;IA/BW,QAAA,SAAS,aA+BpB","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"]}
+{"version":3,"file":"PieChart.styles.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA0B;QAC1C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,KAAK,GAAa,KAAK,MAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;QAElD,IAAM,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC;QAC9B,IAAM,YAAY,GAAG,EAAE,CAAC;QACxB,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;QAEhC,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,aAAa;gBACb,SAAS;gBACT;oBACE,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,YAAY;iBACrC;aACF;YACD,KAAK,EAAE;gBACL;oBACE,OAAO,EAAE,YAAY;oBACrB,KAAK,EAAE,UAAU;oBACjB,MAAM,EAAE,WAAW;oBACnB,SAAS,EAAE,aAAa;iBACzB;aACF;YACD,UAAU,EAAE;mCAER,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,KAAK,CAAC,UAAU;aAE5B;SACF,CAAC;IACJ,CAAC,CAAC;IA/BW,QAAA,SAAS,aA+BpB","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-amd/components/PieChart/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/PieChart/index.ts"],"names":[],"mappings":";;;IAAA,+CAA2B;IAC3B,qDAAiC","sourcesContent":["export * from './PieChart';\nexport * from './PieChart.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/PieChart/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './PieChart';\nexport * from './PieChart.types';\n"]}

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

@@ -11,6 +11,7 @@ export interface ISankeyChartState extends IBasestate, IChartHoverCardProps {
     refSelected?: any;
     selectedLink?: SLink;
     shouldOverflow: boolean;
+    emptyChart?: boolean;
 }
 export declare class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyChartState> {
     private _classNames;

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

@@ -26,7 +26,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
     var DEFAULT_TEXT_COLOR = '#323130';
     var NON_SELECTED_TEXT_COLOR = '#FFFFFF';
     var SankeyChartBase = /** @class */ (function (_super) {
-        (0, tslib_1.__extends)(SankeyChartBase, _super);
+        tslib_1.__extends(SankeyChartBase, _super);
         function SankeyChartBase(props) {
             var _this = _super.call(this, props) || this;
             _this._isRtl = (0, Utilities_1.getRTL)();
@@ -74,6 +74,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 selectedNodes: new Set(),
                 shouldOverflow: false,
                 isCalloutVisible: false,
+                emptyChart: !(_this.props.data &&
+                    _this.props.data.SankeyChartData &&
+                    _this.props.data.SankeyChartData.nodes.length > 0 &&
+                    _this.props.data.SankeyChartData.links.length > 0),
             };
             _this._calloutId = (0, Utilities_1.getId)('callout');
             _this._linkId = (0, Utilities_1.getId)('link');
@@ -95,47 +99,50 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
         };
         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,
-            });
-            // We are using the this._margins.left and this._margins.top in sankey extent while constructing the layout
-            var _b = this._preRenderLayout(), height = _b.height, width = _b.width;
-            this._normalizeData(this.props.data.SankeyChartData);
-            var nodePadding = 8;
-            nodePadding = this._adjustPadding(this._sankey, height - 6, this._nodesInColumn);
-            this._sankey.nodePadding(nodePadding);
-            this._sankey(this.props.data.SankeyChartData);
-            this._populateNodeActualValue(this.props.data.SankeyChartData);
-            this._assignNodeColors();
-            var nodeData = this._createNodes(width);
-            var linkData = this._createLinks();
-            var calloutProps = {
-                isCalloutVisible: this.state.isCalloutVisible,
-                directionalHint: Callout_1.DirectionalHint.topAutoEdge,
-                id: "toolTip".concat(this._calloutId),
-                target: this.state.refSelected,
-                color: this.state.color,
-                XValue: this.state.xCalloutValue,
-                YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,
-                descriptionMessage: this.state.descriptionMessage,
-                isBeakVisible: false,
-                gapSpace: 15,
-                onDismiss: this._onCloseCallout,
-                className: this._classNames.calloutContentRoot,
-                preventDismissOnLostFocus: true,
-            };
-            return (React.createElement("div", { className: this._classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this._onCloseCallout },
-                React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.bidirectional, isCircularNavigation: true, handleTabKey: react_focus_1.FocusZoneTabbableElements.all },
-                    React.createElement("svg", { width: width, height: height, id: (0, Utilities_1.getId)('sankeyChart') },
-                        React.createElement("g", { className: this._classNames.links, strokeOpacity: 1 }, linkData),
-                        React.createElement("g", { className: this._classNames.nodes }, nodeData),
-                        calloutProps.isCalloutVisible && (React.createElement(Callout_1.Callout, (0, tslib_1.__assign)({}, calloutProps),
-                            React.createElement(index_1.ChartHoverCard, { XValue: calloutProps.XValue, YValue: calloutProps.YValue, color: calloutProps.color, descriptionMessage: calloutProps.descriptionMessage ? calloutProps.descriptionMessage : '' })))))));
+            if (!this.state.emptyChart) {
+                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,
+                });
+                // We are using the this._margins.left and this._margins.top in sankey extent while constructing the layout
+                var _b = this._preRenderLayout(), height = _b.height, width = _b.width;
+                this._normalizeData(this.props.data.SankeyChartData);
+                var nodePadding = 8;
+                nodePadding = this._adjustPadding(this._sankey, height - 6, this._nodesInColumn);
+                this._sankey.nodePadding(nodePadding);
+                this._sankey(this.props.data.SankeyChartData);
+                this._populateNodeActualValue(this.props.data.SankeyChartData);
+                this._assignNodeColors();
+                var nodeData = this._createNodes(width);
+                var linkData = this._createLinks();
+                var calloutProps = {
+                    isCalloutVisible: this.state.isCalloutVisible,
+                    directionalHint: Callout_1.DirectionalHint.topAutoEdge,
+                    id: "toolTip".concat(this._calloutId),
+                    target: this.state.refSelected,
+                    color: this.state.color,
+                    XValue: this.state.xCalloutValue,
+                    YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,
+                    descriptionMessage: this.state.descriptionMessage,
+                    isBeakVisible: false,
+                    gapSpace: 15,
+                    onDismiss: this._onCloseCallout,
+                    className: this._classNames.calloutContentRoot,
+                    preventDismissOnLostFocus: true,
+                };
+                return (React.createElement("div", { className: this._classNames.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this._onCloseCallout },
+                    React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.bidirectional, isCircularNavigation: true, handleTabKey: react_focus_1.FocusZoneTabbableElements.all },
+                        React.createElement("svg", { width: width, height: height, id: (0, Utilities_1.getId)('sankeyChart') },
+                            React.createElement("g", { className: this._classNames.links, strokeOpacity: 1 }, linkData),
+                            React.createElement("g", { className: this._classNames.nodes }, nodeData),
+                            calloutProps.isCalloutVisible && (React.createElement(Callout_1.Callout, tslib_1.__assign({}, calloutProps),
+                                React.createElement(index_1.ChartHoverCard, { XValue: calloutProps.XValue, YValue: calloutProps.YValue, color: calloutProps.color, descriptionMessage: calloutProps.descriptionMessage ? calloutProps.descriptionMessage : '' })))))));
+            }
+            return (React.createElement("div", { id: (0, Utilities_1.getId)('_SankeyChart_'), role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
         };
         SankeyChartBase.prototype._preRenderLayout = function () {
             var width = this.state.containerWidth - this._margins.right;