Merge pull request #101 from benscobie/format-percentage

Format interest rate
benscobie · Sep 22, 2024 · d314238 · d314238
2 parents fb5d53f + 607ea13
commit d314238
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/components/ui/molecules/MonthLoanTable.tsx b/components/ui/molecules/MonthLoanTable.tsx
@@ -14,6 +14,7 @@ import {
   ChevronLeft,
   ChevronRight,
 } from 'react-bootstrap-icons'
+import { percentFormatter } from '../../../utils/percentFormatter'
 
 interface MonthLoanTableProps {
   results: Results
@@ -134,7 +135,7 @@ export const MonthLoanTable: NextPage<MonthLoanTableProps> = ({
                     )}
                   </td>
                   <td className="border-b border-l px-2 py-1.5 sm:px-3 md:px-4">
-                    {projection.interestRate * 100}%
+                    {percentFormatter.format(projection.interestRate)}
                   </td>
                   <td className="border-b border-l px-2 py-1.5 sm:px-3 md:px-4">
                     {currencyFormatterNoFraction.format(projection.threshold)}

diff --git a/utils/percentFormatter.ts b/utils/percentFormatter.ts
@@ -0,0 +1,5 @@
+export const percentFormatter = new Intl.NumberFormat('en-GB', {
+  style: 'percent',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+})