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

Typing

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-15 20:21:25 -05:00
parent 2e72b76e95
commit 78dec160b6
34 changed files with 225 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,4 @@
import { Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import {
Area,
CartesianGrid,
@@ -13,8 +12,6 @@ import {
} from 'recharts';
export default function WeatherGraphs({ hourlyForecast }: any) {
const { theme } = useCommonHooks();
function CustomTooltip({ payload, active }: any) {
if (active) {
return (
@@ -50,7 +47,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
<ComposedChart data={hourlyForecast}>
<XAxis
type='category'
stroke={theme.primaryColor}
stroke={'var(--color-text-pri)'}
dataKey={(data: any) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
@@ -59,7 +56,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
}}
/>
<YAxis
stroke={theme.primaryColor}
stroke={'var(--color-text-pri)'}
unit={'°F'}
domain={['dataMin', 'dataMax']}
/>
@@ -70,8 +67,8 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
type='monotone'
name='Temperature'
dataKey='temperature'
stroke={theme.primaryColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
stroke={'var(--color-text-pri)'}
dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
/>
<Line
unit={'°F'}
@@ -80,8 +77,8 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
dataKey={(data: any) => {
return (data.dewpoint.value * 9) / 5 + 32;
}}
stroke={theme.accentColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
stroke={'var(--color-text-acc)'}
dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
/>
<Legend style={{ background: 'var(--color-search-background)' }} />
</ComposedChart>
@@ -90,7 +87,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
<ComposedChart data={hourlyForecast}>
<XAxis
type='category'
stroke={theme.primaryColor}
stroke={'var(--color-text-pri)'}
dataKey={(data: any) => {
return new Date(data.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
@@ -98,7 +95,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
});
}}
/>
<YAxis stroke={theme.primaryColor} unit={'%'} domain={[0, 100]} />
<YAxis stroke={'var(--color-text-pri)'} unit={'%'} domain={[0, 100]} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Area
@@ -108,9 +105,9 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
dataKey={(data: any) => {
return data.probabilityOfPrecipitation.value;
}}
stroke={theme.primaryColor}
fill={theme.primaryColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
stroke={'var(--color-text-pri)'}
fill={'var(--color-text-pri)'}
dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
/>
<Area
unit={'%'}
@@ -119,9 +116,9 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
dataKey={(data: any) => {
return data.relativeHumidity.value;
}}
stroke={theme.accentColor}
fill={theme.accentColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
stroke={'var(--color-text-acc)'}
fill={'var(--color-text-acc)'}
dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
/>
<Legend style={{ background: 'var(--color-search-background)' }} />
</ComposedChart>