|
2 | 2 |
|
3 | 3 | Embedding Plotly Charts in Stipple.
|
4 | 4 |
|
5 |
| -Both a StipplePlotly-API and the PlotlyBase API are supported. |
| 5 | +### News: Syntax for event forwarding has changed! |
| 6 | +The standard API is now PlotlyBase, the StipplePlotly API is considered legacy. |
6 | 7 |
|
7 |
| -#### Latest example with forwarding of plotly events |
8 |
| -##### Note: Syntax for event forwarding has changed! |
| 8 | +### Example with forwarding of plotly events |
9 | 9 | See the docstrings of `watchplots()` and `watchplot()` for more details!
|
10 | 10 |
|
11 | 11 | ```julia
|
12 |
| -@reactive! mutable struct Example <: ReactiveModel |
| 12 | +using Stipple, Stipple.ReactiveTools |
| 13 | +using StipplePlotly |
| 14 | +using PlotlyBase |
| 15 | + |
| 16 | +@app Example begin |
13 | 17 | @mixin plot::PBPlotWithEvents
|
| 18 | + @in plot_cursor = Dict{String, Any}() |
| 19 | + |
| 20 | + @onchange isready begin |
| 21 | + isready || return |
| 22 | + p = Plot(scatter(y=1:10)) |
| 23 | + plot.layout = p.layout |
| 24 | + plot.data = p.data |
| 25 | + end |
| 26 | + |
| 27 | + @onchange plot_selected begin |
| 28 | + haskey(plot_selected, "points") && @info "Selection: $(getindex.(plot_selected["points"], "pointIndex"))" |
| 29 | + end |
| 30 | + |
| 31 | + @onchange plot_click begin |
| 32 | + @info "$plot_click" |
| 33 | + end |
| 34 | + |
| 35 | + @onchange plot_hover begin |
| 36 | + @info "hovered over $(plot_hover["points"][1]["x"]):$(plot_hover["points"][1]["y"])" |
| 37 | + # @info "$plot_hover" |
| 38 | + end |
| 39 | + |
| 40 | + @onchange plot_cursor begin |
| 41 | + @info "cursor moved to $(plot_cursor["cursor"]["x"]):$(plot_cursor["cursor"]["y"])" |
| 42 | + # @info "$plot_cursor" |
| 43 | + end |
14 | 44 | end
|
15 | 45 |
|
16 | 46 | # commented lines below: manual definition of plot_events
|
17 |
| -# @reactive! mutable struct Example <: ReactiveModel |
18 |
| -# plot::R{Plot} = Plot() |
19 |
| -# plot_selected::R{Dict{String, Any}} = Dict{String, Any}() |
20 |
| -# plot_hover::R{Dict{String, Any}} = Dict{String, Any}() |
| 47 | +# @app Example begin |
| 48 | +# @in plot = Plot() |
| 49 | +# @in plot_selected = Dict{String, Any}() |
| 50 | +# @in plot_click = Dict{String, Any}() |
| 51 | +# @in plot_hover = Dict{String, Any}() |
| 52 | +# @in plot_cursor = Dict{String, Any}() |
21 | 53 | # end
|
22 | 54 |
|
23 |
| -function ui(model::Example) |
24 |
| - page(model, class = "container", |
| 55 | +Stipple.js_mounted(::Example) = watchplots() |
| 56 | + |
| 57 | +# the keyword argument 'keepselection' (default = false) controls whether the selection outline shall be removed after selection |
| 58 | +function ui() |
25 | 59 | row(class = "st-module", [
|
26 |
| - plotly(:plot, syncevents = true), |
27 |
| - ])) |
| 60 | + plotly(:plot, syncevents = true, keepselection = false), |
| 61 | + ]) |
28 | 62 | end
|
29 | 63 |
|
30 |
| -# The following line will watch all plots that have `syncevents` enabled |
31 |
| -# or that have set `syncprefix` explicitly. |
32 |
| -Stipple.js_mounted(::Example) = watchplots(:Example) |
33 |
| - |
34 |
| -function handlers(model) |
35 |
| - on(model.isready) do isready |
36 |
| - isready || return |
37 |
| - push!(model) |
38 |
| - end |
39 |
| - |
40 |
| - on(model.plot_selected) do data |
41 |
| - haskey(data, "points") && @info "Selection: $(getindex.(data["points"], "pointIndex"))" |
42 |
| - end |
43 |
| - |
44 |
| - return model |
45 |
| -end |
| 64 | +@page("/", ui, model = Example) |
46 | 65 | ```
|
| 66 | +Possible forwarded events are |
| 67 | +- '_selected' (Selection changed) |
| 68 | +- '_hover' (hovered over data point) |
| 69 | +- '_click' (click event on plot area) |
| 70 | +- '_relayout' (plot layout changed) |
| 71 | +- '_cursor' (current mouse position, not covered in PBPlotWithEvents in order to reduce data traffic) |
| 72 | + |
47 | 73 | For more Stipple Plotly Demos please check: [Stipple Demos Repo](https://github.com/GenieFramework/StippleDemos)
|
48 | 74 |
|
49 | 75 | ## Acknowledgement
|
|
0 commit comments