Use automatic percent formatting

[bitigchi]

Thank you for your contribution to the Pi-hole Community!

Please read the comments below to help us consider your Pull Request.

We are all volunteers and completing the process outlined will help us review your commits quicker.

Please make sure you

1. Base your code and PRs against the repositories developmental branch.
2. Sign Off all commits as we enforce the DCO for all contributions
3. Sign all your commits as they must have verified signatures
4. File a pull request for any change that requires changes to our documentation at our documentation repo

---

What does this PR aim to accomplish?:

It uses automatic percent formatting in the code. This automatically formats the percent values in accordance with the user's locale. For instance, some languages use different percent signs, and some use different posititoning other than standard 100%.

How does this PR accomplish the above?:

By using the appropriate NumberFormatter API.

---

By submitting this pull request, I confirm the following:

1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
2. I have commented my proposed changes within the code and I have tested my changes.
3. I am willing to help maintain this change if there are issues with it later.
4. It is compatible with the EUPL 1.2 license
5. I have squashed any insignificant commits. (git rebase)
6. I have checked that another pull request for this purpose does not exist.
7. I have considered, and confirmed that this submission will be valuable to others.
8. I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
9. I give this submission freely, and claim no ownership to its content.

---

• I have read the above and my PR is ready for review. Check this box to confirm

[bitigchi]

My first time doing something in JS, so I'm not sure if it does what it wants to do right now. Untested.

[bitigchi]

Can anyone tell me why the CI is still failing? After many wrestling with JS functions, I finally got it to work I think, but I cannot make the CI happy :). Any assistance is appreciated.

[LizenzFass78851]

From file scripts/pi-hole/js/formatter.mjs
try replacing the following section

export function toPercent(number, fractionDigits = 0) {
  const userLocale = navigator.language || "en-US";
  return new Intl.NumberFormat(userLocale, {
    style: "percent",
    minimumFractionDigits: fractionDigits,
    maximumFractionDigits: fractionDigits,
  }).format(number / 100);
}

as follows.

export function toPercent(number, fractionDigits = 0) {
    const userLocale = navigator.language || "en-US";
    return new Intl.NumberFormat(userLocale, {
        style: "percent",
        minimumFractionDigits: fractionDigits,
        maximumFractionDigits: fractionDigits,
    }).format(number / 100);
}

Spaces may not be set correctly.

[PromoFaux]

If you click the details of each failed CI job, it will give you an explanation.

I suspect the Tests / Node error is the same

[bitigchi]

I fixed the editor CI but still getting the following Tests / Node error:

Error: The Prettier config tabWidth is 4 while XO space is 2
at mergeWithPrettierConfig (file:///home/runner/work/web/web/node_modules/xo/lib/options-manager.js:461:9)
at file:///home/runner/work/web/web/node_modules/xo/lib/options-manager.js:443:60
at file:///home/runner/work/web/web/node_modules/lodash-es/_createFlow.js:71:31
at buildConfig (file:///home/runner/work/web/web/node_modules/xo/lib/options-manager.js:277:3)
at parseOptions (file:///home/runner/work/web/web/node_modules/xo/lib/options-manager.js:582:52)
at async Promise.all (index 3)
at async getOptionGroups (file:///home/runner/work/web/web/node_modules/xo/lib/options-manager.js:596:21)
at async Object.lintFiles (file:///home/runner/work/web/web/node_modules/xo/index.js:78:17)
at async file:///home/runner/work/web/web/node_modules/xo/cli.js:212:18
Error: Process completed with exit code 1.

[PromoFaux]

Ignoring the CI tests failing for now (and as a hint, you can run the tests locally with npm run test)

If there is any value in this PR - perhaps it should also be expanded to account for regional formatting differences in all numbers, not just the percentages. Example: In the UK the thousand separator is a ,, whereas in Germany it is a .

[bitigchi]

It automatically formats the decimal separators as well, so no worries there. If there are other places in the code base that does not use localised formatting (not percent values) would love to help in a future PR.

In the previous version there was this PHP code, but it looks like removed. I couldn't find the equivalent though.

[yubiuser]

Error: The Prettier config tabWidth is 4 while XO space is 2

We set xo space here

web/package.json

Lines 59 to 60 in 8f23b3a

	"prettier": true,
	"space": 2,

But there is no tabWidth setting in the code base. Do you run any automatic formatting (prettier?) in your local editor? E.g. vscode has a prettiere/tabWidth setting.

[bitigchi]

I just use plain Vim. :)

[PromoFaux]

Worked it out locally. It's because your additional file has the mjs extension and not js. Change the extension and the tests will pass. (and remove that line you added in to force the test to pass)

[bitigchi]

The CI is now telling me to use 2 spaces after file rename...

[yubiuser]

This is expected. and desired.

web/.editorconfig

Lines 17 to 18 in be05b0f

	[*.js]
	indent_size = 2

[bitigchi]

YES. AT LAST, YES.

Ready now. Thanks for all the help.

[PromoFaux]

@bitigchi

you need to add toPercent: toPercent, to the window.utils function at the bottom

[bitigchi]

Ah, sorry. Added now.

[PromoFaux]

Tested by setting locale to ar-EG in Chrome's sensors

Before change:

After change:

I'm sure there are other

[PromoFaux]

If there are other places in the code base that does not use localised formatting (not percent values) would love to help in a future PR.

Please take a look at other numbers. We use .toLocaleString in some places, but apparently this is not as efficient as intl.numformat

If you're up for the challenge, see if you can find and fix more localisation issues :)

One place I see already might be the top x domains tables, note the numbers in the screenshots below are arabic at the top, yet not in the tables

[bitigchi]

Looks great! By the way, where did the Memory Usage percent value did disappear to? In the closed PR of mine against master, I fixed that in PHP as well, but in the development branch it is not there...

I'll check other numbers and fix them too!

[PromoFaux]

In the closed PR of mine against master, I fixed that in PHP as well

You're right. CPU Percentage as well.

Comparing the changes in #2971, and in this one - perhaps you forgot to include them in this one after basing on development-v6 ?

PS.
I see another one 😏

[bitigchi]

It was all in Lua. Anyway, I'll do a fresh rebase and see what happens. :)