From 39bdd251bfcb03885c77daf4cf5b1588536755c7 Mon Sep 17 00:00:00 2001
From: Ralf Grubenmann <ralf.grubenmann@gmail.com>
Date: Thu, 28 Dec 2023 14:21:34 +0100
Subject: [PATCH] move axis definition to separate file

---
 src/axis.rs |  49 ++++++++++++++
 src/bar.rs  | 187 +++++++++++++++++++++-------------------------------
 src/lib.rs  |   2 +
 src/pie.rs  |   4 +-
 4 files changed, 129 insertions(+), 113 deletions(-)
 create mode 100644 src/axis.rs

diff --git a/src/axis.rs b/src/axis.rs
new file mode 100644
index 0000000..fa1b87f
--- /dev/null
+++ b/src/axis.rs
@@ -0,0 +1,49 @@
+use leptos::component;
+use leptos::{svg::*, *};
+
+#[component]
+pub fn YAxis(ticks: Memo<Vec<(f64, String)>>) -> impl IntoView {
+    view! {
+        <svg y="10%" height="80%" overflow="visible">
+            <line
+                x1="9.8%"
+                y1="0%"
+                x2="9.8%"
+                y2="100%"
+                stroke="black"
+                stroke-width="1px"
+                vector-effect="non-scaling-stroke"
+            ></line>
+            {move || {
+                ticks
+                    .get()
+                    .into_iter()
+                    .map(|(t, s)| {
+                        view! {
+                            <line
+                                x1="7%"
+                                y1=format!("{}%", t)
+                                x2="9.8%"
+                                y2=format!("{}%", t)
+                                stroke="black"
+                                strocke-width="1px"
+                                vector-effect="non-scaling-stroke"
+                            ></line>
+                            <text
+                                x="6.9%"
+                                y=format!("{}%", t)
+                                font-size="20px"
+                                dy="5px"
+                                text-anchor="end"
+                                vector-effect="non-scaling-stroke"
+                            >
+                                {s}
+                            </text>
+                        }
+                    })
+                    .collect_view()
+            }}
+
+        </svg>
+    }
+}
diff --git a/src/bar.rs b/src/bar.rs
index 292d606..64a5ed4 100644
--- a/src/bar.rs
+++ b/src/bar.rs
@@ -1,4 +1,4 @@
-use crate::{ChartColor, Palette, CATPPUCCIN_COLORS};
+use crate::{axis::YAxis, ChartColor, Palette, CATPPUCCIN_COLORS};
 use leptos::{svg::*, *};
 use leptos_use::*;
 use num_traits::ToPrimitive;
