feat: use better formatting for small values (#87)

Author: a-macc

pages/common/formatters.ts

@@ -21,13 +21,32 @@ export function numberFormatter(value: null | number) {
   if (value === null) {
     return "";
   }
-  return Math.abs(value) >= 1e9
-    ? (value / 1e9).toFixed(1).replace(/\.0$/, "") + "G"
-    : Math.abs(value) >= 1e6
-      ? (value / 1e6).toFixed(1).replace(/\.0$/, "") + "M"
-      : Math.abs(value) >= 1e3
-        ? (value / 1e3).toFixed(1).replace(/\.0$/, "") + "K"
-        : value.toFixed(2);
+
+  const format = (num: number) => parseFloat(num.toFixed(2)).toString(); // trims unnecessary decimals
+
+  const absValue = Math.abs(value);
+
+  if (absValue === 0) {
+    return "0";
+  }
+
+  if (absValue < 0.01) {
+    return value.toExponential(0);
+  }
+
+  if (absValue >= 1e9) {
+    return format(value / 1e9) + "G";
+  }
+
+  if (absValue >= 1e6) {
+    return format(value / 1e6) + "M";
+  }
+
+  if (absValue >= 1e3) {
+    return format(value / 1e3) + "K";
+  }
+
+  return format(value);
 }
 
 export function moneyFormatter(value: null | number) {

src/core/__tests__/chart-core-axes.test.tsx

@@ -126,6 +126,7 @@ describe("CoreChart: axes", () => {
   test("uses default numeric axes formatters for integer values", () => {
     renderChart({ highcharts, options: { series, xAxis: { title: { text: "X" } }, yAxis: { title: { text: "Y" } } } });
     getAxisOptionsFormatters().forEach((formatter) => {
+      expect(formatter.call(mockAxisContext({ value: 0 }))).toBe("0");
       expect(formatter.call(mockAxisContext({ value: 1 }))).toBe("1");
       expect(formatter.call(mockAxisContext({ value: 1_000 }))).toBe("1K");
       expect(formatter.call(mockAxisContext({ value: 1_000_000 }))).toBe("1M");
@@ -138,6 +139,8 @@ describe("CoreChart: axes", () => {
     getAxisOptionsFormatters().forEach((formatter) => {
       expect(formatter.call(mockAxisContext({ value: 2.0 }))).toBe("2");
       expect(formatter.call(mockAxisContext({ value: 2.03 }))).toBe("2.03");
+      expect(formatter.call(mockAxisContext({ value: 0.03 }))).toBe("0.03");
+      expect(formatter.call(mockAxisContext({ value: 0.003 }))).toBe("3e-3");
     });
   });
 

src/core/formatters.tsx

@@ -104,11 +104,28 @@ function secondFormatter(value: number) {
 
 function numberFormatter(value: number): string {
   const format = (num: number) => parseFloat(num.toFixed(2)).toString(); // trims unnecessary decimals
-  return Math.abs(value) >= 1e9
-    ? format(value / 1e9) + "G"
-    : Math.abs(value) >= 1e6
-      ? format(value / 1e6) + "M"
-      : Math.abs(value) >= 1e3
-        ? format(value / 1e3) + "K"
-        : format(value);
+
+  const absValue = Math.abs(value);
+
+  if (absValue === 0) {
+    return "0";
+  }
+
+  if (absValue < 0.01) {
+    return value.toExponential(0);
+  }
+
+  if (absValue >= 1e9) {
+    return format(value / 1e9) + "G";
+  }
+
+  if (absValue >= 1e6) {
+    return format(value / 1e6) + "M";
+  }
+
+  if (absValue >= 1e3) {
+    return format(value / 1e3) + "K";
+  }
+
+  return format(value);
 }