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

markov00 · Feb 19, 2021 · a7f2e46 · a7f2e46
1 parent 269a633
commit a7f2e46
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 23 deletions.
diff --git a/...ic/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx b/...ic/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}

diff --git a/...ublic/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx b/...ublic/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
  }
  />