Summary

close #105

This PR introduces the functionality to add a RectAnnotation spec which will draw a rectangular annotation in a chart. It also refactors the Annotation specs such that both LineAnnotationSpec and RectAnnotationSpec extend the same BaseAnnotationSpec for shared properties:

BaseAnnotationSpec specifies:

export interface BaseAnnotationSpec {
  /** The id of the annotation */
  annotationId: AnnotationId;
  /** Annotation type: line, rectangle, text */
  annotationType: AnnotationType;
  /** The ID of the axis group, generated via getGroupId method
   * @default __global__
   */
  groupId: GroupId; // defaults to __global__; needed for yDomain position
  /** Data values defined with coordinates and details */
  dataValues: AnnotationDatum[];
  /** Custom annotation style */
  style?: Partial<AnnotationStyle>;
  /** Toggles tooltip annotation visibility */
  hideTooltips?: boolean;
  /** z-index of the annotation relative to other elements in the chart
   * @default 0
   */
  zIndex?: number;
}

The RectAnnotationSpec is defined as follows:

export interface RectAnnotationSpec {
  annotationType: 'rectangle';
  /** Custom rendering function for tooltip */
  renderTooltip?: (
      position: { transform: string; top: number; left: number; }, 
      details?: string
    ) => JSX.Element;
  /** Data values defined with coordinates and details */
  dataValues: RectAnnotationDatum[];
  /** Custom annotation style */
  style?: Partial<RectAnnotationStyle>;
}

where each annotation dataValue (RectAnnotationDatum) has the shape:

export interface RectAnnotationDatum {
  coordinates: {
    x0?: any;
    x1?: any;
    y0?: any;
    y1?: any;
  };
  details?: string;
}

We validate & coerce the coordinate values such that if no valid coordinates are found, the annotation will be skipped & not render; so long as one of the coordinates is defined, we will draw the annotation by coercing the undefined coordinates to the chart extents such that:

The annotation may also be styled by passing a custom style, which allows customization of stroke, strokeWidth, opacity, and fill.

In the case where an annotation's hover tooltip is visible where there is also a chart element hover tooltip, precedence will go to the annotation tooltip unless the chart element hover has a specific element highlighted in which case the chart element tooltip will be visible instead. (This matches the behavior of the tooltip on the annotations in Discover)

Finally, we added a new prop zIndex which controls the relative z positioning of the annotations:

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios
• Each commit follows the convention