refresh graphs instead of whole webpage

web/app.js

@@ -76,20 +76,27 @@ async function fetch_item() {
   }
 }
 
+async function get_data() {
+    items_data = await fetch_item();
+    history_data = await fetch_history();
+    // console.log(items_data)
+    // console.log(history_data)
+    return Array(items_data, history_data);
+}
 
-fetch_history().then(async function(data) {
-    items = await fetch_item();
+
+function render_graphs(items, history) {
 
     // by default, do not show hidden items
     var show_hidden = false;
 
     // Date domain (width)
     const x = d3.scaleTime()
-        .domain(d3.extent(data, d => d.date))
+        .domain(d3.extent(history, d => d.date))
         .range([3, width-3]);
 
     // Group the data by (uuid)
-    const nestedData = d3.group(data, d => d.uuid);
+    const nestedData = d3.group(history, d => d.uuid);
     // Create a div for each graph
     const graphDivs = d3.select("#graphs")
         .selectAll(".graph-container")
@@ -240,7 +247,7 @@ fetch_history().then(async function(data) {
 
         // reset zoom on double click
         svg.on("dblclick",function(){
-            x.domain(d3.extent(data, function(d) { return d.date; }))
+            x.domain(d3.extent(history, function(d) { return d.date; }))
             // Axis
             dict_xAxis[key].transition().call(d3.axisBottom(x))
             // Lines
@@ -312,8 +319,25 @@ fetch_history().then(async function(data) {
     }
     });
 
-})
+}
 
+function render_graphs_wrapper() {
+    get_data().then(function(data){
+        render_graphs(data[0], data[1]);
+    })
+}
+
+// refresh render
+function refresh_graphs() {
+    const node = document.getElementById("graphs");
+    while (node.firstChild) {
+        node.removeChild(node.lastChild);
+    }
+    render_graphs_wrapper();
+}
+
+// render graphs
+render_graphs_wrapper();
 
 // add item
 document.getElementById("addbutton").addEventListener("click", addItem);
@@ -344,8 +368,8 @@ async function addItem() {
 
     if (response.ok) {
         console.log(response);
-        // reload window to display new item
-        location.reload();
+        // refresh graphs to display new item
+        refresh_graphs();
     } else {
         throw new Error('Error in server response');
     }
@@ -372,8 +396,8 @@ const apiUrl = `${currentUrl}app/delete`;
 
     if (response.ok) {
         console.log(response);
-        // reload window to stop displaying deleted item
-        location.reload();
+        // refresh graphs to stop displaying deleted item
+        refresh_graphs();
     } else {
         throw new Error('Error in server response');
     }
@@ -385,12 +409,10 @@ document.addEventListener('DOMContentLoaded', function () {
   const yesBtn = document.getElementById('yesBtn');
   const noBtn = document.getElementById('noBtn');
   yesBtn.addEventListener('click', function () {
-    // Add your function to execute on 'Yes' click
     delItem(del_key);
     confirmationPopup.style.display = 'none';
   });
   noBtn.addEventListener('click', function () {
-    // Add your function to execute on 'No' click
     confirmationPopup.style.display = 'none';
   });
 });