Merge pull request #305 from Vizzuality/SKY30-450-fishing-protection-…

…level-widget-changes [SKY30-450] Fishing protection level widget changes
Vizzuality · Sep 16, 2024 · cc39bfe · cc39bfe
2 parents 29301d4 + e8ec71b
commit cc39bfe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 34 deletions.
diff --git a/...src/containers/map/sidebar/main-panel/panels/details/widgets/fishing-protection/index.tsx b/...src/containers/map/sidebar/main-panel/panels/details/widgets/fishing-protection/index.tsx
@@ -73,32 +73,6 @@ const FishingProtectionWidget: React.FC<FishingProtectionWidgetProps> = ({ locat
     }
   );
 
-  const { data: metadataWidget } = useGetDataInfos(
-    {
-      locale,
-      filters: {
-        slug: 'fishing-protection-widget',
-      },
-      populate: 'data_sources',
-    },
-    {
-      query: {
-        select: ({ data }) =>
-          data[0]
-            ? {
-                info: data[0].attributes.content,
-                sources: data[0].attributes?.data_sources?.data?.map(
-                  ({ attributes: { title, url } }) => ({
-                    title,
-                    url,
-                  })
-                ),
-              }
-            : undefined,
-      },
-    }
-  );
-
   const { data: metadata } = useGetDataInfos(
     {
       locale,
@@ -130,11 +104,17 @@ const FishingProtectionWidget: React.FC<FishingProtectionWidgetProps> = ({ locat
     if (!protectionLevelsData.length) return [];
 
     const parsedProtectionLevel = (label: string, protectionLevel, stats) => {
+      const totalAreaPercentage = (stats?.area / stats?.pct) * 100;
+
+      // There are circumstances in which pct is 0, which will cause the percentage calculation to be NaN.
+      // This is a safeguard so that if the data is unexpected, we don't display NaN on the screen.
+      if (isNaN(totalAreaPercentage)) return null;
+
       return {
         title: label,
         slug: protectionLevel.slug,
         background: FISHING_PROTECTION_CHART_COLORS[protectionLevel.slug],
-        totalArea: (stats?.area / stats?.pct) * 100,
+        totalArea: totalAreaPercentage,
         protectedArea: stats?.area,
         info: metadata?.info,
         sources: metadata?.sources,
@@ -158,24 +138,26 @@ const FishingProtectionWidget: React.FC<FishingProtectionWidgetProps> = ({ locat
       return parsedProtectionLevel(t('highly-protected-from-fishing'), protectionLevel, data);
     });
 
-    return parsedFishingProtectionLevelData ?? [];
+    return parsedFishingProtectionLevelData.filter(Boolean) ?? [];
   }, [t, protectionLevelsData, metadata]);
 
   const noData = !widgetChartData.length;
-
   const loading = isFetchingProtectionLevelsData;
 
   return (
     <Widget
-      title={t('fishing-protection')}
+      title={t('level-of-fishing-protection')}
       lastUpdated={protectionLevelsData[0]?.attributes?.updatedAt}
       noData={noData}
       loading={loading}
-      info={metadataWidget?.info}
-      sources={metadataWidget?.sources}
     >
       {widgetChartData.map((chartData) => (
-        <HorizontalBarChart key={chartData.slug} className="py-2" data={chartData} />
+        <HorizontalBarChart
+          key={chartData.slug}
+          className="py-2"
+          data={chartData}
+          showTarget={false}
+        />
       ))}
     </Widget>
   );

diff --git a/frontend/translations/en.json b/frontend/translations/en.json
@@ -216,7 +216,7 @@
       "administrative-boundary": "Administrative boundary",
       "national-level-contribution": "National level contribution",
       "global": "Global",
-      "fishing-protection": "Fishing Protection",
+      "level-of-fishing-protection": "Level of Fishing Protection",
       "highly-protected-from-fishing": "Highly protected from fishing"
     },
     "map-sidebar-layers-panel": {