From 19ea455b55331ca66ace4d2e6cce6c26c5aa5175 Mon Sep 17 00:00:00 2001
From: rxf <rexfue@gmail.com>
Date: Sun, 8 Feb 2026 22:04:58 +0100
Subject: [PATCH] Umrechnung der Windgeschwindigleit in km/h Anzeige des
 aktuellen Wertes in der Grafik

---
 api/main.py                                  | 25 +++++--
 frontend/src/components/WeatherDashboard.jsx | 78 +++++++-------------
 2 files changed, 43 insertions(+), 60 deletions(-)

diff --git a/api/main.py b/api/main.py
index f47fa97..9f4718b 100644
--- a/api/main.py
+++ b/api/main.py
@@ -136,7 +136,11 @@ async def get_latest_weather():
     try:
         with conn.cursor() as cursor:
             cursor.execute("""
-                SELECT * FROM weather_data 
+                SELECT id, datetime, temperature, humidity, pressure,
+                       wind_speed * 1.60934 as wind_speed,
+                       wind_gust * 1.60934 as wind_gust,
+                       wind_dir, rain, rain_rate, received_at
+                FROM weather_data 
                 ORDER BY datetime DESC 
                 LIMIT 1
             """)
@@ -166,7 +170,11 @@ async def get_weather_history(
     try:
         with conn.cursor() as cursor:
             cursor.execute("""
-                SELECT * FROM weather_data 
+                SELECT id, datetime, temperature, humidity, pressure,
+                       wind_speed * 1.60934 as wind_speed,
+                       wind_gust * 1.60934 as wind_gust,
+                       wind_dir, rain, rain_rate, received_at
+                FROM weather_data 
                 WHERE datetime >= NOW() - make_interval(hours => %s)
                 ORDER BY datetime DESC
                 LIMIT %s
@@ -219,8 +227,8 @@ async def get_weather_statistics(
                     MAX(temperature) as max_temperature,
                     AVG(humidity) as avg_humidity,
                     AVG(pressure) as avg_pressure,
-                    AVG(wind_speed) as avg_wind_speed,
-                    MAX(wind_gust) as max_wind_gust,
+                    AVG(wind_speed * 1.60934) as avg_wind_speed,
+                    MAX(wind_gust * 1.60934) as max_wind_gust,
                     SUM(rain) as total_rain,
                     COUNT(*) as data_points
                 FROM weather_data
@@ -252,8 +260,8 @@ async def get_daily_statistics(
                     MAX(temperature) as max_temperature,
                     AVG(humidity) as avg_humidity,
                     AVG(pressure) as avg_pressure,
-                    AVG(wind_speed) as avg_wind_speed,
-                    MAX(wind_gust) as max_wind_gust,
+                    AVG(wind_speed * 1.60934) as avg_wind_speed,
+                    MAX(wind_gust * 1.60934) as max_wind_gust,
                     SUM(rain) as total_rain,
                     COUNT(*) as data_points
                 FROM weather_data
@@ -299,7 +307,10 @@ async def get_wind_data(
     try:
         with conn.cursor() as cursor:
             cursor.execute("""
-                SELECT datetime, wind_speed, wind_gust, wind_dir 
+                SELECT datetime, 
+                       wind_speed * 1.60934 as wind_speed,
+                       wind_gust * 1.60934 as wind_gust,
+                       wind_dir 
                 FROM weather_data 
                 WHERE datetime >= NOW() - make_interval(hours => %s)
                 ORDER BY datetime ASC
diff --git a/frontend/src/components/WeatherDashboard.jsx b/frontend/src/components/WeatherDashboard.jsx
index 4196a7e..7176fed 100644
--- a/frontend/src/components/WeatherDashboard.jsx
+++ b/frontend/src/components/WeatherDashboard.jsx
@@ -190,11 +190,6 @@ const WeatherDashboard = ({ data }) => {
   // Regen Chart
   const rainOptions = useMemo(() => ({
     ...getCommonOptions(),
-    legend: {
-      enabled: true,
-      align: 'center',
-      verticalAlign: 'top'
-    },
     yAxis: {
       ...getCommonOptions().yAxis,
       title: { text: 'Regen (mm) / Rate (mm/h)' }
@@ -223,11 +218,6 @@ const WeatherDashboard = ({ data }) => {
   // Windgeschwindigkeit Chart
   const windSpeedOptions = useMemo(() => ({
     ...getCommonOptions(),
-    legend: {
-      enabled: true,
-      align: 'center',
-      verticalAlign: 'top'
-    },
     plotOptions: {
       series: {
         marker: {
@@ -241,7 +231,12 @@ const WeatherDashboard = ({ data }) => {
     },
     yAxis: {
       ...getCommonOptions().yAxis,
-      title: { text: 'Windgeschwindigkeit (km/h)' }
+      title: { 
+        text: 'Windspeed (km/h)',
+        style: {
+          whiteSpace: 'nowrap'
+        }
+      }
     },
     series: [{
       name: 'Windgeschwindigkeit',
@@ -300,7 +295,7 @@ const WeatherDashboard = ({ data }) => {
     series: [{
       name: 'Windrichtung',
       data: sortedData.map(item => [new Date(item.datetime).getTime(), item.wind_dir]),
-      color: 'rgb(255, 205, 86)',
+      color: 'rgb(54, 162, 235)',
       type: 'scatter',
       tooltip: {
         valueSuffix: ' °'
@@ -313,73 +308,50 @@ const WeatherDashboard = ({ data }) => {
 
   return (
     <div className="dashboard">
-      {/* Aktuelle Werte Übersicht */}
-      <div className="current-values">
-        <div className="value-card">
-          <span className="value-label">Temperatur</span>
-          <span className="value-number">{current.temperature?.toFixed(1) || '-'}°C</span>
-        </div>
-        <div className="value-card">
-          <span className="value-label">Luftfeuchtigkeit</span>
-          <span className="value-number">{current.humidity || '-'}%</span>
-        </div>
-        <div className="value-card">
-          <span className="value-label">Luftdruck</span>
-          <span className="value-number">{current.pressure?.toFixed(1) || '-'} hPa</span>
-        </div>
-        <div className="value-card">
-          <span className="value-label">Wind</span>
-          <span className="value-number">{current.wind_speed?.toFixed(1) || '-'} km/h</span>
-        </div>
-        <div className="value-card">
-          <span className="value-label">Regen</span>
-          <span className="value-number">{current.rain?.toFixed(1) || '-'} mm</span>
-        </div>
-      </div>
-
       {/* Charts Grid */}
       <div className="charts-grid">
         <div className="chart-container">
-          <h3>🌡️ Temperatur</h3>
+          <h3>🌡️ Temperatur - Aktuell: {current.temperature?.toFixed(1) || '-'}°C</h3>
           <div className="chart-wrapper">
             <HighchartsReact highcharts={Highcharts} options={temperatureOptions} />
           </div>
         </div>
 
         <div className="chart-container">
-          <h3>💧 Luftfeuchtigkeit</h3>
-          <div className="chart-wrapper">
-            <HighchartsReact highcharts={Highcharts} options={humidityOptions} />
-          </div>
-        </div>
-
-        <div className="chart-container">
-          <h3>🌐 Luftdruck</h3>
+          <h3>🌐 Luftdruck - Aktuell: {current.pressure?.toFixed(1) || '-'} hPa</h3>
           <div className="chart-wrapper">
             <HighchartsReact highcharts={Highcharts} options={pressureOptions} />
           </div>
         </div>
 
         <div className="chart-container">
-          <h3>🌧️ Regen</h3>
+          <h3>💧 Luftfeuchtigkeit - Aktuell: {current.humidity || '-'}%</h3>
+          <div className="chart-wrapper">
+            <HighchartsReact highcharts={Highcharts} options={humidityOptions} />
+          </div>
+        </div>
+
+        <div className="chart-container">
+          <h3>🌧️ Regen - Aktuell: {current.rain?.toFixed(1) || '-'} mm</h3>
           <div className="chart-wrapper">
             <HighchartsReact highcharts={Highcharts} options={rainOptions} />
           </div>
         </div>
 
         <div className="chart-container">
-          <h3>💨 Windgeschwindigkeit</h3>
+          <h3>🧭 Windrichtung - Aktuell: {current.wind_dir ?? '-'}°</h3>
+          <div className="chart-wrapper">
+            <HighchartsReact highcharts={Highcharts} options={windDirOptions} />
+          </div>
+        </div>
+
+        <div className="chart-container">
+          <h3>💨 Windspeed - Aktuell: {current.wind_speed?.toFixed(1) || '-'} km/h</h3>
           <div className="chart-wrapper">
             <HighchartsReact highcharts={Highcharts} options={windSpeedOptions} />
           </div>
         </div>
 
-        <div className="chart-container">
-          <h3>🧭 Windrichtung</h3>
-          <div className="chart-wrapper">
-            <HighchartsReact highcharts={Highcharts} options={windDirOptions} />
-          </div>
-        </div>
       </div>
     </div>
   )