fixed weather charts
This commit is contained in:
Drew Peifer
parent
8fb0801303
commit
11045b16ab
2 changed files with 81 additions and 60 deletions
|
|
@ -271,46 +271,79 @@ input, textarea {
|
|||
}
|
||||
|
||||
/* Weather Widget Styles */
|
||||
.weather-temp {
|
||||
.weather-error-message {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-light .weather-error-message {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.weather-location-caption {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.75rem;
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.app-light .weather-location-caption {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.weather-temp-large {
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.weather-unit {
|
||||
.weather-temp-unit {
|
||||
font-size: 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.app-light .weather-unit {
|
||||
.app-light .weather-temp-unit {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.weather-description {
|
||||
.weather-description-text {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 1rem;
|
||||
margin: 0 0 16px 0;
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.forecast-label {
|
||||
.app-light .weather-description-text {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.weather-section-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
font-family: "Russo One", sans-serif;
|
||||
}
|
||||
|
||||
.weather-forecast-day {
|
||||
font-size: 0.75rem;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.app-light .forecast-label {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.forecast-day {
|
||||
font-size: 0.75rem;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.forecast-temp {
|
||||
.weather-forecast-temp-max {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.weather-forecast-temp-min {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.app-light .weather-forecast-temp-min {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* News Widget Styles */
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Box, Chip, Stack, Paper, Typography, Divider, useTheme } from '@mui/material';
|
||||
import { Box, Chip, Stack, Paper, Divider, useTheme } from '@mui/material';
|
||||
import {
|
||||
Cloud,
|
||||
WbSunny,
|
||||
|
|
@ -78,13 +78,13 @@ function WeatherWidget({ data, sx }) {
|
|||
<GenericWidget title="Weather" sx={{ minWidth: '50%', opacity: 0.7, ...sx }}>
|
||||
<Box sx={{ textAlign: 'center', py: 3 }}>
|
||||
<Cloud sx={{ fontSize: 48, color: theme.palette.grey[400], mb: 2 }} />
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
<p className="weather-error-message">
|
||||
{data?.message || 'Weather data unavailable'}
|
||||
</Typography>
|
||||
</p>
|
||||
{data?.location && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<span className="weather-location-caption">
|
||||
Location: {data.location}
|
||||
</Typography>
|
||||
</span>
|
||||
)}
|
||||
</Box>
|
||||
</GenericWidget>
|
||||
|
|
@ -116,15 +116,15 @@ function WeatherWidget({ data, sx }) {
|
|||
{getWeatherIcon(current?.icon)}
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h3" component="span" sx={{ fontWeight: 300 }}>
|
||||
<span className="weather-temp-large">
|
||||
{Math.round(current?.temp || 0)}
|
||||
</Typography>
|
||||
<Typography variant="h5" component="span" sx={{ ml: 0.5 }}>
|
||||
</span>
|
||||
<span className="weather-temp-unit">
|
||||
{units?.temperature}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mt: 1 }}>
|
||||
</span>
|
||||
<p className="weather-description-text">
|
||||
{current?.description}
|
||||
</Typography>
|
||||
</p>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
|
@ -156,9 +156,9 @@ function WeatherWidget({ data, sx }) {
|
|||
{/* 5-Day Forecast */}
|
||||
{forecast && forecast.length > 0 && (
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
<h6 className="weather-section-title">
|
||||
5-Day Forecast
|
||||
</Typography>
|
||||
</h6>
|
||||
<Box sx={{ display: 'flex', gap: 1, overflowX: 'auto' }}>
|
||||
{forecast.map((day, index) => (
|
||||
<Paper
|
||||
|
|
@ -174,16 +174,16 @@ function WeatherWidget({ data, sx }) {
|
|||
borderRadius: 2
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" display="block" sx={{ mb: 1 }}>
|
||||
<span className="weather-forecast-day">
|
||||
{index === 0 ? 'Today' : formatDate(day.date)}
|
||||
</Typography>
|
||||
</span>
|
||||
{getForecastIcon(day.icon)}
|
||||
<Typography variant="body2" sx={{ mt: 1, fontWeight: 500 }}>
|
||||
<p className="weather-forecast-temp-max">
|
||||
{Math.round(day.maxTemp)}°
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
</p>
|
||||
<span className="weather-forecast-temp-min">
|
||||
{Math.round(day.minTemp)}°
|
||||
</Typography>
|
||||
</span>
|
||||
</Paper>
|
||||
))}
|
||||
</Box>
|
||||
|
|
@ -195,11 +195,11 @@ function WeatherWidget({ data, sx }) {
|
|||
{/* Historical Temperature Chart */}
|
||||
{tempChartData.length > 0 && (
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
<h6 className="weather-section-title">
|
||||
7-Day Temperature History
|
||||
</Typography>
|
||||
</h6>
|
||||
<LineChart
|
||||
height={200}
|
||||
height={250}
|
||||
series={[
|
||||
{
|
||||
data: tempChartData.map(d => d.high),
|
||||
|
|
@ -216,19 +216,13 @@ function WeatherWidget({ data, sx }) {
|
|||
]}
|
||||
xAxis={[{
|
||||
scaleType: 'point',
|
||||
data: tempChartData.map(d => d.date),
|
||||
tickLabelStyle: {
|
||||
angle: 45,
|
||||
textAnchor: 'start',
|
||||
fontSize: 10
|
||||
},
|
||||
tickNumber: tempChartData.length
|
||||
data: tempChartData.map(d => d.date)
|
||||
}]}
|
||||
yAxis={[{
|
||||
label: `Temperature (${units?.temperature})`,
|
||||
labelStyle: { fontSize: 12 }
|
||||
}]}
|
||||
margin={{ top: 20, bottom: 80, left: 60, right: 30 }}
|
||||
margin={{ top: 20, bottom: 100, left: 60, right: 30 }}
|
||||
sx={{
|
||||
'.MuiLineElement-root': {
|
||||
strokeWidth: 2
|
||||
|
|
@ -253,11 +247,11 @@ function WeatherWidget({ data, sx }) {
|
|||
{/* Historical Wind Speed Chart */}
|
||||
{windChartData.length > 0 && (
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
<h6 className="weather-section-title">
|
||||
7-Day Wind Speed History
|
||||
</Typography>
|
||||
</h6>
|
||||
<LineChart
|
||||
height={200}
|
||||
height={250}
|
||||
series={[
|
||||
{
|
||||
data: windChartData.map(d => d.max),
|
||||
|
|
@ -274,13 +268,7 @@ function WeatherWidget({ data, sx }) {
|
|||
]}
|
||||
xAxis={[{
|
||||
scaleType: 'point',
|
||||
data: windChartData.map(d => d.date),
|
||||
tickLabelStyle: {
|
||||
angle: 45,
|
||||
textAnchor: 'start',
|
||||
fontSize: 10
|
||||
},
|
||||
tickNumber: windChartData.length
|
||||
data: windChartData.map(d => d.date)
|
||||
}]}
|
||||
yAxis={[{
|
||||
label: `Wind Speed (${units?.windSpeed})`,
|
||||
|
|
|
|||
Loading…
Reference in a new issue