orbital-charts 0.1.1

Chart components for Orbital and Leptos
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

//! Area fill path with optional gradient.

use leptos::prelude::*;

/// Filled area path under a line.
#[component]
pub fn AreaFill(
    /// SVG path `d` attribute (closed area).
    #[prop(into)]
    d: Signal<String>,
    /// Series color for solid or gradient top stop.
    #[prop(into)]
    series_color: Signal<String>,
    /// Gradient definition id.
    gradient_id: String,
    /// When true, fill with vertical gradient to transparent.
    #[prop(default = false)]
    use_gradient: bool,
    /// Fill opacity for stacked areas.
    #[prop(default = 0.35)]
    fill_opacity: f64,
) -> impl IntoView {
    let gid = gradient_id.clone();
    let fill = Signal::derive(move || {
        if use_gradient {
            format!("url(#{gid})")
        } else {
            series_color.get()
        }
    });

    view! {
        {use_gradient.then(|| {
            let grad = gradient_id.clone();
            view! {
                <defs>
                    <linearGradient id=grad x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color=move || series_color.get() />
                        <stop offset="100%" stop-color=move || series_color.get() stop-opacity="0" />
                    </linearGradient>
                </defs>
            }
        })}
        <path
            class="orb-area-fill"
            d=move || d.get()
            fill=move || fill.get()
            fill-opacity=fill_opacity
        />
    }
}

/// Gradient definition id for a series.
pub fn area_gradient_id(series_id: &str) -> String {
    format!("orb-area-grad-{series_id}")
}