diff --git a/README.md b/README.md index 5731a66..7aad2ea 100644 --- a/README.md +++ b/README.md @@ -2,48 +2,74 @@ Embedding Plotly Charts in Stipple. -Both a StipplePlotly-API and the PlotlyBase API are supported. +### News: Syntax for event forwarding has changed! +The standard API is now PlotlyBase, the StipplePlotly API is considered legacy. -#### Latest example with forwarding of plotly events -##### Note: Syntax for event forwarding has changed! +### Example with forwarding of plotly events See the docstrings of `watchplots()` and `watchplot()` for more details! ```julia -@reactive! mutable struct Example <: ReactiveModel +using Stipple, Stipple.ReactiveTools +using StipplePlotly +using PlotlyBase + +@app Example begin @mixin plot::PBPlotWithEvents + @in plot_cursor = Dict{String, Any}() + + @onchange isready begin + isready || return + p = Plot(scatter(y=1:10)) + plot.layout = p.layout + plot.data = p.data + end + + @onchange plot_selected begin + haskey(plot_selected, "points") && @info "Selection: $(getindex.(plot_selected["points"], "pointIndex"))" + end + + @onchange plot_click begin + @info "$plot_click" + end + + @onchange plot_hover begin + @info "hovered over $(plot_hover["points"][1]["x"]):$(plot_hover["points"][1]["y"])" + # @info "$plot_hover" + end + + @onchange plot_cursor begin + @info "cursor moved to $(plot_cursor["cursor"]["x"]):$(plot_cursor["cursor"]["y"])" + # @info "$plot_cursor" + end end # commented lines below: manual definition of plot_events -# @reactive! mutable struct Example <: ReactiveModel -# plot::R{Plot} = Plot() -# plot_selected::R{Dict{String, Any}} = Dict{String, Any}() -# plot_hover::R{Dict{String, Any}} = Dict{String, Any}() +# @app Example begin +# @in plot = Plot() +# @in plot_selected = Dict{String, Any}() +# @in plot_click = Dict{String, Any}() +# @in plot_hover = Dict{String, Any}() +# @in plot_cursor = Dict{String, Any}() # end -function ui(model::Example) - page(model, class = "container", +Stipple.js_mounted(::Example) = watchplots() + +# the keyword argument 'keepselection' (default = false) controls whether the selection outline shall be removed after selection +function ui() row(class = "st-module", [ - plotly(:plot, syncevents = true), - ])) + plotly(:plot, syncevents = true, keepselection = false), + ]) end -# The following line will watch all plots that have `syncevents` enabled -# or that have set `syncprefix` explicitly. -Stipple.js_mounted(::Example) = watchplots(:Example) - -function handlers(model) - on(model.isready) do isready - isready || return - push!(model) - end - - on(model.plot_selected) do data - haskey(data, "points") && @info "Selection: $(getindex.(data["points"], "pointIndex"))" - end - - return model -end +@page("/", ui, model = Example) ``` +Possible forwarded events are +- '_selected' (Selection changed) +- '_hover' (hovered over data point) +- '_click' (click event on plot area) +- '_relayout' (plot layout changed) +- '_cursor' (current mouse position, not covered in PBPlotWithEvents in order to reduce data traffic) + For more Stipple Plotly Demos please check: [Stipple Demos Repo](https://github.com/GenieFramework/StippleDemos) ## Acknowledgement