Feature/f 52 current food consumption country view

.vscode/settings.json

@@ -5,5 +5,8 @@
   "editor.tabSize": 2,
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "files.eol": "\n",
-  "cSpell.words": ["nextui"]
+  "cSpell.words": [
+    "Choropleth",
+    "nextui"
+  ]
 }

src/app/providers.tsx

@@ -8,6 +8,7 @@ import * as React from 'react';
 
 import { SelectedAlertProvider } from '@/domain/contexts/SelectedAlertContext';
 import { SelectedMapProvider } from '@/domain/contexts/SelectedMapContext';
+import { SelectedMapVisibilityProvider } from '@/domain/contexts/SelectedMapVisibilityContext';
 import { SidebarProvider } from '@/domain/contexts/SidebarContext';
 
 export interface ProvidersProps {
@@ -22,9 +23,11 @@ export function Providers({ children, themeProps }: ProvidersProps) {
     <NextUIProvider navigate={router.push}>
       <NextThemesProvider defaultTheme="system" {...themeProps}>
         <SidebarProvider>
-          <SelectedMapProvider>
-            <SelectedAlertProvider>{children}</SelectedAlertProvider>
-          </SelectedMapProvider>
+          <SelectedMapVisibilityProvider>
+            <SelectedMapProvider>
+              <SelectedAlertProvider>{children}</SelectedAlertProvider>
+            </SelectedMapProvider>
+          </SelectedMapVisibilityProvider>
         </SidebarProvider>
       </NextThemesProvider>
     </NextUIProvider>

src/components/Cards/Card.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Card, CardBody, CardHeader, Image } from '@nextui-org/react';
+import { v4 as uuid } from 'uuid';
 
 import { CardProps } from '@/domain/props/CardProps';
 
@@ -13,7 +14,7 @@ export default function CustomCard({ title, content }: CardProps) {
       <CardBody className="flex flex-col items-center justify-center overflow-visible overflow-y-auto max-h-[300px] py-2">
         <div className="flex flex-row gap-6 overflow-y-auto">
           {content.map((item) => (
-            <div key={item.text} className="flex flex-col gap-[3px] items-center">
+            <div key={uuid()} className="flex flex-col gap-[3px] items-center">
               <div className="imageWrapper">
                 <Image alt={item.altText} className="w-[102px] h-[75px]" src={item.imageSrc} />
               </div>

src/components/Map/FcsAccordion.tsx

@@ -0,0 +1,158 @@
+import { Spacer } from '@nextui-org/react';
+
+import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
+import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
+import { cardsWrapperClass } from '@/utils/primitives';
+
+import CustomAccordion from '../Accordions/Accordion';
+import CustomCard from '../Cards/Card';
+import { LineChart } from '../Charts/LineChart';
+
+export default function FcsAccordion({ countryData, loading, countryIso3Data }: FcsAccordionProps) {
+  const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
+  const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
+  const fcsChartData = FcsAccordionOperations.getFcsChartData(countryData);
+  const rcsiChartData = FcsAccordionOperations.getRcsiChartData(countryData);
+  const currencyExchangeChartData = FcsAccordionOperations.getCurrencyExchangeChartData(countryIso3Data);
+  const balanceOfTradeChartData = FcsAccordionOperations.getBalanceOfTradeChartData(countryIso3Data);
+  const headlineAndFoodInflationChartData =
+    FcsAccordionOperations.getHeadlineAndFoodInflationChartData(countryIso3Data);
+  return (
+    <div className="absolute w-[350px] left-[108px] top-4 z-9999">
+      <CustomAccordion
+        loading={loading}
+        items={[
+          {
+            title: 'Food Security',
+            iconSrc: '/Images/InfoIcon.svg',
+            content: (
+              <div className={cardsWrapperClass}>
+                <CustomCard
+                  title="Population"
+                  content={[
+                    {
+                      imageSrc: '/Images/Population.svg',
+                      text: countryData?.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
+                      altText: 'Population Icon',
+                    },
+                  ]}
+                />
+                <CustomCard
+                  title="People with insufficient food consumption"
+                  content={[
+                    {
+                      imageSrc: '/Images/FoodConsumption.svg',
+                      text: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
+                      altText: 'Population Icon',
+                    },
+                    {
+                      imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowGreen.svg' : '/Images/ArrowRed.svg',
+                      text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
+                      timeText: '1 Months ago',
+                      altText: 'Icon',
+                    },
+                    {
+                      imageSrc:
+                        deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowGreen.svg' : '/Images/ArrowRed.svg',
+                      text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
+                      timeText: '3 Month ago',
+                      altText: 'Other Icon',
+                    },
+                  ]}
+                />
+              </div>
+            ),
+          },
+          {
+            title: 'Food Security Trends',
+            iconSrc: '/Images/InfoIcon.svg',
+            content: (
+              <div>
+                {fcsChartData ? (
+                  <LineChart
+                    title="Trend of the number of people with insufficient food consumption"
+                    data={fcsChartData}
+                    expandable
+                    small
+                  />
+                ) : (
+                  <p>No data about insufficient food consumption</p>
+                )}
+                <Spacer y={1} />
+                {rcsiChartData ? (
+                  <LineChart
+                    title="Trend of the number of people using crisis or above crisis food-based coping"
+                    data={rcsiChartData}
+                    expandable
+                    small
+                  />
+                ) : (
+                  <p>No data about crisis or above crisis food-based coping</p>
+                )}
+              </div>
+            ),
+          },
+          {
+            title: 'Macro-economic',
+            iconSrc: '/Images/InfoIcon.svg',
+            content: (
+              <div className={cardsWrapperClass}>
+                <CustomCard
+                  title="Import Dependency"
+                  content={[
+                    {
+                      imageSrc: '/Images/Import.svg',
+                      text: countryData?.importDependency
+                        ? `${countryData.importDependency.toFixed(1)}% of Cereals`
+                        : 'N/A',
+                      altText: 'Icon',
+                    },
+                  ]}
+                />
+              </div>
+            ),
+          },
+          {
+            title: 'Currency Exchange',
+            iconSrc: '/Images/InfoIcon.svg',
+            content: (
+              <div>
+                {currencyExchangeChartData ? (
+                  <LineChart data={currencyExchangeChartData} expandable small />
+                ) : (
+                  <p>No data about currency exchange</p>
+                )}
+              </div>
+            ),
+          },
+          {
+            title: 'Balance of Trade',
+            iconSrc: '/Images/InfoIcon.svg',
+            content: (
+              <div>
+                {balanceOfTradeChartData ? (
+                  <LineChart data={balanceOfTradeChartData} expandable small />
+                ) : (
+                  <p>No data about balance of trade</p>
+                )}
+              </div>
+            ),
+          },
+          {
+            title: 'Headline and food inflation',
+            iconSrc: '/Images/InfoIcon.svg',
+            content: (
+              <div>
+                {headlineAndFoodInflationChartData ? (
+                  <LineChart data={headlineAndFoodInflationChartData} expandable small />
+                ) : (
+                  <p>No data about headline and food inflation</p>
+                )}
+              </div>
+            ),
+          },
+        ]}
+      />
+    </div>
+  );
+}

src/components/Map/FcsChoropleth.tsx

@@ -0,0 +1,66 @@
+import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
+import L from 'leaflet';
+import { useTheme } from 'next-themes';
+import React, { useRef, useState } from 'react';
+import { GeoJSON, useMap } from 'react-leaflet';
+
+import { CountryData } from '@/domain/entities/country/CountryData';
+import { CountryIso3Data } from '@/domain/entities/country/CountryIso3Data';
+import FcsChoroplethProps from '@/domain/props/FcsChoroplethProps';
+import FcsChoroplethOperations from '@/operations/map/FcsChoroplethOperations';
+
+import FscCountryChoropleth from './FcsCountryChoropleth';
+
+export default function FcsChoropleth({
+  data,
+  countryId,
+  selectedCountryId,
+  selectedAlert,
+  setSelectedCountryId,
+  setSelectedMapVisibility,
+  toggleAlert,
+}: FcsChoroplethProps) {
+  const geoJsonRef = useRef<L.GeoJSON | null>(null);
+  const map = useMap();
+  const { theme } = useTheme();
+  const [countryData, setCountryData] = useState<CountryData | undefined>();
+  const [countryIso3Data, setCountryIso3Data] = useState<CountryIso3Data | undefined>();
+  const [regionData, setRegionData] = useState<FeatureCollection<Geometry, GeoJsonProperties> | undefined>();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  return (
+    <div>
+      <GeoJSON
+        ref={(instance) => {
+          geoJsonRef.current = instance;
+        }}
+        data={data}
+        style={FcsChoroplethOperations.countryStyle}
+        onEachFeature={(feature, layer) =>
+          FcsChoroplethOperations.onEachFeature(
+            feature,
+            layer,
+            map,
+            selectedAlert,
+            setSelectedCountryId,
+            setLoading,
+            setRegionData,
+            setCountryData,
+            setCountryIso3Data,
+            setSelectedMapVisibility,
+            toggleAlert,
+            theme === 'dark'
+          )
+        }
+      />
+      {regionData && countryId === selectedCountryId && (
+        <FscCountryChoropleth
+          regionData={regionData}
+          countryData={countryData}
+          countryIso3Data={countryIso3Data}
+          loading={loading}
+        />
+      )}
+    </div>
+  );
+}

src/components/Map/FcsCountryChoropleth.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { GeoJSON } from 'react-leaflet';
+
+import FscCountryChoroplethProps from '@/domain/props/FcsCountryChoroplethProps';
+import { FcsCountryChoroplethOperations } from '@/operations/map/FcsCountryChoroplethOperations';
+
+import FcsAccordion from './FcsAccordion';
+
+export default function FscCountryChoropleth({
+  regionData,
+  countryData,
+  countryIso3Data,
+  loading,
+}: FscCountryChoroplethProps) {
+  return (
+    <div>
+      <FcsAccordion countryData={countryData} countryIso3Data={countryIso3Data} loading={loading} />
+      <GeoJSON
+        data={regionData}
+        style={FcsCountryChoroplethOperations.styleFunction}
+        onEachFeature={(feature, layer) => FcsCountryChoroplethOperations.onEachFeature(feature, layer, regionData)}
+      />
+    </div>
+  );
+}

src/components/Map/FcsRegionTooltip.tsx

@@ -0,0 +1,61 @@
+import { Feature, GeoJsonProperties, Geometry } from 'geojson';
+
+import { FcsRegionTooltipOperations } from '@/operations/map/FcsRegionTooltipOperations';
+import { formatToMillion } from '@/utils/formatting';
+
+import { LineChart } from '../Charts/LineChart';
+
+interface FcsRegionTooltipProps {
+  feature: Feature<Geometry, GeoJsonProperties>;
+}
+
+export default function FcsRegionTooltip({ feature }: FcsRegionTooltipProps) {
+  const fcsPeople = feature.properties?.fcs?.people;
+  const fcsMillion = fcsPeople ? formatToMillion(fcsPeople) : null;
+  const fcsRatio = feature?.properties?.fcs?.ratio;
+  const rcsiPeople = feature.properties?.rcsi?.people;
+  const rcsiMillion = rcsiPeople ? formatToMillion(rcsiPeople) : null;
+  const rcsiRatio = feature?.properties?.rcsi?.ratio || null;
+  return (
+    <div className="bg-background text-foreground rounded-md shadow-md max-w-sm z-9999">
+      <div className="px-4 pt-4">
+        <h3 className="text-lg text-foreground font-bold">{feature.properties?.Name}</h3>
+        <div className="mt-2 text-foreground">
+          <p>
+            {fcsMillion && fcsRatio ? (
+              <>
+                <span className="text-clusterOrange font-bold">
+                  {fcsRatio}% ({fcsMillion}M){' '}
+                </span>
+                with insufficient food consumption
+              </>
+            ) : (
+              'No data about insufficient food consumption'
+            )}
+          </p>
+          <p>
+            {rcsiRatio && rcsiMillion ? (
+              <>
+                <span className="text-clusterOrange font-bold">
+                  {rcsiRatio}% ({rcsiMillion}M){' '}
+                </span>
+                with crisis or above crisis food-based coping
+              </>
+            ) : (
+              'No data about crisis or above crisis food-based coping'
+            )}
+          </p>
+        </div>
+      </div>
+      <div className="px-1">
+        {feature.properties?.fcsGraph && (
+          <LineChart
+            title="Number of people with insufficient food consumption"
+            data={FcsRegionTooltipOperations.getFcsChartData(feature.properties.fcsGraph)}
+            small
+          />
+        )}
+      </div>
+    </div>
+  );
+}