(BIDS-652) add hide all series button (#2637)

* (BIDS-652) add hide all series button * markup
gobitfly · Nov 24, 2023 · 0a85e82 · 0a85e82
1 parent a75f1da
commit 0a85e82
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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">