Removed formatRelevantDigits from text_utils.js and added it to a new file number_utils.js

Also improved code formatting

app/assets/javascripts/lib/utils/number_utils.js

+/* eslint-disable import/prefer-default-export */
+
+/**
+ * Function that allows a number with an X amount of decimals
+ * to be formatted in the following fashion:
+ * * For 1 digit to the left of the decimal point and X digits to the right of it
+ * * * Show 3 digits to the right
+ * * For 2 digits to the left of the decimal point and X digits to the right of it
+ * * * Show 2 digits to the right
+*/
+export function formatRelevantDigits(number) {
+  let digitsLeft = '';
+  let relevantDigits = 0;
+  let formattedNumber = '';
+  if (!isNaN(Number(number))) {
+    digitsLeft = number.split('.')[0];
+    switch (digitsLeft.length) {
+      case 1:
+        relevantDigits = 3;
+        break;
+      case 2:
+        relevantDigits = 2;
+        break;
+      case 3:
+        relevantDigits = 1;
+        break;
+      default:
+        relevantDigits = 4;
+        break;
+    }
+    formattedNumber = Number(number).toFixed(relevantDigits);
+  }
+  return formattedNumber;
+}

app/assets/javascripts/lib/utils/text_utility.js

@@ -188,29 +188,5 @@ require('vendor/latinise');
     gl.text.slugify = function(str) {
       return str.trim().toLowerCase().latinise();
     };
-    gl.text.formatRelevantDigits = function(number) {
-      var digitsLeft = '';
-      var relevantDigits = 0;
-      if (isNaN(Number(number))) {
-        return 0;
-      } else {
-        digitsLeft = number.split('.')[0];
-        switch (digitsLeft.length) {
-          case 1:
-            relevantDigits = 3;
-            break;
-          case 2:
-            relevantDigits = 2;
-            break;
-          case 3:
-            relevantDigits = 1;
-            break;
-          default:
-            relevantDigits = 4;
-            break;
-        }
-        return Number(number).toFixed(relevantDigits);
-      }
-    };
   })(window);
 }).call(window);

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -3,7 +3,7 @@
 
 import d3 from 'd3';
 import statusCodes from '~/lib/utils/http_status';
-import '../lib/utils/common_utils';
+import { formatRelevantDigits } from '~/lib/utils/number_utils';
 import '../flash';
 
 const prometheusGraphsContainer = '.prometheus-graph';
@@ -157,6 +157,7 @@ class PrometheusGraph {
         x2: 10,
         y2: this.originalHeight - this.margin.top,
       });
+
     axisLabelContainer.append('rect')
       .attr('class', 'rect-axis-text')
       .attr('x', 0)
@@ -270,12 +271,13 @@ class PrometheusGraph {
         .attr('y', maxMetricValue + 15)
         .text(dayFormat(currentData.time));
 
-      let currentMetricValue = gl.text.formatRelevantDigits(currentData.value);
+      let currentMetricValue = formatRelevantDigits(currentData.value);
       if (key === 'cpu_values') {
         currentMetricValue = `${currentMetricValue}%`;
       } else {
         currentMetricValue = `${currentMetricValue} MB`;
       }
+
       d3.select(`${currentPrometheusGraphContainer} .text-metric-usage`)
         .text(currentMetricValue);
     });

spec/javascripts/lib/utils/number_utility_spec.js

+import { formatRelevantDigits } from '~/lib/utils/number_utils';
+
+describe('Number Utils', () => {
+  describe('formatRelevantDigits', () => {
+    it('returns an empty string when the number is NaN', () => {
+      expect(formatRelevantDigits('fail')).toBe('');
+    });
+
+    it('returns 4 decimals when there is 4 plus digits to the left', () => {
+      const formattedNumber = formatRelevantDigits('1000.1234567');
+      const rightFromDecimal = formattedNumber.split('.')[1];
+      const leftFromDecimal = formattedNumber.split('.')[0];
+      expect(rightFromDecimal.length).toBe(4);
+      expect(leftFromDecimal.length).toBe(4);
+    });
+
+    it('returns 3 decimals when there is 1 digit to the left', () => {
+      const formattedNumber = formatRelevantDigits('0.1234567');
+      const rightFromDecimal = formattedNumber.split('.')[1];
+      const leftFromDecimal = formattedNumber.split('.')[0];
+      expect(rightFromDecimal.length).toBe(3);
+      expect(leftFromDecimal.length).toBe(1);
+    });
+
+    it('returns 2 decimals when there is 2 digits to the left', () => {
+      const formattedNumber = formatRelevantDigits('10.1234567');
+      const rightFromDecimal = formattedNumber.split('.')[1];
+      const leftFromDecimal = formattedNumber.split('.')[0];
+      expect(rightFromDecimal.length).toBe(2);
+      expect(leftFromDecimal.length).toBe(2);
+    });
+
+    it('returns 1 decimal when there is 3 digits to the left', () => {
+      const formattedNumber = formatRelevantDigits('100.1234567');
+      const rightFromDecimal = formattedNumber.split('.')[1];
+      const leftFromDecimal = formattedNumber.split('.')[0];
+      expect(rightFromDecimal.length).toBe(1);
+      expect(leftFromDecimal.length).toBe(3);
+    });
+  });
+});

spec/javascripts/lib/utils/text_utility_spec.js

@@ -105,32 +105,6 @@ require('~/lib/utils/text_utility');
           expect(textArea.value).toEqual(`${initialValue}* `);
         });
       });
-
-      describe('gl.text.formatRelevantDigits', () => {
-        it('returns 0 when the number is NaN', () => {
-          expect(gl.text.formatRelevantDigits('fail')).toBe(0);
-        });
-
-        it('returns 4 decimals when there is 4 plus digits to the left', () => {
-          const formattedNumber = gl.text.formatRelevantDigits('1000.1234567').split('.')[1];
-          expect(formattedNumber.length).toBe(4);
-        });
-
-        it('returns 3 decimals when there is 1 digit to the left', () => {
-          const formattedNumber = gl.text.formatRelevantDigits('0.1234567').split('.')[1];
-          expect(formattedNumber.length).toBe(3);
-        });
-
-        it('returns 2 decimals when there is 2 digits to the left', () => {
-          const formattedNumber = gl.text.formatRelevantDigits('10.1234567').split('.')[1];
-          expect(formattedNumber.length).toBe(2);
-        });
-
-        it('returns 1 decimal when there is 3 digits to the left', () => {
-          const formattedNumber = gl.text.formatRelevantDigits('100.1234567').split('.')[1];
-          expect(formattedNumber.length).toBe(1);
-        });
-      });
     });
   });
 })();