From 8956a33e4c6abcbff31b6d178aaeadce38b6b513 Mon Sep 17 00:00:00 2001
From: Dario Gieselaar <dario.gieselaar@elastic.co>
Date: Tue, 23 Jun 2020 16:34:50 +0200
Subject: [PATCH] [APM] Use asPercent to format breakdown chart (#69384)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Søren Louv-Jansen <sorenlouv@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../TransactionBreakdownGraph/index.tsx                |  3 +--
 .../TransactionBreakdownKpiList.tsx                    |  6 ++----
 .../utils/formatters/__test__/formatters.test.ts       | 10 +++++++---
 .../plugins/apm/public/utils/formatters/formatters.ts  |  8 ++++++++
 4 files changed, 18 insertions(+), 9 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 0afed6c3c1fa8..2cb3696f88002 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<number>) => {
-  return numeral(y || 0).format('0 %');
+  return asPercent(y ?? 0, 1);
 };
 
 const formatTooltipValue = (coordinate: Coordinate) => {
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 eda8f19c949a3..3898679f83537 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<Props> = ({ kpis }) => {
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiTitle size="s">
-                <span>
-                  {FORMATTERS[InfraFormatterType.percent](kpi.percentage)}
-                </span>
+                <span>{asPercent(kpi.percentage, 1)}</span>
               </EuiTitle>
             </EuiFlexItem>
           </EuiFlexGroup>
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 f6ed88a850a5b..66101baf3a746 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,12 +7,16 @@ 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%');
+    it('should format as integer when number is above 10', () => {
+      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 9fdac85c7154f..649f11063b149 100644
--- a/x-pack/plugins/apm/public/utils/formatters/formatters.ts
+++ b/x-pack/plugins/apm/public/utils/formatters/formatters.ts
@@ -34,5 +34,13 @@ 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%');
+  }
+
   return numeral(decimal).format('0.0%');
 }