fix: disable tooltip when details or custom content is null (#280)

src/chart_types/xy_chart/annotations/annotation_utils.ts

@@ -23,6 +23,7 @@ import { Scale, ScaleType } from '../../../utils/scales/scales';
 import { Point } from '../store/chart_state';
 import { computeXScaleOffset, getAxesSpecForSpecId, isHorizontalRotation } from '../store/utils';
 
+export type AnnotationTooltipFormatter = (details?: string) => JSX.Element | null;
 export interface AnnotationTooltipState {
   annotationType: AnnotationType;
   isVisible: boolean;
@@ -31,7 +32,7 @@ export interface AnnotationTooltipState {
   transform: string;
   top?: number;
   left?: number;
-  renderTooltip?: (details?: string) => JSX.Element;
+  renderTooltip?: AnnotationTooltipFormatter;
 }
 export interface AnnotationDetails {
   headerText?: string;
@@ -925,7 +926,7 @@ export function computeRectAnnotationTooltipState(
   annotationRects: AnnotationRectProps[],
   chartRotation: Rotation,
   chartDimensions: Dimensions,
-  renderTooltip?: (details?: string) => JSX.Element,
+  renderTooltip?: AnnotationTooltipFormatter,
 ): AnnotationTooltipState {
   const cursorPosition = getRotatedCursor(rawCursorPosition, chartDimensions, chartRotation);
 

src/chart_types/xy_chart/utils/specs.ts

@@ -11,6 +11,7 @@ import { Omit, RecursivePartial } from '../../../utils/commons';
 import { AnnotationId, AxisId, GroupId, SpecId } from '../../../utils/ids';
 import { ScaleContinuousType, ScaleType } from '../../../utils/scales/scales';
 import { CurveType } from '../../../utils/curves';
+import { AnnotationTooltipFormatter } from '../annotations/annotation_utils';
 import { DataSeriesColorsValues } from './series';
 
 export type Datum = any;
@@ -313,7 +314,7 @@ export interface RectAnnotationDatum {
 export type RectAnnotationSpec = BaseAnnotationSpec & {
   annotationType: 'rectangle';
   /** Custom rendering function for tooltip */
-  renderTooltip?: (details?: string) => JSX.Element;
+  renderTooltip?: AnnotationTooltipFormatter;
   /** Data values defined with coordinates and details */
   dataValues: RectAnnotationDatum[];
   /** Custom annotation style */

src/components/annotation_tooltips.tsx

@@ -2,7 +2,11 @@ import { inject, observer } from 'mobx-react';
 import React from 'react';
 import { isLineAnnotation } from '../chart_types/xy_chart/utils/specs';
 import { AnnotationId } from '../utils/ids';
-import { AnnotationDimensions, AnnotationLineProps } from '../chart_types/xy_chart/annotations/annotation_utils';
+import {
+  AnnotationDimensions,
+  AnnotationLineProps,
+  AnnotationTooltipFormatter,
+} from '../chart_types/xy_chart/annotations/annotation_utils';
 import { ChartStore } from '../chart_types/xy_chart/store/chart_state';
 
 interface AnnotationTooltipProps {
@@ -114,10 +118,15 @@ export const AnnotationTooltip = inject('chartStore')(observer(AnnotationTooltip
 function RectAnnotationTooltip(props: {
   details?: string;
   position: { transform: string; top: number; left: number };
-  customTooltip?: (details?: string) => JSX.Element;
+  customTooltip?: AnnotationTooltipFormatter;
 }) {
   const { details, position, customTooltip } = props;
   const tooltipContent = customTooltip ? customTooltip(details) : details;
+
+  if (!tooltipContent) {
+    return null;
+  }
+
   return (
     <div className="echAnnotation__tooltip" style={{ ...position }}>
       <div className="echAnnotation__details">

src/index.ts

@@ -25,3 +25,4 @@ export {
   RectAnnotationSpec,
 } from './chart_types/xy_chart/utils/specs';
 export { GeometryValue } from './chart_types/xy_chart/rendering/rendering';
+export { AnnotationTooltipFormatter } from './chart_types/xy_chart/annotations/annotation_utils';

stories/annotations.tsx

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
 import React from 'react';
 import {
   AnnotationDomainTypes,
+  AnnotationTooltipFormatter,
   Axis,
   BarSeries,
   Chart,
@@ -607,4 +608,59 @@ storiesOf('Annotations', module)
         />
       </Chart>
     );
+  })
+  .add('[rect] tooltip visibility dependent on content', () => {
+    const tooltipOptions = {
+      'default formatter, details defined': 'default_defined',
+      'default formatter, details undefined': 'default_undefined',
+      'custom formatter, return element': 'custom_element',
+      'custom formatter, return null': 'custom_null',
+    };
+
+    const tooltipFormat = select('tooltip format', tooltipOptions, 'default_defined');
+
+    const isDefaultDefined = tooltipFormat === 'default_defined';
+
+    const dataValues = [
+      {
+        coordinates: {
+          x0: 0,
+          x1: 1,
+          y0: 0,
+          y1: 7,
+        },
+        details: isDefaultDefined ? 'foo' : undefined,
+      },
+    ];
+
+    const isCustomTooltipElement = tooltipFormat === 'custom_element';
+    const tooltipFormatter: AnnotationTooltipFormatter = () => {
+      if (!isCustomTooltipElement) {
+        return null;
+      }
+
+      return <div>{'custom formatter'}</div>;
+    };
+
+    const isCustomTooltip = tooltipFormat.includes('custom');
+
+    return (
+      <Chart className={'story-chart'}>
+        <RectAnnotation
+          dataValues={dataValues}
+          annotationId={getAnnotationId('rect')}
+          renderTooltip={isCustomTooltip ? tooltipFormatter : undefined}
+        />
+        <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'x-domain axis'} />
+        <Axis id={getAxisId('left')} title={'y-domain axis'} position={Position.Left} />
+        <BarSeries
+          id={getSpecId('bars')}
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor={'x'}
+          yAccessors={['y']}
+          data={[{ x: 0, y: 2 }, { x: 1, y: 7 }, { x: 3, y: 6 }]}
+        />
+      </Chart>
+    );
   });