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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

//! Line stroke and point markers.

use leptos::prelude::*;

use crate::context::{
    keyboard_nav_enabled, set_hovered_item, use_chart_context, use_highlighted_item,
};
use crate::shared::motion::PathDrawMotion;
use crate::{ChartItemId, FadeMode, HighlightMode, HighlightScope};
use orbital_motion::{MotionCurve, MotionDuration};

/// Line path with optional draw animation and markers.
#[component]
pub fn LineStroke(
    /// SVG path `d` attribute.
    #[prop(into)]
    d: Signal<String>,
    /// Stroke color.
    #[prop(into)]
    stroke: Signal<String>,
    /// Marker positions with data indices.
    markers: Vec<(f64, f64, usize)>,
    /// Series id for interaction.
    #[prop(into)]
    series_id: String,
    /// Whether to show point markers.
    #[prop(default = false)]
    show_markers: bool,
    /// Skip path draw animation.
    #[prop(default = false)]
    skip_animation: bool,
    /// Key to re-trigger draw on data updates.
    #[prop(into)]
    draw_key: Signal<String>,
    /// Highlight scope for fade behavior.
    #[prop(default = None)]
    highlight_scope: Option<HighlightScope>,
) -> impl IntoView {
    let highlighted = use_highlighted_item();
    let chart_ctx = use_chart_context();
    let keyboard_nav = keyboard_nav_enabled(chart_ctx.keyboard_navigation, chart_ctx.features);
    let scope = highlight_scope.unwrap_or(HighlightScope {
        highlight: HighlightMode::Item,
        fade: FadeMode::Global,
    });
    let series = series_id.clone();

    let stroke_class = move || {
        let mut classes = vec!["orb-line-stroke".to_string()];
        let active = highlighted.get();
        if scope.highlight != HighlightMode::None && active.is_some() {
            let is_series = active.as_ref().is_some_and(|item| item.series_id == series);
            if !is_series && scope.fade == FadeMode::Global {
                classes.push("orb-line-stroke-faded".into());
            }
        }
        classes.join(" ")
    };

    view! {
        <g class=stroke_class>
            <PathDrawMotion
                d=d
                stroke=stroke
                class="orb-line-stroke".to_string()
                skip_animation=skip_animation
                duration=MotionDuration::Normal
                curve=MotionCurve::DecelerateMax
                draw_key=draw_key
            />
        </g>
        {show_markers.then(|| {
            let series_id = series_id.clone();
            view! {
                <For
                    each=move || markers.clone()
                    key=|(x, y, idx)| format!("{x}-{y}-{idx}")
                    let((x, y, data_index))
                >
                    {
                        let series_id = series_id.clone();
                        let item_id = ChartItemId {
                            series_id: series_id.clone(),
                            data_index,
                        };
                        let item_for_hover = item_id.clone();
                        let item_for_class = item_id;
                        let item_for_tab = item_for_hover.clone();
                        let item_for_focus = item_for_hover.clone();
                        let point_class = move || {
                            let mut classes = vec!["orb-line-point".to_string()];
                            let active = highlighted.get();
                            let is_active = active.as_ref() == Some(&item_for_class);
                            if scope.highlight != HighlightMode::None && active.is_some() {
                                if is_active {
                                    classes.push("orb-line-point-highlighted".into());
                                } else if scope.fade == FadeMode::Global {
                                    classes.push("orb-line-point-faded".into());
                                }
                            }
                            classes.join(" ")
                        };
                        let tab_index = move || {
                            if !keyboard_nav {
                                return -1;
                            }
                            let active = highlighted.get();
                            if active.as_ref() == Some(&item_for_tab) {
                                0
                            } else if active.is_none() && data_index == 0 {
                                0
                            } else {
                                -1
                            }
                        };
                        view! {
                            <circle
                                class=point_class
                                cx=x
                                cy=y
                                r=4.0
                                fill=move || stroke.get()
                                tabindex=tab_index
                                style="pointer-events: all; cursor: pointer;"
                                on:focus=move |_| set_hovered_item(Some(item_for_focus.clone()))
                                on:mouseenter=move |_| set_hovered_item(Some(item_for_hover.clone()))
                                on:mouseleave=move |_| set_hovered_item(None)
                            />
                        }
                    }
                </For>
            }
        })}
    }
}