From f9aff665091f1aa7d81c92100bf6f9e9f0ba2d28 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Wed, 17 Jan 2024 11:56:26 +0000
Subject: [PATCH 1/2] Marine Conservation Coverage widget area to be the
 protected area, not the total area

---
 .../details/widgets/marine-conservation/index.tsx        | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

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<MarineConservationWidgetProps> = ({ 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<MarineConservationWidgetProps> = ({ loc
             <span className="text-lg">%</span>
           </span>
           <span className="space-x-1 text-lg  ">
-            <span>{stats?.totalArea}</span>
+            <span>{stats?.protectedArea}</span>
             <span>
               km<sup>2</sup>
             </span>

From b3c6efaa735bb6a4634533bc24a14c6d0e004e26 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Wed, 17 Jan 2024 12:10:19 +0000
Subject: [PATCH 2/2] Remove maximumSignificantDigits cap by default on the
 formatKM util; it can be set as options if needed

---
 .../containers/map/content/map/popup/protected-area/index.tsx  | 3 +++
 frontend/src/lib/utils/formats.ts                              | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

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,
+                  },
                 })}
                 Km<sup>2</sup>
               </dd>
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,
   });