Headerline sieht gut aus

Rest funktioniert so la la

frontend/package.json

@@ -9,11 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "chart.js": "^4.4.1",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "date-fns": "^3.3.1",
+    "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
-    "date-fns": "^3.3.1"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",

frontend/src/App.css

@@ -5,20 +5,37 @@
 }
 
 .app-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 2rem;
+  background: #e6f2ff;
+  color: #333;
+  padding: 1rem 1.5rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
 }
 
 .app-header h1 {
   font-size: 2.5rem;
+  font-weight: bold;
+  margin: 0 0 0.5rem 0;
+}
+
+.header-datetime {
+  font-size: 0.95rem;
+  font-weight: bold;
   margin-bottom: 0.5rem;
 }
 
-.last-update {
+.header-spacer {
+  height: 0.5rem;
+}
+
+.header-coordinates {
   font-size: 0.9rem;
-  opacity: 0.9;
+  font-weight: bold;
+}
+
+.header-astro {
+  font-size: 0.85rem;
+  font-weight: bold;
 }
 
 .app-main {

frontend/src/App.jsx

@@ -38,15 +38,35 @@ function App() {
     )
   }
 
+  // Aktuelle Zeit formatieren
+  const now = new Date()
+  const dateStr = now.toLocaleDateString('de-DE', { 
+    weekday: 'long', 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  })
+  const timeStr = now.toLocaleTimeString('de-DE', { 
+    hour: '2-digit', 
+    minute: '2-digit' 
+  })
+
+  // TODO: Sonnenauf-/untergang und Mondphase berechnen
+  // Aktuell Platzhalter - benötigt Bibliothek wie 'suncalc'
+  const sunrise = "06:45"
+  const sunset = "18:30"
+  const moonPhase = "abnehmend 50%"
+
   return (
     <div className="app">
       <header className="app-header">
-        <h1>🌤️ Wetterstation</h1>
-        {lastUpdate && (
-          <p className="last-update">
-            Letzte Aktualisierung: {lastUpdate.toLocaleTimeString('de-DE')}
-          </p>
-        )}
+        <h1>Aktuelle Wetterdaten</h1>
+        <div className="header-datetime">{dateStr} - {timeStr} Uhr</div>
+        <div className="header-spacer"></div>
+        <div className="header-coordinates">48.6 N - 9.6 E - 574 m NN</div>
+        <div className="header-astro">
+          Sonnen-Aufgang: {sunrise} - Untergang: {sunset} &nbsp;&nbsp; Mond-Phase: {moonPhase}
+        </div>
       </header>
       
       <main className="app-main">

frontend/src/components/WeatherDashboard.jsx

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  TimeScale,
   PointElement,
   LineElement,
   Title,
@@ -10,6 +11,7 @@ import {
   Legend,
   Filler
 } from 'chart.js'
+import 'chartjs-adapter-date-fns'
 import { Line } from 'react-chartjs-2'
 import { format } from 'date-fns'
 import { de } from 'date-fns/locale'
@@ -18,6 +20,7 @@ import './WeatherDashboard.css'
 ChartJS.register(
   CategoryScale,
   LinearScale,
+  TimeScale,
   PointElement,
   LineElement,
   Title,
@@ -70,10 +73,40 @@ const WeatherDashboard = ({ data }) => {
     scales: {
       x: {
         grid: {
-          display: false,
+          display: true,
+          color: 'rgba(0, 0, 0, 0.1)',
         },
         ticks: {
-          maxTicksLimit: 12,
+          type: 'time',
+          time: {
+            unit: 'hour',
+            stepSize: 4
+          },
+          ticks: {
+            autoSkip: false
+          }
+/*         
+          maxRotation: 0,
+          autoSkip: false,
+          callback: function(value, index) {
+            if (sortedData.length === 0) return ''
+            
+            const date = new Date(sortedData[index]?.datetime)
+            const hours = date.getHours()
+            const minutes = date.getMinutes()
+            
+            // Berechne die nächste 4-Stunden-Zeit
+            const nearestFourHour = Math.round(hours / 4) * 4
+            
+            // Wenn die Stunde durch 4 teilbar ist UND die Minuten <= 2 sind (also 00:00, 00:05 zählen),
+            // dann ist dies der Datenpunkt, der der 4-Stunden-Zeit am nächsten liegt
+            if (hours % 4 === 0 && minutes <= 2) {
+              return format(new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, 0), 'HH:mm', { locale: de })
+            }
+            
+            return ''
+          }
+*/            
         }        
       },
       y: {