feat(line_annotation): add hideLines and hideTooltips props to spec

src/lib/series/specs.ts

@@ -199,6 +199,10 @@ export interface LineAnnotationSpec {
     width: number;
     height: number;
   };
+  /** Annotation lines are hidden */
+  hideLines?: boolean;
+  /** Annotation tooltips are hidden */
+  hideTooltips?: boolean;
 }
 
 // TODO: RectangleAnnotationSpec & TextAnnotationSpec

src/specs/line_annotation.tsx

@@ -12,6 +12,8 @@ export class LineAnnotationSpecComponent extends PureComponent<LineAnnotationPro
     groupId: getGroupId('__global__'),
     annotationType: AnnotationTypes.Line,
     style: DEFAULT_ANNOTATION_LINE_STYLE,
+    hideLines: false,
+    hideTooltips: false,
   };
 
   private markerRef = createRef<HTMLDivElement>();

src/state/annotation_utils.test.ts

@@ -525,7 +525,7 @@ describe('annotation utils', () => {
       expect(dimensions).toEqual(expectedDimensions);
     });
 
-  test('should not compute annotation line values for values outside of domain', () => {
+  test('should not compute annotation line values for values outside of domain or AnnotationSpec.hideLines', () => {
     const chartRotation: Rotation = 0;
     const yScales: Map<GroupId, Scale> = new Map();
     yScales.set(groupId, continuousScale);
@@ -652,6 +652,27 @@ describe('annotation utils', () => {
     );
 
     expect(invalidStringYDimensions).toEqual([]);
+
+    const validHiddenAnnotation: AnnotationSpec = {
+      annotationType: AnnotationTypes.Line,
+      annotationId,
+      domainType: AnnotationDomainTypes.XDomain,
+      dataValues: [{ dataValue: 2, details: 'foo' }],
+      groupId,
+      style: DEFAULT_ANNOTATION_LINE_STYLE,
+      hideLines: true,
+    };
+
+    const hiddenAnnotationDimensions = computeLineAnnotationDimensions(
+      validHiddenAnnotation,
+      chartDimensions,
+      chartRotation,
+      yScales,
+      continuousScale,
+      Position.Right,
+    );
+
+    expect(hiddenAnnotationDimensions).toEqual(null);
   });
 
   test('should compute if a point is within an annotation line bounds (xDomain annotation)', () => {
@@ -967,20 +988,51 @@ describe('annotation utils', () => {
     annotationDimensions.set(annotationId, annotationLines);
 
     // missing annotations
-    const missingTooltipState = computeAnnotationTooltipState(
+    const missingSpecTooltipState = computeAnnotationTooltipState(
       cursorPosition,
       annotationDimensions,
       annotations,
       chartRotation,
       localAxesSpecs,
     );
 
-    expect(missingTooltipState).toBe(null);
+    expect(missingSpecTooltipState).toBe(null);
 
     // add valid annotation axis
     annotations.set(annotationId, lineAnnotation);
     localAxesSpecs.set(verticalAxisSpec.id, verticalAxisSpec);
 
+    // hide tooltipState
+    lineAnnotation.hideTooltips = true;
+
+    const hideTooltipState = computeAnnotationTooltipState(
+      cursorPosition,
+      annotationDimensions,
+      annotations,
+      chartRotation,
+      localAxesSpecs,
+    );
+
+    expect(hideTooltipState).toBe(null);
+
+    // show tooltipState, hide lines
+    lineAnnotation.hideTooltips = false;
+    lineAnnotation.hideLines = true;
+
+    const hideLinesTooltipState = computeAnnotationTooltipState(
+      cursorPosition,
+      annotationDimensions,
+      annotations,
+      chartRotation,
+      localAxesSpecs,
+    );
+
+    expect(hideLinesTooltipState).toBe(null);
+
+    // show tooltipState & lines
+    lineAnnotation.hideTooltips = false;
+    lineAnnotation.hideLines = false;
+
     const tooltipState = computeAnnotationTooltipState(
       cursorPosition,
       annotationDimensions,

src/state/annotation_utils.ts

@@ -249,7 +249,11 @@ export function computeLineAnnotationDimensions(
   xScale: Scale,
   axisPosition: Position,
 ): AnnotationLineProps[] | null {
-  const { domainType, dataValues, marker, markerDimensions } = annotationSpec;
+  const { domainType, dataValues, marker, markerDimensions, hideLines } = annotationSpec;
+
+  if (hideLines) {
+    return null;
+  }
 
   // TODO : make line overflow configurable via prop
   const lineOverflow = DEFAULT_LINE_OVERFLOW;
@@ -579,7 +583,7 @@ export function computeAnnotationTooltipState(
 ): AnnotationTooltipState | null {
   for (const [annotationId, annotationDimension] of annotationDimensions) {
     const spec = annotationSpecs.get(annotationId);
-    if (!spec) {
+    if (!spec || spec.hideTooltips || spec.hideLines) {
       continue;
     }
 

stories/annotations.tsx

@@ -258,6 +258,9 @@ storiesOf('Annotations', module)
       questionInCircle: 'questionInCircle',
     }, 'alert');
 
+    const hideLines = boolean('annotation lines hidden', false);
+    const hideTooltips = boolean('annotation tooltips hidden', false);
+
     return (
       <Chart renderer="canvas" className={'story-chart'}>
         <Settings debug={boolean('debug', false)} rotation={chartRotation} />
@@ -267,6 +270,8 @@ storiesOf('Annotations', module)
           dataValues={dataValues}
           style={style}
           marker={(<EuiIcon type={marker} />)}
+          hideLines={hideLines}
+          hideTooltips={hideTooltips}
         />
         <Axis
           id={getAxisId('horizontal')}