Merge pull request #61 from Vizzuality/SKY30-137-fe-implement-the-mar…

…ine-conservation-protection-types-widget

[SKY30-137] FE - Implement the "Marine Conservation Protection Types" widget

frontend/src/components/charts/horizontal-bar-chart/index.tsx

@@ -43,7 +43,10 @@ const HorizontalBarChart: React.FC<HorizontalBarChartProps> = ({ className, data
 
   return (
     <div className={cn(className)}>
-      <div className="flex justify-end text-3xl font-bold">{protectedAreaPercentage}%</div>
+      <div className="flex items-end justify-end text-3xl font-bold">
+        {protectedAreaPercentage}
+        <span className="pb-1.5 pl-1.5 text-xs">%</span>
+      </div>
       <div className="flex justify-between text-xs">
         <span>{title} (i)</span>
         <span>

frontend/src/constants/protection-types-chart-colors.ts

@@ -0,0 +1,4 @@
+export const PROTECTION_TYPES_CHART_COLORS = {
+  'fully-highly-protected': '#FD8E28',
+  'less-protected-unknown': '#FFDD88',
+};

frontend/src/containers/data-tool/sidebar/widgets/index.tsx

@@ -4,13 +4,15 @@ import { locationAtom } from '@/store/location';
 
 import HabitatWidget from './habitat';
 import MarineConservationWidget from './marine-conservation';
+import ProtectionTypesWidget from './protection-types';
 
 const DataToolWidgets: React.FC = () => {
   const location = useAtomValue(locationAtom);
 
   return (
     <div className="flex flex-col divide-y-[1px] divide-black font-mono">
       <MarineConservationWidget location={location} />
+      <ProtectionTypesWidget location={location} />
       <HabitatWidget location={location} />
     </div>
   );

frontend/src/containers/data-tool/sidebar/widgets/protection-types/index.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+
+import HorizontalBarChart from '@/components/charts/horizontal-bar-chart';
+import Widget from '@/components/widget';
+import { PROTECTION_TYPES_CHART_COLORS } from '@/constants/protection-types-chart-colors';
+import { useGetMpaaProtectionLevelStats } from '@/types/generated/mpaa-protection-level-stat';
+import type { Location } from '@/types/generated/strapi.schemas';
+
+type ProtectionTypesWidgetProps = {
+  location: Location;
+};
+
+const ProtectionTypesWidget: React.FC<ProtectionTypesWidgetProps> = ({ location }) => {
+  // Default params: filter by location
+  const defaultQueryParams = {
+    filters: {
+      location: {
+        code: location.code,
+      },
+    },
+  };
+
+  // Find last updated in order to display the last data update
+  const { data: dataLastUpdate } = useGetMpaaProtectionLevelStats(
+    {
+      ...defaultQueryParams,
+      sort: 'updatedAt:desc',
+      'pagination[limit]': 1,
+    },
+    {
+      query: {
+        select: ({ data }) => data?.[0]?.attributes?.updatedAt,
+        placeholderData: { data: null },
+      },
+    }
+  );
+
+  // Get protection levels by location
+  const {
+    data: { data: protectionLevelStatsData },
+  } = useGetMpaaProtectionLevelStats(
+    {
+      ...defaultQueryParams,
+      populate: '*',
+      'pagination[limit]': -1,
+    },
+    {
+      query: {
+        select: ({ data }) => ({ data }),
+        placeholderData: { data: [] },
+      },
+    }
+  );
+
+  // Parse data to display in the chart
+  const widgetChartData = useMemo(() => {
+    if (!protectionLevelStatsData.length) return [];
+
+    const parsedData = protectionLevelStatsData.map((entry) => {
+      const stats = entry?.attributes;
+      const protectionLevel = stats?.mpaa_protection_level?.data.attributes;
+
+      return {
+        title: protectionLevel.name,
+        slug: protectionLevel.slug,
+        barColor: PROTECTION_TYPES_CHART_COLORS[protectionLevel.slug],
+        totalArea: location.totalMarineArea,
+        protectedArea: stats.area,
+        info: protectionLevel.info,
+      };
+    });
+
+    return parsedData;
+  }, [location, protectionLevelStatsData]);
+
+  // If there's no widget data, don't display the widget
+  if (!widgetChartData.length) return null;
+
+  return (
+    <Widget title="Marine Conservation Protection Types" lastUpdated={dataLastUpdate}>
+      {widgetChartData.map((chartData) => (
+        <HorizontalBarChart key={chartData.slug} className="py-2" data={chartData} />
+      ))}
+    </Widget>
+  );
+};
+
+export default ProtectionTypesWidget;