feat(tooltip): enhanced tooltip

package.json

@@ -40,6 +40,7 @@
     "start": "yarn storybook",
     "storybook": "lerna run --scope charts-storybook start --stream --no-prefix",
     "storybook:build": "lerna run --scope charts-storybook build --stream --no-prefix",
+    "dev": "lerna run --scope charts-storybook dev --stream --no-prefix",
     "test": "jest --verbose --config jest.config.js",
     "test:tz": "yarn test:tz-utc && yarn test:tz-ny && yarn test:tz-jp",
     "test:tz-utc": "TZ=UTC jest --verbose --config=jest.tz.config.js",

packages/charts/src/chart_types/xy_chart/renderer/dom/cursor_band.tsx

@@ -54,7 +54,8 @@ class CursorBandComponent extends React.Component<CursorBandProps> {
     const { fill } = band;
     return (
       <svg className="echCrosshair__cursor" width="100%" height="100%">
-        <rect {...{ x, y, width, height, fill }} />
+        {/* FIXME this is an example of expanding the vertical cursor band to cover the X axis */}
+        <rect {...{ x, y, width, height: height + 35, fill }} />
       </svg>
     );
   }

packages/charts/src/chart_types/xy_chart/state/chart_state.tsx

@@ -12,7 +12,7 @@ import { ChartType } from '../..';
 import { LegendItemExtraValues } from '../../../common/legend';
 import { SeriesKey } from '../../../common/series_id';
 import { BrushTool } from '../../../components/brush/brush';
-import { Tooltip } from '../../../components/tooltip';
+import { Tooltip } from '../../../components/tooltip2';
 import { InternalChartState, GlobalChartState, BackwardRef } from '../../../state/chart_state';
 import { getChartContainerDimensionsSelector } from '../../../state/selectors/get_chart_container_dimensions';
 import { InitStatus } from '../../../state/selectors/get_internal_is_intialized';

packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts

