first try

shimwell · shimwell · commit e05e4b242269 · 2023-05-12T21:37:09.000+01:00
diff --git a/Cargo.toml b/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "isotope_plotter"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+plotly = { path = "../../plotly", features = ["wasm"] }
+yew = "0.19.0"
+yew-hooks = "0.1.56"
+log = "0.4.6"
+wasm-logger = "0.2"
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
-# isotope_plotter.rs
-A prototype Rust WASM nuclear data plotter for nuclide cross sections
+Work in progress
+
+https://openmc-data-storage.github.io/isotope_plotter.rs/
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Plotly Yew</title>
+    <script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
+</head>
+
+<body></body>
+
+</html>
diff --git a/out.html b/out.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+</head>
+
+<body>
+    <div>
+        <script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>
+        <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
+        <div id="plotly-html-element" class="plotly-graph-div" style="height:100%; width:100%;"></div>
+
+        <script type="module">
+            const graph_div = document.getElementById("plotly-html-element");
+            await Plotly.newPlot(graph_div, {
+  "data": [
+    {
+      "type": "scatter",
+      "x": [
+        0,
+        1,
+        2
+      ],
+      "y": [
+        2,
+        1,
+        0
+      ]
+    }
+  ],
+  "layout": {},
+  "config": {}
+});
+        </script>
+    </div>
+</body>
+
+</html>
diff --git a/src/main.rs b/src/main.rs
@@ -0,0 +1,38 @@
+use plotly::{Plot, Scatter};
+use yew::prelude::*;
+
+#[function_component(App)]
+pub fn plot_component() -> Html {
+    let p = yew_hooks::use_async::<_, _, ()>({
+        let id = "plot-div";
+        let mut plot = Plot::new();
+        let trace = Scatter::new(vec![0, 1, 2], vec![2, 1, 0]);
+        plot.add_trace(trace);
+
+        let layout =
+            plotly::Layout::new().title(plotly::common::Title::new("Displaying a Chart in Yew"));
+        plot.set_layout(layout);
+
+        async move {
+            plotly::bindings::new_plot(id, &plot).await;
+            Ok(())
+        }
+    });
+
+    use_effect_with_deps(
+        move |_| {
+            p.run();
+            || ()
+        },
+        (),
+    );
+
+    html! {
+        <div id="plot-div"></div>
+    }
+}
+
+fn main() {
+    wasm_logger::init(wasm_logger::Config::default());
+    yew::start_app::<App>();
+}
