diff --git a/web/ui/react-app/src/Graph.test.tsx b/web/ui/react-app/src/Graph.test.tsx index 9fcfff6e5..3fece9469 100644 --- a/web/ui/react-app/src/Graph.test.tsx +++ b/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); + }); + }); }); }); diff --git a/web/ui/react-app/src/Graph.tsx b/web/ui/react-app/src/Graph.tsx index abb387722..1cd4c7212 100644 --- a/web/ui/react-app/src/Graph.tsx +++ b/web/ui/react-app/src/Graph.tsx @@ -68,21 +68,21 @@ class Graph extends PureComponent { 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);