Use asPercent for y-ticks

dgieselaar · dgieselaar · commit 09a2af433e4f · 2020-06-18T10:58:23.000+02:00
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
@@ -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/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
@@ -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%');
 }

Original file line number	Diff line number	Diff line change
`@@ -34,5 +34,10 @@ export function asPercent(`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`const decimal = numerator / denominator;`
	`37`	`+`
	`38`	`+ if (Math.abs(decimal) >= 0.1 \|\| decimal === 0) {`
	`39`	`+ return numeral(decimal).format('0%');`
	`40`	`+ }`
	`41`	`+`
`37`	`42`	`return numeral(decimal).format('0.0%');`
`38`	`43`	`}`