Anomaly score annotations

[formgeist]

Describe the solution you'd like
In Observability, we have a number of new machine learning anomaly jobs that will be showing anomaly results in various chart types in Observability. On top of this, we have just implemented time-series annotations that use a similar feature like the annotation functionality in Elastic Charts.

Example of deployment annotation in APM

We have a design concept where we want to annotate the highest anomaly score per bucket of time in the chart, but filter so we only show when the score is larger than X. The concept shows the annotation without a vertical line but adjacent to the bottom of the chart.

Describe alternatives you've considered
Initially, we have considered using a vertical highlighting of the anomalies, similar to the existing implementation of anomaly detection in APM. But because we have several lines, annotations and colors all at once, the anomaly scores can very easily clutter on top of the actual data.

Additional context
We're mentioning an APM use case, but there's also an existing use case in Logs within Observability and we'll only see more annotations throughout Observability solutions in the near-term.

Kibana Cross Issues

• [Logs UI] [Log rate UI] colors for annotations indicating anomalies logs#4
• [APM] [APM] Additional ML integrations apm#172

Checklist

• this request is checked against already exist requests
• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[formgeist]

@elastic/elastic-charts We're happy to do a meeting to discuss the scope and requirements on this if anyone wants to participate?

[markov00]

Sure @formgeist, can you invite me, @rshen91 @monfera and @nickofthyme

[markov00]

This is a possible first workaround to make this work with the current implementation of the LineAnnotation :

import React from 'react';
import {
  Chart,
  ScaleType,
  Position,
  Axis,
  getAxisId,
  timeFormatter,
  getSpecId,
  Settings,
  LineAnnotation,
  BarSeries,
} from '../src';
import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
export class Playground extends React.Component {
  chartRef: React.RefObject<Chart> = React.createRef();
  onBrushEnd = (min: number, max: number) => {
    // eslint-disable-next-line no-console
    console.log({ min, max });
  };

  render() {
    return (
      <>
        <div className="chart">
          <Chart className={'story-chart'}>
            <Settings showLegend={true} theme={{}} />
            <Axis
              id={getAxisId('bottom')}
              title={'timestamp per 1 minute'}
              position={Position.Bottom}
              showOverlappingTicks={true}
              tickFormat={timeFormatter('HH:mm')}
            />
            <Axis
              id={getAxisId('left')}
              title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
              position={Position.Left}
              tickFormat={(d) => Number(d).toFixed(2)}
            />

            <BarSeries
              id={getSpecId('area')}
              xScaleType={ScaleType.Time}
              yScaleType={ScaleType.Linear}
              xAccessor={0}
              yAccessors={[1]}
              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 50).map((d) => {
                return [...d, d[1] - 10];
              })}
            />
            <LineAnnotation
              id={'line'}
              style={{
                line: {
                  opacity: 0, // this will hide the line
                },
              }}
              dataValues={[
                { dataValue: KIBANA_METRICS.metrics.kibana_os_load[0].data[3][0], details: 'anomaly 1' },
                { dataValue: KIBANA_METRICS.metrics.kibana_os_load[0].data[7][0], details: 'anomaly 2' },
                { dataValue: KIBANA_METRICS.metrics.kibana_os_load[0].data[10][0], details: 'anomaly 3' },
                { dataValue: KIBANA_METRICS.metrics.kibana_os_load[0].data[11][0], details: 'anomaly 4' },
              ]}
              domainType={'xDomain'}
              marker={
                <div
                  style={{
                    marginTop: '2px',
                    width: '10px', // the width is statically confiured, see #556
                    height: '4px',
                    background: 'red',
                  }}
                />
              }
            />
          </Chart>
        </div>
      </>
    );
  }
}

The linked issues, #555 and #556 will take care of adding the annotation to the legend and a valid marker width

[formgeist]

@markov00 Thanks for the example and for opening those new issues to help with the legend and marker widths. I think we can close this issue as it's resolved by your example and we'll follow the progress of the open issues, as we don't have a requirement right now to have this available in Elastic Charts.