EUDR: API connection

Vizzuality · Mar 12, 2024 · 3b8b681 · 3b8b681
1 parent 6675120
commit 3b8b681
Show file tree

Hide file tree

Showing 12 changed files with 317 additions and 390 deletions.
diff --git a/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/utils.ts b/client/src/containers/analysis-eudr/category-list/breakdown/breakdown-item/utils.ts
@@ -17,7 +17,7 @@ const SVGS_DICTIONARY = {
   rubber: RubberSVG,
   wood: WoodSVG,
   coffee: CoffeeSVG,
-  'palm-oil': PalmOilSVG,
+  'Palm oil and its fractions': PalmOilSVG,
   cattle: CattleSVG,
 };
 

diff --git a/...c/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx b/...c/containers/analysis-eudr/category-list/breakdown/deforestation-free-suppliers/index.tsx
@@ -3,66 +3,54 @@ import Flag from 'react-world-flags';
 
 import { getCommodityIconByName } from '../breakdown-item/utils';
 import Breakdown from '..';
+import { CATEGORIES } from '../..';
 
 import { eudr } from '@/store/features/eudr';
 import { useAppSelector } from '@/store/hooks';
-import { themeColors } from 'utils/colors';
+import { dateFormatter, useEUDRData } from '@/hooks/eudr';
 
 import type BreakdownItem from '../breakdown-item';
-import type { CommodityName } from '../breakdown-item/utils';
-
-type CommonData = {
-  name: string;
-  value: number;
-};
-
-type CommodityData = CommonData & {
-  name: CommodityName;
-};
-
-type CountryData = CommonData & {
-  iso3: string;
-};
-
-const SAMPLE_DATA: { commodities: CommodityData[]; countries: CountryData[] } = {
-  commodities: [
-    { name: 'cattle', value: 80 },
-    { name: 'cocoa', value: 22 },
-    { name: 'coffee', value: 54 },
-    { name: 'palm-oil', value: 50 },
-    { name: 'wood', value: 11 },
-    { name: 'soy', value: 5 },
-    { name: 'rubber', value: 70 },
-  ],
-  countries: [
-    { name: 'Italy', value: 33, iso3: 'ITA' },
-    { name: 'Spain', value: 56, iso3: 'ESP' },
-    { name: 'Brazil', value: 8, iso3: 'BRA' },
-  ],
-};
-
-export const CATEGORY_COLOR = themeColors.blue[400];
 
 const DeforestationFreeSuppliersBreakdown = () => {
-  const { viewBy } = useAppSelector(eudr);
-
-  const data: ComponentProps<typeof BreakdownItem>[] = useMemo(() => {
-    if (viewBy === 'commodities') {
-      return SAMPLE_DATA[viewBy].map((item) => ({
-        ...item,
-        color: CATEGORY_COLOR,
-        icon: getCommodityIconByName(item.name, { fill: CATEGORY_COLOR }),
-      }));
-    }
-
-    return SAMPLE_DATA[viewBy].map((item) => ({
-      ...item,
-      color: CATEGORY_COLOR,
-      icon: <Flag code={item.iso3} className="h-[24px] w-[32px] rounded-md" />,
-    }));
-  }, [viewBy]);
-
-  return <Breakdown data={data} />;
+  const {
+    viewBy,
+    filters: { dates, suppliers, origins, materials },
+  } = useAppSelector(eudr);
+
+  const { data } = useEUDRData(
+    {
+      startAlertDate: dateFormatter(dates.from),
+      endAlertDate: dateFormatter(dates.to),
+      producerIds: suppliers?.map(({ value }) => value),
+      materialIds: materials?.map(({ value }) => value),
+      originIds: origins?.map(({ value }) => value),
+    },
+    {
+      select: (data) => data?.breakDown,
+    },
+  );
+
+  const parsedData: ComponentProps<typeof BreakdownItem>[] = useMemo(() => {
+    const dataByView = data?.[viewBy] || [];
+
+    return Object.keys(dataByView)
+      .filter((key) => key === CATEGORIES[0].name)
+      .map((filteredKey) =>
+        dataByView[filteredKey].detail
+          .map((item) => ({
+            ...item,
+            color: CATEGORIES[0].color,
+            icon: getCommodityIconByName(item.name, { fill: CATEGORIES[0].color }),
+            ...(viewBy === 'origins' && {
+              icon: <Flag code={item.iso3} className="h-[24px] w-[32px] rounded-md" />,
+            }),
+          }))
+          .flat(),
+      )
+      .flat();
+  }, [data, viewBy]);
+
+  return <Breakdown data={parsedData} />;
 };
 
 export default DeforestationFreeSuppliersBreakdown;
