adds info buttons to charts

Vizzuality · Mar 15, 2024 · 2243643 · 2243643
1 parent 19e7b19
commit 2243643
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>