@fluentui/react-charting 5.15.10 → 5.16.0

package/lib-amd/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\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\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   * 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\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   * 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   * 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\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  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;\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"]}
+{"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\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\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   * 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\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   * 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   * 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\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  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;\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"]}

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

@@ -3,6 +3,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.DonutChartBase = void 0;
     var getClassNames = Utilities_1.classNamesFunction();
+    var LEGEND_CONTAINER_HEIGHT = 40;
     var DonutChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(DonutChartBase, _super);
         function DonutChartBase(props) {
@@ -55,8 +56,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 showHover: false,
                 value: '',
                 legend: '',
-                _width: _this.props.width || 160,
-                _height: _this.props.height || 160,
+                _width: _this.props.width || 200,
+                _height: _this.props.height || 200,
                 activeLegend: '',
                 color: '',
                 xCalloutValue: '',
@@ -78,47 +79,41 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             }
             var heightState;
             if (nextProps.height && nextProps.height !== prevState._height) {
-                var reducedHeight = nextProps.height / 5;
-                heightState = { _height: nextProps.height - reducedHeight };
+                heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };
             }
             return tslib_1.__assign(tslib_1.__assign({}, widthState), heightState);
         };
         DonutChartBase.prototype.componentDidMount = function () {
-            /* 80% Height to the Chart
-               20% Height to the Legends
-            */
-            var reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;
-            this.setState({
-                _width: (this._rootElem && this._rootElem.offsetWidth),
-                _height: (this._rootElem && this._rootElem.offsetHeight - reducedHeight),
-            });
+            if (this._rootElem) {
+                this.setState({
+                    _width: this._rootElem.offsetWidth,
+                    _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,
+                });
+            }
         };
         DonutChartBase.prototype.render = function () {
             var _this = this;
             var _a;
             var _b = this.props, data = _b.data, _c = _b.hideLegend, hideLegend = _c === void 0 ? false : _c;
             var palette = this.props.theme.palette;
-            /**
-             * Resize SVG box to prevent overflow of arc labels
-             */
-            var adjustedWidth = Math.min(this._rootElem ? this._rootElem.offsetWidth : Infinity, this.state._width + 80);
-            var adjustedHeight = this.state._height + 40;
             this._classNames = getClassNames(this.props.styles, {
                 theme: this.props.theme,
-                width: adjustedWidth,
-                height: adjustedHeight,
+                width: this.state._width,
+                height: this.state._height,
                 color: this.state.color,
                 className: this.props.className,
             });
             var legendBars = this._createLegends(data, palette);
-            var outerRadius = Math.min(this.state._width, this.state._height) / 2;
+            var donutMarginHorizontal = this.props.hideLabels ? 0 : 80;
+            var donutMarginVertical = this.props.hideLabels ? 0 : 40;
+            var outerRadius = Math.min(this.state._width - donutMarginHorizontal, this.state._height - donutMarginVertical) / 2;
             var chartData = data && ((_a = data.chartData) === null || _a === void 0 ? void 0 : _a.filter(function (d) { return d.data > 0; }));
             var valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut, chartData);
             return (React.createElement("div", { className: this._classNames.root, ref: function (rootElem) { return (_this._rootElem = rootElem); }, onMouseLeave: this._handleChartMouseLeave },
                 React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, handleTabKey: react_focus_1.FocusZoneTabbableElements.all },
                     React.createElement("div", null,
                         React.createElement("svg", { className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle, ref: function (node) { return _this._setViewBox(node); } },
-                            React.createElement(index_2.Pie, { width: adjustedWidth, height: adjustedHeight, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels })))),
+                            React.createElement(index_2.Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels })))),
                 React.createElement(Callout_1.Callout, tslib_1.__assign({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: Callout_1.DirectionalHint.topAutoEdge, gapSpace: 15, hidden: !(!this.props.hideTooltip && this.state.showHover), id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true, 
                     /** Keep the callout updated with details of focused/hovered arc */
                     shouldUpdateWhenHidden: true }, this.props.calloutProps, index_3.getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(index_1.ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value, color: this.state.color, culture: this.props.culture }))),
@@ -204,6 +199,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
         };
         DonutChartBase.defaultProps = {
             innerRadius: 0,
+            hideLabels: true,
         };
         return DonutChartBase;
     }(React.Component));

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