@@ -150,128 +150,91 @@ where
 
     view! {
         <svg {..attrs}>
-            <svg y="10%" height="80%" overflow="visible">
-                <line
-                    x1="9.8%"
-                    y1="0%"
-                    x2="9.8%"
-                    y2="100%"
-                    stroke="black"
-                    stroke-width="1px"
-                    vector-effect="non-scaling-stroke"
-                ></line>
-                {move || {
-                    ticks
-                        .get()
-                        .into_iter()
-                        .map(|(t, s)| {
-                            view! {
-                                <line
-                                    x1="7%"
-                                    y1=format!("{}%", t)
-                                    x2="9.8%"
-                                    y2=format!("{}%", t)
-                                    stroke="black"
-                                    strocke-width="1px"
-                                    vector-effect="non-scaling-stroke"
-                                ></line>
-                                <text
-                                    x="6.9%"
-                                    y=format!("{}%", t)
-                                    font-size="20px"
-                                    dy="5px"
-                                    text-anchor="end"
-                                    vector-effect="non-scaling-stroke"
-                                >
-                                    {s}
-                                </text>
-                            }
-                        })
-                        .collect_view()
-                }}
+            <YAxis ticks=ticks/>
 
-                {move || {
-                    values
-                        .get()
-                        .into_iter()
-                        .map(|(i, v)| {
-                            let el = create_node_ref::<Rect>();
-                            let is_hovered = use_element_hover(el);
-                            let color = String::from(options.color.color_for_index(i, num_bars.get()));
-                            view! {
-                                <svg
-                                    x="10%"
-                                    width="90%"
-                                    height="100%"
-                                    viewBox="0 0 100 100"
-                                    preserveAspectRatio="none"
-                                >
-                                    <g transform="matrix(1 0 0 -1 0 100)">
-                                        <rect
-                                            node_ref=el
-                                            x=move || (5.0 + 95.0 / num_bars.get() as f64 * i as f64)
-                                            y=move || {
-                                                if v > 0.0 {
-                                                    100.0 * -tick_config.get().min_point
-                                                        / (tick_config.get().max_point
-                                                            - tick_config.get().min_point)
-                                                } else {
-                                                    100.0 * (v - tick_config.get().min_point)
-                                                        / (tick_config.get().max_point
-                                                            - tick_config.get().min_point)
-                                                }
-                                            }
-
-                                            width=move || (80.0 / num_bars.get() as f64)
-                                            height=move || {
-                                                100.0 * v.abs()
+            {move || {
+                values
+                    .get()
+                    .into_iter()
+                    .map(|(i, v)| {
+                        let el = create_node_ref::<Rect>();
+                        let is_hovered = use_element_hover(el);
+                        let color = String::from(options.color.color_for_index(i, num_bars.get()));
+                        view! {
+                            <svg
+                                x="10%"
+                                y="10%"
+                                width="90%"
+                                height="80%"
+                                viewBox="0 0 100 100"
+                                preserveAspectRatio="none"
+                            >
+                                <g transform="matrix(1 0 0 -1 0 100)">
+                                    <rect
+                                        node_ref=el
+                                        x=move || (5.0 + 95.0 / num_bars.get() as f64 * i as f64)
+                                        y=move || {
+                                            if v > 0.0 {
+                                                100.0 * -tick_config.get().min_point
+                                                    / (tick_config.get().max_point
+                                                        - tick_config.get().min_point)
+                                            } else {
+                                                100.0 * (v - tick_config.get().min_point)
                                                     / (tick_config.get().max_point
                                                         - tick_config.get().min_point)
                                             }
+                                        }
 
-                                            fill=color.clone()
-                                            fill-opacity=move || {
-                                                if is_hovered.get() { "0.8" } else { "0.6" }
-                                            }
-
-                                            stroke=color
-                                            stroke-width=move || {
-                                                if is_hovered.get() { "3px" } else { "1px" }
-                                            }
+                                        width=move || (80.0 / num_bars.get() as f64)
+                                        height=move || {
+                                            100.0 * v.abs()
+                                                / (tick_config.get().max_point
+                                                    - tick_config.get().min_point)
+                                        }
 
-                                            vector-effect="non-scaling-stroke"
-                                        ></rect>
-                                    </g>
-                                </svg>
-                                <Show when=move || is_hovered.get() fallback=|| ()>
-                                    <text
-                                        font-size="15px"
-                                        vector-effect="non-scaling-stroke"
-                                        x=move || {
-                                            format!(
-                                                "{}%", (15.0 + 85.0 / num_bars.get() as f64 * (i as f64 + 0.5))
-                                            )
+                                        fill=color.clone()
+                                        fill-opacity=move || {
+                                            if is_hovered.get() { "0.8" } else { "0.6" }
                                         }
 
-                                        y=move || {
-                                            format!(
-                                                "{}%", (100.0 - 100.0 * (v - tick_config.get().min_point) /
-                                                (tick_config.get().max_point - tick_config.get().min_point))
-                                            )
+                                        stroke=color
+                                        stroke-width=move || {
+                                            if is_hovered.get() { "3px" } else { "1px" }
                                         }
 
-                                        dy=move || { if v > 0.0 { "-5" } else { "15" } }
-                                        dx="-9"
-                                    >
-                                        {v}
-                                    </text>
-                                </Show>
-                            }
-                        })
-                        .collect_view()
-                }}
+                                        vector-effect="non-scaling-stroke"
+                                    ></rect>
+                                </g>
+                            </svg>
+                            <Show when=move || is_hovered.get() fallback=|| ()>
+                                <text
+                                    font-size="15px"
+                                    vector-effect="non-scaling-stroke"
+                                    x=move || {
+                                        format!(
+                                            "{}%", (15.0 + 85.0 / num_bars.get() as f64 * (i as f64 +
+                                            0.5))
+                                        )
+                                    }
+
+                                    y=move || {
+                                        format!(
+                                            "{}%", (100.0 - 100.0 * (v - tick_config.get().min_point) /
+                                            (tick_config.get().max_point - tick_config.get().min_point))
+                                        )
+                                    }
+
+                                    dy=move || { if v > 0.0 { "-5" } else { "15" } }
+                                    dx="-9"
+                                >
+                                    {v}
+                                </text>
+                            </Show>
+                        }
+                    })
+                    .collect_view()
+            }}
 
-            </svg>
         </svg>
     }
 }
diff --git a/src/lib.rs b/src/lib.rs
index 304104f..8a467be 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,7 +1,9 @@
 #![feature(iter_map_windows)]
 
+pub mod axis;
 pub mod bar;
 pub mod color;
+pub mod legend;
 pub mod pie;
 pub mod point;
 
diff --git a/src/pie.rs b/src/pie.rs
index da752dc..b2a7b28 100644
--- a/src/pie.rs
+++ b/src/pie.rs
@@ -170,7 +170,9 @@ where
                         let text_el = create_node_ref::<Text>();
                         let is_path_hovered = use_element_hover(path_el);
                         let is_text_hovered = use_element_hover(text_el);
-                        let is_hovered = create_memo(move |_| is_path_hovered.with(|&h| is_text_hovered.with(|&t| h || t)));
+                        let is_hovered = create_memo(move |_| {
+                            is_path_hovered.with(|&h| is_text_hovered.with(|&t| h || t))
+                        });
                         let label_pos = segment.get_center_unit_vector();
                         let color = String::from(options.color.color_for_index(i, num_pies.get()));
                         view! {