Draw chart for the forecast data

src/components/main/Root.tsx

@@ -7,7 +7,7 @@ const fetchWeekForecastData = async function (dateTime, cb) {
 
   const forecastRequests = Array.from({ length: 7 }).map((_, index) => {
     const date = addDays(dateTime, index);
-    const formattedDate = format(dateTime, "yyyy-MM-d");
+    const formattedDate = format(date, "yyyy-MM-d");
     const url = `http://api.weatherapi.com/v1/future.json?key=bfca7632f8dc4253859120435242301&q=Vienna&dt=${formattedDate}`;
     const dataPromise = fetch(url).then((x) => x.json());
 
@@ -16,18 +16,36 @@ const fetchWeekForecastData = async function (dateTime, cb) {
 
   const data = await Promise.all(forecastRequests);
 
-  cb(data);
+  console.log(data);
+
+  const chartData = data.map((forecastData) => {
+    const dayData = forecastData.forecast.forecastday[0];
+    const date = dayData.date;
+    const { avgtemp_c, mintemp_c, maxtemp_c } = dayData.day;
+
+    return {
+      name: date,
+      avgtemp_c,
+      mintemp_c,
+      maxtemp_c,
+    };
+  });
+
+  cb(chartData);
 };
 
 const WeatherChart = function ({ data }) {
+  return (
     <LineChart width={400} height={400} data={data}>
-    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
+      <Line type="monotone" dataKey="avgtemp_c" stroke="#8884d8" />
+      <Line type="monotone" dataKey="mintemp_c" stroke="#8884d8" />
+      <Line type="monotone" dataKey="maxtemp_c" stroke="#8884d8" />
       <CartesianGrid stroke="#ccc" />
       <XAxis dataKey="name" />
       <YAxis />
-  </LineChart>;
+    </LineChart>
+  );
 };
-
 const App: React.FC = () => {
   const [data, setData] = useState(null);
 
@@ -35,8 +53,6 @@ const App: React.FC = () => {
     fetchWeekForecastData(addDays(new Date(), 14), setData);
   }, []);
 
-  console.log(data);
-
   return (
     <div className="fixed top-0 right-0 bottom-0 left-0">
       {data ? <WeatherChart data={data} /> : "Loading..."}