[APM] Transaction duration chart always shows duration in ms

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

@@ -16,17 +16,22 @@ import {
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
 import React, { Component } from 'react';
-import { isEmpty } from 'lodash';
+import { isEmpty, flatten } from 'lodash';
 import styled from 'styled-components';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
-import { Coordinate } from '../../../../../typings/timeseries';
+import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
 import { ITransactionChartData } from '../../../../selectors/chartSelectors';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
-import { asInteger, asMillis, tpmUnit } from '../../../../utils/formatters';
+import {
+  asInteger,
+  tpmUnit,
+  TimeFormatter
+} from '../../../../utils/formatters';
 import { MLJobLink } from '../../Links/MachineLearningLinks/MLJobLink';
 import { LicenseContext } from '../../../../context/LicenseContext';
 import { TransactionLineChart } from './TransactionLineChart';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
+import { getTimeFormatter } from '../../../../utils/formatters';
 
 interface TransactionChartProps {
   hasMLJob: boolean;
@@ -48,12 +53,26 @@ const ShiftedEuiText = styled(EuiText)`
 `;
 
 export class TransactionCharts extends Component<TransactionChartProps> {
-  public getResponseTimeTickFormatter = (t: number) => {
-    return asMillis(t);
+  public getMaxY = (responseTimeSeries: TimeSeries[]) => {
+    const coordinates = flatten(
+      responseTimeSeries.map((serie: TimeSeries) => serie.data as Coordinate[])
+    );
+
+    const numbers: number[] = coordinates.map((c: Coordinate) =>
+      c.y ? c.y : 0
+    );
+
+    return Math.max(...numbers, 0);
+  };
+
+  public getResponseTimeTickFormatter = (formatter: TimeFormatter) => {
+    return (t: number) => formatter(t);
   };
 
-  public getResponseTimeTooltipFormatter = (p: Coordinate) => {
-    return isValidCoordinateValue(p.y) ? asMillis(p.y) : NOT_AVAILABLE_LABEL;
+  public getResponseTimeTooltipFormatter = (formatter: TimeFormatter) => {
+    return (p: Coordinate) => {
+      return isValidCoordinateValue(p.y) ? formatter(p.y) : NOT_AVAILABLE_LABEL;
+    };
   };
 
   public getTPMFormatter = (t: number) => {
@@ -126,6 +145,8 @@ export class TransactionCharts extends Component<TransactionChartProps> {
     const { charts, urlParams } = this.props;
     const { responseTimeSeries, tpmSeries } = charts;
     const { transactionType } = urlParams;
+    const maxY = this.getMaxY(responseTimeSeries);
+    const formatter = getTimeFormatter(maxY);
 
     return (
       <EuiFlexGrid columns={2} gutterSize="s">
@@ -146,8 +167,10 @@ export class TransactionCharts extends Component<TransactionChartProps> {
               </EuiFlexGroup>
               <TransactionLineChart
                 series={responseTimeSeries}
-                tickFormatY={this.getResponseTimeTickFormatter}
-                formatTooltipValue={this.getResponseTimeTooltipFormatter}
+                tickFormatY={this.getResponseTimeTickFormatter(formatter)}
+                formatTooltipValue={this.getResponseTimeTooltipFormatter(
+                  formatter
+                )}
               />
             </React.Fragment>
           </EuiPanel>

x-pack/legacy/plugins/apm/public/utils/formatters.ts

@@ -108,11 +108,14 @@ export function asMicros(
   return `${formatted}${withUnit ? microsLabel : ''}`;
 }
 
-type TimeFormatter = (
-  max: number
-) => (value: FormatterValue, options: FormatterOptions) => string;
+export type TimeFormatter = (
+  value: FormatterValue,
+  options?: FormatterOptions
+) => string;
+
+type TimeFormatterBuilder = (max: number) => TimeFormatter;
 
-export const getTimeFormatter: TimeFormatter = memoize((max: number) => {
+export const getTimeFormatter: TimeFormatterBuilder = memoize((max: number) => {
   const unit = timeUnit(max);
   switch (unit) {
     case 'h':