[8.x] [ML] Anomaly explorer: Show Data Gaps and Connect Anomalous Points on Single Metric Charts (#194119) (#194426)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Anomaly explorer: Show Data Gaps and Connect Anomalous Points on Single Metric Charts (#194119)](https://github.com/elastic/kibana/pull/194119)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
2025-04-24 17:59:23 -04:00 · 2024-10-01 00:15:45 +10:00 · 2024-10-01 00:15:45 +10:00 · 9e1829eacd
commit 9e1829eacd
parent 5afb442c86
2 changed files with 39 additions and 9 deletions
--- a/x-pack/plugins/ml/server/models/results_service/anomaly_charts.ts
+++ b/x-pack/plugins/ml/server/models/results_service/anomaly_charts.ts
@ -1055,9 +1055,11 @@ export function anomalyChartsDataProvider(mlClient: MlClient, client: IScopedClu
            // differently because of how the source data is structured.
            // For rare chart values we are only interested wether a value is either `0` or not,
            // `0` acts like a flag in the chart whether to display the dot/marker.
-            // All other charts (single metric, population) are metric based and with
+            // For single metric chart, we need to pass null values to display data gaps.
+            // All other charts are distribution based and with
            // those a value of `null` acts as the flag to hide a data point.
            if (
+              chartType === CHART_TYPE.SINGLE_METRIC ||
              (chartType === CHART_TYPE.EVENT_DISTRIBUTION && value > 0) ||
              (chartType !== CHART_TYPE.EVENT_DISTRIBUTION && value !== null)
            ) {
@ -1079,6 +1081,7 @@ export function anomalyChartsDataProvider(mlClient: MlClient, client: IScopedClu
      // Iterate through the anomaly records, adding anomalyScore properties
      // to the chartData entries for anomalous buckets.
      const chartDataForPointSearch = getChartDataForPointSearch(chartData, records[0], chartType);
+      let shouldSortChartData = false;
      each(records, (record) => {
        // Look for a chart point with the same time as the record.
        // If none found, insert a point for anomalies due to a gap in the data.
@ -1087,10 +1090,17 @@ export function anomalyChartsDataProvider(mlClient: MlClient, client: IScopedClu
        if (chartPoint === undefined) {
          chartPoint = { date: recordTime, value: null };
          chartData.push(chartPoint);
+          shouldSortChartData = true;
        }
        if (chartPoint !== undefined) {
          chartPoint.anomalyScore = record.record_score;

+          // If it is an empty chart point, set the value to the actual value
+          // To properly display the anomaly marker on the chart
+          if (chartPoint.value === null) {
+            chartPoint.value = Array.isArray(record.actual) ? record.actual[0] : record.actual;
+          }
+
          if (record.actual !== undefined) {
            chartPoint.actual = record.actual;
            chartPoint.typical = record.typical;
@ -1119,6 +1129,12 @@ export function anomalyChartsDataProvider(mlClient: MlClient, client: IScopedClu
        }
      });

+      // Chart data is sorted by default, but if we added points for anomalies,
+      // we need to sort again to ensure the points are in the correct order.
+      if (shouldSortChartData) {
+        chartData.sort((a, b) => a.date - b.date);
+      }
+
      // Add a scheduledEvents property to any points in the chart data set
      // which correspond to times of scheduled events for the job.
      if (scheduledEvents !== undefined) {
@ -1126,14 +1142,14 @@ export function anomalyChartsDataProvider(mlClient: MlClient, client: IScopedClu
          const chartPoint = findChartPointForTime(chartDataForPointSearch, Number(time));
          if (chartPoint !== undefined) {
            chartPoint.scheduledEvents = events;
-            // We do not want to create additional points for single metric charts
-            // as it could break the chart.
-          } else if (chartType !== CHART_TYPE.SINGLE_METRIC) {
+          } else {
            // If there's no underlying metric data point for the scheduled event,
            // create a new chart point with a value of 0.
+            // Except for Single Metric Charts, where we want to create a point at the bottom of the chart.
+            // Which is not always `0`.
            const eventChartPoint: ChartPoint = {
              date: Number(time),
-              value: 0,
+              value: chartType === CHART_TYPE.SINGLE_METRIC ? null : 0,
              entity: SCHEDULE_EVENT_MARKER_ENTITY,
              scheduledEvents: events,
            };