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

Fetch 14 day forecast data

Browse Source
This commit is contained in:
Florian Schroedl
2024-01-23 13:40:02 +01:00
parent e48c496a62
commit 300d319557
3 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -14,6 +14,7 @@
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"date-fns": "^3.3.1",
"lucide-react": "^0.312.0", "lucide-react": "^0.312.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

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

@@ -1,9 +1,11 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { LineChart, Line } from "recharts"; import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
import { format, addDays } from "date-fns";
const onWeatherFetch = async function (cb) { const fetchWeekForecastData = async function (dateTime, cb) {
const formattedDate = format(dateTime, "yyyy-MM-d");
const response = await fetch( const response = await fetch(
"http://api.weatherapi.com/v1/current.json?key=bfca7632f8dc4253859120435242301&q=Vienna&aqi=no", `http://api.weatherapi.com/v1/future.json?key=bfca7632f8dc4253859120435242301&q=Vienna&dt=${formattedDate}`,
); );
const data = await response.json(); const data = await response.json();
@@ -13,6 +15,9 @@ const onWeatherFetch = async function (cb) {
const WeatherChart = function ({ data }) { const WeatherChart = function ({ data }) {
<LineChart width={400} height={400} data={data}> <LineChart width={400} height={400} data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" /> <Line type="monotone" dataKey="uv" stroke="#8884d8" />
<CartesianGrid stroke="#ccc" />
<XAxis dataKey="name" />
<YAxis />
</LineChart>; </LineChart>;
}; };
@@ -20,7 +25,7 @@ const App: React.FC = () => {
const [data, setData] = useState(null); const [data, setData] = useState(null);
useEffect(() => { useEffect(() => {
onWeatherFetch(setData); fetchWeekForecastData(addDays(new Date(), 14), setData);
}, []); }, []);
console.log(data); console.log(data);

5
yarn.lock
View File

@@ -1108,6 +1108,11 @@ d3-timer@^3.0.1:
resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0" resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA== integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
date-fns@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.3.1.tgz#7581daca0892d139736697717a168afbb908cfed"
integrity sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==
debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4: debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
version "4.3.4" version "4.3.4"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"