Dashboard erweitert: Toggle zwischen Wochen- und 24-Stunden-Verlauf für alle Charts

- Schließen-Button ist jetzt 'floating' mit position: fixed
- Button hat Hintergrund, Rahmen und Schatten für bessere Sichtbarkeit
- Alle Texte im Help Modal verwenden jetzt Übersetzungsfunktionen
- Vollständige mehrsprachige Unterstützung (Deutsch/Englisch)
- Bessere mobile Darstellung ohne Überschneidungen

README.md

@@ -472,22 +472,23 @@ Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Seh
 
 ### Code Statistik
 
-cloc|github.com/AlDanial/cloc v 2.06  T=0.08 s (269.8 files/s, 57268.4 lines/s)
+cloc|github.com/AlDanial/cloc v 2.06  T=0.17 s (146.7 files/s, 35235.5 lines/s)
 --- | ---
 
 Language|files|blank|comment|code
 :-------|-------:|-------:|-------:|-------:
-HTML|8|36|6|1998
-Python|2|53|57|614
+HTML|8|48|6|2092
+Python|2|59|68|690
 JavaScript|2|95|87|571
-Markdown|2|139|0|360
+Markdown|3|176|0|493
+PO File|2|234|240|492
 JSON|3|0|0|243
 CSS|1|186|3|188
 SVG|2|0|0|14
 Dockerfile|1|5|6|8
 DOS Batch|1|0|0|1
 --------|--------|--------|--------|--------
-SUM:|22|514|159|3997
+SUM:|25|803|410|4792
 
 ## Lizenz
 

app.py

@@ -20,7 +20,7 @@ app.config['BABEL_TRANSLATION_DIRECTORIES'] = 'translations'
 babel = Babel()
 
 # Version der App
-APP_VERSION = "1.4.0"
+APP_VERSION = "1.4.6"
 
 # HTML-Template wird jetzt aus templates/index.html geladen
 
@@ -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):

cookies.txt

@@ -1,5 +0,0 @@
-# Netscape HTTP Cookie File
-# https://curl.se/docs/http-cookies.html
-# This file was generated by libcurl! Edit at your own risk.
-
-#HttpOnly_localhost	FALSE	/	FALSE	0	session	eyJsYW5ndWFnZSI6ImVuIn0.aIzL2Q.DZtPH-UmM3muNC8RZypEbL29jCg

templates/index.html

@@ -40,6 +40,11 @@
 * {
     box-sizing: border-box;
 }
