@fluentui/react-charting 5.12.33 → 5.12.36

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

@@ -260,6 +260,10 @@ export interface ICartesianChartProps {
      * Used to rotate x axis labels by 45 degrees
      */
     rotateXAxisLables?: boolean;
+    /**
+     * The prop used to define the date time localization options
+     */
+    dateLocalizeOptions?: Intl.DateTimeFormatOptions;
     /**
      * Call to provide customized styling that will layer on top of the variant rules.
      */
@@ -401,10 +405,6 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
      * The prop used to define the culture to localize the numbers and date
      */
     culture?: string;
-    /**
-     * The prop used to define the date time localization options
-     */
-    dateLocalizeOptions?: Intl.DateTimeFormatOptions;
     getAxisData?: any;
     /**
      * Callback method used when mouse leaves the chart boundary.

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';\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; // check for RTL\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  /**\n   * The prop used to define the date time localization options\n   */\n  dateLocalizeOptions?: Intl.DateTimeFormatOptions;\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';\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   * 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"]}

package/lib/components/HorizontalBarChart/HorizontalBarChart.base.js

@@ -166,6 +166,20 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
         }, 0);
         var prevPosition = 0;
         var value = 0;
+        var sumOfPercent = 0;
+        data.chartData.map(function (point, index) {
+            var pointData = point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0;
+            value = (pointData / total) * 100;
+            if (value < 0) {
+                value = 0;
+            }
+            else if (value < 1 && value !== 0) {
+                value = 1;
+            }
+            sumOfPercent += value;
+            return sumOfPercent;
+        });
+        var scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
         var bars = data.chartData.map(function (point, index) {
             var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
             var pointData = point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0;
@@ -177,12 +191,12 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                 value = 0;
             }
             else if (value < 1 && value !== 0) {
-                value = 1;
+                value = 1 / scalingRatio;
             }
-            startingPoint.push(prevPosition);
-            if (value < 1) {
-                return React.createElement(React.Fragment, { key: index }, " ");
+            else {
+                value = value / scalingRatio;
             }
+            startingPoint.push(prevPosition);
             var xValue = point.horizontalBarChartdata.x;
             return (React.createElement("rect", { key: index, x: startingPoint[index] + '%', y: 0, "data-is-focusable": point.legend !== '' ? true : false, width: value + '%', height: _this._barHeight, fill: color, onMouseOver: point.legend !== '' ? _this._hoverOn.bind(_this, xValue, point) : undefined, onFocus: point.legend !== '' ? _this._hoverOn.bind(_this, xValue, point) : undefined, "aria-labelledby": _this._calloutId, role: "img", "aria-label": "Horizontal bar chart", onBlur: _this._hoverOff, onMouseLeave: _this._hoverOff }));
         });

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalBarChart.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.base.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAWhF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,IAAM,aAAa,GAAG,kBAAkB,EAA4D,CAAC;AAerG;IAA4C,0CAAmE;IAQ7G,gCAAY,KAA+B;QAA3C,YACE,kBAAM,KAAK,CAAC,SAgBb;QAiIO,4BAAsB,GAAG;YAC/B,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,IAAI,KAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;gBAC/B,KAAI,CAAC,QAAQ,CAAC;oBACZ,gBAAgB,EAAE,KAAK;oBACvB,UAAU,EAAE,EAAE;oBACd,WAAW,EAAE,IAAI;oBACjB,SAAS,EAAE,EAAE;oBACb,MAAM,EAAE,EAAE;iBACX,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;QAEM,kBAAY,GAAG;YACrB,KAAI,CAAC,UAAU,GAAG,KAAI,CAAC,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC;YAC5C,KAAI,CAAC,WAAW,GAAG,aAAa,CAAC,KAAI,CAAC,KAAK,CAAC,MAAO,EAAE;gBACnD,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM;gBACxB,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK;gBACvB,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS;gBAC/B,SAAS,EAAE,KAAI,CAAC,UAAU;gBAC1B,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS;aAC5B,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,uBAAiB,GAAG,UAAC,IAAiB;YAC5C,OAAO,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACrC,kDAAwB,IAAI,EAAE,IAAI,EAAC,MAAM,IACtC,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAChC,CACP,CAAC,CAAC,CAAC,CACF,KAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAC/B,CAAC;QACJ,CAAC,CAAC;QAkGM,mBAAa,GAAG;YACtB,KAAI,CAAC,QAAQ,CAAC;gBACZ,gBAAgB,EAAE,KAAK;aACxB,CAAC,CAAC;QACL,CAAC,CAAC;QAtRA,KAAI,CAAC,KAAK,GAAG;YACX,gBAAgB,EAAE,KAAK;YACvB,UAAU,EAAE,EAAE;YACd,SAAS,EAAE,EAAE;YACb,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,IAAI;YACjB,iDAAiD;YACjD,KAAK,EAAE,EAAE;YACT,aAAa,EAAE,EAAE;YACjB,aAAa,EAAE,EAAE;SAClB,CAAC;QACF,KAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,KAAI,CAAC,aAAa,GAAG,kBAAkB,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAClF,KAAI,CAAC,SAAS,GAAG,KAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QAC3C,KAAI,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;;IACrC,CAAC;IAEM,uCAAM,GAAb;QAAA,iBAgGC;QA/FO,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAC;QACnC,IAAI,CAAC,YAAY,EAAE,CAAC;QACZ,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;QAC3B,IAAI,SAAS,GAAuB,CAAC,CAAC;QACtC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,sBAAsB;YAC7E,IAAK,CAAC,GAAG,CAAC,UAAC,MAAmB,EAAE,KAAa;gBAC5C,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,EAAE;oBAC9F,SAAS,GAAG,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,CAAC;iBAC5D;qBAAM;oBACL,SAAS,GAAG,CAAC,CAAC;iBACf;gBACD,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,GAAG;oBACrB,MAAM,EAAE,EAAE;oBACV,sBAAsB,EAAE;wBACtB,CAAC,EAAE,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,GAAG,SAAU;wBAC9D,CAAC,EAAE,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC;qBAClD;oBACD,KAAK,EAAE,OAAO,CAAC,kBAAkB;iBAClC,CAAC;gBAEF,IAAM,aAAa,GAAG,KAAI,CAAC,iBAAiB,CAAC,MAAO,CAAC,CAAC;gBACtD,IAAM,IAAI,GAAG,KAAI,CAAC,WAAW,CAAC,MAAO,EAAE,OAAO,CAAC,CAAC;gBAChD,IAAM,MAAM,GAAG,KAAI,CAAC,aAAa,GAAG,GAAG,GAAG,KAAK,CAAC;gBAEhD,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK;oBAChD,6BAAK,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK;wBACpC,oBAAC,SAAS,IAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU;4BACjD,6BAAK,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,UAAU;gCACxC,MAAO,CAAC,UAAU,IAAI,CACrB,sCACE,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,aAAa,IACrC,uBAAuB,CAAC,MAAO,CAAC,2BAA2B,CAAC,GAE/D,MAAO,CAAC,UAAU,CACf,CACP;gCACA,aAAa,CACV,CACI;wBACX,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,KAAI,CAAC,gBAAgB,CAAC,MAAO,CAAC;wBAC7D,oBAAC,SAAS,IAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU;4BACjD,6BAAK,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK,gBAAc,MAAO,CAAC,UAAU;gCACpE,2BACE,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,UAAC,CAAc;wCAClB,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oCACrD,CAAC;oCACD,yDAAyD;oCACzD,OAAO,EAAE;wCACP,IAAM,CAAC,GAAG,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC;wCAChC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE;4CAClB,CAAC,CAAC,OAAO,EAAE,CAAC;yCACb;oCACH,CAAC,EACD,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,UAAU,IAErC,IAAI,CACH,CACA,CACI,CACR,CACF,CACP,CAAC;YACJ,CAAC,CAAC;YACF,oBAAC,OAAO,aACN,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,EACZ,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,EACjE,eAAe,EAAE,eAAe,CAAC,WAAW,EAC5C,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,yBAAyB,EAAE,IAAI,IAC3B,IAAI,CAAC,KAAK,CAAC,YAAa,EACxB,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC;gBAEhE,0CACG,IAAI,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAC5C,IAAI,CAAC,KAAK,CAAC,+BAA+B,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CACvE,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,MAAO,EAChF,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAW,EACpF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC3B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAC3B,CACH,CACA,CACK,CACN,CACP,CAAC;IACJ,CAAC;IAEO,6CAAY,GAApB,UAAqB,OAAoB,EAAE,WAA+B;QACxE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC;IACnE,CAAC;IAEO,yCAAQ,GAAhB,UAAiB,UAAyC,EAAE,KAAsB;QAChF,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,MAAO,CAAC,IAAI,IAAI,CAAC,mBAAmB,KAAK,KAAK,EAAE;YAC/G,IAAM,qBAAqB,GAAG,IAAI,CAChC,IAAI,CAAC,SAAS,EACd,UAAC,cAA6B,IAAK,OAAA,cAAc,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,EAArC,CAAqC,CACzE,CAAC;YACF,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC;gBACZ,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,UAAU;gBACtB,SAAS,EAAE,KAAK,CAAC,KAAM;gBACvB,MAAM,EAAE,KAAK,CAAC,MAAO;gBACrB,WAAW,EAAE,qBAAsB,CAAC,UAAU;gBAC9C,aAAa,EAAE,KAAK,CAAC,gBAAiB;gBACtC,aAAa,EAAE,KAAK,CAAC,gBAAiB;gBACtC,eAAe,EAAE,KAAK;gBACtB,wBAAwB,EAAE,KAAK,CAAC,wBAAwB;aACzD,CAAC,CAAC;SACJ;IACH,CAAC;IAEO,0CAAS,GAAjB;QACE,IAAI;IACN,CAAC;IAoCO,oDAAmB,GAA3B,UAA4B,IAAiB;QACnC,IAAA,OAAO,GAAK,IAAI,CAAC,KAAK,QAAf,CAAgB;QAC/B,IAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,SAAS,CAAC;QAC5D,IAAM,SAAS,GAAoB,IAAK,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC;QACvD,IAAM,CAAC,GAAG,SAAS,CAAC,sBAAuB,CAAC,CAAC,CAAC;QAC9C,IAAM,CAAC,GAAG,SAAS,CAAC,sBAAuB,CAAC,CAAC,CAAC;QAE9C,IAAM,iBAAiB,GAAG,uBAAuB,CAAC,IAAI,CAAC,0BAA2B,CAAC,CAAC;QACpF,QAAQ,aAAa,EAAE;YACrB,KAAK,SAAS;gBACZ,OAAO,CACL,sCAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,aAAa,IAAM,iBAAiB,GAClE,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CAC9B,CACP,CAAC;YACJ,KAAK,UAAU;gBACb,OAAO,CACL,wCAAS,iBAAiB;oBACxB,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,aAAa,IAAG,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ;oBAC3F,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,wBAAwB,IAAG,GAAG,GAAG,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ,CACxG,CACP,CAAC;YACJ,KAAK,YAAY;gBACf,IAAM,mBAAmB,GAAM,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,OAAO,CAAC,MAAG,CAAC;gBAC5F,OAAO,CACL,sCAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,aAAa,IAAM,iBAAiB,GAClE,mBAAmB,CAChB,CACP,CAAC;SACL;IACH,CAAC;IAEO,iDAAgB,GAAxB,UAAyB,IAAiB;QACxC,IAAM,SAAS,GAAG,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,CAAC;QAC/D,IAAM,aAAa,GAAG,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9C,IAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC;QAE3F,IAAM,eAAe,GAAG;YACtB,UAAU,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU;YACjD,WAAW,EAAE,OAAO,GAAG,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,UAAU;SAC3D,CAAC;QAEF,OAAO,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,eAAe,GAAI,CAAC;IAC/E,CAAC;IAEO,4CAAW,GAAnB,UAAoB,IAAiB,EAAE,OAAiB;QAAxD,iBAiDC;QAhDC,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;QAChH,wDAAwD;QACxD,IAAM,aAAa,GAAa,EAAE,CAAC;QACnC,IAAM,KAAK,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,CAClC,UAAC,GAAW,EAAE,KAAsB;YAClC,OAAA,GAAG,GAAG,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAA7E,CAA6E,EAC/E,CAAC,CACF,CAAC;QACF,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,IAAI,KAAK,GAAG,CAAC,CAAC;QAEd,IAAM,IAAI,GAAG,IAAI,CAAC,SAAU,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;YACrE,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;YACpG,IAAM,SAAS,GAAG,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxF,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,YAAY,IAAI,KAAK,CAAC;aACvB;YACD,KAAK,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;YAClC,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,KAAK,GAAG,CAAC,CAAC;aACX;iBAAM,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;gBACnC,KAAK,GAAG,CAAC,CAAC;aACX;YACD,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACjC,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,QAAoB,CAAC;aACvD;YACD,IAAM,MAAM,GAAG,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC;YAC/C,OAAO,CACL,8BACE,GAAG,EAAE,KAAK,EACV,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,GAAG,EAC7B,CAAC,EAAE,CAAC,uBACe,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACrD,KAAK,EAAE,KAAK,GAAG,GAAG,EAClB,MAAM,EAAE,KAAI,CAAC,UAAU,EACvB,IAAI,EAAE,KAAK,EACX,WAAW,EAAE,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EACtF,OAAO,EAAE,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,qBACjE,KAAI,CAAC,UAAU,EAChC,IAAI,EAAC,KAAK,gBACC,sBAAsB,EACjC,MAAM,EAAE,KAAI,CAAC,SAAS,EACtB,YAAY,EAAE,KAAI,CAAC,SAAS,GAC5B,CACH,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IACd,CAAC;IAOH,6BAAC;AAAD,CAAC,AAjSD,CAA4C,KAAK,CAAC,SAAS,GAiS1D","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, find, getId } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport {\n  IAccessibilityProps,\n  IChartProps,\n  IHorizontalBarChartProps,\n  IHorizontalBarChartStyleProps,\n  IHorizontalBarChartStyles,\n  IChartDataPoint,\n  IRefArrayData,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\n\nconst getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();\n\nexport interface IHorizontalBarChartState {\n  isCalloutVisible: boolean;\n  refSelected: SVGGElement | null | undefined;\n  color: string;\n  hoverValue: string | number | Date | null;\n  lineColor: string;\n  legend: string | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  barCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {\n  private _barHeight: number;\n  private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;\n  private _uniqLineText: string;\n  private _calloutId: string;\n  private _refArray: IRefArrayData[];\n  private _calloutAnchorPoint: IChartDataPoint | null;\n\n  constructor(props: IHorizontalBarChartProps) {\n    super(props);\n    this.state = {\n      isCalloutVisible: false,\n      hoverValue: '',\n      lineColor: '',\n      legend: '',\n      refSelected: null,\n      // eslint-disable-next-line react/no-unused-state\n      color: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n    };\n    this._refArray = [];\n    this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n    this._hoverOff = this._hoverOff.bind(this);\n    this._calloutId = getId('callout');\n  }\n\n  public render(): JSX.Element {\n    const { data, theme } = this.props;\n    this._adjustProps();\n    const { palette } = theme!;\n    let datapoint: number | undefined = 0;\n    return (\n      <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n        {data!.map((points: IChartProps, index: number) => {\n          if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {\n            datapoint = points.chartData![0].horizontalBarChartdata!.x;\n          } else {\n            datapoint = 0;\n          }\n          points.chartData![1] = {\n            legend: '',\n            horizontalBarChartdata: {\n              x: points.chartData![0].horizontalBarChartdata!.y - datapoint!,\n              y: points.chartData![0].horizontalBarChartdata!.y,\n            },\n            color: palette.neutralTertiaryAlt,\n          };\n\n          const chartDataText = this._getChartDataText(points!);\n          const bars = this._createBars(points!, palette);\n          const keyVal = this._uniqLineText + '_' + index;\n\n          return (\n            <div key={index} className={this._classNames.items}>\n              <div className={this._classNames.items}>\n                <FocusZone direction={FocusZoneDirection.horizontal}>\n                  <div className={this._classNames.chartTitle}>\n                    {points!.chartTitle && (\n                      <div\n                        className={this._classNames.chartDataText}\n                        {...getAccessibleDataObject(points!.chartTitleAccessibilityData)}\n                      >\n                        {points!.chartTitle}\n                      </div>\n                    )}\n                    {chartDataText}\n                  </div>\n                </FocusZone>\n                {points!.chartData![0].data && this._createBenchmark(points!)}\n                <FocusZone direction={FocusZoneDirection.horizontal}>\n                  <svg className={this._classNames.chart} aria-label={points!.chartTitle}>\n                    <g\n                      id={keyVal}\n                      key={keyVal}\n                      ref={(e: SVGGElement) => {\n                        this._refCallback(e, points!.chartData![0].legend);\n                      }}\n                      // NOTE: points.chartData![0] contains current data value\n                      onClick={() => {\n                        const p = points!.chartData![0];\n                        if (p && p.onClick) {\n                          p.onClick();\n                        }\n                      }}\n                      className={this._classNames.barWrapper}\n                    >\n                      {bars}\n                    </g>\n                  </svg>\n                </FocusZone>\n              </div>\n            </div>\n          );\n        })}\n        <Callout\n          target={this.state.refSelected}\n          coverTarget={true}\n          isBeakVisible={false}\n          gapSpace={30}\n          hidden={!(!this.props.hideTooltip && this.state.isCalloutVisible)}\n          directionalHint={DirectionalHint.topAutoEdge}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          preventDismissOnLostFocus={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData)}\n        >\n          <>\n            {this.props.onRenderCalloutPerHorizontalBar ? (\n              this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)\n            ) : (\n              <ChartHoverCard\n                Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend!}\n                YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue!}\n                color={this.state.lineColor}\n                culture={this.props.culture}\n              />\n            )}\n          </>\n        </Callout>\n      </div>\n    );\n  }\n\n  private _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n    this._refArray.push({ index: legendTitle, refElement: element });\n  }\n\n  private _hoverOn(hoverValue: string | number | Date | null, point: IChartDataPoint): void {\n    if ((!this.state.isCalloutVisible || this.state.legend !== point.legend!) && this._calloutAnchorPoint !== point) {\n      const currentHoveredElement = find(\n        this._refArray,\n        (currentElement: IRefArrayData) => currentElement.index === point.legend,\n      );\n      this._calloutAnchorPoint = point;\n      this.setState({\n        isCalloutVisible: true,\n        hoverValue: hoverValue,\n        lineColor: point.color!,\n        legend: point.legend!,\n        refSelected: currentHoveredElement!.refElement,\n        xCalloutValue: point.xAxisCalloutData!,\n        yCalloutValue: point.yAxisCalloutData!,\n        barCalloutProps: point,\n        callOutAccessibilityData: point.callOutAccessibilityData,\n      });\n    }\n  }\n\n  private _hoverOff(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    if (this.state.isCalloutVisible) {\n      this.setState({\n        isCalloutVisible: false,\n        hoverValue: '',\n        refSelected: null,\n        lineColor: '',\n        legend: '',\n      });\n    }\n  };\n\n  private _adjustProps = (): void => {\n    this._barHeight = this.props.barHeight || 8;\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: this.props.width,\n      className: this.props.className,\n      barHeight: this._barHeight,\n      color: this.state.lineColor,\n    });\n  };\n\n  private _getChartDataText = (data: IChartProps) => {\n    return this.props.barChartCustomData ? (\n      <div data-is-focusable={true} role=\"text\">\n        {this.props.barChartCustomData(data)}\n      </div>\n    ) : (\n      this._getDefaultTextData(data)\n    );\n  };\n\n  private _getDefaultTextData(data: IChartProps): JSX.Element {\n    const { culture } = this.props;\n    const chartDataMode = this.props.chartDataMode || 'default';\n    const chartData: IChartDataPoint = data!.chartData![0];\n    const x = chartData.horizontalBarChartdata!.x;\n    const y = chartData.horizontalBarChartdata!.y;\n\n    const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!);\n    switch (chartDataMode) {\n      case 'default':\n        return (\n          <div className={this._classNames.chartDataText} {...accessibilityData}>\n            {convertToLocaleString(x, culture)}\n          </div>\n        );\n      case 'fraction':\n        return (\n          <div {...accessibilityData}>\n            <span className={this._classNames.chartDataText}>{convertToLocaleString(x, culture)}</span>\n            <span className={this._classNames.chartDataTextDenominator}>{'/' + convertToLocaleString(y, culture)}</span>\n          </div>\n        );\n      case 'percentage':\n        const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) * 100), culture)}%`;\n        return (\n          <div className={this._classNames.chartDataText} {...accessibilityData}>\n            {dataRatioPercentage}\n          </div>\n        );\n    }\n  }\n\n  private _createBenchmark(data: IChartProps): JSX.Element {\n    const totalData = data.chartData![0].horizontalBarChartdata!.y;\n    const benchmarkData = data.chartData![0].data;\n    const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n    const benchmarkStyles = {\n      marginLeft: 'calc(' + benchmarkRatio + '% - 4px)',\n      marginRight: 'calc(' + (100 - benchmarkRatio) + '% - 4px)',\n    };\n\n    return <div className={this._classNames.triangle} style={benchmarkStyles} />;\n  }\n\n  private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    // calculating starting point of each bar and it's range\n    const startingPoint: number[] = [];\n    const total = data.chartData!.reduce(\n      (acc: number, point: IChartDataPoint) =>\n        acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n      0,\n    );\n    let prevPosition = 0;\n    let value = 0;\n\n    const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n      const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1;\n      }\n      startingPoint.push(prevPosition);\n      if (value < 1) {\n        return <React.Fragment key={index}> </React.Fragment>;\n      }\n      const xValue = point.horizontalBarChartdata!.x;\n      return (\n        <rect\n          key={index}\n          x={startingPoint[index] + '%'}\n          y={0}\n          data-is-focusable={point.legend !== '' ? true : false}\n          width={value + '%'}\n          height={this._barHeight}\n          fill={color}\n          onMouseOver={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n          onFocus={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n          aria-labelledby={this._calloutId}\n          role=\"img\"\n          aria-label=\"Horizontal bar chart\"\n          onBlur={this._hoverOff}\n          onMouseLeave={this._hoverOff}\n        />\n      );\n    });\n    return bars;\n  }\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n}\n"]}
+{"version":3,"file":"HorizontalBarChart.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, find, getId } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport {\n  IAccessibilityProps,\n  IChartProps,\n  IHorizontalBarChartProps,\n  IHorizontalBarChartStyleProps,\n  IHorizontalBarChartStyles,\n  IChartDataPoint,\n  IRefArrayData,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\n\nconst getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();\n\nexport interface IHorizontalBarChartState {\n  isCalloutVisible: boolean;\n  refSelected: SVGGElement | null | undefined;\n  color: string;\n  hoverValue: string | number | Date | null;\n  lineColor: string;\n  legend: string | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  barCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {\n  private _barHeight: number;\n  private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;\n  private _uniqLineText: string;\n  private _calloutId: string;\n  private _refArray: IRefArrayData[];\n  private _calloutAnchorPoint: IChartDataPoint | null;\n\n  constructor(props: IHorizontalBarChartProps) {\n    super(props);\n    this.state = {\n      isCalloutVisible: false,\n      hoverValue: '',\n      lineColor: '',\n      legend: '',\n      refSelected: null,\n      // eslint-disable-next-line react/no-unused-state\n      color: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n    };\n    this._refArray = [];\n    this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n    this._hoverOff = this._hoverOff.bind(this);\n    this._calloutId = getId('callout');\n  }\n\n  public render(): JSX.Element {\n    const { data, theme } = this.props;\n    this._adjustProps();\n    const { palette } = theme!;\n    let datapoint: number | undefined = 0;\n    return (\n      <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n        {data!.map((points: IChartProps, index: number) => {\n          if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {\n            datapoint = points.chartData![0].horizontalBarChartdata!.x;\n          } else {\n            datapoint = 0;\n          }\n          points.chartData![1] = {\n            legend: '',\n            horizontalBarChartdata: {\n              x: points.chartData![0].horizontalBarChartdata!.y - datapoint!,\n              y: points.chartData![0].horizontalBarChartdata!.y,\n            },\n            color: palette.neutralTertiaryAlt,\n          };\n\n          const chartDataText = this._getChartDataText(points!);\n          const bars = this._createBars(points!, palette);\n          const keyVal = this._uniqLineText + '_' + index;\n\n          return (\n            <div key={index} className={this._classNames.items}>\n              <div className={this._classNames.items}>\n                <FocusZone direction={FocusZoneDirection.horizontal}>\n                  <div className={this._classNames.chartTitle}>\n                    {points!.chartTitle && (\n                      <div\n                        className={this._classNames.chartDataText}\n                        {...getAccessibleDataObject(points!.chartTitleAccessibilityData)}\n                      >\n                        {points!.chartTitle}\n                      </div>\n                    )}\n                    {chartDataText}\n                  </div>\n                </FocusZone>\n                {points!.chartData![0].data && this._createBenchmark(points!)}\n                <FocusZone direction={FocusZoneDirection.horizontal}>\n                  <svg className={this._classNames.chart} aria-label={points!.chartTitle}>\n                    <g\n                      id={keyVal}\n                      key={keyVal}\n                      ref={(e: SVGGElement) => {\n                        this._refCallback(e, points!.chartData![0].legend);\n                      }}\n                      // NOTE: points.chartData![0] contains current data value\n                      onClick={() => {\n                        const p = points!.chartData![0];\n                        if (p && p.onClick) {\n                          p.onClick();\n                        }\n                      }}\n                      className={this._classNames.barWrapper}\n                    >\n                      {bars}\n                    </g>\n                  </svg>\n                </FocusZone>\n              </div>\n            </div>\n          );\n        })}\n        <Callout\n          target={this.state.refSelected}\n          coverTarget={true}\n          isBeakVisible={false}\n          gapSpace={30}\n          hidden={!(!this.props.hideTooltip && this.state.isCalloutVisible)}\n          directionalHint={DirectionalHint.topAutoEdge}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          preventDismissOnLostFocus={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData)}\n        >\n          <>\n            {this.props.onRenderCalloutPerHorizontalBar ? (\n              this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)\n            ) : (\n              <ChartHoverCard\n                Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend!}\n                YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue!}\n                color={this.state.lineColor}\n                culture={this.props.culture}\n              />\n            )}\n          </>\n        </Callout>\n      </div>\n    );\n  }\n\n  private _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n    this._refArray.push({ index: legendTitle, refElement: element });\n  }\n\n  private _hoverOn(hoverValue: string | number | Date | null, point: IChartDataPoint): void {\n    if ((!this.state.isCalloutVisible || this.state.legend !== point.legend!) && this._calloutAnchorPoint !== point) {\n      const currentHoveredElement = find(\n        this._refArray,\n        (currentElement: IRefArrayData) => currentElement.index === point.legend,\n      );\n      this._calloutAnchorPoint = point;\n      this.setState({\n        isCalloutVisible: true,\n        hoverValue: hoverValue,\n        lineColor: point.color!,\n        legend: point.legend!,\n        refSelected: currentHoveredElement!.refElement,\n        xCalloutValue: point.xAxisCalloutData!,\n        yCalloutValue: point.yAxisCalloutData!,\n        barCalloutProps: point,\n        callOutAccessibilityData: point.callOutAccessibilityData,\n      });\n    }\n  }\n\n  private _hoverOff(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    if (this.state.isCalloutVisible) {\n      this.setState({\n        isCalloutVisible: false,\n        hoverValue: '',\n        refSelected: null,\n        lineColor: '',\n        legend: '',\n      });\n    }\n  };\n\n  private _adjustProps = (): void => {\n    this._barHeight = this.props.barHeight || 8;\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: this.props.width,\n      className: this.props.className,\n      barHeight: this._barHeight,\n      color: this.state.lineColor,\n    });\n  };\n\n  private _getChartDataText = (data: IChartProps) => {\n    return this.props.barChartCustomData ? (\n      <div data-is-focusable={true} role=\"text\">\n        {this.props.barChartCustomData(data)}\n      </div>\n    ) : (\n      this._getDefaultTextData(data)\n    );\n  };\n\n  private _getDefaultTextData(data: IChartProps): JSX.Element {\n    const { culture } = this.props;\n    const chartDataMode = this.props.chartDataMode || 'default';\n    const chartData: IChartDataPoint = data!.chartData![0];\n    const x = chartData.horizontalBarChartdata!.x;\n    const y = chartData.horizontalBarChartdata!.y;\n\n    const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!);\n    switch (chartDataMode) {\n      case 'default':\n        return (\n          <div className={this._classNames.chartDataText} {...accessibilityData}>\n            {convertToLocaleString(x, culture)}\n          </div>\n        );\n      case 'fraction':\n        return (\n          <div {...accessibilityData}>\n            <span className={this._classNames.chartDataText}>{convertToLocaleString(x, culture)}</span>\n            <span className={this._classNames.chartDataTextDenominator}>{'/' + convertToLocaleString(y, culture)}</span>\n          </div>\n        );\n      case 'percentage':\n        const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) * 100), culture)}%`;\n        return (\n          <div className={this._classNames.chartDataText} {...accessibilityData}>\n            {dataRatioPercentage}\n          </div>\n        );\n    }\n  }\n\n  private _createBenchmark(data: IChartProps): JSX.Element {\n    const totalData = data.chartData![0].horizontalBarChartdata!.y;\n    const benchmarkData = data.chartData![0].data;\n    const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n    const benchmarkStyles = {\n      marginLeft: 'calc(' + benchmarkRatio + '% - 4px)',\n      marginRight: 'calc(' + (100 - benchmarkRatio) + '% - 4px)',\n    };\n\n    return <div className={this._classNames.triangle} style={benchmarkStyles} />;\n  }\n\n  private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    // calculating starting point of each bar and it's range\n    const startingPoint: number[] = [];\n    const total = data.chartData!.reduce(\n      (acc: number, point: IChartDataPoint) =>\n        acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n      0,\n    );\n    let prevPosition = 0;\n    let value = 0;\n\n    let sumOfPercent = 0;\n    data.chartData!.map((point: IChartDataPoint, index: number) => {\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1;\n      }\n      sumOfPercent += value;\n\n      return sumOfPercent;\n    });\n\n    const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;\n\n    const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n      const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1 / scalingRatio;\n      } else {\n        value = value / scalingRatio;\n      }\n      startingPoint.push(prevPosition);\n\n      const xValue = point.horizontalBarChartdata!.x;\n      return (\n        <rect\n          key={index}\n          x={startingPoint[index] + '%'}\n          y={0}\n          data-is-focusable={point.legend !== '' ? true : false}\n          width={value + '%'}\n          height={this._barHeight}\n          fill={color}\n          onMouseOver={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n          onFocus={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n          aria-labelledby={this._calloutId}\n          role=\"img\"\n          aria-label=\"Horizontal bar chart\"\n          onBlur={this._hoverOff}\n          onMouseLeave={this._hoverOff}\n        />\n      );\n    });\n    return bars;\n  }\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n}\n"]}

package/lib/components/Legends/Legends.styles.js

@@ -77,7 +77,7 @@ export var getStyles = function (props) {
                 },
                 _b),
         },
-        text: __assign(__assign({}, fonts.small), { lineHeight: '16px', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, opacity: props.colorOnSelectedState === palette.white ? '0.6' : '' }),
+        text: __assign(__assign({}, fonts.small), { lineHeight: '16px', color: theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText, opacity: props.colorOnSelectedState === palette.white ? '0.67' : '' }),
         hoverChange: {
             width: '12px',
             height: '12px',

package/lib/components/Legends/Legends.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legends.styles.js","sourceRoot":"../src/","sources":["components/Legends/Legends.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ILegendsStyles, ILegendStyleProps } from './Legends.types';\nimport { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: ILegendStyleProps): ILegendsStyles => {\n  const { className, theme, isLineLegendInBarChart = false } = props;\n  const { palette, fonts } = theme!;\n  const options: IGetFocusStylesOptions = {\n    inset: undefined,\n    position: undefined,\n    highContrastStyle: {\n      outlineColor: theme!.semanticColors.focusBorder,\n    },\n    borderColor: 'transparent',\n    outlineColor: undefined,\n  };\n  return {\n    root: [\n      {\n        whiteSpace: 'nowrap',\n        width: '100%',\n        alignItems: 'center',\n        margin: '-8px 0 0 -8px',\n      },\n      className,\n    ],\n    legend: [\n      getFocusStyle(theme!, options),\n      {\n        display: 'flex',\n        alignItems: 'center',\n        cursor: 'pointer',\n        border: 'none',\n        padding: '8px',\n        background: 'none',\n        textTransform: 'capitalize',\n      },\n    ],\n    rect: {\n      selectors: {\n        [HighContrastSelector]: {\n          content: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n          opacity: props.colorOnSelectedState === palette.white ? '0.6' : '',\n        },\n      },\n      width: '12px',\n      height: isLineLegendInBarChart ? '4px' : '12px',\n      backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,\n      content: props.stripePattern\n        ? // eslint-disable-next-line @fluentui/max-len\n          `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`\n        : '',\n    },\n    shape: [\n      {\n        marginRight: '8px',\n      },\n    ],\n    triangle: {\n      width: '0',\n      height: '0',\n      borderLeft: '6px solid transparent',\n      borderRight: '6px solid transparent',\n      borderTop: '10.4px solid',\n      borderTopColor: props.colorOnSelectedState,\n      marginRight: '8px',\n      opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '10.4px',\n          width: '10.4px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n        } as IStyle,\n      },\n    },\n    text: {\n      ...fonts.small,\n      lineHeight: '16px',\n      color: theme?.semanticColors.bodyText,\n      opacity: props.colorOnSelectedState === palette.white ? '0.6' : '',\n    },\n    hoverChange: {\n      width: '12px',\n      height: '12px',\n      backgroundColor: 'white',\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : palette.black,\n    },\n    overflowIndicationTextStyle: [\n      getFocusStyle(theme!, options),\n      {\n        cursor: 'pointer',\n        color: theme?.semanticColors.bodyText,\n        ...fonts.small,\n        lineHeight: '16px',\n        padding: '8px',\n      },\n    ],\n    hoverCardRoot: {\n      padding: '8px',\n    },\n    subComponentStyles: {\n      hoverCardStyles: {\n        host: [getFocusStyle(theme!, options)],\n      },\n    },\n  };\n};\n"]}
+{"version":3,"file":"Legends.styles.js","sourceRoot":"../src/","sources":["components/Legends/Legends.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ILegendsStyles, ILegendStyleProps } from './Legends.types';\nimport { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: ILegendStyleProps): ILegendsStyles => {\n  const { className, theme, isLineLegendInBarChart = false } = props;\n  const { palette, fonts } = theme!;\n  const options: IGetFocusStylesOptions = {\n    inset: undefined,\n    position: undefined,\n    highContrastStyle: {\n      outlineColor: theme!.semanticColors.focusBorder,\n    },\n    borderColor: 'transparent',\n    outlineColor: undefined,\n  };\n  return {\n    root: [\n      {\n        whiteSpace: 'nowrap',\n        width: '100%',\n        alignItems: 'center',\n        margin: '-8px 0 0 -8px',\n      },\n      className,\n    ],\n    legend: [\n      getFocusStyle(theme!, options),\n      {\n        display: 'flex',\n        alignItems: 'center',\n        cursor: 'pointer',\n        border: 'none',\n        padding: '8px',\n        background: 'none',\n        textTransform: 'capitalize',\n      },\n    ],\n    rect: {\n      selectors: {\n        [HighContrastSelector]: {\n          content: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n          opacity: props.colorOnSelectedState === palette.white ? '0.6' : '',\n        },\n      },\n      width: '12px',\n      height: isLineLegendInBarChart ? '4px' : '12px',\n      backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,\n      content: props.stripePattern\n        ? // eslint-disable-next-line @fluentui/max-len\n          `repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`\n        : '',\n    },\n    shape: [\n      {\n        marginRight: '8px',\n      },\n    ],\n    triangle: {\n      width: '0',\n      height: '0',\n      borderLeft: '6px solid transparent',\n      borderRight: '6px solid transparent',\n      borderTop: '10.4px solid',\n      borderTopColor: props.colorOnSelectedState,\n      marginRight: '8px',\n      opacity: props.colorOnSelectedState === palette.white ? '0.6' : props.opacity ? props.opacity : '',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '10.4px',\n          width: '10.4px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,\n        } as IStyle,\n      },\n    },\n    text: {\n      ...fonts.small,\n      lineHeight: '16px',\n      color: theme?.semanticColors.bodyText,\n      opacity: props.colorOnSelectedState === palette.white ? '0.67' : '',\n    },\n    hoverChange: {\n      width: '12px',\n      height: '12px',\n      backgroundColor: 'white',\n      marginRight: '8px',\n      border: '1px solid',\n      borderColor: props.borderColor ? props.borderColor : palette.black,\n    },\n    overflowIndicationTextStyle: [\n      getFocusStyle(theme!, options),\n      {\n        cursor: 'pointer',\n        color: theme?.semanticColors.bodyText,\n        ...fonts.small,\n        lineHeight: '16px',\n        padding: '8px',\n      },\n    ],\n    hoverCardRoot: {\n      padding: '8px',\n    },\n    subComponentStyles: {\n      hoverCardStyles: {\n        host: [getFocusStyle(theme!, options)],\n      },\n    },\n  };\n};\n"]}

package/lib/components/StackedBarChart/MultiStackedBarChart.base.js

@@ -159,9 +159,6 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
                 shouldHighlight: shouldHighlight,
                 href: href,
             });
-            if (value < 1) {
-                return React.createElement(React.Fragment, { key: index }, " ");
-            }
             return (React.createElement("g", { key: index, className: point.placeHolder ? _this._classNames.placeHolderOnHover : _this._classNames.opacityChangeOnHover, ref: function (e) {
                     _this._refCallback(e, point.legend);
                 }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, "aria-labelledby": _this._calloutId, role: "img", "aria-label": "Multi stacked bar chart", onMouseOver: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: point.placeHolder ? undefined : _this._onBarLeave, onClick: href ? (point.placeHolder ? undefined : _this._redirectToUrl.bind(_this, href)) : point.onClick },

package/lib/components/StackedBarChart/MultiStackedBarChart.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStackedBarChart.base.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { ILegend, Legends } from '../Legends/index';\nimport {\n  IAccessibilityProps,\n  IChartDataPoint,\n  IChartProps,\n  IMultiStackedBarChartProps,\n  IMultiStackedBarChartStyles,\n  IMultiStackedBarChartStyleProps,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\n\nconst getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();\n\nexport interface IRefArrayData {\n  legendText?: string;\n  refElement?: SVGGElement;\n}\n\nexport interface IMultiStackedBarChartState {\n  isCalloutVisible: boolean;\n  refArray: IRefArrayData[];\n  selectedLegendTitle: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected: any;\n  dataForHoverCard: number;\n  color: string;\n  isLegendHovered: boolean;\n  isLegendSelected: boolean;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  dataPointCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {\n  public static defaultProps: Partial<IMultiStackedBarChartProps> = {\n    barHeight: 16,\n    hideRatio: [],\n    hideDenominator: [],\n  };\n\n  private _classNames: IProcessedStyleSet<IMultiStackedBarChartStyles>;\n  private _calloutId: string;\n  private _calloutAnchorPoint: IChartDataPoint | null;\n\n  public constructor(props: IMultiStackedBarChartProps) {\n    super(props);\n    this.state = {\n      isCalloutVisible: false,\n      refArray: [],\n      selectedLegendTitle: '',\n      refSelected: null,\n      dataForHoverCard: 0,\n      color: '',\n      isLegendHovered: false,\n      isLegendSelected: false,\n      xCalloutValue: '',\n      yCalloutValue: '',\n    };\n    this._onLeave = this._onLeave.bind(this);\n    this._onBarLeave = this._onBarLeave.bind(this);\n    this._calloutId = getId('callout');\n  }\n\n  public render(): JSX.Element {\n    const { data, theme, culture } = this.props;\n    this._adjustProps();\n    const { palette } = theme!;\n    const legends = this._getLegendData(data!, this.props.hideRatio!, palette);\n    const { isCalloutVisible } = this.state;\n\n    this._classNames = getClassNames(this.props.styles!, {\n      legendColor: this.state.color,\n      theme: theme!,\n    });\n\n    const legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle;\n    const calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;\n\n    const bars: JSX.Element[] = data!.map((singleChartData: IChartProps, index: number) => {\n      const singleChartBars = this._createBarsAndLegends(\n        singleChartData!,\n        this.props.barHeight!,\n        palette,\n        this.props.hideRatio![index],\n        this.props.hideDenominator![index],\n        this.props.href,\n      );\n      return <div key={index}>{singleChartBars}</div>;\n    });\n\n    return (\n      <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n        {bars}\n        {!this.props.hideLegend && <div className={this._classNames.legendContainer}>{legends}</div>}\n        <Callout\n          gapSpace={15}\n          isBeakVisible={false}\n          target={this.state.refSelected}\n          setInitialFocus={true}\n          hidden={!(!this.props.hideTooltip && isCalloutVisible)}\n          directionalHint={DirectionalHint.topAutoEdge}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          preventDismissOnLostFocus={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n        >\n          <>\n            {this.props.onRenderCalloutPerDataPoint ? (\n              this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n            ) : (\n              <ChartHoverCard Legend={legendName} YValue={calloutYVal} color={this.state.color} culture={culture} />\n            )}\n          </>\n        </Callout>\n      </div>\n    );\n  }\n\n  private _createBarsAndLegends(\n    data: IChartProps,\n    barHeight: number,\n    palette: IPalette,\n    hideRatio: boolean,\n    hideDenominator: boolean,\n    href?: string,\n  ): JSX.Element {\n    const { culture } = this.props;\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    // calculating starting point of each bar and it's range\n    const startingPoint: number[] = [];\n    const total = data.chartData!.reduce(\n      (acc: number, point: IChartDataPoint) => acc + (point.data ? point.data : 0),\n      0,\n    );\n\n    let prevPosition = 0;\n    let value = 0;\n\n    const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n      const color: string = point.color\n        ? point.color\n        : point.placeHolder\n        ? palette.neutralTertiaryAlt\n        : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.data ? point.data : 0;\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;\n\n      startingPoint.push(prevPosition);\n\n      const styles = this.props.styles;\n      let shouldHighlight = true;\n      if (this.state.isLegendHovered || this.state.isLegendSelected) {\n        shouldHighlight = this.state.selectedLegendTitle === point.legend;\n      }\n\n      this._classNames = getClassNames(styles!, {\n        theme: this.props.theme!,\n        shouldHighlight: shouldHighlight,\n        href: href,\n      });\n\n      if (value < 1) {\n        return <React.Fragment key={index}> </React.Fragment>;\n      }\n\n      return (\n        <g\n          key={index}\n          className={point.placeHolder ? this._classNames.placeHolderOnHover : this._classNames.opacityChangeOnHover}\n          ref={(e: SVGGElement) => {\n            this._refCallback(e, point.legend!);\n          }}\n          data-is-focusable={!this.props.hideTooltip}\n          onFocus={this._onBarFocus.bind(this, pointData, color, point)}\n          onBlur={this._onBarLeave}\n          aria-labelledby={this._calloutId}\n          role=\"img\"\n          aria-label=\"Multi stacked bar chart\"\n          onMouseOver={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n          onMouseMove={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n          onMouseLeave={point.placeHolder ? undefined : this._onBarLeave}\n          onClick={href ? (point.placeHolder ? undefined : this._redirectToUrl.bind(this, href)) : point.onClick}\n        >\n          <rect key={index} x={startingPoint[index] + '%'} y={0} width={value + '%'} height={barHeight} fill={color} />\n        </g>\n      );\n    });\n    if (data.chartData!.length === 0) {\n      bars.push(\n        <g key={0} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n          <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralTertiaryAlt} />\n        </g>,\n      );\n    }\n    if (total === 0) {\n      bars.push(\n        <g key={'empty'} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n          <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralTertiaryAlt} />\n        </g>,\n      );\n    }\n    const hideNumber = hideRatio === undefined ? false : hideRatio;\n    const showRatio = !hideNumber && data!.chartData!.length === 2;\n    const showNumber = !hideNumber && data!.chartData!.length === 1;\n    const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n    return (\n      <div className={this._classNames.singleChartRoot}>\n        <FocusZone direction={FocusZoneDirection.horizontal}>\n          <div className={this._classNames.chartTitle}>\n            {data!.chartTitle && (\n              <div {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>\n                <strong>{data!.chartTitle}</strong>\n              </div>\n            )}\n            {showRatio && (\n              <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n                <strong>{getChartData()}</strong>\n                {!hideDenominator && <span>/{convertToLocaleString(total, culture)}</span>}\n              </div>\n            )}\n            {showNumber && (\n              <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n                <strong>{getChartData()}</strong>\n              </div>\n            )}\n          </div>\n        </FocusZone>\n        <FocusZone direction={FocusZoneDirection.horizontal}>\n          <div>\n            <svg className={this._classNames.chart} aria-label={data?.chartTitle}>\n              {bars}\n            </svg>\n          </div>\n        </FocusZone>\n      </div>\n    );\n  }\n\n  private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {\n    if (\n      this.state.isLegendSelected === false ||\n      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)\n    ) {\n      this.state.refArray.forEach((obj: IRefArrayData) => {\n        if (obj.legendText === point.legend!) {\n          this.setState({\n            refSelected: obj.refElement,\n            isCalloutVisible: true,\n            selectedLegendTitle: point.legend!,\n            dataForHoverCard: pointData,\n            color: color,\n            xCalloutValue: point.xAxisCalloutData!,\n            yCalloutValue: point.yAxisCalloutData!,\n            dataPointCalloutProps: point,\n            callOutAccessibilityData: point.callOutAccessibilityData!,\n          });\n        }\n      });\n    }\n  }\n\n  private _refCallback(element: SVGGElement, legendTitle: string): void {\n    this.state.refArray.push({ legendText: legendTitle, refElement: element });\n  }\n\n  private _adjustProps = (): void => {\n    const { theme, className, styles, width, barHeight } = this.props;\n    this._classNames = getClassNames(styles!, {\n      legendColor: this.state.color,\n      theme: theme!,\n      width: width,\n      className,\n      barHeight: barHeight,\n    });\n  };\n\n  private _onHover(customMessage: string): void {\n    if (this.state.isLegendSelected === false) {\n      this.setState({\n        isLegendHovered: true,\n        selectedLegendTitle: customMessage,\n      });\n    }\n  }\n\n  private _getLegendData = (data: IChartProps[], hideRatio: boolean[], palette: IPalette): JSX.Element => {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    const actions: ILegend[] = [];\n    data.forEach((singleChartData: IChartProps, index: number) => {\n      const validChartData = singleChartData.chartData!.filter((_: IChartDataPoint) => !_.placeHolder);\n      if (validChartData!.length < 3) {\n        const hideNumber = hideRatio[index] === undefined ? false : hideRatio[index];\n        if (hideNumber) {\n          validChartData!.forEach((point: IChartDataPoint) => {\n            const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n            const checkSimilarLegends = actions.filter(\n              (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n            );\n            if (checkSimilarLegends!.length > 0) {\n              return;\n            }\n            const legend: ILegend = {\n              title: point.legend!,\n              color: color,\n              action: () => {\n                this._onClick(point.legend!);\n              },\n              hoverAction: () => {\n                this._onHover(point.legend!);\n              },\n              onMouseOutAction: (isLegendSelected?: boolean) => {\n                this._onLeave(isLegendSelected);\n              },\n            };\n            actions.push(legend);\n          });\n        }\n      } else {\n        validChartData!.forEach((point: IChartDataPoint) => {\n          const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n          const checkSimilarLegends = actions.filter(\n            (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n          );\n          if (checkSimilarLegends!.length > 0) {\n            return;\n          }\n          const legend: ILegend = {\n            title: point.legend!,\n            color: color,\n            action: () => {\n              this._onClick(point.legend!);\n            },\n            hoverAction: () => {\n              this._onHover(point.legend!);\n            },\n            onMouseOutAction: (isLegendSelected?: boolean) => {\n              this._onLeave(isLegendSelected);\n            },\n          };\n          actions.push(legend);\n        });\n      }\n    });\n    return (\n      <Legends\n        legends={actions}\n        overflowProps={this.props.legendsOverflowProps}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        overflowText={this.props.legendsOverflowText}\n        {...this.props.legendProps}\n      />\n    );\n  };\n\n  private _onClick(customMessage: string): void {\n    if (this.state.isLegendSelected) {\n      if (this.state.selectedLegendTitle === customMessage) {\n        this.setState({\n          isLegendSelected: false,\n          selectedLegendTitle: customMessage,\n        });\n      } else {\n        this.setState({\n          selectedLegendTitle: customMessage,\n        });\n      }\n    } else {\n      this.setState({\n        isLegendSelected: true,\n        selectedLegendTitle: customMessage,\n      });\n    }\n  }\n\n  private _onLeave(isLegendFocused?: boolean): void {\n    if (!!isLegendFocused || this.state.isLegendSelected === false) {\n      this.setState({\n        isLegendHovered: false,\n        selectedLegendTitle: '',\n        isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,\n      });\n    }\n  }\n\n  private _onBarHover(\n    pointData: number,\n    color: string,\n    point: IChartDataPoint,\n    mouseEvent: React.MouseEvent<SVGPathElement>,\n  ): void {\n    mouseEvent.persist();\n\n    if (\n      (this.state.isLegendSelected === false ||\n        (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)) &&\n      this._calloutAnchorPoint !== point\n    ) {\n      this._calloutAnchorPoint = point;\n      this.setState({\n        refSelected: mouseEvent,\n        isCalloutVisible: true,\n        selectedLegendTitle: point.legend!,\n        dataForHoverCard: pointData,\n        color: color,\n        xCalloutValue: point.xAxisCalloutData!,\n        yCalloutValue: point.yAxisCalloutData!,\n        dataPointCalloutProps: point,\n        callOutAccessibilityData: point.callOutAccessibilityData!,\n      });\n    }\n  }\n\n  private _onBarLeave(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n\n  private _redirectToUrl(href: string | undefined): void {\n    href ? (window.location.href = href) : '';\n  }\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n}\n"]}
+{"version":3,"file":"MultiStackedBarChart.base.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { ILegend, Legends } from '../Legends/index';\nimport {\n  IAccessibilityProps,\n  IChartDataPoint,\n  IChartProps,\n  IMultiStackedBarChartProps,\n  IMultiStackedBarChartStyles,\n  IMultiStackedBarChartStyleProps,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\n\nconst getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();\n\nexport interface IRefArrayData {\n  legendText?: string;\n  refElement?: SVGGElement;\n}\n\nexport interface IMultiStackedBarChartState {\n  isCalloutVisible: boolean;\n  refArray: IRefArrayData[];\n  selectedLegendTitle: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected: any;\n  dataForHoverCard: number;\n  color: string;\n  isLegendHovered: boolean;\n  isLegendSelected: boolean;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  dataPointCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {\n  public static defaultProps: Partial<IMultiStackedBarChartProps> = {\n    barHeight: 16,\n    hideRatio: [],\n    hideDenominator: [],\n  };\n\n  private _classNames: IProcessedStyleSet<IMultiStackedBarChartStyles>;\n  private _calloutId: string;\n  private _calloutAnchorPoint: IChartDataPoint | null;\n\n  public constructor(props: IMultiStackedBarChartProps) {\n    super(props);\n    this.state = {\n      isCalloutVisible: false,\n      refArray: [],\n      selectedLegendTitle: '',\n      refSelected: null,\n      dataForHoverCard: 0,\n      color: '',\n      isLegendHovered: false,\n      isLegendSelected: false,\n      xCalloutValue: '',\n      yCalloutValue: '',\n    };\n    this._onLeave = this._onLeave.bind(this);\n    this._onBarLeave = this._onBarLeave.bind(this);\n    this._calloutId = getId('callout');\n  }\n\n  public render(): JSX.Element {\n    const { data, theme, culture } = this.props;\n    this._adjustProps();\n    const { palette } = theme!;\n    const legends = this._getLegendData(data!, this.props.hideRatio!, palette);\n    const { isCalloutVisible } = this.state;\n\n    this._classNames = getClassNames(this.props.styles!, {\n      legendColor: this.state.color,\n      theme: theme!,\n    });\n\n    const legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle;\n    const calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;\n\n    const bars: JSX.Element[] = data!.map((singleChartData: IChartProps, index: number) => {\n      const singleChartBars = this._createBarsAndLegends(\n        singleChartData!,\n        this.props.barHeight!,\n        palette,\n        this.props.hideRatio![index],\n        this.props.hideDenominator![index],\n        this.props.href,\n      );\n      return <div key={index}>{singleChartBars}</div>;\n    });\n\n    return (\n      <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n        {bars}\n        {!this.props.hideLegend && <div className={this._classNames.legendContainer}>{legends}</div>}\n        <Callout\n          gapSpace={15}\n          isBeakVisible={false}\n          target={this.state.refSelected}\n          setInitialFocus={true}\n          hidden={!(!this.props.hideTooltip && isCalloutVisible)}\n          directionalHint={DirectionalHint.topAutoEdge}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          preventDismissOnLostFocus={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n        >\n          <>\n            {this.props.onRenderCalloutPerDataPoint ? (\n              this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n            ) : (\n              <ChartHoverCard Legend={legendName} YValue={calloutYVal} color={this.state.color} culture={culture} />\n            )}\n          </>\n        </Callout>\n      </div>\n    );\n  }\n\n  private _createBarsAndLegends(\n    data: IChartProps,\n    barHeight: number,\n    palette: IPalette,\n    hideRatio: boolean,\n    hideDenominator: boolean,\n    href?: string,\n  ): JSX.Element {\n    const { culture } = this.props;\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    // calculating starting point of each bar and it's range\n    const startingPoint: number[] = [];\n    const total = data.chartData!.reduce(\n      (acc: number, point: IChartDataPoint) => acc + (point.data ? point.data : 0),\n      0,\n    );\n\n    let prevPosition = 0;\n    let value = 0;\n\n    const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n      const color: string = point.color\n        ? point.color\n        : point.placeHolder\n        ? palette.neutralTertiaryAlt\n        : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.data ? point.data : 0;\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;\n\n      startingPoint.push(prevPosition);\n\n      const styles = this.props.styles;\n      let shouldHighlight = true;\n      if (this.state.isLegendHovered || this.state.isLegendSelected) {\n        shouldHighlight = this.state.selectedLegendTitle === point.legend;\n      }\n\n      this._classNames = getClassNames(styles!, {\n        theme: this.props.theme!,\n        shouldHighlight: shouldHighlight,\n        href: href,\n      });\n\n      return (\n        <g\n          key={index}\n          className={point.placeHolder ? this._classNames.placeHolderOnHover : this._classNames.opacityChangeOnHover}\n          ref={(e: SVGGElement) => {\n            this._refCallback(e, point.legend!);\n          }}\n          data-is-focusable={!this.props.hideTooltip}\n          onFocus={this._onBarFocus.bind(this, pointData, color, point)}\n          onBlur={this._onBarLeave}\n          aria-labelledby={this._calloutId}\n          role=\"img\"\n          aria-label=\"Multi stacked bar chart\"\n          onMouseOver={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n          onMouseMove={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n          onMouseLeave={point.placeHolder ? undefined : this._onBarLeave}\n          onClick={href ? (point.placeHolder ? undefined : this._redirectToUrl.bind(this, href)) : point.onClick}\n        >\n          <rect key={index} x={startingPoint[index] + '%'} y={0} width={value + '%'} height={barHeight} fill={color} />\n        </g>\n      );\n    });\n    if (data.chartData!.length === 0) {\n      bars.push(\n        <g key={0} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n          <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralTertiaryAlt} />\n        </g>,\n      );\n    }\n    if (total === 0) {\n      bars.push(\n        <g key={'empty'} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n          <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralTertiaryAlt} />\n        </g>,\n      );\n    }\n    const hideNumber = hideRatio === undefined ? false : hideRatio;\n    const showRatio = !hideNumber && data!.chartData!.length === 2;\n    const showNumber = !hideNumber && data!.chartData!.length === 1;\n    const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n    return (\n      <div className={this._classNames.singleChartRoot}>\n        <FocusZone direction={FocusZoneDirection.horizontal}>\n          <div className={this._classNames.chartTitle}>\n            {data!.chartTitle && (\n              <div {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>\n                <strong>{data!.chartTitle}</strong>\n              </div>\n            )}\n            {showRatio && (\n              <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n                <strong>{getChartData()}</strong>\n                {!hideDenominator && <span>/{convertToLocaleString(total, culture)}</span>}\n              </div>\n            )}\n            {showNumber && (\n              <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n                <strong>{getChartData()}</strong>\n              </div>\n            )}\n          </div>\n        </FocusZone>\n        <FocusZone direction={FocusZoneDirection.horizontal}>\n          <div>\n            <svg className={this._classNames.chart} aria-label={data?.chartTitle}>\n              {bars}\n            </svg>\n          </div>\n        </FocusZone>\n      </div>\n    );\n  }\n\n  private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {\n    if (\n      this.state.isLegendSelected === false ||\n      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)\n    ) {\n      this.state.refArray.forEach((obj: IRefArrayData) => {\n        if (obj.legendText === point.legend!) {\n          this.setState({\n            refSelected: obj.refElement,\n            isCalloutVisible: true,\n            selectedLegendTitle: point.legend!,\n            dataForHoverCard: pointData,\n            color: color,\n            xCalloutValue: point.xAxisCalloutData!,\n            yCalloutValue: point.yAxisCalloutData!,\n            dataPointCalloutProps: point,\n            callOutAccessibilityData: point.callOutAccessibilityData!,\n          });\n        }\n      });\n    }\n  }\n\n  private _refCallback(element: SVGGElement, legendTitle: string): void {\n    this.state.refArray.push({ legendText: legendTitle, refElement: element });\n  }\n\n  private _adjustProps = (): void => {\n    const { theme, className, styles, width, barHeight } = this.props;\n    this._classNames = getClassNames(styles!, {\n      legendColor: this.state.color,\n      theme: theme!,\n      width: width,\n      className,\n      barHeight: barHeight,\n    });\n  };\n\n  private _onHover(customMessage: string): void {\n    if (this.state.isLegendSelected === false) {\n      this.setState({\n        isLegendHovered: true,\n        selectedLegendTitle: customMessage,\n      });\n    }\n  }\n\n  private _getLegendData = (data: IChartProps[], hideRatio: boolean[], palette: IPalette): JSX.Element => {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    const actions: ILegend[] = [];\n    data.forEach((singleChartData: IChartProps, index: number) => {\n      const validChartData = singleChartData.chartData!.filter((_: IChartDataPoint) => !_.placeHolder);\n      if (validChartData!.length < 3) {\n        const hideNumber = hideRatio[index] === undefined ? false : hideRatio[index];\n        if (hideNumber) {\n          validChartData!.forEach((point: IChartDataPoint) => {\n            const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n            const checkSimilarLegends = actions.filter(\n              (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n            );\n            if (checkSimilarLegends!.length > 0) {\n              return;\n            }\n            const legend: ILegend = {\n              title: point.legend!,\n              color: color,\n              action: () => {\n                this._onClick(point.legend!);\n              },\n              hoverAction: () => {\n                this._onHover(point.legend!);\n              },\n              onMouseOutAction: (isLegendSelected?: boolean) => {\n                this._onLeave(isLegendSelected);\n              },\n            };\n            actions.push(legend);\n          });\n        }\n      } else {\n        validChartData!.forEach((point: IChartDataPoint) => {\n          const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n          const checkSimilarLegends = actions.filter(\n            (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n          );\n          if (checkSimilarLegends!.length > 0) {\n            return;\n          }\n          const legend: ILegend = {\n            title: point.legend!,\n            color: color,\n            action: () => {\n              this._onClick(point.legend!);\n            },\n            hoverAction: () => {\n              this._onHover(point.legend!);\n            },\n            onMouseOutAction: (isLegendSelected?: boolean) => {\n              this._onLeave(isLegendSelected);\n            },\n          };\n          actions.push(legend);\n        });\n      }\n    });\n    return (\n      <Legends\n        legends={actions}\n        overflowProps={this.props.legendsOverflowProps}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        overflowText={this.props.legendsOverflowText}\n        {...this.props.legendProps}\n      />\n    );\n  };\n\n  private _onClick(customMessage: string): void {\n    if (this.state.isLegendSelected) {\n      if (this.state.selectedLegendTitle === customMessage) {\n        this.setState({\n          isLegendSelected: false,\n          selectedLegendTitle: customMessage,\n        });\n      } else {\n        this.setState({\n          selectedLegendTitle: customMessage,\n        });\n      }\n    } else {\n      this.setState({\n        isLegendSelected: true,\n        selectedLegendTitle: customMessage,\n      });\n    }\n  }\n\n  private _onLeave(isLegendFocused?: boolean): void {\n    if (!!isLegendFocused || this.state.isLegendSelected === false) {\n      this.setState({\n        isLegendHovered: false,\n        selectedLegendTitle: '',\n        isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,\n      });\n    }\n  }\n\n  private _onBarHover(\n    pointData: number,\n    color: string,\n    point: IChartDataPoint,\n    mouseEvent: React.MouseEvent<SVGPathElement>,\n  ): void {\n    mouseEvent.persist();\n\n    if (\n      (this.state.isLegendSelected === false ||\n        (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)) &&\n      this._calloutAnchorPoint !== point\n    ) {\n      this._calloutAnchorPoint = point;\n      this.setState({\n        refSelected: mouseEvent,\n        isCalloutVisible: true,\n        selectedLegendTitle: point.legend!,\n        dataForHoverCard: pointData,\n        color: color,\n        xCalloutValue: point.xAxisCalloutData!,\n        yCalloutValue: point.yAxisCalloutData!,\n        dataPointCalloutProps: point,\n        callOutAccessibilityData: point.callOutAccessibilityData!,\n      });\n    }\n  }\n\n  private _onBarLeave(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n\n  private _redirectToUrl(href: string | undefined): void {\n    href ? (window.location.href = href) : '';\n  }\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n}\n"]}

package/lib/components/StackedBarChart/StackedBarChart.base.js

@@ -115,6 +115,20 @@ var StackedBarChartBase = /** @class */ (function (_super) {
         var total = data.chartData.reduce(function (acc, point) { return acc + (point.data ? point.data : 0); }, 0);
         var prevPosition = 0;
         var value = 0;
+        var sumOfPercent = 0;
+        data.chartData.map(function (point, index) {
+            var pointData = point.data ? point.data : 0;
+            value = (pointData / total) * 100;
+            if (value < 1 && value !== 0) {
+                value = 1;
+            }
+            else if (value > 99 && value !== 100) {
+                value = 99;
+            }
+            sumOfPercent += value;
+            return sumOfPercent;
+        });
+        var scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
         var bars = data.chartData.map(function (point, index) {
             var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
             var pointData = point.data ? point.data : 0;
@@ -146,10 +160,13 @@ var StackedBarChartBase = /** @class */ (function (_super) {
             }
             value = (pointData / total) * 100;
             if (value < 1 && value !== 0) {
-                value = 1;
+                value = 1 / scalingRatio;
             }
             else if (value > 99 && value !== 100) {
-                value = 99;
+                value = 99 / scalingRatio;
+            }
+            else {
+                value = value / scalingRatio;
             }
             startingPoint.push(prevPosition);
             var styles = _this.props.styles;
@@ -162,9 +179,6 @@ var StackedBarChartBase = /** @class */ (function (_super) {
                 shouldHighlight: shouldHighlight,
                 href: _this.props.href,
             });
-            if (value < 1) {
-                return React.createElement(React.Fragment, { key: index }, " ");
-            }
             return (React.createElement("g", { key: index, className: _this._classNames.opacityChangeOnHover, ref: function (e) {
                     _this._refCallback(e, legend.title);
                 }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, "aria-label": "Stacked bar chart", role: "img", "aria-labelledby": _this._calloutId, onMouseOver: _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: _this._onBarLeave, pointerEvents: "all", onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : point.onClick },