fix: tooltip container scroll issue (elastic#647)

markov00 · Apr 28, 2020 · f411771 · f411771
1 parent ed91744
commit f411771
Show file tree

Hide file tree

Showing 11 changed files with 247 additions and 104 deletions.
diff --git a/.playground/index.html b/.playground/index.html
@@ -23,15 +23,23 @@
 */
         /*        width: 100%;
         height: 100%;*/
+        /* overflow-x: hidden; */
       }
       .chart {
         background: white;
         /*display: inline-block;
         position: relative;
         */
-        width: 300px;
-        height: 300px;
-        margin: 20px;
+        width: 100%;
+        height: 500px;
+        overflow: auto;
+      }
+
+      .testing {
+        background: aquamarine;
+        position: relative;
+        width: 100vw;
+        overflow: auto;
       }
     </style>
   </head>

diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -17,7 +17,8 @@
  * under the License. */
 
 import React from 'react';
-import { Chart, Partition, Settings, PartitionLayout, XYChartElementEvent, PartitionElementEvent } from '../src';
+import { XYChartElementEvent, PartitionElementEvent } from '../src';
+import { example } from '../stories/treemap/6_custom_style';
 
 export class Playground extends React.Component {
   onElementClick = (elements: (XYChartElementEvent | PartitionElementEvent)[]) => {
@@ -26,33 +27,8 @@ export class Playground extends React.Component {
   };
   render() {
     return (
-      <div className="chart">
-        <Chart>
-          <Settings onElementClick={this.onElementClick} />
-          <Partition
-            id="111"
-            config={{
-              partitionLayout: PartitionLayout.treemap,
-            }}
-            valueAccessor={(d: { v: number }) => {
-              return d.v;
-            }}
-            data={[
-              { g1: 'a', g2: 'a', v: 1 },
-              { g1: 'a', g2: 'b', v: 1 },
-              { g1: 'b', g2: 'a', v: 1 },
-              { g1: 'b', g2: 'b', v: 1 },
-            ]}
-            layers={[
-              {
-                groupByRollup: (datum: { g1: string }) => datum.g1,
-              },
-              {
-                groupByRollup: (datum: { g2: string }) => datum.g2,
-              },
-            ]}
-          />
-        </Chart>
+      <div className="testing">
+        <div className="chart">{example()}</div>
       </div>
     );
   }

diff --git a/src/chart_types/xy_chart/annotations/annotation_tooltip.ts b/src/chart_types/xy_chart/annotations/annotation_tooltip.ts
@@ -17,6 +17,7 @@
  * under the License. */
 
 import { Dimensions } from '../../../utils/dimensions';
+import { Position } from '../../../utils/commons';
 
 /** @internal */
 export function getFinalAnnotationTooltipPosition(
@@ -27,16 +28,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: Position = Position.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 = Position.Right;
   } else {
     left = annotationXOffset + padding;
   }
@@ -50,5 +56,6 @@ export function getFinalAnnotationTooltipPosition(
   return {
     left: `${Math.round(left)}px`,
     top: `${Math.round(top)}px`,
+    anchor,
   };
 }
diff --git a/src/chart_types/xy_chart/crosshair/crosshair_utils.test.ts b/src/chart_types/xy_chart/crosshair/crosshair_utils.test.ts
@@ -31,9 +31,10 @@ describe('Tooltip position', () => {
     top: 0,
     left: 0,
   };
+  const portalWidth = 50;
   describe('horizontal rotated chart', () => {
     it('can position the tooltip on the top left corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: false,
         y1: 0,
         y0: 0,
@@ -44,8 +45,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('25px');
       expect(position.top).toBe('10px');
     });
+
     it('can position the tooltip on the bottom left corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: false,
         y0: 90,
         y1: 90,
@@ -56,34 +58,61 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('25px');
       expect(position.top).toBe('80px');
     });
+
     it('can position the tooltip on the top right corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: false,
         y0: 0,
         y1: 0,
         x0: 100,
         x1: 100,
         padding: 5,
       });
-      expect(position.left).toBe('65px');
+      expect(position.left).toBe('55px');
       expect(position.top).toBe('10px');
     });
+
     it('can position the tooltip on the bottom right corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: false,
         y0: 90,
         y1: 90,
         x0: 100,
         x1: 100,
         padding: 5,
       });
-      expect(position.left).toBe('65px');
+      expect(position.left).toBe('55px');
       expect(position.top).toBe('80px');
     });
+
+    it('should render on right if portal width is within right side', () => {
+      const position = getFinalTooltipPosition(container, tooltip, 44, {
+        isRotated: false,
+        y0: 0,
+        y1: 0,
+        x0: 50,
+        x1: 50,
+        padding: 5,
+      });
+      expect(position.left).toBe('65px');
+    });
+
+    it('should render on left if portal width is NOT within right side', () => {
+      const position = getFinalTooltipPosition(container, tooltip, 46, {
+        isRotated: false,
+        y0: 0,
+        y1: 0,
+        x0: 50,
+        x1: 50,
+        padding: 5,
+      });
+      expect(position.left).toBe('9px');
+    });
   });
+
   describe('vertical rotated chart', () => {
     it('can position the tooltip on the top left corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: true,
         y0: 0,
         y1: 0,
@@ -94,8 +123,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('20px');
       expect(position.top).toBe('15px');
     });
+
     it('can position the tooltip on the bottom left corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: true,
         y0: 90,
         y1: 90,
@@ -106,8 +136,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('20px');
       expect(position.top).toBe('65px');
     });
+
     it('can position the tooltip on the top right corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: true,
         y0: 0,
         y1: 0,
@@ -118,8 +149,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('70px');
       expect(position.top).toBe('15px');
     });
+
     it('can position the tooltip on the bottom right corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: true,
         y0: 90,
         y1: 90,
@@ -130,5 +162,29 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('70px');
       expect(position.top).toBe('65px');
     });
+
+    it('should render on right if portal width is within right side', () => {
+      const position = getFinalTooltipPosition(container, tooltip, 44, {
+        isRotated: true,
+        y0: 0,
+        y1: 0,
+        x0: 50,
+        x1: 50,
+        padding: 5,
+      });
+      expect(position.left).toBe('60px');
+    });
+
+    it('should render on left if portal width is NOT within right side', () => {
+      const position = getFinalTooltipPosition(container, tooltip, 51, {
+        isRotated: true,
+        y0: 0,
+        y1: 0,
+        x0: 50,
+        x1: 50,
+        padding: 5,
+      });
+      expect(position.left).toBe('70px');
+    });
   });
 });
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 MAX_WIDTH = 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.MAX_WIDTH}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.MAX_WIDTH, 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;

diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
@@ -1,6 +1,7 @@
 #echTooltipContainerPortal {
   position: absolute;
-  width: 256px;
+  pointer-events: none;
+  z-index: 10000000;
 }
 .echTooltip {
   position: absolute;
@@ -41,7 +42,7 @@
     font-weight: $euiFontWeightBold;
     text-align: right;
     font-feature-settings: 'tnum';
-    margin-left: 8px;
+    margin-left: $euiSizeS;
   }
 
   &__rowHighlighted {

diff --git a/src/components/tooltip/index.ts b/src/components/tooltip/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+/** @internal */
+export { TooltipPortal as Tooltip } from './tooltip_portal';