chore(charts): Annotate Victory types for example docs

Fixes patternfly#2139

Author: dlabrecq

packages/react-charts/src/components/Chart/Chart.tsx

@@ -32,8 +32,8 @@ export interface ChartProps extends VictoryChartProps {
    * The animate prop should also be used to specify enter and exit
    * transition configurations with the `onExit` and `onEnter` namespaces respectively.
    *
-   * @example
-   * {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
+   * @propType boolean | object
+   * @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
    */
   animate?: boolean | AnimatePropTypeInterface;
   /**
@@ -78,11 +78,15 @@ export interface ChartProps extends VictoryChartProps {
    */
   containerComponent?: React.ReactElement<any>;
   /**
-   * **This prop should not be set manually.**
+   * Note: This prop should not be set manually.
+   *
+   * @hide
    */
   defaultAxes?: AxesType;
   /**
-   * **This prop should not be set manually.**
+   * Note: This prop should not be set manually.
+   *
+   * @hide
    */
   defaultPolarAxes?: AxesType;
   /**
@@ -92,14 +96,22 @@ export interface ChartProps extends VictoryChartProps {
    * If this prop is not provided, a domain will be calculated from data, or other
    * available information.
    *
-   * @example [-1, 1], {x: [0, 100], y: [0, 1]}
+   * @propType number[] | { x: number[], y: number[] }
+   * @example [low, high], { x: [low, high], y: [low, high] }
+   *
+   * [-1, 1], {x: [0, 100], y: [0, 1]}
    */
   domain?: DomainPropType;
   /**
    * The domainPadding prop specifies a number of pixels of padding to add to the
    * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther
    * from the origin to prevent crowding. This prop should be given as an object with
    * numbers specified for x and y.
+   *
+   * @propType number | number[] | { x: number[], y: number[] }
+   * @example [left, right], { x: [left, right], y: [bottom, top] }
+   *
+   * {x: [10, -10], y: 5}
    */
   domainPadding?: DomainPaddingPropType;
   /**
@@ -112,6 +124,8 @@ export interface ChartProps extends VictoryChartProps {
   /**
    * Similar to data accessor props `x` and `y`, this prop may be used to functionally
    * assign eventKeys to data
+   *
+   * @propType number | string | Function
    */
   eventKey?: StringOrNumberOrCallback;
   /**
@@ -129,6 +143,7 @@ export interface ChartProps extends VictoryChartProps {
    * element (i.e. a single bar), and the object returned from the mutation function
    * will override the props of the selected element via object assignment.
    *
+   * @propType object[]
    * @example
    * events={[
    *   {
@@ -158,6 +173,8 @@ export interface ChartProps extends VictoryChartProps {
   events?: EventPropTypeInterface<string, string[] | number[] | string | number>[];
   /**
    * Chart uses the standard externalEventMutations prop.
+   *
+   * @propType object[]
    */
   externalEventMutations?: EventCallbackInterface<string | string[], StringOrNumberOrList>[];
   /**
@@ -183,6 +200,8 @@ export interface ChartProps extends VictoryChartProps {
   horizontal?: boolean;
   /**
    * When the innerRadius prop is set, polar charts will be hollow rather than circular.
+   *
+   * @propType number | Function
    */
   innerRadius?: number;
   /**
@@ -239,7 +258,7 @@ export interface ChartProps extends VictoryChartProps {
    * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to
    * the y axis.
    *
-   * examples:
+   * @example
    *
    * maxDomain={0}
    * maxDomain={{ y: 0 }}
@@ -254,7 +273,7 @@ export interface ChartProps extends VictoryChartProps {
    * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to
    * the y axis.
    *
-   * examples:
+   * @example
    *
    * minDomain={0}
    * minDomain={{ y: 0 }}
@@ -265,10 +284,14 @@ export interface ChartProps extends VictoryChartProps {
    * the edge of the chart and any rendered child components. This prop can be given
    * as a number or as an object with padding specified for top, bottom, left
    * and right.
+   *
+   * @propType number | { top: number, bottom: number, left: number, right: number }
    */
   padding?: PaddingProps;
   /**
-   * **This prop should not be set manually.**
+   * Note: This prop should not be set manually.
+   *
+   * @hide
    */
   prependDefaultAxes?: boolean;
   /**
@@ -283,7 +306,8 @@ export interface ChartProps extends VictoryChartProps {
    * chart must share the same range, so setting this prop on children nested within Chart, ChartStack, or
    * ChartGroup will have no effect. This prop is usually not set manually.
    *
-   * examples:
+   * @propType number[] | { x: number[], y: number[] }
+   * @example [low, high] | { x: [low, high], y: [low, high] }
    *
    * Cartesian: range={{ x: [50, 250], y: [50, 250] }}
    * Polar: range={{ x: [0, 360], y: [0, 250] }}
@@ -294,6 +318,7 @@ export interface ChartProps extends VictoryChartProps {
    * given as a string specifying a supported scale ("linear", "time", "log", "sqrt"),
    * as a d3 scale function, or as an object with scales specified for x and y
    *
+   * @propType string | { x: string, y: string }
    * @example d3Scale.time(), {x: "linear", y: "log"}
    */
   scale?:
@@ -306,7 +331,9 @@ export interface ChartProps extends VictoryChartProps {
   /**
    * The sharedEvents prop is used internally to coordinate events between components.
    *
-   * **This prop should not be set manually.**
+   * Note: This prop should not be set manually.
+   *
+   * @hide
    */
   sharedEvents?: { events: any[]; getEventState: Function };
   /**
@@ -321,7 +348,7 @@ export interface ChartProps extends VictoryChartProps {
    * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable
    * will corresponds to the y axis.
    *
-   * examples:
+   * @example
    *
    * singleQuadrantDomainPadding={false}
    * singleQuadrantDomainPadding={{ x: false }}
@@ -344,11 +371,16 @@ export interface ChartProps extends VictoryChartProps {
    * The style prop defines the style of the component. The style prop should be given as an object with styles defined
    * for data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified
    * via props as they determine relative layout for components in Chart.
+   *
+   * @propType { parent: object, background: object }
+   * @propType { parent: object, background: object }
    */
   style?: Pick<VictoryStyleInterface, 'parent'> & { background?: VictoryStyleObject };
   /**
    * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or
    * props defined in theme may be overwritten by props specified on the component instance.
+   *
+   * @propType object
    */
   theme?: ChartThemeDefinition;
   /**