V 1.2.0 diverse Anpassungen, so dass es ähnlich der alten Anwenung ist. Ist nun mal gut zu benutzen

2026-03-24 17:18:25 +01:00
parent acd509fef6
commit 267f8198b9
4 changed files with 168 additions and 70 deletions
@@ -20,12 +20,17 @@ Highcharts.setOptions({
  }
 })

-const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeChange }) => {
+const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '24h', onTimeRangeChange }) => {
  // Daten vorbereiten und nach Zeit sortieren (älteste zuerst)
  const sortedData = useMemo(() => {
    return [...data].sort((a, b) => new Date(a.datetime) - new Date(b.datetime))
  }, [data])
  
+  // Aktuelle Werte aus separaten currentData (immer 24h)
+  const sortedCurrentData = useMemo(() => {
+    return [...currentData].sort((a, b) => new Date(a.datetime) - new Date(b.datetime))
+  }, [currentData])
+  
  // Zeitraum-Label
  const timeRangeLabel = useMemo(() => {
    switch (timeRange) {
@@ -118,7 +123,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
      tooltip: {
        shared: true,
        crosshairs: true,
-        xDateFormat: timeRange === '24h' ? '%d.%m.%Y %H:%M' : '%d.%m.%Y'
+        xDateFormat: timeRange === '24h' ? '%d.%m.%Y %H:%M' : (timeRange === '7d' || timeRange === '30d' ? '%d.%m.%Y - %Hh' : '%d.%m.%Y')
      },
      plotOptions: {
        series: {
@@ -160,7 +165,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
      ...getCommonOptions(),
      yAxis: {
        ...getCommonOptions().yAxis,
-        title: { text: 'Temperatur (°C)' },
+        title: { text: null },
        min: yMin,
        max: yMax
      },
@@ -181,6 +186,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
        gapSize: 2 * 24 * 3600 * 1000,
        gapUnit: 'value',
        tooltip: {
+          valueDecimals: 1,
          valueSuffix: ' °C'
        }
      }]
@@ -192,7 +198,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
    ...getCommonOptions(),
    yAxis: {
      ...getCommonOptions().yAxis,
-      title: { text: 'Feuchte (%)' },
+      title: { text: null },
      min: 40,
      max: 100
    },
@@ -212,6 +218,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
      gapSize: 2 * 24 * 3600 * 1000,
      gapUnit: 'value',
      tooltip: {
+        valueDecimals: 0,
        valueSuffix: ' %'
      }
    }]
@@ -237,7 +244,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
      ...getCommonOptions(),
      yAxis: {
        ...getCommonOptions().yAxis,
-        title: { text: 'Luftdruck (hPa)' },
+        title: { text: null },
        min: yMin,
        max: yMax
      },
@@ -257,6 +264,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
        gapSize: 2 * 24 * 3600 * 1000,
        gapUnit: 'value',
        tooltip: {
+          valueDecimals: 0,
          valueSuffix: ' hPa'
        }
      }]
@@ -320,7 +328,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
      ...getCommonOptions(),
      yAxis: {
        ...getCommonOptions().yAxis,
-        title: { text: yAxisTitle }
+        title: { text: null }
      },
      series
    }
@@ -342,6 +350,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
          gapSize: 2 * 24 * 3600 * 1000,
          gapUnit: 'value',
          tooltip: {
+            valueDecimals: 1,
            valueSuffix: ' km/h'
          }
        }]
@@ -357,6 +366,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
          gapSize: 2 * 24 * 3600 * 1000,
          gapUnit: 'value',
          tooltip: {
+            valueDecimals: 1,
            valueSuffix: ' km/h'
          }
        }, {
@@ -371,6 +381,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
          gapSize: 2 * 24 * 3600 * 1000,
          gapUnit: 'value',
          tooltip: {
+            valueDecimals: 1,
            valueSuffix: ' km/h'
          }
        }]
@@ -390,12 +401,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
      },
      yAxis: {
        ...getCommonOptions().yAxis,
-        title: { 
-          text: 'Windspeed (km/h)',
-          style: {
-            whiteSpace: 'nowrap'
-          }
-        }
+        title: { text: null }
      },
      series
    }
