From 78492e20a7990285ac4dab132341e8eb8e8de2ec Mon Sep 17 00:00:00 2001
From: Sam Hadow <sam.hadow@inbox.lv>
Date: Mon, 5 Feb 2024 13:00:36 +0100
Subject: [PATCH] show hidden button style + do not create div if hidden

---
 web/app.html        | 4 ++--
 web/app.js          | 5 +++++
 web/rendergraphs.js | 6 ++++--
 web/style.css       | 5 +++++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/web/app.html b/web/app.html
index b5fe336..70cd18d 100644
--- a/web/app.html
+++ b/web/app.html
@@ -14,11 +14,11 @@
 
 <!--banner-->
 <div class="banner">
-    <p>Lorem ipsum dolor sit amet</p>
+    <p></p>
     <input id="additemid" type="text" placeholder="item id" pattern="[0-9]*">
     <input id="addattributes" type="text" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
     <button id="addbutton" type="button">Add</button>
-    <button id="global_toggleshow" type="button">show_hidden</button>
+    <button id="global_toggleshow" class="global_toggleshow" type="button">show hidden</button>
 </div>
 
 <!--popup confirmation window-->
diff --git a/web/app.js b/web/app.js
index 14b96ca..7006a8f 100644
--- a/web/app.js
+++ b/web/app.js
@@ -18,6 +18,11 @@ const currentUrl = window.location.href;
 var show_hidden = false;
 document.getElementById("global_toggleshow").addEventListener("click", function() {
    show_hidden = !show_hidden;
+   if (document.getElementById("global_toggleshow").innerHTML == "show hidden") {
+       document.getElementById("global_toggleshow").innerHTML = "hide";
+    } else {
+        document.getElementById("global_toggleshow").innerHTML = "show hidden";
+    }
    refresh_graphs();
 });
 
diff --git a/web/rendergraphs.js b/web/rendergraphs.js
index 8055e57..30a70fe 100644
--- a/web/rendergraphs.js
+++ b/web/rendergraphs.js
@@ -1,5 +1,4 @@
 function render_graphs(items, history, show_hidden) {
-
     // Date domain (width)
     const x = d3.scaleTime()
         .domain(d3.extent(history, d => d.date))
@@ -8,10 +7,13 @@ function render_graphs(items, history, show_hidden) {
     // Group the data by (uuid)
     const nestedData = d3.group(history, d => d.uuid);
     // Create a div for each graph
+    console.log(nestedData.size)
     const graphDivs = d3.select("#graphs")
         .selectAll(".graph-container")
         .data(nestedData.keys())
-        .enter().append("div")
+        .enter()
+        .filter(key => items[key].show || show_hidden)
+        .append("div")
         .attr("class", "graph-container");
 
     // Append SVG elements to each div
diff --git a/web/style.css b/web/style.css
index 1e9aaf6..836e015 100644
--- a/web/style.css
+++ b/web/style.css
@@ -23,6 +23,11 @@ body {
   text-align: center;
 }
 
+.global_toggleshow {
+  float: right;
+  margin-right: 20px;
+}
+
 .banner {
   background-color: #177013; /* background color */
   color: #fff; /* text color */