Date Format Question

[SkyTien]

I tried to rewrite the date format like this.

 values: [
        [60 * 60 * 24 * 365, '{YYYY}',       7,   '',                     1],
        [60 * 60 * 24 * 28,  '{MMM}',        7,   '\n{YYYY}',             1],
        [60 * 60 * 24,       '{M}/{D}',      7,   '\n{YYYY}',             1],
        [60 * 60,            '{HH}:{mm}',    4,   '\n{M}/{D}',            1],
        [60,                 '{HH}:{mm}',    4,   '\n{M}/{D}',            1],
        [1,                  ':{ss}',        2,   '\n{M}/{D} {HH}:{mm}',  1],
        [1e-3,               ':{ss}.{fff}',  2,   '\n{M}/{D} {HH}:{mm}',  1]
      ]

https://jsfiddle.net/STien/kdf6jnzm/1/

In version 1.1.0, first x element will show the correct date and {HH}:{mm}.
But in the newest version, didn't show the date but get extra '4' after {HH}:{mm}.
How can I fix it?

[leeoniya]

yeah, sorry. the config format got expanded to be more flexible and to support more contextual refinement.

you'll need to tweak your settings slightly.

take a look at #299, #303, and the full default array in https://github.com/leeoniya/uPlot/tree/master/docs#axis--grid-opts

[leeoniya]

going to close this as resolved. let me know if you have any issues.

[kjyv]

For reference: it seems this can't be an array anymore but needs to be a function. So I used:
values: (u, vals, space) => vals.map(v => uPlot.tzDate(new Date(v * 1e3), 'Europe/Paris').toLocaleString()),

[leeoniya]

@kjyv not sure what you mean. can you provide an example that doesnt work?

this works for me: https://jsfiddle.net/omc8wx47/. what's a bit odd about it is that with this (default) array i get the dates rendered over the years, but if i omit this, i get only years (which i think is the correct behavior).

EDIT: never mind, it works correctly if the timestamps are in seconds instead of millis. copy/pasted wrong thing.

https://jsfiddle.net/omc8wx47/1/

const opts = {
  width: 800,
  height: 400,
  axes: [
    {
      values: [
        [31536000, "{YYYY}",       null,                          null,  null,                    null, null,             null, 1],
        [ 2419200, "{MMM}",        "\n{YYYY}",                    null,  null,                    null, null,             null, 1],
        [   86400, "{M}/{D}",      "\n{YYYY}",                    null,  null,                    null, null,             null, 1],
        [    3600, "{h}{aa}",      "\n{M}/{D}/{YY}",              null, "\n{M}/{D}",              null, null,             null, 1],
        [      60, "{h}:{mm}{aa}", "\n{M}/{D}/{YY}",              null, "\n{M}/{D}",              null, null,             null, 1],
        [       1, ":{ss}",        "\n{M}/{D}/{YY} {h}:{mm}{aa}", null, "\n{M}/{D} {h}:{mm}{aa}", null, "\n{h}:{mm}{aa}", null, 1],
        [   0.001, ":{ss}.{fff}",  "\n{M}/{D}/{YY} {h}:{mm}{aa}", null, "\n{M}/{D} {h}:{mm}{aa}", null, "\n{h}:{mm}{aa}", null, 1],
      ]
    }
  ],
  series: [
    {},
    {
      stroke: 'blue',
    },
  ],
};

let data = [
  [0, 1672531200],
  [1, 2],
];

let plot1 = new uPlot(opts, data, document.body);

[kjyv]

Hey, sorry for taking a bit of time to answer. Your jsfiddle obviously works, so something must different in my case.
The stacktrace I get is:

uPlot.iife.js:813 Uncaught TypeError: parts[i] is not a function
    at uPlot.iife.js:813:61
    at uPlot.iife.js:1106:12
    at Array.map (<anonymous>)
    at Object.values (uPlot.iife.js:1079:18)
    at uPlot.iife.js:4095:38
    at Array.forEach (<anonymous>)
    at axesCalc (uPlot.iife.js:4053:9)
    at convergeSize (uPlot.iife.js:3132:25)
    at _commit (uPlot.iife.js:4343:5)

and I'm using

axes: [
            {
                // [0]:   minimum num secs in found axis split (tick incr)
                // [1]:   default tick format
                // [2-7]: rollover tick formats
                // [8]:   mode: 0: replace [1] -> [2-7], 1: concat [1] + [2-7]
                values: [
                    // tick incr        default           year                             month    day                        hour     min             sec       mode
                    [3600 * 24 * 365,   "{YYYY}",         null,                            null,    null,                      null,    null,           null,        1],
                    [3600 * 24 * 28,    "{MMM}",          "\n{YYYY}",                      null,    null,                      null,    null,           null,        1],
                    [3600 * 24,         "{M}/{D}",        "\n{YYYY}",                      null,    null,                      null,    null,           null,        1],
                    [3600,              "{hh}",           "\n{M}/{D}/{YY}",                null,    "\n{M}/{D}",               null,    null,           null,        1],
                    [60,                "{hh}:{mm}",      "\n{M}/{D}/{YY}",                null,    "\n{M}/{D}",               null,    null,           null,        1],
                    [1,                 ":{ss}",          "\n{M}/{D}/{YY} {hh}:{mm}",      null,    "\n{M}/{D} {hh}:{mm}",     null,    "\n{hh}:{mm}",  null,        1],
                    [0.001,             ":{ss}.{fff}",    "\n{M}/{D}/{YY} {hh}:{mm}",      null,    "\n{M}/{D} {hh}:{mm}",     null,    "\n{hh}:{mm}",  null,        1],
                ],
            },
            (...)            
            ```

[leeoniya]

so something must different in my case.

maybe your timestamps are in ms but you did not set opts.ms: 1?

i really dont feel like guessing through what may be wrong from code snippets and pasted console errors. please make a fiddle that fails in the way you describe.

[kjyv]

Sure, I understand it's a bit annoying this way. I was actually meaning to but jsfiddle didn't load for me yesterday. I don't really need to supply the values in this format, it works fine with a function for my use case. So please also consider that I'm just reporting this in order so you can maybe find a bug, in case there is one.

So here is a repro case: https://jsfiddle.net/y9sr1fgn/4/
It seems if I use the values definition from yours it also works. I've copied that block from https://github.com/leeoniya/uPlot/tree/master/docs#axis--grid-opts and only modified it for 24 hour time format.
I've only now found this ticket which is exactly the same problem: #534.

I guess if possible, showing a better error message if the format string is invalid might help.