Add sorting to Skunk HTML report

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## main [(unreleased)](https://github.com/fastruby/skunk/compare/v0.5.4...HEAD)
 
+* [FEATURE: Add sortable columns to the Skunk HTML report](https://github.com/fastruby/skunk/pull/142)
 * [ENHANCEMENT: Support SimpleCov 1.0](https://github.com/fastruby/skunk/pull/140)
 * BUGFIX: Pin path_expander < 2.0 for Ruby 2.7 compatibility
 * [FEATURE: Add `--formats` CLI flag to select report formats (json, html, console)](https://github.com/fastruby/skunk/pull/130)

lib/skunk/generators/html/templates/skunk_overview.html.erb

@@ -195,6 +195,24 @@
       font-weight: bold;
     }
 
+    /* Sortable Table Headers */
+    .table-header {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .table-header:hover {
+      text-decoration: underline;
+    }
+
+    .table-header-asc::after {
+      content: " ▲";
+    }
+
+    .table-header-desc::after {
+      content: " ▼";
+    }
+
     /* Mobile Card Layout */
     @media screen and (max-width: 800px) {
       .skunk-results thead {
@@ -257,15 +275,15 @@
 
     <section class="table-section">
       <h2>Skunk Analysis</h2>
-      <table class="skunk-results">
+      <table id="skunkTable" class="skunk-results">
         <thead>
           <tr>
-            <th>File</th>
-            <th>Skunk Score</th>
-            <th>Churn × Cost</th>
-            <th>Churn</th>
-            <th>Cost</th>
-            <th>Coverage</th>
+            <th class="table-header">File</th>
+            <th class="table-header table-header-desc">Skunk Score</th>
+            <th class="table-header">Churn &times; Cost</th>
+            <th class="table-header">Churn</th>
+            <th class="table-header">Cost</th>
+            <th class="table-header">Coverage</th>
           </tr>
         </thead>
         <tbody>
@@ -279,7 +297,7 @@
                 <span><%= item.skunk_score %></span>
               </td>
               <td>
-                <label>Churn × Cost</label>
+                <label>Churn &times; Cost</label>
                 <span><%= item.churn_times_cost %></span>
               </td>
               <td>
@@ -304,5 +322,45 @@
       <p>Generated with Skunk v<%= @skunk_version %> on <%= @generated_at %></p>
     </footer>
   </div>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const table = document.getElementById("skunkTable");
+      const headers = table.querySelectorAll(".table-header");
+      const tbody = table.querySelector("tbody");
+      const numericColumns = [1, 2, 3, 4, 5];
+
+      const cellValue = (row, columnIndex) =>
+        row.cells[columnIndex].querySelector("span:last-child").textContent.trim();
+
+      const compareRows = (rowA, rowB, columnIndex, ascending) => {
+        const valueA = cellValue(rowA, columnIndex);
+        const valueB = cellValue(rowB, columnIndex);
+
+        if (numericColumns.includes(columnIndex)) {
+          return ascending ? Number(valueA) - Number(valueB) : Number(valueB) - Number(valueA);
+        }
+
+        return ascending ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+      };
+
+      headers.forEach((header, columnIndex) => {
+        header.addEventListener("click", () => {
+          const ascending = !header.classList.contains("table-header-asc");
+          const rows = Array.from(tbody.querySelectorAll(".table-row"));
+
+          headers.forEach((otherHeader) => {
+            otherHeader.classList.remove("table-header-asc", "table-header-desc");
+          });
+
+          header.classList.add(ascending ? "table-header-asc" : "table-header-desc");
+
+          rows
+            .sort((rowA, rowB) => compareRows(rowA, rowB, columnIndex, ascending))
+            .forEach((row) => tbody.appendChild(row));
+        });
+      });
+    });
+  </script>
 </body>
-</html>
+</html>