Internationalize and humanize numbers (at the same time)

[ivan-aksamentov]

🙋 Feature Request

Now that the numbers are displayed in a human-readable form, would be nice to also make them internationalized.

🔦 Context

😯 Describe the feature

It is hard to describe all the requirements specifically, without knowing the languages. This should be covered by a library.

💻 Examples

Here is an non-exhaustive list of requirements:

• [ ] in some locales comma is used instead of the dot as a decimal separator
• [ ] in some locales thousands (or even tenth of thousands) are space-separated
• [ ] exponent suffixes "k", "M" should ideally be translated, (e.g. "k" is "Tnd." in German and "тыс." in Russian)

💁 Possible Solution

A mature library should be used. Either D3.js currently used or number formatting, or react-i18next used for i18n or both.

Related:

• This is a continuation of https://github.com/neherlab/covid19_scenarios/issues/158 implemented in https://github.com/neherlab/covid19_scenarios/pull/196 (except for i18n part)
• https://github.com/neherlab/covid19_scenarios/issues/56

[gj262]

Web standard Intl.NumberFormat would be good. Probably { notation: "compact" , compactDisplay: "short" }. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

const number = 12345678910;

console.log(new Intl.NumberFormat('en-GB', { notation: "compact" , compactDisplay: "short" }).format(number));
console.log(new Intl.NumberFormat('en-GB', { notation: "compact" , compactDisplay: "long" }).format(number));

console.log(new Intl.NumberFormat('de-DE', { notation: "compact" , compactDisplay: "short" }).format(number));
console.log(new Intl.NumberFormat('de-DE', { notation: "compact" , compactDisplay: "long" }).format(number));

console.log(new Intl.NumberFormat('ru-RU', { notation: "compact" , compactDisplay: "short" }).format(number));
console.log(new Intl.NumberFormat('ru-RU', { notation: "compact" , compactDisplay: "long" }).format(number));

Gives:

> "12B"
> "12 billion"
> "12 Mrd."
> "12 Milliarden"
> "12 млрд"
> "12 миллиардов"

[gj262]

As @rcbevans points out in #210, this issue is not fixed and the 'humanized' totals are overly rounded!