[Rect Anno] Support outside range fill

[nickofthyme]

Is your feature request related to a problem? Please describe.

Currently RectAnnotations only support filling the inside of a data range. This issue proposes adding the ability to fill outside of a defined data range.

Describe the solution you'd like

Possibly add create a new fill property for inside and outside options.

We should be mindful of the existing outside and outsideDimension properties to not create confusion, may be necessary to refactor these to be more clear between the duplicate use of outside.

export type RectAnnotationSpec = BaseAnnotationSpec<
  typeof AnnotationType.Rectangle,
  RectAnnotationDatum,
  RectAnnotationStyle
> & {
  /**
   * @deprecated use customTooltipDetails
   */
  renderTooltip?: AnnotationTooltipFormatter;
  /**
   * z-index of the annotation relative to other elements in the chart
   * @defaultValue -1
   */
  zIndex?: number;
  /**
   * Renders annotation outside of chart area within axis gutter
   *
   * @defaultValue false
   */
  outside?: boolean;
  /**
   * Dimension, either height or width, of outside annotation
   */
  outsideDimension?: number;
};

Additional context

Related to #1200

Kibana Cross Issues

elastic/kibana#133784

[markov00]

I don't believe too much into having this as a feature of elastic-charts, excluding a range can be achieved by adding 2 ranges in the 2 outside areas. Having this in elastic-charts will be just a "simplification" for the current existing API.

In any case we should probably call it differently than outside/inside, something like include/exclude the range could work (where include is the area within the range, and exclude is the area outside the range)

[nickofthyme]

Agreed, since both lower and upper bounds of the annotations default to +♾️ /-♾️ , this is an easy task for the consumer to implement. See https://codesandbox.io/s/pedantic-moon-bphvql?file=/src/App.tsx

 <RectAnnotation
   ...
   dataValues={[
     {
       coordinates: {
+        x1: 4,
-        x0: 4,
-        x1: 5,
       },
+      details: 'outside left',
-      details: 'inside',
     },
+    {
+      coordinates: {
+        x0: 5,
+      },
+      details: 'outside right',
+    },
   ]}
 />