Skip to content

Commit

Permalink
move axis definition to separate file
Browse files Browse the repository at this point in the history
  • Loading branch information
Ralf Grubenmann committed Dec 28, 2023
1 parent fbf2b53 commit 39bdd25
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 113 deletions.
49 changes: 49 additions & 0 deletions src/axis.rs
View file
Original file line number Diff line number Diff line change
@@ -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>
}
}
187 changes: 75 additions & 112 deletions src/bar.rs
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/lib.rs
View file
Original file line number Diff line number Diff line change
@@ -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;

Expand Down
4 changes: 3 additions & 1 deletion src/pie.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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! {
Expand Down

0 comments on commit 39bdd25

Please sign in to comment.