Formatting works only for the first ui.mark in ui.plot(marks=[...])

[dott1718]

Wave SDK Version, OS

0.12.1, Linux, Firefox

Actual behavior

I am using a plot card with multiple marks passed to the plot attribute. Each ui.mark applies the intl function to format the numbers and defines the limits for x axis. Both the number formatting and x limits are applied only to the first ui.mark, ignored by the second one.

Steps To Reproduce

I am using the following code inside ui.plot_card

    plot=ui.plot(
        [
            ui.mark(
                type="interval",
                color_range="#888888",
                y="=Variable",
                x="={{intl PSI minimum_fraction_digits=3 maximum_fraction_digits=3}}",
                x_max=3.0,
            ),
            ui.mark(
                type="interval",
                color="#111111",
                y="=Variable",
                x="={{intl PSI2 minimum_fraction_digits=3 maximum_fraction_digits=3}}",
                x_max=3.0,
            ),
        ]
    ),

[dott1718]

Here is a simpler script to recreate the behavior:

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


@app("/")
async def serve(q: Q):

    ds = [
        ("spam", 1.4911111, 1.4911111),
        ("eggs", 2.491111, 0),
        ("ham", 0, 1.991111),
    ]

    q.page["pricing"] = ui.plot_card(
        box="1 1 4 5",
        title="Interval",
        data=data(
            fields=["product", "price1", "price2"],
            rows=ds,
            pack=True,
        ),
        plot=ui.plot(
            [
                ui.mark(
                    type="interval",
                    x="=product",
                    y="={{intl price1 minimum_fraction_digits=3 maximum_fraction_digits=3}}",
                    y_max=5,
                ),
                ui.mark(
                    type="interval",
                    x="=product",
                    y="={{intl price2 minimum_fraction_digits=3 maximum_fraction_digits=3}}",
                    y_max=5,
                ),
            ]
        ),
    )

    await q.page.save()

The screenshots show that second ui.mark does not respect fraction_digits=3 and y_max=5

[mturoci]

Thanks for the issue @dott1718!

Not sure, but it seems like there is no need for 2 marks. Maybe you need something like this?

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


@app("/")
async def serve(q: Q):
    rows = [
        ('spam', 'price1', 1.4911111),
        ('spam', 'price2', 1.4911111),
        ('eggs', 'price1', 2.4911111),
        ('eggs', 'price2', 1.55555),
        ('ham', 'price1', 0.5324),
        ('ham', 'price2', 1.991111),
    ]
    q.page["pricing"] = ui.plot_card(
        box="1 1 4 5",
        title="Interval",
        data=data(fields=["product", "price", "value"], rows=rows),
        plot=ui.plot([
            ui.mark(type="interval", x="=product", y="={{intl value minimum_fraction_digits=3 maximum_fraction_digits=3}}", dodge='auto', color='=price', y_max=5)
        ]),
    )

    await q.page.save()

This also renders just a single y axis instead of 2 from your example.

@lo5 the reason why only first mark gets formatted properly is here. All the rest are ignored. Not sure what the correct spec for our plot behavior is though.

[dott1718]

In my use case I don't want to draw 2 groups of series, I am overlaying the first marks with second. If the formatting works as designed, we probably should add a comment to documentation to clarify this case.

[suthesank]

Faced the same issue recently with a chart combining line and area marks. Here's a workaround that helped me with the y-axis alignments.

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


@app("/")
async def serve(q: Q):

    ds = [
        ("spam", 1.4911111, 1.4911111),
        ("eggs", 2.491111, 0),
        ("ham", 0, 1.991111),
    ]
    
    # The key idea here is to manually add the max and min value you'd expect to see in price1 scale into price2 at the first x-axis index. As h20 wave plots the graph for you, these "fake points" will be over ridden by the actual ones in your dataset
    ds = [
        ("spam", 0, 5),
        ("spam", 0, 0),
        *ds
    ]

    q.page["pricing"] = ui.plot_card(
        box="1 1 4 5",
        title="Interval",
        data=data(
            fields=["product", "price1", "price2"],
            rows=ds,
            pack=True,
        ),
        plot=ui.plot(
            [
                ui.mark(
                    type="interval",
                    x="=product",
                    y="={{intl price1 minimum_fraction_digits=3 maximum_fraction_digits=3}}",
                ),
                ui.mark(
                    type="interval",
                    x="=product",
                    y="={{intl price2 minimum_fraction_digits=3 maximum_fraction_digits=3}}",
                ),
            ]
        ),
    )

    await q.page.save()