wetterstation_python/static/js/app.js

let currentPeriod = 'day';
const DEFAULT_CHART_HEIGHT = 360;
const POLAR_CHART_HEIGHT = 420;

// HighCharts globale Einstellungen
Highcharts.setOptions({
    lang: {
        months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
                 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
        shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
        weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
        shortWeekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
    }
});

function switchPeriod(period) {
    currentPeriod = period;
    
    // Tab-Status aktualisieren
    document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
    });
    event.target.classList.add('active');
    
    loadData();
}

function loadData() {
    document.getElementById('loading').style.display = 'block';
    document.getElementById('charts').style.display = 'none';
    
    fetch(`/api/data/${currentPeriod}`)
        .then(response => response.json())
        .then(data => {
            renderCharts(data);
            document.getElementById('loading').style.display = 'none';
            document.getElementById('charts').style.display = 'grid';
        })
        .catch(error => {
            console.error('Fehler beim Laden:', error);
            document.getElementById('loading').innerHTML = 'Fehler beim Laden der Daten';
        });
}

function renderCharts(apiData) {
    const data = apiData.data;
    const rainData = apiData.rain_hourly;
    
    // Konvertiere Timestamps in Millisekunden
    const timestamps = data.map(d => d.dateTime)
    const rainTimestamps = rainData.map(d => new Date(d.hour).getTime())
    
    // Berechne Zeitbereich für die Achsen
    const minTime = Math.min(...timestamps, ...rainTimestamps);
    const maxTime = Math.max(...timestamps, ...rainTimestamps);
    
    // 1-Stunden-Intervalle für die Achsen-Labels (3600000 ms = 1 Stunde)
    const ONE_HOUR = 3600000;
    const FOUR_HOURS = ONE_HOUR * 4;
    
    // Temperatur (Fahrenheit -> Celsius umrechnen)
    Highcharts.chart('temp-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '🌡️ Temperatur (°C)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS,
            gridLineWidth: 1
        },
        yAxis: { title: { text: '°C' } },
        legend: { enabled: true },
        series: [{
            name: 'Temperatur',
            data: data.map((d, i) => [d.dateTime*1000, (d.outTemp - 32) * 5/9]),
            color: '#ff6b6b',
            lineWidth: 2
        }],
        credits: { enabled: false }
    });
    
    // Luftfeuchtigkeit
    Highcharts.chart('humidity-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '💧 Luftfeuchtigkeit (%)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS,
            gridLineWidth: 1
        },
        yAxis: { title: { text: '%' } },
        legend: { enabled: true },
        series: [{
            name: 'Luftfeuchtigkeit',
            data: data.map((d, i) => [d.dateTime*1000, d.outHumidity]),
            color: '#4ecdc4',
            lineWidth: 2
        }],
        credits: { enabled: false }
    });
    
    // Luftdruck (inHg -> hPa umrechnen)
    Highcharts.chart('pressure-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '🎈 Luftdruck (hPa)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS,
            gridLineWidth: 1
        },
        yAxis: { title: { text: 'hPa' } },
        legend: { enabled: true },
        series: [{
            name: 'Luftdruck',
            data: data.map((d, i) => [d.dateTime*1000, d.barometer * 33.8639]),
            color: '#95e1d3',
            lineWidth: 2
        }],
        credits: { enabled: false }
    });
    
    // Regenmenge pro Stunde
    Highcharts.chart('rain-chart', {
        chart: { type: 'column', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '🌧️ Regenmenge pro Stunde (mm)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS,
            gridLineWidth: 1
        },
        yAxis: { title: { text: 'mm' } },
        legend: { enabled: false },
        series: [{
            name: 'Regen',
            data: rainData.map((d, i) => [d.dateTime*1000, d.rain]),
            color: '#3498db'
        }],
        credits: { enabled: false }
    });
    
    // Windgeschwindigkeit (mph -> km/h umrechnen)
    Highcharts.chart('wind-speed-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '💨 Windgeschwindigkeit (km/h)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS,
            gridLineWidth: 1
        },
        yAxis: { title: { text: 'km/h' } },
        legend: { enabled: true },
        series: [{
            name: 'Windgeschwindigkeit',
            data: data.map((d, i) => [d.dateTime*1000, d.windSpeed * 1.60934]),
            color: 'blue',
            lineWidth: 2
        }, {
            name: 'Böen',
            data: data.map((d, i) => [d.dateTime*1000, d.windGust * 1.60934]),
            color: 'red',
            lineWidth: 2,
        }],
        credits: { enabled: false }
    });
    
    // Windrichtung
    Highcharts.chart('wind-dir-chart', {
        chart: { type: 'scatter', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '🧭 Windrichtung (°)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS,
            gridLineWidth: 1
        },
        yAxis: { 
            title: { text: 'Richtung (°)' },
            min: 0,
            max: 360,
//            tickPositions: [0, 90, 180, 270, 360]
            tickInterval: 90,
                labels: {
                    formatter: function() {
                        // Windrichtungen zuordnen
                        const directions = {
                            0: 'Nord',
                            90: 'Ost',
                            180: 'Süd',
                            270: 'West',
                            360: 'Nord'
                        };
                        return directions[this.value] || this.value + '°';
                    }
                }
        },
        legend: { enabled: true },
        series: [{
            name: 'Windrichtung',
            data: data.map((d, i) => [d.dateTime*1000, d.windDir || 0]),
            color: '#f39c12',
            marker: {
                radius: 2
            }
//            lineWidth: 2
        }],
        credits: { enabled: false }
    });
}

// Initiales Laden
loadData();

// Auto-Refresh alle 5 Minuten
setInterval(loadData, 5 * 60 * 1000);