new(annotation): add new Annotation components

[williaster]

🚀 Enhancements

This PR builds on required @visx/drag work (#902, #905) and adds several new components to @visx/annotation.

Why?

Previously we recommended using react-annotation which is the most fully featured annotation library out there. We would like to build in a solid annotation layer into the new @visx/xychart, and when evaluating react-annotation I was a little discouraged because its bundle size is relatively high (95kb minified) and it has no typings so I would have had to re-write the types anyway.

I think we can keep this package size down by avoiding use of d3-shape which adds 30kb, and doing some relatively simple math for the few shapes we need.

What

Example usage

<Annotation x={subjectX} y={subjectY} dx={labelDx} dy={labelDy}>
  <CircleSubject radius={...} />
  <Connector stroke={...} />
  <Label title={...} subtitle={...} width={...} />
</Annotation>

Several components are added which are inspired by the react-annotation API which has a concept of subject, connector, and label:

• Label the annotation label, takes title/subtitle and handles @visx/text rendering, styles, and wrap
• Connector the connector from an annotation Label to the annotation *Subject
  • has line and elbow types (latter shown above)
• Subjects
  • CircleSubject to annotate a single point (shown above)
  • LineSubject to annotate a threshold (vertical or horizontal line)

In addition to these component parts there are two higher-level components

• Annotation simply takes x/y/dx/dy as props and provides them in context for consumption by child subject, connector, and label components
• EditableAnnotation wraps Annotation and allows draggable editing of an Annotations position (subject + label)

Future work

• add /annotation demo to @visx/demo (sneak peek above 👀 ) + update /docs/annotation page
• future functionality
  • add RectSubject to annotate regions
  • add ability to resize CircleSubject
  • polish Connector to account for a Subjects fill region (above you can see that the connector line spills into the circle subject's radius, ideally it is aware of the subject region and doesn't enter it)

@kristw @hshoff

[coveralls]

Pull Request Test Coverage Report for Build 348377735

• 4 of 70 (5.71%) changed or added relevant lines in 7 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-2.7%) to 57.973%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/visx-annotation/src/components/CircleSubject.tsx	0	2	0.0%
packages/visx-annotation/src/components/LineSubject.tsx	0	3	0.0%
packages/visx-annotation/src/components/EditableAnnotation.tsx	1	17	5.88%
packages/visx-annotation/src/components/Connector.tsx	0	18	0.0%
packages/visx-annotation/src/components/Label.tsx	1	28	3.57%

Totals
Change from base Build 348269058:	-2.7%
Covered Lines:	1576
Relevant Lines:	2533

---

💛 - Coveralls

[williaster]

I'll add better tests in a separate PR since coverage ⬇️