fix: annotation markers render when parent size is computed

markov00 · markov00 · commit 2b0c4723cc48 · 2020-06-03T17:34:36.000+02:00
diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -17,7 +17,7 @@
  * under the License. */
 
 import React from 'react';
-import { Example } from '../stories/treemap/6_custom_style';
+import { Example } from '../stories/annotations/lines/3_x_time';
 
 export class Playground extends React.Component {
   render() {
diff --git a/src/chart_types/xy_chart/renderer/dom/annotations/annotations.tsx b/src/chart_types/xy_chart/renderer/dom/annotations/annotations.tsx
@@ -55,6 +55,32 @@ interface AnnotationsOwnProps {
 
 type AnnotationsProps = AnnotationsDispatchProps & AnnotationsStateProps & AnnotationsOwnProps;
 
+function renderAnnotationLineMarkers(
+  chartDimensions: Dimensions,
+  annotationLines: AnnotationLineProps[],
+  id: AnnotationId,
+) {
+  return annotationLines.reduce<JSX.Element[]>((markers, { marker }: AnnotationLineProps, index: number) => {
+    if (!marker) {
+      return markers;
+    }
+
+    const { icon, color, position } = marker;
+    const style = {
+      color,
+      top: chartDimensions.top + position.top,
+      left: chartDimensions.left + position.left,
+    };
+
+    markers.push(
+      <div className="echAnnotation" style={{ ...style }} key={`annotation-${id}-${index}`}>
+        {icon}
+      </div>,
+    );
+
+    return markers;
+  }, []);
+}
 const AnnotationsComponent = ({
   tooltipState,
   isChartEmpty,
@@ -65,31 +91,6 @@ const AnnotationsComponent = ({
   chartId,
   onPointerMove,
 }: AnnotationsProps) => {
-  const renderAnnotationLineMarkers = useCallback(
-    (annotationLines: AnnotationLineProps[], id: AnnotationId) =>
-      annotationLines.reduce<JSX.Element[]>((markers, { marker }: AnnotationLineProps, index: number) => {
-        if (!marker) {
-          return markers;
-        }
-
-        const { icon, color, position } = marker;
-        const style = {
-          color,
-          top: chartDimensions.top + position.top,
-          left: chartDimensions.left + position.left,
-        };
-
-        markers.push(
-          <div className="echAnnotation" style={{ ...style }} key={`annotation-${id}-${index}`}>
-            {icon}
-          </div>,
-        );
-
-        return markers;
-      }, []),
-    [], // eslint-disable-line react-hooks/exhaustive-deps
-  );
-
   const renderAnnotationMarkers = useCallback((): JSX.Element[] => {
     const markers: JSX.Element[] = [];
 
@@ -101,13 +102,13 @@ const AnnotationsComponent = ({
 
       if (isLineAnnotation(annotationSpec)) {
         const annotationLines = dimensions as AnnotationLineProps[];
-        const lineMarkers = renderAnnotationLineMarkers(annotationLines, id);
+        const lineMarkers = renderAnnotationLineMarkers(chartDimensions, annotationLines, id);
         markers.push(...lineMarkers);
       }
     });
 
     return markers;
-  }, [annotationDimensions, annotationSpecs, renderAnnotationLineMarkers]);
+  }, [chartDimensions, annotationDimensions, annotationSpecs]);
 
   const onScroll = useCallback(() => {
     onPointerMove({ x: -1, y: -1 }, new Date().getTime());
