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

Weather styling

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-30 14:10:50 -05:00
parent c3f0ff7c4d
commit 16787969fc
1 changed files with 74 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
import { Stack, Text } from '@mantine/core';
import {
Area,
AreaChart,
CartesianGrid,
ComposedChart,
Legend,
@@ -61,18 +62,12 @@ export default function WeatherGraphs({
<YAxis
stroke={'var(--mantine-color-primary-0)'}
unit={'°F'}
domain={['dataMin', 'dataMax']}
domain={([dataMin, dataMax]) => {
return [dataMin - 5, dataMax + 5];
}}
/>
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Line
unit={'°F'}
type='monotone'
name='Temperature'
dataKey='temperature'
stroke={'var(--mantine-color-primary-0)'}
dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
/>
<Line
unit={'°F'}
type='monotone'
@@ -81,13 +76,57 @@ export default function WeatherGraphs({
return (data.dewpoint.value * 9) / 5 + 32;
}}
stroke={'var(--mantine-color-accent-0)'}
dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
strokeWidth={2}
dot={{
stroke: 'var(--mantine-color-accent-0)',
strokeWidth: 0,
fill: 'var(--mantine-color-accent-0)',
}}
/>
<Line
unit={'°F'}
type='monotone'
name='Temperature'
dataKey='temperature'
stroke={'var(--mantine-color-primary-0)'}
strokeWidth={2}
dot={{
stroke: 'var(--mantine-color-primary-0)',
strokeWidth: 0,
fill: 'var(--mantine-color-primary-0)',
}}
/>
<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
</ComposedChart>
</ResponsiveContainer>
<ResponsiveContainer width={'100%'} height={150}>
<ComposedChart data={hourlyForecast}>
<AreaChart data={hourlyForecast}>
<defs>
<linearGradient id='colorPrecipitation' x1='0' y1='0' x2='0' y2='1'>
<stop
offset='40%'
stopColor='var(--mantine-color-primary-0)'
stopOpacity={1}
/>
<stop
offset='100%'
stopColor='var(--mantine-color-primary-0)'
stopOpacity={0}
/>
</linearGradient>
<linearGradient id='colorHumidity' x1='0' y1='0' x2='0' y2='1'>
<stop
offset='20%'
stopColor='var(--mantine-color-accent-0)'
stopOpacity={1}
/>
<stop
offset='80%'
stopColor='var(--mantine-color-accent-0)'
stopOpacity={0}
/>
</linearGradient>
</defs>
<XAxis
type='category'
stroke={'var(--mantine-color-primary-0)'}
@@ -101,17 +140,6 @@ export default function WeatherGraphs({
<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Area
unit={'%'}
type='monotone'
name='Precipitation'
dataKey={(data: HourlyForecast) => {
return data.probabilityOfPrecipitation.value;
}}
stroke={'var(--mantine-color-primary-0)'}
fill={'var(--mantine-color-primary-0)'}
dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
/>
<Area
unit={'%'}
type='monotone'
@@ -120,11 +148,32 @@ export default function WeatherGraphs({
return data.relativeHumidity.value;
}}
stroke={'var(--mantine-color-accent-0)'}
fill={'var(--mantine-color-accent-0)'}
dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
strokeWidth={2}
fill={'url(#colorHumidity)'}
dot={{
stroke: 'var(--mantine-color-accent-0)',
strokeWidth: 0,
fill: 'var(--mantine-color-accent-0)',
}}
/>
<Area
unit={'%'}
type='monotone'
name='Precipitation'
dataKey={(data: HourlyForecast) => {
return data.probabilityOfPrecipitation.value;
}}
stroke={'var(--mantine-color-primary-0)'}
strokeWidth={2}
fill={'url(#colorPrecipitation)'}
dot={{
stroke: 'var(--mantine-color-primary-0)',
strokeWidth: 0,
fill: 'var(--mantine-color-primary-0)',
}}
/>
<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
</ComposedChart>
</AreaChart>
</ResponsiveContainer>
</Stack>
);