adding static export functionality with webdriver

 - allow user to reuse the exporter object
 - use data uri instead of saving to plot html file
 - added build.rs to download webdriver chromedriver/geckodriver
 - include example on how to use static export for json data
 - allow user to set browser capabilities via setter

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

Author: andrei-ng

Cargo.toml

@@ -1,3 +1,3 @@
 [workspace]
 resolver = "2"
-members = ["plotly", "plotly_derive", "plotly_kaleido"]
+members = ["plotly", "plotly_derive", "plotly_kaleido", "plotly_static"]

plotly/templates/plotly.min.js plotly/resource/plotly.min.jsplotly/templates/plotly.min.js renamed to plotly/resource/plotly.min.js

@@ -189,8 +189,7 @@ impl FromStr for Rgba {
         let prefix: &[_] = &['r', 'g', 'b', 'a', '('];
         let trimmed = rgba.trim_start_matches(prefix).trim_end_matches(')');
         let fields: Vec<&str> = trimmed.split(',').collect();
-        dbg!(&fields);
-        println!("{:?}", &fields);
+        // println!("{:?}", &fields);
         if fields.len() != 4 {
             Err(ParseError::new("Invalid string length of for RGBA color"))
         } else {

plotly/templates/tex-mml-chtml-3.2.0.js plotly/resource/tex-mml-chtml-3.2.0.jsplotly/templates/tex-mml-chtml-3.2.0.js renamed to plotly/resource/tex-mml-chtml-3.2.0.js

@@ -26,12 +26,17 @@ pub mod common;
 pub mod configuration;
 pub mod layout;
 pub mod plot;
+pub(crate) mod static_format;
 pub mod traces;
 
 pub use common::color;
 pub use configuration::Configuration;
 pub use layout::Layout;
-pub use plot::{ImageFormat, Plot, Trace};
+pub use plot::{Plot, Trace};
+#[cfg(feature = "kaleido")]
+pub use static_format::ImageFormat;
+#[cfg(not(feature = "kaleido"))]
+pub use static_format::ImageFormat;
 // Also provide easy access to modules which contain additional trace-specific types
 pub use traces::{
     box_plot, contour, heat_map, histogram, image, mesh3d, sankey, scatter, scatter3d,

plotly/templates/tex-svg-3.2.2.js plotly/resource/tex-svg-3.2.2.jsplotly/templates/tex-svg-3.2.2.js renamed to plotly/resource/tex-svg-3.2.2.js

@@ -66,7 +66,7 @@ See https://plotly.github.io/plotly.rs/content/getting_started.html for further
 "#;
 
 /// Image format for static image export.
-#[derive(Debug)]
+#[derive(Debug, Clone, Serialize)]
 pub enum ImageFormat {
     PNG,
     JPEG,
@@ -292,7 +292,7 @@ impl Plot {
     pub fn show_image(&self, format: ImageFormat, width: usize, height: usize) {
         use std::env;
 
-        let rendered = self.render_static(format, width, height);
+        let rendered = self.render_static(&format, width, height);
 
         // Set up the temp file with a unique filename.
         let mut temp = env::temp_dir();
@@ -472,10 +472,10 @@ impl Plot {
     }
 
     #[cfg(all(not(target_family = "wasm"), not(target_os = "android")))]
-    fn render_static(&self, format: ImageFormat, width: usize, height: usize) -> String {
+    pub fn render_static(&self, format: &ImageFormat, width: usize, height: usize) -> String {
         let tmpl = StaticPlotTemplate {
             plot: self,
-            format,
+            format: format.clone(),
             js_scripts: &self.js_scripts,
             width,
             height,
@@ -501,34 +501,22 @@ impl Plot {
 
     fn offline_js_sources() -> String {
         // tex-mml-chtml conflicts with tex-svg when generating Latex Titles
-        // let local_tex_mml_js = include_str!("../templates/tex-mml-chtml-3.2.0.js");
-        let local_tex_svg_js = include_str!("../templates/tex-svg-3.2.2.js");
-        let local_plotly_js = include_str!("../templates/plotly.min.js");
+        // let local_tex_mml_js = include_str!("../resource/tex-mml-chtml-3.2.0.js");
+        let local_tex_svg_js = include_str!("../resource/tex-svg-3.2.2.js");
+        let local_plotly_js = include_str!("../resource/plotly.min.js");
 
         format!(
             "<script type=\"text/javascript\">{}</script>\n
-            <script type=\"text/javascript\">
-            /**
-             * tex-svg JS script
-             **/
-            {}
-            </script>\n
-            <script type=\"text/javascript\">
-            /**
-             * tex-mml-chtml JS script
-             **/
-            {}
-            </script>\n
-            ",
-            local_plotly_js, local_tex_svg_js, ""
+            <script type=\"text/javascript\">{}</script>\n",
+            local_plotly_js, local_tex_svg_js,
         )
         .to_string()
     }
 
     fn online_cdn_js() -> String {
-        // Removed tex-mml-chtml as it conflicts with tex-svg when generating Latex
-        // Titles
-        r##"<script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js"></script>
+        // tex-mml-chtml conflicts with tex-svg when generating Latex Titles
+        r##"
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js"></script>
         <script src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>
         "##
         .to_string()

plotly/src/common/color.rs

@@ -0,0 +1,32 @@
+#![cfg(not(feature = "kaleido"))]
+use serde::Serialize;
+
+/// Image format for static image export.
+/// Redifined from `plotly_static` package to be used when `kaleido` feature is
+/// not enabled
+#[derive(Debug, Clone, Serialize)]
+pub enum ImageFormat {
+    PNG,
+    JPEG,
+    WEBP,
+    SVG,
+    PDF,
+    EPS,
+}
+
+impl std::fmt::Display for ImageFormat {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            f,
+            "{}",
+            match self {
+                Self::PNG => "png",
+                Self::JPEG => "jpeg",
+                Self::WEBP => "webp",
+                Self::SVG => "svg",
+                Self::PDF => "pdf",
+                Self::EPS => "eps",
+            }
+        )
+    }
+}

plotly/src/lib.rs

@@ -1,22 +1,22 @@
 <!doctype html>
 <html lang="en">
 
-<head>
-    <meta charset="utf-8" />
+    <head>
+        <meta charset="utf-8" />
     {{js_scripts}}
-</head>
+    </head>
 
-<body>
-    <div>
+    <body>
+        <div>
 
-        <div id="plotly-html-element" hidden></div>
-        <img id="plotly-img-element"></img>
+            <div id="plotly-html-element" hidden></div>
+            <img class="plotly-img-element" id="plotly-img-element"></img>
 
-        <script type="module">
-            const graph_div = document.getElementById("plotly-html-element");
-            await Plotly.newPlot(graph_div, {{ plot| tojson | safe }});
+            <script type="module">
+                const graph_div = document.getElementById("plotly-html-element");
+                await Plotly.newPlot(graph_div, {{ plot|tojson|safe }});
 
-            const img_element = document.getElementById("plotly-img-element");
+                const img_element = document.getElementById("plotly-img-element");
                 const data_url = await Plotly.toImage(
                     graph_div,
                     {
@@ -26,9 +26,9 @@
                     }
                 );
 
-            img_element.setAttribute("src", data_url);
-        </script>
-    </div>
-</body>
+                img_element.setAttribute("src", data_url);
+            </script>
+        </div>
+    </body>
 
 </html>