Merge branch 'main' of https://github.com/jst-seminar-rostlab-tum/wfp…

…-hunger-map into feature/f-146-integrate-chatbot-reports-chatting
jst-seminar-rostlab-tum · Dec 12, 2024 · ede42a4 · ede42a4
2 parents 4f6121f + 646177f
commit ede42a4
Show file tree

Hide file tree

Showing 70 changed files with 1,170 additions and 1,148 deletions.
diff --git a/package.json b/package.json
@@ -60,8 +60,6 @@
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "leaflet-geosearch": "^4.0.0",
     "lucide-react": "^0.454.0",
-    "mapbox-gl": "^3.7.0",
-    "mapbox-gl-leaflet": "^0.0.16",
     "next": "14.2.10",
     "next-themes": "^0.2.1",
     "nextui-cli": "^0.3.4",

diff --git a/src/app/download-portal/loading.tsx b/src/app/download-portal/loading.tsx
@@ -0,0 +1,23 @@
+import AccordionContainer from '@/components/Accordions/AccordionContainer';
+import { TITLE } from '@/domain/entities/download/Country';
+
+export default function Loading() {
+  const loading = true;
+
+  return (
+    <div>
+      <h1>Download Portal</h1>
+      <AccordionContainer
+        items={[
+          {
+            title: 'Country Reports',
+          },
+          {
+            title: TITLE,
+          },
+        ]}
+        loading={loading}
+      />
+    </div>
+  );
+}
diff --git a/src/app/elements/page.tsx b/src/app/elements/page.tsx
@@ -7,14 +7,12 @@ import { CustomButton } from '@/components/Buttons/CustomButton';
 import { LineChart } from '@/components/Charts/LineChart';
 import MapSkeleton from '@/components/Map/MapSkeleton';
 import SearchBar from '@/components/Search/SearchBar';
-import { BalanceOfTradeGraph } from '@/domain/entities/charts/BalanceOfTradeGraph.ts';
-import { CurrencyExchangeGraph } from '@/domain/entities/charts/CurrencyExchangeGraph.ts';
-import { InflationGraphs } from '@/domain/entities/charts/InflationGraphs.ts';
 import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
 import { LineChartDataType } from '@/domain/enums/LineChartDataType.ts';
 import AccordionsOperations from '@/operations/accordions/AccordionOperations';
 
 import { ReactComponent as FoodSvg } from '../../../public/Images/FoodConsumption.svg';
