@fluentui/react-charting 5.18.8 → 5.18.10

package/lib-commonjs/types/IDataPoint.d.ts

@@ -30,6 +30,9 @@ export interface IRefArrayData {
     index?: string;
     refElement?: SVGGElement;
 }
+/**
+ * {@docCategory IChartProps}
+ */
 export interface IMargins {
     /**
      * left margin for the chart.
@@ -48,6 +51,9 @@ export interface IMargins {
      */
     bottom?: number;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IDataPoint {
     /**
      * Independent value of the data point, rendered along the x-axis.
@@ -64,6 +70,9 @@ export interface IDataPoint {
      */
     onClick?: VoidFunction;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IHorizontalDataPoint {
     /**
      * Independent value of the data point, rendered along the x-axis.
@@ -76,6 +85,9 @@ export interface IHorizontalDataPoint {
      */
     y: number;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IChartDataPoint {
     /**
      * Legend text for the datapoint in the chart
@@ -116,6 +128,9 @@ export interface IChartDataPoint {
      */
     callOutAccessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IVerticalBarChartDataPoint {
     /**
      * Independent value of the data point, rendered along the x-axis.
@@ -158,6 +173,9 @@ export interface IVerticalBarChartDataPoint {
      */
     callOutAccessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IHorizontalBarChartWithAxisDataPoint {
     /**
      * Dependent value of the data point, rendered along the x-axis.
@@ -196,6 +214,9 @@ export interface IHorizontalBarChartWithAxisDataPoint {
      */
     callOutAccessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface ILineDataInVerticalBarChart {
     y: IVerticalBarChartDataPoint['y'];
     yAxisCalloutData?: string | undefined;
@@ -209,6 +230,9 @@ export interface ILineDataInVerticalBarChart {
      */
     useSecondaryYScale?: boolean;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface ILineChartDataPoint {
     /**
      * Independent value of the data point, rendered along the x-axis.
@@ -247,6 +271,9 @@ export interface ILineChartDataPoint {
      */
     xAxisCalloutAccessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface ILineChartGap {
     /**
      * Starting index of the gap.
@@ -257,6 +284,9 @@ export interface ILineChartGap {
      */
     endIndex: number;
 }
+/**
+ * {@docCategory IChartProps}
+ */
 export interface ILineChartLineOptions extends SVGProps<SVGPathElement> {
     /**
      * Width of the line/stroke.
@@ -289,6 +319,9 @@ export interface ILineChartLineOptions extends SVGProps<SVGPathElement> {
      */
     lineBorderColor?: string;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface ILineChartPoints {
     /**
      * Legend text for the datapoint in the chart
@@ -332,6 +365,9 @@ export interface ILineChartPoints {
      */
     onLineClick?: () => void;
 }
+/**
+ * {@docCategory IChartProps}
+ */
 export interface IChartProps {
     /**
      * chart title for the chart
@@ -366,6 +402,9 @@ export interface IChartProps {
      */
     pointLineOptions?: SVGProps<SVGLineElement>;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface ISankeyChartData {
     nodes: SNode[];
     links: SLink[];
@@ -386,6 +425,9 @@ interface ISLinkExtra {
 }
 export declare type SNode = d3Sankey.SankeyNode<ISNodeExtra, ISLinkExtra>;
 export declare type SLink = d3Sankey.SankeyLink<ISNodeExtra, ISLinkExtra>;
+/**
+ * {@docCategory IChartProps}
+ */
 export interface IAccessibilityProps {
     /**
      * Accessibility aria-label
@@ -400,6 +442,9 @@ export interface IAccessibilityProps {
      */
     ariaDescribedBy?: string;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IVSChartDataPoint {
     /**
      * data the datapoint in the chart
@@ -428,6 +473,9 @@ export interface IVSChartDataPoint {
      */
     callOutAccessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory IChartProps}
+ */
 export interface IVerticalStackedChartProps {
     /**
      * data for the points in the chart
@@ -451,6 +499,9 @@ export interface IVerticalStackedChartProps {
      */
     stackCallOutAccessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface ILineDataInVerticalStackedBarChart {
     y: number;
     color: string;
@@ -466,6 +517,9 @@ export interface ILineDataInVerticalStackedBarChart {
      */
     useSecondaryYScale?: boolean;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IGVBarChartSeriesPoint {
     /**
      * Text for // need to check use of this
@@ -502,6 +556,9 @@ export interface IGVBarChartSeriesPoint {
      */
     callOutAccessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IGroupedVerticalBarChartData {
     /**
      * Data for X axis label
@@ -537,6 +594,9 @@ export interface IGVForBarChart {
      */
     [key: string]: IGVBarChartSeriesPoint;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IHeatMapChartDataPoint {
     x: string | Date | number;
     y: string | Date | number;
@@ -562,6 +622,9 @@ export interface IHeatMapChartDataPoint {
      */
     callOutAccessibilityData?: IAccessibilityProps;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface IHeatMapChartData {
     /**
      * name of the legend
@@ -573,6 +636,9 @@ export interface IHeatMapChartData {
      */
     value: number;
 }
+/**
+ * {@docCategory IChartData}
+ */
 export interface ICustomizedCalloutDataPoint {
     legend: string;
     y: number;
@@ -585,6 +651,7 @@ export interface ICustomizedCalloutDataPoint {
 /**
  * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,
  * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.
+ * {@docCategory IChartData}
  */
 export interface ICustomizedCalloutData {
     x: number | string | Date;

package/lib-commonjs/types/IDataPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import { SVGProps } from 'react';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport * as d3Sankey from 'd3-sankey';\nexport interface IBasestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\nexport interface IMargins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\nexport interface IDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\nexport interface IHorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\nexport interface IChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: IHorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IVerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: ILineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IHorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface ILineDataInVerticalBarChart {\n  y: IVerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\nexport interface ILineChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface ILineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\nexport interface ILineChartLineOptions extends SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n}\n\nexport interface ILineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: ILineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n}\n\nexport interface IChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: IAccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: IChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: ILineChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  SankeyChartData?: ISankeyChartData;\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: SVGProps<SVGLineElement>;\n}\n\nexport interface ISankeyChartData {\n  nodes: SNode[];\n  links: SLink[];\n}\n\ninterface ISNodeExtra {\n  nodeId: number | string;\n  name: string;\n  color?: string;\n  borderColor?: string;\n  actualValue?: number;\n  layer?: number;\n}\n\ninterface ISLinkExtra {\n  source: number;\n  target: number;\n  value: number;\n  unnormalizedValue?: number;\n}\n\nexport type SNode = d3Sankey.SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = d3Sankey.SankeyLink<ISNodeExtra, ISLinkExtra>;\n\nexport interface IAccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\nexport interface IVSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IVerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: IVSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: ILineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface ILineDataInVerticalStackedBarChart {\n  y: number;\n  color: string;\n  legend: string;\n  /**\n   * Data to show in callout\n   */\n  data?: number;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\nexport interface IGVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color: string;\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: IGVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: IGVBarChartSeriesPoint;\n}\n\nexport interface IHeatMapChartDataPoint {\n  x: string | Date | number;\n  y: string | Date | number;\n  value: number;\n  /**\n   * The value/ text to be rendered in the rectange\n   */\n  rectText?: string | number;\n  /**\n   * denomination to show in the callout\n   */\n  ratio?: [number, number];\n  /**\n   * description message to the callout\n   */\n  descriptionMessage?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IHeatMapChartData {\n  /**\n   * name of the legend\n   */\n  legend: string;\n  data: IHeatMapChartDataPoint[];\n  /**\n   * This  number will be used to get the color for the legend\n   */\n  value: number;\n}\n\nexport interface ICustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n */\nexport interface ICustomizedCalloutData {\n  x: number | string | Date;\n  values: ICustomizedCalloutDataPoint[];\n}\n"]}
+{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import { SVGProps } from 'react';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport * as d3Sankey from 'd3-sankey';\nexport interface IBasestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: IHorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: ILineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n  y: IVerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: ILineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: IAccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: IChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: ILineChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  SankeyChartData?: ISankeyChartData;\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n  nodes: SNode[];\n  links: SLink[];\n}\n\ninterface ISNodeExtra {\n  nodeId: number | string;\n  name: string;\n  color?: string;\n  borderColor?: string;\n  actualValue?: number;\n  layer?: number;\n}\n\ninterface ISLinkExtra {\n  source: number;\n  target: number;\n  value: number;\n  unnormalizedValue?: number;\n}\n\nexport type SNode = d3Sankey.SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = d3Sankey.SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: IVSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: ILineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n  y: number;\n  color: string;\n  legend: string;\n  /**\n   * Data to show in callout\n   */\n  data?: number;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color: string;\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: IGVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n  x: string | Date | number;\n  y: string | Date | number;\n  value: number;\n  /**\n   * The value/ text to be rendered in the rectange\n   */\n  rectText?: string | number;\n  /**\n   * denomination to show in the callout\n   */\n  ratio?: [number, number];\n  /**\n   * description message to the callout\n   */\n  descriptionMessage?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n  /**\n   * name of the legend\n   */\n  legend: string;\n  data: IHeatMapChartDataPoint[];\n  /**\n   * This  number will be used to get the color for the legend\n   */\n  value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n  x: number | string | Date;\n  values: ICustomizedCalloutDataPoint[];\n}\n"]}

package/lib-commonjs/version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = require("@fluentui/set-version");
-(0, set_version_1.setVersion)('@fluentui/react-charting', '5.18.8');
+(0, set_version_1.setVersion)('@fluentui/react-charting', '5.18.10');
 //# sourceMappingURL=version.js.map

package/lib-commonjs/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.18.8');"]}
+{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.18.10');"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.18.8",
+  "version": "5.18.10",
   "description": "Experimental React charting components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -38,8 +38,8 @@
     "jest-canvas-mock": "2.4.0"
   },
   "dependencies": {
-    "@fluentui/react-focus": "^8.8.32",
-    "@fluentui/theme-samples": "^8.7.117",
+    "@fluentui/react-focus": "^8.8.33",
+    "@fluentui/theme-samples": "^8.7.118",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/d3-array": "1.2.1",
     "@types/d3-axis": "1.0.10",
@@ -51,7 +51,7 @@
     "@types/d3-shape": "3.1.1",
     "@types/d3-time-format": "^2.1.0",
     "@types/d3-time": "^1.1.0",
-    "@fluentui/set-version": "^8.2.11",
+    "@fluentui/set-version": "^8.2.12",
     "d3-array": "1.2.1",
     "d3-axis": "1.0.8",
     "d3-format": "^1.4.4",
@@ -65,7 +65,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.112.3",
+    "@fluentui/react": "^8.112.4",
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0",

package/src/components/AreaChart/AreaChart.types.ts

@@ -18,7 +18,7 @@ import {
 export type { IChildProps, IRefArrayData, IBasestate, ILineChartDataPoint, ILineChartPoints, IMargins };
 
 /**
- * IAreaChartProps properties for area chart.
+ * Area Chart properties.
  * {@docCategory AreaChart}
  */
 export interface IAreaChartProps extends ICartesianChartProps {
@@ -66,6 +66,14 @@ export interface IAreaChartProps extends ICartesianChartProps {
   optimizeLargeData?: boolean;
 }
 
+/**
+ * Area Chart styles
+ * {@docCategory AreaChart}
+ */
 export interface IAreaChartStyles extends ICartesianChartStyles {}
 
+/**
+ * Area Chart style properties
+ * {@docCategory AreaChart}
+ */
 export interface IAreaChartStyleProps extends ICartesianChartStyleProps {}

package/src/components/CommonComponents/CartesianChart.types.ts

@@ -9,6 +9,10 @@ import { IAccessibilityProps, IMargins } from '../../types/index';
 import { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';
 import * as d3TimeFormat from 'd3-time-format';
 
+/**
+ * Cartesian Chart style properties
+ * {@docCategory CartesianChart}
+ */
 export interface ICartesianChartStyleProps {
   /**
    * Theme (provided through customization.)
@@ -61,6 +65,10 @@ export interface ICartesianChartStyleProps {
   toDrawShape?: boolean;
 }
 
+/**
+ * Cartesian Chart styles
+ * {@docCategory CartesianChart}
+ */
 export interface ICartesianChartStyles {
   /**
    *  Style for the root element.
@@ -158,6 +166,10 @@ export interface ICartesianChartStyles {
   chartWrapper?: IStyle;
 }
 
+/**
+ * Cartesian Chart properties
+ * {@docCategory CartesianChart}
+ */
 export interface ICartesianChartProps {
   /**
    * Below height used for resizing of the chart

package/src/components/DonutChart/DonutChart.types.ts

@@ -7,7 +7,7 @@ import { IChartProps, IChartDataPoint } from './index';
 export interface IDonutChart {}
 
 /**
- * IDonutChartProps for Donutchart component.
+ * Donut Chart properties.
  * {@docCategory DonutChart}
  */
 export interface IDonutChartProps extends ICartesianChartProps {
@@ -59,8 +59,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/src/components/GaugeChart/GaugeChart.types.ts

@@ -5,7 +5,7 @@ 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 {
@@ -30,13 +30,16 @@ export interface IGaugeChartSegment {
   accessibilityData?: IAccessibilityProps;
 }
 
+/**
+ * {@docCategory GaugeChart}
+ */
 export enum GaugeValueFormat {
   Percentage = 'percentage',
   Fraction = 'fraction',
 }
 
 /**
- * IGaugeChartProps for Gaugechart component.
+ * Gauge Chart properties
  * {@docCategory GaugeChart}
  */
 export interface IGaugeChartProps {
@@ -136,6 +139,10 @@ export interface IGaugeChartProps {
   calloutProps?: Partial<ICalloutProps>;
 }
 
+/**
+ * Gauge Chart style properties
+ * {@docCategory GaugeChart}
+ */
 export interface IGaugeChartStyleProps {
   /**
    * Theme (provided through customization)
@@ -173,6 +180,10 @@ export interface IGaugeChartStyleProps {
   toDrawShape?: boolean;
 }
 
+/**
+ * Gauge Chart styles
+ * {@docCategory GaugeChart}
+ */
 export interface IGaugeChartStyles {
   /**
    * Styles for the root element

package/src/components/HeatMapChart/HeatMapChart.types.ts

@@ -10,7 +10,7 @@ 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'>> {
@@ -109,7 +109,17 @@ 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/src/components/HorizontalBarChart/HorizontalBarChart.types.ts

@@ -4,7 +4,7 @@ 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 {
@@ -94,6 +94,10 @@ export interface IHorizontalBarChartProps {
   hideLabels?: boolean;
 }
 
+/**
+ * Horizontal Bar Chart style properties
+ * {@docCategory HorizontalBarChart}
+ */
 export interface IHorizontalBarChartStyleProps {
   /**
    * Theme (provided through customization.)
@@ -137,6 +141,10 @@ export interface IHorizontalBarChartStyleProps {
   hideLabels?: boolean;
 }
 
+/**
+ * Horizontal Bar Chart styles
+ * {@docCategory HorizontalBarChart}
+ */
 export interface IHorizontalBarChartStyles {
   /**
    * Styling for the root container
@@ -204,9 +212,13 @@ 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 type ChartDataMode = 'default' | 'fraction' | 'percentage';
 
+/**
+ * {@docCategory HorizontalBarChart}
+ */
 export enum HorizontalBarChartVariant {
   PartToWhole = 'part-to-whole',
   AbsoluteScale = 'absolute-scale',

package/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts

@@ -8,7 +8,7 @@ import {
 } from '../../index';
 
 /**
- * IHorizontalBarChartWithAxisProps for HorizontalBarchartWithAxis component.
+ * Horizontal Bar Chart with Axis properties
  * {@docCategory HorizontalBarChartWithAxis}
  */
 export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps {
@@ -72,6 +72,10 @@ export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps {
   showYAxisLables?: boolean;
 }
 
+/**
+ * Horizontal Bar Chart with Axis style properties
+ * {@docCategory HorizontalBarChartWithAxis}
+ */
 export interface IHorizontalBarChartWithAxisStyleProps extends ICartesianChartStyleProps {
   /**
    * color of the datapoint legend
@@ -79,6 +83,10 @@ export interface IHorizontalBarChartWithAxisStyleProps extends ICartesianChartSt
   legendColor?: string;
 }
 
+/**
+ * Horizontal Bar Chart with Axis styles
+ * {@docCategory HorizontalBarChartWithAxis}
+ */
 export interface IHorizontalBarChartWithAxisStyles extends ICartesianChartStyles {
   /**
    * Style for the chart label.

package/src/components/Legends/Legends.types.ts

@@ -6,11 +6,6 @@ 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[];
 
@@ -19,7 +14,6 @@ export interface ILegendOverflowData {
 
 /**
  * @public
- * ILegendSubComponentStyles interface.
  * {@docCategory Legends}
  */
 export interface ILegendSubComponentStyles {
@@ -28,7 +22,7 @@ export interface ILegendSubComponentStyles {
 
 /**
  * @public
- * ILegendsStyles interface.
+ * Legends styles
  * {@docCategory Legends}
  */
 export interface ILegendsStyles {
@@ -85,7 +79,7 @@ export interface ILegendsStyles {
 
 /**
  * @public
- * ILegendsStyles interface.
+ * ILegend interface
  * {@docCategory Legends}
  */
 export interface ILegend {
@@ -140,6 +134,11 @@ export interface ILegend {
   nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
+/**
+ * @public
+ * Legend style properties
+ * {@docCategory Legends}
+ */
 export interface ILegendStyleProps {
   theme?: ITheme;
   className?: string;
@@ -151,6 +150,11 @@ export interface ILegendStyleProps {
   isLineLegendInBarChart?: boolean;
 }
 
+/**
+ * @public
+ * Legend properties
+ * {@docCategory Legends}
+ */
 export interface ILegendsProps {
   /**
    * Prop that takes list of legends
@@ -223,8 +227,10 @@ export interface ILegendsProps {
 }
 
 /**
+ * @public
  * The shape for the legend
  * default: show the rect legend
  * triangle: show the triangle legend
+ * {@docCategory Legends}
  */
 export type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;