Bug 1632730 - Fix truncated Y axis labels in Graphs view

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 {
           <tbody>
             <tr>
               <td className="value-column text-white">
-                {this.abbreviatedNumber(minValue)}
+                {abbreviatedNumber(minValue)}
               </td>
               <td className="distribution-column">
                 <canvas ref={this.canvasRef} width={190} height={30} />
               </td>
               <td className="value-column text-white">
-                {this.abbreviatedNumber(maxValue)}
+                {abbreviatedNumber(maxValue)}
               </td>
             </tr>
           </tbody>

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

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