@fluentui/react-charting 5.24.9 → 5.24.11

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

@@ -61,6 +61,12 @@ export interface ILineChartProps extends ICartesianChartProps {
      * @deprecated this prop no longer used to identify scatter mode
      */
     lineMode?: 'default' | 'scatter';
+    /**
+     * To enable callout for individual line or complete stack.
+     * @default false
+     * @type \{boolean \}
+     */
+    isCalloutForStack?: boolean;
 }
 /**
  * {@docCategory LineChart}

package/lib-amd/components/LineChart/LineChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.types.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  IChartProps,\n  ILineChartPoints,\n  IMargins,\n  IBasestate,\n  IRefArrayData,\n  ICustomizedCalloutData,\n} from '../../types/index';\nimport { IEventAnnotation } from '../../types/IEventAnnotation';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n} from '../CommonComponents/index';\nimport { IStyle } from '@fluentui/react/lib/Styling';\n\nexport type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ILineChartStyleProps, ILineChartStyles>;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: IEventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: IColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * The prop used to define line chart mode(default or scatter)\n   * @deprecated this prop no longer used to identify scatter mode\n   */\n  lineMode?: 'default' | 'scatter';\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IEventsAnnotationProps {\n  events: IEventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyles extends ICartesianChartStyles {\n  markerLabel?: IStyle;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: IColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"]}
+{"version":3,"file":"LineChart.types.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  IChartProps,\n  ILineChartPoints,\n  IMargins,\n  IBasestate,\n  IRefArrayData,\n  ICustomizedCalloutData,\n} from '../../types/index';\nimport { IEventAnnotation } from '../../types/IEventAnnotation';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n} from '../CommonComponents/index';\nimport { IStyle } from '@fluentui/react/lib/Styling';\n\nexport type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ILineChartStyleProps, ILineChartStyles>;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: IEventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: IColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * The prop used to define line chart mode(default or scatter)\n   * @deprecated this prop no longer used to identify scatter mode\n   */\n  lineMode?: 'default' | 'scatter';\n\n  /**\n   * To enable callout for individual line or complete stack.\n   * @default false\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IEventsAnnotationProps {\n  events: IEventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyles extends ICartesianChartStyles {\n  markerLabel?: IStyle;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: IColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"]}

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

@@ -25,6 +25,7 @@ define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib
             _updateChart(nextProps);
             return null;
         };
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         Arc.prototype.render = function () {
             var _this = this;
             var _a;
@@ -47,6 +48,7 @@ define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib
             _this._arcId = (0, Utilities_1.getId)('piechart_arc');
             return _this;
         }
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         LabeledArc.prototype.render = function () {
             var _this = this;
             var _a, _b;

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":"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","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { IArcProps, IArcState, IArcStyles } from './Arc.types';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { wrapContent } from '../../../utilities/utilities';\nimport { SVGTooltipText } from '../../../utilities/SVGTooltipText';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: d3Arc(),\n  };\n\n  protected _arcId: string;\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public constructor(props: IArcProps) {\n    super(props);\n    this.state = {\n      isArcFocused: false,\n    };\n\n    this._arcId = getId('piechart_arc');\n  }\n\n  public updateChart = (newProps: IArcProps) => {\n    _updateChart(newProps);\n  };\n\n  public render(): JSX.Element {\n    const { arc } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(props => getStyles(props, this.props.theme), { ...this.props });\n\n    return (\n      <path\n        d={arc(this.props.data)}\n        className={`${this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot}`}\n        onClick={this.props.data?.data.onClick}\n      />\n    );\n  }\n\n  protected _onFocus = () => {\n    this.setState({ isArcFocused: true });\n  };\n\n  protected _onBlur = () => {\n    this.setState({ isArcFocused: false });\n  };\n}\n\nexport class LabeledArc extends Arc {\n  private _isRTL = getRTL();\n\n  public constructor(props: IArcProps) {\n    super(props);\n    this._arcId = getId('piechart_arc');\n  }\n\n  public render(): JSX.Element {\n    const { data, culture } = this.props;\n    const gap = 4;\n    // placing the labels on the outside arc\n    const [labelX, labelY] = d3Arc().centroid({\n      endAngle: data?.endAngle || 0,\n      startAngle: data?.startAngle || 0,\n      padAngle: data?.padAngle,\n      innerRadius: this.props?.outerRadius || 0,\n      outerRadius: this.props?.outerRadius || 0 + gap,\n    });\n\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(props => getStyles(props, this.props.theme));\n\n    const angle = ((data?.startAngle || 0) + (data?.endAngle || 0)) / 2;\n\n    const content = `${data?.data.x}-${formatToLocaleString(data?.data.y, culture)}`;\n\n    return (\n      <g\n        className={`${classNames.arc} arc`}\n        data-is-focusable={true}\n        id={this._arcId}\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        aria-label={content}\n        role=\"img\"\n      >\n        {super.render()}\n        <SVGTooltipText\n          content={content}\n          textProps={{\n            x: labelX + (angle > Math.PI ? -10 : 10),\n            y: labelY + (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 10 : -10),\n            dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',\n            textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',\n            'aria-label': `${data?.data.x}-${formatToLocaleString(data?.data.y, culture)}`,\n            className: classNames.arcText,\n          }}\n          isTooltipVisibleProp={this.state.isArcFocused}\n          shouldReceiveFocus={false}\n          maxWidth={40}\n          wrapContent={wrapContent}\n        />\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":"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","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { IArcProps, IArcState, IArcStyles } from './Arc.types';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { wrapContent } from '../../../utilities/utilities';\nimport { SVGTooltipText } from '../../../utilities/SVGTooltipText';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: d3Arc(),\n  };\n\n  protected _arcId: string;\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public constructor(props: IArcProps) {\n    super(props);\n    this.state = {\n      isArcFocused: false,\n    };\n\n    this._arcId = getId('piechart_arc');\n  }\n\n  public updateChart = (newProps: IArcProps) => {\n    _updateChart(newProps);\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  public render(): JSX.Element {\n    const { arc } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(props => getStyles(props, this.props.theme), { ...this.props });\n\n    return (\n      <path\n        d={arc(this.props.data)}\n        className={`${this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot}`}\n        onClick={this.props.data?.data.onClick}\n      />\n    );\n  }\n\n  protected _onFocus = () => {\n    this.setState({ isArcFocused: true });\n  };\n\n  protected _onBlur = () => {\n    this.setState({ isArcFocused: false });\n  };\n}\n\nexport class LabeledArc extends Arc {\n  private _isRTL = getRTL();\n\n  public constructor(props: IArcProps) {\n    super(props);\n    this._arcId = getId('piechart_arc');\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  public render(): JSX.Element {\n    const { data, culture } = this.props;\n    const gap = 4;\n    // placing the labels on the outside arc\n    const [labelX, labelY] = d3Arc().centroid({\n      endAngle: data?.endAngle || 0,\n      startAngle: data?.startAngle || 0,\n      padAngle: data?.padAngle,\n      innerRadius: this.props?.outerRadius || 0,\n      outerRadius: this.props?.outerRadius || 0 + gap,\n    });\n\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(props => getStyles(props, this.props.theme));\n\n    const angle = ((data?.startAngle || 0) + (data?.endAngle || 0)) / 2;\n\n    const content = `${data?.data.x}-${formatToLocaleString(data?.data.y, culture)}`;\n\n    return (\n      <g\n        className={`${classNames.arc} arc`}\n        data-is-focusable={true}\n        id={this._arcId}\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        aria-label={content}\n        role=\"img\"\n      >\n        {super.render()}\n        <SVGTooltipText\n          content={content}\n          textProps={{\n            x: labelX + (angle > Math.PI ? -10 : 10),\n            y: labelY + (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 10 : -10),\n            dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',\n            textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',\n            'aria-label': `${data?.data.x}-${formatToLocaleString(data?.data.y, culture)}`,\n            className: classNames.arcText,\n          }}\n          isTooltipVisibleProp={this.state.isArcFocused}\n          shouldReceiveFocus={false}\n          maxWidth={40}\n          wrapContent={wrapContent}\n        />\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/Pie/Pie.js

@@ -6,11 +6,13 @@ define(["require", "exports", "tslib", "react", "d3-shape", "d3-scale", "../Arc/
         tslib_1.__extends(Pie, _super);
         function Pie(props) {
             var _this = _super.call(this, props) || this;
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
             _this.arcGenerator = function (d, i) {
                 return (React.createElement(Arc_1.LabeledArc, { culture: _this.props.culture, key: i, data: d, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: "".concat(_this.colors(i)), theme: _this.props.theme }));
             };
             return _this;
         }
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         Pie.prototype.render = function () {
             var _this = this;
             // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();

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":";;;;IASA;QAAyB,+BAA8B;QAUrD,aAAY,KAAgB;YAC1B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YAGR,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,EAC1B,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,GACvB,CACH,CAAC;YACJ,CAAC,CAAC;;QAdF,CAAC;QAgBM,oBAAM,GAAb;YAAA,iBA0BC;YAzBC,qEAAqE;YAC/D,IAAA,KAAkD,IAAI,CAAC,KAAK,EAA1D,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAe,CAAC;YAEnE,IAAM,aAAa,GAAkB,EAAE,CAAC;YACxC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;oBACrC,aAAa,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC,CAAC,CAAC;gBAC5D,CAAC;YACH,CAAC;YACO,IAAA,KAA2B,IAAI,CAAC,KAAK,OAAf,EAAtB,MAAM,mBAAG,aAAa,KAAA,CAAgB;YAE9C,IAAI,CAAC,MAAM,GAAG,IAAA,uBAAY,GAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,0BAAiB,EAAC,KAAK,CAAC,EAAxB,CAAwB,CAAC,CAAC,CAAC;YAElF,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,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,QAAQ;gBAC/C,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;oBACvD,2BAAG,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,SAAS,IACpC,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,CAChE,CACA,CACI,CACb,CAAC;QACJ,CAAC;QArDa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,IAAA,cAAK,GAAE;iBACT,QAAQ,CAAC,IAAI,CAAC;iBACd,IAAI,CAAC,IAAI,CAAC;gBACX,uDAAuD;iBACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;SAC1B,AANyB,CAMxB;QAgDJ,UAAC;KAAA,AAvDD,CAAyB,KAAK,CAAC,SAAS,GAuDvC;IAvDY,kBAAG","sourcesContent":["import * as React from 'react';\nimport { pie as d3Pie } from 'd3-shape';\nimport { ScaleOrdinal, scaleOrdinal } from 'd3-scale';\nimport { IPieProps } from './Pie.types';\nimport { LabeledArc } from '../Arc/Arc';\nimport { IArcData } from '../Arc/Arc.types';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { getColorFromToken, getNextColor } from '../../../utilities/colors';\n\nexport class Pie extends React.Component<IPieProps, {}> {\n  public static defaultProps: Partial<IPieProps> = {\n    pie: d3Pie()\n      .padAngle(0.01)\n      .sort(null)\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .value((d: any) => d.y),\n  };\n  private colors: 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        theme={this.props.theme}\n      />\n    );\n  };\n\n  public render(): JSX.Element {\n    // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();\n    const { pie, data, width, height, chartTitle, theme } = this.props;\n\n    const defaultColors: Array<string> = [];\n    if (data && !this.props.colors) {\n      for (let i = 0; i < data.length; i++) {\n        defaultColors.push(getNextColor(i, 0, theme?.isInverted));\n      }\n    }\n    const { colors = defaultColors } = this.props;\n\n    this.colors = scaleOrdinal().range(colors.map(color => getColorFromToken(color)));\n\n    const piechart = pie(data);\n    const translate = `translate(${width / 2}, ${height / 2})`;\n\n    return (\n      <FocusZone direction={FocusZoneDirection.domOrder}>\n        <svg width={width} height={height} aria-label={chartTitle}>\n          <g className=\"pie\" transform={translate}>\n            {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}\n          </g>\n        </svg>\n      </FocusZone>\n    );\n  }\n}\n"]}
+{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;IASA;QAAyB,+BAA8B;QAUrD,aAAY,KAAgB;YAC1B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YAGf,4DAA4D;YACrD,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,EAC1B,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,GACvB,CACH,CAAC;YACJ,CAAC,CAAC;;QAfF,CAAC;QAiBD,4DAA4D;QACrD,oBAAM,GAAb;YAAA,iBA0BC;YAzBC,qEAAqE;YAC/D,IAAA,KAAkD,IAAI,CAAC,KAAK,EAA1D,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAe,CAAC;YAEnE,IAAM,aAAa,GAAkB,EAAE,CAAC;YACxC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;oBACrC,aAAa,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC,CAAC,CAAC;gBAC5D,CAAC;YACH,CAAC;YACO,IAAA,KAA2B,IAAI,CAAC,KAAK,OAAf,EAAtB,MAAM,mBAAG,aAAa,KAAA,CAAgB;YAE9C,IAAI,CAAC,MAAM,GAAG,IAAA,uBAAY,GAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,0BAAiB,EAAC,KAAK,CAAC,EAAxB,CAAwB,CAAC,CAAC,CAAC;YAElF,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,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,QAAQ;gBAC/C,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;oBACvD,2BAAG,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,SAAS,IACpC,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,CAChE,CACA,CACI,CACb,CAAC;QACJ,CAAC;QAvDa,gBAAY,GAAuB;YAC/C,GAAG,EAAE,IAAA,cAAK,GAAE;iBACT,QAAQ,CAAC,IAAI,CAAC;iBACd,IAAI,CAAC,IAAI,CAAC;gBACX,uDAAuD;iBACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;SAC1B,AANyB,CAMxB;QAkDJ,UAAC;KAAA,AAzDD,CAAyB,KAAK,CAAC,SAAS,GAyDvC;IAzDY,kBAAG","sourcesContent":["import * as React from 'react';\nimport { pie as d3Pie } from 'd3-shape';\nimport { ScaleOrdinal, scaleOrdinal } from 'd3-scale';\nimport { IPieProps } from './Pie.types';\nimport { LabeledArc } from '../Arc/Arc';\nimport { IArcData } from '../Arc/Arc.types';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { getColorFromToken, getNextColor } from '../../../utilities/colors';\n\nexport class Pie extends React.Component<IPieProps, {}> {\n  public static defaultProps: Partial<IPieProps> = {\n    pie: d3Pie()\n      .padAngle(0.01)\n      .sort(null)\n      /* eslint-disable @typescript-eslint/no-explicit-any */\n      .value((d: any) => d.y),\n  };\n  private colors: ScaleOrdinal<string | number, any>;\n\n  constructor(props: IPieProps) {\n    super(props);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\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        theme={this.props.theme}\n      />\n    );\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  public render(): JSX.Element {\n    // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();\n    const { pie, data, width, height, chartTitle, theme } = this.props;\n\n    const defaultColors: Array<string> = [];\n    if (data && !this.props.colors) {\n      for (let i = 0; i < data.length; i++) {\n        defaultColors.push(getNextColor(i, 0, theme?.isInverted));\n      }\n    }\n    const { colors = defaultColors } = this.props;\n\n    this.colors = scaleOrdinal().range(colors.map(color => getColorFromToken(color)));\n\n    const piechart = pie(data);\n    const translate = `translate(${width / 2}, ${height / 2})`;\n\n    return (\n      <FocusZone direction={FocusZoneDirection.domOrder}>\n        <svg width={width} height={height} aria-label={chartTitle}>\n          <g className=\"pie\" transform={translate}>\n            {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}\n          </g>\n        </svg>\n      </FocusZone>\n    );\n  }\n}\n"]}

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

@@ -10,6 +10,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             _this._emptyChartId = (0, Utilities_1.getId)('_PieChart_empty');
             return _this;
         }
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         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;

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":";;;;IAMA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;IAEjF;QAAkC,wCAAmC;QASnE,sBAAmB,KAAqB;YACtC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YACb,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,iBAAiB,CAAC,CAAC;;QAChD,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;YAEH,IAAM,cAAc,GAAG,EAAE,CAAC;YAC1B,IAAM,gBAAgB,GAAG,EAAE,CAAC;YAC5B,IAAM,OAAO,GAAG,CAAC,CAAC;YAElB;;;eAGG;YAEH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,GAAG,CAAC,GAAG,cAAc,EAAE,MAAO,GAAG,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;YACzF,IAAM,WAAW,GAAG,MAAM,CAAC;YAE3B,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,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,GAAG,CAAC,GAAG,OAAO,EAC3B,MAAM,EAAE,MAAO,GAAG,CAAC,GAAG,OAAO,EAC7B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,MAAO,EACf,UAAU,EAAE,UAAW,EACvB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,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,oCAAa,GAArB;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnH,CAAC;QA/Da,yBAAY,GAA4B;YACpD,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,CAAC;QA4DJ,mBAAC;KAAA,AAjED,CAAkC,KAAK,CAAC,SAAS,GAiEhD;IAjEY,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>();\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  private _emptyChartId: string;\n\n  public constructor(props: IPieChartProps) {\n    super(props);\n    this._emptyChartId = getId('_PieChart_empty');\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\n    const TEXT_MAX_WIDTH = 40;\n    const TEXT_LINE_HEIGHT = 16;\n    const PADDING = 4;\n\n    /**\n     * The radius for the pie chart is computed based on the space available inside the svg\n     * after subtracting the max amount of space that can be used by the text in pie chart\n     */\n\n    const radius = Math.min(width! - 2 * TEXT_MAX_WIDTH, height! - 2 * TEXT_LINE_HEIGHT) / 2;\n    const outerRadius = radius;\n\n    return !this._isChartEmpty() ? (\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! + 2 * PADDING}\n          height={height! + 2 * PADDING}\n          outerRadius={outerRadius}\n          innerRadius={1}\n          data={data!}\n          colors={colors!}\n          chartTitle={chartTitle!}\n          theme={theme}\n        />\n      </div>\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 !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);\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;IAEjF;QAAkC,wCAAmC;QASnE,sBAAmB,KAAqB;YACtC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;YACb,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,iBAAiB,CAAC,CAAC;;QAChD,CAAC;QAED,4DAA4D;QACrD,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;YAEH,IAAM,cAAc,GAAG,EAAE,CAAC;YAC1B,IAAM,gBAAgB,GAAG,EAAE,CAAC;YAC5B,IAAM,OAAO,GAAG,CAAC,CAAC;YAElB;;;eAGG;YAEH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,GAAG,CAAC,GAAG,cAAc,EAAE,MAAO,GAAG,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;YACzF,IAAM,WAAW,GAAG,MAAM,CAAC;YAE3B,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,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,GAAG,CAAC,GAAG,OAAO,EAC3B,MAAM,EAAE,MAAO,GAAG,CAAC,GAAG,OAAO,EAC7B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,MAAO,EACf,UAAU,EAAE,UAAW,EACvB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,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,oCAAa,GAArB;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnH,CAAC;QAhEa,yBAAY,GAA4B;YACpD,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,CAAC;QA6DJ,mBAAC;KAAA,AAlED,CAAkC,KAAK,CAAC,SAAS,GAkEhD;IAlEY,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>();\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  private _emptyChartId: string;\n\n  public constructor(props: IPieChartProps) {\n    super(props);\n    this._emptyChartId = getId('_PieChart_empty');\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\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\n    const TEXT_MAX_WIDTH = 40;\n    const TEXT_LINE_HEIGHT = 16;\n    const PADDING = 4;\n\n    /**\n     * The radius for the pie chart is computed based on the space available inside the svg\n     * after subtracting the max amount of space that can be used by the text in pie chart\n     */\n\n    const radius = Math.min(width! - 2 * TEXT_MAX_WIDTH, height! - 2 * TEXT_LINE_HEIGHT) / 2;\n    const outerRadius = radius;\n\n    return !this._isChartEmpty() ? (\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! + 2 * PADDING}\n          height={height! + 2 * PADDING}\n          outerRadius={outerRadius}\n          innerRadius={1}\n          data={data!}\n          colors={colors!}\n          chartTitle={chartTitle!}\n          theme={theme}\n        />\n      </div>\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 !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);\n  }\n}\n"]}

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

@@ -61,15 +61,23 @@ define(["require", "exports", "tslib", "react", "@fluentui/react"], function (re
                 }
             }
             return React.Children.map(props.children, function (child) {
-                var _a;
+                var _a, _b, _c, _d, _e, _f;
+                var commonStyles = {
+                    root: tslib_1.__assign(tslib_1.__assign({}, (_a = child.props.styles) === null || _a === void 0 ? void 0 : _a.root), { width: '100%', height: '100%' }),
+                    chartWrapper: tslib_1.__assign(tslib_1.__assign({}, (_b = child.props.styles) === null || _b === void 0 ? void 0 : _b.chartWrapper), { width: '100%' }),
+                    chart: tslib_1.__assign(tslib_1.__assign({}, (_c = child.props.styles) === null || _c === void 0 ? void 0 : _c.chart), { 
+                        // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.
+                        // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.
+                        width: '100%' }),
+                };
                 return React.cloneElement(child, {
                     width: calculatedWidth,
                     height: calculatedHeight,
+                    // For SankeyChart
                     shouldResize: (calculatedWidth !== null && calculatedWidth !== void 0 ? calculatedWidth : 0) + (calculatedHeight !== null && calculatedHeight !== void 0 ? calculatedHeight : 0),
-                    styles: tslib_1.__assign(tslib_1.__assign({}, child.props.styles), { root: tslib_1.__assign(tslib_1.__assign({}, (_a = child.props.styles) === null || _a === void 0 ? void 0 : _a.root), { 
-                            // Ensure the child element fills the parent container
-                            // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
-                            width: calculatedWidth, height: calculatedHeight }) }),
+                    styles: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, child.props.styles), commonStyles), { 
+                        // For HeatMapChart
+                        subComponentStyles: tslib_1.__assign(tslib_1.__assign({}, (_d = child.props.styles) === null || _d === void 0 ? void 0 : _d.subComponentStyles), { cartesianStyles: tslib_1.__assign(tslib_1.__assign({}, (_f = (_e = child.props.styles) === null || _e === void 0 ? void 0 : _e.subComponentStyles) === null || _f === void 0 ? void 0 : _f.cartesianStyles), commonStyles) }) }),
                 });
             });
         }, [size, props.aspect, props.maxHeight, props.children]);

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

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveContainer.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/ResponsiveContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getWindow } from '@fluentui/react';\nimport { IResponsiveChildProps, IResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<IResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<IResponsiveContainerProps['onResize']>();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return React.Children.map(props.children, child => {\n      return React.cloneElement<IResponsiveChildProps>(child, {\n        width: calculatedWidth,\n        height: calculatedHeight,\n        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n        styles: {\n          // Keep components styles\n          ...child.props.styles,\n          root: {\n            ...child.props.styles?.root,\n            // Ensure the child element fills the parent container\n            // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height\n            width: calculatedWidth,\n            height: calculatedHeight,\n          },\n        },\n      });\n    });\n  }, [size, props.aspect, props.maxHeight, props.children]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: props.width ?? '100%',\n        height: props.height ?? '100%',\n        minWidth: props.minWidth,\n        minHeight: props.minHeight,\n        maxHeight: props.maxHeight,\n      }}\n    >\n      {chartContent}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"ResponsiveContainer.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/ResponsiveContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getWindow } from '@fluentui/react';\nimport { IResponsiveChildProps, IResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<IResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<IResponsiveContainerProps['onResize']>();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return React.Children.map(props.children, child => {\n      const commonStyles = {\n        root: {\n          ...child.props.styles?.root,\n          width: '100%',\n          height: '100%',\n        },\n        chartWrapper: {\n          ...child.props.styles?.chartWrapper,\n          width: '100%',\n        },\n        chart: {\n          ...child.props.styles?.chart,\n          // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n          // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n          width: '100%',\n        },\n      };\n\n      return React.cloneElement<IResponsiveChildProps>(child, {\n        width: calculatedWidth,\n        height: calculatedHeight,\n        // For SankeyChart\n        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n        styles: {\n          // Keep components styles\n          ...child.props.styles,\n          ...commonStyles,\n          // For HeatMapChart\n          subComponentStyles: {\n            ...child.props.styles?.subComponentStyles,\n            cartesianStyles: {\n              ...child.props.styles?.subComponentStyles?.cartesianStyles,\n              ...commonStyles,\n            },\n          },\n        },\n      });\n    });\n  }, [size, props.aspect, props.maxHeight, props.children]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: props.width ?? '100%',\n        height: props.height ?? '100%',\n        minWidth: props.minWidth,\n        minHeight: props.minHeight,\n        maxHeight: props.maxHeight,\n      }}\n    >\n      {chartContent}\n    </div>\n  );\n};\n"]}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleFunctionOrObject } from '@fluentui/react';
+import { IStyleFunctionOrObject } from '@fluentui/react';
 /**
  * Responsive Child props
  * {@docCategory ResponsiveContainer}
@@ -8,9 +8,7 @@ export interface IResponsiveChildProps {
     width?: number;
     height?: number;
     shouldResize?: number;
-    styles?: IStyleFunctionOrObject<{}, {
-        root: IStyle;
-    }>;
+    styles?: IStyleFunctionOrObject<any, any>;
 }
 /**
  * Responsive Container props

package/lib-amd/components/ResponsiveContainer/ResponsiveContainer.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveContainer.types.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/ResponsiveContainer.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IStyle, IStyleFunctionOrObject } from '@fluentui/react';\n\n/**\n * Responsive Child props\n * {@docCategory ResponsiveContainer}\n */\nexport interface IResponsiveChildProps {\n  width?: number;\n  height?: number;\n  shouldResize?: number;\n  styles?: IStyleFunctionOrObject<{}, { root: IStyle }>;\n}\n\n/**\n * Responsive Container props\n * {@docCategory ResponsiveContainer}\n */\nexport interface IResponsiveContainerProps {\n  /**\n   * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.\n   */\n  aspect?: number;\n\n  /**\n   * Width of the container\n   */\n  width?: number | string;\n\n  /**\n   * Height of the container\n   */\n  height?: number | string;\n\n  /**\n   * Minimum width of the container\n   */\n  minWidth?: number | string;\n\n  /**\n   * Minimum height of the container\n   */\n  minHeight?: number | string;\n\n  /**\n   * Maximum height of the container\n   */\n  maxHeight?: number;\n\n  /**\n   * Callback providing the updated chart width and height values when the container is resized\n   */\n  onResize?: (width: number, height: number) => void;\n\n  /**\n   * Child component to be rendered within the container\n   */\n  children: React.ReactElement<IResponsiveChildProps>;\n}\n"]}
+{"version":3,"file":"ResponsiveContainer.types.js","sourceRoot":"../src/","sources":["components/ResponsiveContainer/ResponsiveContainer.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IStyleFunctionOrObject } from '@fluentui/react';\n\n/**\n * Responsive Child props\n * {@docCategory ResponsiveContainer}\n */\nexport interface IResponsiveChildProps {\n  width?: number;\n  height?: number;\n  shouldResize?: number;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  styles?: IStyleFunctionOrObject<any, any>;\n}\n\n/**\n * Responsive Container props\n * {@docCategory ResponsiveContainer}\n */\nexport interface IResponsiveContainerProps {\n  /**\n   * Aspect ratio (width / height) of the container. If specified, the height will be calculated by width / aspect.\n   */\n  aspect?: number;\n\n  /**\n   * Width of the container\n   */\n  width?: number | string;\n\n  /**\n   * Height of the container\n   */\n  height?: number | string;\n\n  /**\n   * Minimum width of the container\n   */\n  minWidth?: number | string;\n\n  /**\n   * Minimum height of the container\n   */\n  minHeight?: number | string;\n\n  /**\n   * Maximum height of the container\n   */\n  maxHeight?: number;\n\n  /**\n   * Callback providing the updated chart width and height values when the container is resized\n   */\n  onResize?: (width: number, height: number) => void;\n\n  /**\n   * Child component to be rendered within the container\n   */\n  children: React.ReactElement<IResponsiveChildProps>;\n}\n"]}

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

@@ -253,16 +253,14 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
     // This is exported for unit tests.
     function preRenderLayout(margins, containerWidth, containerHeight, isRtl) {
         var left = margins.left, right = margins.right, top = margins.top, bottom = margins.bottom;
-        var width = containerWidth - right;
-        var height = containerHeight - bottom > 0 ? containerHeight - bottom : 0;
         var sankey = (0, d3_sankey_1.sankey)()
             .nodeWidth(NODE_WIDTH)
             .extent([
             [left, top],
-            [width - 1, height - 6],
+            [containerWidth - right, containerHeight - bottom],
         ])
             .nodeAlign(isRtl ? d3_sankey_1.sankeyRight : d3_sankey_1.sankeyJustify);
-        return { sankey: sankey, height: height, width: width };
+        return { sankey: sankey, height: containerHeight, width: containerWidth };
     }
     exports.preRenderLayout = preRenderLayout;
     var elipsis = '...';
@@ -597,7 +595,7 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
                 var calloutProps = tslib_1.__assign({ isCalloutVisible: state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: "toolTip".concat(this._calloutId), target: state.refSelected, color: state.color, XValue: state.xCalloutValue, YValue: state.yCalloutValue ? state.yCalloutValue : state.dataForHoverCard, descriptionMessage: state.descriptionMessage, isBeakVisible: false, gapSpace: 15, onDismiss: this._onCloseCallout, className: classNames_1.calloutContentRoot, preventDismissOnLostFocus: true }, this.props.calloutProps);
                 return (React.createElement("div", { className: classNames_1.root, role: 'presentation', ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this._onCloseCallout },
                     React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.vertical, className: classNames_1.chartWrapper },
-                        React.createElement("svg", { width: width, height: height, id: this._chartId },
+                        React.createElement("svg", { width: width, height: height, id: this._chartId, className: classNames_1.chart },
                             nodeLinkDomOrderArray_1.map(function (item) {
                                 if (item.type === 'node') {
                                     return (React.createElement("g", { key: nodes_1[item.index].nodeId, className: classNames_1.nodes }, nodeData_1[item.index]));
@@ -689,7 +687,7 @@ define(["require", "exports", "tslib", "@fluentui/react-focus", "@fluentui/react
             var nodeValues = valuesOfNodes(transformed.nodes);
             var linkValues = valuesOfLinks(transformed.links);
             adjustOnePercentHeightNodes(nodesInColumn, nodeValues, linkValues);
-            adjustPadding(sankey, height - 6, nodesInColumn);
+            adjustPadding(sankey, containerHeight - this._margins.top - this._margins.bottom, nodesInColumn);
             // `sankey` is called a second time, probably to re-layout the nodes with the one-percent adjusted weights.
             // NOTE: The second call to `sankey` is required to allow links to be hoverable.
             // Without the second call, the links are not hoverable.