Merge branch 'main' into feature/f-171-switch-country-view

jst-seminar-rostlab-tum · Dec 16, 2024 · b4a7b5a · b4a7b5a
2 parents d2566fe + c26db7f
commit b4a7b5a
Show file tree

Hide file tree

Showing 48 changed files with 1,399 additions and 544 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@nextui-org/card": "^2.0.34",
     "@nextui-org/chip": "^2.0.33",
     "@nextui-org/code": "2.0.33",
+    "pdfjs-dist": "3.11.174",
     "@nextui-org/dropdown": "^2.1.31",
     "@nextui-org/image": "^2.0.32",
     "@nextui-org/input": "2.2.5",
@@ -72,6 +73,7 @@
     "react-pdf": "^9.1.1",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
+    "sharp": "^0.33.5",
     "tailwind-variants": "0.1.20",
     "uuid": "^11.0.3"
   },

diff --git a/src/app/about/layout.tsx b/src/app/about/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content !pt-1">{children}</main>
     </div>
   );

diff --git a/src/app/data_sources/layout.tsx b/src/app/data_sources/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content !pt-1">{children}</main>
     </div>
   );

diff --git a/src/app/disclaimer/layout.tsx b/src/app/disclaimer/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content">{children}</main>
     </div>
   );

diff --git a/src/app/download-portal/layout.tsx b/src/app/download-portal/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content">{children}</main>
     </div>
   );

diff --git a/src/app/elements/page.tsx b/src/app/elements/page.tsx
@@ -4,9 +4,11 @@ import { useState } from 'react';
 
 import AccordionContainer from '@/components/Accordions/AccordionContainer';
 import { CustomButton } from '@/components/Buttons/CustomButton';
+import { CategoricalChart } from '@/components/Charts/CategoricalChart';
 import { LineChart } from '@/components/Charts/LineChart';
 import MapSkeleton from '@/components/Map/MapSkeleton';
 import SearchBar from '@/components/Search/SearchBar';
+import { CategoricalChartData } from '@/domain/entities/charts/CategoricalChartData.ts';
 import { LineChartData } from '@/domain/entities/charts/LineChartData.ts';
 import { LineChartDataType } from '@/domain/enums/LineChartDataType.ts';
 import AccordionsOperations from '@/operations/accordions/AccordionOperations';
@@ -35,23 +37,6 @@ export default async function Elements() {
     ],
   };
 
-  const simpleLineChartData: LineChartData = {
-    type: LineChartDataType.LINE_CHART_DATA,
-    xAxisType: 'linear',
-    yAxisLabel: 'yield',
-    lines: [
-      {
-        name: 'Category A',
-        dataPoints: [
-          { x: 0, y: 1 },
-          { x: 1, y: 2 },
-          { x: 2, y: 4 },
-          { x: 3, y: 8 },
-        ],
-      },
-    ],
-  };
-
   const maxedOutLineChartData: LineChartData = {
     type: LineChartDataType.LINE_CHART_DATA,
     xAxisType: 'linear',
@@ -144,50 +129,19 @@ export default async function Elements() {
     ],
   };
 
-  const multiplePredictionsDummyChartData: LineChartData = {
-    type: LineChartDataType.LINE_CHART_DATA,
-    xAxisType: 'linear',
+  const categoricalDummyChartData1: CategoricalChartData = {
     yAxisLabel: 'Mill',
-    predictionVerticalLineX: 3,
-    lines: [
+    categories: [
       {
         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 },
-        ],
+        dataPoint: { y: 5 },
       },
       {
-        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 },
-        ],
-      },
-      {
-        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 },
-        ],
+        name: 'Category B',
+        dataPoint: { y: 8 },
       },
     ],
   };
