Adjusted display of filter buttons

Author: MFrikken

src/main/resources/css/style.css

@@ -70,6 +70,7 @@ ul, ol {
 /*         HEADER SECTION         */
 /* ============================== */
 .header {
+    border: green 3px;
     text-align: left; /* Only header is left-aligned */
     padding: 20px;
     margin-bottom: 30px;
@@ -81,6 +82,11 @@ ul, ol {
     color: var(--clr-primary);
 }
 
+.title {
+    font-size: 32px;
+    font-weight: 900;
+}
+
 .sast-description {
     font-size: 16px;
     color: var(--clr-dark);
@@ -347,21 +353,32 @@ body {
 /*         STATISTICS            */
 /* ============================== */
 .statistics-container {
-    display: flex;
     align-content: flex-start;
     justify-content: center;
 }
 
 .statistics {
+    display: flex;
+    gap: 10px;
     padding: 10px;
 }
 
-.statistics > ol {
-    display: table;
+.filter-button {
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+}
+
+.filter-button.high {
+    background: #ff5e5e;
+}
+
+.filter-button.medium {
+    background: #ffa22b;
 }
 
-.statistics > ol > li {
-    display: table-row;
+.filter-button.low {
+    background: #39c4ff;
 }
 
 /* ============================== */

src/main/resources/html/analytics.html

@@ -53,8 +53,25 @@ <h3>Recent Activity</h3>
     <img src="../icons/sidebar.png" alt="Toggle Sidebar Icon" width="24"/>
 </button>
 
+<header class="header">
+    <h1 class="title">Findings</h1>
+</header>
+
 <section class="statistics-container">
-    <ol id="statistics" class="statistics"></ol>
+    <div id="statistics" class="statistics">
+        <button id="btnHigh" class="filter-button high">
+            <span class="label">High:</span>
+            <span class="count"></span>
+        </button>
+        <button id="btnMedium" class="filter-button medium">
+            <span class="label">Medium:</span>
+            <span class="count"></span>
+        </button>
+        <button id="btnLow" class="filter-button low">
+            <span class="label">Low:</span>
+            <span class="count"></span>
+        </button>
+    </div>
 </section>
 
 <section class="vulnerability-container">

src/main/resources/icons/alert-high.png

@@ -25,13 +25,11 @@ function handleFileSelection(filePath) {
 }
 
 function displayStatistics(statistics) {
-    let statisticsList = document.getElementById("statistics");
-    statisticsList.innerHTML = "";
-
     Object.entries(statistics).forEach(([key, value]) => {
-        let li = document.createElement("li");
-        li.textContent = `${key}: ${value}`
-        statisticsList.appendChild(li);
+        let button = document.getElementById(`btn${key}`);
+        if (button) {
+            button.querySelector(".count").textContent = `${value}`;
+        }
     });
 }