add frontend docker build and deploy and gitea action

frontend/src/components/temperature-history.tsx

@@ -8,7 +8,7 @@ function TemperatureHistory(){
   if (error) return <p>Error: {error.message}</p>
   return (
     <>
-        {data.map((record) => (
+        {data?.map((record) => (
             <div key={record.id}>{record.temp ?? 'N/A'}({record.city})</div>
         ))}
     </>

frontend/src/components/temperature-plot-chart.tsx

@@ -0,0 +1,25 @@
+import { ScatterChart, Scatter, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
+import WeatherHistory from '@/hooks/weather-history'
+
+function TemperaturePlotChart({data} : {data: WeatherHistory[] | undefined}){
+    if (!data || data.length === 0) {
+        return <div className="w-full h-96">No data available</div>
+    }
+
+    return (
+
+        <div className="w-full">
+            <ResponsiveContainer width="100%" height={400}>
+              <ScatterChart data={data}>
+                <XAxis dataKey="id" />
+                <YAxis />
+                <Tooltip />
+                <Scatter dataKey="temp" fill="#6366f1" />
+              </ScatterChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}
+
+export default TemperaturePlotChart
+

frontend/src/components/temperature-plot.tsx

@@ -1,25 +1,20 @@
-import { ScatterChart, Scatter, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
+import {lazy, Suspense } from "react"
 import WeatherHistory from '@/hooks/weather-history'
 
+const Chart = lazy(() => import("./temperature-plot-chart"))
+
 function TemperaturePlot() {
     const {data, isLoading, error} = WeatherHistory()
 
     if (isLoading) return <p>Loading...</p>
     if (error) return <p>Error: {error.message}</p>
-
     return (
-        <div className="w-full">
-            <ResponsiveContainer width="100%" height={400}>
-              <ScatterChart data={data}>
-                <XAxis dataKey="id" />
-                <YAxis />
-                <Tooltip />
-                <Scatter dataKey="temp" fill="#6366f1" />
-              </ScatterChart>
-            </ResponsiveContainer>
-        </div>
+        <Suspense fallback={<div className="h-[400-px]" />}>
+            <Chart data={data} />
+        </Suspense>
     )
+
+    
 }
 
 export default TemperaturePlot
-