@fluentui/react-charting 5.16.36 → 5.16.38

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

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

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

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

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

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

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

@@ -7,7 +7,7 @@ var shape = require("d3-shape");
 var scale = require("d3-scale");
 var Arc_1 = require("../Arc/Arc");
 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-commonjs/components/PieChart/Pie/Pie.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,gCAAkC;AAClC,gCAAkC;AAElC,kCAAwC;AAGxC;IAAyB,oCAA8B;IAUrD,aAAY,KAAgB;QAA5B,YACE,kBAAM,KAAK,CAAC,SACb;QAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;YAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,GAC1B,CACH,CAAC;QACJ,CAAC,CAAC;;IAbF,CAAC;IAeM,oBAAM,GAAb;QAAA,iBAcC;QAbC,qEAAqE;QAC/D,IAAA,KAAmD,IAAI,CAAC,KAAK,EAA3D,GAAG,SAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;QAEpE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,MAAO,CAAC,CAAC;QAElD,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;QAE3D,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;YACvD,2BAAG,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,CAAK,CAC5F,CACP,CAAC;IACJ,CAAC;IAxCa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK;aACP,GAAG,EAAE;aACL,IAAI,CAAC,IAAI,CAAC;YACX,uDAAuD;aACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;KAC1B,CAAC;IAmCJ,UAAC;CAAA,AA1CD,CAAyB,KAAK,CAAC,SAAS,GA0CvC;AA1CY,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":";;;;AAAA,6BAA+B;AAC/B,gCAAkC;AAClC,gCAAkC;AAElC,kCAAwC;AAGxC;IAAyB,+BAA8B;IAUrD,aAAY,KAAgB;QAA5B,YACE,kBAAM,KAAK,CAAC,SACb;QAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;YAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,GAC1B,CACH,CAAC;QACJ,CAAC,CAAC;;IAbF,CAAC;IAeM,oBAAM,GAAb;QAAA,iBAcC;QAbC,qEAAqE;QAC/D,IAAA,KAAmD,IAAI,CAAC,KAAK,EAA3D,GAAG,SAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;QAEpE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,MAAO,CAAC,CAAC;QAElD,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;QAE3D,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;YACvD,2BAAG,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,CAAK,CAC5F,CACP,CAAC;IACJ,CAAC;IAxCa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK;aACP,GAAG,EAAE;aACL,IAAI,CAAC,IAAI,CAAC;YACX,uDAAuD;aACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;KAC1B,CAAC;IAmCJ,UAAC;CAAA,AA1CD,CAAyB,KAAK,CAAC,SAAS,GA0CvC;AA1CY,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-commonjs/components/PieChart/Pie/index.js

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

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

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

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

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

@@ -7,10 +7,22 @@ var Utilities_1 = require("@fluentui/react/lib/Utilities");
 var Pie_1 = require("./Pie/Pie");
 var getClassNames = (0, Utilities_1.classNamesFunction)();
 var PieChartBase = /** @class */ (function (_super) {
-    (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;
@@ -22,9 +34,9 @@ var PieChartBase = /** @class */ (function (_super) {
         });
         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-commonjs/components/PieChart/PieChart.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,2DAAmE;AAEnE,iCAAgC;AAEhC,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;AAEjF;IAAkC,6CAAmC;IAArE;;IAqCA,CAAC;IA7BQ,6BAAM,GAAb;QACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;QAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;QACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,KAAK,EAAE,KAAM;YACb,MAAM,EAAE,MAAO;YACf,SAAS,WAAA;SACV,CAAC,CAAC;QACH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,EAAE,MAAO,CAAC,GAAG,CAAC,CAAC;QAC7C,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;QAEhC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;YAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;YAChG,oBAAC,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;IACJ,CAAC;IAnCa,yBAAY,GAA4B;QACpD,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ,CAAC;IAgCJ,mBAAC;CAAA,AArCD,CAAkC,KAAK,CAAC,SAAS,GAqChD;AArCY,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":";;;;AAAA,6BAA+B;AAC/B,2DAA0E;AAE1E,iCAAgC;AAGhC,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;AAKjF;IAAkC,wCAA+C;IAQ/E,sBAAmB,KAAqB;QAAxC,YACE,kBAAM,KAAK,CAAC,SAIb;QAHC,KAAI,CAAC,KAAK,GAAG;YACX,UAAU,EAAE,KAAK;SAClB,CAAC;;IACJ,CAAC;IAEM,wCAAiB,GAAxB;QACE,IAAM,YAAY,GAAG,CAAC,CACpB,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;YAC1B,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;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,YAAY,EAAE;YAC1C,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;SAC7C;IACH,CAAC;IAEM,6BAAM,GAAb;QACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;QAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;QACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,KAAK,EAAE,KAAM;YACb,MAAM,EAAE,MAAO;YACf,SAAS,WAAA;SACV,CAAC,CAAC;QACH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,EAAE,MAAO,CAAC,GAAG,CAAC,CAAC;QAC7C,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;QAEhC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAC9B,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;YAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;YAChG,oBAAC,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;IACJ,CAAC;IA5Da,yBAAY,GAA4B;QACpD,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ,CAAC;IAyDJ,mBAAC;CAAA,AA9DD,CAAkC,KAAK,CAAC,SAAS,GA8DhD;AA9DY,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-commonjs/components/PieChart/PieChart.styles.js

@@ -25,7 +25,7 @@ var getStyles = function (props) {
             },
         ],
         chartTitle: [
-            (0, tslib_1.__assign)({ textAlign: 'center' }, theme.fonts.mediumPlus),
+            tslib_1.__assign({ textAlign: 'center' }, theme.fonts.mediumPlus),
         ],
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.styles.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA0B;IAC1C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,KAAK,GAAa,KAAK,MAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;IAElD,IAAM,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC;IAC9B,IAAM,YAAY,GAAG,EAAE,CAAC;IACxB,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;IAEhC,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,aAAa;YACb,SAAS;YACT;gBACE,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,YAAY;aACrC;SACF;QACD,KAAK,EAAE;YACL;gBACE,OAAO,EAAE,YAAY;gBACrB,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,WAAW;gBACnB,SAAS,EAAE,aAAa;aACzB;SACF;QACD,UAAU,EAAE;oCAER,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,KAAK,CAAC,UAAU;SAE5B;KACF,CAAC;AACJ,CAAC,CAAC;AA/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":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA0B;IAC1C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,KAAK,GAAa,KAAK,MAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;IAElD,IAAM,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC;IAC9B,IAAM,YAAY,GAAG,EAAE,CAAC;IACxB,IAAM,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;IAEhC,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,aAAa;YACb,SAAS;YACT;gBACE,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,YAAY;aACrC;SACF;QACD,KAAK,EAAE;YACL;gBACE,OAAO,EAAE,YAAY;gBACrB,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,WAAW;gBACnB,SAAS,EAAE,aAAa;aACzB;SACF;QACD,UAAU,EAAE;+BAER,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,KAAK,CAAC,UAAU;SAE5B;KACF,CAAC;AACJ,CAAC,CAAC;AA/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-commonjs/components/PieChart/index.js

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

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

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

package/lib-commonjs/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-commonjs/components/SankeyChart/SankeyChart.base.js

@@ -35,7 +35,7 @@ var NON_SELECTED_STREAM_BORDER_OPACITY = 0.5;
 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)();
@@ -83,6 +83,10 @@ var SankeyChartBase = /** @class */ (function (_super) {
             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');
@@ -104,47 +108,50 @@ var SankeyChartBase = /** @class */ (function (_super) {
     };
     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;