@@ -404,6 +410,13 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
  // Windrichtung Chart
  const windDirOptions = useMemo(() => ({
    ...getCommonOptions(),
+    tooltip: {
+      formatter: function() {
+        const dateFormat = timeRange === '24h' ? '%d.%m.%Y %H:%M' : (timeRange === '7d' || timeRange === '30d' ? '%d.%m.%Y - %Hh' : '%d.%m.%Y')
+        const dateStr = Highcharts.dateFormat(dateFormat, this.x)
+        return `${dateStr}<br/><span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>${this.y.toFixed(0)}°</b>`
+      }
+    },
    plotOptions: {
      scatter: {
        marker: {
@@ -420,7 +433,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
    },
    yAxis: {
      ...getCommonOptions().yAxis,
-      title: { text: 'Windrichtung' },
+      title: { text: null },
      min: 0,
      max: 360,
      tickInterval: 45,
@@ -438,15 +451,12 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
      name: 'Windrichtung',
      data: sortedData.filter(item => item.wind_dir != null).map(item => [new Date(item.datetime).getTime(), item.wind_dir]),
      color: 'rgb(54, 162, 235)',
-      type: 'scatter',
-      tooltip: {
-        valueSuffix: ' °'
-      }
+      type: 'scatter'
    }]
-  }), [sortedData])
+  }), [sortedData, timeRange])

