Skip to content

Commit f666e82

Browse files
committed
update README
1 parent cf50fab commit f666e82

File tree

1 file changed

+54
-28
lines changed

1 file changed

+54
-28
lines changed

README.md

Lines changed: 54 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,74 @@
22

33
Embedding Plotly Charts in Stipple.
44

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.
67

7-
#### Latest example with forwarding of plotly events
8-
##### Note: Syntax for event forwarding has changed!
8+
### Example with forwarding of plotly events
99
See the docstrings of `watchplots()` and `watchplot()` for more details!
1010

1111
```julia
12-
@reactive! mutable struct Example <: ReactiveModel
12+
using Stipple, Stipple.ReactiveTools
13+
using StipplePlotly
14+
using PlotlyBase
15+
16+
@app Example begin
1317
@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
1444
end
1545

1646
# 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}()
2153
# end
2254

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()
2559
row(class = "st-module", [
26-
plotly(:plot, syncevents = true),
27-
]))
60+
plotly(:plot, syncevents = true, keepselection = false),
61+
])
2862
end
2963

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)
4665
```
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+
4773
For more Stipple Plotly Demos please check: [Stipple Demos Repo](https://github.com/GenieFramework/StippleDemos)
4874

4975
## Acknowledgement

0 commit comments

Comments
 (0)