React UI: Display small numbers correctly (#6274)

Closes #6272
Signed-off-by: NJulien Pivotto <roidelapluie@inuits.eu>

web/ui/react-app/src/Graph.test.tsx

@@ -101,5 +101,64 @@ describe('Graph', () => {
       expect(innerdiv).toHaveLength(1);
       expect(legend).toHaveLength(1);
     });
+    it('formats tick values correctly', () => {
+      const graph = new Graph();
+      [
+        { input: 2e24, output: '2.00Y' },
+        { input: 2e23, output: '200.00Z' },
+        { input: 2e22, output: '20.00Z' },
+        { input: 2e21, output: '2.00Z' },
+        { input: 2e19, output: '20.00E' },
+        { input: 2e18, output: '2.00E' },
+        { input: 2e17, output: '200.00P' },
+        { input: 2e16, output: '20.00P' },
+        { input: 2e15, output: '2.00P' },
+        { input: 1e15, output: '1.00P' },
+        { input: 2e14, output: '200.00T' },
+        { input: 2e13, output: '20.00T' },
+        { input: 2e12, output: '2.00T' },
+        { input: 2e11, output: '200.00G' },
+        { input: 2e10, output: '20.00G' },
+        { input: 2e9, output: '2.00G' },
+        { input: 2e8, output: '200.00M' },
+        { input: 2e7, output: '20.00M' },
+        { input: 2e6, output: '2.00M' },
+        { input: 2e5, output: '200.00k' },
+        { input: 2e4, output: '20.00k' },
+        { input: 2e3, output: '2.00k' },
+        { input: 2e2, output: '200.00' },
+        { input: 2e1, output: '20.00' },
+        { input: 2, output: '2.00' },
+        { input: 2e-1, output: '0.20' },
+        { input: 2e-2, output: '0.02' },
+        { input: 2e-3, output: '2.00m' },
+        { input: 2e-4, output: '0.20m' },
+        { input: 2e-5, output: '0.02m' },
+        { input: 2e-6, output: '2.00µ' },
+        { input: 2e-7, output: '0.20µ' },
+        { input: 2e-8, output: '0.02µ' },
+        { input: 2e-9, output: '2.00n' },
+        { input: 2e-10, output: '0.20n' },
+        { input: 2e-11, output: '0.02n' },
+        { input: 2e-12, output: '2.00p' },
+        { input: 2e-13, output: '0.20p' },
+        { input: 2e-14, output: '0.02p' },
+        { input: 2e-15, output: '2.00f' },
+        { input: 2e-16, output: '0.20f' },
+        { input: 2e-17, output: '0.02f' },
+        { input: 2e-18, output: '2.00a' },
+        { input: 2e-19, output: '0.20a' },
+        { input: 2e-20, output: '0.02a' },
+        { input: 1e-21, output: '1.00z' },
+        { input: 2e-21, output: '2.00z' },
+        { input: 2e-22, output: '0.20z' },
+        { input: 2e-23, output: '0.02z' },
+        { input: 2e-24, output: '2.00y' },
+        { input: 2e-25, output: '0.20y' },
+        { input: 2e-26, output: '0.02y' },
+      ].map(function(t) {
+        expect(graph.formatValue(t.input)).toBe(t.output);
+      });
+    });
   });
 });

web/ui/react-app/src/Graph.tsx

@@ -68,21 +68,21 @@ class Graph extends PureComponent<GraphProps> {
       return y.toFixed(2);
     } else if (abs_y === 0) {
       return y.toFixed(2);
-    } else if (abs_y <= 1e-24) {
+    } else if (abs_y < 1e-23) {
       return (y / 1e-24).toFixed(2) + 'y';
-    } else if (abs_y <= 1e-21) {
+    } else if (abs_y < 1e-20) {
       return (y / 1e-21).toFixed(2) + 'z';
-    } else if (abs_y <= 1e-18) {
+    } else if (abs_y < 1e-17) {
       return (y / 1e-18).toFixed(2) + 'a';
-    } else if (abs_y <= 1e-15) {
+    } else if (abs_y < 1e-14) {
       return (y / 1e-15).toFixed(2) + 'f';
-    } else if (abs_y <= 1e-12) {
+    } else if (abs_y < 1e-11) {
       return (y / 1e-12).toFixed(2) + 'p';
-    } else if (abs_y <= 1e-9) {
+    } else if (abs_y < 1e-8) {
       return (y / 1e-9).toFixed(2) + 'n';
-    } else if (abs_y <= 1e-6) {
+    } else if (abs_y < 1e-5) {
       return (y / 1e-6).toFixed(2) + 'µ';
-    } else if (abs_y <= 1e-3) {
+    } else if (abs_y < 1e-2) {
       return (y / 1e-3).toFixed(2) + 'm';
     } else if (abs_y <= 1) {
       return y.toFixed(2);