danvics/personal-dash-cl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed weather charts

Browse source
This commit is contained in:
Drew Peifer 2026-02-14 01:08:04 -05:00
parent 8fb0801303
commit 11045b16ab
2 changed files with 81 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
claudash/src/App.css
View file

@ -271,46 +271,79 @@ input, textarea {
} }
/* Weather Widget Styles */ /* 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-size: 3rem;
font-weight: 400; font-weight: 300;
line-height: 1; line-height: 1;
} }
.weather-unit { .weather-temp-unit {
font-size: 1.5rem; font-size: 1.5rem;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
margin-left: 4px; margin-left: 4px;
} }
.app-light .weather-unit { .app-light .weather-temp-unit {
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
} }
.weather-description { .weather-description-text {
color: rgba(255, 255, 255, 0.6);
font-size: 1rem; 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-size: 0.875rem;
font-weight: 500; font-weight: 600;
color: rgba(255, 255, 255, 0.6); margin: 0 0 16px 0;
font-family: "Russo One", sans-serif;
}
.weather-forecast-day {
font-size: 0.75rem;
display: block;
margin-bottom: 8px; margin-bottom: 8px;
} }
.app-light .forecast-label { .weather-forecast-temp-max {
color: rgba(0, 0, 0, 0.6);
}
.forecast-day {
font-size: 0.75rem;
display: block;
margin-bottom: 4px;
}
.forecast-temp {
font-size: 0.875rem; 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 */ /* News Widget Styles */

68
claudash/src/components/widgets/WeatherWidget.jsx
View file

@ -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 { import {
Cloud, Cloud,
WbSunny, WbSunny,
@ -78,13 +78,13 @@ function WeatherWidget({ data, sx }) {
<GenericWidget title="Weather" sx={{ minWidth: '50%', opacity: 0.7, ...sx }}> <GenericWidget title="Weather" sx={{ minWidth: '50%', opacity: 0.7, ...sx }}>
<Box sx={{ textAlign: 'center', py: 3 }}> <Box sx={{ textAlign: 'center', py: 3 }}>
<Cloud sx={{ fontSize: 48, color: theme.palette.grey[400], mb: 2 }} /> <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'} {data?.message || 'Weather data unavailable'}
</Typography> </p>
{data?.location && ( {data?.location && (
<Typography variant="caption" color="text.secondary"> <span className="weather-location-caption">
Location: {data.location} Location: {data.location}
</Typography> </span>
)} )}
</Box> </Box>
</GenericWidget> </GenericWidget>
@ -116,15 +116,15 @@ function WeatherWidget({ data, sx }) {
{getWeatherIcon(current?.icon)} {getWeatherIcon(current?.icon)}
</Box> </Box>
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<Typography variant="h3" component="span" sx={{ fontWeight: 300 }}> <span className="weather-temp-large">
{Math.round(current?.temp || 0)} {Math.round(current?.temp || 0)}
</Typography> </span>
<Typography variant="h5" component="span" sx={{ ml: 0.5 }}> <span className="weather-temp-unit">
{units?.temperature} {units?.temperature}
</Typography> </span>
<Typography variant="body1" color="text.secondary" sx={{ mt: 1 }}> <p className="weather-description-text">
{current?.description} {current?.description}
</Typography> </p>
</Box> </Box>
</Box> </Box>
@ -156,9 +156,9 @@ function WeatherWidget({ data, sx }) {
{/* 5-Day Forecast */} {/* 5-Day Forecast */}
{forecast && forecast.length > 0 && ( {forecast && forecast.length > 0 && (
<Box sx={{ mb: 3 }}> <Box sx={{ mb: 3 }}>
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}> <h6 className="weather-section-title">
5-Day Forecast 5-Day Forecast
</Typography> </h6>
<Box sx={{ display: 'flex', gap: 1, overflowX: 'auto' }}> <Box sx={{ display: 'flex', gap: 1, overflowX: 'auto' }}>
{forecast.map((day, index) => ( {forecast.map((day, index) => (
<Paper <Paper
@ -174,16 +174,16 @@ function WeatherWidget({ data, sx }) {
borderRadius: 2 borderRadius: 2
}} }}
> >
<Typography variant="caption" display="block" sx={{ mb: 1 }}> <span className="weather-forecast-day">
{index === 0 ? 'Today' : formatDate(day.date)} {index === 0 ? 'Today' : formatDate(day.date)}
</Typography> </span>
{getForecastIcon(day.icon)} {getForecastIcon(day.icon)}
<Typography variant="body2" sx={{ mt: 1, fontWeight: 500 }}> <p className="weather-forecast-temp-max">
{Math.round(day.maxTemp)}° {Math.round(day.maxTemp)}°
</Typography> </p>
<Typography variant="caption" color="text.secondary"> <span className="weather-forecast-temp-min">
{Math.round(day.minTemp)}° {Math.round(day.minTemp)}°
</Typography> </span>
</Paper> </Paper>
))} ))}
</Box> </Box>
@ -195,11 +195,11 @@ function WeatherWidget({ data, sx }) {
{/* Historical Temperature Chart */} {/* Historical Temperature Chart */}
{tempChartData.length > 0 && ( {tempChartData.length > 0 && (
<Box sx={{ mb: 3 }}> <Box sx={{ mb: 3 }}>
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}> <h6 className="weather-section-title">
7-Day Temperature History 7-Day Temperature History
</Typography> </h6>
<LineChart <LineChart
height={200} height={250}
series={[ series={[
{ {
data: tempChartData.map(d => d.high), data: tempChartData.map(d => d.high),
@ -216,19 +216,13 @@ function WeatherWidget({ data, sx }) {
]} ]}
xAxis={[{ xAxis={[{
scaleType: 'point', scaleType: 'point',
data: tempChartData.map(d => d.date), data: tempChartData.map(d => d.date)
tickLabelStyle: {
angle: 45,
textAnchor: 'start',
fontSize: 10
},
tickNumber: tempChartData.length
}]} }]}
yAxis={[{ yAxis={[{
label: `Temperature (${units?.temperature})`, label: `Temperature (${units?.temperature})`,
labelStyle: { fontSize: 12 } labelStyle: { fontSize: 12 }
}]} }]}
margin={{ top: 20, bottom: 80, left: 60, right: 30 }} margin={{ top: 20, bottom: 100, left: 60, right: 30 }}
sx={{ sx={{
'.MuiLineElement-root': { '.MuiLineElement-root': {
strokeWidth: 2 strokeWidth: 2
@ -253,11 +247,11 @@ function WeatherWidget({ data, sx }) {
{/* Historical Wind Speed Chart */} {/* Historical Wind Speed Chart */}
{windChartData.length > 0 && ( {windChartData.length > 0 && (
<Box> <Box>
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}> <h6 className="weather-section-title">
7-Day Wind Speed History 7-Day Wind Speed History
</Typography> </h6>
<LineChart <LineChart
height={200} height={250}
series={[ series={[
{ {
data: windChartData.map(d => d.max), data: windChartData.map(d => d.max),
@ -274,13 +268,7 @@ function WeatherWidget({ data, sx }) {
]} ]}
xAxis={[{ xAxis={[{
scaleType: 'point', scaleType: 'point',
data: windChartData.map(d => d.date), data: windChartData.map(d => d.date)
tickLabelStyle: {
angle: 45,
textAnchor: 'start',
fontSize: 10
},
tickNumber: windChartData.length
}]} }]}
yAxis={[{ yAxis={[{
label: `Wind Speed (${units?.windSpeed})`, label: `Wind Speed (${units?.windSpeed})`,