Added a button to switch Pie Chart to table view.

osg-htc · Mar 21, 2024 · 344689a · 344689a
1 parent 69f68c1
commit 344689a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/assets/js/project-page-v3.js b/assets/js/project-page-v3.js
@@ -154,6 +154,12 @@ class ProjectDisplay{
                 panelId: 22,
                 showDisplay: UsageToggles.usedCpu,
                 ...GRAFANA_BASE
+            },{
+                className:"facilities-table",
+                panelId: 23,
+                showDisplay: UsageToggles.usedCpu,
+                height: "400px",
+                ...GRAFANA_BASE
             }
         ]
         this.display_modal = new bootstrap.Modal(parentNode, {

diff --git a/projects.html b/projects.html
@@ -208,9 +208,15 @@ <h5 class="mb-1">Description</h5>
                 </div>
                 <h5>Where Jobs Have Run</h5>
                 <div class="row project-usage-row">
-                    <div class="col-12 col-md-8 facilities-bar-graph"></div>
+                    <div class="col-12 col-md-8" style="display: block;" id="facilities-bar-graph">
+                        <div class="facilities-bar-graph"></div>
+                    </div>
+                    <div class="col-12 col-md-8" style="display: none;" id="facilities-table">
+                        <div class="facilities-table"></div>
+                    </div>
                     <div class="col-12 col-md-4 facilities-int"></div>
                 </div>
+                <button id="toggle-table-btn" class="btn btn-secondary my-2">Show Table</button>
                 <h5>Resource Usage</h5>
                 <div class="row project-usage-row">
                     <div class="col-12 col-md-4 jobs-ran-int"></div>
@@ -223,4 +229,25 @@ <h5>Resource Usage</h5>
             </div>
         </div>
     </div>
-</div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const toggleBtn = document.getElementById('toggle-table-btn');
+        const tableContainer = document.getElementById('facilities-table');
+        const chartContainer = document.getElementById('facilities-bar-graph');
+        toggleBtn.addEventListener('click', function() {
+            // Toggle the display style
+            if (tableContainer.style.display === 'none' || tableContainer.style.display === '') {
+                tableContainer.style.display = 'block';
+                chartContainer.style.display = 'none';
+                toggleBtn.textContent = 'Show Pie Chart'; // Optional: Change button text
+            } else {
+                tableContainer.style.display = 'none';
+                chartContainer.style.display = 'block';
+                toggleBtn.textContent = 'Show Table'; // Optional: Change button text
+            }
+        });
+    });
+</script>
+