feat(annotation): simplify custom tooltip function (#247)

BREAKING CHANGE: this changes the type signature of `RectAnnotation.renderTooltip?` from `(position, details) => JSX.Element` to `(details) => JSX.Element`. This allows the user to pass in a custom element without having to do the heavy lifting of writing the container positioning styles themselves.
elastic · Jun 24, 2019 · 982bc63 · 982bc63
1 parent 98a87c8
commit 982bc63
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 22 deletions.
diff --git a/src/components/annotation_tooltips.tsx b/src/components/annotation_tooltips.tsx
@@ -40,12 +40,7 @@ class AnnotationTooltipComponent extends React.Component<AnnotationTooltipProps>
         return <LineAnnotationTooltip {...props} />;
       }
       case 'rectangle': {
-        const props = { details, position };
-
-        if (tooltipState.renderTooltip) {
-          return tooltipState.renderTooltip(position, details);
-        }
-
+        const props = { details, position, customTooltip: tooltipState.renderTooltip };
         return <RectAnnotationTooltip {...props} />;
       }
       default:
@@ -119,12 +114,14 @@ export const AnnotationTooltip = inject('chartStore')(observer(AnnotationTooltip
 function RectAnnotationTooltip(props: {
   details?: string;
   position: { transform: string; top: number; left: number };
+  customTooltip?: (details?: string) => JSX.Element;
 }) {
-  const { details, position } = props;
+  const { details, position, customTooltip } = props;
+  const tooltipContent = customTooltip ? customTooltip(details) : details;
   return (
     <div className="echAnnotation__tooltip" style={{ ...position }}>
       <div className="echAnnotation__details">
-        <div className="echAnnotation__detailsText">{details}</div>
+        <div className="echAnnotation__detailsText">{tooltipContent}</div>
       </div>
     </div>
   );

diff --git a/src/lib/series/specs.ts b/src/lib/series/specs.ts
@@ -292,7 +292,7 @@ export interface RectAnnotationDatum {
 export type RectAnnotationSpec = BaseAnnotationSpec & {
   annotationType: 'rectangle';
   /** Custom rendering function for tooltip */
-  renderTooltip?: (position: { transform: string; top: number; left: number }, details?: string) => JSX.Element;
+  renderTooltip?: (details?: string) => JSX.Element;
   /** Data values defined with coordinates and details */
   dataValues: RectAnnotationDatum[];
   /** Custom annotation style */

diff --git a/src/state/annotation_utils.ts b/src/state/annotation_utils.ts
@@ -31,7 +31,7 @@ export interface AnnotationTooltipState {
   transform: string;
   top?: number;
   left?: number;
-  renderTooltip?: (position: { transform: string; top: number; left: number }, details?: string) => JSX.Element;
+  renderTooltip?: (details?: string) => JSX.Element;
 }
 export interface AnnotationDetails {
   headerText?: string;
@@ -925,7 +925,7 @@ export function computeRectAnnotationTooltipState(
   annotationRects: AnnotationRectProps[],
   chartRotation: Rotation,
   chartDimensions: Dimensions,
-  renderTooltip?: (position: { transform: string; top: number; left: number }, details?: string) => JSX.Element,
+  renderTooltip?: (details?: string) => JSX.Element,
 ): AnnotationTooltipState {
   const cursorPosition = getRotatedCursor(rawCursorPosition, chartDimensions, chartRotation);
 

diff --git a/stories/annotations.tsx b/stories/annotations.tsx
@@ -1,6 +1,6 @@
 import { array, boolean, color, number, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import {
   AnnotationDomainTypes,
   Axis,
@@ -508,16 +508,9 @@ storiesOf('Annotations', module)
     };
 
     const hasCustomTooltip = boolean('has custom tooltip render', false);
-    const tooltipStyle: CSSProperties = {
-      position: 'absolute',
-      backgroundColor: '#e76f6f',
-      color: '#e6e6e6',
-      overflow: 'hidden',
-      overflowWrap: 'break-word',
-      width: '120px',
-    };
-    const customTooltip = (position: { transform: string; top: number; left: number }, details?: string) => (
-      <div style={{ ...tooltipStyle, ...position }}>
+
+    const customTooltip = (details?: string) => (
+      <div>
         <Icon type="alert" />
         {details}
       </div>