From e9568b1d426fce4d94dd0e9b86ca8a6f0c355dbd Mon Sep 17 00:00:00 2001
From: beatrice-acasandrei
 <69891317+beatrice-acasandrei@users.noreply.github.com>
Date: Mon, 15 Feb 2021 18:03:36 +0200
Subject: [PATCH] Bug 1632730 - Fix truncated Y axis labels in Graphs view

---
 ui/perfherder/compare/TooltipGraph.jsx   | 10 ++++------
 ui/perfherder/graphs/GraphsContainer.jsx | 14 ++++++++------
 ui/perfherder/helpers.js                 |  3 +++
 3 files changed, 15 insertions(+), 12 deletions(-)

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