+
+html {
+    overflow-x: hidden;
+    width: 100%;
+}
 body {
     background: var(--background);
     color: var(--text);
@@ -47,7 +52,10 @@ body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
+    overflow-y: auto;
     box-sizing: border-box;
+    min-height: 100vh;
+    width: 100%;
 }
 .container {
     max-width: 480px;
@@ -60,10 +68,11 @@ body {
     border: 1px solid var(--border);
     position: relative;
     box-sizing: border-box;
+    overflow: hidden;
 }
 .help-button-container {
     position: absolute;
-    top: 1.5em;
+    top: 1em;
     right: 2em;
     z-index: 10;
 }
@@ -145,8 +154,9 @@ body {
     padding: 2em;
     max-width: 90%;
     width: 90%;
-    max-height: 90%;
+    max-height: 90vh;
     overflow-y: auto;
+    overflow-x: hidden;
     position: relative;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     margin: 0 auto;
@@ -155,17 +165,17 @@ body {
     box-sizing: border-box;
 }
 .modal-close {
-    position: absolute;
+    position: fixed;
     top: 1em;
     right: 1em;
-    background: none;
-    border: none;
+    background: rgba(255, 255, 255, 0.95);
+    border: 2px solid var(--border);
     font-size: 1.5em;
     cursor: pointer;
     color: var(--text);
     padding: 0.5em;
     border-radius: 50%;
-    transition: background 0.2s;
+    transition: all 0.2s;
     width: 2.5em;
     height: 2.5em;
     display: flex;
@@ -173,6 +183,8 @@ body {
     justify-content: center;
     min-width: 44px;
     min-height: 44px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1001;
 }
 .modal-close:hover {
     background: var(--border);
@@ -345,6 +357,7 @@ button:focus, .accordion-header:focus {
     /* Layout-Shift-Prävention */
     min-height: 200px;
     contain: layout style paint;
+    width: 100%;
 }
 .accordion-item + .accordion-item {
     border-top: 1px solid var(--border);
@@ -374,6 +387,7 @@ button:focus, .accordion-header:focus {
     overflow: hidden;
     transition: max-height 0.3s ease-out, padding 0.3s ease-out;
     opacity: 0;
+    width: 100%;
 }
 .accordion-content.active {
     display: block;
@@ -459,6 +473,10 @@ button:focus, .accordion-header:focus {
         padding: 1.2em 0.7em 1em 0.7em;
         width: calc(100% - 2em);
         max-width: none;
+        overflow: hidden;
+    }
+    .header-section {
+        margin-top: 4.5em; /* Mehr Abstand für Sprachauswahl und Hilfe-Button */
     }
     h1 {
         font-size: 1.3em;
@@ -494,15 +512,38 @@ button:focus, .accordion-header:focus {
         margin: 1em;
         width: calc(100% - 2em);
         max-width: none;
+        max-height: 85vh;
         left: 0;
         transform: none;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    
+    .modal-close {
+        top: 0.8em;
+        right: 0.8em;
+        font-size: 1.3em;
+        width: 2.2em;
+        height: 2.2em;
+        min-width: 48px;
+        min-height: 48px;
+        background: rgba(255, 255, 255, 0.98);
+        border: 2px solid var(--border);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+    
+    .modal-content h1 {
+        margin-top: 0;
+        margin-bottom: 1em;
+        font-size: 1.2em;
+        line-height: 1.3;
     }
 }
 
 /* Sprachauswahl */
 .language-selector {
     position: absolute;
-    top: 1.5em;
+    top: 1em;
     left: 2em;
     z-index: 10;
 }
@@ -602,7 +643,11 @@ footer br + a {
         function changeLanguage(language) {
             // Speichere Sprache in localStorage (datenschutzfreundlich)
             localStorage.setItem('preferred_language', language);
-            window.location.href = '/set_language/' + language;
+            
+            // Erstelle neue URL mit korrektem lang-Parameter
+            const currentUrl = new URL(window.location.href);
+            currentUrl.searchParams.set('lang', language);
+            window.location.href = currentUrl.toString();
         }
         function openAccordion(idx) {
             const headers = document.querySelectorAll('.accordion-header');
@@ -776,7 +821,7 @@ footer br + a {
                 <option value="en" {% if get_locale() == 'en' %}selected{% endif %}>{{ _('English') }}</option>
             </select>
         </div>
-        <div style="text-align:center; margin-bottom:1.2em;">
+        <div class="header-section" style="text-align:center; margin-bottom:1.2em;">
             <div style="font-size:1.1em; font-style:italic; color:#475569;">{{ _('Elpatrons') }}</div>
             <h1 style="margin:0;">{{ _('Datumsrechner') }}</h1>
             <div style="font-size:0.9em; color:#1e293b; margin-top:0.3em;">
@@ -832,7 +877,7 @@ footer br + a {
                                 </select>
                             </label>
                         </fieldset>
-                        <button name="action" value="tage_werktage" type="submit">Berechnen</button>
+                        <button name="action" value="tage_werktage" type="submit">{{ _('Berechnen') }}</button>
                     </form>
                     {% if tage is not none %}
                         <div class="result" aria-live="polite">
@@ -988,7 +1033,7 @@ footer br + a {
     <!-- Help Modal Overlay -->
     <div id="helpModal" class="modal-overlay" role="dialog" aria-labelledby="help-title" aria-describedby="help-content">
         <div class="modal-content">
-            <button type="button" class="modal-close" onclick="hideHelp()" aria-label="Hilfe schließen">&times;</button>
+            <button type="button" class="modal-close" onclick="hideHelp()" aria-label="{{ _('Hilfe schließen') }}">&times;</button>
             <h1 id="help-title">{{ _('Was ist Elpatrons Datumsrechner?') }}</h1>
             
             <p>{{ _('Der Datumsrechner kann verschiedene Datumsberechnungen durchführen:') }}</p>
@@ -1004,34 +1049,34 @@ footer br + a {
                 <li>{{ _('Start-/Enddatum einer Kalenderwoche eines Jahres') }}</li>
             </ul>
             
-            <h2>Online Datumsrechner gibt es bereits in einer Vielzahl, warum also noch einer?</h2>
+            <h2>{{ _('Online Datumsrechner gibt es bereits in einer Vielzahl, warum also noch einer?') }}</h2>
             
-            <p>Aus zwei Gründen:</p>
+            <p>{{ _('Aus zwei Gründen:') }}</p>
             
             <ul>
-                <li>Finde mal einen Datumsrechner, der nicht vollkommen verseucht mit Werbung, Tracking und Cookies ist!</li>
-                <li>Das hat mich so geärgert, dass ich meinen eigenen programmiert habe.
+                <li>{{ _('Finde mal einen Datumsrechner, der nicht vollkommen verseucht mit Werbung, Tracking und Cookies ist!') }}</li>
+                <li>{{ _('Das hat mich so geärgert, dass ich meinen eigenen programmiert habe.') }}
                     <ul>
-                        <li>Genau genommen nicht ich selbst. Diese App wurde zum überwiegenden Teil von KI nach meinen Anweisungen entwickelt (Vibe Coding).</li>
+                        <li>{{ _('Genau genommen nicht ich selbst. Diese App wurde zum überwiegenden Teil von KI nach meinen Anweisungen entwickelt (Vibe Coding).') }}</li>
                     </ul>
                 </li>
             </ul>
             
-            <h2>Was du noch wissen solltest</h2>
+            <h2>{{ _('Was du noch wissen solltest') }}</h2>
             
             <ul>
-                <li>Ich habe versucht, die App möglichst barrierefrei zu gestalten, um Menschen mit Einschränkungen die Benutzung zu erleichtern.</li>
-                <li>Diese App schnüffelt dir nicht hinterher, sammelt keine persönlichen Daten und geht dir auch sonst (hoffentlich!) in keiner Weise auf die Nerven.</li>
-                <li>Den Quellcode dieser App habe ich auf <a href="https://codeberg.org/elpatron/datecalc" target="_blank">Codeberg</a> veröffentlicht, du kannst ihn einsehen, verändern oder damit deinen eigenen kleinen Datumsrechner betreiben.</li>
-                <li>Die App läuft auf meinem kleinen Home-Server und ist derzeit nicht für große Besucherzahlen ausgelegt.</li>
-                <li>Ich übernehme keine Gewähr für die Funktionalität und die Rechenergebnisse. Die KI, die das programmiert hat, übrigens auch nicht.</li>
-                <li>Falls du einen Fehler findest oder eine weitere Funktion wünschst, kannst du mir eine Mail schreiben (siehe Mailto Link in der Fußzeile)</li>
+                <li>{{ _('Ich habe versucht, die App möglichst barrierefrei zu gestalten, um Menschen mit Einschränkungen die Benutzung zu erleichtern.') }}</li>
+                <li>{{ _('Diese App schnüffelt dir nicht hinterher, sammelt keine persönlichen Daten und geht dir auch sonst (hoffentlich!) in keiner Weise auf die Nerven.') }}</li>
+                <li>{{ _('Den Quellcode dieser App habe ich auf') }} <a href="https://codeberg.org/elpatron/datecalc" target="_blank">Codeberg</a> {{ _('veröffentlicht, du kannst ihn einsehen, verändern oder damit deinen eigenen kleinen Datumsrechner betreiben.') }}</li>
+                <li>{{ _('Die App läuft auf meinem kleinen Home-Server und ist derzeit nicht für große Besucherzahlen ausgelegt.') }}</li>
+                <li>{{ _('Ich übernehme keine Gewähr für die Funktionalität und die Rechenergebnisse. Die KI, die das programmiert hat, übrigens auch nicht.') }}</li>
+                <li>{{ _('Falls du einen Fehler findest oder eine weitere Funktion wünschst, kannst du mir eine Mail schreiben (siehe Mailto Link in der Fußzeile)') }}</li>
             </ul>
             
-            <p><strong>Hab Spaß mit Elpatrons Datumsrechner! Dein M. Busche</strong></p>
+            <p><strong>{{ _('Hab Spaß mit Elpatrons Datumsrechner! Dein M. Busche') }}</strong></p>
         </div>
         <div id="help-content" class="sr-only">
-            Hilfe-Informationen für den Datumsrechner mit Erklärungen zu allen Funktionen
+            {{ _('Hilfe-Informationen für den Datumsrechner mit Erklärungen zu allen Funktionen') }}
         </div>
     </div>
     

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>