Support saving image as PNG from the HTML page

yuankunzhang · Jul 24, 2023 · 18c136f · 18c136f
1 parent 15ff677
commit 18c136f
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 7 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/charming/Cargo.toml b/charming/Cargo.toml
@@ -1,7 +1,7 @@
 [package]
 name = "charming"
 description = "A visualization library for Rust"
-version = "0.2.3"
+version = "0.2.4"
 edition = "2021"
 authors = ["Yuankun Zhang <[email protected]>"]
 homepage = "https://github.com/yuankunzhang/echarts-rs"

diff --git a/charming/src/asset/charts.html.hbs b/charming/src/asset/charts.html.hbs
@@ -17,7 +17,7 @@
           {{#each gep_maps}}
           echarts.registerMap('{{ this.name }}', {{{ this.opt }}});
           {{/each}}
-          var chart = echarts.init(document.getElementById('{{ chart_id }}'){{#if theme}}, '{{ theme }}'{{/if}});
+          var chart = echarts.init(document.getElementById('{{ chart_id }}'), {{#if theme}}'{{ theme }}'{{else}}null{{/if}}, { renderer: '{{ canvas_type }}' });
           var option = {{{ chart_option }}};
           chart.setOption(option);
       </script>

diff --git a/charming/src/component/toolbox.rs b/charming/src/component/toolbox.rs
@@ -360,4 +360,11 @@ impl Toolbox {
         self.bottom = Some(bottom.into());
         self
     }
+
+    pub fn save_as_image_type(&self) -> Option<&SaveAsImageType> {
+        self.feature
+            .as_ref()
+            .and_then(|f| f.save_as_image.as_ref())
+            .and_then(|s| s.type_.as_ref())
+    }
 }
diff --git a/charming/src/lib.rs b/charming/src/lib.rs
@@ -95,8 +95,8 @@ pub use renderer::*;
 
 use component::{
     AngleAxis, Aria, Axis, Axis3D, DataZoom, GeoMap, Grid, Grid3D, Legend, ParallelAxis,
-    ParallelCoordinate, PolarCoordinate, RadarCoordinate, RadiusAxis, SingleAxis, Title, Toolbox,
-    VisualMap,
+    ParallelCoordinate, PolarCoordinate, RadarCoordinate, RadiusAxis, SaveAsImageType, SingleAxis,
+    Title, Toolbox, VisualMap,
 };
 use datatype::Dataset;
 use element::{process_raw_strings, AxisPointer, Color, MarkLine, Tooltip};
@@ -502,6 +502,12 @@ impl Chart {
         self.geo_maps.push(map.into());
         self
     }
+
+    pub fn save_as_image_type(&self) -> Option<&SaveAsImageType> {
+        self.toolbox
+            .as_ref()
+            .and_then(|toolbox| toolbox.save_as_image_type())
+    }
 }
 
 impl ToString for Chart {

diff --git a/charming/src/renderer/html_renderer.rs b/charming/src/renderer/html_renderer.rs
@@ -1,6 +1,6 @@
 use handlebars::Handlebars;
 
-use crate::{theme::Theme, Chart, EchartsError};
+use crate::{component::SaveAsImageType, theme::Theme, Chart, EchartsError};
 
 pub struct HtmlRenderer {
     title: String,
@@ -27,6 +27,10 @@ impl HtmlRenderer {
     pub fn render(&self, chart: &Chart) -> Result<String, EchartsError> {
         let template = include_str!("../asset/charts.html.hbs");
         let (theme, theme_source) = self.theme.to_str();
+        let canvas_type = match chart.save_as_image_type() {
+            Some(&SaveAsImageType::Svg) => "svg".to_string(),
+            _ => "canvas".to_string(),
+        };
         let data = Handlebars::new()
             .render_template(
                 template,
@@ -37,6 +41,7 @@ impl HtmlRenderer {
                     "width": self.width,
                     "height": self.height,
                     "chart_id": "chart",
+                    "canvas_type": canvas_type,
                     "chart_option": chart.to_string(),
                 }),
             )

diff --git a/gallery/src/aria/default_decal.rs b/gallery/src/aria/default_decal.rs
@@ -1,12 +1,17 @@
 use charming::{
-    component::{Aria, Axis, Decal},
+    component::{Aria, Axis, Decal, Feature, SaveAsImage, SaveAsImageType, Toolbox},
     element::AxisType,
     series::Bar,
     Chart,
 };
 
 pub fn chart() -> Chart {
     Chart::new()
+        .toolbox(
+            Toolbox::new().feature(
+                Feature::new().save_as_image(SaveAsImage::new().type_(SaveAsImageType::Svg)),
+            ),
+        )
         .x_axis(
             Axis::new()
                 .type_(AxisType::Category)