-  // Aktuellste Werte für Übersicht
-  const current = sortedData[sortedData.length - 1] || {}
+  // Aktuellste Werte für Übersicht (immer aus den 24h-Daten, Fallback auf sortedData)
+  const current = (sortedCurrentData.length > 0 ? sortedCurrentData[sortedCurrentData.length - 1] : sortedData[sortedData.length - 1]) || {}

  // Berechne Min/Max für den gewählten Zeitraum
  const periodStats = useMemo(() => {
@@ -512,25 +522,29 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
          className={timeRange === '24h' ? 'active' : ''}
          onClick={() => onTimeRangeChange('24h')}
        >
-          24 Stunden
+          <span className="time-range-full">24 Stunden</span>
+          <span className="time-range-short">24h</span>
        </button>
        <button 
          className={timeRange === '7d' ? 'active' : ''}
          onClick={() => onTimeRangeChange('7d')}
        >
-          7 Tage
+          <span className="time-range-full">7 Tage</span>
+          <span className="time-range-short">7d</span>
        </button>
        <button 
          className={timeRange === '30d' ? 'active' : ''}
          onClick={() => onTimeRangeChange('30d')}
        >
-          30 Tage
+          <span className="time-range-full">30 Tage</span>
+          <span className="time-range-short">30d</span>
        </button>
        <button 
          className={timeRange === '365d' ? 'active' : ''}
          onClick={() => onTimeRangeChange('365d')}
        >
-          365 Tage
+          <span className="time-range-full">365 Tage</span>
+          <span className="time-range-short">365d</span>
        </button>
      </div>
      
@@ -541,57 +555,77 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
      
      {/* Charts Grid */}
      <div className="charts-grid">
-        <div className="chart-container">
-          <h3>🌡️ Temperatur{aggregationSuffix} - Aktuell: {current.temperature?.toFixed(1) || '-'}°C</h3>
-          <div className="chart-wrapper">
-            <HighchartsReact highcharts={Highcharts} options={temperatureOptions} />
-          </div>
-          <div className="chart-stats">
-            Min: {periodStats.minTemp?.toFixed(1) || '-'}°C ({periodStats.minTempTime || '-'}) | Max: {periodStats.maxTemp?.toFixed(1) || '-'}°C ({periodStats.maxTempTime || '-'})
+        <div className="chart-item">
+          <div className="current-value">Aktuell: {current.temperature?.toFixed(1) || '-'}°C</div>
+          <div className="chart-container">
+            <h3><span>🌡️ Temperatur{aggregationSuffix}</span><span className="unit">[°C]</span></h3>
+            <div className="chart-wrapper">
+              <HighchartsReact highcharts={Highcharts} options={temperatureOptions} />
+            </div>
+            <div className="chart-stats">
+              Min: {periodStats.minTemp?.toFixed(1) || '-'}°C ({periodStats.minTempTime || '-'}) | Max: {periodStats.maxTemp?.toFixed(1) || '-'}°C ({periodStats.maxTempTime || '-'})
+            </div>
          </div>
        </div>

-        <div className="chart-container">
-          <h3>🌐 Luftdruck{aggregationSuffix} - Aktuell: {current.pressure?.toFixed(1) || '-'} hPa</h3>
-          <div className="chart-wrapper">
-            <HighchartsReact highcharts={Highcharts} options={pressureOptions} />
-          </div>
-          <div className="chart-stats">
-            Min: {periodStats.minPressure?.toFixed(1) || '-'} hPa ({periodStats.minPressureTime || '-'}) | Max: {periodStats.maxPressure?.toFixed(1) || '-'} hPa ({periodStats.maxPressureTime || '-'})
+        <div className="chart-item">
+          <div className="current-value">Aktuell: {current.pressure?.toFixed(0) || '-'} hPa</div>
+          <div className="chart-container">
+            <h3><span>🌐 Luftdruck{aggregationSuffix}</span><span className="unit">[hPa]</span></h3>
+            <div className="chart-wrapper">
+              <HighchartsReact highcharts={Highcharts} options={pressureOptions} />
+            </div>
+            <div className="chart-stats">
+              Min: {periodStats.minPressure?.toFixed(0) || '-'} hPa ({periodStats.minPressureTime || '-'}) | Max: {periodStats.maxPressure?.toFixed(0) || '-'} hPa ({periodStats.maxPressureTime || '-'})
+            </div>
          </div>
        </div>

-        <div className="chart-container">
-          <h3>💧 Luftfeuchtigkeit{aggregationSuffix} - Aktuell: {current.humidity || '-'}%</h3>
-          <div className="chart-wrapper">
-            <HighchartsReact highcharts={Highcharts} options={humidityOptions} />
-          </div>
-          <div className="chart-stats">
-            Min: {periodStats.minHumidity || '-'}% ({periodStats.minHumidityTime || '-'}) | Max: {periodStats.maxHumidity || '-'}% ({periodStats.maxHumidityTime || '-'})
+        <div className="chart-item">
+          <div className="current-value">Aktuell: {current.humidity || '-'}%</div>
+          <div className="chart-container">
+            <h3><span>💧 Luftfeuchtigkeit{aggregationSuffix}</span><span className="unit">[%]</span></h3>
+            <div className="chart-wrapper">
+              <HighchartsReact highcharts={Highcharts} options={humidityOptions} />
+            </div>
+            <div className="chart-stats">
+              Min: {periodStats.minHumidity || '-'}% ({periodStats.minHumidityTime || '-'}) | Max: {periodStats.maxHumidity || '-'}% ({periodStats.maxHumidityTime || '-'})
+            </div>
          </div>
        </div>

-        <div className="chart-container">
-          <h3>🌧️ Regen{aggregationSuffix} - Aktuell: {current.rain?.toFixed(1) || '-'} mm</h3>
-          <div className="chart-wrapper">
-            <HighchartsReact highcharts={Highcharts} options={rainOptions} />
+        <div className="chart-item">
+          <div className="current-value">Aktuell: {current.rain?.toFixed(1) || '-'} mm</div>
+          <div className="chart-container">
+            <h3><span>🌧️ Regen{aggregationSuffix}</span><span className="unit">[mm]</span></h3>
+            <div className="chart-wrapper">
+              <HighchartsReact highcharts={Highcharts} options={rainOptions} />
+            </div>
+            <div className="chart-stats"> </div>
          </div>
        </div>

-        <div className="chart-container">
-          <h3>🧭 Windrichtung{aggregationSuffix} - Aktuell: {current.wind_dir ?? '-'}°</h3>
-          <div className="chart-wrapper">
-            <HighchartsReact highcharts={Highcharts} options={windDirOptions} />
+        <div className="chart-item">
+          <div className="current-value">Aktuell: {current.wind_dir ?? '-'}°</div>
+          <div className="chart-container">
+            <h3><span>🧭 Windrichtung{aggregationSuffix}</span><span className="unit">[°]</span></h3>
+            <div className="chart-wrapper">
+              <HighchartsReact highcharts={Highcharts} options={windDirOptions} />
+            </div>
+            <div className="chart-stats"> </div>
          </div>
        </div>

-        <div className="chart-container">
-          <h3>💨 Windspeed{aggregationSuffix} - Aktuell: {current.wind_speed?.toFixed(1) || '-'} km/h</h3>
-          <div className="chart-wrapper">
-            <HighchartsReact highcharts={Highcharts} options={windSpeedOptions} />
-          </div>
-          <div className="chart-stats">
-            Max: {periodStats.maxWindGust?.toFixed(1) || '-'} km/h ({periodStats.maxWindGustTime || '-'})
+        <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>
+            <div className="chart-wrapper">
+              <HighchartsReact highcharts={Highcharts} options={windSpeedOptions} />
+            </div>
+            <div className="chart-stats">
+              Max: {periodStats.maxWindGust?.toFixed(1) || '-'} km/h ({periodStats.maxWindGustTime || '-'})
+            </div>
          </div>
        </div>

@@ -610,7 +644,7 @@ const WeatherDashboard = ({ data, rainData = [], timeRange = '24h', onTimeRangeC
            {' '}{version} – {buildDate}
          </div>
        </div>
-        <hr />
+        <hr className="footer-divider" />
        <div className="footer-credits">
          <div className="footer-left">Daten-Erfassung mit einer Davis VantagePro.</div>
          <div className="footer-right">Grafiken erzeugt mit HighCharts</div>