Modify results of API data to better fit gas chart: remove outliers, pad data

3 files changed, 19 insertions, 9 deletions

diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
index 5ca465ba9..3f382e5b2 100644
--- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
+++ b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
@@ -33,16 +33,19 @@ export default class GasPriceChart extends Component {
     updateCustomGasPrice,
   }) {
     const chart = generateChart(gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax)
-
     setTimeout(function () {
       setTickPosition('y', 0, -5, 8)
       setTickPosition('y', 1, -3, -5)
-      setTickPosition('x', 0, 3, 15)
+      setTickPosition('x', 0, 3)
       setTickPosition('x', 1, 3, -8)
 
-      // TODO: Confirm the below constants work with all data sets and screen sizes
+      const { x: domainX } = getCoordinateData('.domain')
+      const { x: yAxisX } = getCoordinateData('.c3-axis-y-label')
+      const { x: tickX } = getCoordinateData('.c3-axis-x .tick')
+
+      d3.select('.c3-axis-x .tick').attr('transform', 'translate(' + (domainX - tickX) / 2 + ', 0)')
       d3.select('.c3-axis-x-label').attr('transform', 'translate(0,-15)')
-      d3.select('.c3-axis-y-label').attr('transform', 'translate(52, 2) rotate(-90)')
+      d3.select('.c3-axis-y-label').attr('transform', 'translate(' + (domainX - yAxisX - 12) + ', 2) rotate(-90)')
       d3.select('.c3-xgrid-focus line').attr('y2', 98)
 
       d3.select('.c3-chart').on('mouseout', () => {
diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js
index 67508703f..0b9dfbd11 100644
--- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js
+++ b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js
@@ -12,6 +12,7 @@ export function handleMouseMove ({ xMousePos, chartXStart, chartWidth, gasPrices
 
   if (currentPosValue === null && newTimeEstimate === null) {
     hideDataUI(chart, '#overlayed-circle')
+    return
   }
 
   const indexOfNewCircle = estimatedTimes.length + 1
@@ -162,7 +163,13 @@ export function setSelectedCircle ({
 }) {
   const numberOfValues = chart.internal.data.xs.data1.length
   const { x: lowerX, y: lowerY } = getCoordinateData(`.c3-circle-${closestLowerValueIndex}`)
-  const { x: higherX, y: higherY } = getCoordinateData(`.c3-circle-${closestHigherValueIndex}`)
+  let { x: higherX, y: higherY } = getCoordinateData(`.c3-circle-${closestHigherValueIndex}`)
+
+  if (lowerX === higherX) {
+    const { x: higherXAdjusted, y: higherYAdjusted } = getCoordinateData(`.c3-circle-${closestHigherValueIndex + 1}`)
+    higherY = higherYAdjusted
+    higherX = higherXAdjusted
+  }
 
   const currentX = lowerX + (higherX - lowerX) * (newPrice - closestLowerValue) / (closestHigherValue - closestLowerValue)
   const newTimeEstimate = extrapolateY({ higherY, lowerY, higherX, lowerX, xForExtrapolation: currentX })
@@ -203,13 +210,13 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate
     axis: {
       x: {
         min: gasPrices[0],
-        max: gasPricesMaxPadded,
+        max: gasPricesMax,
         tick: {
-          values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMaxPadded)],
+          values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMax)],
           outer: false,
           format: function (val) { return val + ' GWEI' },
         },
-        padding: {left: gasPricesMaxPadded / 50, right: gasPricesMaxPadded / 50},
+        padding: {left: gasPricesMax / 50, right: gasPricesMax / 50},
         label: {
           text: 'Gas Price ($)',
           position: 'outer-center',
diff --git a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
index 46341195b..74eddae42 100644
--- a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
+++ b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
@@ -136,7 +136,7 @@ describe('GasPriceChart Component', function () {
       assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 4)
       assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(0).args, ['y', 0, -5, 8])
       assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(1).args, ['y', 1, -3, -5])
-      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3, 15])
+      assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3])
       assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(3).args, ['x', 1, 3, -8])
     })