MAJOR REFACTOR P2

2025-10-30 11:19:58 +00:00 · 2025-09-05 20:41:37 +02:00
parent 4cfd5b2dbe
commit 12af4e7bbe
19 changed files with 1 additions and 1 deletions
--- a/app/flask_app/templates/chart.html
+++ b/app/flask_app/templates/chart.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Line Chart</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
+    <script src="https://www.chartjs.org/docs/latest/samples/utils.js"></script>
+</head>
+
+<body>
+
+    <canvas id="myChart"></canvas>
+
+</body>
+
+<script>
+
+    const chartDates = ({{ dates | safe }}).map(dt => new Date(dt));
+    const data = {
+        labels: chartDates,
+        datasets: [{
+            label: 'Ping',
+            data: {{ values }},
+        }]
+    };
+
+    const ctx = document.getElementById('myChart').getContext('2d');
+    // Current time in UTC
+    const nowUTC = new Date();
+
+    // One hour ago in UTC
+    const oneDayAgoUTC = new Date(nowUTC.getTime() - 24 * 60 * 60 * 1000);
+    const min = "{{ min }}"
+    const max = "{{ max }}"
+    new Chart(ctx, {
+        type: 'line',
+        data: data,
+        options: {
+            scales: {
+                x: {
+                    type: 'time', // Important for datetime axis
+                    time: {
+                        unit: 'hour',
+                        tooltipFormat: 'HH:mm:ss',
+                        displayFormats: {
+                            hour: 'HH:mm'
+                        }
+                    },
+                    min: min,
+                    max: max
+                }
+            }
+        }
+    });
+</script>
+
+</html>