changed loss to a graph instead

2025-04-27 12:02:44 -04:00 · 2025-04-27 12:02:44 -04:00 · 8af477957c
commit 8af477957c
parent 19cac46c0c
1 changed files with 48 additions and 5 deletions
--- a/dashboard/templates/index.html
+++ b/dashboard/templates/index.html
@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="30">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <title>Ruby's Dashboard</title>
    <style>
        body {
@ -95,12 +96,54 @@

    <div class="section">
        <h2>📉 Recent Loss</h2>
-        <ul>
-            {% for loss in loss_data[-10:]|reverse %}
-                <li>{{ loss }}</li>
-            {% endfor %}
-        </ul>
+        <canvas id="lossChart" width="400" height="200"></canvas>
    </div>
+    <script>
+    const ctxLoss = document.getElementById('lossChart').getContext('2d');
+    
+    const lossData = {
+        labels: [
+            {% for entry in loss_data[-50:] %}
+                "{{ loop.index0 }}",
+            {% endfor %}
+        ],
+        datasets: [{
+            label: 'Loss',
+            data: [
+                {% for entry in loss_data[-50:] %}
+                    {{ entry }},
+                {% endfor %}
+            ],
+            fill: false,
+            borderColor: 'rgb(255, 99, 132)',
+            tension: 0.2
+        }]
+    };
+    
+    const lossChart = new Chart(ctxLoss, {
+        type: 'line',
+        data: lossData,
+        options: {
+            scales: {
+                x: {
+                    display: false  // hide x-axis ticks
+                },
+                y: {
+                    title: {
+                        display: true,
+                        text: 'Loss Value'
+                    },
+                    beginAtZero: false
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                }
+            }
+        }
+    });
+    </script>

 </body>
 </html>