-
Notifications
You must be signed in to change notification settings - Fork 327
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
Formatting works only for the first ui.mark in ui.plot(marks=[...]) #617
Comments
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 |
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. |
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. |
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() |
Wave SDK Version, OS
0.12.1, Linux, Firefox
Actual behavior
I am using a plot card with multiple
marks
passed to theplot
attribute. Eachui.mark
applies theintl
function to format the numbers and defines the limits for x axis. Both the number formatting and x limits are applied only to the firstui.mark
, ignored by the second one.Steps To Reproduce
I am using the following code inside ui.plot_card
The text was updated successfully, but these errors were encountered: