[ML] Fix event rate chart annotation position (#91899) (#92062)

Author: markov00

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx

@@ -78,7 +78,6 @@ export const EventRateChart: FC<Props> = ({
               <OverlayRange
                 key={i}
                 overlayKey={i}
-                eventRateChartData={eventRateChartData}
                 start={range.start}
                 end={range.end}
                 color={range.color}

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx

@@ -7,29 +7,18 @@
 
 import React, { FC } from 'react';
 import { EuiIcon } from '@elastic/eui';
-import { RectAnnotation, LineAnnotation, AnnotationDomainTypes } from '@elastic/charts';
-import { LineChartPoint } from '../../../../common/chart_loader';
+import { RectAnnotation, LineAnnotation, AnnotationDomainTypes, Position } from '@elastic/charts';
 import { timeFormatter } from '../../../../../../../../common/util/date_utils';
 
 interface Props {
   overlayKey: number;
-  eventRateChartData: LineChartPoint[];
   start: number;
   end: number;
   color: string;
   showMarker?: boolean;
 }
 
-export const OverlayRange: FC<Props> = ({
-  overlayKey,
-  eventRateChartData,
-  start,
-  end,
-  color,
-  showMarker = true,
-}) => {
-  const maxHeight = Math.max(...eventRateChartData.map((e) => e.value));
-
+export const OverlayRange: FC<Props> = ({ overlayKey, start, end, color, showMarker = true }) => {
   return (
     <>
       <RectAnnotation
@@ -41,8 +30,6 @@ export const OverlayRange: FC<Props> = ({
             coordinates: {
               x0: start,
               x1: end,
-              y0: 0,
-              y1: maxHeight,
             },
           },
         ]}
@@ -62,16 +49,16 @@ export const OverlayRange: FC<Props> = ({
             opacity: 0,
           },
         }}
+        markerPosition={Position.Bottom}
+        hideTooltips={true}
         marker={
           showMarker ? (
-            <>
-              <div style={{ marginLeft: '20px' }}>
-                <div style={{ textAlign: 'center' }}>
-                  <EuiIcon type="arrowUp" />
-                </div>
-                <div style={{ fontWeight: 'normal', color: '#343741' }}>{timeFormatter(start)}</div>
+            <div>
+              <div style={{ textAlign: 'center' }}>
+                <EuiIcon type="arrowUp" />
               </div>
-            </>
+              <div style={{ fontWeight: 'normal', color: '#343741' }}>{timeFormatter(start)}</div>
+            </div>
           ) : undefined
         }
       />