From e5fbc14a34f4fd4bbbb0004ee9fe7c950c287294 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Sat, 2 Aug 2025 14:25:07 +0200
Subject: [PATCH] =?UTF-8?q?Dashboard=20erweitert:=20Toggle=20zwischen=20Wo?=
 =?UTF-8?q?chen-=20und=2024-Stunden-Verlauf=20f=C3=BCr=20alle=20Charts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.py                         |  45 +++++-
 templates/stats_dashboard.html | 265 ++++++++++++++++++++++++++-------
 2 files changed, 250 insertions(+), 60 deletions(-)

diff --git a/app.py b/app.py
index 83a68ba..105fa98 100644
--- a/app.py
+++ b/app.py
@@ -237,26 +237,63 @@ def index():
 def parse_log_stats(log_path):
     pageviews = 0
     func_counts = {}
+    func_counts_hourly = {}
     impressions_per_day = {}
+    impressions_per_hour = {}
     api_counts = {}
+    api_counts_hourly = {}
     if os.path.exists(log_path):
         with open(log_path, encoding='utf-8') as f:
             for line in f:
                 if 'PAGEVIEW' in line:
                     pageviews += 1
                     try:
-                        date = line[:10]
+                        # Parse timestamp (format: YYYY-MM-DDTHH:MM:SS)
+                        timestamp = line[:19]  # First 19 chars for YYYY-MM-DDTHH:MM:SS
+                        date = timestamp[:10]  # YYYY-MM-DD
+                        hour = timestamp[11:13]  # HH
+                        
                         if len(date) == 10 and date[4] == '-' and date[7] == '-':
                             impressions_per_day[date] = impressions_per_day.get(date, 0) + 1
+                            
+                        if len(hour) == 2 and hour.isdigit():
+                            hour_key = f"{date} {hour}:00"
+                            impressions_per_hour[hour_key] = impressions_per_hour.get(hour_key, 0) + 1
                     except Exception:
                         pass
                 elif 'FUNC:' in line:
                     func = line.split('FUNC:')[1].strip()
                     func_counts[func] = func_counts.get(func, 0) + 1
+                    
+                    # Stündliche Funktionsaufrufe
+                    try:
+                        timestamp = line[:19]
+                        date = timestamp[:10]
+                        hour = timestamp[11:13]
+                        if len(hour) == 2 and hour.isdigit():
+                            hour_key = f"{date} {hour}:00"
+                            if hour_key not in func_counts_hourly:
+                                func_counts_hourly[hour_key] = {}
+                            func_counts_hourly[hour_key][func] = func_counts_hourly[hour_key].get(func, 0) + 1
+                    except Exception:
+                        pass
                 elif 'FUNC_API:' in line:
                     api = line.split('FUNC_API:')[1].strip()
                     api_counts[api] = api_counts.get(api, 0) + 1
-    return pageviews, func_counts, impressions_per_day, api_counts
+                    
+                    # Stündliche API-Aufrufe
+                    try:
+                        timestamp = line[:19]
+                        date = timestamp[:10]
+                        hour = timestamp[11:13]
+                        if len(hour) == 2 and hour.isdigit():
+                            hour_key = f"{date} {hour}:00"
+                            if hour_key not in api_counts_hourly:
+                                api_counts_hourly[hour_key] = {}
+                            api_counts_hourly[hour_key][api] = api_counts_hourly[hour_key].get(api, 0) + 1
+                    except Exception:
+                        pass
+    return pageviews, func_counts, func_counts_hourly, impressions_per_day, impressions_per_hour, api_counts, api_counts_hourly
 
 @app.route('/stats', methods=['GET', 'POST'])
 def stats():
@@ -270,8 +307,8 @@ def stats():
                 return render_template('stats_login.html', error='Falsches Passwort!')
         return render_template('stats_login.html', error=None)
     log_path = os.path.join('log', 'pageviews.log')
-    pageviews, func_counts, impressions_per_day, api_counts = parse_log_stats(log_path)
-    return render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, impressions_per_day=impressions_per_day, api_counts=api_counts)
+    pageviews, func_counts, func_counts_hourly, impressions_per_day, impressions_per_hour, api_counts, api_counts_hourly = parse_log_stats(log_path)
+    return render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, func_counts_hourly=func_counts_hourly, impressions_per_day=impressions_per_day, impressions_per_hour=impressions_per_hour, api_counts=api_counts, api_counts_hourly=api_counts_hourly)
 
 # --- REST API ---
 def log_api_usage(api_name):
