Skip to content

Commit a803133

Browse files
authored
add wasm example to book (#91)
1 parent 2782089 commit a803133

File tree

1 file changed

+54
-0
lines changed

1 file changed

+54
-0
lines changed

docs/book/src/getting_started.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,57 @@ To add the ability to save plots in the following formats: png, jpeg, webp, svg,
9999
[dependencies]
100100
plotly = { version = "0.7.0", features = ["kaleido"] }
101101
```
102+
103+
## WebAssembly Support
104+
105+
As of v0.8.0, [plotly.rs](https://github.com/igiagkiozis/plotly) can now be used in a `Wasm` environment by enabling the `wasm` feature in your `Cargo.toml`:
106+
107+
```toml
108+
[dependencies]
109+
plotly = { version = ">=0.8.0" features = ["wasm"] }
110+
```
111+
112+
The `wasm` feature exposes rudimentary bindings to the `plotly.js` library, which can then be used in a `wasm` environment such as the [`Yew`](https://yew.rs/) frontend framework.
113+
114+
To make a very simple `Plot` component might look something like:
115+
116+
```rust
117+
use yew::prelude::*;
118+
119+
#[derive(Properties, PartialEq)]
120+
pub struct PlotProps {
121+
pub id: String,
122+
pub plot: plotly::Plot,
123+
pub class: Option<Classes>,
124+
}
125+
126+
#[function_component(Plot)]
127+
pub fn plot(props: &PlotProps) -> Html {
128+
let PlotProps { id, plot, class } = props;
129+
130+
let p = yew_hooks::use_async::<_, _, ()>({
131+
let id = id.clone();
132+
let plot = plot.clone();
133+
async move {
134+
plotly::bindings::new_plot(&id, &plot).await;
135+
Ok(())
136+
}
137+
});
138+
139+
{
140+
let id = id.clone();
141+
let plot = plot.clone();
142+
use_effect_with_deps(
143+
move |(_, _)| {
144+
p.run();
145+
|| ()
146+
},
147+
(id, plot),
148+
);
149+
}
150+
151+
html! {
152+
<div id={id.clone()} class={class.clone()}></div>
153+
}
154+
}
155+
```

0 commit comments

Comments
 (0)