-
   return (
     <div className="w-full flex flex-col items-center justify-center">
       <div className="svg-icon">
@@ -204,34 +158,28 @@ 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 disableDownload />
-        </div>
         <div className="w-250px h-fit">
           <LineChart
-            title="Small Rounded Line Chart"
-            description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy."
-            data={simpleLineChartData}
-            expandable
+            data={simpleAndSmallLineChartData}
             small
-            roundLines
+            disableDownload
+            disableBarChartSwitch
+            disableExpandable
+            disableXAxisSlider
           />
         </div>
         <div className="w-400px h-fit">
           <LineChart
             title="Maxed Out Line Chart"
             description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor onsetetur sadipscing elitr."
             data={maxedOutLineChartData}
-            expandable
-            xAxisSlider
-            barChartSwitch
           />
         </div>
         <div className="w-400px h-fit">
-          <LineChart title="" data={predictionDummyChartData} expandable xAxisSlider barChartSwitch />
+          <LineChart title="" data={predictionDummyChartData} />
         </div>
         <div className="w-400px h-fit">
-          <LineChart title="" data={multiplePredictionsDummyChartData} expandable xAxisSlider barChartSwitch />
+          <CategoricalChart title="" data={categoricalDummyChartData1} />
         </div>
       </div>
       <MapSkeleton />

diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -2,25 +2,35 @@
 
 import { useEffect } from 'react';
 
-export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+import { CustomButton } from '@/components/Buttons/CustomButton';
+import { Topbar } from '@/components/Topbar/Topbar';
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
     /* eslint-disable no-console */
     console.error(error);
   }, [error]);
 
   return (
-    <div>
-      <h2>Something went wrong!</h2>
-      <button
-        type="button"
-        onClick={
-          // Attempt to recover by trying to re-render the segment
-          () => reset()
-        }
-      >
-        Try again
-      </button>
+    <div className="flex flex-col h-screen">
+      <Topbar />
+      <main className="flex h-full flex-col items-center justify-center gap-2 text-content">
+        <section className="text-center">
+          <h2 className="text-xl font-semibold">An Error Occurred</h2>
+          <p>Please try again or go back to the Home page.</p>
+        </section>
+        <div className="flex flex-row gap-2 mt-4">
+          <CustomButton variant="solid" size="lg" onClick={() => reset()}>
+            Try again
+          </CustomButton>
+          <a href="/">
+            <CustomButton variant="solid" size="lg">
+              Go to Home page
+            </CustomButton>
+          </a>
+        </div>
+      </main>
     </div>
   );
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { CustomButton } from '@/components/Buttons/CustomButton';
+import { Topbar } from '@/components/Topbar/Topbar';
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col h-screen">
+      <Topbar />
+      <main className="flex h-full flex-col items-center justify-center gap-2 text-content">
+        <section className="text-center">
+          <h2 className="text-xl font-semibold">Ooops</h2>
+          <p>The requested page could not be found.</p>
+        </section>
+        <div className="flex flex-row gap-2 mt-4">
+          <a href="/">
+            <CustomButton variant="solid" size="lg">
+              Go to Home page
+            </CustomButton>
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -5,11 +5,12 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useRouter } from 'next/navigation';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import type { ThemeProviderProps } from 'next-themes/dist/types.d.ts';
+import type { ThemeProviderProps } from 'next-themes/dist/types';
 import * as React from 'react';
 
 import { cachedQueryClient } from '@/config/queryClient';
 import { AccordionsModalProvider } from '@/domain/contexts/AccodionsModalContext';
+import { ChatbotProvider } from '@/domain/contexts/ChatbotContext';
 import { SelectedAlertProvider } from '@/domain/contexts/SelectedAlertContext';
 import { SelectedCountryIdProvider } from '@/domain/contexts/SelectedCountryIdContext';
 import { SelectedMapProvider } from '@/domain/contexts/SelectedMapContext';
@@ -33,7 +34,9 @@ export function Providers({ children, themeProps }: ProvidersProps) {
               <SelectedAlertProvider>
                 <SelectedCountryIdProvider>
                   <AccordionsModalProvider>
-                    <SnackbarProvider>{children}</SnackbarProvider>
+                    <SnackbarProvider>
+                      <ChatbotProvider>{children}</ChatbotProvider>
+                    </SnackbarProvider>
                   </AccordionsModalProvider>
                 </SelectedCountryIdProvider>
               </SelectedAlertProvider>

diff --git a/src/app/wiki/layout.tsx b/src/app/wiki/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import HungerMapChatbot from '@/components/Chatbot/Chatbot';
 import { Topbar } from '@/components/Topbar/Topbar';
 
 export const metadata: Metadata = {
@@ -9,7 +10,10 @@ export const metadata: Metadata = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Topbar />
+      <div className="mb-20">
+        <Topbar />
+        <HungerMapChatbot />
+      </div>
       <main className="flex flex-col gap-6 lg:gap-10 p-5 lg:p-10 text-content !pt-1">{children}</main>
     </div>
   );