@@ -1 +1 @@
-{"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 * as scale from 'd3-scale';\nimport { IProcessedStyleSet, IPalette } 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, IChartProps, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\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  };\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\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      const reducedHeight = nextProps.height / 5;\n      heightState = { _height: nextProps.height - reducedHeight };\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 || 160,\n      _height: this.props.height || 160,\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  }\n  public componentDidMount(): void {\n    /* 80% Height to the Chart\n       20% Height to the Legends\n    */\n    const reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;\n    this.setState({\n      _width: (this._rootElem && this._rootElem!.offsetWidth)!,\n      _height: (this._rootElem && this._rootElem!.offsetHeight - reducedHeight!)!,\n    });\n  }\n\n  public render(): JSX.Element {\n    const { data, hideLegend = false } = this.props;\n    const { palette } = this.props.theme!;\n\n    /**\n     * Resize SVG box to prevent overflow of arc labels\n     */\n    const adjustedWidth = Math.min(this._rootElem ? this._rootElem.offsetWidth : Infinity, this.state._width! + 80);\n    const adjustedHeight = this.state._height! + 40;\n\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: adjustedWidth,\n      height: adjustedHeight,\n      color: this.state.color!,\n      className: this.props.className!,\n    });\n\n    const legendBars = this._createLegends(data!, palette);\n    const outerRadius = Math.min(this.state._width!, this.state._height!) / 2;\n    const chartData = data && data.chartData?.filter((d: IChartDataPoint) => d.data! > 0);\n    const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n    return (\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={adjustedWidth}\n                height={adjustedHeight}\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  }\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(data: IChartProps, palette: IPalette): JSX.Element {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    const legendDataItems =\n      data &&\n      data!.chartData!.map((point: IChartDataPoint, index: number) => {\n        const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n        // mapping data to the format Legends component needs\n        const legend: ILegend = {\n          title: point.legend!,\n          color: 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) {\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"]}
+{"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":";;;;IAUA,IAAM,aAAa,GAAG,8BAAkB,EAA4C,CAAC;IACrF,IAAM,uBAAuB,GAAG,EAAE,CAAC;IAkBnC;QAAoC,0CAAmD;QA+BrF,wBAAY,KAAuB;YAAnC,YACE,kBAAM,KAAK,CAAC,SAmBb;YAgGO,mBAAa,GAAG;gBACtB,KAAI,CAAC,QAAQ,CAAC;oBACZ,SAAS,EAAE,KAAK;iBACjB,CAAC,CAAC;YACL,CAAC,CAAC;YAwDM,oBAAc,GAAG,UAAC,IAAqB,EAAE,EAAU,EAAE,OAAuB;gBAClF,KAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;gBACpC,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,YAAY,EAAE,EAAE;oBAChB,qBAAqB,EAAE,IAAI;oBAC3B,wBAAwB,EAAE,IAAI,CAAC,wBAAyB;iBACzD,CAAC,CAAC;YACL,CAAC,CAAC;YAEM,oBAAc,GAAG,UAAC,IAAqB,EAAE,CAAmC;gBAClF,IAAI,KAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE;oBACrC,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;oBAChC,KAAI,CAAC,oBAAoB,GAAG,CAAC,CAAC;oBAC9B,KAAI,CAAC,QAAQ,CAAC;wBACZ,iGAAiG;wBACjG,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,cAAc,KAAK,EAAE,IAAI,KAAI,CAAC,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC,MAAM;wBACxF,KAAK,EAAE,IAAI,CAAC,IAAK,CAAC,QAAQ,EAAE;wBAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,KAAK,EAAE,IAAI,CAAC,KAAM;wBAClB,aAAa,EAAE,IAAI,CAAC,gBAAiB;wBACrC,aAAa,EAAE,IAAI,CAAC,gBAAiB;wBACrC,qBAAqB,EAAE,IAAI;wBAC3B,wBAAwB,EAAE,IAAI,CAAC,wBAAyB;qBACzD,CAAC,CAAC;iBACJ;YACH,CAAC,CAAC;YACM,aAAO,GAAG;gBAChB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;YACtC,CAAC,CAAC;YAMM,4BAAsB,GAAG;gBAC/B,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAChC,KAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;YACtC,CAAC,CAAC;YA1NA,KAAI,CAAC,KAAK,GAAG;gBACX,SAAS,EAAE,KAAK;gBAChB,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,IAAI,GAAG;gBAC/B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,MAAM,IAAI,GAAG;gBACjC,YAAY,EAAE,EAAE;gBAChB,KAAK,EAAE,EAAE;gBACT,aAAa,EAAE,EAAE;gBACjB,aAAa,EAAE,EAAE;gBACjB,cAAc,EAAE,EAAE;gBAClB,YAAY,EAAE,EAAE;aACjB,CAAC;YACF,KAAI,CAAC,cAAc,GAAG,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;YACrD,KAAI,CAAC,cAAc,GAAG,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;YACrD,KAAI,CAAC,WAAW,GAAG,KAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;YAC/C,KAAI,CAAC,UAAU,GAAG,iBAAK,CAAC,SAAS,CAAC,CAAC;YACnC,KAAI,CAAC,SAAS,GAAG,iBAAK,CAAC,OAAO,CAAC,CAAC;;QAClC,CAAC;QArCa,uCAAwB,GAAtC,UACE,SAAqC,EACrC,SAAqC;YAErC,IAAI,UAA0C,CAAC;YAC/C,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,KAAK,SAAS,CAAC,MAAM,EAAE;gBAC3D,UAAU,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;aAC1C;YAED,IAAI,WAA4C,CAAC;YACjD,IAAI,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,OAAO,EAAE;gBAC9D,WAAW,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,MAAM,GAAG,uBAAuB,EAAE,CAAC;aACvE;YAED,6CAAY,UAAU,GAAK,WAAW,EAAG;QAC3C,CAAC;QAuBM,0CAAiB,GAAxB;YACE,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,IAAI,CAAC,QAAQ,CAAC;oBACZ,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW;oBAClC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,uBAAuB;iBAC/D,CAAC,CAAC;aACJ;QACH,CAAC;QAEM,+BAAM,GAAb;YAAA,iBAoFC;;YAnFO,IAAA,KAA+B,IAAI,CAAC,KAAK,EAAvC,IAAI,UAAA,EAAE,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAe,CAAC;YACxC,IAAA,OAAO,GAAK,IAAI,CAAC,KAAK,CAAC,KAAM,QAAtB,CAAuB;YAEtC,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAAE;gBACnD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;gBACxB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAO;gBACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAQ;gBAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;gBACxB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAU;aACjC,CAAC,CAAC;YAEH,IAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,IAAK,EAAE,OAAO,CAAC,CAAC;YACvD,IAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7D,IAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3D,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;YACtG,IAAM,SAAS,GAAG,IAAI,KAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAC,UAAC,CAAkB,IAAK,OAAA,CAAC,CAAC,IAAK,GAAG,CAAC,EAAX,CAAW,CAAC,CAAA,CAAC;YACtF,IAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAiB,EAAE,SAAU,CAAC,CAAC;YAC1F,OAAO,CACL,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;gBAEzC,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,UAAU,EAAE,YAAY,EAAE,uCAAyB,CAAC,GAAG;oBAC9F;wBACE,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;4BAExD,oBAAC,WAAG,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;gBACZ,oBAAC,iBAAO,qBACN,MAAM,EAAE,IAAI,CAAC,oBAAoB,EACjC,eAAe,EAAE,IAAI,EACrB,aAAa,EAAE,KAAK,EACpB,eAAe,EAAE,yBAAe,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;oBAC/B,mEAAmE;oBACnE,sBAAsB,EAAE,IAAI,IACxB,IAAI,CAAC,KAAK,CAAC,YAAa,EACxB,+BAAuB,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,sBAAc,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;gBACT,CAAC,UAAU,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAG,UAAU,CAAO,CAChF,CACP,CAAC;QACJ,CAAC;QAQO,oCAAW,GAAnB,UAAoB,IAAuB;;YACzC,IAAI,IAAI,KAAK,IAAI,EAAE;gBACjB,OAAO;aACR;YAED,IAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YAEzF,IAAM,SAAS,GACb,IAAI,CAAC,aAAa,IAAI,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,IAAG,IAAI,CAAC,KAAK,CAAC,OAAQ;gBAC1E,CAAC,CAAC,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY;gBAClC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACzB,IAAM,OAAO,GAAG,SAAO,QAAS,SAAI,SAAY,CAAC;YACjD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACxC,CAAC;QACO,uCAAc,GAAtB,UAAuB,IAAiB,EAAE,OAAiB;YAA3D,iBAsCC;YArCC,IAAM,cAAc,GAAa,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;YAChH,IAAM,eAAe,GACnB,IAAI;gBACJ,IAAK,CAAC,SAAU,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;oBACzD,IAAM,KAAK,GAAW,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;oBACpG,qDAAqD;oBACrD,IAAM,MAAM,GAAY;wBACtB,KAAK,EAAE,KAAK,CAAC,MAAO;wBACpB,KAAK,EAAE,KAAK;wBACZ,MAAM,EAAE;4BACN,IAAI,KAAI,CAAC,KAAK,CAAC,cAAc,KAAK,KAAK,CAAC,MAAM,EAAE;gCAC9C,KAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;6BACvC;iCAAM;gCACL,KAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,MAAO,EAAE,CAAC,CAAC;6BAClD;wBACH,CAAC;wBACD,WAAW,EAAE;4BACX,KAAI,CAAC,sBAAsB,EAAE,CAAC;4BAC9B,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,MAAO,EAAE,CAAC,CAAC;wBACjD,CAAC;wBACD,gBAAgB,EAAE;4BAChB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;wBACtC,CAAC;qBACF,CAAC;oBACF,OAAO,MAAM,CAAC;gBAChB,CAAC,CAAC,CAAC;YACL,IAAM,OAAO,GAAG,CACd,oBAAC,eAAO,qBACN,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;YACF,OAAO,OAAO,CAAC;QACjB,CAAC;QAuCO,oCAAW,GAAnB;YACE,IAAI;QACN,CAAC;QAOO,0CAAiB,GAAzB,UAA0B,gBAA6C,EAAE,IAAuB;YAC9F,IAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACvD,IAAI,gBAAgB,KAAK,SAAS,IAAI,iBAAiB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;gBACvF,IAAI,aAAW,GAAG,gBAAgB,CAAC;gBACnC,IAAK,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;oBAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,iBAAiB,EAAE;wBACtC,aAAW,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,IAAK,CAAC;qBAC7E;oBACD,OAAO;gBACT,CAAC,CAAC,CAAC;gBACH,OAAO,aAAW,CAAC;aACpB;iBAAM;gBACL,OAAO,gBAAgB,CAAC;aACzB;QACH,CAAC;QAEO,wCAAe,GAAvB,UAAwB,IAAiC;YACvD,IAAM,YAAY,GAAG,6BAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACrE,IAAI,CAAC,YAAY,EAAE;gBACjB,OAAO,IAAI,CAAC;aACb;YACD,OAAO,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,EAAE,CAAC;QAClC,CAAC;QAED;;;;;WAKG;QACK,8CAAqB,GAA7B;YACE,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QAC9D,CAAC;QA5Ra,2BAAY,GAA8B;YACtD,WAAW,EAAE,CAAC;YACd,UAAU,EAAE,IAAI;SACjB,CAAC;QA0RJ,qBAAC;KAAA,AA9RD,CAAoC,KAAK,CAAC,SAAS,GA8RlD;IA9RY,wCAAc","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport * as scale from 'd3-scale';\nimport { IProcessedStyleSet, IPalette } 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, IChartProps, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\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\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  }\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 { palette } = this.props.theme!;\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(data!, palette);\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 = data && data.chartData?.filter((d: IChartDataPoint) => d.data! > 0);\n    const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n    return (\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  }\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(data: IChartProps, palette: IPalette): JSX.Element {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    const legendDataItems =\n      data &&\n      data!.chartData!.map((point: IChartDataPoint, index: number) => {\n        const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n        // mapping data to the format Legends component needs\n        const legend: ILegend = {\n          title: point.legend!,\n          color: 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) {\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"]}

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

