Style updates

2025-02-11 15:23:48 -06:00
parent b62ad44358
commit bfd958d78f
19 changed files with 574 additions and 702 deletions
--- a/src/components/WeatherModal/WeatherGraphs.tsx
+++ b/src/components/WeatherModal/WeatherGraphs.tsx
@@ -0,0 +1,127 @@
+import { Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import {
+	Area,
+	CartesianGrid,
+	ComposedChart,
+	Legend,
+	Line,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from 'recharts';
+
+export default function WeatherGraphs({ hourlyForecast }: any) {
+	const { theme } = useCommonHooks();
+
+	function CustomTooltip({ payload, active }: 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;
+	}
+
+	return (
+		<Stack
+			style={{
+				background: 'var(--color-search-background)',
+				padding: '.5rem',
+				borderRadius: '.5rem',
+			}}
+		>
+			<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>
+	);
+}