diff --git a/templates/stats_dashboard.html b/templates/stats_dashboard.html
index bd06df4..d280238 100644
--- a/templates/stats_dashboard.html
+++ b/templates/stats_dashboard.html
@@ -19,6 +19,32 @@
         .stats-label { color: #64748b; }
         .stats-value { font-size: 1.5em; font-weight: bold; }
         .chart-container { margin: 2em 0; }
+        .toggle-container { 
+            display: flex; 
+            justify-content: center; 
+            margin-bottom: 1.5em; 
+            gap: 0.5em; 
+        }
+        .toggle-btn { 
+            padding: 0.5em 1em; 
+            border: 1px solid #d1d5db; 
+            background: #f9fafb; 
+            color: #6b7280; 
+            border-radius: 6px; 
+            cursor: pointer; 
+            transition: all 0.2s; 
+        }
+        .toggle-btn.active { 
+            background: #2563eb; 
+            color: white; 
+            border-color: #2563eb; 
+        }
+        .toggle-btn:hover { 
+            background: #e5e7eb; 
+        }
+        .toggle-btn.active:hover { 
+            background: #1d4ed8; 
+        }
     </style>
 </head>
 <body>
@@ -28,6 +54,12 @@
             <div class="stats-label">Gesamt-Pageviews (7 Tage):</div>
             <div class="stats-value">{{ pageviews }}</div>
         </div>
+        
+        <div class="toggle-container">
+            <button class="toggle-btn active" data-period="week">Wochenverlauf</button>
+            <button class="toggle-btn" data-period="day">24-Stunden-Verlauf</button>
+        </div>
+        
         <div class="chart-container">
             <canvas id="imprChart" width="400" height="180"></canvas>
         </div>
@@ -43,75 +75,196 @@
     </div>
     <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function() {
-        // Impressions pro Tag
-        // eslint-disable-next-line
-        const imprData = {{ impressions_per_day|tojson }};
-        const imprLabels = Object.keys(imprData);
-        const imprCounts = Object.values(imprData);
-        new Chart(document.getElementById('imprChart').getContext('2d'), {
-            type: 'line',
-            data: {
-                labels: imprLabels,
-                datasets: [{
-                    label: 'Impressions/Tag',
-                    data: imprCounts,
-                    borderColor: '#059669',
-                    backgroundColor: 'rgba(5,150,105,0.1)',
-                    tension: 0.2,
-                    fill: true
-                }]
-            },
-            options: {
-                plugins: { legend: { display: true } },
-                scales: {
-                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
-                }
-            }
+        // Daten für verschiedene Zeiträume
+        const weekData = {{ impressions_per_day|tojson }};
+        const dayData = {{ impressions_per_hour|tojson }};
+        const weekFuncData = {{ func_counts|tojson }};
+        const dayFuncData = {{ func_counts_hourly|tojson }};
+        const weekApiData = {{ api_counts|tojson }};
+        const dayApiData = {{ api_counts_hourly|tojson }};
+        
+        let currentPeriod = 'week';
+        let currentImprChart = null;
+        let currentFuncChart = null;
+        let currentApiChart = null;
+        
+        // Toggle-Buttons Event Listener
+        document.querySelectorAll('.toggle-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                // Aktiven Button aktualisieren
+                document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                
+                // Zeitraum wechseln
+                currentPeriod = this.dataset.period;
+                updateAllCharts();
+            });
         });
-        // Funktionsaufrufe
-        // eslint-disable-next-line
-        const funcCounts = {{ func_counts|tojson }};
-        const labels = Object.keys(funcCounts);
-        const data = Object.values(funcCounts);
-        new Chart(document.getElementById('funcChart').getContext('2d'), {
-            type: 'bar',
-            data: {
-                labels: labels,
-                datasets: [{
-                    label: 'Funktionsaufrufe',
-                    data: data,
-                    backgroundColor: '#2563eb',
-                }]
-            },
-            options: {
-                plugins: { legend: { display: false } },
-                scales: {
-                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
-                }
+        
+        function updateImpressionsChart() {
+            const ctx = document.getElementById('imprChart').getContext('2d');
+            
+            // Bestehenden Chart zerstören
+            if (currentImprChart) {
+                currentImprChart.destroy();
             }
-        });
-        // API-Nutzung
-        // eslint-disable-next-line
-        const apiCounts = {{ api_counts|tojson }};
-        if (Object.keys(apiCounts).length > 0 && document.getElementById('apiChart')) {
-            new Chart(document.getElementById('apiChart').getContext('2d'), {
-                type: 'bar',
+            
+            let data, labels, counts;
+            
+            if (currentPeriod === 'week') {
+                data = weekData;
+                labels = Object.keys(data);
+                counts = Object.values(data);
+            } else {
+                data = dayData;
+                labels = Object.keys(data);
+                counts = Object.values(data);
+            }
+            
+            currentImprChart = new Chart(ctx, {
+                type: 'line',
                 data: {
-                    labels: Object.keys(apiCounts),
+                    labels: labels,
                     datasets: [{
-                        label: 'API-Aufrufe nach Endpunkt',
-                        data: Object.values(apiCounts),
-                        backgroundColor: '#f59e42',
+                        label: currentPeriod === 'week' ? 'Impressions/Tag' : 'Impressions/Stunde',
+                        data: counts,
+                        borderColor: '#059669',
+                        backgroundColor: 'rgba(5,150,105,0.1)',
+                        tension: 0.2,
+                        fill: true
                     }]
                 },
                 options: {
-                    plugins: { legend: { display: false } },
+                    plugins: { 
+                        legend: { display: true },
+                        title: {
+                            display: true,
+                            text: currentPeriod === 'week' ? 'Wochenverlauf' : '24-Stunden-Verlauf'
+                        }
+                    },
                     scales: {
                         y: { beginAtZero: true, ticks: { stepSize: 1 } }
                     }
                 }
             });
         }
+        
+        function updateFunctionChart() {
+            const ctx = document.getElementById('funcChart').getContext('2d');
+            
+            // Bestehenden Chart zerstören
+            if (currentFuncChart) {
+                currentFuncChart.destroy();
+            }
+            
+            let data, labels, counts;
+            
+            if (currentPeriod === 'week') {
+                data = weekFuncData;
+                labels = Object.keys(data);
+                counts = Object.values(data);
+            } else {
+                // Für stündliche Daten: Summe aller Stunden für jede Funktion
+                const aggregatedData = {};
+                Object.values(dayFuncData).forEach(hourData => {
+                    Object.keys(hourData).forEach(func => {
+                        aggregatedData[func] = (aggregatedData[func] || 0) + hourData[func];
+                    });
+                });
+                data = aggregatedData;
+                labels = Object.keys(data);
+                counts = Object.values(data);
+            }
+            
+            currentFuncChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Funktionsaufrufe',
+                        data: counts,
+                        backgroundColor: '#2563eb',
+                    }]
+                },
+                options: {
+                    plugins: { 
+                        legend: { display: false },
+                        title: {
+                            display: true,
+                            text: currentPeriod === 'week' ? 'Funktionsaufrufe (Woche)' : 'Funktionsaufrufe (24h)'
+                        }
+                    },
+                    scales: {
+                        y: { beginAtZero: true, ticks: { stepSize: 1 } }
+                    }
+                }
+            });
+        }
+        
+        function updateApiChart() {
+            const apiChartElement = document.getElementById('apiChart');
+            if (!apiChartElement) return;
+            
+            const ctx = apiChartElement.getContext('2d');
+            
+            // Bestehenden Chart zerstören
+            if (currentApiChart) {
+                currentApiChart.destroy();
+            }
+            
+            let data, labels, counts;
+            
+            if (currentPeriod === 'week') {
+                data = weekApiData;
+            } else {
+                // Für stündliche Daten: Summe aller Stunden für jede API
+                const aggregatedData = {};
+                Object.values(dayApiData).forEach(hourData => {
+                    Object.keys(hourData).forEach(api => {
+                        aggregatedData[api] = (aggregatedData[api] || 0) + hourData[api];
+                    });
+                });
+                data = aggregatedData;
+            }
+            
+            if (Object.keys(data).length === 0) return;
+            
+            labels = Object.keys(data);
+            counts = Object.values(data);
+            
+            currentApiChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'API-Aufrufe nach Endpunkt',
+                        data: counts,
+                        backgroundColor: '#f59e42',
+                    }]
+                },
+                options: {
+                    plugins: { 
+                        legend: { display: false },
+                        title: {
+                            display: true,
+                            text: currentPeriod === 'week' ? 'API-Nutzung (Woche)' : 'API-Nutzung (24h)'
+                        }
+                    },
+                    scales: {
+                        y: { beginAtZero: true, ticks: { stepSize: 1 } }
+                    }
+                }
+            });
+        }
+        
+        function updateAllCharts() {
+            updateImpressionsChart();
+            updateFunctionChart();
+            updateApiChart();
+        }
+        
+        // Initial Charts erstellen
+        updateAllCharts();
     });
     </script>
 </body>