feat(annotations): render line annotations via LineAnnotation spec

[emmacunningham]

Summary

close #104

This PR introduces a LineAnnotation spec so the user can specify what annotations on a chart they want.

Since this is the first of the Annotation features, this also introduces a bit of scaffolding for the annotations overall. This implementation allows a user to define a set of annotations by defining one of three specs (LineAnnotation, RectangleAnnotation, and TextAnnotation).

Within a LineAnnotation spec a user may define:

  /** The id of the annotation */
  annotationId: AnnotationId;
  /** Annotation type: line, rectangle, text */
  annotationType: AnnotationType;
  /** The ID of the axis group, generated via getGroupId method */
  groupId: GroupId; // defaults to __global__; needed for yDomain position
  /** Annotation domain type: XDomain or YDomain */
  domainType: AnnotationDomainType;
  /** Data values defined with value, details, and header */
  dataValues: AnnotationDatum[];
  /** Custom line styles */
  lineStyle?: Partial<AnnotationLineStyle>;
  /** Custom marker */
  marker?: JSX.Element;

dataValues are defined in terms of data relevant to a scale within the chart. If the domainType is xDomain, then the annotation points will be scaled relative to the xDomain scale. If the domainType is yDomain, then the annotation points will be scaled relative to a yDomain scale; we get the relevant scale by lookup up against this.yScales with the groupId defined on the spec.

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

[codecov-io]

Codecov Report

Merging #126 into master will increase coverage by 0.83%.
The diff coverage is 99.44%.

@@            Coverage Diff             @@
##           master     #126      +/-   ##
==========================================
+ Coverage   92.84%   93.67%   +0.83%     
==========================================
  Files          31       32       +1     
  Lines        1481     1660     +179     
  Branches      163      194      +31     
==========================================
+ Hits         1375     1555     +180     
+ Misses         92       90       -2     
- Partials       14       15       +1

Impacted Files	Coverage Δ
src/lib/themes/theme.ts	100% <100%> (ø)	⬆️
src/lib/series/specs.ts	100% <100%> (ø)	⬆️
src/lib/utils/ids.ts	100% <100%> (ø)	⬆️
src/state/chart_state.ts	95.69% <100%> (+0.17%)	⬆️
src/state/annotation_utils.ts	99.32% <99.32%> (ø)
src/state/utils.ts	90.64% <0%> (+1.16%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 56b173d...895bc6e. Read the comment docs.

[markov00]

Tested locally and works fine now.
I've found just few minor things:

• on scale continuous, if you add an annotation with an empty string, it will be configured as an annotation on 0, this because d3-scale coerce values...
• I think you can keep the LineAnnotation style prop as if was before: Partial and optional, as you will always merge it on chartState when adding the annotation spec.

Beside that last point, I think it's good to merge

[emmacunningham]

Made LineAnnotationSpec.style partial and optional here 0e588eb (and added story for styling ff6b70f)

We explicitly check for the empty string now to prevent the error when d3.scale('') returns 0. (47406ae and 1a2e08f)

[markov00]

🎉 This PR is included in version 3.6.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