diff --git a/frontend/src/containers/map/content/map/popup/protected-area/index.tsx b/frontend/src/containers/map/content/map/popup/protected-area/index.tsx index ecda80d3..e75fb8b4 100644 --- a/frontend/src/containers/map/content/map/popup/protected-area/index.tsx +++ b/frontend/src/containers/map/content/map/popup/protected-area/index.tsx @@ -133,6 +133,9 @@ const ProtectedAreaPopup = ({ locationId }: { locationId: number }) => { {format({ value: DATA?.REP_M_AREA, id: 'formatKM', + options: { + maximumSignificantDigits: 3, + }, })} Km2 diff --git a/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx b/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx index 22081642..c919949f 100644 --- a/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx +++ b/frontend/src/containers/map/sidebar/details/widgets/marine-conservation/index.tsx @@ -4,6 +4,7 @@ import { groupBy } from 'lodash-es'; import ConservationChart from '@/components/charts/conservation-chart'; import Widget from '@/components/widget'; +import { formatKM } from '@/lib/utils/formats'; import { useGetProtectionCoverageStats } from '@/types/generated/protection-coverage-stat'; import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; @@ -85,13 +86,11 @@ const MarineConservationWidget: React.FC = ({ loc maximumFractionDigits: 0, }); const percentageFormatted = formatter.format((protectedArea / totalArea) * 100); - const totalAreaFormatted = Intl.NumberFormat('en-US', { - notation: 'standard', - }).format(totalArea); + const protectedAreaFormatted = formatKM(protectedArea); return { protectedPercentage: percentageFormatted, - totalArea: totalAreaFormatted, + protectedArea: protectedAreaFormatted, }; }, [location, mergedProtectionStats]); @@ -158,7 +157,7 @@ const MarineConservationWidget: React.FC = ({ loc % - {stats?.totalArea} + {stats?.protectedArea} km2 diff --git a/frontend/src/lib/utils/formats.ts b/frontend/src/lib/utils/formats.ts index 50ae64b3..3ad4f41c 100644 --- a/frontend/src/lib/utils/formats.ts +++ b/frontend/src/lib/utils/formats.ts @@ -14,7 +14,7 @@ export function formatKM(value: number, options?: Intl.NumberFormatOptions) { compactDisplay: 'short', unit: 'kilometer', unitDisplay: 'short', - maximumSignificantDigits: 3, + maximumFractionDigits: 0, ...options, });