[7.x] [APM] Elastic chart issues (#84238)

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx

@@ -90,7 +90,12 @@ export function ErrorDistribution({ distribution, title }: Props) {
             showOverlappingTicks
             tickFormat={xFormatter}
           />
-          <Axis id="y-axis" position={Position.Left} ticks={2} showGridLines />
+          <Axis
+            id="y-axis"
+            position={Position.Left}
+            ticks={2}
+            gridLine={{ visible: true }}
+          />
           <HistogramBarSeries
             minBarHeight={2}
             id="errorOccurrences"

x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx

@@ -224,7 +224,7 @@ export function TransactionDistribution({
             id="y-axis"
             position={Position.Left}
             ticks={3}
-            showGridLines
+            gridLine={{ visible: true }}
             tickFormat={(value: number) => formatYShort(value)}
           />
           <HistogramBarSeries

x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx

@@ -5,28 +5,35 @@
  */
 
 import {
+  AnnotationDomainTypes,
   AreaSeries,
   Axis,
   Chart,
   CurveType,
   LegendItemListener,
+  LineAnnotation,
   LineSeries,
   niceTimeFormatter,
   Placement,
   Position,
   ScaleType,
   Settings,
+  YDomainRange,
 } from '@elastic/charts';
+import { EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useChartTheme } from '../../../../../observability/public';
+import { asAbsoluteDateTime } from '../../../../common/utils/formatters';
 import { TimeSeries } from '../../../../typings/timeseries';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
+import { useTheme } from '../../../hooks/useTheme';
 import { useUrlParams } from '../../../hooks/useUrlParams';
+import { useAnnotations } from '../../../hooks/use_annotations';
 import { useChartPointerEvent } from '../../../hooks/use_chart_pointer_event';
 import { unit } from '../../../style/variables';
-import { Annotations } from './annotations';
 import { ChartContainer } from './chart_container';
 import { onBrushEnd } from './helper/helper';
 
@@ -45,6 +52,7 @@ interface Props {
    */
   yTickFormat?: (y: number) => string;
   showAnnotations?: boolean;
+  yDomain?: YDomainRange;
 }
 
 export function TimeseriesChart({
@@ -56,12 +64,16 @@ export function TimeseriesChart({
   yLabelFormat,
   yTickFormat,
   showAnnotations = true,
+  yDomain,
 }: Props) {
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
+  const { annotations } = useAnnotations();
   const chartTheme = useChartTheme();
   const { pointerEvent, setPointerEvent } = useChartPointerEvent();
   const { urlParams } = useUrlParams();
+  const theme = useTheme();
+
   const { start, end } = urlParams;
 
   useEffect(() => {
@@ -83,6 +95,8 @@ export function TimeseriesChart({
         y === null || y === undefined
     );
 
+  const annotationColor = theme.eui.euiColorSecondary;
+
   return (
     <ChartContainer hasData={!isEmpty} height={height} status={fetchStatus}>
       <Chart ref={chartRef} id={id}>
@@ -108,17 +122,35 @@ export function TimeseriesChart({
           position={Position.Bottom}
           showOverlappingTicks
           tickFormat={xFormatter}
+          gridLine={{ visible: false }}
         />
         <Axis
+          domain={yDomain}
           id="y-axis"
           ticks={3}
           position={Position.Left}
           tickFormat={yTickFormat ? yTickFormat : yLabelFormat}
           labelFormat={yLabelFormat}
-          showGridLines
         />
 
-        {showAnnotations && <Annotations />}
+        {showAnnotations && (
+          <LineAnnotation
+            id="annotations"
+            domainType={AnnotationDomainTypes.XDomain}
+            dataValues={annotations.map((annotation) => ({
+              dataValue: annotation['@timestamp'],
+              header: asAbsoluteDateTime(annotation['@timestamp']),
+              details: `${i18n.translate('xpack.apm.chart.annotation.version', {
+                defaultMessage: 'Version',
+              })} ${annotation.text}`,
+            }))}
+            style={{
+              line: { strokeWidth: 1, stroke: annotationColor, opacity: 1 },
+            }}
+            marker={<EuiIcon type="dot" color={annotationColor} />}
+            markerPosition={Position.Top}
+          />
+        )}
 
         {timeseries.map((serie) => {
           const Series = serie.type === 'area' ? AreaSeries : LineSeries;

x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx

@@ -5,27 +5,35 @@
  */
 
 import {
+  AnnotationDomainTypes,
   AreaSeries,
   Axis,
   Chart,
   CurveType,
+  LineAnnotation,
   niceTimeFormatter,
   Placement,
   Position,
   ScaleType,
   Settings,
 } from '@elastic/charts';
+import { EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useChartTheme } from '../../../../../../observability/public';
-import { asPercent } from '../../../../../common/utils/formatters';
+import {
+  asAbsoluteDateTime,
+  asPercent,
+} from '../../../../../common/utils/formatters';
 import { TimeSeries } from '../../../../../typings/timeseries';
 import { FETCH_STATUS } from '../../../../hooks/useFetcher';
+import { useTheme } from '../../../../hooks/useTheme';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { useAnnotations } from '../../../../hooks/use_annotations';
 import { useChartPointerEvent } from '../../../../hooks/use_chart_pointer_event';
 import { unit } from '../../../../style/variables';
-import { Annotations } from '../../charts/annotations';
 import { ChartContainer } from '../../charts/chart_container';
 import { onBrushEnd } from '../../charts/helper/helper';
 
@@ -44,9 +52,11 @@ export function TransactionBreakdownChartContents({
 }: Props) {
   const history = useHistory();
   const chartRef = React.createRef<Chart>();
+  const { annotations } = useAnnotations();
   const chartTheme = useChartTheme();
   const { pointerEvent, setPointerEvent } = useChartPointerEvent();
   const { urlParams } = useUrlParams();
+  const theme = useTheme();
   const { start, end } = urlParams;
 
   useEffect(() => {
@@ -64,6 +74,8 @@ export function TransactionBreakdownChartContents({
 
   const xFormatter = niceTimeFormatter([min, max]);
 
+  const annotationColor = theme.eui.euiColorSecondary;
+
   return (
     <ChartContainer height={height} hasData={!!timeseries} status={fetchStatus}>
       <Chart ref={chartRef} id="timeSpentBySpan">
@@ -85,6 +97,7 @@ export function TransactionBreakdownChartContents({
           position={Position.Bottom}
           showOverlappingTicks
           tickFormat={xFormatter}
+          gridLine={{ visible: false }}
         />
         <Axis
           id="y-axis"
@@ -93,7 +106,24 @@ export function TransactionBreakdownChartContents({
           tickFormat={(y: number) => asPercent(y ?? 0, 1)}
         />
 
-        {showAnnotations && <Annotations />}
+        {showAnnotations && (
+          <LineAnnotation
+            id="annotations"
+            domainType={AnnotationDomainTypes.XDomain}
+            dataValues={annotations.map((annotation) => ({
+              dataValue: annotation['@timestamp'],
+              header: asAbsoluteDateTime(annotation['@timestamp']),
+              details: `${i18n.translate('xpack.apm.chart.annotation.version', {
+                defaultMessage: 'Version',
+              })} ${annotation.text}`,
+            }))}
+            style={{
+              line: { strokeWidth: 1, stroke: annotationColor, opacity: 1 },
+            }}
+            marker={<EuiIcon type="dot" color={annotationColor} />}
+            markerPosition={Position.Top}
+          />
+        )}
 
         {timeseries?.length ? (
           timeseries.map((serie) => {