[APM] Chart units don't update when toggling the chart legends

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

@@ -79,6 +79,14 @@ export class InnerCustomPlot extends PureComponent {
         return i === _i ? !disabledValue : !!disabledValue;
       });
 
+      if (typeof this.props.onToggleLegend === 'function') {
+        //Filters out disabled series
+        const availableSeries = this.props.series.filter(
+          (serie, index) => !nextSeriesEnabledState[index]
+        );
+        this.props.onToggleLegend(availableSeries);
+      }
+
       return {
         seriesEnabledState: nextSeriesEnabledState,
       };
@@ -235,6 +243,7 @@ InnerCustomPlot.propTypes = {
     })
   ),
   noHits: PropTypes.bool,
+  onToggleLegend: PropTypes.func,
 };
 
 InnerCustomPlot.defaultProps = {

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

@@ -7,14 +7,28 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiTitle } from '@elastic/eui';
+import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
+import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
 import { TransactionLineChart } from './TransactionLineChart';
+import { getMaxY } from '.';
 import {
-  getMaxY,
-  getResponseTimeTickFormatter,
-  getResponseTimeTooltipFormatter,
-} from '.';
-import { getDurationFormatter } from '../../../../utils/formatters';
+  getDurationFormatter,
+  TimeFormatter,
+} from '../../../../utils/formatters';
 import { useAvgDurationByBrowser } from '../../../../hooks/useAvgDurationByBrowser';
+import { Coordinate } from '../../../../../typings/timeseries';
+
+function getResponseTimeTickFormatter(formatter: TimeFormatter) {
+  return (t: number) => formatter(t).formatted;
+}
+
+function getResponseTimeTooltipFormatter(formatter: TimeFormatter) {
+  return (p: Coordinate) => {
+    return isValidCoordinateValue(p.y)
+      ? formatter(p.y).formatted
+      : NOT_AVAILABLE_LABEL;
+  };
+}
 
 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?: (visibleSeries: TimeSeries[]) => 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/index.tsx

