[Lens] align formatters for point and range annotations (elastic#177199)

## Summary

Resolves partially elastic#176768

Range annotations tooltip before:
<img width="547" alt="Screenshot 2024-02-19 at 15 12 55"
src="https://github.com/elastic/kibana/assets/4283304/59c493ab-903b-4c22-a02a-947496861c32">


1. Aligning the formatters
Right now we use an advanced setting `dateFormat` to set a formatter for
point annotation, but we use a chart axis formatter to set a formatter
for range annotation. The second one doesn't really make sense and I
would consider this to be a bug, so I aligned them. The original ask
from Observability team is also to allow pass a custom formatter, but
that's a slightly bigger ask so I've decided to not include it in this
PR.

2. Aligning the look
I also don't like how range annotation tooltip looked like so I decided
to align it too to the point one.


Here's how point annotation tooltip looks like:
<img width="552" alt="Screenshot 2024-02-19 at 15 11 27"
src="https://github.com/elastic/kibana/assets/4283304/39932ef1-958e-4ed9-82c0-3339ecd9f7e7">

Here's how range annotation tooltip looks like after the changes:
<img width="621" alt="Screenshot 2024-02-19 at 15 11 35"
src="https://github.com/elastic/kibana/assets/4283304/50d7da57-0972-4a5c-be1e-65da2121fa36">

src/plugins/chart_expressions/expression_xy/public/components/annotations.scss

@@ -58,4 +58,8 @@
   position: relative;
   text-align: right;
   font-weight: $euiFontWeightRegular;
+}
+
+.echAnnotation {
+  max-width: 500px;
 }

src/plugins/chart_expressions/expression_xy/public/components/annotations.tsx

@@ -23,9 +23,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
+  EuiIcon,
   EuiPanel,
   EuiSpacer,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import type {
@@ -45,7 +45,7 @@ import { mapVerticalToHorizontalPlacement, LINES_MARKER_SIZE } from '../helpers'
 export interface AnnotationsProps {
   groupedLineAnnotations: MergedAnnotation[];
   rangeAnnotations: ManualRangeEventAnnotationRow[];
-  formatter?: FieldFormat;
+  timeFormat?: string;
   isHorizontal: boolean;
   paddingMap: Partial<Record<Position, number>>;
   simpleView?: boolean;
@@ -270,7 +270,7 @@ RectAnnotation.displayName = 'RectAnnotation';
 export const Annotations = ({
   groupedLineAnnotations,
   rangeAnnotations,
-  formatter,
+  timeFormat,
   isHorizontal,
   paddingMap,
   simpleView,
@@ -355,18 +355,30 @@ export const Annotations = ({
             id={id}
             key={id}
             customTooltip={() => (
-              <div className="echTooltip xyAnnotationTooltip">
-                <div className="echTooltip__header">
-                  <EuiText size="xs">
-                    <h4>
-                      {formatter
-                        ? `${formatter.convert(time)} — ${formatter?.convert(endTime)}`
-                        : `${moment(time).toISOString()} — ${moment(endTime).toISOString()}`}
-                    </h4>
-                  </EuiText>
+              <EuiPanel
+                color="plain"
+                hasShadow={false}
+                hasBorder={false}
+                paddingSize="none"
+                borderRadius="none"
+                className="xyAnnotationTooltip"
+              >
+                <div className="xyAnnotationTooltip__row">
+                  <EuiFlexGroup gutterSize="xs">
+                    <EuiFlexItem grow={false}>
+                      <EuiIcon type="stopFilled" color={color} />
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <EuiTitle size="xxxs">
+                        <h6>{label}</h6>
+                      </EuiTitle>
+                      <EuiFlexItem>{`${moment(time).format(timeFormat)} — ${moment(endTime).format(
+                        timeFormat
+                      )}`}</EuiFlexItem>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
                 </div>
-                <div className="xyAnnotationTooltipDetail">{label}</div>
-              </div>
+              </EuiPanel>
             )}
             dataValues={[
               {

src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -212,10 +212,8 @@ export function XYChart({
   syncTooltips,
   syncCursor,
   shouldUseVeil,
-
   useLegacyTimeAxis,
   renderComplete,
-
   uiState,
   timeFormat,
   overrides,
@@ -1021,7 +1019,7 @@ export function XYChart({
             <Annotations
               rangeAnnotations={rangeAnnotations}
               groupedLineAnnotations={groupedLineAnnotations}
-              formatter={xAxisFormatter}
+              timeFormat={timeFormat}
               isHorizontal={shouldRotate}
               paddingMap={linesPaddings}
               isBarChart={filteredBarLayers.length > 0}