admin/wetter_station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mapping der neu gesendeten Werte auf die in der DB (main.py)

Browse Source 
Anzeige der letzten 24h richtig (App.jsx)
Y-Bereichsberechnung für alle 3 (THP) dynamisch,
Windbön mit angezeigt
This commit is contained in:
Reinhard X. Fürst
2026-04-24 14:31:06 +02:00
parent f271ff455f
commit 3652831bc3
4 changed files with 172 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/src/components/WeatherDashboard.jsx
View File

@@ -205,6 +205,19 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
}
}, [timeRange])
// Hilfsfunktion: Dynamischen Y-Bereich berechnen.
// minHalfSpan: halbe Mindestspanne (z.B. 5 → Bereich mind. 10 Einheiten)
const calcYRange = (values, minHalfSpan) => {
if (values.length === 0) return { yMin: null, yMax: null }
const min = Math.min(...values)
const max = Math.max(...values)
if (max - min < minHalfSpan * 2) {
const center = (max + min) / 2
return { yMin: center - minHalfSpan, yMax: center + minHalfSpan }
}
return { yMin: min, yMax: max }
}
// Gemeinsame Chart-Optionen (angepasst an Zeitraum)
const getCommonOptions = () => {
// Prüfe, ob es ein custom range ist
@@ -418,18 +431,7 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
}
}
const min = Math.min(...temps)
const max = Math.max(...temps)
const range = max - min
let yMin = min
let yMax = max
if (range < 10) {
const center = (max + min) / 2
yMin = center - 5
yMax = center + 5
}
const { yMin, yMax } = calcYRange(temps, 5)
return {
...getCommonOptions(),
@@ -464,13 +466,16 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
}, [sortedData, temperatureSuffix, timeRange])
// Luftfeuchtigkeit Chart
const humidityOptions = useMemo(() => ({
const humidityOptions = useMemo(() => {
const humidities = sortedData.filter(item => item.humidity != null).map(item => item.humidity)
const { yMin, yMax } = calcYRange(humidities, 10)
return {
...getCommonOptions(),
yAxis: {
...getCommonOptions().yAxis,
title: { text: null },
min: 40,
max: 100
min: yMin,
max: yMax
},
series: [{
name: 'Feuchte',
@@ -492,7 +497,8 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
valueSuffix: ' %'
}
}]
}), [sortedData, timeRange])
}
}, [sortedData, timeRange])
// Luftdruck Chart
const pressureOptions = useMemo(() => {
@@ -509,18 +515,7 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
}
}
const min = Math.min(...pressures)
const max = Math.max(...pressures)
const range = max - min
let yMin = min
let yMax = max
if (range < 40) {
const center = (max + min) / 2
yMin = center - 20
yMax = center + 20
}
const { yMin, yMax } = calcYRange(pressures, 20)
return {
...getCommonOptions(),
@@ -640,48 +635,35 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
const isCustomRange = typeof timeRange === 'object' && timeRange.type === 'custom'
const customDays = isCustomRange ? (timeRange.days || 1) : 0
const hideGusts = (timeRange === '365d') || (isCustomRange && customDays >= 365)
// Bei 365d und custom >= 365 Tage: nur Windgeschwindigkeit, keine Böen
const series = hideGusts
? [{
name: 'Windgeschwindigkeit',
data: sortedData
.filter(item => item.wind_speed != null)
.map(item => [new Date(item.datetime).getTime(), item.wind_speed]),
color: 'rgb(153, 102, 255)',
fillColor: 'rgba(153, 102, 255, 0.1)',
type: 'area',
connectNulls: false,
gapSize: 2 * 24 * 3600 * 1000,
gapUnit: 'value',
tooltip: {
valueDecimals: 1,
valueSuffix: ' km/h'
}
}]
: [{
name: 'Windgeschwindigkeit',
data: sortedData
.filter(item => item.wind_speed != null)
.map(item => [new Date(item.datetime).getTime(), item.wind_speed]),
color: 'rgb(153, 102, 255)',
fillColor: 'rgba(153, 102, 255, 0.1)',
type: 'area',
connectNulls: false,
gapSize: 2 * 24 * 3600 * 1000,
gapUnit: 'value',
tooltip: {
valueDecimals: 1,
valueSuffix: ' km/h'
}
}, {
console.log("Gust: ", hideGusts)
const windSpeedSeries = {
name: 'Windgeschwindigkeit',
data: sortedData
.filter(item => item.wind_speed != null)
.map(item => [new Date(item.datetime).getTime(), item.wind_speed]),
color: 'rgb(153, 102, 255)',
fillColor: 'rgba(153, 102, 255, 0.1)',
type: 'area',
connectNulls: false,
gapSize: 2 * 24 * 3600 * 1000,
gapUnit: 'value',
tooltip: {
valueDecimals: 1,
valueSuffix: ' km/h'
}
}
const series = hideGusts
? [windSpeedSeries]
: [windSpeedSeries, {
name: 'Böe' + windGustSuffix,
data: sortedData
.filter(item => item.wind_gust != null)
.map(item => [new Date(item.datetime).getTime(), item.wind_gust]),
color: 'rgb(255, 159, 64)',
fillColor: 'rgba(255, 159, 64, 0.1)',
color: 'rgb(255, 100, 0)',
fillColor: 'rgba(255, 100, 0, 0.15)',
type: 'area',
lineWidth: 1.5,
connectNulls: false,
gapSize: 2 * 24 * 3600 * 1000,
gapUnit: 'value',
@@ -690,9 +672,15 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
valueSuffix: ' km/h'
}
}]
return {
...getCommonOptions(),
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
floating: true,
itemStyle: { fontSize: '11px', fontWeight: 'normal' }
},
plotOptions: {
series: {
marker: {
@@ -706,7 +694,8 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
},
yAxis: {
...getCommonOptions().yAxis,
title: { text: null }
title: { text: null },
min: 0
},
series
}
@@ -1058,7 +1047,7 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
<div className="chart-item">
<div className="current-value">Aktuell: {current.wind_speed?.toFixed(1) || '-'} km/h</div>
<div className="chart-container">
<h3><span>💨 Windspeed{aggregationSuffix}</span><span className="unit">[km/h]</span></h3>
<h3><span>💨 Wind{aggregationSuffix}</span><span className="unit">[km/h]</span></h3>
<div className="chart-wrapper">
<HighchartsReact highcharts={Highcharts} options={windSpeedOptions} />
</div>