@@ -10,36 +10,35 @@ import {
   EuiFlexItem,
   EuiIconTip,
   EuiPanel,
+  EuiSpacer,
   EuiText,
   EuiTitle,
-  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
-import React, { Component } from 'react';
-import { isEmpty, flatten } from 'lodash';
+import { flatten, isEmpty } from 'lodash';
+import React from 'react';
 import styled from 'styled-components';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
+import {
+  TRANSACTION_PAGE_LOAD,
+  TRANSACTION_REQUEST,
+  TRANSACTION_ROUTE_CHANGE,
+} from '../../../../../common/transaction_types';
 import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
-import { ITransactionChartData } from '../../../../selectors/chartSelectors';
+import { LicenseContext } from '../../../../context/LicenseContext';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
+import { ITransactionChartData } from '../../../../selectors/chartSelectors';
 import {
-  tpmUnit,
-  TimeFormatter,
-  getDurationFormatter,
   asDecimal,
+  getDurationFormatter,
+  tpmUnit,
 } from '../../../../utils/formatters';
-import { MLJobLink } from '../../Links/MachineLearningLinks/MLJobLink';
-import { LicenseContext } from '../../../../context/LicenseContext';
-import { TransactionLineChart } from './TransactionLineChart';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
+import { MLJobLink } from '../../Links/MachineLearningLinks/MLJobLink';
 import { BrowserLineChart } from './BrowserLineChart';
 import { DurationByCountryMap } from './DurationByCountryMap';
-import {
-  TRANSACTION_PAGE_LOAD,
-  TRANSACTION_ROUTE_CHANGE,
-  TRANSACTION_REQUEST,
-} from '../../../../../common/transaction_types';
+import { TransactionLineChart } from './TransactionLineChart';
 
 interface TransactionChartProps {
   charts: ITransactionChartData;
@@ -59,18 +58,6 @@ const ShiftedEuiText = styled(EuiText)`
   top: 5px;
 `;
 
-export function getResponseTimeTickFormatter(formatter: TimeFormatter) {
-  return (t: number) => formatter(t).formatted;
-}
-
-export function getResponseTimeTooltipFormatter(formatter: TimeFormatter) {
-  return (p: Coordinate) => {
-    return isValidCoordinateValue(p.y)
-      ? formatter(p.y).formatted
-      : NOT_AVAILABLE_LABEL;
-  };
-}
-
 export function getMaxY(responseTimeSeries: TimeSeries[]) {
   const coordinates = flatten(
     responseTimeSeries.map((serie: TimeSeries) => serie.data as Coordinate[])
@@ -81,27 +68,30 @@ export function getMaxY(responseTimeSeries: TimeSeries[]) {
   return Math.max(...numbers, 0);
 }
 
-export class TransactionCharts extends Component<TransactionChartProps> {
-  public getTPMFormatter = (t: number) => {
-    const { urlParams } = this.props;
+export function TransactionCharts({
+  charts,
+  location,
+  urlParams,
+}: TransactionChartProps) {
+  const getTPMFormatter = (t: number) => {
     const unit = tpmUnit(urlParams.transactionType);
     return `${asDecimal(t)} ${unit}`;
   };
 
-  public getTPMTooltipFormatter = (p: Coordinate) => {
+  const getTPMTooltipFormatter = (p: Coordinate) => {
     return isValidCoordinateValue(p.y)
-      ? this.getTPMFormatter(p.y)
+      ? getTPMFormatter(p.y)
       : NOT_AVAILABLE_LABEL;
   };
 
-  public renderMLHeader(hasValidMlLicense: boolean | undefined) {
-    const { mlJobId } = this.props.charts;
+  function renderMLHeader(hasValidMlLicense: boolean | undefined) {
+    const { mlJobId } = charts;
 
     if (!hasValidMlLicense || !mlJobId) {
       return null;
     }
 
-    const { serviceName, kuery, transactionType } = this.props.urlParams;
+    const { serviceName, kuery, transactionType } = urlParams;
     if (!serviceName) {
       return null;
     }
@@ -149,79 +139,92 @@ export class TransactionCharts extends Component<TransactionChartProps> {
       </EuiFlexItem>
     );
   }
+  const { responseTimeSeries, tpmSeries } = charts;
+  const { transactionType } = urlParams;
+  const maxY = getMaxY(responseTimeSeries);
+  let formatter = getDurationFormatter(maxY);
 
-  public render() {
-    const { charts, urlParams } = this.props;
-    const { responseTimeSeries, tpmSeries } = charts;
-    const { transactionType } = urlParams;
-    const maxY = getMaxY(responseTimeSeries);
-    const formatter = getDurationFormatter(maxY);
+  function onToggleLegend(visibleSeries: TimeSeries[]) {
+    if (!isEmpty(visibleSeries)) {
+      // recalculate the formatter based on the max Y from the visible series
+      const maxVisibleY = getMaxY(visibleSeries);
+      formatter = getDurationFormatter(maxVisibleY);
+    }
+  }
 
-    return (
-      <>
-        <EuiFlexGrid columns={2} gutterSize="s">
-          <EuiFlexItem data-cy={`transaction-duration-charts`}>
-            <EuiPanel>
-              <React.Fragment>
-                <EuiFlexGroup justifyContent="spaceBetween">
-                  <EuiFlexItem>
-                    <EuiTitle size="xs">
-                      <span>{responseTimeLabel(transactionType)}</span>
-                    </EuiTitle>
-                  </EuiFlexItem>
-                  <LicenseContext.Consumer>
-                    {(license) =>
-                      this.renderMLHeader(license?.getFeature('ml').isAvailable)
-                    }
-                  </LicenseContext.Consumer>
-                </EuiFlexGroup>
-                <TransactionLineChart
-                  series={responseTimeSeries}
-                  tickFormatY={getResponseTimeTickFormatter(formatter)}
-                  formatTooltipValue={getResponseTimeTooltipFormatter(
-                    formatter
-                  )}
-                />
-              </React.Fragment>
-            </EuiPanel>
-          </EuiFlexItem>
+  function getResponseTimeTickFormatter(t: number) {
+    return formatter(t).formatted;
+  }
 
-          <EuiFlexItem style={{ flexShrink: 1 }}>
-            <EuiPanel>
-              <React.Fragment>
-                <EuiTitle size="xs">
-                  <span>{tpmLabel(transactionType)}</span>
-                </EuiTitle>
-                <TransactionLineChart
-                  series={tpmSeries}
-                  tickFormatY={this.getTPMFormatter}
-                  formatTooltipValue={this.getTPMTooltipFormatter}
-                  truncateLegends
-                />
-              </React.Fragment>
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGrid>
-        {transactionType === TRANSACTION_PAGE_LOAD && (
-          <>
-            <EuiSpacer size="s" />
-            <EuiFlexGrid columns={2} gutterSize="s">
-              <EuiFlexItem>
-                <EuiPanel>
-                  <DurationByCountryMap />
-                </EuiPanel>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiPanel>
-                  <BrowserLineChart />
-                </EuiPanel>
-              </EuiFlexItem>
-            </EuiFlexGrid>
-          </>
-        )}
-      </>
-    );
+  function getResponseTimeTooltipFormatter(coordinate: Coordinate) {
+    return isValidCoordinateValue(coordinate.y)
+      ? formatter(coordinate.y).formatted
+      : NOT_AVAILABLE_LABEL;
   }
+
+  return (
+    <>
+      <EuiFlexGrid columns={2} gutterSize="s">
+        <EuiFlexItem data-cy={`transaction-duration-charts`}>
+          <EuiPanel>
+            <React.Fragment>
+              <EuiFlexGroup justifyContent="spaceBetween">
+                <EuiFlexItem>
+                  <EuiTitle size="xs">
+                    <span>{responseTimeLabel(transactionType)}</span>
+                  </EuiTitle>
+                </EuiFlexItem>
+                <LicenseContext.Consumer>
+                  {(license) =>
+                    renderMLHeader(license?.getFeature('ml').isAvailable)
+                  }
+                </LicenseContext.Consumer>
+              </EuiFlexGroup>
+              <TransactionLineChart
+                series={responseTimeSeries}
+                tickFormatY={getResponseTimeTickFormatter}
+                formatTooltipValue={getResponseTimeTooltipFormatter}
+                onToggleLegend={onToggleLegend}
+              />
+            </React.Fragment>
+          </EuiPanel>
+        </EuiFlexItem>
+
+        <EuiFlexItem style={{ flexShrink: 1 }}>
+          <EuiPanel>
+            <React.Fragment>
+              <EuiTitle size="xs">
+                <span>{tpmLabel(transactionType)}</span>
+              </EuiTitle>
+              <TransactionLineChart
+                series={tpmSeries}
+                tickFormatY={getTPMFormatter}
+                formatTooltipValue={getTPMTooltipFormatter}
+                truncateLegends
+              />
+            </React.Fragment>
+          </EuiPanel>
+        </EuiFlexItem>
+      </EuiFlexGrid>
+      {transactionType === TRANSACTION_PAGE_LOAD && (
+        <>
+          <EuiSpacer size="s" />
+          <EuiFlexGrid columns={2} gutterSize="s">
+            <EuiFlexItem>
+              <EuiPanel>
+                <DurationByCountryMap />
+              </EuiPanel>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiPanel>
+                <BrowserLineChart />
+              </EuiPanel>
+            </EuiFlexItem>
+          </EuiFlexGrid>
+        </>
+      )}
+    </>
+  );
 }
 
 function tpmLabel(type?: string) {

x-pack/plugins/apm/public/utils/formatters/__test__/duration.test.ts

@@ -20,9 +20,12 @@ describe('duration formatters', () => {
         '10,000 ms'
       );
       expect(asDuration(toMicroseconds(20, 'seconds'))).toEqual('20 s');
-      expect(asDuration(toMicroseconds(10, 'minutes'))).toEqual('10 min');
+      expect(asDuration(toMicroseconds(10, 'minutes'))).toEqual('600 s');
+      expect(asDuration(toMicroseconds(11, 'minutes'))).toEqual('11 min');
       expect(asDuration(toMicroseconds(1, 'hours'))).toEqual('60 min');
-      expect(asDuration(toMicroseconds(1.5, 'hours'))).toEqual('1.5 h');
+      expect(asDuration(toMicroseconds(1.5, 'hours'))).toEqual('90 min');
+      expect(asDuration(toMicroseconds(10, 'hours'))).toEqual('600 min');
+      expect(asDuration(toMicroseconds(11, 'hours'))).toEqual('11 h');
     });
 
     it('falls back to default value', () => {