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);