(Near) realtime update of statistics charts

1 files changed, 12 insertions, 2 deletions

diff --git a/src/main/resources/templates/statistics.html b/src/main/resources/templates/statistics.html
index 3f2a11b..007303e 100644
--- a/src/main/resources/templates/statistics.html
+++ b/src/main/resources/templates/statistics.html
@@ -17,8 +17,18 @@
     <script th:src="@{/echarts.min.js}"></script>
     <script th:src="@{/scripts.js}"></script>
     <script>
-        drawPieChart('statistics/requeststates', 'piechart', 'Statusverteilung der Anfragen');
-        drawBarChart('statistics/requestslastmonth', 'barchart', 'Anfragen des letzten Monats');
+        window.onload = () => {
+            drawPieChart('statistics/requeststates', 'piechart', 'Statusverteilung aller Anfragen');
+            drawBarChart('statistics/requestslastmonth', 'barchart', 'Anfragen der letzten 30 Tage');
+
+            const eventSource = new EventSource('statistics/events');
+            eventSource.addEventListener('requeststates', event => {
+                drawPieChart('statistics/requeststates', 'piechart', 'Statusverteilung aller Anfragen', JSON.parse(event.data));
+            });
+            eventSource.addEventListener('requestslastmonth', event => {
+                drawBarChart('statistics/requestslastmonth', 'barchart', 'Anfragen des letzten Monats', JSON.parse(event.data));
+            });
+        }
     </script>
 </body>
 </html>
\ No newline at end of file