diff --git a/...iners/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx b/...iners/analysis-eudr/category-list/breakdown/suppliers-with-deforestation-alerts/index.tsx
@@ -3,65 +3,54 @@ import Flag from 'react-world-flags';
 
 import { getCommodityIconByName } from '../breakdown-item/utils';
 import Breakdown from '..';
+import { CATEGORIES } from '../..';
 
 import { eudr } from '@/store/features/eudr';
 import { useAppSelector } from '@/store/hooks';
+import { dateFormatter, useEUDRData } from '@/hooks/eudr';
 
 import type BreakdownItem from '../breakdown-item';
-import type { CommodityName } from '../breakdown-item/utils';
-
-type CommonData = {
-  name: string;
-  value: number;
-};
-
-type CommodityData = CommonData & {
-  name: CommodityName;
-};
-
-type CountryData = CommonData & {
-  iso3: string;
-};
-
-const SAMPLE_DATA: { commodities: CommodityData[]; countries: CountryData[] } = {
-  commodities: [
-    { name: 'cattle', value: 80 },
-    { name: 'cocoa', value: 22 },
-    { name: 'coffee', value: 54 },
-    { name: 'palm-oil', value: 50 },
-    { name: 'wood', value: 11 },
-    { name: 'soy', value: 5 },
-    { name: 'rubber', value: 70 },
-  ],
-  countries: [
-    { name: 'Italy', value: 33, iso3: 'ITA' },
-    { name: 'Spain', value: 56, iso3: 'ESP' },
-    { name: 'Brazil', value: 8, iso3: 'BRA' },
-  ],
-};
-
-export const CATEGORY_COLOR = '#FFC038';
 
 const SuppliersWithDeforestationAlertsBreakdown = () => {
-  const { viewBy } = useAppSelector(eudr);
-
-  const data: ComponentProps<typeof BreakdownItem>[] = useMemo(() => {
-    if (viewBy === 'commodities') {
-      return SAMPLE_DATA[viewBy].map((item) => ({
-        ...item,
-        color: CATEGORY_COLOR,
-        icon: getCommodityIconByName(item.name, { fill: CATEGORY_COLOR }),
-      }));
-    }
-
-    return SAMPLE_DATA[viewBy].map((item) => ({
-      ...item,
-      color: CATEGORY_COLOR,
-      icon: <Flag code={item.iso3} className="h-[24px] w-[32px] rounded-md" />,
-    }));
-  }, [viewBy]);
-
-  return <Breakdown data={data} />;
+  const {
+    viewBy,
+    filters: { dates, suppliers, origins, materials },
+  } = useAppSelector(eudr);
+
+  const { data } = useEUDRData(
+    {
+      startAlertDate: dateFormatter(dates.from),
+      endAlertDate: dateFormatter(dates.to),
+      producerIds: suppliers?.map(({ value }) => value),
+      materialIds: materials?.map(({ value }) => value),
+      originIds: origins?.map(({ value }) => value),
+    },
+    {
+      select: (data) => data?.breakDown,
+    },
+  );
+
+  const parsedData: ComponentProps<typeof BreakdownItem>[] = useMemo(() => {
+    const dataByView = data?.[viewBy] || [];
+
+    return Object.keys(dataByView)
+      .filter((key) => key === CATEGORIES[1].name)
+      .map((filteredKey) =>
+        dataByView[filteredKey].detail
+          .map((item) => ({
+            ...item,
+            color: CATEGORIES[1].color,
+            icon: getCommodityIconByName(item.name, { fill: CATEGORIES[1].color }),
+            ...(viewBy === 'origins' && {
+              icon: <Flag code={item.iso3} className="h-[24px] w-[32px] rounded-md" />,
+            }),
+          }))
+          .flat(),
+      )
+      .flat();
+  }, [data, viewBy]);
+
+  return <Breakdown data={parsedData} />;
 };
 
 export default SuppliersWithDeforestationAlertsBreakdown;
