@fluentui/react-charting 5.19.7 → 5.19.9

package/etc/react-charting.api.md

@@ -4,8 +4,6 @@
 
 ```ts
 
-import * as d3Sankey from 'd3-sankey';
-import * as d3TimeFormat from 'd3-time-format';
 import { FocusZoneDirection } from '@fluentui/react-focus';
 import { ICalloutContentStyleProps } from '@fluentui/react/lib/Callout';
 import { ICalloutContentStyles } from '@fluentui/react/lib/Callout';
@@ -22,7 +20,10 @@ import { IStyleFunctionOrObject as IStyleFunctionOrObject_2 } from '@fluentui/re
 import { ITheme } from '@fluentui/react/lib/Styling';
 import { ITheme as ITheme_2 } from '@fluentui/react';
 import * as React_2 from 'react';
+import { SankeyLink } from 'd3-sankey';
+import { SankeyNode } from 'd3-sankey';
 import { SVGProps } from 'react';
+import { TimeLocaleDefinition } from 'd3-time-format';
 
 // @public
 export const AreaChart: React_2.FunctionComponent<IAreaChartProps>;
@@ -242,7 +243,7 @@ export interface ICartesianChartProps {
     tickFormat?: string;
     tickPadding?: number;
     tickValues?: number[] | Date[];
-    timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition;
+    timeFormatLocale?: TimeLocaleDefinition;
     width?: number;
     wrapXAxisLables?: boolean;
     xAxisTickCount?: number;
@@ -1479,10 +1480,10 @@ export const Shape: React_2.FC<IShapeProps>;
 // Warning: (ae-forgotten-export) The symbol "ISLinkExtra" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export type SLink = d3Sankey.SankeyLink<ISNodeExtra, ISLinkExtra>;
+export type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;
 
 // @public (undocumented)
-export type SNode = d3Sankey.SankeyNode<ISNodeExtra, ISLinkExtra>;
+export type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;
 
 // @public
 export const Sparkline: React_2.FunctionComponent<ISparklineProps>;

package/lib/components/CommonComponents/CartesianChart.types.d.ts

@@ -7,7 +7,7 @@ import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
 import { IAccessibilityProps, IMargins } from '../../types/index';
 import { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';
-import * as d3TimeFormat from 'd3-time-format';
+import { TimeLocaleDefinition } from 'd3-time-format';
 /**
  * Cartesian Chart style properties
  * {@docCategory CartesianChart}
@@ -302,7 +302,7 @@ export interface ICartesianChartProps {
     /**
      * The prop used to define a custom locale for the date time format.
      */
-    timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition;
+    timeFormatLocale?: TimeLocaleDefinition;
     /**
      * The prop used to define a custom datetime formatter for date axis.
      */

package/lib/components/CommonComponents/CartesianChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.types.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { ILegendsProps } from '../Legends/index';\nimport { IAccessibilityProps, IMargins } from '../../types/index';\nimport { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';\nimport * as d3TimeFormat from 'd3-time-format';\n\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Color of the chart.\n   */\n  color?: string;\n\n  /**\n   * Link to redirect if click action for graph\n   */\n  href?: string;\n\n  /**\n   * prop to check if the chart is selected or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check if the Page is in Rtl\n   */\n  isRtl?: boolean;\n\n  /**\n   * color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: IStyle;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: IStyle;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: IStyle;\n\n  /**\n   * line hover box css\n   */\n  hover?: IStyle;\n\n  /**\n   * styles for callout root-content\n   */\n  calloutContentRoot?: IStyle;\n\n  /**\n   * styles for callout x-content\n   */\n  calloutContentX?: IStyle;\n\n  /**\n   * styles for callout y-content\n   */\n  calloutContentY?: IStyle;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: IStyle;\n\n  /**\n   * styles for callout Date time container\n   */\n  calloutDateTimeContainer?: IStyle;\n\n  /**\n   * styles for callout info container\n   */\n  calloutInfoContainer?: IStyle;\n\n  /**\n   * styles for callout block container\n   */\n  calloutBlockContainer?: IStyle;\n\n  /**\n   * styles for callout legend text\n   */\n  calloutlegendText?: IStyle;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: IStyle;\n\n  /**\n   * styles for tooltip\n   */\n  axisTitle?: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: IStyle;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: IStyle;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartProps {\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Margins for the chart\n   * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n   * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n   */\n  margins?: IMargins;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * this prop takes values that you want the chart to render on x-axis\n   * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n   * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n   */\n  tickValues?: number[] | Date[];\n\n  /**\n   * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n   * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n   * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n   */\n  tickFormat?: string;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n   * @default 10\n   */\n  xAxisTickPadding?: number;\n\n  /**\n   * the format in for the data on y-axis. For data object this can be specified to your requirement.\n   *  Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n   * Please look at https://github.com/d3/d3-format for all the formats supported\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yAxisTickFormat?: any;\n\n  /**\n   * Secondary y-scale options\n   * By default this is not defined, meaning there will be no secondary y-scale.\n   */\n  secondaryYScaleOptions?: {\n    /** Minimum value (0 by default) */\n    yMinValue?: number;\n    /** Maximum value (100 by default) */\n    yMaxValue?: number;\n  };\n\n  /**\n   * minimum  data value point in y-axis\n   */\n  yMinValue?: number;\n\n  /**\n   * maximum data value point in y-axis\n   */\n  yMaxValue?: number;\n\n  /**\n   * maximum data value point in x-axis\n   */\n  xMaxValue?: number;\n\n  /**\n   * Number of ticks on the y-axis.\n   * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n   * @default 4\n   */\n  yAxisTickCount?: number;\n\n  /**\n   * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n   * Does not work for string axis.\n   * @default 6\n   */\n  xAxisTickCount?: number;\n\n  /**\n   * define the size of the tick lines on the x-axis\n   * @default 10\n   */\n  xAxistickSize?: number;\n\n  /**\n   * defines the space between the tick line and the data label\n   * @default 10\n   */\n  tickPadding?: number;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Label to apply to the whole chart.\n   * @deprecated - Use your chart label for the chart.\n   */\n  chartLabel?: string;\n\n  /**\n   * overflow props for the legends\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   *@default false\n   *Used for to elipse x axis labes and show tooltip on x axis labels\n   */\n  showXAxisLablesTooltip?: boolean;\n\n  /**\n   * @default 4\n   * Used for X axis labels\n   * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n   */\n  noOfCharsToTruncate?: number;\n\n  /**\n   * @default false\n   * Used to wrap x axis labels values (whole value)\n   */\n  wrapXAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to rotate x axis labels by 45 degrees\n   */\n  rotateXAxisLables?: boolean;\n\n  /**\n   * The prop used to define the date time localization options\n   */\n  dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n  /**\n   * The prop used to define a custom locale for the date time format.\n   */\n  timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition;\n\n  /**\n   * The prop used to define a custom datetime formatter for date axis.\n   */\n  customDateTimeFormatter?: (dateTime: Date) => string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * props for the svg; use this to include aria-* or other attributes on the tag\n   */\n  svgProps?: React.SVGProps<SVGSVGElement>;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @default True for LineChart but False for other charts\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Prop to set the x axis title\n   * @default undefined\n   * Minimum bottom margin required for x axis title is 55px\n   */\n\n  xAxisTitle?: string;\n\n  /**\n   * Prop to set the y axis title\n   * @default undefined\n   * Minimum left margin required for y axis title is 60px and for RTL is 40px\n   * Minimum right margin required for y axis title is 40px and for RTL is 60px\n   */\n  yAxisTitle?: string;\n\n  /**\n   * Prop to set the secondary y axis title\n   * @default undefined\n   * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n   */\n  secondaryYAxistitle?: string;\n}\n\nexport interface IYValueHover {\n  legend?: string;\n  y?: number;\n  color?: string;\n  data?: string | number;\n  shouldDrawBorderBottom?: boolean;\n  yAxisCalloutData?: string | { [id: string]: number };\n  index?: number;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IChildProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: any;\n  containerHeight?: number;\n  containerWidth?: number;\n}\n\n// Only used for Cartesian chart base\nexport interface IModifiedCartesianChartProps extends ICartesianChartProps {\n  /**\n   * Define the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Only used for Area chart\n   * Value used to draw y axis of that chart.\n   */\n  maxOfYVal?: number;\n\n  /**\n   * Data of the chart\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  points: any;\n\n  /**\n   * Define type of the chart\n   */\n  chartType: ChartTypes;\n\n  /** X axis type */\n  xAxisType: XAxisTypes;\n\n  /** Y axis type */\n  yAxisType?: YAxisType;\n\n  /**\n   * Legends of the chart.\n   */\n  legendBars: JSX.Element | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps: Partial<ICalloutProps> & {\n    isCalloutVisible: boolean;\n    id: string;\n    YValueHover?: IYValueHover[];\n    hoverXValue?: string | number | null;\n    legend?: string;\n    color?: string;\n    YValue?: string | number;\n    XValue?: string;\n    descriptionMessage?: string;\n  };\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: IMargins) => void;\n\n  /**\n   * This is a call back method to the chart from cartesian chart.\n   * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n   * It also contians an optional param xAxisElement - defines as x axis scale element.\n   * This param used to enable feature word wrap of Xaxis.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getGraphData?: any;\n\n  /**\n   * Used for bar chart graphs.\n   * To define width of the bar\n   */\n  barwidth?: number;\n\n  /**\n   * Used for tick styles of the x axis of the chart\n   * Tick params are applicable for date axis only.\n   */\n  tickParams?: {\n    tickValues?: number[] | Date[];\n    tickFormat?: string;\n  };\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   * Children elements specific to derived chart types.\n   */\n  children(props: IChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart.\n   * @default false\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n\n  /** dataset values to find out domain of the String axis\n   * Present using for only vertical stacked bar chart and grouped vertical bar chart\n   */\n  datasetForXAxisDomain?: string[];\n\n  /** Own callout design */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  customizedCallout?: any;\n\n  /**\n   * if the data points for the y-axis is of type string, then we need to give this\n   * prop to construct the y-axis\n   */\n  stringDatasetForYAxisDomain?: string[];\n\n  /**\n   * Focus zone direction to the chart\n   * @default FocusZoneDirection.horizontal\n   */\n  focusZoneDirection?: FocusZoneDirection;\n\n  /**\n   * props to send into the chart hover card\n   */\n  chartHoverProps?: IChartHoverCardProps;\n\n  /**\n   * props to send to the focuszone\n   */\n  svgFocusZoneProps?: IFocusZoneProps;\n\n  /**\n   * The prop used to define the culture to localize the numbers and date\n   */\n  culture?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getAxisData?: any;\n\n  /**\n   * Callback method used when mouse leaves the chart boundary.\n   */\n  onChartMouseLeave?: () => void;\n\n  /** Callback method to get extra margins for domain */\n  getDomainMargins?: (containerWidth: number) => IMargins;\n\n  /** Padding between each bar/line-point */\n  xAxisInnerPadding?: number;\n\n  /** Padding before first bar/line-point and after last bar/line-point */\n  xAxisOuterPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to control the first render cycle Performance optimization code.\n   */\n  enableFirstRenderOptimization?: boolean;\n}\n"]}
+{"version":3,"file":"CartesianChart.types.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { ILegendsProps } from '../Legends/index';\nimport { IAccessibilityProps, IMargins } from '../../types/index';\nimport { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\n\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Color of the chart.\n   */\n  color?: string;\n\n  /**\n   * Link to redirect if click action for graph\n   */\n  href?: string;\n\n  /**\n   * prop to check if the chart is selected or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check if the Page is in Rtl\n   */\n  isRtl?: boolean;\n\n  /**\n   * color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: IStyle;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: IStyle;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: IStyle;\n\n  /**\n   * line hover box css\n   */\n  hover?: IStyle;\n\n  /**\n   * styles for callout root-content\n   */\n  calloutContentRoot?: IStyle;\n\n  /**\n   * styles for callout x-content\n   */\n  calloutContentX?: IStyle;\n\n  /**\n   * styles for callout y-content\n   */\n  calloutContentY?: IStyle;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: IStyle;\n\n  /**\n   * styles for callout Date time container\n   */\n  calloutDateTimeContainer?: IStyle;\n\n  /**\n   * styles for callout info container\n   */\n  calloutInfoContainer?: IStyle;\n\n  /**\n   * styles for callout block container\n   */\n  calloutBlockContainer?: IStyle;\n\n  /**\n   * styles for callout legend text\n   */\n  calloutlegendText?: IStyle;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: IStyle;\n\n  /**\n   * styles for tooltip\n   */\n  axisTitle?: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: IStyle;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: IStyle;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartProps {\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Margins for the chart\n   * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n   * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n   */\n  margins?: IMargins;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * this prop takes values that you want the chart to render on x-axis\n   * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n   * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n   */\n  tickValues?: number[] | Date[];\n\n  /**\n   * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n   * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n   * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n   */\n  tickFormat?: string;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n   * @default 10\n   */\n  xAxisTickPadding?: number;\n\n  /**\n   * the format in for the data on y-axis. For data object this can be specified to your requirement.\n   *  Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n   * Please look at https://github.com/d3/d3-format for all the formats supported\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yAxisTickFormat?: any;\n\n  /**\n   * Secondary y-scale options\n   * By default this is not defined, meaning there will be no secondary y-scale.\n   */\n  secondaryYScaleOptions?: {\n    /** Minimum value (0 by default) */\n    yMinValue?: number;\n    /** Maximum value (100 by default) */\n    yMaxValue?: number;\n  };\n\n  /**\n   * minimum  data value point in y-axis\n   */\n  yMinValue?: number;\n\n  /**\n   * maximum data value point in y-axis\n   */\n  yMaxValue?: number;\n\n  /**\n   * maximum data value point in x-axis\n   */\n  xMaxValue?: number;\n\n  /**\n   * Number of ticks on the y-axis.\n   * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n   * @default 4\n   */\n  yAxisTickCount?: number;\n\n  /**\n   * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n   * Does not work for string axis.\n   * @default 6\n   */\n  xAxisTickCount?: number;\n\n  /**\n   * define the size of the tick lines on the x-axis\n   * @default 10\n   */\n  xAxistickSize?: number;\n\n  /**\n   * defines the space between the tick line and the data label\n   * @default 10\n   */\n  tickPadding?: number;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Label to apply to the whole chart.\n   * @deprecated - Use your chart label for the chart.\n   */\n  chartLabel?: string;\n\n  /**\n   * overflow props for the legends\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   *@default false\n   *Used for to elipse x axis labes and show tooltip on x axis labels\n   */\n  showXAxisLablesTooltip?: boolean;\n\n  /**\n   * @default 4\n   * Used for X axis labels\n   * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n   */\n  noOfCharsToTruncate?: number;\n\n  /**\n   * @default false\n   * Used to wrap x axis labels values (whole value)\n   */\n  wrapXAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to rotate x axis labels by 45 degrees\n   */\n  rotateXAxisLables?: boolean;\n\n  /**\n   * The prop used to define the date time localization options\n   */\n  dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n  /**\n   * The prop used to define a custom locale for the date time format.\n   */\n  timeFormatLocale?: TimeLocaleDefinition;\n\n  /**\n   * The prop used to define a custom datetime formatter for date axis.\n   */\n  customDateTimeFormatter?: (dateTime: Date) => string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * props for the svg; use this to include aria-* or other attributes on the tag\n   */\n  svgProps?: React.SVGProps<SVGSVGElement>;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @default True for LineChart but False for other charts\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Prop to set the x axis title\n   * @default undefined\n   * Minimum bottom margin required for x axis title is 55px\n   */\n\n  xAxisTitle?: string;\n\n  /**\n   * Prop to set the y axis title\n   * @default undefined\n   * Minimum left margin required for y axis title is 60px and for RTL is 40px\n   * Minimum right margin required for y axis title is 40px and for RTL is 60px\n   */\n  yAxisTitle?: string;\n\n  /**\n   * Prop to set the secondary y axis title\n   * @default undefined\n   * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n   */\n  secondaryYAxistitle?: string;\n}\n\nexport interface IYValueHover {\n  legend?: string;\n  y?: number;\n  color?: string;\n  data?: string | number;\n  shouldDrawBorderBottom?: boolean;\n  yAxisCalloutData?: string | { [id: string]: number };\n  index?: number;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IChildProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: any;\n  containerHeight?: number;\n  containerWidth?: number;\n}\n\n// Only used for Cartesian chart base\nexport interface IModifiedCartesianChartProps extends ICartesianChartProps {\n  /**\n   * Define the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Only used for Area chart\n   * Value used to draw y axis of that chart.\n   */\n  maxOfYVal?: number;\n\n  /**\n   * Data of the chart\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  points: any;\n\n  /**\n   * Define type of the chart\n   */\n  chartType: ChartTypes;\n\n  /** X axis type */\n  xAxisType: XAxisTypes;\n\n  /** Y axis type */\n  yAxisType?: YAxisType;\n\n  /**\n   * Legends of the chart.\n   */\n  legendBars: JSX.Element | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps: Partial<ICalloutProps> & {\n    isCalloutVisible: boolean;\n    id: string;\n    YValueHover?: IYValueHover[];\n    hoverXValue?: string | number | null;\n    legend?: string;\n    color?: string;\n    YValue?: string | number;\n    XValue?: string;\n    descriptionMessage?: string;\n  };\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: IMargins) => void;\n\n  /**\n   * This is a call back method to the chart from cartesian chart.\n   * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n   * It also contians an optional param xAxisElement - defines as x axis scale element.\n   * This param used to enable feature word wrap of Xaxis.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getGraphData?: any;\n\n  /**\n   * Used for bar chart graphs.\n   * To define width of the bar\n   */\n  barwidth?: number;\n\n  /**\n   * Used for tick styles of the x axis of the chart\n   * Tick params are applicable for date axis only.\n   */\n  tickParams?: {\n    tickValues?: number[] | Date[];\n    tickFormat?: string;\n  };\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   * Children elements specific to derived chart types.\n   */\n  children(props: IChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart.\n   * @default false\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n\n  /** dataset values to find out domain of the String axis\n   * Present using for only vertical stacked bar chart and grouped vertical bar chart\n   */\n  datasetForXAxisDomain?: string[];\n\n  /** Own callout design */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  customizedCallout?: any;\n\n  /**\n   * if the data points for the y-axis is of type string, then we need to give this\n   * prop to construct the y-axis\n   */\n  stringDatasetForYAxisDomain?: string[];\n\n  /**\n   * Focus zone direction to the chart\n   * @default FocusZoneDirection.horizontal\n   */\n  focusZoneDirection?: FocusZoneDirection;\n\n  /**\n   * props to send into the chart hover card\n   */\n  chartHoverProps?: IChartHoverCardProps;\n\n  /**\n   * props to send to the focuszone\n   */\n  svgFocusZoneProps?: IFocusZoneProps;\n\n  /**\n   * The prop used to define the culture to localize the numbers and date\n   */\n  culture?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getAxisData?: any;\n\n  /**\n   * Callback method used when mouse leaves the chart boundary.\n   */\n  onChartMouseLeave?: () => void;\n\n  /** Callback method to get extra margins for domain */\n  getDomainMargins?: (containerWidth: number) => IMargins;\n\n  /** Padding between each bar/line-point */\n  xAxisInnerPadding?: number;\n\n  /** Padding before first bar/line-point and after last bar/line-point */\n  xAxisOuterPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to control the first render cycle Performance optimization code.\n   */\n  enableFirstRenderOptimization?: boolean;\n}\n"]}

package/lib/components/DonutChart/Arc/Arc.js

@@ -1,6 +1,6 @@
 import { __extends } from "tslib";
 import * as React from 'react';
-import * as shape from 'd3-shape';
+import { arc as d3Arc } from 'd3-shape';
 import { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';
 import { getStyles } from './Arc.styles';
 import { format as d3Format } from 'd3-format';
@@ -77,7 +77,7 @@ var Arc = /** @class */ (function (_super) {
         href ? (window.location.href = href) : '';
     };
     Arc.defaultProps = {
-        arc: shape.arc(),
+        arc: d3Arc(),
     };
     return Arc;
 }(React.Component));

package/lib/components/DonutChart/Arc/Arc.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAMnE;IAAyB,uBAAqC;IAA9D;QAAA,qEAmHC;QA9GQ,WAAK,GAAO,EAAE,CAAC;QAEd,gBAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAC/C,YAAM,GAAY,MAAM,EAAE,CAAC;QAwD3B,eAAS,GAAG;YAClB,KAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;QACnC,CAAC,CAAC;QAEM,aAAO,GAAG;YAChB,KAAI,CAAC,KAAK,CAAC,cAAe,EAAE,CAAC;QAC/B,CAAC,CAAC;QAMM,mBAAa,GAAG;;YACtB,IAAM,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC;YACpC,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,CAAC;YACtD,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;YACzD,OAAO,CAAA,MAAA,KAAK,CAAC,wBAAwB,0CAAE,SAAS,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,UAAG,MAAM,MAAG,CAAC;QACnG,CAAC,CAAC;QAEM,qBAAe,GAAG,UAAC,SAAiB;YACpC,IAAA,KAAkG,KAAI,CAAC,KAAK,EAA1G,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,WAAW,iBAAA,EAAE,WAAW,iBAAA,EAAE,mBAAmB,yBAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,SAAS,eAAe,CAAC;YAEnH,IACE,UAAU;gBACV,IAAI,CAAC,GAAG,CAAC,IAAK,CAAC,QAAQ,GAAG,IAAK,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,EAAE;gBAC1D,CAAC,SAAS,KAAK,IAAK,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS,KAAK,EAAE,CAAC,EACrD;gBACA,OAAO,IAAI,CAAC;aACb;YAEK,IAAA,KAAe,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAhC,IAAI,QAAA,EAAE,IAAI,QAAsB,CAAC;YACxC,IAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;YACjD,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAY,EAAE,WAAY,CAAC,GAAG,CAAC,CAAC;YAC7D,IAAM,KAAK,GAAG,CAAC,IAAK,CAAC,UAAU,GAAG,IAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YACtD,IAAM,QAAQ,GAAG,IAAK,CAAC,KAAK,CAAC;YAE7B,OAAO,CACL,8BACE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,WAAW,EAC7C,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,WAAW,EAC7C,UAAU,EAAE,KAAK,GAAG,IAAI,CAAC,EAAE,KAAK,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAC7D,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EACvF,SAAS,EAAE,SAAS,iBACP,IAAI,IAEhB,mBAAmB;gBAClB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,UAAW,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,UAAW,CAAC;gBACjE,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAChC,CACR,CAAC;QACJ,CAAC,CAAC;;IACJ,CAAC;IAzGe,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,yBAAW,GAAlB,UAAmB,QAAmB;QACpC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC;IAEM,oBAAM,GAAb;;QACQ,IAAA,KAA8B,IAAI,CAAC,KAAK,EAAtC,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAe,CAAC;QAC/C,IAAM,aAAa,GAAG,kBAAkB,EAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,SAAS,EAAE;YAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,IAAI,EAAE,IAAK;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;SACzB,CAAC,CAAC;QACH,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAChH,IAAM,OAAO,GACX,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QACjG,OAAO,CACL,2BAAG,GAAG,EAAE,IAAI,CAAC,UAAU;YACpB,CAAC,CAAC,YAAY,IAAI,YAAY,KAAK,EAAE,IAAI,CACxC,8BAAM,EAAE,EAAE,EAAE,GAAG,WAAW,EAAE,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,GAAI,CAC9F;YACD,8BACE,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EACvB,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EAC5D,SAAS,EAAE,UAAU,CAAC,IAAI,uBACP,IAAI,EACvB,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,EAC5D,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,EAC5D,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,gBACxE,IAAI,CAAC,aAAa,EAAE,EAChC,IAAI,EAAC,KAAK,GACV;YACD,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,CACxC,CACL,CAAC;IACJ,CAAC;IAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,EAAU;QAChD,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACjE,CAAC;IAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,UAA4C;QAClF,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAChD,CAAC;IAUO,4BAAc,GAAtB,UAAuB,IAAwB;QAC7C,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;IAzEa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;KACjB,CAAC;IAgHJ,UAAC;CAAA,AAnHD,CAAyB,KAAK,CAAC,SAAS,GAmHvC;SAnHY,GAAG;AAqHhB,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 { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatValueWithSIPrefix } from '../../../utilities/index';\n\nexport interface IArcState {\n  isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: shape.arc(),\n  };\n\n  public state: {} = {};\n\n  private currentRef = React.createRef<SVGPathElement>();\n  private _isRTL: boolean = getRTL();\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> | null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public updateChart(newProps: IArcProps): void {\n    _updateChart(newProps);\n  }\n\n  public render(): JSX.Element {\n    const { arc, href, focusedArcId } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(getStyles, {\n      color: this.props.color,\n      href: href!,\n      theme: this.props.theme!,\n    });\n    const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n    const opacity: number =\n      this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1;\n    return (\n      <g ref={this.currentRef}>\n        {!!focusedArcId && focusedArcId === id && (\n          <path id={id + 'focusRing'} d={arc(this.props.focusData)} className={classNames.focusRing} />\n        )}\n        <path\n          id={id}\n          d={arc(this.props.data)}\n          onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n          className={classNames.root}\n          data-is-focusable={true}\n          onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseLeave={this._hoverOff}\n          onBlur={this._onBlur}\n          opacity={opacity}\n          onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n          aria-label={this._getAriaLabel()}\n          role=\"img\"\n        />\n        {this._renderArcLabel(classNames.arcLabel)}\n      </g>\n    );\n  }\n\n  private _onFocus(data: IChartDataPoint, id: string): void {\n    this.props.onFocusCallback!(data, id, this.currentRef.current);\n  }\n\n  private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n    mouseEvent.persist();\n    this.props.hoverOnCallback!(data, mouseEvent);\n  }\n\n  private _hoverOff = (): void => {\n    this.props.hoverLeaveCallback!();\n  };\n\n  private _onBlur = (): void => {\n    this.props.onBlurCallback!();\n  };\n\n  private _redirectToUrl(href: string | undefined): void {\n    href ? (window.location.href = href) : '';\n  }\n\n  private _getAriaLabel = (): string => {\n    const point = this.props.data!.data;\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue = point.yAxisCalloutData || point.data || 0;\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  private _renderArcLabel = (className: string) => {\n    const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props;\n\n    if (\n      hideLabels ||\n      Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n      (activeArc !== data!.data.legend && activeArc !== '')\n    ) {\n      return null;\n    }\n\n    const [base, perp] = arc.centroid(data);\n    const hyp = Math.sqrt(base * base + perp * perp);\n    const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n    const angle = (data!.startAngle + data!.endAngle) / 2;\n    const arcValue = data!.value;\n\n    return (\n      <text\n        x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n        y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n        textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n        dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n        className={className}\n        aria-hidden={true}\n      >\n        {showLabelsInPercent\n          ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n          : formatValueWithSIPrefix(arcValue)}\n      </text>\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/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatValueWithSIPrefix } from '../../../utilities/index';\n\nexport interface IArcState {\n  isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: d3Arc(),\n  };\n\n  public state: {} = {};\n\n  private currentRef = React.createRef<SVGPathElement>();\n  private _isRTL: boolean = getRTL();\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> | null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public updateChart(newProps: IArcProps): void {\n    _updateChart(newProps);\n  }\n\n  public render(): JSX.Element {\n    const { arc, href, focusedArcId } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(getStyles, {\n      color: this.props.color,\n      href: href!,\n      theme: this.props.theme!,\n    });\n    const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n    const opacity: number =\n      this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1;\n    return (\n      <g ref={this.currentRef}>\n        {!!focusedArcId && focusedArcId === id && (\n          <path id={id + 'focusRing'} d={arc(this.props.focusData)} className={classNames.focusRing} />\n        )}\n        <path\n          id={id}\n          d={arc(this.props.data)}\n          onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n          className={classNames.root}\n          data-is-focusable={true}\n          onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseLeave={this._hoverOff}\n          onBlur={this._onBlur}\n          opacity={opacity}\n          onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n          aria-label={this._getAriaLabel()}\n          role=\"img\"\n        />\n        {this._renderArcLabel(classNames.arcLabel)}\n      </g>\n    );\n  }\n\n  private _onFocus(data: IChartDataPoint, id: string): void {\n    this.props.onFocusCallback!(data, id, this.currentRef.current);\n  }\n\n  private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n    mouseEvent.persist();\n    this.props.hoverOnCallback!(data, mouseEvent);\n  }\n\n  private _hoverOff = (): void => {\n    this.props.hoverLeaveCallback!();\n  };\n\n  private _onBlur = (): void => {\n    this.props.onBlurCallback!();\n  };\n\n  private _redirectToUrl(href: string | undefined): void {\n    href ? (window.location.href = href) : '';\n  }\n\n  private _getAriaLabel = (): string => {\n    const point = this.props.data!.data;\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue = point.yAxisCalloutData || point.data || 0;\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  private _renderArcLabel = (className: string) => {\n    const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props;\n\n    if (\n      hideLabels ||\n      Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n      (activeArc !== data!.data.legend && activeArc !== '')\n    ) {\n      return null;\n    }\n\n    const [base, perp] = arc.centroid(data);\n    const hyp = Math.sqrt(base * base + perp * perp);\n    const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n    const angle = (data!.startAngle + data!.endAngle) / 2;\n    const arcValue = data!.value;\n\n    return (\n      <text\n        x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n        y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n        textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n        dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n        className={className}\n        aria-hidden={true}\n      >\n        {showLabelsInPercent\n          ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n          : formatValueWithSIPrefix(arcValue)}\n      </text>\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/components/DonutChart/DonutChart.base.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as scale from 'd3-scale';
+import { ScaleOrdinal } from 'd3-scale';
 import { IAccessibilityProps } from '../../index';
 import { IChartDataPoint, IDonutChartProps } from './index';
 export interface IDonutChartState {
@@ -19,7 +19,7 @@ export interface IDonutChartState {
 }
 export declare class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {
     static defaultProps: Partial<IDonutChartProps>;
-    _colors: scale.ScaleOrdinal<string, {}>;
+    _colors: ScaleOrdinal<string, {}>;
     private _classNames;
     private _rootElem;
     private _uniqText;

package/lib/components/DonutChart/DonutChart.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAG1E,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAuB,cAAc,EAAW,OAAO,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAExH,IAAM,aAAa,GAAG,kBAAkB,EAA4C,CAAC;AACrF,IAAM,uBAAuB,GAAG,EAAE,CAAC;AAkBnC;IAAoC,kCAAmD;IAgCrF,wBAAY,KAAuB;QAAnC,YACE,kBAAM,KAAK,CAAC,SAoBb;QAuGO,mBAAa,GAAG;YACtB,KAAI,CAAC,QAAQ,CAAC;gBACZ,SAAS,EAAE,KAAK;aACjB,CAAC,CAAC;QACL,CAAC,CAAC;QAqDM,oBAAc,GAAG,UAAC,IAAqB,EAAE,EAAU,EAAE,OAAuB;YAClF,KAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;YACpC,KAAI,CAAC,QAAQ,CAAC;gBACZ,iGAAiG;gBACjG,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,cAAc,KAAK,EAAE,IAAI,KAAI,CAAC,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC,MAAM;gBACxF,KAAK,EAAE,IAAI,CAAC,IAAK,CAAC,QAAQ,EAAE;gBAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAM;gBAClB,aAAa,EAAE,IAAI,CAAC,gBAAiB;gBACrC,aAAa,EAAE,IAAI,CAAC,gBAAiB;gBACrC,YAAY,EAAE,EAAE;gBAChB,qBAAqB,EAAE,IAAI;gBAC3B,wBAAwB,EAAE,IAAI,CAAC,wBAAyB;aACzD,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,oBAAc,GAAG,UAAC,IAAqB,EAAE,CAAmC;YAClF,IAAI,KAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE;gBACrC,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAChC,KAAI,CAAC,oBAAoB,GAAG,CAAC,CAAC;gBAC9B,KAAI,CAAC,QAAQ,CAAC;oBACZ,iGAAiG;oBACjG,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,cAAc,KAAK,EAAE,IAAI,KAAI,CAAC,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC,MAAM;oBACxF,KAAK,EAAE,IAAI,CAAC,IAAK,CAAC,QAAQ,EAAE;oBAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,KAAK,EAAE,IAAI,CAAC,KAAM;oBAClB,aAAa,EAAE,IAAI,CAAC,gBAAiB;oBACrC,aAAa,EAAE,IAAI,CAAC,gBAAiB;oBACrC,qBAAqB,EAAE,IAAI;oBAC3B,wBAAwB,EAAE,IAAI,CAAC,wBAAyB;iBACzD,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;QACM,aAAO,GAAG;YAChB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QAMM,4BAAsB,GAAG;YAC/B,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,KAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QA4CM,uBAAiB,GAAG,UAAC,mBAAuC;YAClE,OAAO,mBAAmB;gBACxB,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;;oBAClC,IAAI,KAAa,CAAC;oBAClB,sDAAsD;oBACtD,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE;wBACrC,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,UAAU,CAAC,CAAC;qBAC9D;yBAAM;wBACL,KAAK,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,KAAK,0CAAE,UAAU,CAAC,CAAC;qBACrE;oBAED,6BAAY,IAAI,KAAE,KAAK,OAAA,IAAG;gBAC5B,CAAC,CAAC;gBACJ,CAAC,CAAC,EAAE,CAAC;QACT,CAAC,CAAC;QAzRA,KAAI,CAAC,KAAK,GAAG;YACX,SAAS,EAAE,KAAK;YAChB,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,IAAI,GAAG;YAC/B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,MAAM,IAAI,GAAG;YACjC,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE,EAAE;YACT,aAAa,EAAE,EAAE;YACjB,aAAa,EAAE,EAAE;YACjB,cAAc,EAAE,EAAE;YAClB,YAAY,EAAE,EAAE;SACjB,CAAC;QACF,KAAI,CAAC,cAAc,GAAG,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACrD,KAAI,CAAC,cAAc,GAAG,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACrD,KAAI,CAAC,WAAW,GAAG,KAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QAC/C,KAAI,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;QACnC,KAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;QAChC,KAAI,CAAC,aAAa,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;;IAClD,CAAC;IAtCa,uCAAwB,GAAtC,UACE,SAAqC,EACrC,SAAqC;QAErC,IAAI,UAA0C,CAAC;QAC/C,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,KAAK,SAAS,CAAC,MAAM,EAAE;YAC3D,UAAU,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;SAC1C;QAED,IAAI,WAA4C,CAAC;QACjD,IAAI,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,OAAO,EAAE;YAC9D,WAAW,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,GAAG,uBAAuB,EAAE,CAAC;SACvE;QAED,6BAAY,UAAU,GAAK,WAAW,EAAG;IAC3C,CAAC;IAwBM,0CAAiB,GAAxB;QACE,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,QAAQ,CAAC;gBACZ,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW;gBAClC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,uBAAuB;aAC/D,CAAC,CAAC;SACJ;IACH,CAAC;IAEM,+BAAM,GAAb;QAAA,iBA2FC;QA1FO,IAAA,KAA+B,IAAI,CAAC,KAAK,EAAvC,IAAI,UAAA,EAAE,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAe,CAAC;QAChD,IAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,CAAC,CAAC;QAEvD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAAE;YACnD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAO;YACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAQ;YAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;YACxB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAU;SACjC,CAAC,CAAC;QAEH,IAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QAC/C,IAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7D,IAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3D,IAAM,WAAW,GACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,GAAG,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,OAAQ,GAAG,mBAAmB,CAAC,GAAG,CAAC,CAAC;QACtG,IAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,UAAC,CAAkB,IAAK,OAAA,CAAC,CAAC,IAAK,GAAG,CAAC,EAAX,CAAW,CAAC,CAAC;QACrE,IAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAiB,EAAE,SAAU,CAAC,CAAC;QAC1F,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,6BACE,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAChC,GAAG,EAAE,UAAC,QAA4B,IAAK,OAAA,CAAC,KAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,EAA3B,CAA2B,EAClE,YAAY,EAAE,IAAI,CAAC,sBAAsB;YAEzC,oBAAC,SAAS,IAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,EAAE,YAAY,EAAE,yBAAyB,CAAC,GAAG;gBAC9F;oBACE,6BACE,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,gBACrB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,EAC5B,GAAG,EAAE,UAAC,IAAuB,IAAK,OAAA,KAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAtB,CAAsB;wBAExD,oBAAC,GAAG,IACF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAO,EACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAQ,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAY,EACpC,IAAI,EAAE,SAAU,EAChB,eAAe,EAAE,IAAI,CAAC,cAAc,EACpC,eAAe,EAAE,IAAI,CAAC,cAAc,EACpC,kBAAkB,EAAE,IAAI,CAAC,WAAW,EACpC,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,cAAc,EAAE,IAAI,CAAC,OAAO,EAC5B,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,EACvC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,EAC3C,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,gBAAgB,EAAE,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,EACxD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM,EACxB,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,EACnD,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GACjC,CACE,CACF,CACI;YACZ,oBAAC,OAAO,aACN,MAAM,EAAE,IAAI,CAAC,oBAAoB,EACjC,eAAe,EAAE,IAAI,EACrB,aAAa,EAAE,KAAK,EACpB,eAAe,EAAE,eAAe,CAAC,WAAW,EAC5C,QAAQ,EAAE,EAAE,EACZ,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC1D,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,yBAAyB,EAAE,IAAI;gBAC/B,mEAAmE;gBACnE,sBAAsB,EAAE,IAAI,IACxB,IAAI,CAAC,KAAK,CAAC,YAAa,EACxB,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,EAAE,MAAM,EAAE,KAAK,CAAC,GAE9E,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC,CAAC,CACxC,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAsB,CAAC,CAC1E,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IACb,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAC/E,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAC3B,CACH,CACO;YACT,CAAC,UAAU,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAG,UAAU,CAAO,CAChF,CACP,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAc,EACvB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;IACJ,CAAC;IAQO,oCAAW,GAAnB,UAAoB,IAAuB;;QACzC,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,OAAO;SACR;QAED,IAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAEzF,IAAM,SAAS,GACb,IAAI,CAAC,aAAa,IAAI,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,IAAG,IAAI,CAAC,KAAK,CAAC,OAAQ;YAC1E,CAAC,CAAC,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY;YAClC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QACzB,IAAM,OAAO,GAAG,cAAO,QAAS,cAAI,SAAU,CAAE,CAAC;QACjD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC;IACO,uCAAc,GAAtB,UAAuB,SAA4B;QAAnD,iBAmCC;QAlCC,IAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;YAC1E,IAAM,KAAK,GAAW,KAAK,CAAC,KAAM,CAAC;YACnC,qDAAqD;YACrD,IAAM,MAAM,GAAY;gBACtB,KAAK,EAAE,KAAK,CAAC,MAAO;gBACpB,KAAK,OAAA;gBACL,MAAM,EAAE;oBACN,IAAI,KAAI,CAAC,KAAK,CAAC,cAAc,KAAK,KAAK,CAAC,MAAM,EAAE;wBAC9C,KAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;qBACvC;yBAAM;wBACL,KAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,MAAO,EAAE,CAAC,CAAC;qBAClD;gBACH,CAAC;gBACD,WAAW,EAAE;oBACX,KAAI,CAAC,sBAAsB,EAAE,CAAC;oBAC9B,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,MAAO,EAAE,CAAC,CAAC;gBACjD,CAAC;gBACD,gBAAgB,EAAE;oBAChB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;gBACtC,CAAC;aACF,CAAC;YACF,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,IAAM,OAAO,GAAG,CACd,oBAAC,OAAO,aACN,OAAO,EAAE,eAAe,EACxB,aAAa,QACb,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAC9C,yBAAyB,EAAE,IAAI,CAAC,KAAK,CAAC,mCAAmC,EACzE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,IACxC,IAAI,CAAC,KAAK,CAAC,WAAW,EAC1B,CACH,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;IAuCO,oCAAW,GAAnB;QACE,IAAI;IACN,CAAC;IAOO,0CAAiB,GAAzB,UAA0B,gBAA6C,EAAE,IAAuB;QAAhG,iBAcC;QAbC,IAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACvD,IAAI,gBAAgB,KAAK,SAAS,IAAI,CAAC,iBAAiB,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;YACxF,IAAI,aAAW,GAAG,gBAAgB,CAAC;YACnC,IAAK,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;gBAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,iBAAiB,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;oBACtG,aAAW,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,IAAK,CAAC;iBAC7E;gBACD,OAAO;YACT,CAAC,CAAC,CAAC;YACH,OAAO,aAAW,CAAC;SACpB;aAAM;YACL,OAAO,gBAAgB,CAAC;SACzB;IACH,CAAC;IAEO,wCAAe,GAAvB,UAAwB,IAAiC;QACvD,IAAM,YAAY,GAAG,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrE,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO,IAAI,CAAC;SACb;QACD,OAAO,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,EAAE,CAAC;IAClC,CAAC;IAED;;;;;OAKG;IACK,8CAAqB,GAA7B;QACE,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;IAC9D,CAAC;IAEO,sCAAa,GAArB;QACE,OAAO,CAAC,CACN,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;YACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAU,CAAC,MAAM,CAAC,UAAC,CAAkB,IAAK,OAAA,CAAC,CAAC,IAAK,GAAG,CAAC,EAAX,CAAW,CAAC,CAAC,MAAM,GAAG,CAAC,CAClF,CAAC;IACJ,CAAC;IA1Sa,2BAAY,GAA8B;QACtD,WAAW,EAAE,CAAC;QACd,UAAU,EAAE,IAAI;KACjB,CAAC;IAwTJ,qBAAC;CAAA,AA5TD,CAAoC,KAAK,CAAC,SAAS,GA4TlD;SA5TY,cAAc","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport * as scale from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { convertToLocaleString, getAccessibleDataObject, getColorFromToken, getNextColor } from '../../utilities/index';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n  showHover?: boolean;\n  value?: string | undefined;\n  legend?: string | undefined;\n  _width?: number | undefined;\n  _height?: number | undefined;\n  activeLegend?: string;\n  color?: string | undefined;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  focusedArcId?: string;\n  selectedLegend: string;\n  dataPointCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {\n  public static defaultProps: Partial<IDonutChartProps> = {\n    innerRadius: 0,\n    hideLabels: true,\n  };\n  public _colors: scale.ScaleOrdinal<string, {}>;\n  private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n  private _rootElem: HTMLElement | null;\n  private _uniqText: string;\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private _currentHoverElement: any;\n  private _calloutId: string;\n  private _calloutAnchorPoint: IChartDataPoint | null;\n  private _emptyChartId: string | null;\n\n  public static getDerivedStateFromProps(\n    nextProps: Readonly<IDonutChartProps>,\n    prevState: Readonly<IDonutChartState>,\n  ): Partial<IDonutChartState> | null {\n    let widthState: { _width: number } | undefined;\n    if (nextProps.width && nextProps.width !== prevState._width) {\n      widthState = { _width: nextProps.width };\n    }\n\n    let heightState: { _height: number } | undefined;\n    if (nextProps.height && nextProps.height !== prevState._height) {\n      heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n    }\n\n    return { ...widthState, ...heightState };\n  }\n\n  constructor(props: IDonutChartProps) {\n    super(props);\n    this.state = {\n      showHover: false,\n      value: '',\n      legend: '',\n      _width: this.props.width || 200,\n      _height: this.props.height || 200,\n      activeLegend: '',\n      color: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n      selectedLegend: '',\n      focusedArcId: '',\n    };\n    this._hoverCallback = this._hoverCallback.bind(this);\n    this._focusCallback = this._focusCallback.bind(this);\n    this._hoverLeave = this._hoverLeave.bind(this);\n    this._calloutId = getId('callout');\n    this._uniqText = getId('_Pie_');\n    this._emptyChartId = getId('_DonutChart_empty');\n  }\n  public componentDidMount(): void {\n    if (this._rootElem) {\n      this.setState({\n        _width: this._rootElem.offsetWidth,\n        _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,\n      });\n    }\n  }\n\n  public render(): JSX.Element {\n    const { data, hideLegend = false } = this.props;\n    const points = this._addDefaultColors(data?.chartData);\n\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: this.state._width!,\n      height: this.state._height!,\n      color: this.state.color!,\n      className: this.props.className!,\n    });\n\n    const legendBars = this._createLegends(points);\n    const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n    const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n    const outerRadius =\n      Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n    const chartData = points.filter((d: IChartDataPoint) => d.data! > 0);\n    const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n    return !this._isChartEmpty() ? (\n      <div\n        className={this._classNames.root}\n        ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}\n        onMouseLeave={this._handleChartMouseLeave}\n      >\n        <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all}>\n          <div>\n            <svg\n              className={this._classNames.chart}\n              aria-label={data?.chartTitle}\n              ref={(node: SVGElement | null) => this._setViewBox(node)}\n            >\n              <Pie\n                width={this.state._width!}\n                height={this.state._height!}\n                outerRadius={outerRadius}\n                innerRadius={this.props.innerRadius!}\n                data={chartData!}\n                onFocusCallback={this._focusCallback}\n                hoverOnCallback={this._hoverCallback}\n                hoverLeaveCallback={this._hoverLeave}\n                uniqText={this._uniqText}\n                onBlurCallback={this._onBlur}\n                activeArc={this._getHighlightedLegend()}\n                focusedArcId={this.state.focusedArcId || ''}\n                href={this.props.href!}\n                calloutId={this._calloutId}\n                valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n                theme={this.props.theme!}\n                showLabelsInPercent={this.props.showLabelsInPercent}\n                hideLabels={this.props.hideLabels}\n              />\n            </svg>\n          </div>\n        </FocusZone>\n        <Callout\n          target={this._currentHoverElement}\n          alignTargetEdge={true}\n          isBeakVisible={false}\n          directionalHint={DirectionalHint.topAutoEdge}\n          gapSpace={15}\n          hidden={!(!this.props.hideTooltip && this.state.showHover)}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          preventDismissOnLostFocus={true}\n          /** Keep the callout updated with details of focused/hovered arc */\n          shouldUpdateWhenHidden={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n        >\n          {this.props.onRenderCalloutPerDataPoint ? (\n            this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n          ) : (\n            <ChartHoverCard\n              Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n              YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n              color={this.state.color}\n              culture={this.props.culture}\n            />\n          )}\n        </Callout>\n        {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\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 _closeCallout = () => {\n    this.setState({\n      showHover: false,\n    });\n  };\n\n  private _setViewBox(node: SVGElement | null): void {\n    if (node === null) {\n      return;\n    }\n\n    const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n    const heightVal =\n      node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n        ? node.parentElement?.offsetHeight\n        : this.state._height;\n    const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n    node.setAttribute('viewBox', viewbox);\n  }\n  private _createLegends(chartData: IChartDataPoint[]): JSX.Element {\n    const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n      const color: string = point.color!;\n      // mapping data to the format Legends component needs\n      const legend: ILegend = {\n        title: point.legend!,\n        color,\n        action: () => {\n          if (this.state.selectedLegend === point.legend) {\n            this.setState({ selectedLegend: '' });\n          } else {\n            this.setState({ selectedLegend: point.legend! });\n          }\n        },\n        hoverAction: () => {\n          this._handleChartMouseLeave();\n          this.setState({ activeLegend: point.legend! });\n        },\n        onMouseOutAction: () => {\n          this.setState({ activeLegend: '' });\n        },\n      };\n      return legend;\n    });\n    const legends = (\n      <Legends\n        legends={legendDataItems}\n        centerLegends\n        overflowProps={this.props.legendsOverflowProps}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        overflowText={this.props.legendsOverflowText}\n        {...this.props.legendProps}\n      />\n    );\n    return legends;\n  }\n\n  private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n    this._currentHoverElement = element;\n    this.setState({\n      /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */\n      showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,\n      value: data.data!.toString(),\n      legend: data.legend,\n      color: data.color!,\n      xCalloutValue: data.xAxisCalloutData!,\n      yCalloutValue: data.yAxisCalloutData!,\n      focusedArcId: id,\n      dataPointCalloutProps: data,\n      callOutAccessibilityData: data.callOutAccessibilityData!,\n    });\n  };\n\n  private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n    if (this._calloutAnchorPoint !== data) {\n      this._calloutAnchorPoint = data;\n      this._currentHoverElement = e;\n      this.setState({\n        /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */\n        showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,\n        value: data.data!.toString(),\n        legend: data.legend,\n        color: data.color!,\n        xCalloutValue: data.xAxisCalloutData!,\n        yCalloutValue: data.yAxisCalloutData!,\n        dataPointCalloutProps: data,\n        callOutAccessibilityData: data.callOutAccessibilityData!,\n      });\n    }\n  };\n  private _onBlur = (): void => {\n    this.setState({ focusedArcId: '' });\n  };\n\n  private _hoverLeave(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    this.setState({ showHover: false });\n  };\n\n  private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {\n    const highlightedLegend = this._getHighlightedLegend();\n    if (valueInsideDonut !== undefined && (highlightedLegend !== '' || this.state.showHover)) {\n      let legendValue = valueInsideDonut;\n      data!.map((point: IChartDataPoint, index: number) => {\n        if (point.legend === highlightedLegend || (this.state.showHover && point.legend === this.state.legend)) {\n          legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n        }\n        return;\n      });\n      return legendValue;\n    } else {\n      return valueInsideDonut;\n    }\n  }\n\n  private _toLocaleString(data: string | number | undefined) {\n    const localeString = convertToLocaleString(data, this.props.culture);\n    if (!localeString) {\n      return data;\n    }\n    return localeString?.toString();\n  }\n\n  /**\n   * This function returns\n   * the selected legend if there is one\n   * or the hovered legend if none of the legends is selected.\n   * Note: This won't work in case of multiple legends selection.\n   */\n  private _getHighlightedLegend() {\n    return this.state.selectedLegend || this.state.activeLegend;\n  }\n\n  private _isChartEmpty(): boolean {\n    return !(\n      this.props.data &&\n      this.props.data.chartData &&\n      this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n    );\n  }\n\n  private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n    return donutChartDataPoint\n      ? donutChartDataPoint.map((item, index) => {\n          let color: string;\n          // isInverted property is applicable to v8 themes only\n          if (typeof item.color === 'undefined') {\n            color = getNextColor(index, 0, this.props.theme?.isInverted);\n          } else {\n            color = getColorFromToken(item.color, this.props.theme?.isInverted);\n          }\n\n          return { ...item, color };\n        })\n      : [];\n  };\n}\n"]}
+{"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { ScaleOrdinal } from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { convertToLocaleString, getAccessibleDataObject, getColorFromToken, getNextColor } from '../../utilities/index';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n  showHover?: boolean;\n  value?: string | undefined;\n  legend?: string | undefined;\n  _width?: number | undefined;\n  _height?: number | undefined;\n  activeLegend?: string;\n  color?: string | undefined;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  focusedArcId?: string;\n  selectedLegend: string;\n  dataPointCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {\n  public static defaultProps: Partial<IDonutChartProps> = {\n    innerRadius: 0,\n    hideLabels: true,\n  };\n  public _colors: ScaleOrdinal<string, {}>;\n  private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n  private _rootElem: HTMLElement | null;\n  private _uniqText: string;\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  private _currentHoverElement: any;\n  private _calloutId: string;\n  private _calloutAnchorPoint: IChartDataPoint | null;\n  private _emptyChartId: string | null;\n\n  public static getDerivedStateFromProps(\n    nextProps: Readonly<IDonutChartProps>,\n    prevState: Readonly<IDonutChartState>,\n  ): Partial<IDonutChartState> | null {\n    let widthState: { _width: number } | undefined;\n    if (nextProps.width && nextProps.width !== prevState._width) {\n      widthState = { _width: nextProps.width };\n    }\n\n    let heightState: { _height: number } | undefined;\n    if (nextProps.height && nextProps.height !== prevState._height) {\n      heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n    }\n\n    return { ...widthState, ...heightState };\n  }\n\n  constructor(props: IDonutChartProps) {\n    super(props);\n    this.state = {\n      showHover: false,\n      value: '',\n      legend: '',\n      _width: this.props.width || 200,\n      _height: this.props.height || 200,\n      activeLegend: '',\n      color: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n      selectedLegend: '',\n      focusedArcId: '',\n    };\n    this._hoverCallback = this._hoverCallback.bind(this);\n    this._focusCallback = this._focusCallback.bind(this);\n    this._hoverLeave = this._hoverLeave.bind(this);\n    this._calloutId = getId('callout');\n    this._uniqText = getId('_Pie_');\n    this._emptyChartId = getId('_DonutChart_empty');\n  }\n  public componentDidMount(): void {\n    if (this._rootElem) {\n      this.setState({\n        _width: this._rootElem.offsetWidth,\n        _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,\n      });\n    }\n  }\n\n  public render(): JSX.Element {\n    const { data, hideLegend = false } = this.props;\n    const points = this._addDefaultColors(data?.chartData);\n\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: this.state._width!,\n      height: this.state._height!,\n      color: this.state.color!,\n      className: this.props.className!,\n    });\n\n    const legendBars = this._createLegends(points);\n    const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n    const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n    const outerRadius =\n      Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n    const chartData = points.filter((d: IChartDataPoint) => d.data! > 0);\n    const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n    return !this._isChartEmpty() ? (\n      <div\n        className={this._classNames.root}\n        ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}\n        onMouseLeave={this._handleChartMouseLeave}\n      >\n        <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all}>\n          <div>\n            <svg\n              className={this._classNames.chart}\n              aria-label={data?.chartTitle}\n              ref={(node: SVGElement | null) => this._setViewBox(node)}\n            >\n              <Pie\n                width={this.state._width!}\n                height={this.state._height!}\n                outerRadius={outerRadius}\n                innerRadius={this.props.innerRadius!}\n                data={chartData!}\n                onFocusCallback={this._focusCallback}\n                hoverOnCallback={this._hoverCallback}\n                hoverLeaveCallback={this._hoverLeave}\n                uniqText={this._uniqText}\n                onBlurCallback={this._onBlur}\n                activeArc={this._getHighlightedLegend()}\n                focusedArcId={this.state.focusedArcId || ''}\n                href={this.props.href!}\n                calloutId={this._calloutId}\n                valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n                theme={this.props.theme!}\n                showLabelsInPercent={this.props.showLabelsInPercent}\n                hideLabels={this.props.hideLabels}\n              />\n            </svg>\n          </div>\n        </FocusZone>\n        <Callout\n          target={this._currentHoverElement}\n          alignTargetEdge={true}\n          isBeakVisible={false}\n          directionalHint={DirectionalHint.topAutoEdge}\n          gapSpace={15}\n          hidden={!(!this.props.hideTooltip && this.state.showHover)}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          preventDismissOnLostFocus={true}\n          /** Keep the callout updated with details of focused/hovered arc */\n          shouldUpdateWhenHidden={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n        >\n          {this.props.onRenderCalloutPerDataPoint ? (\n            this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n          ) : (\n            <ChartHoverCard\n              Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n              YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n              color={this.state.color}\n              culture={this.props.culture}\n            />\n          )}\n        </Callout>\n        {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\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 _closeCallout = () => {\n    this.setState({\n      showHover: false,\n    });\n  };\n\n  private _setViewBox(node: SVGElement | null): void {\n    if (node === null) {\n      return;\n    }\n\n    const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n    const heightVal =\n      node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n        ? node.parentElement?.offsetHeight\n        : this.state._height;\n    const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n    node.setAttribute('viewBox', viewbox);\n  }\n  private _createLegends(chartData: IChartDataPoint[]): JSX.Element {\n    const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n      const color: string = point.color!;\n      // mapping data to the format Legends component needs\n      const legend: ILegend = {\n        title: point.legend!,\n        color,\n        action: () => {\n          if (this.state.selectedLegend === point.legend) {\n            this.setState({ selectedLegend: '' });\n          } else {\n            this.setState({ selectedLegend: point.legend! });\n          }\n        },\n        hoverAction: () => {\n          this._handleChartMouseLeave();\n          this.setState({ activeLegend: point.legend! });\n        },\n        onMouseOutAction: () => {\n          this.setState({ activeLegend: '' });\n        },\n      };\n      return legend;\n    });\n    const legends = (\n      <Legends\n        legends={legendDataItems}\n        centerLegends\n        overflowProps={this.props.legendsOverflowProps}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        overflowText={this.props.legendsOverflowText}\n        {...this.props.legendProps}\n      />\n    );\n    return legends;\n  }\n\n  private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n    this._currentHoverElement = element;\n    this.setState({\n      /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */\n      showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,\n      value: data.data!.toString(),\n      legend: data.legend,\n      color: data.color!,\n      xCalloutValue: data.xAxisCalloutData!,\n      yCalloutValue: data.yAxisCalloutData!,\n      focusedArcId: id,\n      dataPointCalloutProps: data,\n      callOutAccessibilityData: data.callOutAccessibilityData!,\n    });\n  };\n\n  private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n    if (this._calloutAnchorPoint !== data) {\n      this._calloutAnchorPoint = data;\n      this._currentHoverElement = e;\n      this.setState({\n        /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */\n        showHover: this.state.selectedLegend === '' || this.state.selectedLegend === data.legend,\n        value: data.data!.toString(),\n        legend: data.legend,\n        color: data.color!,\n        xCalloutValue: data.xAxisCalloutData!,\n        yCalloutValue: data.yAxisCalloutData!,\n        dataPointCalloutProps: data,\n        callOutAccessibilityData: data.callOutAccessibilityData!,\n      });\n    }\n  };\n  private _onBlur = (): void => {\n    this.setState({ focusedArcId: '' });\n  };\n\n  private _hoverLeave(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    this.setState({ showHover: false });\n  };\n\n  private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {\n    const highlightedLegend = this._getHighlightedLegend();\n    if (valueInsideDonut !== undefined && (highlightedLegend !== '' || this.state.showHover)) {\n      let legendValue = valueInsideDonut;\n      data!.map((point: IChartDataPoint, index: number) => {\n        if (point.legend === highlightedLegend || (this.state.showHover && point.legend === this.state.legend)) {\n          legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n        }\n        return;\n      });\n      return legendValue;\n    } else {\n      return valueInsideDonut;\n    }\n  }\n\n  private _toLocaleString(data: string | number | undefined) {\n    const localeString = convertToLocaleString(data, this.props.culture);\n    if (!localeString) {\n      return data;\n    }\n    return localeString?.toString();\n  }\n\n  /**\n   * This function returns\n   * the selected legend if there is one\n   * or the hovered legend if none of the legends is selected.\n   * Note: This won't work in case of multiple legends selection.\n   */\n  private _getHighlightedLegend() {\n    return this.state.selectedLegend || this.state.activeLegend;\n  }\n\n  private _isChartEmpty(): boolean {\n    return !(\n      this.props.data &&\n      this.props.data.chartData &&\n      this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n    );\n  }\n\n  private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n    return donutChartDataPoint\n      ? donutChartDataPoint.map((item, index) => {\n          let color: string;\n          // isInverted property is applicable to v8 themes only\n          if (typeof item.color === 'undefined') {\n            color = getNextColor(index, 0, this.props.theme?.isInverted);\n          } else {\n            color = getColorFromToken(item.color, this.props.theme?.isInverted);\n          }\n\n          return { ...item, color };\n        })\n      : [];\n  };\n}\n"]}

package/lib/components/DonutChart/Pie/Pie.js

@@ -1,6 +1,6 @@
 import { __extends } from "tslib";
 import * as React from 'react';
-import * as shape from 'd3-shape';
+import { pie as d3Pie } from 'd3-shape';
 import { Arc } from '../Arc/index';
 import { classNamesFunction } from '@fluentui/react/lib/Utilities';
 import { getStyles } from './Pie.styles';
@@ -26,8 +26,7 @@ var Pie = /** @class */ (function (_super) {
             return totalValue;
         };
         _this._hoverCallback = _this._hoverCallback.bind(_this);
-        _this._pieForFocusRing = shape
-            .pie()
+        _this._pieForFocusRing = d3Pie()
             .sort(null)
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             .value(function (d) { return d.data; })
@@ -58,8 +57,7 @@ var Pie = /** @class */ (function (_super) {
         this.props.hoverOnCallback(data, e);
     };
     Pie.defaultProps = {
-        pie: shape
-            .pie()
+        pie: d3Pie()
             .sort(null)
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             .value(function (d) { return d.data; })

package/lib/components/DonutChart/Pie/Pie.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IPieProps, IPieStyleProps, IPieStyles } from './index';\nimport { Arc, IArcData } from '../Arc/index';\nimport { IChartDataPoint } from '../index';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Pie.styles';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\n\nconst getClassNames = classNamesFunction<IPieStyleProps, IPieStyles>();\nconst TEXT_PADDING: number = 5;\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-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0.02),\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _pieForFocusRing: any;\n  private _totalValue: number;\n\n  constructor(props: IPieProps) {\n    super(props);\n    this._hoverCallback = this._hoverCallback.bind(this);\n    this._pieForFocusRing = shape\n      .pie()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0);\n  }\n\n  public arcGenerator = (d: IArcData, i: number, focusData: IArcData, href?: string): JSX.Element => {\n    const color = d && d.data && d.data.color;\n    return (\n      <Arc\n        key={i}\n        data={d}\n        focusData={focusData}\n        innerRadius={this.props.innerRadius}\n        outerRadius={this.props.outerRadius}\n        color={color!}\n        onFocusCallback={this._focusCallback}\n        hoverOnCallback={this._hoverCallback}\n        onBlurCallback={this.props.onBlurCallback}\n        hoverLeaveCallback={this.props.hoverLeaveCallback}\n        uniqText={this.props.uniqText}\n        activeArc={this.props.activeArc}\n        href={href}\n        calloutId={this.props.calloutId}\n        valueInsideDonut={this.props.valueInsideDonut}\n        theme={this.props.theme!}\n        focusedArcId={this.props.focusedArcId}\n        showLabelsInPercent={this.props.showLabelsInPercent}\n        totalValue={this._totalValue}\n        hideLabels={this.props.hideLabels}\n      />\n    );\n  };\n\n  public render(): JSX.Element {\n    const { pie, data } = this.props;\n    const focusData = this._pieForFocusRing(data);\n    const piechart = pie(data);\n    const translate = `translate(${this.props.width / 2}, ${this.props.height / 2})`;\n    const classNames = getClassNames(getStyles, {\n      theme: this.props.theme!,\n    });\n\n    this._totalValue = this._computeTotalValue();\n\n    return (\n      <g transform={translate}>\n        {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i, focusData[i], this.props.href))}\n        {this.props.valueInsideDonut && (\n          <text\n            y={5}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\"\n            className={classNames.insideDonutString}\n            data-is-focusable={true}\n          >\n            {this.props.valueInsideDonut}\n          </text>\n        )}\n      </g>\n    );\n  }\n\n  public componentDidUpdate(): void {\n    const classNames = getClassNames(getStyles, {\n      theme: this.props.theme!,\n    });\n\n    wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius! * 2 - TEXT_PADDING);\n  }\n\n  private _focusCallback = (data: IChartDataPoint, id: string, e: SVGPathElement): void => {\n    this.props.onFocusCallback!(data, id, e);\n  };\n\n  private _hoverCallback(data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n    this.props.hoverOnCallback!(data, e);\n  }\n\n  private _computeTotalValue = () => {\n    let totalValue = 0;\n    this.props.data.forEach((arc: IChartDataPoint) => {\n      totalValue += arc.data!;\n    });\n    return totalValue;\n  };\n}\n"]}
+{"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { pie as d3Pie } from 'd3-shape';\nimport { IPieProps, IPieStyleProps, IPieStyles } from './index';\nimport { Arc, IArcData } from '../Arc/index';\nimport { IChartDataPoint } from '../index';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Pie.styles';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\n\nconst getClassNames = classNamesFunction<IPieStyleProps, IPieStyles>();\nconst TEXT_PADDING: number = 5;\n\nexport class Pie extends React.Component<IPieProps, {}> {\n  public static defaultProps: Partial<IPieProps> = {\n    pie: d3Pie()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0.02),\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _pieForFocusRing: any;\n  private _totalValue: number;\n\n  constructor(props: IPieProps) {\n    super(props);\n    this._hoverCallback = this._hoverCallback.bind(this);\n    this._pieForFocusRing = d3Pie()\n      .sort(null)\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .value((d: any) => d.data)\n      .padAngle(0);\n  }\n\n  public arcGenerator = (d: IArcData, i: number, focusData: IArcData, href?: string): JSX.Element => {\n    const color = d && d.data && d.data.color;\n    return (\n      <Arc\n        key={i}\n        data={d}\n        focusData={focusData}\n        innerRadius={this.props.innerRadius}\n        outerRadius={this.props.outerRadius}\n        color={color!}\n        onFocusCallback={this._focusCallback}\n        hoverOnCallback={this._hoverCallback}\n        onBlurCallback={this.props.onBlurCallback}\n        hoverLeaveCallback={this.props.hoverLeaveCallback}\n        uniqText={this.props.uniqText}\n        activeArc={this.props.activeArc}\n        href={href}\n        calloutId={this.props.calloutId}\n        valueInsideDonut={this.props.valueInsideDonut}\n        theme={this.props.theme!}\n        focusedArcId={this.props.focusedArcId}\n        showLabelsInPercent={this.props.showLabelsInPercent}\n        totalValue={this._totalValue}\n        hideLabels={this.props.hideLabels}\n      />\n    );\n  };\n\n  public render(): JSX.Element {\n    const { pie, data } = this.props;\n    const focusData = this._pieForFocusRing(data);\n    const piechart = pie(data);\n    const translate = `translate(${this.props.width / 2}, ${this.props.height / 2})`;\n    const classNames = getClassNames(getStyles, {\n      theme: this.props.theme!,\n    });\n\n    this._totalValue = this._computeTotalValue();\n\n    return (\n      <g transform={translate}>\n        {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i, focusData[i], this.props.href))}\n        {this.props.valueInsideDonut && (\n          <text\n            y={5}\n            textAnchor=\"middle\"\n            dominantBaseline=\"middle\"\n            className={classNames.insideDonutString}\n            data-is-focusable={true}\n          >\n            {this.props.valueInsideDonut}\n          </text>\n        )}\n      </g>\n    );\n  }\n\n  public componentDidUpdate(): void {\n    const classNames = getClassNames(getStyles, {\n      theme: this.props.theme!,\n    });\n\n    wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius! * 2 - TEXT_PADDING);\n  }\n\n  private _focusCallback = (data: IChartDataPoint, id: string, e: SVGPathElement): void => {\n    this.props.onFocusCallback!(data, id, e);\n  };\n\n  private _hoverCallback(data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n    this.props.hoverOnCallback!(data, e);\n  }\n\n  private _computeTotalValue = () => {\n    let totalValue = 0;\n    this.props.data.forEach((arc: IChartDataPoint) => {\n      totalValue += arc.data!;\n    });\n    return totalValue;\n  };\n}\n"]}

package/lib/components/GaugeChart/GaugeChart.base.js

@@ -1,6 +1,6 @@
 import { __assign, __extends } from "tslib";
 import * as React from 'react';
-import * as shape from 'd3-shape';
+import { arc as d3Arc } from 'd3-shape';
 import { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';
 import { GaugeValueFormat, } from './GaugeChart.types';
 import { Points, convertToLocaleString, formatValueWithSIPrefix, getAccessibleDataObject, getColorFromToken, getNextColor, pointTypes, } from '../../utilities/index';
@@ -71,8 +71,7 @@ var GaugeChartBase = /** @class */ (function (_super) {
                 });
                 total = maxValue;
             }
-            var arcGenerator = shape
-                .arc()
+            var arcGenerator = d3Arc()
                 .padAngle(ARC_PADDING / _this._outerRadius)
                 .padRadius(_this._outerRadius);
             var rtlSafeSegments = _this._isRTL ? Array.from(segments).reverse() : segments;
@@ -280,7 +279,7 @@ var GaugeChartBase = /** @class */ (function (_super) {
         });
         return (React.createElement("div", { className: this._classNames.root, ref: function (el) { return (_this._rootElem = el); } },
             React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal },
-                React.createElement("svg", { className: this._classNames.chart, role: "presentation", "aria-label": "This is a gauge chart with ".concat(this._segments.length, " section represented."), onMouseLeave: this._handleMouseOut },
+                React.createElement("svg", { className: this._classNames.chart, "aria-label": "This is a gauge chart with ".concat(this._segments.length, " section represented."), onMouseLeave: this._handleMouseOut },
                     React.createElement("g", { transform: "translate(".concat(width / 2, ", ").concat(height - (this._margins.bottom + this._legendsHeight), ")") },
                         this.props.chartTitle && (React.createElement("text", { x: 0, y: -(this._outerRadius + TITLE_OFFSET), textAnchor: "middle", className: this._classNames.chartTitle }, this.props.chartTitle)),
                         !this.props.hideMinMax && (React.createElement(React.Fragment, null,