Anzeige Min/Max unter den Graphen
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div className="dashboard">
|
||||
{/* Charts Grid */}
|
||||
@@ -315,6 +367,9 @@ const WeatherDashboard = ({ data }) => {
|
||||
<div className="chart-wrapper">
|
||||
<HighchartsReact highcharts={Highcharts} options={temperatureOptions} />
|
||||
</div>
|
||||
<div className="chart-stats">
|
||||
Min: {todayStats.minTemp?.toFixed(1) || '-'}°C ({todayStats.minTempTime || '-'}) | Max: {todayStats.maxTemp?.toFixed(1) || '-'}°C ({todayStats.maxTempTime || '-'})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-container">
|
||||
@@ -322,6 +377,9 @@ const WeatherDashboard = ({ data }) => {
|
||||
<div className="chart-wrapper">
|
||||
<HighchartsReact highcharts={Highcharts} options={pressureOptions} />
|
||||
</div>
|
||||
<div className="chart-stats">
|
||||
Min: {todayStats.minPressure?.toFixed(1) || '-'} hPa ({todayStats.minPressureTime || '-'}) | Max: {todayStats.maxPressure?.toFixed(1) || '-'} hPa ({todayStats.maxPressureTime || '-'})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-container">
|
||||
@@ -329,6 +387,9 @@ const WeatherDashboard = ({ data }) => {
|
||||
<div className="chart-wrapper">
|
||||
<HighchartsReact highcharts={Highcharts} options={humidityOptions} />
|
||||
</div>
|
||||
<div className="chart-stats">
|
||||
Min: {todayStats.minHumidity || '-'}% ({todayStats.minHumidityTime || '-'}) | Max: {todayStats.maxHumidity || '-'}% ({todayStats.maxHumidityTime || '-'})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-container">
|
||||
|
||||
Reference in New Issue
Block a user