Change decimal and thousands separator

[FabianSchmick]

Subject of the issue

In the Chart, the decimal (.) and thousands separator (,) follow the norm for most English-speaking countries. But there are many countries in the world where this is swapped. See: https://en.wikipedia.org/wiki/Decimal_separator#Conventions_worldwide

Expected behaviour

Define the decimal and thousands separator as an option for L.control.elevation or look for L.setLocale('de'); in the leaflet-elevation code for the current ones.

Actual behaviour

[Raruto]

Hi Fabian,

if i'm not mistaken it's the user's browser that chooses the preferred number convention.

Here the affected portions of code:

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/handlers/altitude.js#L54-L59

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/handlers/distance.js#L33-L37

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/utils.js#L150-L153

👋 Raruto

[FabianSchmick]

I think for the tooltip, we need to add .toLocaleString(), then the browser can choose the preferred number convention. (But this function call does not exist yet)

tooltip: {
    ...
    chart: (item) => L._("y: ") + _.round(item[opts.yAttr], opts.decimalsY).toLocaleString() + " " + altitude.label,
    marker: (item) => _.round(item[opts.yAttr], opts.decimalsY).toLocaleString() + " " + altitude.label,
    ...
},

But for the y-axis I don't know. Maybe this is more complex as this is dynamic.

[FabianSchmick]

I found the solution for the y-axis. In the d3-docs you can use the following method-call do define the separators:

import * as L from 'leaflet';
import * as d3 from 'd3';
global.d3 = d3;
...
import '@raruto/leaflet-elevation/dist/leaflet-elevation';
...

d3.formatDefaultLocale({
    "decimal": ",",
    "thousands": ".",
    "grouping": [3],
    "currency": ["", "\u00a0€"]
})

[Raruto]

@FabianSchmick ref: https://github.com/Raruto/leaflet-elevation/issues/271#issuecomment-1704803639

this function call does not exist yet

In such cases you can write your own custom handlers (starting from the default ones)

Below is a fairly detailed example:

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/examples/leaflet-elevation_extended-ui.html#L255-L271

If you think you have a relatively simple solution to set up, feel free to pitch a PR to that effect.

I'll close here for now.

👋 Raruto