Support for percentages in numeric-sort.

LeeWannacott · Mar 30, 2024 · dd9cf7d · dd9cf7d
1 parent 8f38e5f
commit dd9cf7d
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -70,13 +70,14 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http
 
 <br>
 
-| &lt;th&gt; Inferred Classes. | Description                                                                                                                         |
-| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| "numeric-sort"               | Sorts numbers including decimals - Positive, Negative (in both minus and parenthesis representations). Supports for common currencies e.g ($£€¥)   |
-| "dates-dmy-sort"             | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" as separator.                                                |
-| "dates-ymd-sort"             | Sorts dates in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) yyyy/mm/dd format. e.g (2021/10/28). Use "/" or "-" as separator. |
-| "file-size-sort"             | Sorts file sizes(B->TiB) uses the binary prefix. (e.g 10 B, 100 KiB, 1 MiB); optional space between number and prefix.              |
-| "runtime-sort"               | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column...               |
+| &lt;th&gt; Inferred Classes. | Description                                                                                                                                      |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| "numeric-sort"               | Sorts numbers including decimals - Positive, Negative (in both minus and parenthesis representations).
+|                              | Supports common currencies e.g ($£€¥) and percentage signs e.g (0.39%) |
+| "dates-dmy-sort"             | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" as separator.                                                             |
+| "dates-ymd-sort"             | Sorts dates in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) yyyy/mm/dd format. e.g (2021/10/28). Use "/" or "-" as separator.              |
+| "file-size-sort"             | Sorts file sizes(B->TiB) uses the binary prefix. (e.g 10 B, 100 KiB, 1 MiB); optional space between number and prefix.                           |
+| "runtime-sort"               | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column...                            |
 
 <br>
 

diff --git a/public/table-sort.js b/public/table-sort.js
@@ -65,8 +65,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       const dmyRegex = /^(\d\d?)[/-](\d\d?)[/-]((\d\d)?\d\d)/;
       const ymdRegex = /^(\d\d\d\d)[/-](\d\d?)[/-](\d\d?)/;
       const numericRegex =
-        /^-?(?:[$£€¥₩₽₺₣฿₿Ξξ¤¿\u20A1\uFFE0]\d{1,3}(?:[',]\d{3})*(?:\.\d+)?|\d+(?:\.\d+)?(?:[',]\d{3})*?)$/;
-
+        /^-?(?:[$£€¥₩₽₺₣฿₿Ξξ¤¿\u20A1\uFFE0]\d{1,3}(?:[',]\d{3})*(?:\.\d+)?|\d+(?:\.\d+)?(?:[',]\d{3})*?)(?:%?)$/;
 
       const inferableClasses = {
         runtime: { regexp: runtimeRegex, class: "runtime-sort", count: 0 },
@@ -93,11 +92,11 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
         for (let key of Object.keys(inferableClasses)) {
           let classRegexp = inferableClasses[key].regexp;
           let columnOfTd = testingTableSortJS
-          ? tableColumn.textContent
-          : tableColumn.innerText;
-          if (columnOfTd !== undefined && columnOfTd.match(classRegexp) ) {
-              foundMatch = true;
-              inferableClasses[key].count++;
+            ? tableColumn.textContent
+            : tableColumn.innerText;
+          if (columnOfTd !== undefined && columnOfTd.match(classRegexp)) {
+            foundMatch = true;
+            inferableClasses[key].count++;
           }
           if (inferableClasses[key].count >= threshold) {
             th.classList.add(inferableClasses[key].class);
@@ -360,10 +359,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     }
 
     function handleNumbers(str1, str2) {
-      const currencyAndComma =  /[$£€¥₩₽₺₣฿₿Ξξ¤¿\u20A1\uFFE0, ]/g
-      str1 = str1.replace(currencyAndComma, "");
-      str2 = str2.replace(currencyAndComma, "");
-      const [num1, num2] = [parseNumberFromString(str1),parseNumberFromString(str2)];
+      const matchCurrencyCommaAndPercent = /[$£€¥₩₽₺₣฿₿Ξξ¤¿\u20A1\uFFE0,% ]/g;
+      str1 = str1.replace(matchCurrencyCommaAndPercent, "");
+      str2 = str2.replace(matchCurrencyCommaAndPercent, "");
+      const [num1, num2] = [
+        parseNumberFromString(str1),
+        parseNumberFromString(str2),
+      ];
 
       if (!isNaN(num1) && !isNaN(num2)) {
         return num1 - num2;
@@ -564,7 +566,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       }
       timesClickedColumn += 1;
 
-
       const hasThClass = {
         dataSort: th.classList.contains("data-sort"),
         fileSize: th.classList.contains("file-size-sort"),

diff --git a/test/table.test.js b/test/table.test.js
@@ -617,6 +617,55 @@ test("Sort all combination of negative and positive integers and decimal numbers
   });
 });
 
+test("numeric-sort - percentages including negative", () => {
+  expect(
+    createTestTable(
+      {
+        col0: {
+          td: [
+            "0.88%",
+            "-0.98%",
+            "0.22%",
+            "-0.28%",
+            "0.27%",
+            "0.273%",
+            "(0.273%)",
+            "(0.893%)",
+            "22.273%",
+            "100.273%",
+            "10.273%",
+            "-10.273%",
+            "-81.273%",
+            "-82.273%",
+            "11.823%",
+            "11.803%",
+          ],
+        },
+      },
+      { classTags: "numeric-sort" }
+    )
+  ).toStrictEqual({
+    col0: [
+      "-82.273%",
+      "-81.273%",
+      "-10.273%",
+      "-0.98%",
+      "(0.893%)",
+      "-0.28%",
+      "(0.273%)",
+      "0.22%",
+      "0.27%",
+      "0.273%",
+      "0.88%",
+      "10.273%",
+      "11.803%",
+      "11.823%",
+      "22.273%",
+      "100.273%",
+    ],
+  });
+});
+
 test("numeric-sort - various currency", () => {
   expect(
     createTestTable(

diff --git a/test/tagsInferenceTable.test.js b/test/tagsInferenceTable.test.js
@@ -150,12 +150,16 @@ test("InferSortClassesOnTH - NUMERIC", () => {
           "-£755,905",
         ],
       },
+      col5: {
+        td: ["0.88%", "-0.98%", "0.22%", "0.28%", "0.57%"],
+      },
     })
   ).toStrictEqual([
     "numeric-sort",
     "numeric-sort",
     "numeric-sort",
     "numeric-sort",
     "numeric-sort",
+    "numeric-sort",
   ]);
 });