Add annotations

[markov00]

Is your feature request related to a problem? Please describe.
We need to display annotations on charts like the current time marker, partial-data areas or other general annotations.

Describe the solution you'd like
Add the possibility to include vertical or horizontal lines or rectangles on the chart, specifying the base x or y value where the line will lie.

This can be split into 3 different tasks:

• add line annotation + tooltip + marker Add annotation line, tooltip, and marker #104
• add rectangle annotation + tooltip Add rectangular annotation & tooltip #105
• possibly add text annotation Add text annotation  #106

Describe alternatives you've considered
n/a

Additional context
n/a

Kibana Cross Issues
Add any Kibana related issues/feature requests here.

Checklist

• this request is checked against already exist requests
• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[markov00]

As a note, also the brush tool can be managed as a an annotation on the chart. We can split the events handling from the rendering part.

[emmacunningham]

Just wanted to get some feedback about how the user will configure annotations. I propose that we add a new spec Annotations that the user can use to define their annotations. When we read in the spec, we can pass the values into the chart renderer and the rendered Annotation layer will draw using the values provided. This would allow users to define both computed annotations (we can expose helpers to make it easy for the user to define things like "draw a line in the time series graph for every response_code===500") as well as more simple custom annotation ("draw a line at 200ms to show queries that are taking too long"). That is, while the user will be able to define annotations that are directly dependent on the data in the chart, they will also be able to define annotations that are independent of the data in the chart.

Here's a rough proposal of what the annotation configs might look like:

    const lineAnnotation = {
      type: 'x',
      position: 0,
      style: {
        color: 'black',
        strokeWidth: 2,
        // and more
      },
      marker: 'star',
      hoverText: 'this is some text', // this could be a component that the user defines instead of just text
    };

    const textAnnotation = {
      text: 'show this text',
      style: {
        color: 'black',
        fontSize: 23,
        // and more
      },
      origin: {
        x: 0,
        y: 0,
      },
    };

    const rectAnnotation = {
      position: {
        x: 0,
        y: 0,
        height: 20,
        width: 20,
      },
      style: {
        color: 'black',
        strokeWidth: 2,
        // and more
      },
    };

And then when defining the chart, you would add:

<Annotations line={[lineAnnotation]} text={[textAnnotation]} rect={[rectAnnotation]} />

[markov00]

@emmacunningham I think you are on the right track. I like the idea of helpers for data, specially because I maybe want to have an annotation on a specific series in a clustered bar chart and I know the X value, but not the position of the series on the cluster.
So the position value is a value on the data domain of the series right? like a timestamp. the width can be a bit more generic, like number | string | Array<number|string> because we can have also ordinal scales on x axis.

I see few other possibilities on the data structure:

1. we can have a single Component for each different type of annotation, like LineAnnotations with a prop for the annotation array and a global style, and in case each annotation can include their overriding style like interface LineAnnotation { ... style?: Style }
2. we can have a the <Annotations /> object with a globalStyles prop like:

interface GlobalStyles {
  line?: LineStyles;
  rect?: RectStyles; 
  text?: RectStyles;
}

we can also move the hoverText component out from the annotation object and have a global HoverTextComponent that takes as props an object and it knows how to render it something like:

    const lineAnnotation = {
      type: 'x',
      position: 0,
      marker: 'star',
      datum: { title: 'title', desc: 'desc'}
    };

   ...
   <Annotations
      lines={[lineAnnotation]}
      lineStyles={{
        color: 'black',
        strokeWidth: 2,
      }}
      hoverComponent={({title, desc}) => <div>{title} <br/>{desc}</div>}
    />

[markov00]

Closing this keeping only the remaining #106