Umrechnung der Windgeschwindigleit in km/h

Anzeige des aktuellen Wertes in der Grafik

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>
   )