Merge pull request #5 from elonaire/dev

elonaire · Jun 29, 2024 · 6f8f8db · 6f8f8db
2 parents 30d514f + efea55d
commit 6f8f8db
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 32 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "visualize-yew"
-version = "0.20.9"
+version = "0.20.10"
 edition = "2021"
 description = "A simple data visualization library for Yew"
 license = "MIT OR Apache-2.0"

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Visualize Yew
-![Visualize Yew CI](https://github.com/elonaire/visualize-yew/actions/workflows/main.yml/badge.svg)
+![Visualize Yew CI](https://github.com/elonaire/visualize-yew/actions/workflows/main.yml/badge.svg?event=merge)
 ![Stable Version](https://img.shields.io/crates/v/visualize-yew)
 
 This is a simple crate to help you visualize your data in the browser using Yew. It is a wrapper around the yew crate that provides a simple API to create charts.

diff --git a/src/charts/bar_chart/bar_chart.rs b/src/charts/bar_chart/bar_chart.rs
@@ -52,7 +52,8 @@ pub fn BarChart(props: &BarChartProps) -> Html {
                     let device_pixel_ratio = window().unwrap().device_pixel_ratio();
                     let parent = canvas.parent_element().unwrap();
                     let width = parent.client_width() as f64;
-                    let height = parent.client_height() as f64;
+                    // let height = parent.client_height() as f64;
+                    let height = width * 0.6;
 
                     // Set the canvas dimensions to match its parent's dimensions
                     canvas.set_width((width * device_pixel_ratio) as u32);
@@ -172,7 +173,11 @@ mod tests {
 
         let props = BarChartProps {
             data,
-            config: BarChartConfig::default(),
+            config: BarChartConfig {
+                bar_color: "blue".to_string(),
+                grid_color: "gray".to_string(),
+                axis_color: "black".to_string(),
+            }
         };
 
         draw_bar_chart(&context, width, height, &props);

diff --git a/src/charts/doughnut_chart/doughnut_chart.rs b/src/charts/doughnut_chart/doughnut_chart.rs
@@ -41,16 +41,12 @@ pub fn DoughnutChart(props: &DoughnutChartProps) -> Html {
                     let device_pixel_ratio = window().unwrap().device_pixel_ratio();
                     let parent = canvas.parent_element().unwrap();
                     let width = parent.client_width() as f64;
-                    let height = parent.client_height() as f64;
+                    // let height = parent.client_height() as f64;
+                    let height = width * 0.8;
 
                     // Set the canvas dimensions to match its parent's dimensions
                     canvas.set_width((width * device_pixel_ratio) as u32);
-                    if height < width {
-                        canvas.set_height((height * device_pixel_ratio) as u32);
-                    } else {
-                        canvas.set_height((width * device_pixel_ratio) as u32);
-
-                    }
+                    canvas.set_height((height * device_pixel_ratio) as u32);
 
                     // Scale the context to account for the device pixel ratio
                     context.scale(device_pixel_ratio, device_pixel_ratio).unwrap();
@@ -72,7 +68,7 @@ pub fn DoughnutChart(props: &DoughnutChartProps) -> Html {
     let legend_html = if props.config.show_legend {
 
         html! {
-            <div style="display: flex; flex-direction: row; gap: 5px; margin-bottom: 1em;">
+            <div style="display: flex; flex-direction: row; gap: 5px; flex-wrap: wrap;">
                 { for props.data.iter().map(|(label, _value, color)| {
                     html! {
                         <div style="display: flex; flex-direction: row; align-items: center; gap: 2px;">

diff --git a/src/charts/line_chart/line_chart.rs b/src/charts/line_chart/line_chart.rs
@@ -81,8 +81,10 @@ pub fn LineCurveChart(props: &LineCurveChartProps) -> Html {
                         let device_pixel_ratio = window().unwrap().device_pixel_ratio();
                         let parent = canvas.parent_element().unwrap();
                         let width = parent.client_width() as f64;
-                        let height = parent.client_height() as f64;
+                        // let height = parent.client_height() as f64;
+                        let height = width * 0.6;
 
+                        // Set the canvas dimensions to match its parent's dimensions
                         // Set the canvas dimensions to match its parent's dimensions
                         canvas.set_width((width * device_pixel_ratio) as u32);
                         canvas.set_height((height * device_pixel_ratio) as u32);
@@ -111,7 +113,7 @@ pub fn LineCurveChart(props: &LineCurveChartProps) -> Html {
     // Render the legend if enabled
     let legend_html = if props.config.show_legend {
         html! {
-            <div style="display: flex; flex-direction: row; gap: 5px; margin-bottom: 1em;">
+            <div style="display: flex; flex-direction: row; gap: 5px;  flex-wrap: wrap;">
                 { for props.data.iter().map(|(series, _)| {
                     html! {
                         <div style="display: flex; flex-direction: row; align-items: center; gap: 2px;">
@@ -126,12 +128,11 @@ pub fn LineCurveChart(props: &LineCurveChartProps) -> Html {
         html! {}
     };
 
-
     html! {
-        <div style="width: 100%; height: 100%;">
+        <div>
             // legend
             { legend_html }
-            <canvas ref={canvas_ref} style="width: 90%; height: 90%;"></canvas>
+            <canvas ref={canvas_ref} style="width: 100%; height: 100%; box-sizing: border-box;"></canvas>
         </div>
     }
 }
@@ -178,7 +179,6 @@ fn draw_multiline_chart(
         context.stroke();
     }
 
-
     // Draw the y-axis grid lines and labels
     context.set_stroke_style(&JsValue::from_str("#cccccc"));
     context.set_line_width(1.0);
@@ -303,7 +303,7 @@ mod tests {
         let context = mock_context();
         let width = 800.0;
         let height = 600.0;
-        
+
         let props = LineCurveChartProps {
             data: vec![
                 (

diff --git a/src/charts/pie_chart/pie_chart.rs b/src/charts/pie_chart/pie_chart.rs
@@ -51,16 +51,12 @@ pub fn PieChart(props: &PieChartProps) -> Html {
                     let device_pixel_ratio = window().unwrap().device_pixel_ratio();
                     let parent = canvas.parent_element().unwrap();
                     let width = parent.client_width() as f64;
-                    let height = parent.client_height() as f64;
+                    // let height = parent.client_height() as f64;
+                    let height = width * 0.8;
 
                     // Set the canvas dimensions to match its parent's dimensions
                     canvas.set_width((width * device_pixel_ratio) as u32);
-                    if height < width {
-                        canvas.set_height((height * device_pixel_ratio) as u32);
-                    } else {
-                        canvas.set_height((width * device_pixel_ratio) as u32);
-
-                    }
+                    canvas.set_height((height * device_pixel_ratio) as u32);
 
                     // Scale the context to account for the device pixel ratio
                     context.scale(device_pixel_ratio, device_pixel_ratio).unwrap();
@@ -82,7 +78,7 @@ pub fn PieChart(props: &PieChartProps) -> Html {
     let legend_html = if props.config.show_legend {
 
         html! {
-            <div style="display: flex; flex-direction: row; gap: 5px; margin-bottom: 1em;">
+            <div style="display: flex; flex-direction: row; gap: 5px; flex-wrap: wrap;">
                 { for props.data.iter().map(|data_point| {
                     html! {
                         <div style="display: flex; flex-direction: row; align-items: center; gap: 2px;">
@@ -190,10 +186,7 @@ mod tests {
                 DataPoint { name: "C".to_string(), value: 30, color: "".to_string() },
                 DataPoint { name: "D".to_string(), value: 40, color: "".to_string() },
             ],
-            config: PieChartConfig {
-                text_align: "center".to_string(),
-                show_legend: true,
-            },
+            config: PieChartConfig::default(),
         };
 
         draw_pie_chart(&context, width, height, &props);