From cb387b1a163a8e20a9c2ef4b97dec5dc80c22f9f Mon Sep 17 00:00:00 2001 From: Dario Gieselaar Date: Wed, 17 Jun 2020 13:35:25 +0200 Subject: [PATCH 1/4] [APM] Use asPercent to format breakdown chart Replaces formatters from infra plugin with APM-native `asPercent` formatter. Importing code from `infra/public` breaks when infra is not available. --- .../TransactionBreakdown/TransactionBreakdownKpiList.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx index eda8f19c949a3d..3898679f835371 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx +++ b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx @@ -13,7 +13,7 @@ import { EuiIcon, } from '@elastic/eui'; import styled from 'styled-components'; -import { FORMATTERS, InfraFormatterType } from '../../../../../infra/public'; +import { asPercent } from '../../../utils/formatters'; interface TransactionBreakdownKpi { name: string; @@ -65,9 +65,7 @@ const TransactionBreakdownKpiList: React.FC = ({ kpis }) => { - - {FORMATTERS[InfraFormatterType.percent](kpi.percentage)} - + {asPercent(kpi.percentage, 1)} From 09a2af433e4f3df92da22b960cffbd91b9105caa Mon Sep 17 00:00:00 2001 From: Dario Gieselaar Date: Thu, 18 Jun 2020 10:58:23 +0200 Subject: [PATCH 2/4] Use asPercent for y-ticks --- .../TransactionBreakdownGraph/index.tsx | 3 +-- .../public/utils/formatters/__test__/formatters.test.ts | 8 ++++++-- x-pack/plugins/apm/public/utils/formatters/formatters.ts | 5 +++++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx index 0afed6c3c1fa8c..2cb3696f880027 100644 --- a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx @@ -5,7 +5,6 @@ */ import React, { useMemo } from 'react'; -import numeral from '@elastic/numeral'; import { throttle } from 'lodash'; import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n'; import { Coordinate, TimeSeries } from '../../../../../typings/timeseries'; @@ -21,7 +20,7 @@ interface Props { } const tickFormatY = (y: Maybe) => { - return numeral(y || 0).format('0 %'); + return asPercent(y ?? 0, 1); }; const formatTooltipValue = (coordinate: Coordinate) => { diff --git a/x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts b/x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts index f6ed88a850a5b2..34c39a6c7dfa98 100644 --- a/x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts +++ b/x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts @@ -8,11 +8,15 @@ import { asPercent } from '../formatters'; describe('formatters', () => { describe('asPercent', () => { it('should divide and format item as percent', () => { - expect(asPercent(3725, 10000, 'n/a')).toEqual('37.3%'); + expect(asPercent(3725, 10000, 'n/a')).toEqual('37%'); + }); + + it('should add a decimal when value is below 10', () => { + expect(asPercent(0.092, 1)).toEqual('9.2%'); }); it('should format when numerator is 0', () => { - expect(asPercent(0, 1, 'n/a')).toEqual('0.0%'); + expect(asPercent(0, 1, 'n/a')).toEqual('0%'); }); it('should return fallback when denominator is undefined', () => { diff --git a/x-pack/plugins/apm/public/utils/formatters/formatters.ts b/x-pack/plugins/apm/public/utils/formatters/formatters.ts index 9fdac85c7154ff..1582ae520e8547 100644 --- a/x-pack/plugins/apm/public/utils/formatters/formatters.ts +++ b/x-pack/plugins/apm/public/utils/formatters/formatters.ts @@ -34,5 +34,10 @@ export function asPercent( } const decimal = numerator / denominator; + + if (Math.abs(decimal) >= 0.1 || decimal === 0) { + return numeral(decimal).format('0%'); + } + return numeral(decimal).format('0.0%'); } From fbd1441b26e0b5f989c39beb6316c73b4cb54bf8 Mon Sep 17 00:00:00 2001 From: Dario Gieselaar Date: Tue, 23 Jun 2020 09:22:54 +0200 Subject: [PATCH 3/4] Update x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Søren Louv-Jansen --- .../apm/public/utils/formatters/__test__/formatters.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts b/x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts index 34c39a6c7dfa98..66101baf3a7461 100644 --- a/x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts +++ b/x-pack/plugins/apm/public/utils/formatters/__test__/formatters.test.ts @@ -7,7 +7,7 @@ import { asPercent } from '../formatters'; describe('formatters', () => { describe('asPercent', () => { - it('should divide and format item as percent', () => { + it('should format as integer when number is above 10', () => { expect(asPercent(3725, 10000, 'n/a')).toEqual('37%'); }); From b8d654e977e51d7b9fd0ebf805cc046925994569 Mon Sep 17 00:00:00 2001 From: Dario Gieselaar Date: Tue, 23 Jun 2020 09:26:24 +0200 Subject: [PATCH 4/4] Clarify asPercent behaviour with comments --- x-pack/plugins/apm/public/utils/formatters/formatters.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/x-pack/plugins/apm/public/utils/formatters/formatters.ts b/x-pack/plugins/apm/public/utils/formatters/formatters.ts index 1582ae520e8547..649f11063b149a 100644 --- a/x-pack/plugins/apm/public/utils/formatters/formatters.ts +++ b/x-pack/plugins/apm/public/utils/formatters/formatters.ts @@ -35,6 +35,9 @@ export function asPercent( const decimal = numerator / denominator; + // 33.2 => 33% + // 3.32 => 3.3% + // 0 => 0% if (Math.abs(decimal) >= 0.1 || decimal === 0) { return numeral(decimal).format('0%'); }