fix: annotations tooltips positioning

elastic · Apr 27, 2020 · 96784a3 · 96784a3
1 parent f159273
commit 96784a3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/src/chart_types/xy_chart/annotations/annotation_tooltip.ts b/src/chart_types/xy_chart/annotations/annotation_tooltip.ts
@@ -27,16 +27,21 @@ export function getFinalAnnotationTooltipPosition(
   tooltip: Dimensions,
   /** the tooltip computed position not adjusted within chart bounds */
   tooltipAnchor: { top: number; left: number },
+  /** the width of the tooltip portal container */
+  portalWidth: number,
   padding = 10,
 ): {
   left: string | null;
   top: string | null;
+  anchor: 'left' | 'right';
 } {
   let left = 0;
+  let anchor: 'left' | 'right' = 'left' as 'left';
 
   const annotationXOffset = window.pageXOffset + container.left + chartDimensions.left + tooltipAnchor.left;
-  if (chartDimensions.left + tooltipAnchor.left + tooltip.width + padding >= container.width) {
-    left = annotationXOffset - tooltip.width - padding;
+  if (chartDimensions.left + tooltipAnchor.left + portalWidth + padding >= container.width) {
+    left = annotationXOffset - portalWidth - padding;
+    anchor = 'right' as 'right';
   } else {
     left = annotationXOffset + padding;
   }
@@ -50,5 +55,6 @@ export function getFinalAnnotationTooltipPosition(
   return {
     left: `${Math.round(left)}px`,
     top: `${Math.round(top)}px`,
+    anchor,
   };
 }
diff --git a/src/chart_types/xy_chart/renderer/dom/annotation_tooltips.tsx b/src/chart_types/xy_chart/renderer/dom/annotation_tooltips.tsx
@@ -58,6 +58,12 @@ class AnnotationTooltipComponent extends React.Component<AnnotationTooltipProps>
   static displayName = 'AnnotationTooltip';
   portalNode: HTMLDivElement | null = null;
   tooltipRef: React.RefObject<HTMLDivElement>;
+  /**
+   * Max allowable width for tooltip to grow to. Used to determine container fit.
+   *
+   * @unit px
+   */
+  static maxWidth = 256;
 
   constructor(props: AnnotationTooltipProps) {
     super(props);
@@ -71,6 +77,7 @@ class AnnotationTooltipComponent extends React.Component<AnnotationTooltipProps>
     } else {
       this.portalNode = document.createElement('div');
       this.portalNode.id = ANNOTATION_CONTAINER_ID;
+      this.portalNode.style.width = `${AnnotationTooltipComponent.maxWidth}px`;
       document.body.appendChild(this.portalNode);
     }
   }
@@ -96,12 +103,15 @@ class AnnotationTooltipComponent extends React.Component<AnnotationTooltipProps>
     }
 
     const chartContainerBBox = chartContainerRef.current.getBoundingClientRect();
+    const width = Math.min(AnnotationTooltipComponent.maxWidth, chartContainerBBox.width * 0.7);
+    this.portalNode.style.width = `${width}px`;
     const tooltipBBox = this.tooltipRef.current.getBoundingClientRect();
     const tooltipStyle = getFinalAnnotationTooltipPosition(
       chartContainerBBox,
       chartDimensions,
       tooltipBBox,
       tooltipState.anchor,
+      width,
     );
 
     if (tooltipStyle.left) {
@@ -110,6 +120,17 @@ class AnnotationTooltipComponent extends React.Component<AnnotationTooltipProps>
     if (tooltipStyle.top) {
       this.portalNode.style.top = tooltipStyle.top;
     }
+
+    if (tooltipStyle.left) {
+      this.portalNode.style.left = tooltipStyle.left;
+      if (this.tooltipRef.current) {
+        this.tooltipRef.current.style.left = tooltipStyle.anchor === 'right' ? 'auto' : '0px';
+        this.tooltipRef.current.style.right = tooltipStyle.anchor === 'right' ? '0px' : 'auto';
+      }
+    }
+    if (tooltipStyle.top) {
+      this.portalNode.style.top = tooltipStyle.top;
+    }
   }
 
   componentWillUnmount() {

diff --git a/src/components/_annotation.scss b/src/components/_annotation.scss
@@ -1,6 +1,6 @@
 #echAnnotationContainerPortal {
   position: absolute;
-  width: 256px;
+  pointer-events: none;
 }
 .echAnnotation {
   pointer-events: none;