Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use automatic percent formatting #2972

Merged
merged 1 commit into from
Mar 4, 2024

Conversation

bitigchi
Copy link

@bitigchi bitigchi commented Mar 2, 2024

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
Copy link
Author

bitigchi commented Mar 2, 2024

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

@bitigchi bitigchi force-pushed the percent-i18n branch 11 times, most recently from 9897057 to acce30a Compare March 3, 2024 13:59
@bitigchi
Copy link
Author

bitigchi commented Mar 3, 2024

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
Copy link

LizenzFass78851 commented Mar 3, 2024

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
Copy link
Member

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

image

I suspect the Tests / Node error is the same

@bitigchi
Copy link
Author

bitigchi commented Mar 3, 2024

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.

Copy link
Member

@PromoFaux PromoFaux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 .

scripts/pi-hole/js/formatter.mjs Outdated Show resolved Hide resolved
scripts/pi-hole/js/formatter.mjs Outdated Show resolved Hide resolved
@bitigchi
Copy link
Author

bitigchi commented Mar 3, 2024

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
Copy link
Member

yubiuser commented Mar 3, 2024

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
Copy link
Author

bitigchi commented Mar 3, 2024

I just use plain Vim. :)

@PromoFaux
Copy link
Member

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
Copy link
Author

bitigchi commented Mar 3, 2024

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

@yubiuser
Copy link
Member

yubiuser commented Mar 3, 2024

This is expected. and desired.

web/.editorconfig

Lines 17 to 18 in be05b0f

[*.js]
indent_size = 2

@bitigchi bitigchi force-pushed the percent-i18n branch 2 times, most recently from 1abbfab to 67b6787 Compare March 3, 2024 20:15
@bitigchi
Copy link
Author

bitigchi commented Mar 3, 2024

YES. AT LAST, YES.

Ready now. Thanks for all the help.

@bitigchi bitigchi requested a review from PromoFaux March 3, 2024 20:57
@bitigchi bitigchi force-pushed the percent-i18n branch 2 times, most recently from 5d18647 to 9900c8b Compare March 4, 2024 13:26
@PromoFaux
Copy link
Member

@bitigchi

image

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

Signed-off-by: Emir SARI <emir_sari@icloud.com>
@bitigchi
Copy link
Author

bitigchi commented Mar 4, 2024

Ah, sorry. Added now.

@PromoFaux PromoFaux self-requested a review March 4, 2024 17:24
Copy link
Member

@PromoFaux PromoFaux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Before change:

image

After change:

image

I'm sure there are other

@PromoFaux
Copy link
Member

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

image

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

image

image

@PromoFaux PromoFaux merged commit f79a404 into pi-hole:development-v6 Mar 4, 2024
5 checks passed
@bitigchi bitigchi deleted the percent-i18n branch March 4, 2024 17:50
@bitigchi
Copy link
Author

bitigchi commented Mar 4, 2024

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
Copy link
Member

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

You're right. CPU Percentage as well.

image

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 😏

image

@bitigchi
Copy link
Author

bitigchi commented Mar 4, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants