Added line graph using chart.js & Improving websocket.

Added line graph to show total receive & total sent changes per refresh interval, using chart.js line chart to show the changes. Switching configuration don't need to refresh anymore, by using websocket.

src/dashboard.py

@@ -120,7 +120,7 @@ def get_conf_running_peer_number(config_name):
         data_usage = subprocess.check_output(f"wg show {config_name} latest-handshakes",
                                              shell=True, stderr=subprocess.STDOUT)
     except subprocess.CalledProcessError:
-        return "stopped"
+        return 0
     data_usage = data_usage.decode("UTF-8").split()
     count = 0
     now = datetime.now()
@@ -143,16 +143,19 @@ def read_conf_file_interface(config_name):
     """
 
     conf_location = WG_CONF_PATH + "/" + config_name + ".conf"
-    with open(conf_location, 'r', encoding='utf-8') as file_object:
-        file = file_object.read().split("\n")
-        data = {}
-        for i in file:
-            if not regex_match("#(.*)", i):
-                if len(i) > 0:
-                    if i != "[Interface]":
-                        tmp = re.split(r'\s*=\s*', i, 1)
-                        if len(tmp) == 2:
-                            data[tmp[0]] = tmp[1]
+    try:
+        with open(conf_location, 'r', encoding='utf-8') as file_object:
+            file = file_object.read().split("\n")
+            data = {}
+            for i in file:
+                if not regex_match("#(.*)", i):
+                    if len(i) > 0:
+                        if i != "[Interface]":
+                            tmp = re.split(r'\s*=\s*', i, 1)
+                            if len(tmp) == 2:
+                                data[tmp[0]] = tmp[1]
+    except FileNotFoundError as e:
+        return {}
     return data
 
 
@@ -1013,49 +1016,59 @@ def get_conf(data):
     @type config_name: str
     @return: TODO
     """
+    result = {
+        "status": True,
+        "message": "",
+        "data": {}
+    }
+    if not session:
+        result["status"] = False
+        result["message"] = "Oops! <br> You're not signed in. Please refresh your page."
+        socketio.emit("get_config", result, json=True)
+        return
+
     if getattr(g, 'db', None) is None:
         g.db = connect_db()
         g.cur = g.db.cursor()
-    print(data)
     config_name = data['config']
-    print(config_name)
-
     config_interface = read_conf_file_interface(config_name)
-    search = data['search']
-    print(search)
-    # search = request.args.get('search')
-    if len(search) == 0:
-        search = ""
-    search = urllib.parse.unquote(search)
-    config = get_dashboard_conf()
-    sort = config.get("Server", "dashboard_sort")
-    peer_display_mode = config.get("Peers", "peer_display_mode")
-    wg_ip = config.get("Peers", "remote_endpoint")
-    if "Address" not in config_interface:
-        conf_address = "N/A"
+
+    if config_interface != {}:
+        search = data['search']
+        if len(search) == 0:
+            search = ""
+        search = urllib.parse.unquote(search)
+        config = get_dashboard_conf()
+        sort = config.get("Server", "dashboard_sort")
+        peer_display_mode = config.get("Peers", "peer_display_mode")
+        wg_ip = config.get("Peers", "remote_endpoint")
+        if "Address" not in config_interface:
+            conf_address = "N/A"
+        else:
+            conf_address = config_interface['Address']
+        result['data'] = {
+            "peer_data": get_peers(config_name, search, sort),
+            "name": config_name,
+            "status": get_conf_status(config_name),
+            "total_data_usage": get_conf_total_data(config_name),
+            "public_key": get_conf_pub_key(config_name),
+            "listen_port": get_conf_listen_port(config_name),
+            "running_peer": get_conf_running_peer_number(config_name),
+            "conf_address": conf_address,
+            "wg_ip": wg_ip,
+            "sort_tag": sort,
+            "dashboard_refresh_interval": int(config.get("Server", "dashboard_refresh_interval")),
+            "peer_display_mode": peer_display_mode
+        }
+        if result['data']['status'] == "stopped":
+            result['data']['checked'] = "nope"
+        else:
+            result['data']['checked'] = "checked"
+        config.clear()
     else:
