respect number_style=percent when using compact formatting (#10033)

frontend/src/metabase/lib/formatting.js

@@ -156,7 +156,7 @@ export function formatNumber(number: number, options: FormattingOptions = {}) {
   }
 
   if (options.compact) {
-    return formatNumberCompact(number);
+    return formatNumberCompact(number, options);
   } else if (options.number_style === "scientific") {
     return formatNumberScientific(number, options);
   } else {
@@ -248,7 +248,14 @@ function formatNumberScientific(
   }
 }
 
-function formatNumberCompact(value: number) {
+function formatNumberCompact(value: number, options: FormattingOptions) {
+  if (options.number_style === "percent") {
+    return formatNumberCompactWithoutOptions(value * 100) + "%";
+  }
+  return formatNumberCompactWithoutOptions(value);
+}
+
+function formatNumberCompactWithoutOptions(value: number) {
   if (value === 0) {
     // 0 => 0
     return "0";

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

@@ -46,6 +46,19 @@ describe("formatting", () => {
         expect(formatNumber(1000, { compact: true })).toEqual("1.0k");
         expect(formatNumber(1111, { compact: true })).toEqual("1.1k");
       });
+      it("should format compact percentages", () => {
+        const options = { compact: true, number_style: "percent" };
+        expect(formatNumber(0, options)).toEqual("0%");
+        expect(formatNumber(0.001, options)).toEqual("0.1%");
+        expect(formatNumber(0.0001, options)).toEqual("~ 0%");
+        expect(formatNumber(0.001234, options)).toEqual("0.12%");
+        expect(formatNumber(0.1, options)).toEqual("10%");
+        expect(formatNumber(0.1234, options)).toEqual("12%");
+        expect(formatNumber(0.019, options)).toEqual("2%");
+        expect(formatNumber(0.021, options)).toEqual("2%");
+        expect(formatNumber(11.11, options)).toEqual("1.1k%");
+        expect(formatNumber(-0.22, options)).toEqual("-22%");
+      });
     });
     // FIXME: failing on CI
     xit("should format to correct number of decimal places", () => {