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,
});