[APM] Fill in vertical gaps in breakdown metrics data (#43663) (#44598)

* [APM] Fill in vertical gaps in breakdown metrics data

Closes #43650.

* Remove hasData prop, just pad to 0

x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.test.ts

@@ -134,4 +134,32 @@ describe('getTransactionBreakdown', () => {
 
     expect(timeseries.map(serie => serie.title)).toEqual(['app', 'http']);
   });
+
+  it('fills in gaps for a given timestamp', async () => {
+    const clientSpy = jest.fn().mockReturnValueOnce(dataResponse);
+
+    const response = await getTransactionBreakdown({
+      serviceName: 'myServiceName',
+      transactionType: 'request',
+      setup: {
+        start: 0,
+        end: 500000,
+        client: { search: clientSpy } as any,
+        config: {
+          get: () => 'myIndex' as any,
+          has: () => true
+        },
+        uiFiltersES: []
+      }
+    });
+
+    const { timeseries } = response;
+
+    const appTimeseries = timeseries.find(series => series.title === 'app');
+
+    // missing values should be 0 if other span types do have data for that timestamp
+    expect((appTimeseries as NonNullable<typeof appTimeseries>).data[1].y).toBe(
+      0
+    );
+  });
 });

x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { flatten, sortByOrder } from 'lodash';
+import { flatten, sortByOrder, last } from 'lodash';
 import { idx } from '@kbn/elastic-idx';
 import {
   SERVICE_NAME,
@@ -159,7 +159,7 @@ export async function getTransactionBreakdown({
       const formattedValues = formatBucket(bucket);
       const time = bucket.key;
 
-      return kpiNames.reduce((p, kpiName) => {
+      const updatedSeries = kpiNames.reduce((p, kpiName) => {
         const { name, percentage } = formattedValues.find(
           val => val.name === kpiName
         ) || {
@@ -178,6 +178,29 @@ export async function getTransactionBreakdown({
           })
         };
       }, prev);
+
+      const lastValues = Object.values(updatedSeries).map(last);
+
+      // If for a given timestamp, some series have data, but others do not,
+      // we have to set any null values to 0 to make sure the stacked area chart
+      // is drawn correctly.
+      // If we set all values to 0, the chart always displays null values as 0,
+      // and the chart looks weird.
+      const hasAnyValues = lastValues.some(value => value.y !== null);
+      const hasNullValues = lastValues.some(value => value.y === null);
+
+      if (hasAnyValues && hasNullValues) {
+        Object.values(updatedSeries).forEach(series => {
+          const value = series[series.length - 1];
+          const isEmpty = value.y === null;
+          if (isEmpty) {
+            // local mutation to prevent complicated map/reduce calls
+            value.y = 0;
+          }
+        });
+      }
+
+      return updatedSeries;
     },
     {} as Record<string, Array<{ x: number; y: number | null }>>
   );

x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/mock-responses/data.json

@@ -91,21 +91,6 @@
             "doc_count_error_upper_bound": 0,
             "sum_other_doc_count": 0,
             "buckets": [
-              {
-                "key": "app",
-                "doc_count": 16,
-                "subtypes": {
-                  "doc_count_error_upper_bound": 0,
-                  "sum_other_doc_count": 0,
-                  "buckets": [
-                    {
-                      "key": "",
-                      "doc_count": 16,
-                      "total_self_time_per_subtype": { "value": 73798 }
-                    }
-                  ]
-                }
-              },
               {
                 "key": "db",
                 "doc_count": 11,