refresh graphs instead of whole webpage

This commit is contained in:
Sam Hadow 2024-02-02 12:13:13 +01:00
parent 550848b4ff
commit 770952ed5e

View File

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