fix(tooltip): placement with left/top legends and single bars (#771)

fixes #769 and #770

integration/tests/legend_stories.test.ts

@@ -62,4 +62,34 @@ describe('Legend stories', () => {
       delay: 200, // needed for icon to load
     });
   });
+
+  describe('Tooltip placement with legend', () => {
+    it('should render tooltip with left legend', async () => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/legend--left', {
+        bottom: 190,
+        left: 310,
+      });
+    });
+
+    it('should render tooltip with top legend', async () => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/legend--top', {
+        top: 150,
+        left: 320,
+      });
+    });
+
+    it('should render tooltip with right legend', async () => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/legend--right', {
+        bottom: 180,
+        left: 330,
+      });
+    });
+
+    it('should render tooltip with bottom legend', async () => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/legend--bottom', {
+        top: 150,
+        left: 320,
+      });
+    });
+  });
 });

src/chart_types/xy_chart/crosshair/crosshair_utils.ts

@@ -23,6 +23,7 @@ import { Rotation } from '../../../utils/commons';
 import { Dimensions } from '../../../utils/dimensions';
 import { Point } from '../../../utils/point';
 import { isHorizontalRotation, isVerticalRotation } from '../state/utils/common';
+import { ChartDimensions } from '../utils/dimensions';
 
 export interface SnappedPosition {
   position: number;
@@ -168,26 +169,25 @@ export function getCursorBandPosition(
 
 /** @internal */
 export function getTooltipAnchorPosition(
-  chartDimensions: Dimensions,
+  { chartDimensions, offset }: ChartDimensions,
   chartRotation: Rotation,
   cursorBandPosition: Dimensions,
   cursorPosition: { x: number; y: number },
-  isSingleValueXScale: boolean,
 ): TooltipAnchorPosition {
   const isRotated = isVerticalRotation(chartRotation);
   const hPosition = getHorizontalTooltipPosition(
     cursorPosition.x,
     cursorBandPosition,
     chartDimensions,
+    offset.left,
     isRotated,
-    isSingleValueXScale,
   );
   const vPosition = getVerticalTooltipPosition(
     cursorPosition.y,
     cursorBandPosition,
     chartDimensions,
+    offset.top,
     isRotated,
-    isSingleValueXScale,
   );
   return {
     isRotated,
@@ -200,40 +200,41 @@ function getHorizontalTooltipPosition(
   cursorXPosition: number,
   cursorBandPosition: Dimensions,
   chartDimensions: Dimensions,
+  globalOffset: number,
   isRotated: boolean,
-  isSingleValueXScale: boolean,
 ): { x0?: number; x1: number } {
   if (!isRotated) {
     return {
-      x0: cursorBandPosition.left,
-      x1: cursorBandPosition.left + (isSingleValueXScale ? 0 : cursorBandPosition.width),
+      x0: cursorBandPosition.left + globalOffset,
+      x1: cursorBandPosition.left + cursorBandPosition.width + globalOffset,
     };
   }
   return {
     // NOTE: x0 set to zero blocks tooltip placement on left when rotated 90 deg
     // Delete this comment before merging and verifing this doesn't break anything.
-    x1: chartDimensions.left + cursorXPosition,
+    x1: chartDimensions.left + cursorXPosition + globalOffset,
   };
 }
 
 function getVerticalTooltipPosition(
   cursorYPosition: number,
   cursorBandPosition: Dimensions,
   chartDimensions: Dimensions,
+  globalOffset: number,
   isRotated: boolean,
-  isSingleValueXScale: boolean,
 ): {
   y0: number;
   y1: number;
 } {
   if (!isRotated) {
+    const y = cursorYPosition + chartDimensions.top + globalOffset;
     return {
-      y0: cursorYPosition + chartDimensions.top,
-      y1: cursorYPosition + chartDimensions.top,
+      y0: y,
+      y1: y,
     };
   }
   return {
-    y0: cursorBandPosition.top,
-    y1: (isSingleValueXScale ? 0 : cursorBandPosition.height) + cursorBandPosition.top,
+    y0: cursorBandPosition.top + globalOffset,
+    y1: cursorBandPosition.height + cursorBandPosition.top + globalOffset,
   };
 }

src/chart_types/xy_chart/state/selectors/compute_chart_dimensions.ts

@@ -22,8 +22,9 @@ import createCachedSelector from 're-reselect';
 import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
-import { Dimensions } from '../../../../utils/dimensions';
-import { computeChartDimensions } from '../../utils/dimensions';
+import { getLegendSizeSelector, LegendSizing } from '../../../../state/selectors/get_legend_size';
+import { Position } from '../../../../utils/commons';
+import { computeChartDimensions, ChartDimensions } from '../../utils/dimensions';
 import { computeAxisTicksDimensionsSelector } from './compute_axis_ticks_dimensions';
 import { getAxesStylesSelector } from './get_axis_styles';
 import { getAxisSpecsSelector } from './get_specs';
@@ -36,15 +37,39 @@ export const computeChartDimensionsSelector = createCachedSelector(
     computeAxisTicksDimensionsSelector,
     getAxisSpecsSelector,
     getAxesStylesSelector,
+    getLegendSizeSelector,
   ],
-  (
-    chartContainerDimensions,
-    chartTheme,
-    axesTicksDimensions,
-    axesSpecs,
-    axesStyles,
-  ): {
-    chartDimensions: Dimensions;
-    leftMargin: number;
-  } => computeChartDimensions(chartContainerDimensions, chartTheme, axesTicksDimensions, axesStyles, axesSpecs),
+  (chartContainerDimensions, chartTheme, axesTicksDimensions, axesSpecs, axesStyles, legendSize): ChartDimensions =>
+    computeChartDimensions(
+      chartContainerDimensions,
+      chartTheme,
+      axesTicksDimensions,
+      axesStyles,
+      axesSpecs,
+      getLegendDimension(legendSize),
+    ),
 )(getChartIdSelector);
+
+function getLegendDimension({
+  position,
+  width,
+  height,
+  margin,
+}: LegendSizing): {
+  top: number;
+  left: number;
+} {
+  let left = 0;
+  let top = 0;
+
+  if (position === Position.Left) {
+    left = width + margin * 2;
+  } else if (position === Position.Top) {
+    top = height + margin * 2;
+  }
+
+  return {
+    left,
+    top,
+  };
+}

src/chart_types/xy_chart/state/selectors/get_tooltip_position.ts

@@ -21,10 +21,10 @@ import createCachedSelector from 're-reselect';
 
 import { TooltipAnchorPosition } from '../../../../components/tooltip/types';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { getLegendSizeSelector } from '../../../../state/selectors/get_legend_size';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { getTooltipAnchorPosition } from '../../crosshair/crosshair_utils';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
-import { getComputedScalesSelector } from './get_computed_scales';
 import { getCursorBandPositionSelector } from './get_cursor_band';
 import { getProjectedPointerPositionSelector } from './get_projected_pointer_position';
 
@@ -35,24 +35,13 @@ export const getTooltipAnchorPositionSelector = createCachedSelector(
     getSettingsSpecSelector,
     getCursorBandPositionSelector,
     getProjectedPointerPositionSelector,
-    getComputedScalesSelector,
+    getLegendSizeSelector,
   ],
-  (
-    { chartDimensions },
-    settings,
-    cursorBandPosition,
-    projectedPointerPosition,
-    scales,
-  ): TooltipAnchorPosition | null => {
+  (chartDimensions, settings, cursorBandPosition, projectedPointerPosition): TooltipAnchorPosition | null => {
     if (!cursorBandPosition) {
       return null;
     }
-    return getTooltipAnchorPosition(
-      chartDimensions,
-      settings.rotation,
-      cursorBandPosition,
-      projectedPointerPosition,
-      scales.xScale.isSingleValue(),
-    );
+
+    return getTooltipAnchorPosition(chartDimensions, settings.rotation, cursorBandPosition, projectedPointerPosition);
   },
 )(getChartIdSelector);

src/chart_types/xy_chart/utils/dimensions.test.ts

@@ -47,6 +47,10 @@ describe('Computed chart dimensions', () => {
     top: 10,
     bottom: 10,
   };
+  const legendSize = {
+    top: 0,
+    left: 0,
+  };
 
   const axis1Dims: AxisTicksDimensions = {
     tickValues: [0, 1],
@@ -89,7 +93,14 @@ describe('Computed chart dimensions', () => {
     const axisDims = new Map<AxisId, AxisTicksDimensions>();
     const axisStyles = new Map();
     const axisSpecs: AxisSpec[] = [];
-    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
+    const { chartDimensions } = computeChartDimensions(
+      parentDim,
+      chartTheme,
+      axisDims,
+      axisStyles,
+      axisSpecs,
+      legendSize,
+    );
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -101,7 +112,14 @@ describe('Computed chart dimensions', () => {
     const axisStyles = new Map();
     const axisSpecs = [axisLeftSpec];
     axisDims.set('axis_1', axis1Dims);
-    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
+    const { chartDimensions } = computeChartDimensions(
+      parentDim,
+      chartTheme,
+      axisDims,
+      axisStyles,
+      axisSpecs,
+      legendSize,
+    );
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -113,7 +131,14 @@ describe('Computed chart dimensions', () => {
     const axisStyles = new Map();
     const axisSpecs = [{ ...axisLeftSpec, position: Position.Right }];
     axisDims.set('axis_1', axis1Dims);
-    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
+    const { chartDimensions } = computeChartDimensions(
+      parentDim,
+      chartTheme,
+      axisDims,
+      axisStyles,
+      axisSpecs,
+      legendSize,
+    );
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -130,7 +155,14 @@ describe('Computed chart dimensions', () => {
       },
     ];
     axisDims.set('axis_1', axis1Dims);
-    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
+    const { chartDimensions } = computeChartDimensions(
+      parentDim,
+      chartTheme,
+      axisDims,
+      axisStyles,
+      axisSpecs,
+      legendSize,
+    );
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -147,7 +179,14 @@ describe('Computed chart dimensions', () => {
       },
     ];
     axisDims.set('axis_1', axis1Dims);
-    const { chartDimensions } = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
+    const { chartDimensions } = computeChartDimensions(
+      parentDim,
+      chartTheme,
+      axisDims,
+      axisStyles,
+      axisSpecs,
+      legendSize,
+    );
     expect(chartDimensions.left + chartDimensions.width).toBeLessThanOrEqual(parentDim.width);
     expect(chartDimensions.top + chartDimensions.height).toBeLessThanOrEqual(parentDim.height);
     expect(chartDimensions).toMatchSnapshot();
@@ -162,7 +201,7 @@ describe('Computed chart dimensions', () => {
       },
     ];
     axisDims.set('foo', axis1Dims);
-    const chartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
+    const chartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs, legendSize);
 
     const expectedDims = {
       chartDimensions: {
@@ -172,6 +211,10 @@ describe('Computed chart dimensions', () => {
         top: 20,
       },
       leftMargin: 10,
+      offset: {
+        top: 0,
+        left: 0,
+      },
     };
 
     expect(chartDimensions).toEqual(expectedDims);
@@ -184,7 +227,14 @@ describe('Computed chart dimensions', () => {
       hide: true,
       position: Position.Bottom,
     });
-    const hiddenAxisChartDimensions = computeChartDimensions(parentDim, chartTheme, axisDims, axisStyles, axisSpecs);
+    const hiddenAxisChartDimensions = computeChartDimensions(
+      parentDim,
+      chartTheme,
+      axisDims,
+      axisStyles,
+      axisSpecs,
+      legendSize,
+    );
 
     expect(hiddenAxisChartDimensions).toEqual(expectedDims);
   });