diff --git a/examples/visualizations/plotly_selections/app.py b/examples/visualizations/plotly_selections/app.py new file mode 100644 index 0000000..ef5ca36 --- /dev/null +++ b/examples/visualizations/plotly_selections/app.py @@ -0,0 +1,48 @@ +import plotly.express as px +from fasthtml.common import * + +# Add the Plotly library to the headers +app, rt = fast_app(hdrs=(Script(src="https://cdn.plot.ly/plotly-2.24.1.min.js"),)) + +def create_scatter_plot(): + # Create simple scatter plot with 5 points + fig = px.scatter( + x=[1, 2, 3, 4, 5], y=[2, 4, 1, 3, 5], labels={"x": "X Value", "y": "Y Value"} + ) + return fig.to_json() + +@rt +def index(): + return Titled("Interactive Plotly Selection", + P("Click any point to see its x-value!"), + # point-info will be updated based on what is clicked + Div(id="point-info")(P("No point selected yet")), + # plotly-container will be updated with the plot + Div(id="plotly-container"), + # Initialize the plot + Script( + f""" + // All the plot data is given in json form by `create_scatter_plot` + const plotData = {create_scatter_plot()}; + // Create the plot with that data in location with id `plotly-container` + Plotly.newPlot('plotly-container', plotData.data, plotData.layout); + + // Add click event handler + // Get thing with id `plotly-container`, and on plotly_click event, + // run the function + document.getElementById('plotly-container').on('plotly_click', function(data) {{ + // Get the first point clicked + const point = data.points[0]; + // Make HTMX request when point is clicked with the x-value + htmx.ajax('GET', `point/${{point.x}}`, {{target: '#point-info'}}); + }}); + """ + )) + + +@rt("/point/{x_val}") +def get(x_val: float): + # Return the x-value of the point clicked to the UI! + return P(Strong(f"You clicked the point with x-value: {x_val}")) + +serve() diff --git a/examples/visualizations/plotly_selections/card_thumbnail.gif b/examples/visualizations/plotly_selections/card_thumbnail.gif new file mode 100644 index 0000000..fb17291 Binary files /dev/null and b/examples/visualizations/plotly_selections/card_thumbnail.gif differ diff --git a/examples/visualizations/plotly_selections/card_thumbnail.png b/examples/visualizations/plotly_selections/card_thumbnail.png new file mode 100644 index 0000000..c3a7a3a Binary files /dev/null and b/examples/visualizations/plotly_selections/card_thumbnail.png differ diff --git a/examples/visualizations/plotly_selections/metadata.ini b/examples/visualizations/plotly_selections/metadata.ini new file mode 100644 index 0000000..ec0fafb --- /dev/null +++ b/examples/visualizations/plotly_selections/metadata.ini @@ -0,0 +1,4 @@ +[REQUIRED] +ImageAltText=Interactive Plotly chart demonstrating point selection and dynamic updates using HTMX +ComponentName=Interactive Plotly Selection +ComponentDescription=Example showing how to create interactive Plotly charts that communicate with FastHTML routes when data points are selected, enabling dynamic updates and actions based on user selections \ No newline at end of file