From 8c25ab61755e550bca39d78b1207170f95f12933 Mon Sep 17 00:00:00 2001 From: yuankunzhang Date: Fri, 21 Jul 2023 21:40:35 +0800 Subject: [PATCH] Add polar coordinate example --- Cargo.lock | 2 +- README.md | 1 + charming/src/series/line.rs | 13 +- gallery/src/images.rs | 14 +-- gallery/src/lib.rs | 1 + gallery/src/line/mod.rs | 1 + gallery/src/line/two_value_axes_in_polar.rs | 36 ++++++ img/line/rainfall.svg | 132 ++++++++++++++++++++ img/line/two_value_axes_in_polar.svg | 46 +++++++ 9 files changed, 236 insertions(+), 10 deletions(-) create mode 100644 gallery/src/line/two_value_axes_in_polar.rs create mode 100644 img/line/rainfall.svg create mode 100644 img/line/two_value_axes_in_polar.svg diff --git a/Cargo.lock b/Cargo.lock index 3bbd396..81f0875 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -249,7 +249,7 @@ checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd" [[package]] name = "charming" -version = "0.2.1" +version = "0.2.2" dependencies = [ "deno_core", "handlebars", diff --git a/README.md b/README.md index f13685f..f673687 100644 --- a/README.md +++ b/README.md @@ -245,6 +245,7 @@ You can also clone the repo and run `cargo run --bin gallery` to view the intera Stacked Area Stacked Line Temperature Change +Two Value-Axes in Polar ### Parallel Charts diff --git a/charming/src/series/line.rs b/charming/src/series/line.rs index 3cbd247..7d4d916 100644 --- a/charming/src/series/line.rs +++ b/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, + #[serde(skip_serializing_if = "Option::is_none")] + coordinate_system: Option, + #[serde(skip_serializing_if = "Option::is_none")] symbol: Option, @@ -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>(mut self, coordinate_system: C) -> Self { + self.coordinate_system = Some(coordinate_system.into()); + self + } + pub fn symbol>(mut self, symbol: S) -> Self { self.symbol = Some(symbol.into()); self diff --git a/gallery/src/images.rs b/gallery/src/images.rs index 0d7ebaf..4e9f389 100644 --- a/gallery/src/images.rs +++ b/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(); } } } diff --git a/gallery/src/lib.rs b/gallery/src/lib.rs index b81b9e5..4b64d07 100644 --- a/gallery/src/lib.rs +++ b/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> = { diff --git a/gallery/src/line/mod.rs b/gallery/src/line/mod.rs index e9e5581..740f712 100644 --- a/gallery/src/line/mod.rs +++ b/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; diff --git a/gallery/src/line/two_value_axes_in_polar.rs b/gallery/src/line/two_value_axes_in_polar.rs new file mode 100644 index 0000000..3b4a328 --- /dev/null +++ b/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::>(); + + 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), + ) +} diff --git a/img/line/rainfall.svg b/img/line/rainfall.svg new file mode 100644 index 0000000..31dd5f2 --- /dev/null +++ b/img/line/rainfall.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + + +Flow(m³/s) +Rainfall(mm) + + + + + + + + +0 +100 +200 +300 +400 +0 +1 +2 +3 +4 +2009/9/6 +8:00 +2009/9/10 +2:00 +2009/9/13 +20:00 +2009/9/17 +14:00 +2009/9/21 +8:00 +2009/9/25 +2:00 +2009/9/28 +20:00 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +Flow + + +Rainfall + + + + + + + + + + + + + +Rainfall and Flow Relationship + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/line/two_value_axes_in_polar.svg b/img/line/two_value_axes_in_polar.svg new file mode 100644 index 0000000..9805c33 --- /dev/null +++ b/img/line/two_value_axes_in_polar.svg @@ -0,0 +1,46 @@ + + + +0 +30 +60 +90 +120 +150 +180 +210 +240 +270 +300 +330 + + + + + + + + + + +0 +0.1 +0.2 +0.3 +0.4 +0.5 + + + + + + +line + +Two Value-Axes in Polar + + + + + + \ No newline at end of file