From 2243643cd338f450d2cc68b67db78ededd6f239a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?=
 <andres.gonzalez@vizzuality.com>
Date: Fri, 15 Mar 2024 12:00:46 +0100
Subject: [PATCH] adds info buttons to charts

---
 client/src/components/legend/item/info-modal.tsx    |  2 +-
 .../deforestation-alerts/index.tsx                  | 12 +++++++++++-
 .../sourcing-info/chart/index.tsx                   | 13 ++++++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/client/src/components/legend/item/info-modal.tsx b/client/src/components/legend/item/info-modal.tsx
index 24e11e5ec..8a193da17 100644
--- a/client/src/components/legend/item/info-modal.tsx
+++ b/client/src/components/legend/item/info-modal.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import Modal from 'components/modal/component';
 
 export type InfoModalProps = {
-  info: { title: string; description: string; source: string | string[] };
+  info: { title: string; description: string; source?: string | string[] };
 };
 
 const NO_DATA = 'No data available';
diff --git a/client/src/containers/analysis-eudr-detail/deforestation-alerts/index.tsx b/client/src/containers/analysis-eudr-detail/deforestation-alerts/index.tsx
index c1e2257cc..c314aa1ad 100644
--- a/client/src/containers/analysis-eudr-detail/deforestation-alerts/index.tsx
+++ b/client/src/containers/analysis-eudr-detail/deforestation-alerts/index.tsx
@@ -8,6 +8,7 @@ import DeforestationAlertsChart from './chart';
 import { useEUDRSupplier } from '@/hooks/eudr';
 import { eudrDetail } from '@/store/features/eudr-detail';
 import { useAppSelector } from '@/store/hooks';
+import InfoModal from '@/components/legend/item/info-modal';
 
 const dateFormatter = (date: string) => format(new UTCDate(date), "do 'of' MMMM yyyy");
 
@@ -29,7 +30,16 @@ const DeforestationAlerts = (): JSX.Element => {
 
   return (
     <section className="space-y-4 rounded-xl border border-gray-100 p-7 shadow-md">
-      <h4 className="font-medium">Deforestation alerts detected within the smallholders</h4>
+      <div className="flex items-center space-x-2">
+        <h4 className="font-medium">Deforestation alerts detected within the smallholders</h4>
+        <InfoModal
+          info={{
+            title: 'Deforestation alerts detected within the smallholders',
+            description:
+              'Number of near-real-time forest disturbances per plot for the selected supplier, based on RADD alerts generated using Sentinel-1’s cloud-penetrating radar sensors. Deforestation alerts conform to the EUDR definition following the WHISP methodology by FAO and WRI, providing robust monitoring of forest changes.',
+          }}
+        />
+      </div>
       {data?.totalAlerts && (
         <div className="rounded-xl bg-orange-100 px-6 py-4 text-xs">
           There were <span className="font-bold">{data?.totalAlerts}</span> deforestation alerts
diff --git a/client/src/containers/analysis-eudr-detail/sourcing-info/chart/index.tsx b/client/src/containers/analysis-eudr-detail/sourcing-info/chart/index.tsx
index 7ab89f74a..7c9ec6892 100644
--- a/client/src/containers/analysis-eudr-detail/sourcing-info/chart/index.tsx
+++ b/client/src/containers/analysis-eudr-detail/sourcing-info/chart/index.tsx
@@ -20,6 +20,8 @@ import { useAppSelector } from '@/store/hooks';
 import { eudrDetail } from '@/store/features/eudr-detail';
 import { EUDR_COLOR_RAMP } from '@/utils/colors';
 import { Badge } from '@/components/ui/badge';
+import InfoModal from '@/components/legend/item/info-modal';
+import InfoTooltip from '@/components/info-tooltip';
 
 const SupplierSourcingInfoChart = (): JSX.Element => {
   const [showBy, setShowBy] = useState<'byVolume' | 'byArea'>('byVolume');
@@ -82,7 +84,16 @@ const SupplierSourcingInfoChart = (): JSX.Element => {
   return (
     <div className="flex flex-col space-y-4">
       <div className="flex justify-between">
-        <h4 className="font-medium">Individual plot contributions to volume accumulation</h4>
+        <div className="flex items-center space-x-2">
+          <h4 className="font-medium">Individual plot contributions to volume accumulation</h4>
+          <InfoModal
+            info={{
+              title: 'Individual plot contributions to volume accumulation',
+              description:
+                "This chart displays the percentage of sourcing volume per plot of land by year for the selected supplier. It illustrates the distribution of sourcing activities across different plots of land over time, providing insights into the supplier's sourcing patterns and land utilization.",
+            }}
+          />
+        </div>
         <div className="flex items-center space-x-2">
           <span className="text-2xs uppercase">Show by</span>
           <div>