Min/Max-Werte unter Graf

Aktuelle Werte oben mit dran

frontend/src/App.jsx

@@ -9,15 +9,37 @@ function App() {
   const [lastUpdate, setLastUpdate] = useState(null)
 
   useEffect(() => {
-    // Prüfe ob eingebettete Daten vorhanden sind
+    const fetchData = async () => {
+      try {
+        // Prüfe ob eingebettete Daten vorhanden sind (statischer Build)
         if (window.__WEATHER_DATA__) {
           setWeatherData(window.__WEATHER_DATA__)
           setLastUpdate(new Date())
           setLoading(false)
         } else {
-      setError('Keine Wetterdaten verfügbar')
+          // Entwicklungsmodus: Daten von API holen
+          const response = await fetch('http://localhost:8000/weather/history?hours=24')
+          if (!response.ok) {
+            throw new Error('API-Fehler: ' + response.status)
+          }
+          const data = await response.json()
+          setWeatherData(data)
+          setLastUpdate(new Date())
           setLoading(false)
         }
+      } catch (err) {
+        setError(err.message)
+        setLoading(false)
+      }
+    }
+    
+    fetchData()
+    
+    // Automatisches Update alle 5 Minuten (nur im Entwicklungsmodus)
+    if (!window.__WEATHER_DATA__) {
+      const interval = setInterval(fetchData, 5 * 60 * 1000)
+      return () => clearInterval(interval)
+    }
   }, [])
 
   if (loading) {

frontend/src/components/WeatherDashboard.css

@@ -1,6 +1,7 @@
 .dashboard {
   width: 100%;
   max-width: 795px;
+  margin: 0 auto;
 }
 
 .current-values {

frontend/src/components/WeatherDashboard.jsx

@@ -82,15 +82,14 @@ const WeatherDashboard = ({ data }) => {
     const min = Math.min(...temps)
     const max = Math.max(...temps)
     const range = max - min
-    console.log("Range: ", range)
+
     let yMin = min
     let yMax = max
-    console.log("yMax:",yMax, "   yMin:", yMin)
+
     if (range < 10) {
       const center = (max + min) / 2
       yMin = center - 5
       yMax = center + 5
-      console.log("yMax:",yMax, "   yMin:", yMin)
     }
 
     return {
@@ -126,12 +125,12 @@ const WeatherDashboard = ({ data }) => {
     ...getCommonOptions(),
     yAxis: {
       ...getCommonOptions().yAxis,
-      title: { text: 'Luftfeuchtigkeit (%)' },
-      min: 0,
+      title: { text: 'Feuchte (%)' },
+      min: 40,
       max: 100
     },
     series: [{
-      name: 'Luftfeuchtigkeit',
+      name: 'Feuchte',
       data: sortedData.map(item => [new Date(item.datetime).getTime(), item.humidity]),
       color: 'rgb(54, 162, 235)',
       fillColor: {
@@ -154,17 +153,14 @@ const WeatherDashboard = ({ data }) => {
     const min = Math.min(...pressures)
     const max = Math.max(...pressures)
     const range = max - min
-        console.log("Range: ", range)
 
     let yMin = min
     let yMax = max
-        console.log("yMax:",yMax, "   yMin:", yMin)
     
     if (range < 40) {
       const center = (max + min) / 2
       yMin = center - 20
       yMax = center + 20
-    console.log("yMax:",yMax, "   yMin:", yMin)
     }
 
     return {
@@ -349,6 +345,10 @@ const WeatherDashboard = ({ data }) => {
     const maxPressureItem = todayData.reduce((max, item) => 
       item.pressure != null && (max === null || item.pressure > max.pressure) ? item : max, null)
 
+    // Windgeschwindigkeit
+    const maxWindGustItem = todayData.reduce((max, item) => 
+      item.wind_gust != null && (max === null || item.wind_gust > max.wind_gust) ? item : max, null)
+
     return {
       minTemp: minTempItem?.temperature ?? null,
       maxTemp: maxTempItem?.temperature ?? null,
@@ -361,7 +361,9 @@ const WeatherDashboard = ({ data }) => {
       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
+      maxPressureTime: maxPressureItem ? format(new Date(maxPressureItem.datetime), 'HH:mm', { locale: de }) : null,
+      maxWindGust: maxWindGustItem?.wind_gust ?? null,
+      maxWindGustTime: maxWindGustItem ? format(new Date(maxWindGustItem.datetime), 'HH:mm', { locale: de }) : null
     }
   }, [sortedData])        
 
@@ -418,6 +420,9 @@ const WeatherDashboard = ({ data }) => {
           <div className="chart-wrapper">
             <HighchartsReact highcharts={Highcharts} options={windSpeedOptions} />
           </div>
+          <div className="chart-stats">
+            Max: {todayStats.maxWindGust?.toFixed(1) || '-'} km/h ({todayStats.maxWindGustTime || '-'})
+          </div>
         </div>
 
       </div>