REST API-Nutzung wird im Dashboard ausgewertet und dokumentiert

templates/stats_dashboard.html

@@ -27,9 +27,16 @@
         <div class="chart-container">
             <canvas id="funcChart" width="400" height="220"></canvas>
         </div>
+        {% if api_counts and api_counts|length > 0 %}
+        <div class="chart-container">
+            <canvas id="apiChart" width="400" height="220"></canvas>
+        </div>
+        {% endif %}
+        <pre style="background:#f3f4f6; color:#334155; padding:0.5em; border-radius:6px; font-size:0.9em;">API-Counts: {{ api_counts|tojson }}</pre>
         <a href="/" style="color:#2563eb;">Zurück zur App</a>
     </div>
-    <script>
+    <script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', function() {
         // Impressions pro Tag
         const imprData = {{ impressions_per_day|tojson }};
         const imprLabels = Object.keys(imprData);
@@ -75,6 +82,28 @@
                 }
             }
         });
+        // API-Nutzung
+        const apiCounts = {{ api_counts|tojson }};
+        if (Object.keys(apiCounts).length > 0 && document.getElementById('apiChart')) {
+            new Chart(document.getElementById('apiChart').getContext('2d'), {
+                type: 'bar',
+                data: {
+                    labels: Object.keys(apiCounts),
+                    datasets: [{
+                        label: 'API-Aufrufe nach Endpunkt',
+                        data: Object.values(apiCounts),
+                        backgroundColor: '#f59e42',
+                    }]
+                },
+                options: {
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        y: { beginAtZero: true, ticks: { stepSize: 1 } }
+                    }
+                }
+            });
+        }
+    });
     </script>
 </body>
 </html>