From 0a85e82fb2b5fe0a6d8cea541cf5b3098bc946aa Mon Sep 17 00:00:00 2001
From: Markus <markus.weissensteiner@bitfly.at>
Date: Fri, 24 Nov 2023 11:06:30 +0100
Subject: [PATCH] (BIDS-652) add hide all series button (#2637)

* (BIDS-652) add hide all series button

* markup
---
 templates/pools/charts.html |  2 +-
 templates/pools/pools.html  | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/templates/pools/charts.html b/templates/pools/charts.html
index 317c6e1893..ae0ede65e4 100644
--- a/templates/pools/charts.html
+++ b/templates/pools/charts.html
@@ -108,7 +108,7 @@
   <script>
     // source: https://stackoverflow.com/questions/63343645/overriding-log-scale-with-highcharts-export-server/63375446#63375446
     window.addEventListener('load', function () {
-        Highcharts.stockChart('performance-chart', {
+        performanceChart = Highcharts.stockChart('performance-chart', {
             chart: {
                 type: {{.HistoricPoolPerformance.Data.Type}},
                 borderColor: null,
diff --git a/templates/pools/pools.html b/templates/pools/pools.html
index cc87fe16f4..8dbb41c5a9 100644
--- a/templates/pools/pools.html
+++ b/templates/pools/pools.html
@@ -4,17 +4,26 @@
   <script src="/js/highcharts/highcharts-global-options.js"></script>
   <script src="/js/luxon.min.js"></script>
   <script>
+    let performanceChart
     if (window.location.hash == "#performance") {
       $("#distribution-chart").addClass("d-none")
       $("#performance-chart").removeClass("d-none")
+      $("#performance-chart-btn-hide-all").removeClass("d-none")
     }
     $("#distribution-chart-btn").on("click", () => {
       $("#distribution-chart").removeClass("d-none")
       $("#performance-chart").addClass("d-none")
+      $("#performance-chart-btn-hide-all").addClass("d-none")
     })
     $("#performance-chart-btn").on("click", () => {
       $("#distribution-chart").addClass("d-none")
       $("#performance-chart").removeClass("d-none")
+      $("#performance-chart-btn-hide-all").removeClass("d-none")
+    })
+    $("#performance-chart-btn-hide-all").on("click", () => {
+      performanceChart.series.forEach((series) => {
+        series.setVisible(false, false)
+      })
     })
   </script>
 {{ end }}
@@ -25,6 +34,23 @@
   <style>
     #charts-container {
       height: 520px;
+      position: relative;
+    }
+    @media (min-width: 817.96px) {
+      #performance-chart-btn-hide-all {
+        position: absolute;
+        right: 0px;
+        bottom: 55px;
+      }
+    }
+
+    @media (max-width: 818px) {
+      #charts-container {
+        height: 560px;
+      }
+      #performance-chart-btn-hide-all {
+        position: relative;
+      }
     }
   </style>
 {{ end }}
@@ -40,6 +66,13 @@
           <div id="performance-chart" class="w-100 mb-2 d-none">
             {{ template "performance_chart" .Data }}
           </div>
+          <div class="text-center">
+            <button class="btn btn-primary btn-sm d-none" id="performance-chart-btn-hide-all">
+              <span class="text-white">
+                <b>Hide all</b>
+              </span>
+            </button>
+          </div>
         </div>
         <div class="d-flex justify-content-center btn-group border rounded w-25 m-auto">
           <a role="button" class="btn border-right" id="distribution-chart-btn" href="#distribution">