feat(annotations): marker body with dynamic positioning

.eslintrc.js

@@ -236,6 +236,7 @@ module.exports = {
     'react/jsx-props-no-spreading': 0,
     'react/static-property-placement': 0,
     'react/state-in-constructor': 0,
+    'react/jsx-wrap-multilines': 0,
 
     /*
      * jest plugin

integration/tests/annotations_stories.test.ts

@@ -42,6 +42,7 @@ describe('Annotations stories', () => {
       );
     });
   });
+
   describe('Render within domain', () => {
     it('cover from 0 to end domain', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -69,6 +70,7 @@ describe('Annotations stories', () => {
       );
     });
   });
+
   describe('Render with zero domain or fit to domain', () => {
     it('show annotation when yDomain is not zero value', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -101,6 +103,7 @@ describe('Annotations stories', () => {
       );
     });
   });
+
   describe('Render with no group id provided', () => {
     it('show annotation when group id is provided no y0 nor y1 values specified', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -128,4 +131,12 @@ describe('Annotations stories', () => {
       );
     });
   });
+
+  describe('Advanced markers', () => {
+    it.each<number>([0, 15, 30])('renders marker annotation within chart canvas - day: %i', async (day) => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/annotations-lines--advanced-markers&knob-Debug=true&knob-show legend=true&knob-Annotation day=${day}`,
+      );
+    });
+  });
 });

src/chart_types/xy_chart/annotations/line/dimensions.ts

@@ -42,6 +42,7 @@ function computeYDomainLineAnnotationDimensions(
     id: specId,
     dataValues,
     marker: icon,
+    markerBody: body,
     markerDimensions: dimension,
     markerPosition: specMarkerPosition,
     style,
@@ -57,7 +58,7 @@ function computeYDomainLineAnnotationDimensions(
 
   const panelSize = getPanelSize({ vertical, horizontal });
 
-  dataValues.forEach((datum: LineAnnotationDatum) => {
+  dataValues.forEach((datum: LineAnnotationDatum, i) => {
     const { dataValue } = datum;
 
     // avoid rendering invalid annotation value
@@ -96,13 +97,14 @@ function computeYDomainLineAnnotationDimensions(
 
         const lineProp: AnnotationLineProps = {
           specId,
-          id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue),
+          id: getAnnotationLinePropsId(specId, datum, i, verticalValue, horizontalValue),
           datum,
           linePathPoints,
           markers: icon
             ? [
                 {
                   icon,
+                  body,
                   color,
                   dimension,
                   position,
@@ -137,6 +139,7 @@ function computeXDomainLineAnnotationDimensions(
     id: specId,
     dataValues,
     marker: icon,
+    markerBody: body,
     markerDimensions: dimension,
     markerPosition: specMarkerPosition,
     style,
@@ -148,7 +151,7 @@ function computeXDomainLineAnnotationDimensions(
   const isHorizontalChartRotation = isHorizontalRotation(chartRotation);
   const panelSize = getPanelSize({ vertical, horizontal });
 
-  dataValues.forEach((datum: LineAnnotationDatum) => {
+  dataValues.forEach((datum: LineAnnotationDatum, i) => {
     const { dataValue } = datum;
     let annotationValueXPosition = xScale.scale(dataValue);
     if (isNil(annotationValueXPosition)) {
@@ -208,13 +211,14 @@ function computeXDomainLineAnnotationDimensions(
 
         const lineProp: AnnotationLineProps = {
           specId,
-          id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue),
+          id: getAnnotationLinePropsId(specId, datum, i, verticalValue, horizontalValue),
           datum,
           linePathPoints,
           markers: icon
             ? [
                 {
                   icon,
+                  body,
                   color,
                   dimension,
                   position,
@@ -403,8 +407,9 @@ function getMarkerPositionForYAnnotation(
 export function getAnnotationLinePropsId(
   specId: string,
   datum: LineAnnotationDatum,
+  index: number,
   verticalValue?: any,
   horizontalValue?: any,
 ) {
-  return [specId, verticalValue, horizontalValue, datum.header, datum.details].join('__');
+  return [specId, verticalValue, horizontalValue, datum.header, datum.details, index].join('__');
 }

src/chart_types/xy_chart/annotations/types.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 
 import { TooltipPortalSettings } from '../../../components/portal';
 import { Position, Color } from '../../../utils/common';
@@ -44,12 +44,19 @@ export interface AnnotationDetails {
   detailsText?: string;
 }
 
+/**
+ * Component to render based on annotation datum
+ *
+ * @public
+ */
+export type ComponentWithAnnotationDatum = ComponentType<LineAnnotationDatum>;
+
 /**
  * The marker for an Annotation. Usually a JSX element
  * @internal
  */
 export interface AnnotationMarker {
-  icon: JSX.Element;
+  icon?: ReactNode | ComponentWithAnnotationDatum;
   position: {
     top: number;
     left: number;
@@ -58,6 +65,7 @@ export interface AnnotationMarker {
     width: number;
     height: number;
   };
+  body?: ReactNode | ComponentWithAnnotationDatum;
   alignment: Position;
   color: Color;
 }

src/chart_types/xy_chart/renderer/dom/annotations/_annotations.scss

@@ -3,23 +3,31 @@
   user-select: none;
   font-size: $euiFontSizeXS;
   font-weight: $euiFontWeightBold;
-}
 
-.echAnnotation__tooltip {
-  @include euiToolTipStyle;
-  @include euiFontSizeXS;
-  padding: 0;
-  transition: opacity $euiAnimSpeedNormal;
-  pointer-events: none;
-  user-select: none;
-  max-width: 256px;
-}
+  &__tooltip {
+    @include euiToolTipStyle;
+    @include euiFontSizeXS;
+    padding: 0;
+    transition: opacity $euiAnimSpeedNormal;
+    pointer-events: none;
+    user-select: none;
+    max-width: 256px;
+  }
 
-.echAnnotation__header {
-  @include euiToolTipTitle;
-  padding: $euiSizeXS ($euiSizeXS * 2);
-}
+  &__header {
+    @include euiToolTipTitle;
+    padding: $euiSizeXS ($euiSizeXS * 2);
+  }
+
+  &__details {
+    padding: $euiSizeXS ($euiSizeXS * 2);
+  }
+
+  &__icon {
+    position: relative;
+  }
 
-.echAnnotation__details {
-  padding: $euiSizeXS ($euiSizeXS * 2);
+  &__body {
+    white-space: nowrap;
+  }
 }

src/chart_types/xy_chart/renderer/dom/annotations/annotations.tsx

@@ -17,12 +17,11 @@
  * under the License.
  */
 
-import React, { useCallback } from 'react';
+import React, { RefObject, useCallback } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
 import {
-  DOMElementType,
   onDOMElementEnter as onDOMElementEnterAction,
   onDOMElementLeave as onDOMElementLeaveAction,
 } from '../../../../../state/actions/dom_element';
@@ -32,7 +31,6 @@ import {
   getInternalIsInitializedSelector,
   InitStatus,
 } from '../../../../../state/selectors/get_internal_is_intialized';
-import { Position } from '../../../../../utils/common';
 import { Dimensions } from '../../../../../utils/dimensions';
 import { AnnotationId } from '../../../../../utils/ids';
 import { AnnotationLineProps } from '../../../annotations/line/types';
@@ -45,6 +43,7 @@ import { isChartEmptySelector } from '../../../state/selectors/is_chart_empty';
 import { getSpecsById } from '../../../state/utils/spec';
 import { isLineAnnotation, AnnotationSpec } from '../../../utils/specs';
 import { AnnotationTooltip } from './annotation_tooltip';
+import { LineMarker } from './line_marker';
 
 interface AnnotationsDispatchProps {
   onPointerMove: typeof onPointerMoveAction;
@@ -64,59 +63,32 @@ interface AnnotationsStateProps {
 
 interface AnnotationsOwnProps {
   getChartContainerRef: BackwardRef;
+  chartAreaRef: RefObject<HTMLCanvasElement>;
 }
 
 type AnnotationsProps = AnnotationsDispatchProps & AnnotationsStateProps & AnnotationsOwnProps;
 
-const MARKER_TRANSFORMS = {
-  [Position.Right]: 'translate(-50%, 0%)',
-  [Position.Left]: 'translate(-100%, -50%)',
-  [Position.Top]: 'translate(-50%, -100%)',
-  [Position.Bottom]: 'translate(-50%, 0%)',
-};
-
-function getMarkerCentredTransform(alignment: Position, hasMarkerDimensions: boolean): string | undefined {
-  if (hasMarkerDimensions) {
-    return undefined;
-  }
-  return MARKER_TRANSFORMS[alignment];
-}
-
 function renderAnnotationLineMarkers(
+  chartAreaRef: RefObject<HTMLCanvasElement>,
   chartDimensions: Dimensions,
   annotationLines: AnnotationLineProps[],
   onDOMElementEnter: typeof onDOMElementEnterAction,
   onDOMElementLeave: typeof onDOMElementLeaveAction,
 ) {
-  return annotationLines.reduce<JSX.Element[]>((acc, { id, specId, datum, markers, panel }: AnnotationLineProps) => {
-    if (markers.length === 0) {
+  return annotationLines.reduce<JSX.Element[]>((acc, props: AnnotationLineProps) => {
+    if (props.markers.length === 0) {
       return acc;
     }
-    const { icon, color, position, alignment, dimension } = markers[0];
-    const style = {
-      color,
-      top: chartDimensions.top + position.top + panel.top,
-      left: chartDimensions.left + position.left + panel.left,
-    };
 
-    const transform = { transform: getMarkerCentredTransform(alignment, Boolean(dimension)) };
     acc.push(
-      <div
-        className="echAnnotation"
-        key={`annotation-${specId}-${id}`}
-        onMouseEnter={() => {
-          onDOMElementEnter({
-            createdBySpecId: specId,
-            id,
-            type: DOMElementType.LineAnnotationMarker,
-            datum,
-          });
-        }}
-        onMouseLeave={onDOMElementLeave}
-        style={{ ...style, ...transform }}
-      >
-        {icon}
-      </div>,
+      <LineMarker
+        {...props}
+        key={`annotation-${props.specId}-${props.id}`}
+        chartAreaRef={chartAreaRef}
+        chartDimensions={chartDimensions}
+        onDOMElementEnter={onDOMElementEnter}
+        onDOMElementLeave={onDOMElementLeave}
+      />,
     );
 
     return acc;
@@ -129,6 +101,7 @@ const AnnotationsComponent = ({
   annotationSpecs,
   annotationDimensions,
   getChartContainerRef,
+  chartAreaRef,
   chartId,
   zIndex,
   onPointerMove,
@@ -147,6 +120,7 @@ const AnnotationsComponent = ({
       if (isLineAnnotation(annotationSpec)) {
         const annotationLines = dimensions as AnnotationLineProps[];
         const lineMarkers = renderAnnotationLineMarkers(
+          chartAreaRef,
           chartDimensions,
           annotationLines,
           onDOMElementEnter,
@@ -157,7 +131,7 @@ const AnnotationsComponent = ({
     });
 
     return markers;
-  }, [onDOMElementEnter, onDOMElementLeave, chartDimensions, annotationDimensions, annotationSpecs]);
+  }, [annotationDimensions, annotationSpecs, chartAreaRef, chartDimensions, onDOMElementEnter, onDOMElementLeave]);
 
   const onScroll = useCallback(() => {
     onPointerMove({ x: -1, y: -1 }, Date.now());