-        conf_address = config_interface['Address']
-    conf_data = {
-        "peer_data": get_peers(config_name, search, sort),
-        "name": config_name,
-        "status": get_conf_status(config_name),
-        "total_data_usage": get_conf_total_data(config_name),
-        "public_key": get_conf_pub_key(config_name),
-        "listen_port": get_conf_listen_port(config_name),
-        "running_peer": get_conf_running_peer_number(config_name),
-        "conf_address": conf_address,
-        "wg_ip": wg_ip,
-        "sort_tag": sort,
-        "dashboard_refresh_interval": int(config.get("Server", "dashboard_refresh_interval")),
-        "peer_display_mode": peer_display_mode
-    }
-    if conf_data['status'] == "stopped":
-        conf_data['checked'] = "nope"
-    else:
-        conf_data['checked'] = "checked"
-    config.clear()
-    socketio.emit("get_config", conf_data, json=True)
-    # return jsonify(conf_data)
+        result['status'] = False
+        result['message'] = "I cannot find this configuration. <br> Please refresh and try again"
+    socketio.emit("get_config", result, json=True)
 
 
 # Turn on / off a configuration
@@ -1334,7 +1347,11 @@ def get_peer_name(config_name):
 # Return available IPs
 @app.route('/available_ips/<config_name>', methods=['GET'])
 def available_ips(config_name):
-    return jsonify(f_available_ips(config_name))
+    result = {"status": True, "message":"", "data": f_available_ips(config_name)}
+    if len(result["data"]) == 0:
+        result['status'] = False
+        result['message'] = f"No more available IP for {config_name}."
+    return jsonify(result)
 
 
 # Check if both key match

src/static/css/dashboard.css

@@ -9,6 +9,10 @@ body {
     vertical-align: text-bottom;
 }
 
+.btn-primary{
+    font-weight: bold;
+}
+
 /*
  * Sidebar
  */
@@ -23,12 +27,6 @@ body {
     box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
-/*@media (max-width: 767.98px) {*/
-/*  .sidebar {*/
-/*    top: 5rem;*/
-/*  }*/
-/*}*/
-
 .sidebar-sticky {
     position: relative;
     top: 0;
@@ -369,6 +367,7 @@ main{
         transform: rotate(360deg);
     }
 }
+
 .rotating::before {
     -webkit-animation: rotating 0.75s linear infinite;
     -moz-animation: rotating 0.75s linear infinite;
@@ -385,7 +384,7 @@ main{
     cursor: pointer;
 }
 
-#peer_private_key_textbox, #private_key, #public_key{
+#peer_private_key_textbox, #private_key, #public_key, #peer_preshared_key_textbox{
     font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
 }
 
@@ -571,3 +570,31 @@ pre.index-alert{
 .peerLightContainer{
     text-transform: uppercase; margin: 0; margin-left: auto !important;
 }
+
+.conf_card .dot, .info .dot {
+    transform: translateX(10px);
+}
+
+#config_body{
+    transition: 0.3s ease-in-out;
+}
+
+#config_body.firstLoading{
+    opacity: 0.2;
+}
+
+.chartTitle{
+    display: flex;
+}
+
+.chartControl{
+   margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+}
+
+.chartTitle h6{
+    margin-bottom: 0;
+    line-height: 1;
+    margin-right: 0.5rem;
+}

src/static/js/configuration.js

@@ -50,6 +50,29 @@
         }
     }
 
