-
-
Notifications
You must be signed in to change notification settings - Fork 386
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
Time format depending on the locale (bcp47) #474
Comments
there are a lot of possibilities here, and some will work while others won't. here is my initial attempt: https://jsfiddle.net/vhq7dgew/1/ // cache the Intl formatter
let fmtOpts = {timeZone:'UTC',year:'numeric',month:'numeric',day:'numeric',hour:'numeric',minute:'numeric',second:'numeric'};
let format = new Intl.DateTimeFormat('ko-KR', fmtOpts).format;
function utcDate(ts) {
return uPlot.tzDate(new Date(ts * 1e3), 'Etc/UTC');
}
let opts = {
title: "Korean / UTC",
tzDate: utcDate,
width: 640,
height: 280,
axes: [
{
// axis ticks formatter
values: (u, splits) => splits.map(ts => format(utcDate(ts)))
}
],
series: [
{
// legend value formatter (doesnt get proper UTC timezone)
value: (u, ts) => format(utcDate(ts)),
// uPlot's formatter works okay:
// value: "{YYYY}-{MM}-{DD} {HH}"
},
{
stroke: "red",
}
],
};
let data = [
[1609459200, 1609480800],
[ 35, 71],
];
let uplot = new uPlot(opts, data, document.body); unfortunately, it looks like the browser's built-in Intl formatter doesnt properly pick up the timezone-shifted date. uPlot's internal formatter does work, and you can use Lines 137 to 150 in 1692dc3
you would also have to provide the korean weekday and month names (short and long). you can see how it's done here: https://github.com/leeoniya/uPlot/blob/master/demos/months-ru.html unfortunately it's not as easy as just setting some locale parameter, but it is possible if you need a specific locale, and it is not a lot of code. alternatively you can maybe use something like a 40KB dependency: https://github.com/spencermountain/spacetime if you would be interested in working through the config natively in uPlot, i can help (it would be a good demo to add), but you'll need to provide templates for the localization formats you want as well as the month/weekday names. |
Using the toLocaleDateString function, we can get any string names of the days of the week (short and long) and the names of the month (short and long).
We can also choose to write the year in 2 digits or in 4 digits with the {year: '2-digit'} and {year: 'numeric'} options.
I think the most correct way would be to replace the string patterns ("{MMM}", "{DD}.{MM}.{YY}", etc.) with option objects for the toLocaleDateString function.
With this option, we do not need to add a slash between the date and month for the "en-US" locale or dot for the "de-DE" locale. Please think about this idea, it will be a universal solution for any locale for multilingual applications. P.S. |
that's a good point / idea :)
if you look at the default config array, you'll see that many tick formats have 2 lines, so there needs to be linebreak support -- easy with templates, but with Intl options objects i guess we'd need to support arrays in each slot. another point is that if you want to put some work into a PR, i'd be open to additionally supporting config objects, or maybe already-compiled formatting functions in that config array and other places that accept fmtDate templates. formatting functions would have the benefit of already encoding the locale ( Lines 263 to 267 in 1692dc3
it exists: Lines 322 to 323 in 1692dc3
the reasoning behind using unix timestamps originally is that for most datasets of server monitoring, 1s is sufficient resolution, and over the wire adding |
You can call toLocaleDateString for each string separately with different parameters.
I'm new to js and some uPlot code is hard to understand, so I probably won't be able to change functions in uPlot ... |
can you provide a config array that uses opts objects (and arrays for line breaks) that should produce the matching tick formats as the existing one based on fmtDate templates? i would like to see what this looks like. |
Unfortunately, I haven't written anything yet, this is just an idea that it would be better to use locales to output the date in uPlot. |
you don't need to understand the internals for what i am asking. i would like for you to create an equivalent tick formatting table using opts objects (as discussed above). the current output needs to be reproducible using the opts objects format. if you can prove this can be done, then i will do some additional work to test it in uPlot. you can paste your converted table in this issue (no need to integrate into uPlot yet, i will do this). i do not know the exact details of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat to properly reproduce the current table, and do not have time to do so currently. Lines 137 to 150 in 1692dc3
|
Ok, when I have the result, I'll post it here. |
I think this might be more or less what you're looking for, please correct me if you mean something else. It would require to exchange the formatting function (fmtDate?) with Intl.DateTimeFormat().format() and add new lines and colons where needed manually. I think this should not be a problem because these are inserted at defined places? Also it would be good if it was possible to switch between automatic locale and manually set locale so the user can switch the language if needed. |
Hi,
How to display time in locale specific format (bcp47 language tag)?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
Thanks.
The text was updated successfully, but these errors were encountered: