refactor examples to generate standalone html

Signed-off-by: Andrei Gherghescu <[email protected]>

Author: andrei-ng

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
       # lint the plotly library for wasm target
       - run: cargo clippy --package plotly --target wasm32-unknown-unknown -- -D warnings
       # lint the wasm examples
-      - run: cd ${{ github.workspace }}/examples && cargo clippy --target wasm32-unknown-unknown --package "wasm*"
+      - run: cd ${{ github.workspace }}/examples/wasm-yew && cargo clippy --target wasm32-unknown-unknown --all
 
   semver:
     name: semver
@@ -115,11 +115,11 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        example: [wasm-yew-minimal, wasm-yew-callback-minimal]
+        example: [basic, callback-example]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: dtolnay/rust-toolchain@stable
         with:
           targets: wasm32-unknown-unknown
-      - run: cd ${{ github.workspace }}/examples/${{ matrix.example }} && cargo build --target wasm32-unknown-unknown
+      - run: cd ${{ github.workspace }}/examples/wasm-yew/${{ matrix.example }} && cargo build --target wasm32-unknown-unknown

examples/.gitignore

@@ -1 +1 @@
-out/
+output/

examples/3d_charts/README.md

@@ -11,7 +11,7 @@ use rand::Rng;
 
 // 3D Scatter Plots
 // ANCHOR: simple_scatter3d_plot
-fn simple_scatter3d_plot(show: bool) -> Plot {
+fn simple_scatter3d_plot(show: bool, file_name: &str) {
     let n: usize = 100;
     let t: Vec<f64> = Array::linspace(0., 10., n).into_raw_vec_and_offset().0;
     let y: Vec<f64> = t.iter().map(|x| x.sin()).collect();
@@ -21,15 +21,15 @@ fn simple_scatter3d_plot(show: bool) -> Plot {
     let mut plot = Plot::new();
     plot.add_trace(trace);
 
+    let path = write_example_to_html(&plot, file_name);
     if show {
-        plot.show();
+        plot.show_html(path);
     }
-    plot
 }
 // ANCHOR_END: simple_scatter3d_plot
 
 // ANCHOR: customized_scatter3d_plot
-fn customized_scatter3d_plot(show: bool) -> Plot {
+fn customized_scatter3d_plot(show: bool, file_name: &str) {
     let n: usize = 100;
     let t: Vec<f64> = Array::linspace(0., 10., n).into_raw_vec_and_offset().0;
     let y: Vec<f64> = t.iter().map(|x| x.sin()).collect();
@@ -114,16 +114,16 @@ fn customized_scatter3d_plot(show: bool) -> Plot {
         .height(500);
     plot.set_layout(layout);
 
+    let path = write_example_to_html(&plot, file_name);
     if show {
-        plot.show();
+        plot.show_html(path);
     }
-    plot
 }
 // ANCHOR_END: customized_scatter3d_plot
 
 // 3D Line Plots
 // ANCHOR: simple_line3d_plot
-fn simple_line3d_plot(show: bool) -> Plot {
+fn simple_line3d_plot(show: bool, file_name: &str) {
     let n: usize = 100;
     let t: Vec<f64> = Array::linspace(0., 10., n).into_raw_vec_and_offset().0;
     let y: Vec<f64> = t.iter().map(|x| x.sin()).collect();
@@ -133,16 +133,16 @@ fn simple_line3d_plot(show: bool) -> Plot {
     let mut plot = Plot::new();
     plot.add_trace(trace);
 
+    let path = write_example_to_html(&plot, file_name);
     if show {
-        plot.show();
+        plot.show_html(path);
     }
-    plot
 }
 // ANCHOR_END: simple_line3d_plot
 
 // 3D Surface Plot
 // ANCHOR: surface_plot
-fn surface_plot(show: bool) -> Plot {
+fn surface_plot(show: bool, file_name: &str) {
     let n: usize = 100;
     let x: Vec<f64> = Array::linspace(-10., 10., n).into_raw_vec_and_offset().0;
     let y: Vec<f64> = Array::linspace(-10., 10., n).into_raw_vec_and_offset().0;
@@ -159,15 +159,15 @@ fn surface_plot(show: bool) -> Plot {
     let mut plot = Plot::new();
     plot.add_trace(trace);
 
+    let path = write_example_to_html(&plot, file_name);
     if show {
-        plot.show();
+        plot.show_html(path);
     }
-    plot
 }
 // ANCHOR_END: surface_plot
 
 // ANCHOR: mesh_3d_plot
-fn mesh_3d_plot(show: bool) -> Plot {
+fn mesh_3d_plot(show: bool, file_name: &str) {
     let trace = Mesh3D::new(
         vec![0, 1, 2, 0],
         vec![0, 0, 1, 2],
@@ -182,15 +182,15 @@ fn mesh_3d_plot(show: bool) -> Plot {
     let mut plot = Plot::new();
     plot.add_trace(trace);
 
+    let path = write_example_to_html(&plot, file_name);
     if show {
-        plot.show();
+        plot.show_html(path);
     }
-    plot
 }
 // ANCHOR_END: mesh_3d_plot
 
 // ANCHOR: colorscale_plot
-fn colorscale_plot(show: bool) -> Plot {
+fn colorscale_plot(show: bool, file_name: &str) {
     let mut plot = Plot::new();
 
     let x = (0..100)
@@ -252,34 +252,31 @@ fn colorscale_plot(show: bool) -> Plot {
 
     plot.set_layout(layout);
 
+    let path = write_example_to_html(&plot, file_name);
     if show {
-        plot.show();
+        plot.show_html(path);
     }
-    plot
 }
 // ANCHOR_END: colorscale_plot
 
-fn write_example_to_html(plot: Plot, name: &str) {
-    std::fs::create_dir_all("./out").unwrap();
-    let html = plot.to_inline_html(Some(name));
-    std::fs::write(format!("./out/{}.html", name), html).unwrap();
+fn write_example_to_html(plot: &Plot, name: &str) -> String {
+    std::fs::create_dir_all("./output").unwrap();
+    let path = format!("./output/{}.html", name);
+    plot.write_html(&path);
+    path
 }
 
 fn main() {
     // Change false to true on any of these lines to display the example.
-
     // Scatter3D Plots
-    write_example_to_html(simple_scatter3d_plot(false), "simple_scatter3d_plot");
-    write_example_to_html(simple_line3d_plot(false), "simple_line3d_plot");
-    write_example_to_html(
-        customized_scatter3d_plot(false),
-        "customized_scatter3d_plot",
-    );
-    write_example_to_html(colorscale_plot(false), "colorscale_plot");
+    simple_scatter3d_plot(false, "simple_scatter3d_plot");
+    simple_line3d_plot(false, "simple_line3d_plot");
+    customized_scatter3d_plot(false, "customized_scatter3d_plot");
+    colorscale_plot(false, "colorscale_plot");
 
     // Surface Plots
-    write_example_to_html(surface_plot(false), "surface_plot");
+    surface_plot(false, "surface_plot");
 
     // Mesh Plots
-    write_example_to_html(mesh_3d_plot(false), "mesh_3d_plot");
+    mesh_3d_plot(false, "mesh_3d_plot");
 }

examples/3d_charts/src/main.rs

@@ -1,4 +1,4 @@
 [workspace]
 members = ["*"]
 resolver = "2"
-exclude = ["jupyter", "target"]
+exclude = ["jupyter", "target", "wasm-yew"]

examples/Cargo.toml

@@ -1,5 +1,11 @@
 # Examples
 
-This folder contains a multitude of usage examples covering as many features of the library as possible. Instructions on how to run each example can be found in each example's subdirectory.
+This folder contains a multitude of usage examples covering as many features of the library as possible. 
 
-Pull requests with more examples of different behaviour are always welcome.
+To run the basic examples, `cd` into the chosen example folder and run `cargo run`. Upon completion all the generated plots of that example are located in the `output` folder as `html` files and can be open in your browser. 
+
+You can also configure the chosen example to open the resulting plots automatically. To do so, open the `src/main.rs` file, locate the `main` function and change the boolean flag of the called functions from `false` to `true`. This will make the examples open the default browser application and load the generated HTML files.
+
+For more complex examples, instructions on how to run them can be found in the README of each example's subdirectory.
+
+Pull requests with more examples of different behavior are always welcome.