@@ -23,6 +23,7 @@ define(["require", "exports"], function (require, exports) {
                 boxSizing: 'content-box',
                 overflow: 'visible',
                 alignmentAdjust: 'center',
+                display: 'block',
             },
             legendContainer: {
                 paddingTop: '16px',

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA4B;QAC5C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,MAAM,GAAY,KAAK,OAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAClD,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,eAAe;gBACf;oBACE,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK;gBACZ,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,aAAa;gBACxB,QAAQ,EAAE,SAAS;gBACnB,eAAe,EAAE,QAAQ;aAC1B;YACD,eAAe,EAAE;gBACf,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAK,KAAK,OAAI;aACpB;SACF,CAAC;IACJ,CAAC,CAAC;IA3BW,QAAA,SAAS,aA2BpB","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n  const { className, width, height, theme } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-DonutChart',\n      {\n        alignItems: 'center',\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n      },\n      className,\n    ],\n    chart: {\n      width: width,\n      height: height,\n      boxSizing: 'content-box',\n      overflow: 'visible',\n      alignmentAdjust: 'center',\n    },\n    legendContainer: {\n      paddingTop: '16px',\n      width: `${width}px`,\n    },\n  };\n};\n"]}
+{"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA4B;QAC5C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,MAAM,GAAY,KAAK,OAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAClD,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,eAAe;gBACf;oBACE,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK;gBACZ,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,aAAa;gBACxB,QAAQ,EAAE,SAAS;gBACnB,eAAe,EAAE,QAAQ;gBACzB,OAAO,EAAE,OAAO;aACjB;YACD,eAAe,EAAE;gBACf,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAK,KAAK,OAAI;aACpB;SACF,CAAC;IACJ,CAAC,CAAC;IA5BW,QAAA,SAAS,aA4BpB","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n  const { className, width, height, theme } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-DonutChart',\n      {\n        alignItems: 'center',\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n      },\n      className,\n    ],\n    chart: {\n      width: width,\n      height: height,\n      boxSizing: 'content-box',\n      overflow: 'visible',\n      alignmentAdjust: 'center',\n      display: 'block',\n    },\n    legendContainer: {\n      paddingTop: '16px',\n      width: `${width}px`,\n    },\n  };\n};\n"]}

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

@@ -41,7 +41,7 @@ export interface IDonutChartProps extends ICartesianChartProps {
     showLabelsInPercent?: boolean;
     /**
      * Prop to hide the arc labels
-     * @default false
+     * @default true
      */
     hideLabels?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IDonutChart {}\n\nexport interface IDonutChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IChartProps;\n\n  /**\n   * inner radius for donut size\n   */\n  innerRadius?: number;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   * @default false\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   * @default false\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\nexport interface IDonutChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: IStyle;\n  /**\n   * Style for the legend container.\n   */\n  legendContainer: IStyle;\n}\n"]}
+{"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IDonutChart {}\n\nexport interface IDonutChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IChartProps;\n\n  /**\n   * inner radius for donut size\n   */\n  innerRadius?: number;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   * @default false\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   * @default true\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\nexport interface IDonutChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart?: IStyle;\n  /**\n   * Style for the legend container.\n   */\n  legendContainer: IStyle;\n}\n"]}

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

