[APM] Fix confusing request/minute viz (#69143)

Author: sorenlouv

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

@@ -24,10 +24,10 @@ import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
 import { ITransactionChartData } from '../../../../selectors/chartSelectors';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import {
-  asInteger,
   tpmUnit,
   TimeFormatter,
   getDurationFormatter,
+  asDecimal,
 } from '../../../../utils/formatters';
 import { MLJobLink } from '../../Links/MachineLearningLinks/MLJobLink';
 import { LicenseContext } from '../../../../context/LicenseContext';
@@ -86,7 +86,7 @@ export class TransactionCharts extends Component<TransactionChartProps> {
   public getTPMFormatter = (t: number) => {
     const { urlParams } = this.props;
     const unit = tpmUnit(urlParams.transactionType);
-    return `${asInteger(t)} ${unit}`;
+    return `${asDecimal(t)} ${unit}`;
   };
 
   public getTPMTooltipFormatter = (p: Coordinate) => {

x-pack/plugins/apm/public/selectors/__tests__/chartSelectors.test.ts

@@ -15,6 +15,8 @@ import {
   warningColor,
   errorColor,
 } from '../../utils/httpStatusCodeToColor';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ApmTimeSeriesResponse } from '../../../server/lib/transactions/charts/get_timeseries_data/transform';
 
 describe('chartSelectors', () => {
   describe('getAnomalyScoreSeries', () => {
@@ -98,7 +100,7 @@ describe('chartSelectors', () => {
   });
 
   describe('getTpmSeries', () => {
-    const apmTimeseries = {
+    const apmTimeseries: ApmTimeSeriesResponse = {
       responseTimes: {
         avg: [],
         p95: [],
@@ -107,13 +109,14 @@ describe('chartSelectors', () => {
       tpmBuckets: [
         {
           key: 'HTTP 2xx',
+          avg: 3.5,
           dataPoints: [
             { x: 0, y: 5 },
-            { x: 0, y: 2 },
+            { x: 1, y: 2 },
           ],
         },
-        { key: 'HTTP 4xx', dataPoints: [{ x: 0, y: 1 }] },
-        { key: 'HTTP 5xx', dataPoints: [{ x: 0, y: 0 }] },
+        { key: 'HTTP 4xx', avg: 1, dataPoints: [{ x: 0, y: 1 }] },
+        { key: 'HTTP 5xx', avg: 0, dataPoints: [{ x: 0, y: 0 }] },
       ],
       overallAvgDuration: 200,
     };
@@ -125,7 +128,7 @@ describe('chartSelectors', () => {
           color: successColor,
           data: [
             { x: 0, y: 5 },
-            { x: 0, y: 2 },
+            { x: 1, y: 2 },
           ],
           legendValue: '3.5 tpm',
           title: 'HTTP 2xx',
@@ -154,7 +157,7 @@ describe('chartSelectors', () => {
         expect(
           getTpmSeries({
             ...apmTimeseries,
-            tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }],
+            tpmBuckets: [{ key, avg: 0, dataPoints: [{ x: 0, y: 0 }] }],
           })[0].color
         ).toEqual(theme.euiColorSecondary);
       });
@@ -166,7 +169,7 @@ describe('chartSelectors', () => {
         expect(
           getTpmSeries({
             ...apmTimeseries,
-            tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }],
+            tpmBuckets: [{ key, avg: 0, dataPoints: [{ x: 0, y: 0 }] }],
           })[0].color
         ).toEqual(theme.euiColorSecondary);
       });
@@ -178,7 +181,7 @@ describe('chartSelectors', () => {
         expect(
           getTpmSeries({
             ...apmTimeseries,
-            tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }],
+            tpmBuckets: [{ key, avg: 0, dataPoints: [{ x: 0, y: 0 }] }],
           })[0].color
         ).toEqual(theme.euiColorSecondary);
       });
@@ -190,7 +193,7 @@ describe('chartSelectors', () => {
         expect(
           getTpmSeries({
             ...apmTimeseries,
-            tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }],
+            tpmBuckets: [{ key, avg: 0, dataPoints: [{ x: 0, y: 0 }] }],
           })[0].color
         ).toEqual(theme.euiColorSecondary);
       });
@@ -202,7 +205,7 @@ describe('chartSelectors', () => {
         expect(
           getTpmSeries({
             ...apmTimeseries,
-            tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }],
+            tpmBuckets: [{ key, avg: 0, dataPoints: [{ x: 0, y: 0 }] }],
           })[0].color
         ).toEqual(theme.euiColorDanger);
       });
@@ -214,7 +217,7 @@ describe('chartSelectors', () => {
         expect(
           getTpmSeries({
             ...apmTimeseries,
-            tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }],
+            tpmBuckets: [{ key, avg: 0, dataPoints: [{ x: 0, y: 0 }] }],
           })[0].color
         ).toEqual(theme.euiColorDanger);
       });
@@ -226,7 +229,7 @@ describe('chartSelectors', () => {
         expect(
           getTpmSeries({
             ...apmTimeseries,
-            tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }],
+            tpmBuckets: [{ key, avg: 0, dataPoints: [{ x: 0, y: 0 }] }],
           })[0].color
         ).toEqual(theme.euiColorDanger);
       });
@@ -238,7 +241,7 @@ describe('chartSelectors', () => {
         expect(
           getTpmSeries({
             ...apmTimeseries,
-            tpmBuckets: [{ key, dataPoints: [{ x: 0, y: 0 }] }],
+            tpmBuckets: [{ key, avg: 0, dataPoints: [{ x: 0, y: 0 }] }],
           })[0].color
         ).toEqual(theme.euiColorDanger);
       });

x-pack/plugins/apm/public/selectors/chartSelectors.ts

@@ -7,7 +7,6 @@
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { difference, zipObject } from 'lodash';
-import mean from 'lodash.mean';
 import { rgba } from 'polished';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TimeSeriesAPIResponse } from '../../server/lib/transactions/charts';
@@ -72,15 +71,14 @@ export function getResponseTimeSeries({
 }: TimeSeriesAPIResponse) {
   const { overallAvgDuration } = apmTimeseries;
   const { avg, p95, p99 } = apmTimeseries.responseTimes;
-  const formattedDuration = asDuration(overallAvgDuration);
 
   const series: TimeSeries[] = [
     {
       title: i18n.translate('xpack.apm.transactions.chart.averageLabel', {
         defaultMessage: 'Avg.',
       }),
       data: avg,
-      legendValue: formattedDuration,
+      legendValue: asDuration(overallAvgDuration),
       type: 'linemark',
       color: theme.euiColorVis1,
     },
@@ -171,11 +169,10 @@ export function getTpmSeries(
   }
 
   return tpmBuckets.map((bucket) => {
-    const average = mean(bucket.dataPoints.map((p) => p.y));
     return {
       title: bucket.key,
       data: bucket.dataPoints,
-      legendValue: `${asDecimal(average)} ${tpmUnit(transactionType || '')}`,
+      legendValue: `${asDecimal(bucket.avg)} ${tpmUnit(transactionType || '')}`,
       type: 'linemark',
       color: getColor(bucket.key),
     };