Add polar coordinate example

README.md

@@ -245,6 +245,7 @@ You can also clone the repo and run `cargo run --bin gallery` to view the intera
 <a href="./gallery/src/line/stacked_area.rs"><img src="./img/line/stacked_area.svg" width="40%" alt="Stacked Area" /></a>
 <a href="./gallery/src/line/stacked_line.rs"><img src="./img/line/stacked_line.svg" width="40%" alt="Stacked Line" /></a>
 <a href="./gallery/src/line/temperature_change.rs"><img src="./img/line/temperature_change.svg" width="40%" alt="Temperature Change" /></a>
+<a href="./gallery/src/line/two_value_axes_in_polar.rs"><img src="./img/line/two_value_axes_in_polar.svg" width="40%" alt="Two Value-Axes in Polar" /></a>
 </div>
 
 ### Parallel Charts

charming/src/series/line.rs

@@ -3,8 +3,8 @@ use serde::Serialize;
 use crate::{
     datatype::{DataFrame, DataPoint},
     element::{
-        AreaStyle, DimensionEncode, Emphasis, ItemStyle, LineStyle, MarkArea, MarkLine, MarkPoint,
-        Symbol,
+        AreaStyle, CoordinateSystem, DimensionEncode, Emphasis, ItemStyle, LineStyle, MarkArea,
+        MarkLine, MarkPoint, Symbol,
     },
 };
 
@@ -20,6 +20,9 @@ pub struct Line {
     #[serde(skip_serializing_if = "Option::is_none")]
     name: Option<String>,
 
+    #[serde(skip_serializing_if = "Option::is_none")]
+    coordinate_system: Option<CoordinateSystem>,
+
     #[serde(skip_serializing_if = "Option::is_none")]
     symbol: Option<Symbol>,
 
@@ -78,6 +81,7 @@ impl Line {
             type_: "line".to_string(),
             id: None,
             name: None,
+            coordinate_system: None,
             symbol: None,
             symbol_size: None,
             show_symbol: None,
@@ -109,6 +113,11 @@ impl Line {
         self
     }
 
+    pub fn coordinate_system<C: Into<CoordinateSystem>>(mut self, coordinate_system: C) -> Self {
+        self.coordinate_system = Some(coordinate_system.into());
+        self
+    }
+
     pub fn symbol<S: Into<Symbol>>(mut self, symbol: S) -> Self {
         self.symbol = Some(symbol.into());
         self

gallery/src/images.rs

@@ -1,6 +1,6 @@
 use std::{env, path::Path};
 
-use charming::{ImageFormat, ImageRenderer};
+use charming::ImageRenderer;
 use charming_gallery::CHARTS;
 
 fn main() {
@@ -18,12 +18,12 @@ fn main() {
         std::fs::create_dir_all(&dir).unwrap();
         for (name, chart) in value.iter() {
             println!("Rendering {}/{}", key, name);
-            // let path = dir.join(format!("{}.svg", name));
-            // renderer.save(&chart(), &path).unwrap();
-            let path = dir.join(format!("{}.png", name));
-            renderer
-                .save_format(ImageFormat::Png, &chart(), &path)
-                .unwrap();
+            let path = dir.join(format!("{}.svg", name));
+            renderer.save(&chart(), &path).unwrap();
+            // let path = dir.join(format!("{}.png", name));
+            // renderer
+            //     .save_format(ImageFormat::Png, &chart(), &path)
+            //     .unwrap();
         }
     }
 }

gallery/src/lib.rs

@@ -114,6 +114,7 @@ lazy_static! {
         insert!(m, line, stacked_area);
         insert!(m, line, stacked_line);
         insert!(m, line, temperature_change);
+        insert!(m, line, two_value_axes_in_polar);
         m
     };
     static ref PARALLEL_CHARTS: BTreeMap<&'static str, fn() -> Chart> = {

gallery/src/line/mod.rs

@@ -13,3 +13,4 @@ pub mod smoothed_line;
 pub mod stacked_area;
 pub mod stacked_line;
 pub mod temperature_change;
+pub mod two_value_axes_in_polar;

gallery/src/line/two_value_axes_in_polar.rs

@@ -0,0 +1,36 @@
+use charming::{
+    component::{AngleAxis, Legend, PolarCoordinate, RadiusAxis, Title},
+    element::{AxisPointer, AxisPointerType, AxisType, CoordinateSystem, Tooltip, Trigger},
+    series::Line,
+    Chart,
+};
+
+pub fn chart() -> Chart {
+    let data = (0..=360)
+        .into_iter()
+        .map(|i| {
+            let t = i as f64 / 180.0 * std::f64::consts::PI;
+            let r = (2.0 * t).sin() * (2.0 * t).cos();
+            vec![r, i as f64]
+        })
+        .collect::<Vec<_>>();
+
+    Chart::new()
+        .title(Title::new().text("Two Value-Axes in Polar"))
+        .legend(Legend::new().data(vec!["line"]))
+        .polar(PolarCoordinate::new().center(vec!["50%", "54%"]))
+        .tooltip(
+            Tooltip::new()
+                .trigger(Trigger::Axis)
+                .axis_pointer(AxisPointer::new().type_(AxisPointerType::Cross)),
+        )
+        .angle_axis(AngleAxis::new().type_(AxisType::Value).start_angle(0))
+        .radius_axis(RadiusAxis::new().min(0))
+        .series(
+            Line::new()
+                .name("line")
+                .coordinate_system(CoordinateSystem::Polar)
+                .show_symbol(false)
+                .data(data),
+        )
+}