New Weather Modal
This commit is contained in:
Sean Edmunds
145
src/components/WeatherModal/CurrentWeather.tsx
Normal file
145
src/components/WeatherModal/CurrentWeather.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { Grid, Group, Stack, Text, ThemeIcon } from '@mantine/core';
|
||||
import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
|
||||
import { WiBarometer, WiHumidity } from 'react-icons/wi';
|
||||
import WeatherIcon from './WeatherIcon';
|
||||
|
||||
export default function CurrentWeather({ weather }: any) {
|
||||
return (
|
||||
<Stack
|
||||
gap={0}
|
||||
w={'100%'}
|
||||
justify='space-between'
|
||||
style={{
|
||||
backgroundColor: 'var(--color-search-background)',
|
||||
padding: '1rem',
|
||||
borderRadius: '8px',
|
||||
paddingBottom: '.5rem',
|
||||
}}
|
||||
>
|
||||
<Group gap={0} px={16} w={'100%'}>
|
||||
<Text
|
||||
c={'var(--color-text-pri)'}
|
||||
style={{
|
||||
fontSize: '1.375rem',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
Current Weather
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap={0} w={'100%'}>
|
||||
<Stack gap={0} w={'50%'}>
|
||||
<Group gap={0}>
|
||||
<WeatherIcon textDescription={`${weather.textDescription}`} />
|
||||
<Text fz={'7rem'} fw={200}>
|
||||
{weather.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
|
||||
</Text>
|
||||
</Group>
|
||||
<Text
|
||||
c={'var(--color-text-pri)'}
|
||||
style={{
|
||||
fontSize: '1.375rem',
|
||||
textAlign: 'left',
|
||||
marginTop: -32,
|
||||
marginLeft: 16,
|
||||
}}
|
||||
>
|
||||
{weather.textDescription}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack gap={4} w={'50%'}>
|
||||
<Text>
|
||||
Feels like {weather.heatIndex ?? weather.windChill ?? weather.temperature}°
|
||||
<sup>F</sup>
|
||||
</Text>
|
||||
<Grid align='center' w={'100%'}>
|
||||
<Grid.Col span={2}>
|
||||
<ThemeIcon
|
||||
h={'auto'}
|
||||
w={'auto'}
|
||||
variant='subtle'
|
||||
c={'var(--color-text-pri)'}
|
||||
>
|
||||
<FaLongArrowAltUp size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1}>
|
||||
<Text>
|
||||
{weather.highTemp}°<sup>F</sup>
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<ThemeIcon
|
||||
h={'auto'}
|
||||
w={'auto'}
|
||||
variant='subtle'
|
||||
c={'var(--color-text-pri)'}
|
||||
>
|
||||
<FaLongArrowAltDown size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1}>
|
||||
<Text>
|
||||
{weather.lowTemp}°<sup>F</sup>
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid align='center'>
|
||||
<Grid.Col span={2}>
|
||||
<ThemeIcon
|
||||
h={'auto'}
|
||||
w={'auto'}
|
||||
variant='subtle'
|
||||
c={'var(--color-text-pri)'}
|
||||
>
|
||||
<WiHumidity size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>Humidity</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>{weather.humidity}%</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid align='center'>
|
||||
<Grid.Col span={2}>
|
||||
<ThemeIcon
|
||||
h={'auto'}
|
||||
w={'auto'}
|
||||
variant='subtle'
|
||||
c={'var(--color-text-pri)'}
|
||||
>
|
||||
<FaWind size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>Wind</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>{weather.windSpeed}mph</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid align='center'>
|
||||
<Grid.Col span={2}>
|
||||
<ThemeIcon
|
||||
h={'auto'}
|
||||
w={'auto'}
|
||||
variant='subtle'
|
||||
c={'var(--color-text-pri)'}
|
||||
>
|
||||
<WiBarometer size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>Pressure</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>{weather.pressure} in</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
52
src/components/WeatherModal/ExtendedForecast.tsx
Normal file
52
src/components/WeatherModal/ExtendedForecast.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { Group, Stack, Text } from '@mantine/core';
|
||||
import WeatherIcon from './WeatherIcon';
|
||||
|
||||
export default function ExtendedForecast({ forecast }: any) {
|
||||
const day = forecast.slice(2, 14).filter((item: any) => item.isDaytime);
|
||||
const night = forecast.slice(2, 14).filter((item: any) => !item.isDaytime);
|
||||
return (
|
||||
<Stack
|
||||
gap={0}
|
||||
w={'100%'}
|
||||
justify='space-between'
|
||||
style={{
|
||||
backgroundColor: 'var(--color-search-background)',
|
||||
padding: '1rem',
|
||||
borderRadius: '8px',
|
||||
paddingBottom: '.5rem',
|
||||
}}
|
||||
>
|
||||
<Group gap={0} px={16} w={'100%'}>
|
||||
<Text
|
||||
c={'var(--color-text-pri)'}
|
||||
style={{
|
||||
fontSize: '1.375rem',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
Extended Forecast
|
||||
</Text>
|
||||
</Group>
|
||||
<Group w={'100%'} align='center' justify='space-between'>
|
||||
{day.map((item: any, index: number) => {
|
||||
const short = item.shortForecast.includes('And')
|
||||
? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
|
||||
: item.shortForecast.includes('then')
|
||||
? item.shortForecast.substring(0, item.shortForecast.indexOf('then'))
|
||||
: item.shortForecast;
|
||||
return (
|
||||
<Stack key={item.name} gap={0} align='center'>
|
||||
<Text>{item.name}</Text>
|
||||
<WeatherIcon textDescription={short} />
|
||||
<Text>{short}</Text>
|
||||
<Text>
|
||||
{item.temperature}°{item.temperatureUnit}/{night[index].temperature}°
|
||||
{item.temperatureUnit}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -94,7 +94,7 @@ export default function HourlyCard({ weather }: any) {
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
|
||||
{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity?.value}%
|
||||
</Text>
|
||||
<Box
|
||||
mt={4}
|
||||
@@ -114,7 +114,7 @@ export default function HourlyCard({ weather }: any) {
|
||||
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
|
||||
}}
|
||||
/>
|
||||
{`${weather.probabilityOfPrecipitation.value}`}%
|
||||
{`${weather.probabilityOfPrecipitation?.value}`}%
|
||||
</Group>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
251
src/components/WeatherModal/WeatherIcon.tsx
Normal file
251
src/components/WeatherModal/WeatherIcon.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import { Image } from '@mantine/core';
|
||||
import CloudyIcon from '../../assets/weather/cloudy.svg';
|
||||
import HazeIcon from '../../assets/weather/haze.svg';
|
||||
import HeavyRainIcon from '../../assets/weather/heavy-rain.svg';
|
||||
import PartlyCloudyIcon from '../../assets/weather/partly-cloudy.svg';
|
||||
import RainIcon from '../../assets/weather/rain.svg';
|
||||
import SleetIcon from '../../assets/weather/sleet.svg';
|
||||
import SnowIcon from '../../assets/weather/snow.svg';
|
||||
import SunnyIcon from '../../assets/weather/sunny.svg';
|
||||
import ThunderstormIcon from '../../assets/weather/thunderstorm.svg';
|
||||
|
||||
export default function WeatherIcon({ textDescription }: { textDescription: string }) {
|
||||
const Icon = () => {
|
||||
switch (textDescription.trim()) {
|
||||
case 'Clear':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={SunnyIcon}
|
||||
alt='SunnyIcon'
|
||||
/>
|
||||
);
|
||||
case 'Cloudy':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={CloudyIcon}
|
||||
alt='CloudyIcon'
|
||||
/>
|
||||
);
|
||||
case 'Mostly Cloudy':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={CloudyIcon}
|
||||
alt='CloudyIcon'
|
||||
/>
|
||||
);
|
||||
case 'Rain':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={RainIcon}
|
||||
alt='RainIcon'
|
||||
/>
|
||||
);
|
||||
case 'Showers':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={RainIcon}
|
||||
alt='RainIcon'
|
||||
/>
|
||||
);
|
||||
case 'Drizzle':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={RainIcon}
|
||||
alt='RainIcon'
|
||||
/>
|
||||
);
|
||||
case 'Snow':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={SnowIcon}
|
||||
alt='SnowIcon'
|
||||
/>
|
||||
);
|
||||
case 'Thunderstorm':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={ThunderstormIcon}
|
||||
alt='ThunderstormIcon'
|
||||
/>
|
||||
);
|
||||
case 'Mist':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Haze':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Dust':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Fog':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Smoke':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Sand':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Ash':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Squall':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Tornado':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Freezing Rain':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Shower Rain':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HazeIcon}
|
||||
alt='HazeIcon'
|
||||
/>
|
||||
);
|
||||
case 'Heavy Rain':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={HeavyRainIcon}
|
||||
alt='HeavyRainIcon'
|
||||
/>
|
||||
);
|
||||
case 'Scattered Clouds':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={PartlyCloudyIcon}
|
||||
alt='PartlyCloudyIcon'
|
||||
/>
|
||||
);
|
||||
case 'Broken Clouds':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={PartlyCloudyIcon}
|
||||
alt='PartlyCloudyIcon'
|
||||
/>
|
||||
);
|
||||
case 'Overcast Clouds':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={PartlyCloudyIcon}
|
||||
alt='PartlyCloudyIcon'
|
||||
/>
|
||||
);
|
||||
case 'Moderate Rain':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={PartlyCloudyIcon}
|
||||
alt='PartlyCloudyIcon'
|
||||
/>
|
||||
);
|
||||
case 'Light Rain':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={PartlyCloudyIcon}
|
||||
alt='PartlyCloudyIcon'
|
||||
/>
|
||||
);
|
||||
case 'Heavy Snow':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={SnowIcon}
|
||||
alt='SnowIcon'
|
||||
/>
|
||||
);
|
||||
case 'Sleet':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={SleetIcon}
|
||||
alt='SleetIcon'
|
||||
/>
|
||||
);
|
||||
case 'Partly Sunny':
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={PartlyCloudyIcon}
|
||||
alt='PartlyCloudyIcon'
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Image
|
||||
style={{ width: '100px', height: '100px' }}
|
||||
src={SunnyIcon}
|
||||
alt='SunnyIcon'
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return <Icon />;
|
||||
}
|
||||
@@ -1,15 +1,26 @@
|
||||
import { Box, Center, Divider, Group, Modal, Stack, Text } from '@mantine/core';
|
||||
import { Center, Group, Modal, Stack, Text } from '@mantine/core';
|
||||
import { modalClasses } from 'styles';
|
||||
import SmallOutlookCard from './SmallOutlookCard';
|
||||
import SmallWeatherCard from './SmallWeatherCard';
|
||||
|
||||
import { useCommonHooks, useWeatherAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import HourlyCard from './HourlyCard';
|
||||
import {
|
||||
Area,
|
||||
CartesianGrid,
|
||||
ComposedChart,
|
||||
Legend,
|
||||
Line,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from 'recharts';
|
||||
import CurrentWeather from './CurrentWeather';
|
||||
import ExtendedForecast from './ExtendedForecast';
|
||||
|
||||
export function WeatherModal({
|
||||
current,
|
||||
outlook,
|
||||
extendedForecast,
|
||||
closeWeatherModal,
|
||||
weatherModalOpened,
|
||||
}: any) {
|
||||
@@ -31,9 +42,32 @@ export function WeatherModal({
|
||||
const [hourlyForecast, setHourlyForecast] = useState<any>([]);
|
||||
const [sunset, setSunset] = useState(100);
|
||||
|
||||
function CustomTooltip({ payload, active, unit }: any) {
|
||||
if (active) {
|
||||
return (
|
||||
<Stack
|
||||
style={{
|
||||
backgroundColor: 'var(--color-background)',
|
||||
padding: '1rem',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
{payload.map((item: any) => (
|
||||
<Text
|
||||
key={item.name}
|
||||
size='sm'
|
||||
>{`${item.name} - ${item.value}${item.unit}`}</Text>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (hourly) {
|
||||
setHourlyForecast(hourly.properties.periods.slice(1, 13));
|
||||
setHourlyForecast(hourly.properties.periods.slice(1, 25));
|
||||
}
|
||||
}, [hourly]);
|
||||
|
||||
@@ -49,7 +83,6 @@ export function WeatherModal({
|
||||
);
|
||||
}
|
||||
}, [hourlyForecast]);
|
||||
|
||||
return (
|
||||
<Modal.Root
|
||||
fullScreen={isMobile}
|
||||
@@ -89,58 +122,99 @@ export function WeatherModal({
|
||||
</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Modal.Body m={0}>
|
||||
<Center w={'100%'}>
|
||||
<Stack w={'100%'}>
|
||||
<Group gap={0} w={'100%'} align='center' justify='center'>
|
||||
<Stack gap={0} align='center'>
|
||||
<h3 style={{ padding: 0, margin: 0, color: 'white' }}>Currently</h3>
|
||||
<Stack>
|
||||
<SmallWeatherCard weather={current} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Divider
|
||||
orientation={isMobile ? 'horizontal' : 'vertical'}
|
||||
mx={16}
|
||||
color={theme.accentColor}
|
||||
/>
|
||||
<Group gap={8}>
|
||||
{outlook.map((o: any) => (
|
||||
<Stack key={o.name} gap={0} align='center'>
|
||||
<h3 style={{ padding: 0, margin: 0, color: 'white' }}>{o.name}</h3>
|
||||
<Stack>
|
||||
<SmallOutlookCard weather={o} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
))}
|
||||
</Group>
|
||||
</Group>
|
||||
<Divider orientation='horizontal' mx={8} color={theme.accentColor} />
|
||||
<Group
|
||||
<CurrentWeather weather={current} />
|
||||
<Stack
|
||||
style={{
|
||||
background:
|
||||
hourlyForecast.length > 0 && hourlyForecast[0].isDaytime
|
||||
? `linear-gradient(90deg, rgba(245, 225, 171, 0.85) ${sunset - 5}%, rgba(35, 28, 42, 0.85) ${sunset + 5}%)`
|
||||
: `linear-gradient(90deg, rgba(35, 28, 42, 0.85)${sunset - 5}%, rgba(245, 225, 171, 0.85)${sunset + 5}%)`,
|
||||
background: 'var(--color-search-background)',
|
||||
padding: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
overflow: 'auto',
|
||||
whiteSpace: 'nowrap',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{hourlyForecast.length > 0 &&
|
||||
hourlyForecast.map((h: any) => {
|
||||
return <HourlyCard key={h.number} weather={h} />;
|
||||
})}
|
||||
</Box>
|
||||
</Group>
|
||||
<ResponsiveContainer width={'100%'} height={150}>
|
||||
<ComposedChart data={hourlyForecast}>
|
||||
<XAxis
|
||||
type='category'
|
||||
stroke={theme.primaryColor}
|
||||
dataKey={(data: any) => {
|
||||
return new Date(data.startTime).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
stroke={theme.primaryColor}
|
||||
unit={'°F'}
|
||||
dataKey={'temperature'}
|
||||
/>
|
||||
<CartesianGrid stroke='#f5f5f522' />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Line
|
||||
unit={'°F'}
|
||||
type='monotone'
|
||||
name='Temperature'
|
||||
dataKey='temperature'
|
||||
stroke={theme.primaryColor}
|
||||
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
|
||||
/>
|
||||
<Line
|
||||
unit={'°F'}
|
||||
type='monotone'
|
||||
name='Dew Point'
|
||||
dataKey={(data: any) => {
|
||||
return (data.dewpoint.value * 9) / 5 + 32;
|
||||
}}
|
||||
stroke={theme.accentColor}
|
||||
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
|
||||
/>
|
||||
<Legend style={{ background: 'var(--color-search-background)' }} />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
<ResponsiveContainer width={'100%'} height={150}>
|
||||
<ComposedChart data={hourlyForecast}>
|
||||
<XAxis
|
||||
type='category'
|
||||
stroke={theme.primaryColor}
|
||||
dataKey={(data: any) => {
|
||||
return new Date(data.startTime).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<YAxis stroke={theme.primaryColor} unit={'%'} domain={[0, 100]} />
|
||||
<CartesianGrid stroke='#f5f5f522' />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Area
|
||||
unit={'%'}
|
||||
type='monotone'
|
||||
name='Precipitation'
|
||||
dataKey={(data: any) => {
|
||||
return data.probabilityOfPrecipitation.value;
|
||||
}}
|
||||
stroke={theme.primaryColor}
|
||||
fill={theme.accentColor}
|
||||
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
|
||||
/>
|
||||
<Area
|
||||
unit={'%'}
|
||||
type='monotone'
|
||||
name='Humidity'
|
||||
dataKey={(data: any) => {
|
||||
return data.relativeHumidity.value;
|
||||
}}
|
||||
stroke={theme.accentColor}
|
||||
fill={theme.accentColor}
|
||||
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
|
||||
/>
|
||||
<Legend style={{ background: 'var(--color-search-background)' }} />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</Stack>
|
||||
<ExtendedForecast forecast={extendedForecast} />
|
||||
</Stack>
|
||||
</Center>
|
||||
</Modal.Body>
|
||||
|
||||
Reference in New Issue
Block a user