+    let firstLoading = true;
+    $(".nav-conf-link").on("click", function(e){
+        if(socket.connected){
+            e.preventDefault();
+            firstLoading = true;
+            $("#config_body").addClass("firstLoading");
+
+            conf_name = $(this).data("conf-id");
+            configurations.loadPeers($('#search_peer_textbox').val());
+
+            $(".nav-conf-link").removeClass("active");
+            $(`.sb-${conf_name}-url`).addClass("active");
+
+            window.history.pushState(null,null,`/configuration/${conf_name}`);
+            $("title").text(`${conf_name} | WGDashboard`);
+
+            totalDataUsageChartObj.data.labels = [];
+            totalDataUsageChartObj.data.datasets[0].data = [];
+            totalDataUsageChartObj.data.datasets[1].data = [];
+            totalDataUsageChartObj.update();
+        }
+    });
+
     /**
      * Parse all responded information onto the configuration header
      * @param response
@@ -61,6 +84,45 @@
         }else{
             $conf_status_btn.innerHTML = `<a href="#" id="${response.name}" ${response.checked} class="switch text-primary"><i class="bi bi-toggle2-off"></i> OFF</a>`;
         }
+
+        if (response.running_peer > 0){
+            let d = new Date();
+            let time = d.toLocaleString("en-us",
+                {hour: '2-digit', minute: '2-digit', second: "2-digit", hourCycle: 'h23'});
+            totalDataUsageChartObj.data.labels.push(`${time}`);
+
+            if (totalDataUsageChartObj.data.datasets[0].data.length === 0){
+                totalDataUsageChartObj.data.datasets[1].lastData = response.total_data_usage[2];
+                totalDataUsageChartObj.data.datasets[0].lastData = response.total_data_usage[1];
+                totalDataUsageChartObj.data.datasets[0].data.push(0);
+                totalDataUsageChartObj.data.datasets[1].data.push(0);
+            }else{
+                if (totalDataUsageChartObj.data.datasets[0].data.length === 50 && totalDataUsageChartObj.data.datasets[1].data.length === 50){
+                    totalDataUsageChartObj.data.labels.shift();
+                    totalDataUsageChartObj.data.datasets[0].data.shift();
+                    totalDataUsageChartObj.data.datasets[1].data.shift();
+                }
+
+                let newTotalReceive = response.total_data_usage[2] - totalDataUsageChartObj.data.datasets[1].lastData;
+                let newTotalSent = response.total_data_usage[1] - totalDataUsageChartObj.data.datasets[0].lastData;
+                let k = 0;
+                if (chartUnit === "MB"){
+                    k = 1024;
+                }
+                else if (chartUnit === "KB"){
+                    k = 1048576;
+                }else{
+                    k = 1;
+                }
+                totalDataUsageChartObj.data.datasets[1].data.push(newTotalReceive*k);
+                totalDataUsageChartObj.data.datasets[0].data.push(newTotalSent*k);
+                totalDataUsageChartObj.data.datasets[0].lastData = response.total_data_usage[1];
+                totalDataUsageChartObj.data.datasets[1].lastData = response.total_data_usage[2];
+            }
+
+            totalDataUsageChartObj.update();
+        }
+
         $conf_status_btn.classList.remove("info_loading");
         document.querySelectorAll("#sort_by_dropdown option").forEach(ele => ele.removeAttribute("selected"));
         document.querySelector(`#sort_by_dropdown option[value="${response.sort_tag}"]`).setAttribute("selected", "selected");
@@ -164,7 +226,7 @@
         let data_list = [$new_add_DNS, $new_add_endpoint_allowed_ip,$new_add_MTU, $new_add_keep_alive];
         if ($new_add_amount.val() > 0 && !$new_add_amount.hasClass("is-invalid")){
             if ($new_add_DNS.val() !== "" && $new_add_endpoint_allowed_ip.val() !== ""){
-                let conf = $add_peer.getAttribute('conf_id');
+                let conf = conf_name;
                 let keys = [];
                 for (let i = 0; i < $new_add_amount.val(); i++) {
                     keys.push(window.wireguard.generateKeypair());
@@ -262,12 +324,13 @@
     /**
      * Handle when the server is not responding
      */