diff --git a/...ontainers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx b/...ontainers/analysis-eudr/category-list/breakdown/suppliers-with-no-location-data/index.tsx
@@ -3,65 +3,54 @@ import Flag from 'react-world-flags';
 
 import { getCommodityIconByName } from '../breakdown-item/utils';
 import Breakdown from '..';
+import { CATEGORIES } from '../..';
 
 import { eudr } from '@/store/features/eudr';
 import { useAppSelector } from '@/store/hooks';
+import { dateFormatter, useEUDRData } from '@/hooks/eudr';
 
 import type BreakdownItem from '../breakdown-item';
-import type { CommodityName } from '../breakdown-item/utils';
-
-type CommonData = {
-  name: string;
-  value: number;
-};
-
-type CommodityData = CommonData & {
-  name: CommodityName;
-};
-
-type CountryData = CommonData & {
-  iso3: string;
-};
-
-const SAMPLE_DATA: { commodities: CommodityData[]; countries: CountryData[] } = {
-  commodities: [
-    { name: 'cattle', value: 80 },
-    { name: 'cocoa', value: 22 },
-    { name: 'coffee', value: 54 },
-    { name: 'palm-oil', value: 50 },
-    { name: 'wood', value: 11 },
-    { name: 'soy', value: 5 },
-    { name: 'rubber', value: 70 },
-  ],
-  countries: [
-    { name: 'Italy', value: 33, iso3: 'ITA' },
-    { name: 'Spain', value: 56, iso3: 'ESP' },
-    { name: 'Brazil', value: 8, iso3: 'BRA' },
-  ],
-};
-
-export const CATEGORY_COLOR = '#8561FF';
 
 const SuppliersWithNoLocationDataBreakdown = () => {
-  const { viewBy } = useAppSelector(eudr);
-
-  const data: ComponentProps<typeof BreakdownItem>[] = useMemo(() => {
-    if (viewBy === 'commodities') {
-      return SAMPLE_DATA[viewBy].map((item) => ({
-        ...item,
-        color: CATEGORY_COLOR,
-        icon: getCommodityIconByName(item.name, { fill: CATEGORY_COLOR }),
-      }));
-    }
-
-    return SAMPLE_DATA[viewBy].map((item) => ({
-      ...item,
-      color: CATEGORY_COLOR,
-      icon: <Flag code={item.iso3} className="h-[24px] w-[32px] rounded-md" />,
-    }));
-  }, [viewBy]);
-
-  return <Breakdown data={data} />;
+  const {
+    viewBy,
+    filters: { dates, suppliers, origins, materials },
+  } = useAppSelector(eudr);
+
+  const { data } = useEUDRData(
+    {
+      startAlertDate: dateFormatter(dates.from),
+      endAlertDate: dateFormatter(dates.to),
+      producerIds: suppliers?.map(({ value }) => value),
+      materialIds: materials?.map(({ value }) => value),
+      originIds: origins?.map(({ value }) => value),
+    },
+    {
+      select: (data) => data?.breakDown,
+    },
+  );
+
+  const parsedData: ComponentProps<typeof BreakdownItem>[] = useMemo(() => {
+    const dataByView = data?.[viewBy] || [];
+
+    return Object.keys(dataByView)
+      .filter((key) => key === CATEGORIES[2].name)
+      .map((filteredKey) =>
+        dataByView[filteredKey].detail
+          .map((item) => ({
+            ...item,
+            color: CATEGORIES[2].color,
+            icon: getCommodityIconByName(item.name, { fill: CATEGORIES[2].color }),
+            ...(viewBy === 'origins' && {
+              icon: <Flag code={item.iso3} className="h-[24px] w-[32px] rounded-md" />,
+            }),
+          }))
+          .flat(),
+      )
+      .flat();
+  }, [data, viewBy]);
+
+  return <Breakdown data={parsedData} />;
 };
 
 export default SuppliersWithNoLocationDataBreakdown;