[APM] Chart units don't update when toggling the chart legends (#74931)

* changing unit when legend is disabled

* changing unit when legend is disabled

* show individual units in the tooltip

* addressing PR comment

* increasing duration threshold

* change formatter based on available legends

* addressing PR comment

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/index.js

@@ -79,6 +79,10 @@ export class InnerCustomPlot extends PureComponent {
         return i === _i ? !disabledValue : !!disabledValue;
       });
 
+      if (typeof this.props.onToggleLegend === 'function') {
+        this.props.onToggleLegend(nextSeriesEnabledState);
+      }
+
       return {
         seriesEnabledState: nextSeriesEnabledState,
       };
@@ -235,6 +239,7 @@ InnerCustomPlot.propTypes = {
     })
   ),
   noHits: PropTypes.bool,
+  onToggleLegend: PropTypes.func,
 };
 
 InnerCustomPlot.defaultProps = {

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

@@ -4,17 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { i18n } from '@kbn/i18n';
 import { EuiTitle } from '@elastic/eui';
-import { TransactionLineChart } from './TransactionLineChart';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useAvgDurationByBrowser } from '../../../../hooks/useAvgDurationByBrowser';
+import { getDurationFormatter } from '../../../../utils/formatters';
 import {
-  getMaxY,
   getResponseTimeTickFormatter,
   getResponseTimeTooltipFormatter,
-} from '.';
-import { getDurationFormatter } from '../../../../utils/formatters';
-import { useAvgDurationByBrowser } from '../../../../hooks/useAvgDurationByBrowser';
+  getMaxY,
+} from './helper';
+import { TransactionLineChart } from './TransactionLineChart';
 
 export function BrowserLineChart() {
   const { data } = useAvgDurationByBrowser();

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

@@ -5,29 +5,21 @@
  */
 
 import React, { useCallback } from 'react';
-import {
-  Coordinate,
-  RectCoordinate,
-} from '../../../../../../typings/timeseries';
+import { Coordinate, TimeSeries } from '../../../../../../typings/timeseries';
 import { useChartsSync } from '../../../../../hooks/useChartsSync';
 // @ts-ignore
 import CustomPlot from '../../CustomPlot';
 
 interface Props {
-  series: Array<{
-    color: string;
-    title: React.ReactNode;
-    titleShort?: React.ReactNode;
-    data: Array<Coordinate | RectCoordinate>;
-    type: string;
-  }>;
+  series: TimeSeries[];
   truncateLegends?: boolean;
   tickFormatY: (y: number) => React.ReactNode;
   formatTooltipValue: (c: Coordinate) => React.ReactNode;
   yMax?: string | number;
   height?: number;
   stacked?: boolean;
   onHover?: () => void;
+  onToggleLegend?: (disabledSeriesState: boolean[]) => void;
 }
 
 function TransactionLineChart(props: Props) {
@@ -40,6 +32,7 @@ function TransactionLineChart(props: Props) {
     truncateLegends,
     stacked = false,
     onHover,
+    onToggleLegend,
   } = props;
 
   const syncedChartsProps = useChartsSync();
@@ -66,6 +59,7 @@ function TransactionLineChart(props: Props) {
       height={height}
       truncateLegends={truncateLegends}
       {...(stacked ? { stackBy: 'y' } : {})}
+      onToggleLegend={onToggleLegend}
     />
   );
 }

x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/helper.test.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  getResponseTimeTickFormatter,
+  getResponseTimeTooltipFormatter,
+  getMaxY,
+} from './helper';
+import {
+  getDurationFormatter,
+  toMicroseconds,
+} from '../../../../utils/formatters';
+import { TimeSeries } from '../../../../../typings/timeseries';
+
+describe('transaction chart helper', () => {
+  describe('getResponseTimeTickFormatter', () => {
+    it('formattes time tick in minutes', () => {
+      const formatter = getDurationFormatter(toMicroseconds(11, 'minutes'));
+      const timeTickFormatter = getResponseTimeTickFormatter(formatter);
+      expect(timeTickFormatter(toMicroseconds(60, 'seconds'))).toEqual(
+        '1.0 min'
+      );
+    });
+    it('formattes time tick in seconds', () => {
+      const formatter = getDurationFormatter(toMicroseconds(11, 'seconds'));
+      const timeTickFormatter = getResponseTimeTickFormatter(formatter);
+      expect(timeTickFormatter(toMicroseconds(6, 'seconds'))).toEqual('6.0 s');
+    });
+  });
+  describe('getResponseTimeTooltipFormatter', () => {
+    const formatter = getDurationFormatter(toMicroseconds(11, 'minutes'));
+    const tooltipFormatter = getResponseTimeTooltipFormatter(formatter);
+    it("doesn't format invalid y coordinate", () => {
+      expect(tooltipFormatter({ x: 1, y: undefined })).toEqual('N/A');
+      expect(tooltipFormatter({ x: 1, y: null })).toEqual('N/A');
+    });
+    it('formattes tooltip in minutes', () => {
+      expect(
+        tooltipFormatter({ x: 1, y: toMicroseconds(60, 'seconds') })
+      ).toEqual('1.0 min');
+    });
+  });
+  describe('getMaxY', () => {
+    it('returns zero when empty time series', () => {
+      expect(getMaxY([])).toEqual(0);
+    });
+    it('returns zero for invalid y coordinate', () => {
+      const timeSeries = ([
+        { data: [{ x: 1 }, { x: 2 }, { x: 3, y: -1 }] },
+      ] as unknown) as TimeSeries[];
+      expect(getMaxY(timeSeries)).toEqual(0);
+    });
+    it('returns the max y coordinate', () => {
+      const timeSeries = ([
+        {
+          data: [
+            { x: 1, y: 10 },
+            { x: 2, y: 5 },
+            { x: 3, y: 1 },
+          ],
+        },
+      ] as unknown) as TimeSeries[];
+      expect(getMaxY(timeSeries)).toEqual(10);
+    });
+  });
+});

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

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { flatten } from 'lodash';
+import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
+import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
+import { TimeSeries, Coordinate } from '../../../../../typings/timeseries';
+import { TimeFormatter } from '../../../../utils/formatters';
+
+export function getResponseTimeTickFormatter(formatter: TimeFormatter) {
+  return (t: number) => {
+    return formatter(t).formatted;
+  };
+}
+
+export function getResponseTimeTooltipFormatter(formatter: TimeFormatter) {
+  return (coordinate: Coordinate) => {
+    return isValidCoordinateValue(coordinate.y)
+      ? formatter(coordinate.y).formatted
+      : NOT_AVAILABLE_LABEL;
+  };
+}
+
+export function getMaxY(timeSeries: TimeSeries[]) {
+  const coordinates = flatten(
+    timeSeries.map((serie: TimeSeries) => serie.data as Coordinate[])
+  );
+
+  const numbers: number[] = coordinates.map((c: Coordinate) => (c.y ? c.y : 0));
+
+  return Math.max(...numbers, 0);
+}