+
 /**
  * You can use this page to try and show off your components.
  * It's not accessible from the UI, but you can reach it by manually navigating to /elements
@@ -77,6 +75,7 @@ export default async function Elements() {
           { x: 2, y: 5 },
           { x: 3, y: 2 },
         ],
+        dashStyle: 'LongDash',
       },
       {
         name: 'Category C',
@@ -85,101 +84,110 @@ export default async function Elements() {
           { x: 1, y: 2 },
           { x: 3, y: 3 },
         ],
+        dashStyle: 'Dot',
       },
     ],
-  };
-
-  const balanceOfTradeGraphData: BalanceOfTradeGraph = {
-    type: LineChartDataType.BALANCE_OF_TRADE_CHART,
-    data: [
+    verticalLines: [
       {
-        x: '2023-10-01',
-        y: -5345789,
+        x: 1,
       },
       {
-        x: '2023-12-01',
-        y: -1235478,
+        x: 1.5,
+        dashStyle: 'LongDash',
+        color: 'rgba(129,27,27,0.53)',
       },
+    ],
+    verticalBands: [
       {
-        x: '2024-02-01',
-        y: 690234,
+        xStart: -1,
+        xEnd: 1,
+        label: 'AB',
       },
       {
-        x: '2024-04-01',
-        y: 3945574,
+        xStart: 1,
+        xEnd: 4,
+        color: 'rgba(129,27,27,0.13)',
+        label: 'EF',
       },
     ],
   };
 
-  const currencyExchangeGraphData: CurrencyExchangeGraph = {
-    type: LineChartDataType.CURRENCY_EXCHANGE_CHART,
-    name: 'Exchange Rate (USD/NGN)',
-    source: '',
-    updated: '',
-    data: [
+  const predictionDummyChartData: LineChartData = {
+    type: LineChartDataType.LINE_CHART_DATA,
+    xAxisType: 'linear',
+    yAxisLabel: 'Mill',
+    predictionVerticalLineX: 3,
+    lines: [
       {
-        x: '2023-10-01',
-        y: 1.421234,
+        name: 'Category A',
+        showRange: true,
+        dataPoints: [
+          { x: 0, y: 4, yRangeMin: 3.5, yRangeMax: 5 },
+          { x: 1, y: 3, yRangeMin: 2, yRangeMax: 4 },
+          { x: 2, y: 4, yRangeMin: 3.5, yRangeMax: 4.5 },
+          { x: 3, y: 8, yRangeMin: 7.5, yRangeMax: 8.5 },
+        ],
       },
       {
-        x: '2023-12-01',
-        y: 1.597552,
+        name: 'Prediction',
+        prediction: true,
+        dataPoints: [
+          { x: 0, y: 4 },
+          { x: 1, y: 7 },
+          { x: 2, y: 5 },
+          { x: 3, y: 7 },
+          { x: 4, y: 8 },
+          { x: 5, y: 5 },
+          { x: 6, y: 6 },
+        ],
+      },
+    ],
+  };
+
+  const multiplePredictionsDummyChartData: LineChartData = {
+    type: LineChartDataType.LINE_CHART_DATA,
+    xAxisType: 'linear',
+    yAxisLabel: 'Mill',
+    predictionVerticalLineX: 3,
+    lines: [
+      {
+        name: 'Category A',
+        showRange: true,
+        dataPoints: [
+          { x: 0, y: 4, yRangeMin: 3.5, yRangeMax: 5 },
+          { x: 1, y: 3, yRangeMin: 2, yRangeMax: 4 },
+          { x: 2, y: 4, yRangeMin: 3.5, yRangeMax: 4.5 },
+          { x: 3, y: 8, yRangeMin: 7.5, yRangeMax: 8.5 },
+        ],
       },
       {
-        x: '2024-02-01',
-        y: 1.687564,
+        name: 'Prediction 1',
+        prediction: true,
+        dataPoints: [
+          { x: 0, y: 4 },
+          { x: 1, y: 7 },
+          { x: 2, y: 5 },
+          { x: 3, y: 7 },
+          { x: 4, y: 8 },
+          { x: 5, y: 5 },
+          { x: 6, y: 6 },
+        ],
       },
       {
-        x: '2024-04-01',
-        y: 1.665345,
+        name: 'Prediction 2',
+        prediction: true,
+        dataPoints: [
+          { x: 0, y: 6 },
+          { x: 1, y: 5 },
+          { x: 2, y: 6 },
+          { x: 3, y: 7 },
+          { x: 4, y: 7 },
+          { x: 5, y: 8 },
+        ],
       },
     ],
   };
 
-  const inflationGraphsData: InflationGraphs = {
-    type: LineChartDataType.INFLATION_CHARTS,
-    headline: {
-      data: [
-        {
-          x: '2023-10-01',
-          y: 26.2,
-        },
-        {
-          x: '2023-12-01',
-          y: 30.2,
-        },
-        {
-          x: '2024-02-01',
-          y: 37.1,
-        },
-        {
-          x: '2024-04-01',
-          y: 37.9,
-        },
-      ],
-    },
-    food: {
-      data: [
-        {
-          x: '2023-10-01',
-          y: 25.2,
-        },
-        {
-          x: '2023-12-01',
-          y: 29.2,
-        },
-        {
-          x: '2024-02-01',
-          y: 36.1,
-        },
-        {
-          x: '2024-04-01',
-          y: 36.9,
-        },
-      ],
-    },
-  };
-
   return (
     <div className="w-full flex flex-col items-center justify-center">
       <div className="svg-icon">
@@ -197,7 +205,7 @@ export default async function Elements() {
       <AccordionContainer items={AccordionsOperations.getAccordionData()} />
       <div className="w-full h-fit flex flex-row flex-wrap gap-10 justify-around px-8 pt-40 pb-16 border-b border-gray-800">
         <div className="w-250px h-fit">
-          <LineChart data={simpleAndSmallLineChartData} small />
+          <LineChart data={simpleAndSmallLineChartData} small disableDownload />
         </div>
         <div className="w-250px h-fit">
           <LineChart
@@ -220,13 +228,10 @@ export default async function Elements() {
           />
         </div>
         <div className="w-400px h-fit">
-          <LineChart title="Balance of trade" data={balanceOfTradeGraphData} expandable />
-        </div>
-        <div className="w-400px h-fit">
-          <LineChart title="Currency exchange" data={currencyExchangeGraphData} expandable />
+          <LineChart title="" data={predictionDummyChartData} expandable xAxisSlider barChartSwitch />
         </div>
         <div className="w-400px h-fit">
-          <LineChart title="Headline and food inflation" data={inflationGraphsData} expandable barChartSwitch />
+          <LineChart title="" data={multiplePredictionsDummyChartData} expandable xAxisSlider barChartSwitch />
         </div>
       </div>
       <MapSkeleton />

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { Metadata, Viewport } from 'next';
 import Script from 'next/script';
 
 import { CookieConsentPopup } from '@/components/Analytics/CookieConsentPopup';
+import { Snackbar } from '@/components/Snackbar/Snackbar';
 import { fontSans } from '@/config/fonts';
 import { siteConfig } from '@/config/site';
 
@@ -61,6 +62,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <CookieConsentPopup />
         <Providers themeProps={{ attribute: 'class', defaultTheme: 'dark' }}>
           <div className="relative h-dvh">
+            <Snackbar />
             <main className="h-full w-full">{children}</main>
           </div>
         </Providers>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,7 +2,7 @@ import AccordionModal from '@/components/Accordions/AccordionModal';
 import { AlertsMenuWrapper } from '@/components/AlertsMenu/AlertsMenuWrapper';
 import Chatbot from '@/components/Chatbot/Chatbot';
 import HungerAlertLoader from '@/components/HungerAlert/HungerAlertLoader';
-import MapLegend from '@/components/Legend/MapLegend';
+import MapLegendLoader from '@/components/Legend/MapLegendLoader';
 import MapLoader from '@/components/Map/MapLoader';
 import { Sidebar } from '@/components/Sidebar/Sidebar';
 import container from '@/container';
@@ -23,12 +23,12 @@ export default async function Home() {
 
   return (
     <>
-      <Sidebar countryMapData={countryMapData} />
+      <Sidebar countryMapData={countryMapData} fcsData={fcsData} />
       <AlertsMenuWrapper />
       <Chatbot />
       <MapLoader countries={countryMapData} fcsData={fcsData} disputedAreas={disputedAreas} alertData={alertData} />
       <HungerAlertLoader countryMapData={countryMapData} countryFcsData={fcsData} />
-      <MapLegend />
+      <MapLegendLoader />
       <AccordionModal />
     </>
   );

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -14,8 +14,8 @@ import { ChatbotProvider } from '@/domain/contexts/ChatbotContext';
 import { SelectedAlertProvider } from '@/domain/contexts/SelectedAlertContext';
 import { SelectedCountryIdProvider } from '@/domain/contexts/SelectedCountryIdContext';
 import { SelectedMapProvider } from '@/domain/contexts/SelectedMapContext';
-import { SelectedMapVisibilityProvider } from '@/domain/contexts/SelectedMapVisibilityContext';
 import { SidebarProvider } from '@/domain/contexts/SidebarContext';
+import { SnackbarProvider } from '@/domain/contexts/SnackbarContext';
 
 export interface ProvidersProps {
   children: React.ReactNode;
@@ -31,15 +31,15 @@ export function Providers({ children, themeProps }: ProvidersProps) {
         <QueryClientProvider client={cachedQueryClient}>
           <ChatbotProvider>
             <SidebarProvider>
-              <SelectedMapVisibilityProvider>
-                <SelectedMapProvider>
-                  <SelectedAlertProvider>
-                    <SelectedCountryIdProvider>
-                      <AccordionsModalProvider>{children}</AccordionsModalProvider>
-                    </SelectedCountryIdProvider>
-                  </SelectedAlertProvider>
-                </SelectedMapProvider>
-              </SelectedMapVisibilityProvider>
+              <SelectedMapProvider>
+                <SelectedAlertProvider>
+                  <SelectedCountryIdProvider>
+                    <AccordionsModalProvider>
+                      <SnackbarProvider>{children}</SnackbarProvider>
+                    </AccordionsModalProvider>
+                  </SelectedCountryIdProvider>
+                </SelectedAlertProvider>
+              </SelectedMapProvider>
             </SidebarProvider>
           </ChatbotProvider>
           <ReactQueryDevtools initialIsOpen={false} />

diff --git a/src/components/AlertsMenu/AlertsMenuWrapper.tsx b/src/components/AlertsMenu/AlertsMenuWrapper.tsx
@@ -11,7 +11,7 @@ export function AlertsMenuWrapper() {
     return null;
   }
   return (
-    <div className="absolute bottom-0 left-0 z-alertsMenu pb-10 pl-4">
+    <div className="absolute bottom-4 left-4 z-alertsMenu">
       <AlertsMenu variant={AlertsMenuVariant.Outside} />
     </div>
   );