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

//! Single heatmap cell SVG mark.

use leptos::prelude::*;

use crate::context::{
    set_hovered_item, use_chart_context, use_highlighted_item, ChartInteractionContext,
};
use crate::{
    ChartItemId, FadeMode, HeatmapCellLayout, HighlightMode, HighlightScope, HEATMAP_ITEM_SERIES_ID,
};

/// One heatmap cell rectangle.
#[component]
pub fn HeatmapCellMark(
    /// Resolved cell layout.
    layout: HeatmapCellLayout,
    /// Corner radius in pixels.
    #[prop(default = 4.0)]
    corner_radius: f64,
    /// Highlight scope for fade behavior.
    #[prop(default = None)]
    highlight_scope: Option<HighlightScope>,
) -> impl IntoView {
    let highlighted = use_highlighted_item();
    let ctx = use_chart_context();
    let scope = highlight_scope
        .or(ctx.highlight_scope)
        .unwrap_or(HighlightScope {
            highlight: HighlightMode::Item,
            fade: FadeMode::Global,
        });

    let item_id = ChartItemId {
        series_id: HEATMAP_ITEM_SERIES_ID.to_string(),
        data_index: layout.index,
    };
    let item_id_for_class = item_id.clone();
    let inset_left = ctx.drawing_area.left;
    let inset_top = ctx.drawing_area.top;

    let cell_class = move || {
        let mut classes = vec!["orb-heatmap-cell".to_string()];
        let active = highlighted.get();
        let is_active = active.as_ref() == Some(&item_id_for_class);
        if scope.highlight != HighlightMode::None && active.is_some() {
            if is_active {
                classes.push("orb-heatmap-cell-highlighted".into());
            } else if scope.fade == FadeMode::Global {
                classes.push("orb-heatmap-cell-faded".into());
            }
        }
        classes.join(" ")
    };

    view! {
        <rect
            class=cell_class
            x=layout.x
            y=layout.y
            width=layout.width
            height=layout.height
            rx=corner_radius
            ry=corner_radius
            fill=layout.fill.clone()
            data-value=layout.value
            style="pointer-events: all; cursor: crosshair;"
            on:mouseenter=move |_| {
                set_hovered_item(Some(item_id.clone()));
                expect_context::<ChartInteractionContext>()
                    .pointer_plot
                    .set(Some((
                        inset_left + layout.x + layout.width / 2.0,
                        inset_top + layout.y + layout.height / 2.0,
                    )));
            }
            on:mouseleave=move |_| {
                set_hovered_item(None);
                expect_context::<ChartInteractionContext>()
                    .pointer_plot
                    .set(None);
            }
        />
    }
}