@@ -50,9 +50,13 @@ function getProjectedPointerPosition(
   if (xPos < 0 || xPos >= width) {
     xPos = -1;
   }
-  if (yPos < 0 || yPos >= height) {
+  // FIXME this is an example of expanding the vertical cursor band to cover the X axis
+  if (yPos < 0) {
     yPos = -1;
+  } else if (yPos >= height && yPos < height + 50) {
+    yPos = 0;
   }
+
   const h = getPosRelativeToPanel(horizontal, xPos);
   const v = getPosRelativeToPanel(vertical, yPos);
 

packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_visible.ts

@@ -22,6 +22,8 @@ const getTooltipTypeSelector = (state: GlobalChartState): TooltipType => getTool
 
 const getPointerSelector = (state: GlobalChartState) => state.interactions.pointer;
 
+const isTooltipSticked = (state: GlobalChartState) => state.interactions.tooltipStick;
+
 /** @internal */
 export const isTooltipVisibleSelector = createCustomCachedSelector(
   [
@@ -31,6 +33,7 @@ export const isTooltipVisibleSelector = createCustomCachedSelector(
     getTooltipInfoSelector,
     isAnnotationTooltipVisibleSelector,
     isExternalTooltipVisibleSelector,
+    isTooltipSticked,
   ],
   isTooltipVisible,
 );
@@ -42,17 +45,20 @@ function isTooltipVisible(
   tooltip: TooltipInfo,
   isAnnotationTooltipVisible: boolean,
   externalTooltipVisible: boolean,
+  tooltipSticked: boolean,
 ) {
   const isLocalTooltip =
     tooltipType !== TooltipType.None &&
-    pointer.down === null &&
+    // pointer.down === null &&
     projectedPointerPosition.x > -1 &&
     projectedPointerPosition.y > -1 &&
     tooltip.values.length > 0 &&
     !isAnnotationTooltipVisible;
+
   const isExternalTooltip = externalTooltipVisible && tooltip.values.length > 0;
+
   return {
-    visible: isLocalTooltip || isExternalTooltip,
+    visible: isLocalTooltip || tooltipSticked || isExternalTooltip,
     isExternal: externalTooltipVisible,
   };
 }

packages/charts/src/components/_container.scss

@@ -23,7 +23,17 @@
   box-sizing: border-box;
   user-select: none;
 }
-
+.echChartTooltipBackground {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  pointer-events: all;
+  background-color: #0b2030;
+  opacity: 0.3;
+  z-index: 1;
+}
 .echChartResizer {
   z-index: -10000000;
   position: absolute;

packages/charts/src/components/_index.scss

@@ -2,6 +2,7 @@
 @import 'container';
 @import 'brush/index';
 @import 'tooltip/index';
+@import 'tooltip2/index';
 @import 'portal/index';
 @import 'icons/index';
 @import 'legend/index';

packages/charts/src/components/portal/_portal.scss

@@ -1,10 +1,10 @@
 [id^='echTooltipPortal'] {
-  pointer-events: none;
+  //pointer-events: none;
 }
 
 [id^='echAnchor'] {
   position: absolute;
-  pointer-events: none;
+  //pointer-events: none;
 }
 
 .echTooltipPortal__invisible {

packages/charts/src/components/tooltip2/_index.scss

@@ -0,0 +1 @@
+@import 'tooltip';

packages/charts/src/components/tooltip2/_tooltip.scss

@@ -0,0 +1,170 @@
+@import '../mixins';
+
+.echTooltip2 {
+  @include euiBottomShadow($color: $euiColorInk);
+  border-radius: $euiBorderRadius;
+  @include euiFontSizeXS;
+  background-color: $euiColorEmptyShade;
+  color: $euiTextColor;
+  padding: 0;
+  transition: height 2s linear;
+
+  user-select: none;
+  width: 150px;
+  pointer-events: none;
+
+  &__stick {
+    pointer-events: auto;
+  }
+  &__list {
+    transition: height 0.2s linear;
+  }
+  &__limitedList {
+    max-height: (21px * 3.5);
+    overflow: hidden;
+  }
+  &__scrollableList {
+    max-height: (21px * 4);
+    overflow: auto;
+  }
+
+
+  &__header {
+    @include euiToolTipTitle;
+    margin-bottom: 0;
+    padding: $euiSizeXS ($euiSizeXS * 2);
+    border-bottom: solid $euiBorderWidthThin #D3DAE6;
+  }
+
+  &__footer {
+    margin-bottom: 0;
+    border-top: solid $euiBorderWidthThin #D3DAE6;
+    padding: $euiSizeXS ($euiSizeXS * 2);
+    color: $euiTextSubduedColor;
+  }
+
+  &__item {
+    display: flex;
+    height: 21px;
+    min-width: 1px;
+    background-color: rgba(0,0,0,0);
+    transition: all 0.1s ease;
+
+    &::before {
+      content: '';
+      width: 0;
+      overflow: hidden;
+      transition: width 0.1s ease;
+    }
+
+    &--selected{
+
+      &::before {
+        content: '✔️';
+        width: 14px;
+      }
+    }
+
+    &--highlighted {
+      background-color: transparentize($euiColorDarkestShade, 0.9);
+    }
+
+    &:hover {
+      background-color: transparentize($euiColorDarkestShade, 0.9);
+    }
+
+    &--container {
+      display: flex;
+      flex: 1 1 auto;
+      padding: 3px;
+      padding-left: 0;
+      min-width: 1px;
+    }
+
+    &--backgroundColor {
+      position: relative;
+      width: $euiSizeXS;
+      margin-right: 3px;
+      flex-shrink: 0;
+    }
+
+    &--color {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  &__label {
+    @include wrapText;
+    min-width: 1px;
+    flex: 1 1 auto;
+    font-style: normal;
+    font-weight: $euiFontWeightMedium;
+  }
+
+  &__value {
+    font-style: normal;
+    font-weight: $euiFontWeightMedium;
+    text-align: right;
+    font-feature-settings: 'tnum';
+    margin-left: $euiSizeS;
+    direction: ltr;
+  }
+
+
+
+  &--hidden {
+    opacity: 0;
+  }
+
+  &[dir='rtl'] {
+    .echTooltip2 {
+      &__item {
+        &--container {
+          padding: 3px;
+          padding-right: 0;
+        }
+
+        &--backgroundColor {
+          margin-right: 0;
+          margin-left: 3px;
+        }
+      }
+
+      &__value {
+        margin-left: 0;
+        margin-right: $euiSizeS;
+      }
+    }
+  }
+}
+
+.echTooltip2Footer__actionList {
+  transition: all 0.2s ease-out;
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  li {
+    text-align: left;
+    &:hover {
+      background-color: transparentize($euiColorDarkestShade, 0.9);
+    }
+  }
+  button {
+    @include euiFontSizeXS;
+    color: $euiColorPrimary;
+  }
+  button:disabled,
+  button[disabled]{
+    pointer-events: none;
+    color: $euiColorDisabledText;
+  }
+}
+
+.echTooltip2Footer__showActionList {
+  opacity: 1;
+  height: (16px * 4);
+}

packages/charts/src/components/tooltip2/get_tooltip_settings.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { TooltipSettings, isTooltipType, SettingsSpec } from '../../specs/settings';
+
+/** @internal */
+export function getTooltipSettings(settings: SettingsSpec, isExternalTooltipVisible: boolean): TooltipSettings {
+  if (!isExternalTooltipVisible) {
+    return settings.tooltip;
+  }
+  if (isTooltipType(settings.tooltip)) {
+    return {
+      type: settings.tooltip,
+      ...settings.externalPointerEvents.tooltip,
+    };
+  }
+  return {
+    ...settings.tooltip,
+    ...settings.externalPointerEvents.tooltip,
+  };
+}

packages/charts/src/components/tooltip2/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/** @internal */
+export { Tooltip } from './tooltip';