feat: hide tooltip when over line annotation (#339)

This commit add a new prop for the line annotation to disable the tooltip when hovering over a line annotation. This will keep showing the tooltip over the marker, if available.

fix #324

.playground/playgroud.tsx

@@ -9,11 +9,15 @@ import {
   Position,
   ScaleType,
   Settings,
-  LineSeries,
+  BarSeries,
+  LineAnnotation,
+  getAnnotationId,
+  AnnotationDomainTypes,
 } from '../src';
 import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
 import { CursorEvent } from '../src/specs/settings';
 import { CursorUpdateListener } from '../src/chart_types/xy_chart/store/chart_state';
+import { Icon } from '../src/components/icons/icon';
 
 export class Playground extends React.Component {
   ref1 = React.createRef<Chart>();
@@ -65,6 +69,7 @@ function renderChart(
           legendPosition={Position.Right}
           showLegend={true}
           onCursorUpdate={onCursorUpdate}
+          rotation={0}
         />
         <Axis
           id={getAxisId('timestamp')}
@@ -73,21 +78,31 @@ function renderChart(
           tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
         />
         <Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
-        <LineSeries
-          id={getSpecId('dataset A with a really really really really long title')}
+        <LineAnnotation
+          annotationId={getAnnotationId('annotation1')}
+          domainType={AnnotationDomainTypes.XDomain}
+          dataValues={[
+            {
+              dataValue: KIBANA_METRICS.metrics.kibana_os_load[1].data[5][0],
+              details: 'tooltip 1',
+            },
+            {
+              dataValue: KIBANA_METRICS.metrics.kibana_os_load[1].data[9][0],
+              details: 'tooltip 2',
+            },
+          ]}
+          hideLinesTooltips={true}
+          marker={<Icon type="alert" />}
+        />
+        <BarSeries
+          id={getSpecId('dataset A with long title')}
           xScaleType={timeSeries ? ScaleType.Time : ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           data={data}
           xAccessor={0}
-          lineSeriesStyle={{
-            line: {
-              stroke: 'red',
-              opacity: 1,
-            },
-          }}
           yAccessors={[1]}
         />
-        <LineSeries
+        <BarSeries
           id={getSpecId('dataset B')}
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
@@ -96,15 +111,6 @@ function renderChart(
           yAccessors={[1]}
           stackAccessors={[0]}
         />
-        <LineSeries
-          id={getSpecId('dataset C')}
-          xScaleType={ScaleType.Time}
-          yScaleType={ScaleType.Linear}
-          data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
-          xAccessor={0}
-          yAccessors={[1]}
-          stackAccessors={[0]}
-        />
       </Chart>
     </div>
   );

src/chart_types/xy_chart/annotations/annotation_utils.test.ts

@@ -1294,6 +1294,18 @@ describe('annotation utils', () => {
     };
 
     expect(rectTooltipState).toEqual(expectedRectTooltipState);
+    annotationRectangle.hideTooltips = true;
+
+    const rectHideTooltipState = computeAnnotationTooltipState(
+      { x: 3, y: 4 },
+      annotationDimensions,
+      rectAnnotations,
+      chartRotation,
+      localAxesSpecs,
+      chartDimensions,
+    );
+
+    expect(rectHideTooltipState).toBe(null);
   });
 
   test('should get associated axis for an annotation', () => {

src/chart_types/xy_chart/annotations/annotation_utils.ts

@@ -573,6 +573,7 @@ export function isWithinLineBounds(
   chartDimensions: Dimensions,
   domainType: AnnotationDomainType,
   marker?: AnnotationMarker,
+  hideLinesTooltips?: boolean,
 ): boolean {
   const [startX, startY, endX, endY] = linePosition;
   const isXDomainAnnotation = isXDomain(domainType);
@@ -584,26 +585,26 @@ export function isWithinLineBounds(
   const isHorizontalChartRotation = isHorizontalRotation(chartRotation);
   const chartWidth = chartDimensions.width;
   const chartHeight = chartDimensions.height;
-
-  if (isXDomainAnnotation) {
-    isCursorWithinXBounds = isHorizontalChartRotation
-      ? cursorPosition.x >= startX - offset && cursorPosition.x <= endX + offset
-      : cursorPosition.x >= chartHeight - startX - offset && cursorPosition.x <= chartHeight - endX + offset;
-    isCursorWithinYBounds = isHorizontalChartRotation
-      ? cursorPosition.y >= startY && cursorPosition.y <= endY
-      : cursorPosition.y >= startY - offset && cursorPosition.y <= endY + offset;
-  } else {
-    isCursorWithinXBounds = isHorizontalChartRotation
-      ? cursorPosition.x >= startX && cursorPosition.x <= endX
-      : cursorPosition.x >= startX - offset && cursorPosition.x <= endX + offset;
-    isCursorWithinYBounds = isHorizontalChartRotation
-      ? cursorPosition.y >= startY - offset && cursorPosition.y <= endY + offset
-      : cursorPosition.y >= chartWidth - startY - offset && cursorPosition.y <= chartWidth - endY + offset;
-  }
-
-  // If it's within cursor bounds, return true (no need to check marker bounds)
-  if (isCursorWithinXBounds && isCursorWithinYBounds) {
-    return true;
+  if (!hideLinesTooltips) {
+    if (isXDomainAnnotation) {
+      isCursorWithinXBounds = isHorizontalChartRotation
+        ? cursorPosition.x >= startX - offset && cursorPosition.x <= endX + offset
+        : cursorPosition.x >= chartHeight - startX - offset && cursorPosition.x <= chartHeight - endX + offset;
+      isCursorWithinYBounds = isHorizontalChartRotation
+        ? cursorPosition.y >= startY && cursorPosition.y <= endY
+        : cursorPosition.y >= startY - offset && cursorPosition.y <= endY + offset;
+    } else {
+      isCursorWithinXBounds = isHorizontalChartRotation
+        ? cursorPosition.x >= startX && cursorPosition.x <= endX
+        : cursorPosition.x >= startX - offset && cursorPosition.x <= endX + offset;
+      isCursorWithinYBounds = isHorizontalChartRotation
+        ? cursorPosition.y >= startY - offset && cursorPosition.y <= endY + offset
+        : cursorPosition.y >= chartWidth - startY - offset && cursorPosition.y <= chartWidth - endY + offset;
+    }
+    // If it's within cursor bounds, return true (no need to check marker bounds)
+    if (isCursorWithinXBounds && isCursorWithinYBounds) {
+      return true;
+    }
   }
 
   if (!marker) {
@@ -748,6 +749,7 @@ export function computeLineAnnotationTooltipState(
   chartRotation: Rotation,
   chartDimensions: Dimensions,
   axesSpecs: Map<AxisId, AxisSpec>,
+  hideLinesTooltips?: boolean,
 ): AnnotationTooltipState {
   const annotationTooltipState: AnnotationTooltipState = {
     isVisible: false,
@@ -778,6 +780,7 @@ export function computeLineAnnotationTooltipState(
       chartDimensions,
       domainType,
       line.marker,
+      hideLinesTooltips,
     );
 
     if (isWithinBounds) {
@@ -991,14 +994,14 @@ export function computeAnnotationTooltipState(
   for (const [annotationId, annotationDimension] of annotationDimensions) {
     const spec = annotationSpecs.get(annotationId);
 
-    if (!spec) {
+    if (!spec || spec.hideTooltips) {
       continue;
     }
 
     const groupId = spec.groupId;
 
     if (isLineAnnotation(spec)) {
-      if (spec.hideTooltips || spec.hideLines) {
+      if (spec.hideLines) {
         continue;
       }
 
@@ -1011,6 +1014,7 @@ export function computeAnnotationTooltipState(
         chartRotation,
         chartDimensions,
         axesSpecs,
+        spec.hideLinesTooltips,
       );
 
       if (lineAnnotationTooltipState.isVisible) {

src/chart_types/xy_chart/utils/specs.ts

@@ -301,6 +301,8 @@ export type LineAnnotationSpec = BaseAnnotationSpec & {
   };
   /** Annotation lines are hidden */
   hideLines?: boolean;
+  /** Hide tooltip when hovering over the line */
+  hideLinesTooltips?: boolean;
   /** z-index of the annotation relative to other elements in the chart
    * @default 1
    */

stories/annotations.tsx

@@ -331,7 +331,7 @@ storiesOf('Annotations', module)
       {
         coordinates: {
           x0: 'a',
-          x1: 'b.5',
+          x1: 'b',
         },
         details: 'details about this annotation',
       },
@@ -535,6 +535,7 @@ storiesOf('Annotations', module)
           style={style}
           renderTooltip={renderTooltip}
           zIndex={zIndex}
+          hideTooltips={boolean('hide tooltips', false)}
         />
         <Axis id={getAxisId('bottom')} position={xAxisPosition} title={xAxisTitle} />
         <Axis id={getAxisId('left')} title={yAxisTitle} position={yAxisPosition} />