Format compact currency and scientific style values (#10059)

frontend/src/metabase/lib/formatting.js

@@ -252,6 +252,33 @@ function formatNumberCompact(value: number, options: FormattingOptions) {
   if (options.number_style === "percent") {
     return formatNumberCompactWithoutOptions(value * 100) + "%";
   }
+  if (options.number_style === "currency") {
+    try {
+      const { value: currency } = numberFormatterForOptions({
+        ...options,
+        currency_style: "symbol",
+      })
+        .formatToParts(value)
+        .find(p => p.type === "currency");
+
+      // this special case ensures the "~" comes before the currency
+      if (value !== 0 && value >= -0.01 && value <= 0.01) {
+        return `~${currency}0`;
+      }
+      return currency + formatNumberCompactWithoutOptions(value);
+    } catch (e) {
+      // Intl.NumberFormat failed, so we fall back to a non-currency number
+      return formatNumberCompactWithoutOptions(value);
+    }
+  }
+  if (options.number_style === "scientific") {
+    return formatNumberScientific(value, {
+      ...options,
+      // unsetting maximumFractionDigits prevents truncation of small numbers
+      maximumFractionDigits: undefined,
+      minimumFractionDigits: 1,
+    });
+  }
   return formatNumberCompactWithoutOptions(value);
 }
 

frontend/test/metabase/lib/formatting.unit.spec.js

@@ -45,7 +45,7 @@ describe("formatting", () => {
         expect(formatNumber(1000, { compact: true })).toEqual("1.0k");
         expect(formatNumber(1111, { compact: true })).toEqual("1.1k");
       });
-      it("should format compact percentages", () => {
+      it("should format percentages", () => {
         const options = { compact: true, number_style: "percent" };
         expect(formatNumber(0, options)).toEqual("0%");
         expect(formatNumber(0.001, options)).toEqual("0.1%");
@@ -58,6 +58,34 @@ describe("formatting", () => {
         expect(formatNumber(11.11, options)).toEqual("1.1k%");
         expect(formatNumber(-0.22, options)).toEqual("-22%");
       });
+      it("should format scientific notation", () => {
+        const options = { compact: true, number_style: "scientific" };
+        expect(formatNumber(0, options)).toEqual("0.0e+0");
+        expect(formatNumber(0.0001, options)).toEqual("1.0e-4");
+        expect(formatNumber(0.01, options)).toEqual("1.0e-2");
+        expect(formatNumber(0.5, options)).toEqual("5.0e-1");
+        expect(formatNumber(123456.78, options)).toEqual("1.2e+5");
+        expect(formatNumber(-123456.78, options)).toEqual("-1.2e+5");
+      });
+      it("should format currency values", () => {
+        const options = {
+          compact: true,
+          number_style: "currency",
+          currency: "USD",
+        };
+        expect(formatNumber(0, options)).toEqual("$0");
+        expect(formatNumber(0.001, options)).toEqual("~$0");
+        expect(formatNumber(7.24, options)).toEqual("$7");
+        expect(formatNumber(1234.56, options)).toEqual("$1.2k");
+        expect(formatNumber(1234567.89, options)).toEqual("$1.2M");
+        expect(formatNumber(-1234567.89, options)).toEqual("$-1.2M");
+        expect(
+          formatNumber(1234567.89, { ...options, currency: "CNY" }),
+        ).toEqual("CN¥1.2M");
+        expect(
+          formatNumber(1234567.89, { ...options, currency_style: "name" }),
+        ).toEqual("$1.2M");
+      });
     });
     it("should format to correct number of decimal places", () => {
       expect(formatNumber(0.1)).toEqual("0.1");