Feature: Sort class inference for runtime and file size sorts automat…

…ically! (#81)
LeeWannacott · May 9, 2023 · 4c2ed4e · 4c2ed4e
1 parent ce636c5
commit 4c2ed4e
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -41,11 +41,12 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h
 
 #### Classes:
 
-| &lt;table&gt; classes | Description                                                             |
-| --------------------- | ----------------------------------------------------------------------- |
-| "table-sort"          | Make the table sortable! (Words, numbers, dates)                        |
-| "table-arrows"        | Display ascending or descending triangles.                              |
-| "remember-sort"       | If clicking on different columns remembers sort of the original column. |
+| &lt;table&gt; classes | Description                                                                                 |
+| --------------------- | --------------------------------------------------------------------------------------------|
+| "table-sort"          | Make the table sortable! (Words, numbers)...                                                |
+| "table-arrows"        | Display ascending or descending triangles.                                                  |
+| "no-class-infer"      | Turns off inference for adding sort classes automatically (file-size-sort and runtime-sort).|
+| "remember-sort"       | If clicking on different columns remembers sort of the original column.                     |
 
 | &lt;th&gt; classes | Description                                                                                                                             |
 | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |

diff --git a/deploy.sh b/deploy.sh
@@ -1,4 +1,5 @@
 cp public/table-sort.js npm/table-sort.js
+cp public/table-sort.js browser-extension/table-sort.js
 cp README.md npm/README.md
 cp LICENSE npm/LICENSE
 cp Contributors.md npm/Contributors.md

diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,22 @@
-<!DOCTYPE html5>
+<!DOCTYPE html>
 <html>
   <head></head>
 
   <body>
     <div id="display"></div>
-    <script src="table-sort.js"></script>
+    <script src="../public//table-sort.js"></script>
 
     <h1>Testing table sort js</h1>
     <table class="table-sort table-arrows">
       <thead>
         <tr>
-          <th class="onload-sort">Last Name</th>
+          <th >Last Name</th>
           <th>First Name</th>
           <th class="order-by-desc">Birth Date</th>
           <th>Employee ID</th>
           <th>Department</th>
+          <th>Runtime</th>
+          <th class="onload-sort">File Size</th>
         </tr>
       </thead>
       <tr>
@@ -23,27 +25,35 @@ <h1>Testing table sort js</h1>
         <td>1706,1,17</td>
         <td></td>
         <td>k-level</td>
+        <td>1h 1m 17s</td>
+        <td>10b</td>
       </tr>
       <tr>
         <td>da Vinci</td>
         <td>Zarlo</td>
         <td>1452.4.15</td>
         <td></td>
         <td></td>
+        <td>1m 45s</td>
+        <td>192038998987021b</td>
       </tr>
       <tr>
         <td>Statham</td>
         <td></td>
         <td>1967-7-26</td>
         <td></td>
         <td>HR</td>
+        <td>11m 40s</td>
+        <td>134809b</td>
       </tr>
       <tr>
         <td>Micheal</td>
         <td></td>
         <td>1958/8/21</td>
         <td>54</td>
         <td>Marketing</td>
+        <td>29s</td>
+        <td>30980980b</td>
       </tr>
 
       <tr>
@@ -52,6 +62,8 @@ <h1>Testing table sort js</h1>
         <td>1994/9/23</td>
         <td>134</td>
         <td>Marketing</td>
+        <td>41s</td>
+        <td>902938402398b</td>
       </tr>
     </table>
   </body>

diff --git a/public/table-sort.js b/public/table-sort.js
@@ -59,10 +59,64 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     }
   }
 
