From dd9cf7d8da7e671c2c5696b819bd2c80a8c48c14 Mon Sep 17 00:00:00 2001 From: LeeWannacott Date: Sat, 30 Mar 2024 22:11:15 +1300 Subject: [PATCH 1/2] Support for percentages in numeric-sort. --- README.md | 15 +++++----- public/table-sort.js | 25 +++++++++-------- test/table.test.js | 49 +++++++++++++++++++++++++++++++++ test/tagsInferenceTable.test.js | 4 +++ 4 files changed, 74 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index f40867f..7614000 100644 --- a/README.md +++ b/README.md @@ -70,13 +70,14 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http
-| <th> 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... | +| <th> 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... |
diff --git a/public/table-sort.js b/public/table-sort.js index c44ba3a..7004923 100644 --- 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 index 6eb460c..3a58eda 100644 --- 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 index 2cec693..b21631b 100644 --- a/test/tagsInferenceTable.test.js +++ b/test/tagsInferenceTable.test.js @@ -150,6 +150,9 @@ test("InferSortClassesOnTH - NUMERIC", () => { "-£755,905", ], }, + col5: { + td: ["0.88%", "-0.98%", "0.22%", "0.28%", "0.57%"], + }, }) ).toStrictEqual([ "numeric-sort", @@ -157,5 +160,6 @@ test("InferSortClassesOnTH - NUMERIC", () => { "numeric-sort", "numeric-sort", "numeric-sort", + "numeric-sort", ]); }); From f5a42b975112f8f70b6cc11163c51e69371623cd Mon Sep 17 00:00:00 2001 From: LeeWannacott Date: Sat, 30 Mar 2024 22:15:03 +1300 Subject: [PATCH 2/2] Format readme and swap cdn scripts. --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 7614000..c458b05 100644 --- a/README.md +++ b/README.md @@ -21,13 +21,13 @@ - Option 1: Load as script from a Content Delivery Network (CDN): ```javascript - + ``` -Or Minified (smaller size, but harder to debug!): +Or non-minified version (larger size, but easier to debug!): ```javascript - + ``` Example on how to use table-sort-js with [HTML](https://leewannacott.github.io/table-sort-js/docs/html5.html) @@ -70,14 +70,14 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http
-| <th> 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... | +| <th> 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... |