diff --git a/ui/perfherder/compare/TooltipGraph.jsx b/ui/perfherder/compare/TooltipGraph.jsx
index 431ce15d5..3ba169bac 100644
--- a/ui/perfherder/compare/TooltipGraph.jsx
+++ b/ui/perfherder/compare/TooltipGraph.jsx
@@ -1,8 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
-import numeral from 'numeral';
import { Table } from 'reactstrap';
+import { abbreviatedNumber } from '../helpers';
+
export default class TooltipGraph extends React.Component {
constructor(props) {
super(props);
@@ -62,9 +63,6 @@ export default class TooltipGraph extends React.Component {
});
};
- abbreviatedNumber = (num) =>
- num.toString().length <= 5 ? num : numeral(num).format('0.0a');
-
render() {
const { minValue, maxValue } = this.state;
return (
@@ -73,13 +71,13 @@ export default class TooltipGraph extends React.Component {
- {this.abbreviatedNumber(minValue)}
+ {abbreviatedNumber(minValue)}
|
|
- {this.abbreviatedNumber(maxValue)}
+ {abbreviatedNumber(maxValue)}
|
diff --git a/ui/perfherder/graphs/GraphsContainer.jsx b/ui/perfherder/graphs/GraphsContainer.jsx
index b577415be..51b4c3881 100644
--- a/ui/perfherder/graphs/GraphsContainer.jsx
+++ b/ui/perfherder/graphs/GraphsContainer.jsx
@@ -16,11 +16,12 @@ import {
VictoryPortal,
} from 'victory';
import moment from 'moment';
+import numeral from 'numeral';
import debounce from 'lodash/debounce';
import last from 'lodash/last';
import flatMap from 'lodash/flatMap';
-import { formatNumber } from '../helpers';
+import { abbreviatedNumber } from '../helpers';
import TableView from './TableView';
import GraphTooltip from './GraphTooltip';
@@ -241,19 +242,20 @@ class GraphsContainer extends React.Component {
// padding for the y axis tick labels, so this is a workaround (setting state
// doesn't work with this callback, which is why a class property is used instead)
setLeftPadding = (tick, index, ticks) => {
- const highestTickLength = ticks[ticks.length - 1].toString();
- const newLeftPadding = highestTickLength.length * 8 + 16;
+ const formattedNumber = abbreviatedNumber(tick).toString();
+ const highestTick = abbreviatedNumber(ticks[ticks.length - 1]).toString();
+ const newLeftPadding = highestTick.length * 8 + 16;
this.leftChartPadding =
this.leftChartPadding > newLeftPadding
? this.leftChartPadding
: newLeftPadding;
- return formatNumber(tick);
+ return formattedNumber.toUpperCase();
};
setRightPadding = (tick, index, ticks) => {
- const highestTickLength = ticks[ticks.length - 1].toString();
- const newRightPadding = highestTickLength.length / 2;
+ const highestTick = ticks[ticks.length - 1].toString();
+ const newRightPadding = highestTick.length / 2;
this.rightChartPadding =
this.rightChartPadding > newRightPadding
? this.rightChartPadding
diff --git a/ui/perfherder/helpers.js b/ui/perfherder/helpers.js
index cbbf2cbe9..2080145aa 100644
--- a/ui/perfherder/helpers.js
+++ b/ui/perfherder/helpers.js
@@ -26,6 +26,9 @@ import {
export const formatNumber = (input) =>
new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(input);
+export const abbreviatedNumber = (num) =>
+ num.toString().length <= 5 ? num : numeral(num).format('0.0a');
+
export const displayNumber = (input) =>
Number.isNaN(input) ? 'N/A' : Number(input).toFixed(2);