Change decimal and thousands separator

[Fabian Schmick]

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:

leaflet-elevation/src/handlers/altitude.js

Lines 54 to 59 in ea15556

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

leaflet-elevation/src/handlers/distance.js

Lines 33 to 37 in ea15556

 tooltip: opts.distance && { 
 	name: 'x', 
 	chart: (item) => L._("x: ") + _.round(item[opts.xAttr], opts.decimalsX) + " " + distance.label, 
 	order: 20 
 }, 

leaflet-elevation/src/utils.js

Lines 150 to 153 in ea15556

 /** 
  * Limit floating point precision 
  */ 
 export const round        = L.Util.formatNum; 

👋 Raruto

[Fabian Schmick]

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.

[Fabian Schmick]

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: #271 (comment)

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:

leaflet-elevation/examples/leaflet-elevation_extended-ui.html

Lines 255 to 271 in ea15556

 handlers: [                               // <-- A list of: Dynamic imports || "ClassName" || function Name() { return { /* a custom object definition */ } } 
 	'Distance',                           // <-- same as: import("../src/handlers/distance.js") 
 	'Time',                               // <-- same as: import("../src/handlers/time.js") 
 	'Altitude',                           // <-- same as: import("../src/handlers/altitude.js") 
 	'Slope',                              // <-- same as: import("../src/handlers/slope.js") 
 	'Speed',                              // <-- same as: import("../src/handlers/speed.js") 
 	'Acceleration',                       // <-- same as: import("../src/handlers/acceleration.js") 
 	// 'Pace',                            // <-- same as: import("../src/handlers/pace.js") 
 	// "Heart",                           // <-- same as: import("../src/handlers/heart.js") 
 	// "Cadence",                         // <-- same as: import("../src/handlers/cadence.js") 
 	// import('../src/handlers/heart.js'), 
 	import('../src/handlers/cadence.js'), 
 	// import('../src/handlers/pace.js'), 
 	L.Control.Elevation.MyHeart,          // <-- see custom functions declared above 
 	// L.Control.Elevation.MyCadence,     // <-- see custom functions declared above 
 	L.Control.Elevation.MyPace,           // <-- see custom functions declared above 
 ], 

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