diff --git a/packages/desktop-client/src/components/reports/FormulaResult.tsx b/packages/desktop-client/src/components/reports/FormulaResult.tsx index 7b4c6dfdbb..9b010c10e0 100644 --- a/packages/desktop-client/src/components/reports/FormulaResult.tsx +++ b/packages/desktop-client/src/components/reports/FormulaResult.tsx @@ -12,10 +12,13 @@ import { theme } from '@actual-app/components/theme'; import { View } from '@actual-app/components/view'; import debounce from 'lodash/debounce'; +import { amountToInteger } from 'loot-core/shared/util'; + import { chartTheme } from './chart-theme'; import { LoadingIndicator } from './LoadingIndicator'; import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter'; +import { useFormat } from '@desktop-client/hooks/useFormat'; import { useMergedRefs } from '@desktop-client/hooks/useMergedRefs'; import { useResizeObserver } from '@desktop-client/hooks/useResizeObserver'; @@ -50,6 +53,7 @@ export function FormulaResult({ const [fontSize, setFontSize] = useState(initialFontSize); const refDiv = useRef(null); const previousFontSizeRef = useRef(initialFontSize); + const format = useFormat(); // Format the display value - just show what we got const displayValue = useMemo(() => { @@ -57,10 +61,15 @@ export function FormulaResult({ return error; } else if (value === null || value === undefined) { return ''; + } else if (typeof value === 'number') { + return format( + amountToInteger(value, format.currency.decimalPlaces), + 'financial', + ); } else { return String(value); } - }, [error, value]); + }, [error, value, format]); const calculateFontSize = useCallback(() => { if (!refDiv.current) return; diff --git a/upcoming-release-notes/6493.md b/upcoming-release-notes/6493.md new file mode 100644 index 0000000000..c4955e43f6 --- /dev/null +++ b/upcoming-release-notes/6493.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [MatthiasBenaets] +--- + +Proper formatting of the Formula Card