Allow displaying plot axis via intl-formatted strings.

[Nayananga]

Wave SDK Version, OS

0.21.1, macOS 12.5.1

Actual behavior

A chart unable to show different times within a day

Expected behavior

Users need to show data on different dates or different times within a day or both scenarios at the same time (23:55 today to 00:04 tomorrow)

Steps To Reproduce

Minimal code (inspired by this code here #1472 (comment))

from h2o_wave import main, app, Q, ui, data


@app('/')
async def serve(q: Q):
    q.page['ex1'] = ui.plot_card(
        box='1 1 4 3',
        title='Different Dates',
        data=data('low high price', 3, rows=[
            ("2022-01-01", "2022-02-01", 100),
            ("2022-02-01", "2022-03-01", 150),
            ("2022-03-01", "2022-03-31", 200),
        ]),
        plot=ui.plot([ui.mark(
            type='interval',
            y='=price', y_min=0,
            x1='=low', x2='=high', x_scale="time"
        )])
    )

    q.page['ex2'] = ui.plot_card(
        box='1 4 4 3',
        title='Same day Different times (24 hr clock)',
        data=data('low high price', 3, rows=[
            ("2022-02-01 00:00", "2022-02-01 00:05", 100),
            ("2022-02-01 00:05", "2022-02-01 11:59", 150),
            ("2022-02-01 11:59", "2022-02-01 23:59", 200),
        ]),
        plot=ui.plot([ui.mark(
            type='interval',
            y='=price', y_min=0,
            x1='=low', x2='=high', x_scale="time"
        )])
    )

    q.page['ex3'] = ui.plot_card(
        box='1 7 4 3',
        title='Same day Different times (12 hr clock)',
        data=data('low high price', 3, rows=[
            ("2022-02-01 00:00 AM", "2022-02-01 00:05 AM", 100),
            ("2022-02-01 00:05 AM", "2022-02-01 11:59 AM", 150),
            ("2022-02-01 11:59 AM", "2022-02-01 11:59 PM", 200),
        ]),
        plot=ui.plot([ui.mark(
            type='interval',
            y='=price', y_min=0,
            x1='=low', x2='=high', x_scale="time"
        )])
    )
    q.page['ex4'] = ui.plot_card(
        box='1 10 4 3',
        title='Two days Different times (12 hr clock)',
        data=data('low high price', 3, rows=[
            ("2022-02-01 06:00 PM", "2022-02-02 06:00 AM", 100),
            ("2022-02-02 06:00 AM", "2022-02-02 06:00 PM", 150),
            ("2022-02-02 06:00 PM", "2022-02-03 06:00 AM", 200),
        ]),
        plot=ui.plot([ui.mark(
            type='interval',
            y='=price', y_min=0,
            x1='=low', x2='=high', x_scale="time"
        )])
    )

    await q.page.save()

[Nayananga]

cc @dulajra @shereezhang

[mturoci]

I would say not allowing both dates and times is by design. The reasoning is simple: Axis labels would take a lot of space, thus this could work only for a few data points. In general, it's better to have either only dates or only time axis.

@lo5 please correct me if I am wrong since you are the original author here.

[shihan007]

@mturoci This is a must needed feature for monitoring. To be able view chart from different times and dates. Which we already have in grafana. Can we have this feature for charts?
cc: @lo5 @shereezhang @Nayananga

[shihan007]

Expected behaviour - if user select days, x axis will display days and if user select time like last 5 minutes or 12 hr x axis will display time
cc: @Nayananga @shereezhang

[Nayananga]

I would say not allowing both dates and times is by design. The reasoning is simple: Axis labels would take a lot of space, thus this could work only for a few data points. In general, it's better to have either only dates or only time axis.

@lo5 please correct me if I am wrong since you are the original author here.

@mturoci x_scale="time" does not accept time-only values, but if we provide time as plain strings it will only plot those values as strings so we cannot present the time gaps properly, How would you suggest showing time values?

[mturoci]

if we provide time as plain strings it will only plot those values as strings so we cannot present the time gaps properly

can you elaborate?

Another option could be displaying time as "floats" (e.g. 10:30 => 10.30) and using x_scale='interval'.

@lo5 any ideas?

[Nayananga]

Another option could be displaying time as "floats" (e.g. 10:30 => 10.30) and using x_scale='interval'.

CC: @ShehanIshanka

[shereezhang]

Some inspiration from Grafana:

1. IF total time duration <= 5 min, display HH:MM:SS
2. IF 5 min < total time duration <= 24 hours, display HH:MM
3. IF 24 hours < total time duration <= 7 days, display Month/Day HH:MM
4. IF 7 days < total time duration, display Month/Day

right now, we can do 1,2,4, but not 3 because it needs both the date and time.
@mturoci it would be nice to have both DATE & TIME possible as one label is a situation like below... eg. 4 day range - so if we only displayed dates, there would be duplicates for each date, but is there is only time, it's hard for the user to figure out which day each time is for in a 96 hr time range

@Nayananga ill create the ticket for this when we decide whether # 3 is possible!

[Nayananga]

Some inspiration from Grafana:

1. IF total time duration <= 5 min, display HH:MM:SS
2. IF 5 min < total time duration <= 24 hours, display HH:MM
3. IF 24 hours < total time duration <= 7 days, display Month/Day HH:MM
4. IF 7 days < total time duration, display Month/Day

right now, we can do 1,2,4, but not 3 because it needs both the date and time. @mturoci it would be nice to have both DATE & TIME possible as one label is a situation like below... eg. 4 day range - so if we only displayed dates, there would be duplicates for each date, but is there is only time, it's hard for the user to figure out which day each time is for in a 96 hr time range

@Nayananga ill create the ticket for this when we decide whether # 3 is possible!

Thank you for the detailed explanation @shereezhang, Let me add a little bit more context to the issue,

@mturoci This is bit tricky to explain, let me attach two examples,

This is when I provide time as a string (even with dates)

This is when I provide time with x_scale="time"

As you can see, the second image gives more insights about the distribution with regards to time but the first image just plots data points evenly spaced, So when I want to show only time, x_scale="time" does not work, so I can't set that property. Then I have to provide time as a string value (something like "23:59") Then WAVE just plots those data points as it is without knowing the importance of time property, So I end up with a plot like in image 1. Hope I made it clear, If not let's just stick with @shereezhang 's comment