smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

New Weather API
All checks were successful
Deploy to production / build (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-07-13 14:30:56 -05:00
parent f14fee945b
commit 3d5a2dd88a
20 changed files with 847 additions and 1025 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/WeatherModal/WeatherGraphs.tsx
View File

@@ -11,16 +11,31 @@ import {
XAxis,
YAxis,
} from 'recharts';
import type { HourlyForecast } from 'types';
import type { Hourly } from 'types';
import WeatherTooltip from './WeatherTooltip';
export default function WeatherGraphs({
hourlyForecast,
}: {
hourlyForecast: HourlyForecast[];
}) {
export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }) {
const colorPrecipitation = 'colorPrecipitation';
const colorHumidity = 'colorHumidity';
const later = new Date();
const now = new Date();
later.setDate(now.getDate() + 1);
const hourlyForecast = hourly?.time
?.map((_: any, index: number) => {
return {
dewpoint: hourly.dew_point_2m?.[index].toFixed(0),
isDaytime: hourly.is_day?.[index],
name: hourly.time[index],
startTime: hourly.time[index],
endTime: hourly.time[index + 1],
probabilityOfPrecipitation: hourly.precipitation_probability?.[index],
temperature: hourly.temperature_2m?.[index].toFixed(0),
relativeHumidity: hourly.relative_humidity_2m?.[index].toFixed(0),
};
})
.filter((hour: any) => hour.startTime > now && hour.startTime < later);
return (
<Stack
style={{
@@ -34,7 +49,7 @@ export default function WeatherGraphs({
<XAxis
type='category'
stroke={'var(--mantine-color-primary-0)'}
dataKey={(data: HourlyForecast) => {
dataKey={(data) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
@@ -49,7 +64,7 @@ export default function WeatherGraphs({
}}
/>
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<WeatherTooltip />} />
<Tooltip wrapperStyle={{ zIndex: 100 }} content={<WeatherTooltip />} />
<Line
unit={'°F'}
type='monotone'
@@ -67,9 +82,7 @@ export default function WeatherGraphs({
unit={'°F'}
type='monotone'
name='Dew Point'
dataKey={(data: HourlyForecast) => {
return (data.dewpoint.value * 9) / 5 + 32;
}}
dataKey='dewpoint'
stroke={'var(--mantine-color-accent-0)'}
strokeWidth={2}
dot={{
@@ -78,7 +91,7 @@ export default function WeatherGraphs({
fill: 'var(--mantine-color-accent-0)',
}}
/>
<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
<Legend wrapperStyle={{ zIndex: 0, position: 'absolute' }} />
</ComposedChart>
</ResponsiveContainer>
<ResponsiveContainer width={'100%'} height={150}>
@@ -112,7 +125,7 @@ export default function WeatherGraphs({
<XAxis
type='category'
stroke={'var(--mantine-color-primary-0)'}
dataKey={(data: HourlyForecast) => {
dataKey={(data) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
@@ -121,14 +134,12 @@ export default function WeatherGraphs({
/>
<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<WeatherTooltip />} />
<Tooltip wrapperStyle={{ zIndex: 100 }} content={<WeatherTooltip />} />
<Area
unit={'%'}
type='monotone'
name='Humidity'
dataKey={(data: HourlyForecast) => {
return data.relativeHumidity.value;
}}
dataKey={'relativeHumidity'}
stroke={'var(--mantine-color-primary-0)'}
strokeWidth={2}
fill={`url(#${colorPrecipitation})`}
@@ -142,9 +153,7 @@ export default function WeatherGraphs({
unit={'%'}
type='monotone'
name='Precipitation'
dataKey={(data: HourlyForecast) => {
return data.probabilityOfPrecipitation.value;
}}
dataKey={'probabilityOfPrecipitation'}
stroke={'var(--mantine-color-accent-0)'}
strokeWidth={2}
fill={`url(#${colorHumidity})`}
@@ -154,7 +163,7 @@ export default function WeatherGraphs({
fill: 'var(--mantine-color-accent-0)',
}}
/>
<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
<Legend wrapperStyle={{ zIndex: 0, position: 'absolute' }} />
</AreaChart>
</ResponsiveContainer>
</Stack>