Responsive charts #11
Conversation
{"actions":False} is kept as the default for vega_options
Following advice from FastHTML discord
Co-authored-by: vincent d warmerdam <[email protected]>
…nto vega-embed-kwargs
Enables chart to fill up width of parent div when toggled
Unit test for full_width parameter
|
|
||
| """ | ||
| if full_width: | ||
| chart = chart.properties(width="container") |
There was a problem hiding this comment.
Just to check, does this override existing properties on the chart?
There was a problem hiding this comment.
As in, if the height is set beforehand, does this test remove that property?
There was a problem hiding this comment.
Good question, I just went to do a little test and confirmed that the original height is preserved.
def generate_chart():
pltr = pd.DataFrame({"y": [1, 2, 3, 2], "x": [3, 1, 2, 4]})
chart = (
alt.Chart(pltr)
.mark_line()
.encode(x="x", y="y")
.properties(width=400, height=200)
)
return altair2fasthtml(chart, full_width=True)
x = generate_chart()
# Results in a chart with height = 200, width = "container"
print(to_xml(x))There was a problem hiding this comment.
Ah nice, could we add that as a unit test?
|
Sweet. LGTM. I will make a release as well. One thing before I do, you've done some good work here by not only suggesting the improvement but also implementing it so I would like to give you a shoutout on my socials. Got a Twitter/LinkedIn account? If you prefer not to get the extra attention feel free to say so (some folks prefer that). |
|
Thanks Vincent, that's very nice of you to suggest! Your feedback and suggestions made for a great collaborative experience for me too. I'll DM you my socials on Discord since I see you in the FastHTML server. |
#9
This PR adds the
full_widthparameter toaltair2fasthtmland custom CSS for responsive charts.The
full_widthparameter is optional, and defaults to False. When set to True, the resulting chart will take up the full width of its parent container.