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

Bug fixes and new biome lint update

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-17 17:00:29 -05:00
parent 4a77340ba5
commit 7570c287c8
26 changed files with 459 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { Stack, Text } from '@mantine/core';
import { Stack } from '@mantine/core';
import {
Area,
AreaChart,
@@ -12,34 +12,15 @@ import {
YAxis,
} from 'recharts';
import type { HourlyForecast } from 'types';
import WeatherTooltip from './WeatherTooltip';
export default function WeatherGraphs({
hourlyForecast,
}: { hourlyForecast: HourlyForecast[] }) {
function CustomTooltip({ payload, active }: any) {
if (active) {
return (
<Stack
style={{
backgroundColor: 'var(--mantine-color-background-0)',
padding: '1rem',
borderRadius: '8px',
}}
>
{payload.map((item: any) => (
<Text
key={item.name}
size='md'
c={item.stroke}
>{`${item.name} - ${item.value}${item.unit}`}</Text>
))}
</Stack>
);
}
return null;
}
}: {
hourlyForecast: HourlyForecast[];
}) {
const colorPrecipitation = 'colorPrecipitation';
const colorHumidity = 'colorHumidity';
return (
<Stack
style={{
@@ -68,7 +49,7 @@ export default function WeatherGraphs({
}}
/>
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Tooltip content={<WeatherTooltip />} />
<Line
unit={'°F'}
type='monotone'
@@ -103,7 +84,7 @@ export default function WeatherGraphs({
<ResponsiveContainer width={'100%'} height={150}>
<AreaChart data={hourlyForecast}>
<defs>
<linearGradient id='colorPrecipitation' x1='0' y1='0' x2='0' y2='1'>
<linearGradient id={colorPrecipitation} x1='0' y1='0' x2='0' y2='1'>
<stop
offset='40%'
stopColor='var(--mantine-color-primary-0)'
@@ -115,7 +96,7 @@ export default function WeatherGraphs({
stopOpacity={0}
/>
</linearGradient>
<linearGradient id='colorHumidity' x1='0' y1='0' x2='0' y2='1'>
<linearGradient id={colorHumidity} x1='0' y1='0' x2='0' y2='1'>
<stop
offset='20%'
stopColor='var(--mantine-color-accent-0)'
@@ -140,7 +121,7 @@ export default function WeatherGraphs({
/>
<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Tooltip content={<WeatherTooltip />} />
<Area
unit={'%'}
type='monotone'
@@ -150,7 +131,7 @@ export default function WeatherGraphs({
}}
stroke={'var(--mantine-color-primary-0)'}
strokeWidth={2}
fill={'url(#colorPrecipitation)'}
fill={`url(#${colorPrecipitation})`}
dot={{
stroke: 'var(--mantine-color-primary-0)',
strokeWidth: 0,
@@ -166,7 +147,7 @@ export default function WeatherGraphs({
}}
stroke={'var(--mantine-color-accent-0)'}
strokeWidth={2}
fill={'url(#colorHumidity)'}
fill={`url(#${colorHumidity})`}
dot={{
stroke: 'var(--mantine-color-accent-0)',
strokeWidth: 0,