Merge pull request #134 from Vizzuality/SKY30-181-m-2-marine-conserva…

…tion-coverage-area-should-be-the-protected-area-not-the-total-area [SKY30-181] Marine Conservation Coverage area should be the protected area, not the total area
Vizzuality · Jan 17, 2024 · 7872b67 · 7872b67
2 parents 4b00b3d + b3c6efa
commit 7872b67
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
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
@@ -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/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>

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