+  function addInferredClass(th, columnLength, currentCount, classToAdd) {
+    const threshold = columnLength / 2;
+    if (currentCount >= threshold) {
+      th.classList.add(classToAdd);
+    }
+  }
+
+  function inferSortClasses(tableRows, tableHeadHeaders) {
+    for (let [columnIndex, th] of tableHeadHeaders.entries()) {
+      const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
+      const regexFileSizeSort = /^([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
+      let runtimeSortCounter = 0,
+        fileSizeSortCounter = 0;
+
+      let tableColumnLength = th.parentElement.childElementCount;
+      for (let tr of tableRows) {
+        let runtimeSortMatch, fileSizeSortMatch;
+        const tableColumn = tr.querySelectorAll("td").item(columnIndex);
+        if (tableColumn.innerText) {
+          runtimeSortMatch = tableColumn.innerText.match(
+            regexMinutesAndSeconds
+          );
+          fileSizeSortMatch = tableColumn.innerText.match(regexFileSizeSort);
+        }
+        if (runtimeSortMatch) {
+          runtimeSortCounter++;
+        }
+        if (fileSizeSortMatch) {
+          fileSizeSortCounter++;
+        }
+      }
+      // TODO: refactor this into one function called addInferredClasses that loops over sort classes and counters
+      addInferredClass(
+        th,
+        tableColumnLength,
+        runtimeSortCounter,
+        "runtime-sort"
+      );
+      addInferredClass(
+        th,
+        tableColumnLength,
+        fileSizeSortCounter,
+        "file-size-sort"
+      );
+    }
+  }
+
   function makeTableSortable(sortableTable) {
     const tableBody = getTableBody(sortableTable);
     const tableHead = sortableTable.querySelector("thead");
     const tableHeadHeaders = tableHead.querySelectorAll("th");
+    const tableRows = tableBody.querySelectorAll("tr");
+
+    const isNoSortClassInference =
+      sortableTable.classList.contains("no-class-infer");
+    if (!isNoSortClassInference) {
+      inferSortClasses(tableRows, tableHeadHeaders);
+    }
 
     for (let [columnIndex, th] of tableHeadHeaders.entries()) {
       if (!th.classList.contains("disable-sort")) {
@@ -124,24 +178,26 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
 
     function sortByRuntime(tableRows, columnData) {
       for (let [i, tr] of tableRows.entries()) {
-        const regexMinutesAndSeconds = /^(\d+m)\s?(\d+s)$/i;
+        const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
         let columnOfTd = tr
           .querySelectorAll("td")
           .item(columnIndex).textContent;
         let match = columnOfTd.match(regexMinutesAndSeconds);
-        let minutesInSeconds,
-          seconds,
-          timeinSeconds = [0, 0, 0];
+        let [minutesInSeconds, hours, seconds, timeinSeconds] = [0, 0, 0, 0];
         if (match) {
-          const regexMinutes = match[1];
+          const regexHours = match[1];
+          if (regexHours) {
+            hours = Number(regexHours.replace("h", "")) * 60 * 60;
+          }
+          const regexMinutes = match[2];
           if (regexMinutes) {
             minutesInSeconds = Number(regexMinutes.replace("m", "")) * 60;
           }
-          const regexSeconds = match[2];
+          const regexSeconds = match[3];
           if (regexSeconds) {
             seconds = Number(regexSeconds.replace("s", ""));
           }
-          timeinSeconds = minutesInSeconds + seconds;
+          timeinSeconds = hours + minutesInSeconds + seconds;
         }
         columnData.push(`${timeinSeconds}#${i}`);
         columnIndexAndTableRow[columnData[i]] = tr.innerHTML;

diff --git a/src/test-table.js b/src/test-table.js
@@ -92,8 +92,8 @@ export class App extends Component {
                   <th className="order-by-desc">Forks</th>
                   <th className="order-by-desc">Open issues</th>
                   <th className="order-by-desc">Watchers</th>
-                  <th className="order-by-desc">Stars</th>
-                  <th className="order-by-desc">Size (MB)</th>
+                  <th className="order-by-desc">Sktars</th>
+                  <th className="onload-sort">Size (MB)</th>
                 </tr>
               </thead>
               <tbody className="table-hover">
@@ -114,7 +114,7 @@ export class App extends Component {
                     <td> {repo.open_issues}</td>
                     <td> {repo.watchers}</td>
                     <td> {repo.stargazers_count}</td>
-                    <td> {Math.round(repo.size / 1000)}</td>
+                    <td> {repo.size * 1000 + "B"}</td>
                   </tr>
                 ))}
               </tbody>

diff --git a/test/table.js b/test/table.js
@@ -7,7 +7,7 @@ const tableSortJs = require("../public/table-sort");
 function createTestTable(
   testTableData,
   thAttributes = { classTags: "", colspan: "" },
-  props = { colsToClick: [], invisibleIndex: [] }
+  props = { colsToClick: [], invisibleIndex: [] ,tableTags:""}
 ) {
   const numberOfTableColumns = Object.keys(testTableData).length;
   let testTableHeaders = "";

diff --git a/test/table.test.js b/test/table.test.js
@@ -257,10 +257,13 @@ test("time-sort class", () => {
       {
         col0: [
           "2m 52s",
+          "1h 20m 10s",
           "3s",
+          "11h 10m 10s",
           "7s",
           "11m 40s",
           "36s",
+          "1h 10m 10s",
           "9m 44s",
           "1m 36s",
           "41s",
@@ -274,6 +277,18 @@ test("time-sort class", () => {
       }
     )
   ).toStrictEqual({
-    col0: ["3s", "7s", "36s", "41s", "1m 36s", "2m 52s", "9m 44s", "11m 40s"],
+    col0: [
+      "3s",
+      "7s",
+      "36s",
+      "41s",
+      "1m 36s",
+      "2m 52s",
+      "9m 44s",
+      "11m 40s",
+      "1h 10m 10s",
+      "1h 20m 10s",
+      "11h 10m 10s",
+    ],
   });
 });