added five days forecast data
This commit is contained in:
parent
6821d4bfca
commit
05bbbbf38b
9 changed files with 170 additions and 3 deletions
|
|
@ -48,7 +48,7 @@ const DailyForcast = () => {
|
|||
return (
|
||||
<div className = 'flex flex-col justify-center gap-8 dark:bg-darkGgray shadow-sm dark:shadow-none pt-8 h-[12rem] border rounded-lg col-span-full sm-2:col-span-2 md:col-span-2 xl:col-span-2'>
|
||||
<div className='h-full flex gap-4 overflow-hidden'>
|
||||
{todayForecast.length < 1 ? (<div>Loading...</div>) :
|
||||
{todayForecast.length < 1 ? (<div className='px-5'>Loading...</div>) :
|
||||
(
|
||||
<div className='w-full'>
|
||||
<Carousel>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
"use client"
|
||||
import { useGlobalContext } from '@/app/context/globalContext';
|
||||
import { kelvinToFarenheit, unixToDay, unixToTime } from '@/app/utils/Misc';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import React from 'react'
|
||||
import { FaCalendarAlt } from "react-icons/fa";
|
||||
|
||||
const FiveDaysForecast = () => {
|
||||
const {dailyForecast} = useGlobalContext();
|
||||
const {city, list} = dailyForecast;
|
||||
if(!dailyForecast || !city || !list){
|
||||
return <Skeleton className='h-[12rem] w-full'/>
|
||||
}
|
||||
const processData = (
|
||||
dailyData: {
|
||||
dt:number;
|
||||
main:{temp_min: number,temp_max: number};
|
||||
}[]
|
||||
) => {
|
||||
let minTemp = Number.MAX_VALUE;
|
||||
let maxTemp = Number.MIN_VALUE;
|
||||
|
||||
dailyData.forEach((
|
||||
day: {
|
||||
dt: number;
|
||||
main: {temp_min: number, temp_max: number};
|
||||
}
|
||||
) => {
|
||||
if(day.main.temp_min < minTemp){
|
||||
minTemp = day.main.temp_min;
|
||||
}
|
||||
if(day.main.temp_max > maxTemp){
|
||||
maxTemp = day.main.temp_max;
|
||||
}
|
||||
});
|
||||
return {
|
||||
day: unixToDay(dailyData[0].dt),
|
||||
minTemp: kelvinToFarenheit(minTemp),
|
||||
maxTemp: kelvinToFarenheit(maxTemp),
|
||||
}
|
||||
};
|
||||
const dailyForecasts = []
|
||||
for(let i = 0; i < 40; i += 8){
|
||||
const dailyData = list.slice(i, i+8);
|
||||
dailyForecasts.push(processData(dailyData));
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='flex flex-col flex-1 justify-between pt-6 px-4 pb-5 border rounded-lg dark:bg-darkGgray shadow-sm dark:shadow-none'>
|
||||
<div>
|
||||
<h2 className='flex items-center gap-2'><FaCalendarAlt/> 5 Days Forecast for {city.name}</h2>
|
||||
<div className='pt-3'>{dailyForecasts.map((day, i) => {
|
||||
return <div key={i} className='py-4 flex flex-col justify-evenly border-b-2'>
|
||||
<p className='min-w-[3rem] pb-1'>{day.day}</p>
|
||||
<p className='text-xs flex justify-between pb-1'>
|
||||
<span>(Low)</span>
|
||||
<span>(High)</span>
|
||||
</p>
|
||||
<div className='text-xs flex flex-1 justify-between items-center gap-4'>
|
||||
<p>{day.minTemp.toFixed(0)}°F</p>
|
||||
<div className='flex-1 w-full h-1 rounded-lg temp-progress'></div>
|
||||
<p>{day.maxTemp.toFixed(0)}°F</p>
|
||||
</div>
|
||||
</div>
|
||||
})}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FiveDaysForecast
|
||||
|
|
@ -29,7 +29,7 @@ const Humidity = () => {
|
|||
<div className='flex flex-col justify-center gap-5 dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2 px-4 h-[12rem] border rounded-lg'>
|
||||
<div>
|
||||
<h2 className='flex items-center gap-2'><WiHumidity /> Humidity</h2>
|
||||
<p className='pt-4 text-2xl'>{humidity} %</p>
|
||||
<p className='pt-4 text-2xl'>{humidity}%</p>
|
||||
</div>
|
||||
<p className='text-sm'>{humidityData(humidity)}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const MapApp = () => {
|
|||
|
||||
|
||||
return (
|
||||
<div className='flex-1 basis-[50%] border col-span-4 rounded-lg h-[30rem]'>
|
||||
<div className='flex-1 basis-[50%] border col-span-4 rounded-lg h-[20rem]'>
|
||||
<MapContainer center={[activeCityCords.lat, activeCityCords.lon]} zoom = {13} scrollWheelZoom = {false} style = {{height: "calc(100% - 2rem)", width: "calc(100% - 2rem)"}} className='rounded-lg m-4'>
|
||||
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'/>
|
||||
<FlyToActiveCity activeCityCords={activeCityCords}/>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,10 @@ const UVI = () => {
|
|||
return <Skeleton className='h-[12rem] w-full'/>
|
||||
}
|
||||
const {daily} = uvIndex;
|
||||
//console.log(uvIndex)
|
||||
const {uv_index_clearsky_max, uv_index_max} = daily;
|
||||
const uvIndexMax = uv_index_max[0].toFixed(0);
|
||||
//console.log(uvIndexMax)
|
||||
const uvIndexScale = (uvIndex: number) => {
|
||||
if(uvIndex <= 2){
|
||||
return{
|
||||
|
|
|
|||
|
|
@ -77,4 +77,8 @@
|
|||
|
||||
.air-progress{
|
||||
background-image: linear-gradient(to right, green, yellow, orange, red, indigo, maroon);
|
||||
}
|
||||
|
||||
.temp-progress{
|
||||
background-image: linear-gradient(to right, #67C6E3, #74E291, yellow, orange);
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import Navbar from "./components/Navbar";
|
|||
import AirPollution from "./components/airPollution/AirPollution";
|
||||
import DailyForcast from "./components/daily_forcast/DailyForecast";
|
||||
import FeelLike from "./components/feelLike/FeelLike";
|
||||
import FiveDaysForecast from "./components/fiveDaysForecast/FiveDaysForecast";
|
||||
import Humidity from "./components/humidity/Humidity";
|
||||
import MapApp from "./components/map/MapApp";
|
||||
import Pressure from "./components/pressure/Pressure";
|
||||
|
|
@ -19,6 +20,7 @@ export default function Home() {
|
|||
<div className="flex flex-col pt-5 pb-5 gap-4 md:flex-row">
|
||||
<div className="flex flex-col gap-4 w-full min-w-[18rem] md:w-[35rem]">
|
||||
<Temperature/>
|
||||
<FiveDaysForecast/>
|
||||
</div>
|
||||
<div className="flex flex-col w-full">
|
||||
<div className="grid h-full gap-4 col-span-full sm-2:col-span-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
|
|
|
|||
33
weather_app/app/utils/DefaultState.tsx
Normal file
33
weather_app/app/utils/DefaultState.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
const DefaultState = [
|
||||
{
|
||||
name: "Chicago",
|
||||
country: "US",
|
||||
state: "Illinois",
|
||||
lat: 41.8781,
|
||||
lon: -87.6298,
|
||||
},
|
||||
{
|
||||
name: "Madison",
|
||||
country: "US",
|
||||
state: "Wisconsin",
|
||||
lat: 43.0722,
|
||||
lon: -89.4008,
|
||||
},
|
||||
{
|
||||
name: "New York",
|
||||
country: "US",
|
||||
state: "New York",
|
||||
lat: 40.7127,
|
||||
lon: -74.0059,
|
||||
},
|
||||
{
|
||||
name: "Los Angeles",
|
||||
country: "US",
|
||||
state: "Califonia",
|
||||
lat: 34.0989,
|
||||
lon: -118.3277,
|
||||
},
|
||||
]
|
||||
|
||||
export default DefaultState
|
||||
|
||||
54
weather_app/app/utils/Misc.tsx
Normal file
54
weather_app/app/utils/Misc.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import moment from "moment";
|
||||
|
||||
// temperature
|
||||
export const kelvinToFarenheit = (kelvin: number) => {
|
||||
return Math.round(((kelvin - 273.15) * 1.8) + 32);
|
||||
}
|
||||
//aqi
|
||||
export const air_QualityIndex = [
|
||||
{
|
||||
rating: 10,
|
||||
desc: "good",
|
||||
},
|
||||
{
|
||||
rating: 20,
|
||||
desc: "good",
|
||||
},
|
||||
{
|
||||
rating: 30,
|
||||
desc: "moderate",
|
||||
},
|
||||
{
|
||||
rating: 40,
|
||||
desc: "moderate",
|
||||
},
|
||||
{
|
||||
rating: 50,
|
||||
desc: "unhealthy",
|
||||
},
|
||||
{
|
||||
rating: 60,
|
||||
desc: "unhealthy",
|
||||
},
|
||||
{
|
||||
rating: 70,
|
||||
desc: "very unhealthy",
|
||||
},
|
||||
{
|
||||
rating: 80,
|
||||
desc: "very unhealthy",
|
||||
},
|
||||
{
|
||||
rating: 100,
|
||||
desc: "Hazardous",
|
||||
}
|
||||
]
|
||||
//sunset-sunrise
|
||||
export const unixToTime = (unix: number, timezone: number) => {
|
||||
return moment.unix(unix).utcOffset(timezone / 60).format("hh:mm");
|
||||
};
|
||||
|
||||
export const unixToDay = (unix: number) => {
|
||||
return moment.unix(unix).format("ddd");
|
||||
}
|
||||
|
||||
Loading…
Add table
Reference in a new issue