diff --git a/frontend/src/metabase/lib/formatting/numbers.tsx b/frontend/src/metabase/lib/formatting/numbers.tsx index abbd9804553dc02d3536580f580e20dd3658ec6e..11643af2e2d0a22905039330c562e81b73045362 100644 --- a/frontend/src/metabase/lib/formatting/numbers.tsx +++ b/frontend/src/metabase/lib/formatting/numbers.tsx @@ -182,7 +182,14 @@ function formatNumberCompact(value: number, options: FormatNumberOptionsType) { const { value: currency } = nf .formatToParts(value) .find((p: any) => p.type === "currency"); - return currency + formatNumberCompactWithoutOptions(value); + + const valueSign = value < 0 ? "-" : ""; + + return ( + valueSign + + currency + + formatNumberCompactWithoutOptions(Math.abs(value)) + ); } catch (e) { // Intl.NumberFormat failed, so we fall back to a non-currency number return formatNumberCompactWithoutOptions(value); diff --git a/frontend/src/metabase/lib/formatting/numbers.unit.spec.js b/frontend/src/metabase/lib/formatting/numbers.unit.spec.js new file mode 100644 index 0000000000000000000000000000000000000000..ad48aff00619ec144bbf3629e85e877490b036f1 --- /dev/null +++ b/frontend/src/metabase/lib/formatting/numbers.unit.spec.js @@ -0,0 +1,73 @@ +import { formatNumber, numberFormatterForOptions } from "./numbers"; + +describe("formatNumber", () => { + it("should show the correct currency format (metabase#34242)", () => { + const numberFormatter = numberFormatterForOptions({ + number_style: "currency", + currency: "USD", + currency_style: "symbol", + maximumFractionDigits: 2, + }); + + const compactResult = formatNumber(-500000, { + jsx: true, + remap: true, + field: "-500000", + currency: "USD", + number_style: "currency", + currency_style: "symbol", + currency_in_header: true, + number_separators: ".,", + _numberFormatter: numberFormatter, + _header_unit: "$", + column: { + display_name: "-500000", + source: "native", + field_ref: [ + "field", + "-500000", + { + "base-type": "type/Integer", + }, + ], + name: "-500000", + base_type: "type/Integer", + effective_type: "type/Integer", + }, + _column_title_full: "-500000 ($)", + compact: true, + }); + expect(compactResult).toEqual("-$500.0k"); + + const fullResult = formatNumber(-500000, { + compact: false, + maximumFractionDigits: 2, + jsx: true, + remap: true, + field: "-500000", + currency: "USD", + number_style: "currency", + currency_style: "symbol", + currency_in_header: true, + number_separators: ".,", + _numberFormatter: numberFormatter, + _header_unit: "$", + column: { + display_name: "-500000", + source: "native", + field_ref: [ + "field", + "-500000", + { + "base-type": "type/Integer", + }, + ], + name: "-500000", + base_type: "type/Integer", + effective_type: "type/Integer", + }, + _column_title_full: "-500000 ($)", + }); + expect(fullResult).toEqual("-$500,000.00"); + }); +}); diff --git a/frontend/test/metabase/lib/formatting.unit.spec.js b/frontend/test/metabase/lib/formatting.unit.spec.js index 39115b7f0bcddce7f098ba15ba0ca473eba9bd93..bf9a482dccaf0eea69e5bf5260dd85ff137d90a1 100644 --- a/frontend/test/metabase/lib/formatting.unit.spec.js +++ b/frontend/test/metabase/lib/formatting.unit.spec.js @@ -156,7 +156,7 @@ describe("formatting", () => { expect(formatNumber(724.9, options)).toEqual("$724.90"); 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)).toEqual("-$1.2M"); expect( formatNumber(1234567.89, { ...options, currency: "CNY" }), ).toEqual("CNÂ¥1.2M");