V 1.6.1 fix: X-Achsen-Beschriftung verbessert (24h/7d/30d/365d)

24h: Mitternacht als DD.MM (blau), sonst HH:MM per tickPositioner.
7d: nur bei 0-Uhr beschriftet, waagerecht. 30d: alle 5 Tage.
365d: nur Monatsnummer (MM), monatliche Ticks.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wetterstation-frontend",
   "private": true,
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/WeatherDashboard.jsx

@@ -291,30 +291,93 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
       }
     } else {
       // Vordefinierte Bereiche
+      const pad = n => String(n).padStart(2, '0')
+      const fmtDate = d => `${pad(d.getDate())}.${pad(d.getMonth() + 1)}`
+      const fmtTime = d => `${pad(d.getHours())}:${pad(d.getMinutes())}`
+
       switch (timeRange) {
         case '24h':
-          xAxisConfig.tickInterval = 4 * 3600 * 1000 // 4 Stunden
+          xAxisConfig.tickPositioner = function() {
-          xAxisConfig.labels = { format: '{value:%H:%M}', align: 'center' }
+            const positions = []
+            const d = new Date(this.min)
+            d.setMinutes(0, 0, 0)
+            const h = d.getHours()
+            const nextH = Math.ceil(h / 4) * 4
+            if (nextH >= 24) { d.setDate(d.getDate() + 1); d.setHours(0, 0, 0, 0) }
+            else d.setHours(nextH, 0, 0, 0)
+            while (d.getTime() <= this.max) {
+              positions.push(d.getTime())
+              d.setHours(d.getHours() + 4, 0, 0, 0)
+            }
+            return positions
+          }
+          xAxisConfig.labels = {
+            rotation: 0, align: 'center', useHTML: true,
+            formatter: function() {
+              const d = new Date(this.value)
+              return d.getHours() === 0 && d.getMinutes() === 0
+                ? `<span style="color:#3b82f6;font-weight:bold">${fmtDate(d)}</span>`
+                : fmtTime(d)
+            }
+          }
           xAxisMin = now - 24 * 3600 * 1000
           xAxisMax = now
           tooltipDateFormat = '%d.%m.%Y %H:%M'
           break
         case '7d':
-          xAxisConfig.labels = { format: '{value:%d.%m}', align: 'center' }
+          xAxisConfig.tickPositioner = function() {
+            const positions = []
+            const d = new Date(this.min)
+            d.setHours(0, 0, 0, 0)
+            while (d.getTime() <= this.max) {
+              positions.push(d.getTime())
+              d.setDate(d.getDate() + 1)
+            }
+            return positions
+          }
+          xAxisConfig.labels = {
+            rotation: 0, align: 'center',
+            formatter: function() { return fmtDate(new Date(this.value)) }
+          }
           xAxisMin = now - 7 * 24 * 3600 * 1000
           xAxisMax = now
           tooltipDateFormat = '%d.%m.%Y'
           break
         case '30d':
-          xAxisConfig.labels = { format: '{value:%d.%m}', align: 'center' }
+          xAxisConfig.tickPositioner = function() {
+            const positions = []
+            const d = new Date(this.min)
+            d.setHours(0, 0, 0, 0)
+            while (d.getTime() <= this.max) {
+              positions.push(d.getTime())
+              d.setDate(d.getDate() + 5)
+            }
+            return positions
+          }
+          xAxisConfig.labels = {
+            rotation: 0, align: 'center',
+            formatter: function() { return fmtDate(new Date(this.value)) }
+          }
           xAxisMin = now - 30 * 24 * 3600 * 1000
           xAxisMax = now
           tooltipDateFormat = '%d.%m.%Y'
           break
         case '365d':
-          xAxisConfig.labels = { format: '{value:%b %Y}', align: 'center' }
+          xAxisConfig.tickPositioner = function() {
-          tooltipDateFormat = '%b %Y'
+            const positions = []
-          // Bei 365d: Min/Max aus vorhandenen Daten berechnen
+            const d = new Date(this.min)
+            d.setDate(1); d.setHours(0, 0, 0, 0)
+            while (d.getTime() <= this.max) {
+              positions.push(d.getTime())
+              d.setMonth(d.getMonth() + 1)
+            }
+            return positions
+          }
+          xAxisConfig.labels = {
+            rotation: 0, align: 'center',
+            formatter: function() { return pad(new Date(this.value).getMonth() + 1) }
+          }
+          tooltipDateFormat = '%d.%m.%Y'
           if (sortedData.length > 0) {
             xAxisMin = new Date(sortedData[0].datetime).getTime()
             xAxisMax = new Date(sortedData[sortedData.length - 1].datetime).getTime()
@@ -324,8 +387,27 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
           }
           break
         default:
-          xAxisConfig.tickInterval = 4 * 3600 * 1000
+          xAxisConfig.tickPositioner = function() {
-          xAxisConfig.labels = { format: '{value:%H:%M}', align: 'center' }
+            const positions = []
+            const d = new Date(this.min)
+            d.setMinutes(0, 0, 0)
+            const h = d.getHours()
+            const nextH = Math.ceil(h / 4) * 4
+            if (nextH >= 24) { d.setDate(d.getDate() + 1); d.setHours(0, 0, 0, 0) }
+            else d.setHours(nextH, 0, 0, 0)
+            while (d.getTime() <= this.max) {
+              positions.push(d.getTime())
+              d.setHours(d.getHours() + 4, 0, 0, 0)
+            }
+            return positions
+          }
+          xAxisConfig.labels = {
+            rotation: 0, align: 'center',
+            formatter: function() {
+              const d = new Date(this.value)
+              return d.getHours() === 0 && d.getMinutes() === 0 ? fmtDate(d) : fmtTime(d)
+            }
+          }
           xAxisMin = now - 24 * 3600 * 1000
           xAxisMax = now
           tooltipDateFormat = '%d.%m.%Y %H:%M'