From 9fbdf6f1167883711a9c3c4c83b50d8a161904fb Mon Sep 17 00:00:00 2001
From: Eduardo Silva <eduardo@eth0.com.br>
Date: Tue, 25 Feb 2025 18:32:35 -0300
Subject: [PATCH] chartjs better integration with peer list

---
 templates/wireguard/wireguard_peer_list.html | 49 +++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/templates/wireguard/wireguard_peer_list.html b/templates/wireguard/wireguard_peer_list.html
index f36b99b..cb7d92c 100644
--- a/templates/wireguard/wireguard_peer_list.html
+++ b/templates/wireguard/wireguard_peer_list.html
@@ -1,9 +1,13 @@
 {% extends "base.html" %}
+
 {% block page_custom_head %}
     <style>
         .peer-extra-info {
             display: none;
         }
+        .callout.position-relative {
+            padding: 0 !important;
+        }
     </style>
 {% endblock %}
 
@@ -26,14 +30,16 @@
                         <div class="row" style="padding-top: 15px">
                             {% for peer in peer_list %}
                                 <div class="col-md-6" id="peer-{{ peer.public_key }}" data-uuid="{{ peer.uuid }}">
-                                    <div class="callout">
-                                        <div class="d-flex justify-content-between align-items-start">
-                                            <h5>
-                                                <a href="#" onclick="openPeerModal('{{ peer.uuid }}');" style="text-decoration: none">
-                                                    {{ peer }}
-                                                </a>
-                                            </h5>
-                                            <span>
+                                    <div class="callout position-relative">
+                                        {% comment %}background: linear-gradient(to right, white 50%, transparent 50%);{% endcomment %}
+                                        <div class="position-absolute p-3 div-peer-text-information" style="top: 0; left: 0; background: linear-gradient(to right, white, transparent); width: 100%; height: 100%; ">
+                                            <div class="d-flex justify-content-between align-items-start">
+                                                <h5>
+                                                    <a href="#" onclick="openPeerModal('{{ peer.uuid }}');" style="text-decoration: none">
+                                                        {{ peer }}
+                                                    </a>
+                                                </h5>
+                                                <span>
                                               {% if user_acl.user_level >= 30 %}
                                                   <div class="d-inline-flex flex-column">
                                                 <a href="/peer/sort/?peer={{ peer.uuid }}&direction=up" style="line-height:0px">
@@ -46,14 +52,8 @@
                                                 </div>
                                               </div>
                                               {% endif %}
-                                                {% comment %}
-                                                <a href="/peer/manage/?peer={{ peer.uuid }}">
-                                                    <i class="far fa-edit"></i>
-                                                </a>
-                                                {% endcomment %}
                                             </span>
-                                        </div>
-                                        <p>
+                                            </div>
                                             <b class="peer-extra-info">Throughput: </b> <span id="peer-throughput-{{ peer.public_key }}"></span><br>
                                             <span class="peer-extra-info"><b>Transfer:</b> <span id="peer-transfer-{{ peer.public_key }}"></span><br></span>
                                             <span class="peer-extra-info"><b>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span></span>
@@ -75,8 +75,8 @@
                                                 {% endfor %}
                                             </span>
                                             </span>
-                                        </p>
-                                        <canvas id="chart-{{ peer.public_key }}" width="400" height="100" style="margin-top:10px;"></canvas>
+                                        </div>
+                                        <canvas class="" id="chart-{{ peer.public_key }}" width="800" height="130"></canvas>
                                     </div>
                                 </div>
                             {% endfor %}
@@ -190,7 +190,9 @@
                                 borderColor: 'rgba(54, 162, 235, 1)',
                                 backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                 fill: false,
-                                tension: 0.1
+                                tension: 0.1,
+                                lineTension: 0.4,
+                                pointRadius: 0
                             },
                             {
                                 label: 'Upload',
@@ -198,7 +200,9 @@
                                 borderColor: 'rgba(255, 99, 132, 1)',
                                 backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                 fill: false,
-                                tension: 0.1
+                                tension: 0.1,
+                                lineTension: 0.4,
+                                pointRadius: 0
                             }
                         ]
                     },
@@ -222,7 +226,7 @@
                         },
 
                         animation: {
-                            duration: 1000
+                            duration: 0
                         }
                     }
                 });
@@ -361,11 +365,8 @@
                 formattedThroughput = `<i class="fas fa-arrow-down"></i> ${downloadDisplay}, <i class="fas fa-arrow-up"></i> ${uploadDisplay}`;
                 throughputElement.innerHTML = formattedThroughput;
 
-                // --- Update Chart.js instance for this peer (if available) ---
-                // Note: Ensure that the chart instance key uses the same identifier as used in the canvas (peer.public_key)
                 if (charts[peerId]) {
                     var chart = charts[peerId];
-                    // Add new values to the datasets and remove the oldest if more than 10 points.
                     chart.data.datasets[0].data.push(downloadThroughput);
                     if (chart.data.datasets[0].data.length > 10) {
                         chart.data.datasets[0].data.shift();
@@ -534,8 +535,10 @@
                 $(".peer-extra-info").toggle();
                 if($(".peer-extra-info").is(":visible")){
                     $(this).text("Hide extras");
+                    $(".div-peer-text-information").removeClass('position-absolute') //.removeClass('p-3');
                 } else {
                     $(this).text("Show extras");
+                    $(".div-peer-text-information").addClass('position-absolute') //.addClass('p-3');
                 }
             });
         });