[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.
elastic · Jun 17, 2020 · cb387b1 · cb387b1
1 parent 88eed98
commit cb387b1
Showing 1 changed file with 2 additions and 4 deletions.
diff --git a/...plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx b/...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>