[APM] Use asPercent to format breakdown chart (#69384)
Co-authored-by: Søren Louv-Jansen <sorenlouv@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
cc893f3da4
commit
8956a33e4c
|
@ -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) => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
|
@ -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%');
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue