@fluentui/react-charting 5.18.7 → 5.18.9

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

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

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

@@ -6,7 +6,7 @@ import { IChartProps, IChartDataPoint } from './index';
 export interface IDonutChart {
 }
 /**
- * IDonutChartProps for Donutchart component.
+ * Donut Chart properties.
  * {@docCategory DonutChart}
  */
 export interface IDonutChartProps extends ICartesianChartProps {
@@ -49,8 +49,16 @@ export interface IDonutChartProps extends ICartesianChartProps {
      */
     hideLabels?: boolean;
 }
+/**
+ * Donut Chart style properties
+ * {@docCategory DonutChart}
+ */
 export interface IDonutChartStyleProps extends ICartesianChartStyleProps {
 }
+/**
+ * Donut Chart styles
+ * {@docCategory DonutChart}
+ */
 export interface IDonutChartStyles {
     /**
      *  Style for the root element.

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

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

package/lib-commonjs/components/GaugeChart/GaugeChart.types.d.ts

@@ -4,7 +4,7 @@ import { ILegendsProps } from '../Legends/index';
 import { IAccessibilityProps } from '../../types/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 /**
- * IGaugeChartSegment interface for Gaugechart.
+ * Gauge Chart segment interface.
  * {@docCategory GaugeChart}
  */
 export interface IGaugeChartSegment {
@@ -25,12 +25,15 @@ export interface IGaugeChartSegment {
      */
     accessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory GaugeChart}
+ */
 export declare enum GaugeValueFormat {
     Percentage = "percentage",
     Fraction = "fraction"
 }
 /**
- * IGaugeChartProps for Gaugechart component.
+ * Gauge Chart properties
  * {@docCategory GaugeChart}
  */
 export interface IGaugeChartProps {
@@ -109,6 +112,10 @@ export interface IGaugeChartProps {
      */
     calloutProps?: Partial<ICalloutProps>;
 }
+/**
+ * Gauge Chart style properties
+ * {@docCategory GaugeChart}
+ */
 export interface IGaugeChartStyleProps {
     /**
      * Theme (provided through customization)
@@ -139,6 +146,10 @@ export interface IGaugeChartStyleProps {
      */
     toDrawShape?: boolean;
 }
+/**
+ * Gauge Chart styles
+ * {@docCategory GaugeChart}
+ */
 export interface IGaugeChartStyles {
     /**
      * Styles for the root element

package/lib-commonjs/components/GaugeChart/GaugeChart.types.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GaugeValueFormat = void 0;
+/**
+ * {@docCategory GaugeChart}
+ */
 var GaugeValueFormat;
 (function (GaugeValueFormat) {
     GaugeValueFormat["Percentage"] = "percentage";

package/lib-commonjs/components/GaugeChart/GaugeChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GaugeChart.types.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.types.ts"],"names":[],"mappings":";;;AAgCA,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,6CAAyB,CAAA;IACzB,yCAAqB,CAAA;AACvB,CAAC,EAHW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAG3B","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ILegendsProps } from '../Legends/index';\nimport { IAccessibilityProps } from '../../types/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\n\n/**\n * IGaugeChartSegment interface for Gaugechart.\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartSegment {\n  /**\n   * Legend text for a segment\n   */\n  legend: string;\n\n  /**\n   * Size of the segment\n   */\n  size: number;\n\n  /**\n   * Color of the segment\n   */\n  color?: string;\n\n  /**\n   * Accessibility data for the segment\n   */\n  accessibilityData?: IAccessibilityProps;\n}\n\nexport enum GaugeValueFormat {\n  Percentage = 'percentage',\n  Fraction = 'fraction',\n}\n\n/**\n * IGaugeChartProps for Gaugechart component.\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartProps {\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Title of the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Current value of the gauge\n   */\n  chartValue: number;\n\n  /**\n   * Sections of the gauge\n   */\n  segments: IGaugeChartSegment[];\n\n  /**\n   * Minimum value of the gauge\n   * @defaultvalue 0\n   */\n  minValue?: number;\n\n  /**\n   * Maximum value of the gauge\n   */\n  maxValue?: number;\n\n  /**\n   * Additional text to display below the chart value\n   */\n  sublabel?: string;\n\n  /**\n   * Hide the min and max values of the gauge\n   * @defaultvalue false\n   */\n  hideMinMax?: boolean;\n\n  /**\n   * Format of the chart value\n   * @defaultvalue GaugeValueFormat.Percentage\n   */\n  chartValueFormat?: GaugeValueFormat | ((sweepFraction: number[]) => string);\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /*\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   * Do not show tooltips in chart\n   * @defaultvalue false\n   */\n  hideTooltip?: boolean;\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   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: IStyleFunctionOrObject<IGaugeChartStyleProps, IGaugeChartStyles>;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n}\n\nexport interface IGaugeChartStyleProps {\n  /**\n   * Theme (provided through customization)\n   */\n  theme: ITheme;\n\n  /**\n   * Font size of the chart value\n   */\n  chartValueSize?: number;\n\n  /**\n   * Width of the chart\n   */\n  chartWidth?: number;\n\n  /**\n   * Height of the chart\n   */\n  chartHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\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 IGaugeChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: IStyle;\n\n  /**\n   * Styles for the min and max values\n   */\n  limits?: IStyle;\n\n  /**\n   * Styles for the chart value\n   */\n  chartValue?: IStyle;\n\n  /**\n   * Styles for the sublabel\n   */\n  sublabel?: IStyle;\n\n  /**\n   * Styles for the needle\n   */\n  needle?: IStyle;\n\n  /**\n   * Styles for the chart title\n   */\n  chartTitle?: IStyle;\n\n  /**\n   * Styles for the segments\n   */\n  segment?: IStyle;\n\n  /**\n   * Styles for the legends container\n   */\n  legendsContainer?: 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 the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n}\n"]}
+{"version":3,"file":"GaugeChart.types.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.types.ts"],"names":[],"mappings":";;;AAgCA;;GAEG;AACH,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,6CAAyB,CAAA;IACzB,yCAAqB,CAAA;AACvB,CAAC,EAHW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAG3B","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ILegendsProps } from '../Legends/index';\nimport { IAccessibilityProps } from '../../types/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\n\n/**\n * Gauge Chart segment interface.\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartSegment {\n  /**\n   * Legend text for a segment\n   */\n  legend: string;\n\n  /**\n   * Size of the segment\n   */\n  size: number;\n\n  /**\n   * Color of the segment\n   */\n  color?: string;\n\n  /**\n   * Accessibility data for the segment\n   */\n  accessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory GaugeChart}\n */\nexport enum GaugeValueFormat {\n  Percentage = 'percentage',\n  Fraction = 'fraction',\n}\n\n/**\n * Gauge Chart properties\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartProps {\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Title of the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Current value of the gauge\n   */\n  chartValue: number;\n\n  /**\n   * Sections of the gauge\n   */\n  segments: IGaugeChartSegment[];\n\n  /**\n   * Minimum value of the gauge\n   * @defaultvalue 0\n   */\n  minValue?: number;\n\n  /**\n   * Maximum value of the gauge\n   */\n  maxValue?: number;\n\n  /**\n   * Additional text to display below the chart value\n   */\n  sublabel?: string;\n\n  /**\n   * Hide the min and max values of the gauge\n   * @defaultvalue false\n   */\n  hideMinMax?: boolean;\n\n  /**\n   * Format of the chart value\n   * @defaultvalue GaugeValueFormat.Percentage\n   */\n  chartValueFormat?: GaugeValueFormat | ((sweepFraction: number[]) => string);\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /*\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   * Do not show tooltips in chart\n   * @defaultvalue false\n   */\n  hideTooltip?: boolean;\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   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: IStyleFunctionOrObject<IGaugeChartStyleProps, IGaugeChartStyles>;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n}\n\n/**\n * Gauge Chart style properties\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartStyleProps {\n  /**\n   * Theme (provided through customization)\n   */\n  theme: ITheme;\n\n  /**\n   * Font size of the chart value\n   */\n  chartValueSize?: number;\n\n  /**\n   * Width of the chart\n   */\n  chartWidth?: number;\n\n  /**\n   * Height of the chart\n   */\n  chartHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n\n  /**\n   * Color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * Boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n}\n\n/**\n * Gauge Chart styles\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: IStyle;\n\n  /**\n   * Styles for the min and max values\n   */\n  limits?: IStyle;\n\n  /**\n   * Styles for the chart value\n   */\n  chartValue?: IStyle;\n\n  /**\n   * Styles for the sublabel\n   */\n  sublabel?: IStyle;\n\n  /**\n   * Styles for the needle\n   */\n  needle?: IStyle;\n\n  /**\n   * Styles for the chart title\n   */\n  chartTitle?: IStyle;\n\n  /**\n   * Styles for the segments\n   */\n  segment?: IStyle;\n\n  /**\n   * Styles for the legends container\n   */\n  legendsContainer?: 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 the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n}\n"]}

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.d.ts

@@ -2,7 +2,7 @@ import { IStyle } from '@fluentui/react/lib/Styling';
 import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { ICartesianChartStyles, ICartesianChartStyleProps, ICartesianChartProps, IGroupedVerticalBarChartData, IGVBarChartSeriesPoint } from '../../index';
 /**
- * IGroupedVerticalBarChartProps for GroupedVerticalBarchart component.
+ * Grouped Vertical Bar Chart properties
  * {@docCategory GroupedVerticalBarChart}
  */
 export interface IGroupedVerticalBarChartProps extends ICartesianChartProps {
@@ -73,8 +73,16 @@ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps {
      */
     hideLabels?: boolean;
 }
+/**
+ * Grouped Vertical Bar Chart style properties
+ * {@docCategory GroupedVerticalBarChart}
+ */
 export interface IGroupedVerticalBarChartStyleProps extends ICartesianChartStyleProps {
 }
+/**
+ * Grouped Vertical Bar Chart styles
+ * {@docCategory GroupedVerticalBarChart}
+ */
 export interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles {
     /**
      * Style to change the opacity of bars in dataviz when we hover on a single bar or legends

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedVerticalBarChart.types.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  ICartesianChartStyles,\n  ICartesianChartStyleProps,\n  ICartesianChartProps,\n  IGroupedVerticalBarChartData,\n  IGVBarChartSeriesPoint,\n} from '../../index';\n\n/**\n * IGroupedVerticalBarChartProps for GroupedVerticalBarchart component.\n * {@docCategory GroupedVerticalBarChart}\n */\nexport interface IGroupedVerticalBarChartProps extends ICartesianChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * Data to render in the chart.\n   */\n  data: IGroupedVerticalBarChartData[];\n\n  /**\n   * Barwidth automacally adjusted based upon given parent width, data and scale.\n   * If barwidth given through prop, then is shold be less than given formula.\n   * If not, graph will adjust and your value may not be reflected.\n   * Formula: width of parent div / (Number Of Groups * (Number Of single bars in group + 2))\n   * Note: By changing barwidth manually it may cause some spatial and graph override issues,\n   * better to avoid using this prop.\n   */\n  barwidth?: number;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>;\n\n  /**\n   * color of the datapoint legend\n   * @deprecated Dont use this property. colour will pick from given data\n   */\n  legendColor?: string;\n\n  /**\n   * This prop used to draw X axis grid line on tha chart. Default value will be false\n   * @deprecated Dont use this property. Handling with default value.\n   */\n  showXAxisGridLines?: boolean;\n\n  /**\n   * This prop used to draw Y axis grid lines on the chart. Default value will be true\n   * @deprecated Dont use this property. Lines are drawn by default\n   */\n  showYAxisGridLines?: boolean;\n\n  /**\n   * This prop takes the boolean value and used for to display x-axis path or transparent.\n   * This is a optional prop and default value is false. It dont show X-Axis path as tranparent.\n   * @deprecated Dont use this property. Axis line are removed by default\n   */\n  showXAxisPath?: boolean;\n\n  /**\n   * This prop takes the boolean value and used for to display y-axis path or transparent.\n   * This is a optional prop and default value is false. It dont show Y-Axis path as tranparent.\n   * @deprecated Dont use this property. No need to display Y axis path. Handling default\n   */\n  showYAxisPath?: boolean;\n\n  /**\n   * Define a custom callout renderer for a stack\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IGVBarChartSeriesPoint>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * To display multi stack callout or single callout\n   * @default false\n   */\n  isCalloutForStack?: boolean;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IGroupedVerticalBarChartStyleProps extends ICartesianChartStyleProps {}\n\nexport interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles {\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   * Style for the bar labels\n   */\n  barLabel: IStyle;\n}\n"]}
+{"version":3,"file":"GroupedVerticalBarChart.types.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  ICartesianChartStyles,\n  ICartesianChartStyleProps,\n  ICartesianChartProps,\n  IGroupedVerticalBarChartData,\n  IGVBarChartSeriesPoint,\n} from '../../index';\n\n/**\n * Grouped Vertical Bar Chart properties\n * {@docCategory GroupedVerticalBarChart}\n */\nexport interface IGroupedVerticalBarChartProps extends ICartesianChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * Data to render in the chart.\n   */\n  data: IGroupedVerticalBarChartData[];\n\n  /**\n   * Barwidth automacally adjusted based upon given parent width, data and scale.\n   * If barwidth given through prop, then is shold be less than given formula.\n   * If not, graph will adjust and your value may not be reflected.\n   * Formula: width of parent div / (Number Of Groups * (Number Of single bars in group + 2))\n   * Note: By changing barwidth manually it may cause some spatial and graph override issues,\n   * better to avoid using this prop.\n   */\n  barwidth?: number;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>;\n\n  /**\n   * color of the datapoint legend\n   * @deprecated Dont use this property. colour will pick from given data\n   */\n  legendColor?: string;\n\n  /**\n   * This prop used to draw X axis grid line on tha chart. Default value will be false\n   * @deprecated Dont use this property. Handling with default value.\n   */\n  showXAxisGridLines?: boolean;\n\n  /**\n   * This prop used to draw Y axis grid lines on the chart. Default value will be true\n   * @deprecated Dont use this property. Lines are drawn by default\n   */\n  showYAxisGridLines?: boolean;\n\n  /**\n   * This prop takes the boolean value and used for to display x-axis path or transparent.\n   * This is a optional prop and default value is false. It dont show X-Axis path as tranparent.\n   * @deprecated Dont use this property. Axis line are removed by default\n   */\n  showXAxisPath?: boolean;\n\n  /**\n   * This prop takes the boolean value and used for to display y-axis path or transparent.\n   * This is a optional prop and default value is false. It dont show Y-Axis path as tranparent.\n   * @deprecated Dont use this property. No need to display Y axis path. Handling default\n   */\n  showYAxisPath?: boolean;\n\n  /**\n   * Define a custom callout renderer for a stack\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IGVBarChartSeriesPoint>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * To display multi stack callout or single callout\n   * @default false\n   */\n  isCalloutForStack?: boolean;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n}\n\n/**\n * Grouped Vertical Bar Chart style properties\n * {@docCategory GroupedVerticalBarChart}\n */\nexport interface IGroupedVerticalBarChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * Grouped Vertical Bar Chart styles\n * {@docCategory GroupedVerticalBarChart}\n */\nexport interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles {\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   * Style for the bar labels\n   */\n  barLabel: IStyle;\n}\n"]}

package/lib-commonjs/components/HeatMapChart/HeatMapChart.types.d.ts

@@ -5,7 +5,7 @@ import { ICartesianChartStyleProps, ICartesianChartProps, ICartesianChartStyles
 import { ILegendsProps } from '../Legends/Legends.types';
 import { IHeatMapChartData } from '../../types/IDataPoint';
 /**
- * IHeatMapChartProps for HeatMapchart component.
+ * Heat Map Chart properties
  * {@docCategory HeatMapChart}
  */
 export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<keyof ICartesianChartProps, 'styles'>> {
@@ -102,8 +102,16 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
      */
     culture?: string;
 }
+/**
+ * Heat Map Chart style properties
+ * {@docCategory HeatMapChart}
+ */
 export interface IHeatMapChartStyleProps extends ICartesianChartStyleProps {
 }
+/**
+ * Heat Map Chart styles
+ * {@docCategory HeatMapChart}
+ */
 export interface IHeatMapChartStyles {
     root?: IStyle;
     text?: IStyle;

package/lib-commonjs/components/HeatMapChart/HeatMapChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeatMapChart.types.js","sourceRoot":"../src/","sources":["components/HeatMapChart/HeatMapChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';\nimport { IStyle } from '@fluentui/react/lib/Styling';\nimport {\n  ICartesianChartStyleProps,\n  ICartesianChartProps,\n  ICartesianChartStyles,\n} from '../CommonComponents/CartesianChart.types';\nimport { ILegendsProps } from '../Legends/Legends.types';\nimport { IHeatMapChartData } from '../../types/IDataPoint';\n\n/**\n * IHeatMapChartProps for HeatMapchart component.\n * {@docCategory HeatMapChart}\n */\nexport interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<keyof ICartesianChartProps, 'styles'>> {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * data to provide for Heat Map\n   */\n  data: IHeatMapChartData[];\n  /**\n   * The domain value for the color scale,\n   *\n   */\n  domainValuesForColorScale: number[];\n  /**\n   * The range values for the color scale,\n   * fill the array with colors in hex format\n   * note:- it should contain values exactly as many as values in the array\n   * `domainValuesForColorScale`\n   */\n  rangeValuesForColorScale: string[];\n  /**\n   * date formatter of x axis,\n   * if the x-axis data point are of date type then user can use this\n   * prop to format the date\n   * refer to https://github.com/d3/d3-time-format for string values\n   * @default '%b/%d'\n   */\n  xAxisDateFormatString?: string;\n  /**\n   * date formatter of y axis,\n   * if the y-axis data point are or date type then user can use this\n   * prop to format the date\n   * refer to https://github.com/d3/d3-time-format for string values\n   * @default '%b/%d'\n   */\n  yAxisDateFormatString?: string;\n  /**\n   * number formatter of x axis\n   * if the x-axis data pints are of number type then user can\n   * use this prop to format the number\n   * refer to https://github.com/d3/d3-format for string values\n   * @default '.2~s'\n   */\n  xAxisNumberFormatString?: string;\n  /**\n   * number formatter of y axis\n   * if the y-axis data pints are of number type then user can\n   * use this prop to format the number\n   * refer to https://github.com/d3/d3-format for string values\n   * @default '.2~s'\n   */\n  yAxisNumberFormatString?: string;\n  /**\n   * string formatter for x-axis.\n   * This prop only applies if the x-axis is of string type\n   *\n   * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending\n   * order and then render in the x-axis. this behaviour would force the order of the data points.\n   * to overcome , user can give x-axis point names as p1 p2...etc and map those p1 and p2 to custom name.\n   * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom\n   * name to that point by using this prop, hence giving the us the flexiblity of the order in which\n   * label should render\n   *\n   * see the example file for the usage of the prop\n   */\n  xAxisStringFormatter?: (point: string) => string;\n\n  /**\n   * string formatter for y-axis.\n   * This prop only applies if the y-axis is of string type\n   *\n   * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending\n   * order and then render in the y-axis. this behaviour would force the order of the data points.\n   * to overcome , user can give y-axis point names as p1 p2...etc and map those p1 and p2 to custom name.\n   * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom\n   * name to that point by using this prop, hence giving the us the flexiblity of the order in which\n   * label should render\n   *\n   * see the exaple file for the usage of the prop\n   */\n  yAxisStringFormatter?: (point: string) => string;\n  /**\n   * custom legend properties\n   */\n  legendProps?: Partial<ILegendsProps>;\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\nexport interface IHeatMapChartStyleProps extends ICartesianChartStyleProps {}\nexport interface IHeatMapChartStyles {\n  root?: IStyle;\n  text?: IStyle;\n  subComponentStyles: {\n    cartesianStyles: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n    calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;\n  };\n}\n"]}
+{"version":3,"file":"HeatMapChart.types.js","sourceRoot":"../src/","sources":["components/HeatMapChart/HeatMapChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';\nimport { IStyle } from '@fluentui/react/lib/Styling';\nimport {\n  ICartesianChartStyleProps,\n  ICartesianChartProps,\n  ICartesianChartStyles,\n} from '../CommonComponents/CartesianChart.types';\nimport { ILegendsProps } from '../Legends/Legends.types';\nimport { IHeatMapChartData } from '../../types/IDataPoint';\n\n/**\n * Heat Map Chart properties\n * {@docCategory HeatMapChart}\n */\nexport interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<keyof ICartesianChartProps, 'styles'>> {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * data to provide for Heat Map\n   */\n  data: IHeatMapChartData[];\n  /**\n   * The domain value for the color scale,\n   *\n   */\n  domainValuesForColorScale: number[];\n  /**\n   * The range values for the color scale,\n   * fill the array with colors in hex format\n   * note:- it should contain values exactly as many as values in the array\n   * `domainValuesForColorScale`\n   */\n  rangeValuesForColorScale: string[];\n  /**\n   * date formatter of x axis,\n   * if the x-axis data point are of date type then user can use this\n   * prop to format the date\n   * refer to https://github.com/d3/d3-time-format for string values\n   * @default '%b/%d'\n   */\n  xAxisDateFormatString?: string;\n  /**\n   * date formatter of y axis,\n   * if the y-axis data point are or date type then user can use this\n   * prop to format the date\n   * refer to https://github.com/d3/d3-time-format for string values\n   * @default '%b/%d'\n   */\n  yAxisDateFormatString?: string;\n  /**\n   * number formatter of x axis\n   * if the x-axis data pints are of number type then user can\n   * use this prop to format the number\n   * refer to https://github.com/d3/d3-format for string values\n   * @default '.2~s'\n   */\n  xAxisNumberFormatString?: string;\n  /**\n   * number formatter of y axis\n   * if the y-axis data pints are of number type then user can\n   * use this prop to format the number\n   * refer to https://github.com/d3/d3-format for string values\n   * @default '.2~s'\n   */\n  yAxisNumberFormatString?: string;\n  /**\n   * string formatter for x-axis.\n   * This prop only applies if the x-axis is of string type\n   *\n   * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending\n   * order and then render in the x-axis. this behaviour would force the order of the data points.\n   * to overcome , user can give x-axis point names as p1 p2...etc and map those p1 and p2 to custom name.\n   * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom\n   * name to that point by using this prop, hence giving the us the flexiblity of the order in which\n   * label should render\n   *\n   * see the example file for the usage of the prop\n   */\n  xAxisStringFormatter?: (point: string) => string;\n\n  /**\n   * string formatter for y-axis.\n   * This prop only applies if the y-axis is of string type\n   *\n   * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending\n   * order and then render in the y-axis. this behaviour would force the order of the data points.\n   * to overcome , user can give y-axis point names as p1 p2...etc and map those p1 and p2 to custom name.\n   * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom\n   * name to that point by using this prop, hence giving the us the flexiblity of the order in which\n   * label should render\n   *\n   * see the exaple file for the usage of the prop\n   */\n  yAxisStringFormatter?: (point: string) => string;\n  /**\n   * custom legend properties\n   */\n  legendProps?: Partial<ILegendsProps>;\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\n/**\n * Heat Map Chart style properties\n * {@docCategory HeatMapChart}\n */\nexport interface IHeatMapChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * Heat Map Chart styles\n * {@docCategory HeatMapChart}\n */\nexport interface IHeatMapChartStyles {\n  root?: IStyle;\n  text?: IStyle;\n  subComponentStyles: {\n    cartesianStyles: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n    calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;\n  };\n}\n"]}

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.types.d.ts

@@ -3,7 +3,7 @@ import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 /**
- * IHorizontalBarChartProps for HorizontalBarchart component.
+ * Horizontal Bar Chart properties
  * {@docCategory HorizontalBarChart}
  */
 export interface IHorizontalBarChartProps {
@@ -78,6 +78,10 @@ export interface IHorizontalBarChartProps {
      */
     hideLabels?: boolean;
 }
+/**
+ * Horizontal Bar Chart style properties
+ * {@docCategory HorizontalBarChart}
+ */
 export interface IHorizontalBarChartStyleProps {
     /**
      * Theme (provided through customization.)
@@ -113,6 +117,10 @@ export interface IHorizontalBarChartStyleProps {
      */
     hideLabels?: boolean;
 }
+/**
+ * Horizontal Bar Chart styles
+ * {@docCategory HorizontalBarChart}
+ */
 export interface IHorizontalBarChartStyles {
     /**
      * Styling for the root container
@@ -168,8 +176,12 @@ export interface IHorizontalBarChartStyles {
  * default: show the datapoint.x value
  * fraction: show the fraction of datapoint.x/datapoint.y
  * percentage: show the percentage of (datapoint.x/datapoint.y)%
+ * {@docCategory HorizontalBarChart}
  */
 export declare type ChartDataMode = 'default' | 'fraction' | 'percentage';
+/**
+ * {@docCategory HorizontalBarChart}
+ */
 export declare enum HorizontalBarChartVariant {
     PartToWhole = "part-to-whole",
     AbsoluteScale = "absolute-scale"

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.types.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HorizontalBarChartVariant = void 0;
+/**
+ * {@docCategory HorizontalBarChart}
+ */
 var HorizontalBarChartVariant;
 (function (HorizontalBarChartVariant) {
     HorizontalBarChartVariant["PartToWhole"] = "part-to-whole";

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalBarChart.types.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.types.ts"],"names":[],"mappings":";;;AAiNA,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACnC,0DAA6B,CAAA;IAC7B,6DAAgC,CAAA;AAClC,CAAC,EAHW,yBAAyB,GAAzB,iCAAyB,KAAzB,iCAAyB,QAGpC","sourcesContent":["import { IChartProps, IChartDataPoint } from './index';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\n/**\n * IHorizontalBarChartProps for HorizontalBarchart component.\n * {@docCategory HorizontalBarChart}\n */\nexport interface IHorizontalBarChartProps {\n  /**\n   * An array of chart data points for the Horizontal bar chart\n   */\n  data?: IChartProps[];\n\n  /**\n   * Width of bar chart\n   */\n  width?: number;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * This property tells whether to show ratio on top of stacked bar chart or not.\n   */\n  hideRatio?: boolean[];\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * This property tells how to show data text on top right of bar chart.\n   * If barChartCustomData props added, then this props will be overrided.\n   * @default 'default'\n   */\n  chartDataMode?: ChartDataMode;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>;\n\n  /**\n   * Define a custom callout renderer for a horizontal bar\n   */\n  onRenderCalloutPerHorizontalBar?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * Custom text to the chart (right side of the chart)\n   * IChartProps will be available as props to the method prop.\n   * If this method not given, default values (IHorizontalDataPoint \\{x,y\\})\n   * will be used to display the data/text based on given chartModeData prop.\n   */\n  barChartCustomData?: IRenderFunction<IChartProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to define the variant of HorizontalBarChart to render\n   * @default HorizontalBarChartVariant.PartToWhole\n   */\n  variant?: HorizontalBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IHorizontalBarChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width: number | undefined;\n\n  /**\n   * line color for callout\n   */\n  color?: string;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * prop to check if benchmark data is provided\n   */\n  showTriangle?: boolean;\n\n  /**\n   * Prop to define the variant of HorizontalBarChart to render\n   */\n  variant?: HorizontalBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IHorizontalBarChartStyles {\n  /**\n   * Styling for the root container\n   */\n  root: IStyle;\n\n  /**\n   * Styling for each item in the container\n   */\n  items: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style for the bars.\n   */\n  barWrapper: IStyle;\n\n  /**\n   * Style for left side text of the chart title\n   */\n  chartTitleLeft: IStyle;\n\n  /**\n   * Style for right side text of the chart title\n   */\n  chartTitleRight: IStyle;\n\n  /**\n   * Style for the chart data text denominator.\n   */\n  chartDataTextDenominator: IStyle;\n\n  /**\n   * Style for the benchmark container\n   */\n  benchmarkContainer: IStyle;\n\n  /**\n   * Style for the benchmark triangle\n   */\n  triangle: IStyle;\n\n  /**\n   * Style for the bar labels\n   */\n  barLabel: IStyle;\n\n  /**\n   * Style for the div containing the chart\n   */\n  chartWrapper: IStyle;\n}\n\n/**\n * Chart data mode for chart data text\n * default: show the datapoint.x value\n * fraction: show the fraction of datapoint.x/datapoint.y\n * percentage: show the percentage of (datapoint.x/datapoint.y)%\n */\nexport type ChartDataMode = 'default' | 'fraction' | 'percentage';\n\nexport enum HorizontalBarChartVariant {\n  PartToWhole = 'part-to-whole',\n  AbsoluteScale = 'absolute-scale',\n}\n"]}
+{"version":3,"file":"HorizontalBarChart.types.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.types.ts"],"names":[],"mappings":";;;AA0NA;;GAEG;AACH,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACnC,0DAA6B,CAAA;IAC7B,6DAAgC,CAAA;AAClC,CAAC,EAHW,yBAAyB,GAAzB,iCAAyB,KAAzB,iCAAyB,QAGpC","sourcesContent":["import { IChartProps, IChartDataPoint } from './index';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\n/**\n * Horizontal Bar Chart properties\n * {@docCategory HorizontalBarChart}\n */\nexport interface IHorizontalBarChartProps {\n  /**\n   * An array of chart data points for the Horizontal bar chart\n   */\n  data?: IChartProps[];\n\n  /**\n   * Width of bar chart\n   */\n  width?: number;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * This property tells whether to show ratio on top of stacked bar chart or not.\n   */\n  hideRatio?: boolean[];\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * This property tells how to show data text on top right of bar chart.\n   * If barChartCustomData props added, then this props will be overrided.\n   * @default 'default'\n   */\n  chartDataMode?: ChartDataMode;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>;\n\n  /**\n   * Define a custom callout renderer for a horizontal bar\n   */\n  onRenderCalloutPerHorizontalBar?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * Custom text to the chart (right side of the chart)\n   * IChartProps will be available as props to the method prop.\n   * If this method not given, default values (IHorizontalDataPoint \\{x,y\\})\n   * will be used to display the data/text based on given chartModeData prop.\n   */\n  barChartCustomData?: IRenderFunction<IChartProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to define the variant of HorizontalBarChart to render\n   * @default HorizontalBarChartVariant.PartToWhole\n   */\n  variant?: HorizontalBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n}\n\n/**\n * Horizontal Bar Chart style properties\n * {@docCategory HorizontalBarChart}\n */\nexport interface IHorizontalBarChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width: number | undefined;\n\n  /**\n   * line color for callout\n   */\n  color?: string;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * prop to check if benchmark data is provided\n   */\n  showTriangle?: boolean;\n\n  /**\n   * Prop to define the variant of HorizontalBarChart to render\n   */\n  variant?: HorizontalBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   */\n  hideLabels?: boolean;\n}\n\n/**\n * Horizontal Bar Chart styles\n * {@docCategory HorizontalBarChart}\n */\nexport interface IHorizontalBarChartStyles {\n  /**\n   * Styling for the root container\n   */\n  root: IStyle;\n\n  /**\n   * Styling for each item in the container\n   */\n  items: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style for the bars.\n   */\n  barWrapper: IStyle;\n\n  /**\n   * Style for left side text of the chart title\n   */\n  chartTitleLeft: IStyle;\n\n  /**\n   * Style for right side text of the chart title\n   */\n  chartTitleRight: IStyle;\n\n  /**\n   * Style for the chart data text denominator.\n   */\n  chartDataTextDenominator: IStyle;\n\n  /**\n   * Style for the benchmark container\n   */\n  benchmarkContainer: IStyle;\n\n  /**\n   * Style for the benchmark triangle\n   */\n  triangle: IStyle;\n\n  /**\n   * Style for the bar labels\n   */\n  barLabel: IStyle;\n\n  /**\n   * Style for the div containing the chart\n   */\n  chartWrapper: IStyle;\n}\n\n/**\n * Chart data mode for chart data text\n * default: show the datapoint.x value\n * fraction: show the fraction of datapoint.x/datapoint.y\n * percentage: show the percentage of (datapoint.x/datapoint.y)%\n * {@docCategory HorizontalBarChart}\n */\nexport type ChartDataMode = 'default' | 'fraction' | 'percentage';\n\n/**\n * {@docCategory HorizontalBarChart}\n */\nexport enum HorizontalBarChartVariant {\n  PartToWhole = 'part-to-whole',\n  AbsoluteScale = 'absolute-scale',\n}\n"]}

package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.d.ts

@@ -2,7 +2,7 @@ import { IStyle } from '@fluentui/react/lib/Styling';
 import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { ICartesianChartProps, ICartesianChartStyleProps, ICartesianChartStyles, IHorizontalBarChartWithAxisDataPoint } from '../../index';
 /**
- * IHorizontalBarChartWithAxisProps for HorizontalBarchartWithAxis component.
+ * Horizontal Bar Chart with Axis properties
  * {@docCategory HorizontalBarChartWithAxis}
  */
 export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps {
@@ -55,12 +55,20 @@ export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps {
      *Used for showing complete y axis lables   */
     showYAxisLables?: boolean;
 }
+/**
+ * Horizontal Bar Chart with Axis style properties
+ * {@docCategory HorizontalBarChartWithAxis}
+ */
 export interface IHorizontalBarChartWithAxisStyleProps extends ICartesianChartStyleProps {
     /**
      * color of the datapoint legend
      */
     legendColor?: string;
 }
+/**
+ * Horizontal Bar Chart with Axis styles
+ * {@docCategory HorizontalBarChartWithAxis}
+ */
 export interface IHorizontalBarChartWithAxisStyles extends ICartesianChartStyles {
     /**
      * Style for the chart label.

package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalBarChartWithAxis.types.js","sourceRoot":"../src/","sources":["components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IHorizontalBarChartWithAxisDataPoint,\n} from '../../index';\n\n/**\n * IHorizontalBarChartWithAxisProps for HorizontalBarchartWithAxis component.\n * {@docCategory HorizontalBarChartWithAxis}\n */\nexport interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IHorizontalBarChartWithAxisDataPoint[];\n\n  /**\n   * Define a custom callout renderer for a data point.\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IHorizontalBarChartWithAxisDataPoint>;\n\n  /**\n   * Width of each bar in the chart.\n   */\n  barHeight?: number;\n\n  /**\n   * Colors from which to select the color of each bar.\n   */\n  colors?: string[];\n\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * This prop makes sure that all the bars are of same color.\n   * it will take the first color from the array of colors in\n   * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight\n   * @default false\n   */\n  useSingleColor?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHorizontalBarChartWithAxisStyleProps, IHorizontalBarChartWithAxisStyles>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n}\n\nexport interface IHorizontalBarChartWithAxisStyleProps extends ICartesianChartStyleProps {\n  /**\n   * color of the datapoint legend\n   */\n  legendColor?: string;\n}\n\nexport interface IHorizontalBarChartWithAxisStyles extends ICartesianChartStyles {\n  /**\n   * Style for the chart label.\n   *\n   */\n  chartLabel?: IStyle;\n\n  /**\n   * Style for the line representing the domain of the x-axis.\n   *\n   */\n  xAxisDomain?: IStyle;\n\n  /**\n   * Style for the lines representing the ticks along the x-axis.\n   *\n   */\n  xAxisTicks?: IStyle;\n\n  /**\n   * Style for the text labeling each tick along the x-axis.\n   *\n   */\n  xAxisText?: IStyle;\n\n  /**\n   * Style for the line representing the domain of the y-axis.\n   *\n   */\n  yAxisDomain?: IStyle;\n\n  /**\n   * Style for the lines representing the ticks along the y-axis.\n   *\n   */\n  yAxisTicks?: IStyle;\n\n  /**\n   * Style for the text labeling each tick along the y-axis.\n   *\n   */\n  yAxisText?: 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"]}
+{"version":3,"file":"HorizontalBarChartWithAxis.types.js","sourceRoot":"../src/","sources":["components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IHorizontalBarChartWithAxisDataPoint,\n} from '../../index';\n\n/**\n * Horizontal Bar Chart with Axis properties\n * {@docCategory HorizontalBarChartWithAxis}\n */\nexport interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IHorizontalBarChartWithAxisDataPoint[];\n\n  /**\n   * Define a custom callout renderer for a data point.\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IHorizontalBarChartWithAxisDataPoint>;\n\n  /**\n   * Width of each bar in the chart.\n   */\n  barHeight?: number;\n\n  /**\n   * Colors from which to select the color of each bar.\n   */\n  colors?: string[];\n\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * This prop makes sure that all the bars are of same color.\n   * it will take the first color from the array of colors in\n   * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight\n   * @default false\n   */\n  useSingleColor?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHorizontalBarChartWithAxisStyleProps, IHorizontalBarChartWithAxisStyles>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n}\n\n/**\n * Horizontal Bar Chart with Axis style properties\n * {@docCategory HorizontalBarChartWithAxis}\n */\nexport interface IHorizontalBarChartWithAxisStyleProps extends ICartesianChartStyleProps {\n  /**\n   * color of the datapoint legend\n   */\n  legendColor?: string;\n}\n\n/**\n * Horizontal Bar Chart with Axis styles\n * {@docCategory HorizontalBarChartWithAxis}\n */\nexport interface IHorizontalBarChartWithAxisStyles extends ICartesianChartStyles {\n  /**\n   * Style for the chart label.\n   *\n   */\n  chartLabel?: IStyle;\n\n  /**\n   * Style for the line representing the domain of the x-axis.\n   *\n   */\n  xAxisDomain?: IStyle;\n\n  /**\n   * Style for the lines representing the ticks along the x-axis.\n   *\n   */\n  xAxisTicks?: IStyle;\n\n  /**\n   * Style for the text labeling each tick along the x-axis.\n   *\n   */\n  xAxisText?: IStyle;\n\n  /**\n   * Style for the line representing the domain of the y-axis.\n   *\n   */\n  yAxisDomain?: IStyle;\n\n  /**\n   * Style for the lines representing the ticks along the y-axis.\n   *\n   */\n  yAxisTicks?: IStyle;\n\n  /**\n   * Style for the text labeling each tick along the y-axis.\n   *\n   */\n  yAxisText?: 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"]}

package/lib-commonjs/components/Legends/Legends.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ILegendsProps } from './Legends.types';
 /**
- * Legends component.
+ * Legends component
  * {@docCategory Legends}
  */
 export declare const Legends: React.FunctionComponent<ILegendsProps>;

package/lib-commonjs/components/Legends/Legends.js

@@ -5,7 +5,7 @@ var Utilities_1 = require("@fluentui/react/lib/Utilities");
 var Legends_base_1 = require("./Legends.base");
 var Legends_styles_1 = require("./Legends.styles");
 /**
- * Legends component.
+ * Legends component
  * {@docCategory Legends}
  */
 exports.Legends = (0, Utilities_1.styled)(Legends_base_1.LegendsBase, Legends_styles_1.getStyles);

package/lib-commonjs/components/Legends/Legends.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legends.js","sourceRoot":"../src/","sources":["components/Legends/Legends.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,+CAA6C;AAC7C,mDAA6C;AAE7C;;;GAGG;AACU,QAAA,OAAO,GAA2C,IAAA,kBAAM,EACnE,0BAAW,EACX,0BAAS,CACV,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ILegendsProps, ILegendStyleProps, ILegendsStyles } from './Legends.types';\nimport { LegendsBase } from './Legends.base';\nimport { getStyles } from './Legends.styles';\n\n/**\n * Legends component.\n * {@docCategory Legends}\n */\nexport const Legends: React.FunctionComponent<ILegendsProps> = styled<ILegendsProps, ILegendStyleProps, ILegendsStyles>(\n  LegendsBase,\n  getStyles,\n);\n"]}
+{"version":3,"file":"Legends.js","sourceRoot":"../src/","sources":["components/Legends/Legends.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,+CAA6C;AAC7C,mDAA6C;AAE7C;;;GAGG;AACU,QAAA,OAAO,GAA2C,IAAA,kBAAM,EACnE,0BAAW,EACX,0BAAS,CACV,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ILegendsProps, ILegendStyleProps, ILegendsStyles } from './Legends.types';\nimport { LegendsBase } from './Legends.base';\nimport { getStyles } from './Legends.styles';\n\n/**\n * Legends component\n * {@docCategory Legends}\n */\nexport const Legends: React.FunctionComponent<ILegendsProps> = styled<ILegendsProps, ILegendStyleProps, ILegendsStyles>(\n  LegendsBase,\n  getStyles,\n);\n"]}

package/lib-commonjs/components/Legends/Legends.types.d.ts

@@ -5,18 +5,12 @@ import { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/Hove
 import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
 import { IFocusZoneProps } from '@fluentui/react-focus';
 import { CustomPoints, Points } from '../../utilities/utilities';
-/**
- * @public
- * ILegendOverflowData interface.
- * {@docCategory Legends}
- */
 export interface ILegendOverflowData {
     primary: ILegend[];
     overflow?: ILegend[];
 }
 /**
  * @public
- * ILegendSubComponentStyles interface.
  * {@docCategory Legends}
  */
 export interface ILegendSubComponentStyles {
@@ -24,7 +18,7 @@ export interface ILegendSubComponentStyles {
 }
 /**
  * @public
- * ILegendsStyles interface.
+ * Legends styles
  * {@docCategory Legends}
  */
 export interface ILegendsStyles {
@@ -71,7 +65,7 @@ export interface ILegendsStyles {
 }
 /**
  * @public
- * ILegendsStyles interface.
+ * ILegend interface
  * {@docCategory Legends}
  */
 export interface ILegend {
@@ -113,6 +107,11 @@ export interface ILegend {
     isLineLegendInBarChart?: boolean;
     nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
+/**
+ * @public
+ * Legend style properties
+ * {@docCategory Legends}
+ */
 export interface ILegendStyleProps {
     theme?: ITheme;
     className?: string;
@@ -123,6 +122,11 @@ export interface ILegendStyleProps {
     stripePattern?: boolean;
     isLineLegendInBarChart?: boolean;
 }
+/**
+ * @public
+ * Legend properties
+ * {@docCategory Legends}
+ */
 export interface ILegendsProps {
     /**
      * Prop that takes list of legends
@@ -182,8 +186,10 @@ export interface ILegendsProps {
     onLegendHoverCardLeave?: VoidFunction;
 }
 /**
+ * @public
  * The shape for the legend
  * default: show the rect legend
  * triangle: show the triangle legend
+ * {@docCategory Legends}
  */
 export declare type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;

package/lib-commonjs/components/Legends/Legends.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\n/**\n * @public\n * ILegendOverflowData interface.\n * {@docCategory Legends}\n */\nexport interface ILegendOverflowData {\n  primary: ILegend[];\n\n  overflow?: ILegend[];\n}\n\n/**\n * @public\n * ILegendSubComponentStyles interface.\n * {@docCategory Legends}\n */\nexport interface ILegendSubComponentStyles {\n  hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/**\n * @public\n * ILegendsStyles interface.\n * {@docCategory Legends}\n */\nexport interface ILegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root: IStyle;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend: IStyle;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect: IStyle;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape: IStyle;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle: IStyle;\n\n  /**\n   * Style for the legend text\n   */\n  text: IStyle;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange: IStyle;\n\n  /**\n   * Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n   */\n  overflowIndicationTextStyle: IStyle;\n\n  /**\n   * Style for the overflow container\n   */\n  hoverCardRoot: IStyle;\n\n  /**\n   * sub component styles\n   */\n  subComponentStyles: ILegendSubComponentStyles;\n}\n\n/**\n * @public\n * ILegendsStyles interface.\n * {@docCategory Legends}\n */\nexport interface ILegend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\nexport interface ILegendStyleProps {\n  theme?: ITheme;\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\nexport interface ILegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: ILegend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\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  enabledWrapLines?: boolean;\n\n  /**\n   * props for the overflow set component\n   */\n  overflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * focus zone props in hover card\n   */\n  focusZonePropsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * Prop that takes the active legend\n   */\n  selectedLegend?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Defines the function that is executed upon hiding of hover card\n   * make sure to send prop  when  the prop  is canSelectMultipleLegends is set to ture\n   * and empty the selecetd state legends\n   */\n  onLegendHoverCardLeave?: VoidFunction;\n}\n\n/**\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n"]}
+{"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n  primary: ILegend[];\n\n  overflow?: ILegend[];\n}\n\n/**\n * @public\n * {@docCategory Legends}\n */\nexport interface ILegendSubComponentStyles {\n  hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/**\n * @public\n * Legends styles\n * {@docCategory Legends}\n */\nexport interface ILegendsStyles {\n  /**\n   * Style set for the root of the legend component\n   */\n  root: IStyle;\n\n  /**\n   * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n   */\n  legend: IStyle;\n\n  /**\n   * Style set for the rectangle that represents a legend\n   */\n  rect: IStyle;\n\n  /**\n   * styles set for the shape that represents a legend\n   */\n  shape: IStyle;\n\n  /**\n   * Style set for the triangle that represents a legend\n   */\n  triangle: IStyle;\n\n  /**\n   * Style for the legend text\n   */\n  text: IStyle;\n\n  /**\n   * Style for the legend text\n   */\n  hoverChange: IStyle;\n\n  /**\n   * Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n   */\n  overflowIndicationTextStyle: IStyle;\n\n  /**\n   * Style for the overflow container\n   */\n  hoverCardRoot: IStyle;\n\n  /**\n   * sub component styles\n   */\n  subComponentStyles: ILegendSubComponentStyles;\n}\n\n/**\n * @public\n * ILegend interface\n * {@docCategory Legends}\n */\nexport interface ILegend {\n  /**\n   * Defines the title of the legend\n   */\n  title: string;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  action?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverAction?: VoidFunction;\n\n  /**\n   * Defines the function that is executed upon moving the mouse away from the legend\n   */\n  onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n  /**\n   * The color for the legend\n   */\n  color: string;\n\n  /**\n   * The opacity of the legend color\n   */\n  opacity?: number;\n\n  /**\n   * The shape for the legend\n   */\n  shape?: LegendShape;\n\n  /**\n   * Indicated whether or not to apply stripe pattern\n   */\n  stripePattern?: boolean;\n\n  /**\n   * Indicates if the legend belongs to a line in the Bar Chart\n   */\n  isLineLegendInBarChart?: boolean;\n\n  /*\n   *  native button props for the legend button\n   */\n  nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * @public\n * Legend style properties\n * {@docCategory Legends}\n */\nexport interface ILegendStyleProps {\n  theme?: ITheme;\n  className?: string;\n  colorOnSelectedState?: string;\n  borderColor?: string;\n  opacity?: number;\n  overflow?: boolean;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\n/**\n * @public\n * Legend properties\n * {@docCategory Legends}\n */\nexport interface ILegendsProps {\n  /**\n   * Prop that takes list of legends\n   */\n  legends: ILegend[];\n\n  /**\n   * Additional CSS class(es) to apply to the legneds component.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\n\n  /**\n   * This prop makes the legends component align itself to the center in the container it is sitting in\n   */\n  centerLegends?: boolean;\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  enabledWrapLines?: boolean;\n\n  /**\n   * props for the overflow set component\n   */\n  overflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * focus zone props in hover card\n   */\n  focusZonePropsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * text for overflow legends string\n   */\n  overflowText?: string;\n\n  /**\n   * Prop that takes the active legend\n   */\n  selectedLegend?: string;\n\n  /**\n   * prop that decides if legends are focusable\n   * @default true\n   */\n  allowFocusOnLegends?: boolean;\n\n  /**\n   * prop that decide if we can select multiple legends or single legend at a time\n   * @default false\n   */\n  canSelectMultipleLegends?: boolean;\n\n  /**\n   * Defines the function that is executed upon hiding of hover card\n   * make sure to send prop  when  the prop  is canSelectMultipleLegends is set to ture\n   * and empty the selecetd state legends\n   */\n  onLegendHoverCardLeave?: VoidFunction;\n}\n\n/**\n * @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n"]}

package/lib-commonjs/components/LineChart/LineChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ILineChartProps } from './LineChart.types';
 /**
- * Linechart component.
+ * Linechart component
  * {@docCategory LineChart}
  */
 export declare const LineChart: React.FunctionComponent<ILineChartProps>;

package/lib-commonjs/components/LineChart/LineChart.js

@@ -6,7 +6,7 @@ var LineChart_base_1 = require("./LineChart.base");
 var LineChart_styles_1 = require("./LineChart.styles");
 // Create a LineChart variant which uses these default styles and this styled subcomponent.
 /**
- * Linechart component.
+ * Linechart component
  * {@docCategory LineChart}
  */
 exports.LineChart = (0, Utilities_1.styled)(LineChart_base_1.LineChartBase, LineChart_styles_1.getStyles);

package/lib-commonjs/components/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,mDAAiD;AACjD,uDAA+C;AAE/C,2FAA2F;AAC3F;;;GAGG;AACU,QAAA,SAAS,GAA6C,IAAA,kBAAM,EAIvE,8BAAa,EAAE,4BAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ILineChartProps, ILineChartStyleProps, ILineChartStyles } from './LineChart.types';\nimport { LineChartBase } from './LineChart.base';\nimport { getStyles } from './LineChart.styles';\n\n// Create a LineChart variant which uses these default styles and this styled subcomponent.\n/**\n * Linechart component.\n * {@docCategory LineChart}\n */\nexport const LineChart: React.FunctionComponent<ILineChartProps> = styled<\n  ILineChartProps,\n  ILineChartStyleProps,\n  ILineChartStyles\n>(LineChartBase, getStyles);\n"]}
+{"version":3,"file":"LineChart.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,mDAAiD;AACjD,uDAA+C;AAE/C,2FAA2F;AAC3F;;;GAGG;AACU,QAAA,SAAS,GAA6C,IAAA,kBAAM,EAIvE,8BAAa,EAAE,4BAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ILineChartProps, ILineChartStyleProps, ILineChartStyles } from './LineChart.types';\nimport { LineChartBase } from './LineChart.base';\nimport { getStyles } from './LineChart.styles';\n\n// Create a LineChart variant which uses these default styles and this styled subcomponent.\n/**\n * Linechart component\n * {@docCategory LineChart}\n */\nexport const LineChart: React.FunctionComponent<ILineChartProps> = styled<\n  ILineChartProps,\n  ILineChartStyleProps,\n  ILineChartStyles\n>(LineChartBase, getStyles);\n"]}