Updates to weather modal

src/components/WeatherModal/WeatherGraphs.tsx

@@ -1,4 +1,5 @@
-import { Stack } from '@mantine/core';
+import { Group, Select, Stack } from '@mantine/core';
+import { useState } from 'react';
 import {
 	Area,
 	AreaChart,
@@ -11,16 +12,18 @@ import {
 	XAxis,
 	YAxis,
 } from 'recharts';
+import { selectClasses } from 'styles';
 import type { Hourly } from 'types';
 import WeatherTooltip from './WeatherTooltip';
 
 export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }) {
 	const colorPrecipitation = 'colorPrecipitation';
 	const colorHumidity = 'colorHumidity';
-
+	const [timeFrame, setTimeFrame] = useState(24);
 	const later = new Date();
 	const now = new Date();
-	later.setDate(now.getDate() + 1);
+
+	later.setTime(now.getTime() + timeFrame * 60 * 60 * 1000);
 	const hourlyForecast = hourly?.time
 		?.map((_: any, index: number) => {
 			return {
@@ -31,6 +34,7 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
 				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),
 			};
 		})
@@ -42,8 +46,32 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
 				background: 'var(--mantine-color-search-0)',
 				padding: '.5rem',
 				borderRadius: '8px',
+				position: 'relative',
+				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: 28, label: '2 days' },
+						{ value: 48, label: '3 days' },
+						{ value: 168, label: '7 days' },
+					]}
+					onChange={(value: any) => setTimeFrame(value)}
+				/>
+			</Group>
 			<ResponsiveContainer width={'100%'} height={150}>
 				<ComposedChart data={hourlyForecast}>
 					<XAxis
@@ -81,8 +109,8 @@ export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }
 					<Line
 						unit={'°F'}
 						type='monotone'
-						name='Dew Point'
-						dataKey='dewpoint'
+						name='Feels Like'
+						dataKey='apparentTemperature'
 						stroke={'var(--mantine-color-accent-0)'}
 						strokeWidth={2}
 						dot={{