-    function noResponding(){
+    function noResponding(message = "Opps! <br> I can't connect to the server."){
         document.querySelectorAll(".no-response").forEach(ele => ele.classList.add("active"));
         setTimeout(function (){
             document.querySelectorAll(".no-response").forEach(ele => ele.classList.add("show"));
             document.querySelector("#right_body").classList.add("no-responding");
             document.querySelector(".navbar").classList.add("no-responding");
+            document.querySelector(".no-response .container h4").innerHTML = message;
         },10);
     }
 
@@ -349,53 +412,38 @@
     let time = 0;
     let count = 0;
 
+
     let d1 = new Date();
     function loadPeers(searchString){
         d1 = new Date();
-        startProgressBar();
         socket.emit('get_config', {"config": conf_name, "search": searchString});
-
-        // let d1 = new Date();
-        // $.ajax({
-        //     method: "GET",
-        //     url: `/get_config/${conf_name}?search=${encodeURIComponent(searchString)}`,
-        //     headers:{"Content-Type": "application/json"}
-        // }).done(function(response){
-        //     removeNoResponding();
-        //     peers = response.peer_data;
-        //     configurationAlert(response);
-        //     configurationHeader(response);
-        //     configurationPeers(response);
-        //     $(".dot.dot-running").attr("title","Peer Connected").tooltip();
-        //     $(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();
-        //     $("i[data-toggle='tooltip']").tooltip();
-        //     endProgressBar();
-        //     let d2 = new Date();
-        //     let seconds = (d2 - d1);
-        //     $("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);
-        // }).fail(function(){
-        //     noResponding();
-        // });
     }
 
     function parsePeers(response){
-        let d2 = new Date();
-        let seconds = (d2 - d1);
-        time += seconds
-        count += 1
-        window.console.log(`Average time: ${time/count}ms`);
-        $("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);
-        removeNoResponding();
-        peers = response.peer_data;
-        configurationAlert(response);
-        configurationHeader(response);
-        configurationPeers(response);
-        $(".dot.dot-running").attr("title","Peer Connected").tooltip();
-        $(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();
-        $("i[data-toggle='tooltip']").tooltip();
-        endProgressBar();
-
-
+        if (response.status){
+            let d2 = new Date();
+            let seconds = (d2 - d1);
+            time += seconds;
+            count += 1;
+            window.console.log(`Average time: ${time/count}ms`);
+            $("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);
+            removeNoResponding();
+            peers = response.data.peer_data;
+            configurationAlert(response.data);
+            configurationHeader(response.data);
+            configurationPeers(response.data);
+            $(".dot.dot-running").attr("title","Peer Connected").tooltip();
+            $(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();
+            $("i[data-toggle='tooltip']").tooltip();
+            $("#conf_name").text(conf_name);
+            if (firstLoading){
+                firstLoading = false;
+                $("#config_body").removeClass("firstLoading");
+            }
+        }else{
+            noResponding(response.message);
+            removeConfigurationInterval();
+        }
     }
 
     /**
@@ -513,16 +561,21 @@
      */
     function getAvailableIps(){
         $.ajax({
-            "url": `/available_ips/${$add_peer.getAttribute("conf_id")}`,
+            "url": `/available_ips/${conf_name}`,
             "method": "GET",
         }).done(function (res) {
-            available_ips = res;
-            let $list_group = document.querySelector("#available_ip_modal .modal-body .list-group");
-            $list_group.innerHTML = "";
-            document.querySelector("#allowed_ips").value = available_ips[0];
-            available_ips.forEach((ip) =>
-                $list_group.innerHTML +=
-                    `<a class="list-group-item list-group-item-action available-ip-item" style="cursor: pointer" data-ip="${ip}">${ip}</a>`);
+            if (res.status === true){
+                available_ips = res.data;
+                let $list_group = document.querySelector("#available_ip_modal .modal-body .list-group");
+                $list_group.innerHTML = "";
+                document.querySelector("#allowed_ips").value = available_ips[0];
+                available_ips.forEach((ip) =>
+                    $list_group.innerHTML +=
+                        `<a class="list-group-item list-group-item-action available-ip-item" style="cursor: pointer" data-ip="${ip}">${ip}</a>`);
+            }else{
+                document.querySelector("#allowed_ips").value = res.message;
+                document.querySelector("#search_available_ip").setAttribute("disabled", "disabled");
+            }
         });
     }
 
@@ -533,6 +586,7 @@
         ipModal: () => { return ipModal; },
         qrcodeModal: () => { return qrcodeModal; },
         settingModal: () => { return settingModal; },
+        configurationTimeout: () => { return configuration_timeout;},
 
         loadPeers: (searchString) => { loadPeers(searchString); },
         addPeersByBulk: () => { addPeersByBulk(); },
@@ -663,7 +717,7 @@ $add_peer.addEventListener("click",function(){
         $add_peer.setAttribute("disabled","disabled");
         $add_peer.innerHTML = "Adding...";
         if ($allowed_ips.val() !== "" && $public_key.val() !== "" && $new_add_DNS.val() !== "" && $new_add_endpoint_allowed_ip.val() !== ""){
-            let conf = $add_peer.getAttribute('conf_id');
+            let conf = conf_name;
             let data_list = [$private_key, $allowed_ips, $new_add_name, $new_add_DNS, $new_add_endpoint_allowed_ip,$new_add_MTU, $new_add_keep_alive];
             data_list.forEach((ele) => ele.attr("disabled", "disabled"));
             $.ajax({
@@ -739,7 +793,7 @@ $("#new_add_amount").on("keyup", function(){
  * Handle when user toggled add peers by bulk
  */
 $("#bulk_add").on("change", function (){
-    let hide = $(".non-bulk").find("input");
+    let hide = $(".non-bulk");
     let amount = $("#new_add_amount");
     if ($(this).prop("checked") === true){
         for(let i = 0; i < hide.length; i++){
@@ -854,7 +908,7 @@ $body.on("click", ".btn-qrcode-peer", function (){
  */
 $body.on("click", ".btn-delete-peer", function(){
     let peer_id = $(this).attr("id");
-    $("#delete_peer").attr("peer_id", peer_id);
+    $("#delete_peer").data("peer-id", peer_id);
     window.configurations.deleteModal().toggle();
 });
 
@@ -864,9 +918,8 @@ $body.on("click", ".btn-delete-peer", function(){
 $("#delete_peer").on("click",function(){
     $(this).attr("disabled","disabled");
     $(this).html("Deleting...");
-    let peer_id = $(this).attr("peer_id");
-    let config = $(this).attr("conf_id");
-    let peer_ids = [peer_id];
+    let config = conf_name;
+    let peer_ids = [$(this).data("peer-id")];
     window.configurations.deletePeers(config, peer_ids);
 });
 
@@ -880,12 +933,12 @@ $("#delete_peer").on("click",function(){
  * Handle when setting button got clicked for each peer
  */
 $body.on("click", ".btn-setting-peer", function(){
-    window.configurations.startProgressBar();
+    // window.configurations.startProgressBar();
     let peer_id = $(this).attr("id");
     $("#save_peer_setting").attr("peer_id", peer_id);
     $.ajax({
         method: "POST",
-        url: "/get_peer_data/"+$("#setting_modal").attr("conf_id"),
+        url: "/get_peer_data/"+conf_name,
         headers:{
             "Content-Type": "application/json"
         },
@@ -921,7 +974,7 @@ $("#peer_private_key_textbox").on("change",function(){
     let $save_peer_setting = $("#save_peer_setting");
     if ($(this).val().length > 0){
         $.ajax({
-            "url": "/check_key_match/"+$save_peer_setting.attr("conf_id"),
+            "url": "/check_key_match/"+conf_name,
             "method": "POST",
             "headers":{"Content-Type": "application/json"},
             "data": JSON.stringify({
@@ -1233,7 +1286,7 @@ $("#confirm_delete_bulk_peers").on("click", function(){
                 btn.attr("disabled", "disabled");
                 let ips = [];
                 $selected_peer_list.childNodes.forEach((ele) => ips.push(ele.dataset.id));
-                window.configurations.deletePeers(btn.data("conf"), ips);
+                window.configurations.deletePeers(conf_name, ips);
                 clearInterval(confirm_delete_bulk_peers_interval);
                 confirm_delete_bulk_peers_interval = undefined;
             }
@@ -1289,7 +1342,7 @@ $body.on("click", ".btn-download-peer", function(e){
  */
 $("#download_all_peers").on("click", function(){
     $.ajax({
-        "url": $(this).data("url"),
+        "url": `/download_all/${conf_name}`,
         "method": "GET",
         success: function(res){
             if (res.peers.length > 0){

src/templates/configuration.html

@@ -74,6 +74,24 @@
                     </div>
                 </div>
                 <hr>
+                <div class="row">
+                    <div class="col-sm">
+                        <div class="chartTitle">
+                            <h6>Data Usage / Refresh Interval</h6>
+                            <div class="chartControl" style="margin-left: auto">
+                                <div class="btn-group" role="group">
+                                    <button class="btn btn-outline-primary btn-sm switchUnit active" data-unit="GB">GB</button>
+                                    <button class="btn btn-outline-primary btn-sm switchUnit" data-unit="MB">MB</button>
+                                    <button class="btn btn-outline-primary btn-sm switchUnit" data-unit="KB">KB</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div style="width: 100%; max-height: 300px">
+                            <canvas id="myChart" width="100" height="100"></canvas>
+                        </div>
+                    </div>
+                </div>
+                <hr>
                 <div class="button-div mb-3">
                     <div class="row">
                         <div class="col-sm">
@@ -154,35 +172,35 @@
 						</button>
 					</div>
 					<form id="add_peer_form">
-                        <div class="form-group non-bulk">
+                        <div class="form-group">
                             <div>
                                 <label for="private_key">Private Key</label>
                             </div>
                             <div class="input-group">
-                                <input type="text" class="form-control" id="private_key" aria-describedby="private_key">
+                                <input type="text" class="form-control non-bulk" id="private_key" aria-describedby="private_key">
                                 <div class="input-group-append">
-                                   <button type="button" class="btn btn-danger" id="re_generate_key" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
+                                   <button type="button" class="btn btn-danger non-bulk" id="re_generate_key" data-toggle="tooltip" data-placement="top" title="Regenerate Key"><i class="bi bi-arrow-repeat"></i></button>
                                 </div>
                             </div>
                         </div>
-						<div class="form-group non-bulk">
+						<div class="form-group">
 							<label for="public_key">Public Key <code>(Required)</code></label>
-							<input type="text" class="form-control" id="public_key" aria-describedby="public_key" disabled>
+							<input type="text" class="form-control non-bulk" id="public_key" aria-describedby="public_key" disabled>
 						</div>
                         <div class="row">
-                            <div class="col-sm-6 non-bulk">
+                            <div class="col-sm-6">
                                  <div class="form-group">
                                     <label for="new_add_name">Name</label>
-                                    <input type="text" class="form-control" id="new_add_name">
+                                    <input type="text" class="form-control non-bulk" id="new_add_name">
                                 </div>
                             </div>
-                            <div class="col-sm-6 non-bulk">
+                            <div class="col-sm-6">
                                 <div class="form-group">
                                     <label for="allowed_ips">Allowed IPs <code>(Required)</code></label>
                                     <div class="input-group">
-                                        <input type="text" class="form-control" id="allowed_ips">
+                                        <input type="text" class="form-control non-bulk" id="allowed_ips">
                                         <div class="input-group-append">
-                                            <button type="button" class="btn btn-primary" id="search_available_ip" data-toggle="tooltip" data-placement="top" title="Search Available IPs">
+                                            <button type="button" class="btn btn-primary non-bulk" id="search_available_ip" data-toggle="tooltip" data-placement="top" title="Search Available IPs">
                                                 <i class="bi bi-search"></i>
                                             </button>
                                         </div>
@@ -281,7 +299,6 @@
                         <input type="text" class="form-control" id="peer_preshared_key_textbox">
                     </div>
                     <hr>
-
                     <div class="row">
                         <div class="col-sm-6">
                             <div class="mb-3">
@@ -418,17 +435,102 @@
     let load_interval = 0;
     let conf_name = "{{ conf_data['name'] }}"
     let peers = [];
-    $(".sb-"+conf_name+"-url").addClass("active");
+    $(`.sb-${conf_name}-url`).addClass("active");
     let socket = io();
-	$(function(){
-        socket.on('connect', function() {
-            configurations.loadPeers($('#search_peer_textbox').val());
-        });
-        socket.on('get_config', function(res){
-            window.console.log(res);
-            configurations.parsePeers(res);
-        });
+    socket.on('connect', function() {
+        configurations.loadPeers($('#search_peer_textbox').val());
+    });
+    socket.on('get_config', function(res){
+        window.console.log(res);
+        configurations.parsePeers(res);
+    });
 
-	});
+    let chartUnit = $(".switchUnit.active").data('unit');
+    const totalDataUsageChart = document.getElementById('myChart').getContext('2d');
+    const totalDataUsageChartObj = new Chart(totalDataUsageChart, {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [
+                {
+                label: 'Total Sent',
+                data: [],
+                fill: false,
+                borderColor: '#28a745',
+                tension: 0.1,
+                borderWidth: 1
+            },{
+                label: 'Total Received',
+                data: [],
+                fill: false,
+                borderColor: '#007bff',
+                tension: 0.1,
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive:false,
+            scales: {
+                y: {
+                    ticks: {
+                        callback: function(value, index, ticks) {
+                            return `${value} ${chartUnit}`
+                        }
+                    }
+                }
+            }
+        }
+    });
+    $("#myChart").css("width", "100%");
+    totalDataUsageChartObj.width = $("#myChart").parent().width();
+    totalDataUsageChartObj.resize();
+    $(window).on("resize", function() {
+         totalDataUsageChartObj.width = $("#myChart").parent().width();
+         totalDataUsageChartObj.resize();
+    });
+
+
+
+    let mul = 1;
+    $(".switchUnit").on("click", function(){
+        $(".switchUnit").removeClass("active");
+        $(this).addClass("active");
+        if ($(this).data('unit') !== chartUnit){
+            switch ($(this).data('unit')) {
+                case "GB":
+                    if (chartUnit === "MB"){
+                        mul = 1/1024;
+                    }
+                    if (chartUnit === "KB"){
+                        mul = 1/1048576;
+                    }
+                    break;
+                case "MB":
+                    if (chartUnit === "GB"){
+                        mul = 1024
+                    }
+                    if (chartUnit === "KB"){
+                        mul = 1/1024
+                    }
+                    break;
+                case "KB":
+                   if (chartUnit === "GB"){
+                        mul = 1048576
+                    }
+                    if (chartUnit === "MB"){
+                        mul = 1024
+                    }
+                    break;
+                default:
+                    break;
+            }
+            chartUnit = $(this).data('unit');
+            totalDataUsageChartObj.data.datasets[0].data = totalDataUsageChartObj.data.datasets[0].data.map(x => x * mul);
+            totalDataUsageChartObj.data.datasets[1].data = totalDataUsageChartObj.data.datasets[1].data.map(x => x * mul);
+
+            totalDataUsageChartObj.update();
+        }
+
+    })
 </script>
 </html>	

src/templates/header.html

@@ -15,4 +15,5 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
 	<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>

src/templates/sidebar.html

@@ -19,7 +19,7 @@
                 </h6>
                 <ul class="nav flex-column">
                     {% for i in conf%}
-                        <li class="nav-item"><a class="nav-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
+                        <li class="nav-item"><a class="nav-link nav-conf-link sb-{{i['conf']}}-url" href="/configuration/{{i['conf']}}" data-conf-id="{{i['conf']}}"><samp>{{i['conf']}}</samp></a></li>
                     {%endfor%}
                 </ul>
                 <hr>