Localise number formatting in quiz stats

[minimalsm]

Description

Added enhanced localization and formatting for numbers on the quiz stats component:

• Formatted numbers and percentages based on user locale (We do this in quite a few places already, e.g. the layer 2 page)
• Handle placement of the in-text greater than indicator in RTL languages

Related Issue

#10320

[wackerow]

@minimalsm Left a few suggestions! If we use the after pseudoelement with content of +, the DOM will automatically render that inline and take direction into account (always placing it "after" by default). Should help simplify some logic here =)

[nhsz]

@minimalsm I've done some updates to they way I calculate average, new variable is parsedAverage

[minimalsm]

Updated @nhsz 🫡

[nhsz]

@minimalsm I'd suggest to parse integer numbers to avoid redundant decimals when float part is 0, like 0.0%, 50.0%, etc, IMO those should be displayed as 0%, 50%, etc.

I was doing that with

const parsedAverage = Number.isInteger(computedAverage)
    ? computedAverage
    : computedAverage.toFixed(2)

logic should be probably adapted a bit for this solution

[pettinarip]

Nice @minimalsm

---

Nice to have: would recommend to isolate all this new logic into its own function.

// to have something like this
const { language } = useI18next()
...
const formattedStats = getFormattedStats(language, userAverageScores)

[minimalsm]

@minimalsm I'd suggest to parse integer numbers to avoid redundant decimals when float part is 0, like 0.0%, 50.0%, etc, IMO those should be displayed as 0%, 50%, etc.

I was doing that with

const parsedAverage = Number.isInteger(computedAverage)
    ? computedAverage
    : computedAverage.toFixed(2)

logic should be probably adapted a bit for this solution

@nhsz the number formatter already does this for us (unless I misunderstand you).

const percentFormatter = new Intl.NumberFormat("en-US", {
    style: "percent",
    minimumSignificantDigits: 2,
    maximumSignificantDigits: 3,
  })

  console.log(percentFormatter.format(0.49)) // 49%
  console.log(percentFormatter.format(0.4900000000)) //49%
  console.log(percentFormatter.format(0.499)) //49.9%
  console.log(percentFormatter.format(0.4999)) // 50%

[minimalsm]

Nice @minimalsm

Nice to have: would recommend to isolate all this new logic into its own function.

// to have something like this
const { language } = useI18next()
...
const formattedStats = getFormattedStats(language, userAverageScores)

Good point! Done here 🫡

[nhsz]

@minimalsm I'd suggest to parse integer numbers to avoid redundant decimals when float part is 0, like 0.0%, 50.0%, etc, IMO those should be displayed as 0%, 50%, etc.

I was doing that with

const parsedAverage = Number.isInteger(computedAverage)
    ? computedAverage
    : computedAverage.toFixed(2)

logic should be probably adapted a bit for this solution

@nhsz the number formatter already does this for us (unless I misunderstand you).

const percentFormatter = new Intl.NumberFormat("en-US", {
    style: "percent",
    minimumSignificantDigits: 2,
    maximumSignificantDigits: 3,
  })

  console.log(percentFormatter.format(0.49)) // 49%
  console.log(percentFormatter.format(0.4900000000)) //49%
  console.log(percentFormatter.format(0.499)) //49.9%
  console.log(percentFormatter.format(0.4999)) // 50%

@minimalsm I tried completing a quiz with 50% score and it's displayed as 50.0% instead of 50% (integer). Also initial average appears as 0.0% instead of just 0%

[minimalsm]

@minimalsm I tried completing a quiz with 50% score and it's displayed as 50.0% instead of 50% (integer). Also initial average appears as 0.0% instead of just 0%

@nhsz should be fixed in this commit:

Can you confirm?

[nhsz]

@minimalsm I tried completing a quiz with 50% score and it's displayed as 50.0% instead of 50% (integer). Also initial average appears as 0.0% instead of just 0%

@nhsz should be fixed in this commit:

Can you confirm?

LGTM now, thanks! I have moved getFormattedStats to /utils to clean the codebase a bit. Merging!