How to format timestamps with intl for plots?

[dulajra]

I am using intl support to display time series data as a histogram. Here is the code I am using.

ui.visualization(
        plot=ui.plot(
            [
                ui.mark(
                    type="interval",
                    x='={{intl x_min type="time" dateStyle="short" timeStyle="short" }}',
                    x1='={{intl x_min type="time" dateStyle="short" timeStyle="short" }}',
                    x2='={{intl x_max type="time" dateStyle="short" timeStyle="short" }}',
                    x_scale="time",
                    x_title=histogram.x_label,
                    y_min=0,
                    y="=y",
                    y_title=histogram.y_label,
                    fill_color=SHOE_WAX,
                    stroke_color=IRON,
                    label_overlap="hide",
                )
            ]
        ),
        data=data(
            fields=["x_min", "x_max", "y"],
            pack=True,
            rows=d,
        ),
    )

Here are some sample data

[('2023-02-14T06:45', '2023-02-14T06:48', 0), ('2023-02-14T06:48', '2023-02-14T06:54', 0), ('2023-02-14T06:54', '2023-02-14T07:00', 0), ('2023-02-14T07:00', '2023-02-14T07:06', 0), ('2023-02-14T07:06', '2023-02-14T07:12', 0), ('2023-02-14T07:12', '2023-02-14T07:18', 0), ('2023-02-14T07:18', '2023-02-14T07:24', 0), ('2023-02-14T07:24', '2023-02-14T07:30', 15310), ('2023-02-14T07:30', '2023-02-14T07:36', 60000), ('2023-02-14T07:36', '2023-02-14T07:42', 24690), ('2023-02-14T07:42', '2023-02-14T07:45', 0)]

The timestamps are displayed in the mm/dd/yyyy format on the x axis. Can't we configure the timestamp format for x-axis? (ex: YYYY-MM-DD HH:MM)

[mturoci]

See https://wave.h2o.ai/docs/expressions/#formatting-date and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters for supported options.

[dulajra]

@mturoci Yes, I have already checked the docs and I see we can use the dateStyle and timeStyle params to change the format. But I didn't find a way to format the timestamp in a custom format like YYYY/MM/DD HH:MM. Because this is the format we are using in other places of the app and we need to use the same format everywhere to be consistent.

[mturoci]

TLDR: Custom formats are not supported.

The goal of internationalization is to prevent hardcoded formats since every country uses a different format for e.g. dates. You can read more here. This usually means it depends on user's browser locale preferences to achieve the best UX. I assume you have US English language in your browser or something hence it renders mm/dd/yyyy format.

[dulajra]

Got it! Thanks @mturoci for the summary.

[mturoci]

Np :)