Component | Annotations: Introducing new component

[reb-dev]

Updated version of #299, #273

A new component that allows placing textual annotations on top of a visualization.

Here's an example of how annotations can be defined

const annotations: AnnotationItem[] = [
    {
      x: '50%',
      y: '98%',
      width: '50%',
      verticalAlign: 'bottom',
      content: [{
        text: 'Bitcoin Price Peaks from 2010 to 2023',
        fontSize: 28,
        fontWeight: 700,
        fontFamily: 'Helvetica',
        color: '#1C72E8',
      },
      {
        text: 'The chart illustrates the historical price peaks of Bitcoin from its inception in 2010 through 2023.',
        fontSize: 18,
        fontFamily: 'Helvetica',
        color: '#282C34',
        fontWeight: 400,
        lineHeight: 1.5,
        marginTop: 8,
      }],
    },
    {
      x: '2%',
      y: '25%',
      width: 100,
      content: 'First peak, June 2011',
      subject: {
        x: () => xScale(peak2011Datum[0]),
        y: () => yScale(peak2011Datum[1]),
        connectorLineStrokeDasharray: '2 2',
        radius: 6,
      },
    },
...