Use real temperature data in line graph

frontend/src/api/WeatherData.tsx

@@ -42,8 +42,23 @@ const fetchIndoorWeatherData = async (
   }
 };
 
+const fetchIndoorPredictData = async (): Promise<
+  IndoorPredictData[] | null
+> => {
+  try {
+    const response = await axios.get<IndoorPredictData[]>(
+      'http://127.0.0.1:8000/api/v1/weather/indoor/predict/',
+    );
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching indoor predict data:', error);
+    return null;
+  }
+};
+
 export {
   fetchWeatherDataList,
   fetchOutdoorWeatherData,
   fetchIndoorWeatherData,
+  fetchIndoorPredictData,
 };

frontend/src/components/Charts/LineChart.tsx

@@ -1,6 +1,7 @@
 import { ApexOptions } from 'apexcharts';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactApexChart from 'react-apexcharts';
+import { fetchIndoorPredictData } from '../../api/WeatherData';
 
 const options: ApexOptions = {
   legend: {
@@ -110,8 +111,8 @@ const options: ApexOptions = {
         fontSize: '0px',
       },
     },
-    min: 0,
+    min: 10,
-    max: 100,
+    max: 60,
   },
 };
 
@@ -123,26 +124,26 @@ interface ChartOneState {
 }
 
 const LineChart: React.FC = () => {
-  const [state, setState] = useState<ChartOneState>({
+  const [seriesData, setSeriesData] = useState<ChartOneState['series']>([]);
-    series: [
+  const [categories, setCategories] = useState<string[]>([]);
-      {
-        name: 'Indoor Temperature',
-        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45],
-      },
 
-      {
+  useEffect(() => {
-        name: 'Outdoor Temperature',
+    const fetchData = async () => {
-        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51],
+      const data = await fetchIndoorPredictData();
-      },
+      if (data) {
-    ],
+        const categories = data.map((item) => item.timestamp);
-  });
+        const indoorTempData = data.map((item) => item.indoor_temp);
+        const outdoorTempData = data.map((item) => item.outdoor_temp);
+        setCategories(categories);
+        setSeriesData([
+          { name: 'Indoor Temperature', data: indoorTempData },
+          { name: 'Outdoor Temperature', data: outdoorTempData },
+        ]);
+      }
+    };
 
-  const handleReset = () => {
+    fetchData();
-    setState((prevState) => ({
+  }, []);
-      ...prevState,
-    }));
-  };
-  handleReset;
 
   return (
     <div className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
@@ -169,28 +170,16 @@ const LineChart: React.FC = () => {
             </div>
           </div>
         </div>
-        <div className="flex w-full max-w-45 justify-end">
-          <div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
-            <button className="rounded bg-white py-1 px-3 text-xs font-medium text-black shadow-card hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark">
-              Day
-            </button>
-            <button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
-              Week
-            </button>
-            <button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
-              Month
-            </button>
-          </div>
-        </div>
       </div>
 
       <div>
         <div id="chartOne" className="-ml-5">
           <ReactApexChart
             options={options}
-            series={state.series}
+            series={seriesData}
             type="area"
             height={350}
+            categories={categories}
           />
         </div>
       </div>

frontend/src/types/weather.ts

@@ -25,3 +25,9 @@ interface WeatherData {
   avg_outdoor_pm25: number;
   avg_outdoor_pm10: number;
 }
+
+interface IndoorPredictData {
+  timestamp: string;
+  indoor_temp: number;
+  outdoor_temp: number;
+}