floscr/ecoplanet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Draw chart for the forecast data

Browse Source
This commit is contained in:
Florian Schroedl
2024-01-23 14:09:10 +01:00
parent 983397973a
commit e4b9730b06
1 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/main/Root.tsx
View File

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