Open maartenbreddels opened 8 months ago
This might break classic notebook where requirejs is already available. Proof of concept fix.
The following code on colab works:
import altair as alt import pandas as pd from vega_datasets import data import IPython.display # make solara use a real cdn, since the solara cdn proxy is not available display(IPython.display.Javascript("solara_cdn = 'https://cdn.jsdelivr.net/npm/'")) import solara # title = "Altair visualization" source = data.seattle_weather() selected_datum = solara.reactive(None) @solara.component def Page(): def on_click(datum): selected_datum.value = datum chart = ( alt.Chart(source, title="Daily Max Temperatures (C) in Seattle, WA") .mark_rect() .encode( alt.X("date(date):O"), alt.Y("month(date):O"), alt.Color("max(temp_max)"), tooltip=[ alt.Tooltip("monthdate(date)", title="Date"), alt.Tooltip("max(temp_max)", title="Max Temp"), ], ) .configure_view(step=13, strokeWidth=0) .configure_axis(domain=False) ) with solara.Card("Annual Weather Heatmap for Seattle, WA"): solara.AltairChart(chart, on_click=on_click) df = source if selected_datum.value: month_date = selected_datum.value["monthdate_date_end"] dt = pd.to_datetime(month_date) df = df[(df["date"].dt.month == dt.month) & (df["date"].dt.day == dt.day)] solara.Markdown(f"Day of year: {dt.month_name()} - {dt.day}") solara.Button("Clear selection", on_click=lambda: selected_datum.set(None)) solara.display(df) with solara.Details("Click data"): solara.Markdown( f""" Click data:
{selected_datum.value} ``` """ ) else: solara.Markdown("Click on the chart to see data for a specific day")
Page()
This might break classic notebook where requirejs is already available. Proof of concept fix.
The following code on colab works:
Page()