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

Updates to details
All checks were successful
Deploy to production / build (push) Successful in 18s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-07-16 11:26:16 -05:00
parent 0685488252
commit 001843dcd2
7 changed files with 237 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,34 +13,42 @@ import {
YAxis,
} from 'recharts';
import { selectClasses } from 'styles';
import type { Hourly } from 'types';
import WeatherTooltip from './WeatherTooltip';
export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }) {
export default function WeatherGraphs({
hourly,
formatted,
}: {
hourly: any;
formatted?: boolean;
}) {
const colorPrecipitation = 'colorPrecipitation';
const colorHumidity = 'colorHumidity';
const [timeFrame, setTimeFrame] = useState(24);
const later = new Date();
const now = new Date();
later.setTime(now.getTime() + timeFrame * 60 * 60 * 1000);
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].toLocaleString('en-us'),
startTime: hourly.time[index],
endTime: hourly.time[index + 1],
probabilityOfPrecipitation: hourly.precipitation_probability?.[index],
temperature: hourly.temperature_2m?.[index].toFixed(0),
apparentTemperature: hourly.apparent_temperature?.[index].toFixed(0),
relativeHumidity: hourly.relative_humidity_2m?.[index].toFixed(0),
};
})
.filter((hour: any) => hour.startTime > now && hour.startTime < later);
const hourlyForecast = formatted
? hourly
: hourly?.time
?.map((_: any, index: number) => {
return {
dewpoint: hourly.dew_point_2m?.[index].toFixed(0),
isDaytime: hourly.is_day?.[index],
name: hourly.time[index].toLocaleString('en-us'),
startTime: hourly.time[index],
endTime: hourly.time[index + 1],
probabilityOfPrecipitation: hourly.precipitation_probability?.[index],
temperature: hourly.temperature_2m?.[index].toFixed(0),
apparentTemperature: hourly.apparent_temperature?.[index].toFixed(0),
relativeHumidity: hourly.relative_humidity_2m?.[index].toFixed(0),
};
})
.filter((hour: any) => hour.startTime > now && hour.startTime < later);
return (
<Stack
w={'100%'}
style={{
background: 'var(--mantine-color-search-0)',
padding: '.5rem',
@@ -49,28 +57,30 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
marginTop: '.5rem',
}}
>
<Group m={0} p={0} mt={'-1.5rem'}>
<Select
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
dropdown: selectClasses.dropdown,
}}
className={selectClasses.menuSelect}
defaultValue={24}
value={timeFrame}
data={[
{ value: 12, label: '12 hours' },
{ value: 24, label: '24 hours' },
{ value: 48, label: '2 days' },
{ value: 72, label: '3 days' },
{ value: 168, label: '7 days' },
]}
onChange={(value: any) => setTimeFrame(value)}
/>
</Group>
{!formatted && (
<Group m={0} p={0} mt={'-1.5rem'}>
<Select
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
dropdown: selectClasses.dropdown,
}}
className={selectClasses.menuSelect}
defaultValue={24}
value={timeFrame}
data={[
{ value: 12, label: '12 hours' },
{ value: 24, label: '24 hours' },
{ value: 48, label: '2 days' },
{ value: 72, label: '3 days' },
{ value: 168, label: '7 days' },
]}
onChange={(value: any) => setTimeFrame(value)}
/>
</Group>
)}
<ResponsiveContainer width={'100%'} height={150}>
<ComposedChart data={hourlyForecast}>
<XAxis