diff --git a/frontend/src/components/WeatherDashboard.css b/frontend/src/components/WeatherDashboard.css index 7230d57..1613fb7 100644 --- a/frontend/src/components/WeatherDashboard.css +++ b/frontend/src/components/WeatherDashboard.css @@ -56,3 +56,11 @@ aspect-ratio: 2 / 1; position: relative; } + +.chart-stats { + margin-top: 0.5rem; + text-align: center; + font-size: 0.85rem; + color: #666; + font-weight: 500; +} diff --git a/frontend/src/components/WeatherDashboard.jsx b/frontend/src/components/WeatherDashboard.jsx index 7176fed..8c19ff4 100644 --- a/frontend/src/components/WeatherDashboard.jsx +++ b/frontend/src/components/WeatherDashboard.jsx @@ -306,6 +306,58 @@ const WeatherDashboard = ({ data }) => { // Aktuellste Werte für Übersicht const current = sortedData[sortedData.length - 1] || {} + // Berechne Min/Max für den aktuellen Tag + const todayStats = useMemo(() => { + const now = new Date() + const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()) + + const todayData = sortedData.filter(item => { + const itemDate = new Date(item.datetime) + return itemDate >= todayStart + }) + + if (todayData.length === 0) { + return { + minTemp: null, maxTemp: null, minTempTime: null, maxTempTime: null, + minHumidity: null, maxHumidity: null, minHumidityTime: null, maxHumidityTime: null, + minPressure: null, maxPressure: null, minPressureTime: null, maxPressureTime: null + } + } + + // Temperatur + const minTempItem = todayData.reduce((min, item) => + item.temperature != null && (min === null || item.temperature < min.temperature) ? item : min, null) + const maxTempItem = todayData.reduce((max, item) => + item.temperature != null && (max === null || item.temperature > max.temperature) ? item : max, null) + + // Luftfeuchtigkeit + const minHumidityItem = todayData.reduce((min, item) => + item.humidity != null && (min === null || item.humidity < min.humidity) ? item : min, null) + const maxHumidityItem = todayData.reduce((max, item) => + item.humidity != null && (max === null || item.humidity > max.humidity) ? item : max, null) + + // Luftdruck + const minPressureItem = todayData.reduce((min, item) => + item.pressure != null && (min === null || item.pressure < min.pressure) ? item : min, null) + const maxPressureItem = todayData.reduce((max, item) => + item.pressure != null && (max === null || item.pressure > max.pressure) ? item : max, null) + + return { + minTemp: minTempItem?.temperature ?? null, + maxTemp: maxTempItem?.temperature ?? null, + minTempTime: minTempItem ? format(new Date(minTempItem.datetime), 'HH:mm', { locale: de }) : null, + maxTempTime: maxTempItem ? format(new Date(maxTempItem.datetime), 'HH:mm', { locale: de }) : null, + minHumidity: minHumidityItem?.humidity ?? null, + maxHumidity: maxHumidityItem?.humidity ?? null, + minHumidityTime: minHumidityItem ? format(new Date(minHumidityItem.datetime), 'HH:mm', { locale: de }) : null, + maxHumidityTime: maxHumidityItem ? format(new Date(maxHumidityItem.datetime), 'HH:mm', { locale: de }) : null, + minPressure: minPressureItem?.pressure ?? null, + maxPressure: maxPressureItem?.pressure ?? null, + minPressureTime: minPressureItem ? format(new Date(minPressureItem.datetime), 'HH:mm', { locale: de }) : null, + maxPressureTime: maxPressureItem ? format(new Date(maxPressureItem.datetime), 'HH:mm', { locale: de }) : null + } + }, [sortedData]) + return (