@@ -18,11 +18,11 @@ export declare class GroupedVerticalBarChartBase extends React.Component<IGroupe
     private _yMax;
     private _calloutId;
     private _tooltipId;
-    private _isNumeric;
+    private _xAxisType;
     private _isRtl;
-    private _isCustomBarWidth;
-    private _x1TotalBandWidth;
     private _calloutAnchorPoint;
+    private _barWidth;
+    private _domainMargin;
     constructor(props: IGroupedVerticalBarChartProps);
     render(): React.ReactNode;
     private _getGraphData;
@@ -58,4 +58,5 @@ export declare class GroupedVerticalBarChartBase extends React.Component<IGroupe
      */
     private _noLegendHighlighted;
     private _getAriaLabel;
+    private _getDomainMargins;
 }

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

@@ -1,10 +1,15 @@
-define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "../../utilities/index", "../../index"], function (require, exports, tslib_1, React, d3_array_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, react_focus_1, index_1, index_2) {
+define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "../../utilities/index", "../../index", "d3-format"], function (require, exports, tslib_1, React, d3_array_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, react_focus_1, index_1, index_2, d3_format_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.GroupedVerticalBarChartBase = void 0;
     var COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';
-    var BAR_SPACE = 2.5;
     var getClassNames = Utilities_1.classNamesFunction();
+    var MIN_DOMAIN_MARGIN = 8;
+    var X1_INNER_PADDING = 0.1;
+    // x1_inner_padding = space_between_bars / (space_between_bars + bar_width)
+    // => space_between_bars = (x1_inner_padding / (1 - x1_inner_padding)) * bar_width
+    /** Rate at which the space between the bars in a group changes wrt the bar width */
+    var BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);
     var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(GroupedVerticalBarChartBase, _super);
         function GroupedVerticalBarChartBase(props) {
@@ -108,25 +113,24 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             xScale1, containerHeight, xElement) {
                 var singleGroup = [];
+                var barLabelsForGroup = [];
                 var yBarScale = d3_scale_1.scaleLinear()
                     .domain([0, _this._yMax])
                     .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
-                var widthOfBar;
-                if (_this.props.barwidth && _this.props.barwidth < xScale1.bandwidth()) {
-                    widthOfBar = _this.props.barwidth;
-                }
-                else {
-                    widthOfBar = xScale1.bandwidth();
-                }
                 var tempDataSet = Object.keys(_this._datasetForBars[0]).splice(0, _this._keys.length);
                 tempDataSet.forEach(function (datasetKey, index) {
                     var refIndexNumber = singleSet.indexNum * tempDataSet.length + index;
                     var pointData = singleSet[datasetKey];
+                    var xPoint = xScale1(datasetKey);
+                    var yPoint = Math.max(containerHeight - _this.margins.bottom - yBarScale(pointData.data), 0);
                     // Not rendering data with 0.
                     pointData.data &&
-                        singleGroup.push(React.createElement("rect", { className: _this._classNames.opacityChangeOnHover, key: singleSet.indexNum + "-" + index, height: Math.max(yBarScale(pointData.data), 0), width: widthOfBar, x: xScale1(datasetKey), y: Math.max(containerHeight - _this.margins.bottom - yBarScale(pointData.data), 0), "data-is-focusable": !_this.props.hideTooltip, opacity: _this._getOpacity(pointData.legend), ref: function (e) {
+                        singleGroup.push(React.createElement("rect", { className: _this._classNames.opacityChangeOnHover, key: singleSet.indexNum + "-" + index, height: Math.max(yBarScale(pointData.data), 0), width: _this._barWidth, x: xPoint, y: yPoint, "data-is-focusable": !_this.props.hideTooltip, opacity: _this._getOpacity(pointData.legend), ref: function (e) {
                                 _this._refCallback(e, pointData.legend, refIndexNumber);
                             }, fill: pointData.color, onMouseOver: _this._onBarHover.bind(_this, pointData, singleSet), onMouseMove: _this._onBarHover.bind(_this, pointData, singleSet), onMouseOut: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, pointData, singleSet, refIndexNumber), onBlur: _this._onBarLeave, onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : pointData.onClick, "aria-label": _this._getAriaLabel(pointData, singleSet.xAxisPoint), role: "img" }));
+                    if (pointData.data && !_this.props.hideLabels && _this._barWidth >= 16) {
+                        barLabelsForGroup.push(React.createElement("text", { x: xPoint + _this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: _this._classNames.barLabel, "aria-hidden": true }, d3_format_1.formatPrefix(pointData.data < 1000 ? '.2~' : '.1', pointData.data)(pointData.data)));
+                    }
                 });
                 // Used to display tooltip at x axis labels.
                 if (!_this.props.wrapXAxisLables && _this.props.showXAxisLablesTooltip) {
@@ -143,8 +147,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     };
                     xAxisElement && index_1.tooltipOfXAxislabels(tooltipProps);
                 }
-                var customXScale = _this._isCustomBarWidth ? (xScale0.bandwidth() - _this._x1TotalBandWidth) / 2 : 0;
-                return (React.createElement("g", { key: singleSet.indexNum, transform: "translate(" + (xScale0(singleSet.xAxisPoint) + customXScale) + ", 0)" }, singleGroup));
+                return (React.createElement("g", { key: singleSet.indexNum, transform: "translate(" + xScale0(singleSet.xAxisPoint) + ", 0)" },
+                    singleGroup,
+                    barLabelsForGroup));
             };
             _this._createDataset = function (points) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -176,25 +181,21 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 var x0Axis = d3_scale_1.scaleBand()
                     .domain(_this._xAxisLabels)
                     .range(_this._isRtl
-                    ? [containerWidth - _this.margins.right, _this.margins.left]
-                    : [_this.margins.left, containerWidth - _this.margins.right])
-                    .padding(0.1);
+                    ? [containerWidth - _this.margins.right - _this._domainMargin, _this.margins.left + _this._domainMargin]
+                    : [_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin])
+                    // x0_inner_padding = space_between_groups / (space_between_groups + group_width)
+                    // space_between_groups = 2 * bar_width
+                    // group_width = this._keys.length * bar_width + (this._keys.length - 1) * space_between_bars
+                    .paddingInner(2 / (2 + _this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE));
                 return x0Axis;
             };
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             _this._createX1Scale = function (xScale0) {
                 var bandWidth = xScale0.bandwidth();
-                if (_this.props.barwidth) {
-                    var tempDataSet = Object.keys(_this._datasetForBars[0]).splice(0, _this._keys.length);
-                    var totalWidth = (_this.props.barwidth + BAR_SPACE) * tempDataSet.length;
-                    _this._isCustomBarWidth = totalWidth < xScale0.bandwidth();
-                    bandWidth = _this._isCustomBarWidth ? totalWidth : xScale0.bandwidth();
-                    _this._x1TotalBandWidth = bandWidth;
-                }
                 return d3_scale_1.scaleBand()
                     .domain(_this._keys)
                     .range(_this._isRtl ? [bandWidth, 0] : [0, bandWidth])
-                    .padding(0.05);
+                    .paddingInner(X1_INNER_PADDING);
             };
             _this._closeCallout = function () {
                 _this.setState({
@@ -260,6 +261,31 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 var yValue = point.yAxisCalloutData || point.data;
                 return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || xValue + ". " + legend + ", " + yValue + ".";
             };
+            _this._getDomainMargins = function (containerWidth) {
+                /** Total width available to render the bars */
+                var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
+                var barWidth = Math.min(_this.props.barwidth || 16, 24);
+                var groupWidth = _this._keys.length * barWidth + (_this._keys.length - 1) * BAR_GAP_RATE * barWidth; // (i)
+                /** Total width required to render the bars. Directly proportional to bar width */
+                var reqWidth = _this._xAxisLabels.length * groupWidth + (_this._xAxisLabels.length - 1) * 2 * barWidth; // (ii)
+                _this._domainMargin = MIN_DOMAIN_MARGIN;
+                if (totalWidth >= reqWidth) {
+                    // Center align the chart by setting equal left and right margins for domain
+                    _this._domainMargin += (totalWidth - reqWidth) / 2;
+                }
+                else {
+                    // From (i) and (ii)
+                    /** Maximum possible group width to maintain 2:1 spacing */
+                    var maxBandwidth = totalWidth /
+                        (_this._xAxisLabels.length +
+                            (_this._xAxisLabels.length - 1) * (2 / (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE)));
+                    groupWidth = maxBandwidth;
+                    // From (i)
+                    barWidth = groupWidth / (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE);
+                }
+                _this._barWidth = barWidth;
+                return tslib_1.__assign(tslib_1.__assign({}, _this.margins), { left: _this.margins.left + _this._domainMargin, right: _this.margins.right + _this._domainMargin });
+            };
             _this._createSet = Utilities_1.memoizeFunction(function (data) { return _this._createDataSetOfGVBC(data); });
             _this.state = {
                 color: '',
@@ -284,6 +310,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _this._refArray = [];
             _this._calloutId = Utilities_1.getId('callout');
             _this._tooltipId = Utilities_1.getId('GVBCTooltipId_');
+            _this._domainMargin = MIN_DOMAIN_MARGIN;
             return _this;
         }
         GroupedVerticalBarChartBase.prototype.render = function () {
@@ -293,7 +320,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             this._keys = keys;
             this._xAxisLabels = xAxisLabels;
             this._datasetForBars = datasetForBars;
-            this._isNumeric = index_1.getTypeOfAxis(points[0].name, true);
+            this._xAxisType = index_1.getTypeOfAxis(points[0].name, true);
             var legends = this._getLegendData(points, this.props.theme.palette);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var yMax = d3_array_1.max(this._dataset, function (point) { return d3_array_1.max(_this._keys, function (key) { return point[key]; }); });
@@ -307,9 +334,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                 tickValues: this.props.tickValues,
                 tickFormat: this.props.tickFormat,
             };
-            return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { points: this._datasetForBars, chartType: index_1.ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legends, xAxisType: this._isNumeric, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
+            return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { points: this._datasetForBars, chartType: index_1.ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legends, xAxisType: this._xAxisType, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
                     direction: react_focus_1.FocusZoneDirection.horizontal,
-                }, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, 
+                }, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins, xAxisInnerPadding: 2 / (2 + this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE), xAxisOuterPadding: 0, 
                 /* eslint-disable react/jsx-no-bind */
                 // eslint-disable-next-line react/no-children-prop
                 children: function () {