soma-ui 0.1.1

A Leptos 0.8 component library: 160+ accessible UI components, blocks, charts, and a ChartDB-style schema diagram — with a prebuilt stylesheet.
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
136
137
138

use leptos::prelude::*;

#[derive(Clone, Debug, PartialEq)]
pub struct ChartPoint {
    pub label: String,
    pub value: f64,
}

/// A named series for multi-series chart variants (stacked / grouped / multiple).
/// `points` are aligned by index across series (shared category axis).
#[derive(Clone, Debug, PartialEq)]
pub struct ChartSeries {
    pub points: Vec<ChartPoint>,
}

// Shared geometry for the 320×200 Cartesian charts (area / bar / line).
pub(crate) const W: f64 = 320.0;
pub(crate) const H: f64 = 200.0;
pub(crate) const PAD_L: f64 = 30.0;
pub(crate) const PAD_B: f64 = 30.0;
pub(crate) const PAD_T: f64 = 10.0;
pub(crate) const PAD_R: f64 = 10.0;

/// Shared color palette for multi-series charts.
pub const CHART_PALETTE: &[&str] = &[
    "hsl(var(--primary))",
    "hsl(var(--chart-2, 200 70% 55%))",
    "hsl(var(--chart-3, 150 60% 50%))",
    "hsl(var(--chart-4, 30 80% 55%))",
    "hsl(var(--destructive))",
    "hsl(262 80% 50%)",
];

/// Build a smooth cubic-bezier path.
pub(crate) fn smooth_path(pts: &[(f64, f64)]) -> String {
    if pts.len() < 2 {
        return pts
            .first()
            .map(|(x, y)| format!("M{x:.1},{y:.1}"))
            .unwrap_or_default();
    }
    let mut d = format!("M{:.1},{:.1}", pts[0].0, pts[0].1);
    for i in 1..pts.len() {
        let (x0, y0) = pts[i - 1];
        let (x1, y1) = pts[i];
        let cx = (x0 + x1) / 2.0;
        d.push_str(&format!(
            " C{cx:.1},{y0:.1} {cx:.1},{y1:.1} {x1:.1},{y1:.1}"
        ));
    }
    d
}

/// Build a straight-segment polyline path.
pub(crate) fn linear_path(pts: &[(f64, f64)]) -> String {
    let mut d = format!("M{:.1},{:.1}", pts[0].0, pts[0].1);
    for (x, y) in pts.iter().skip(1) {
        d.push_str(&format!(" L{x:.1},{y:.1}"));
    }
    d
}

/// Build a step path (horizontal first, then vertical).
pub(crate) fn step_path(pts: &[(f64, f64)]) -> String {
    if pts.is_empty() {
        return String::new();
    }
    let mut d = format!("M{:.1},{:.1}", pts[0].0, pts[0].1);
    for i in 1..pts.len() {
        let (x1, y1) = pts[i];
        d.push_str(&format!(" H{x1:.1} V{y1:.1}"));
    }
    d
}

/// Shared axes + dashed gridlines renderer for the 320×200 Cartesian charts.
pub(crate) fn render_axes_and_grid() -> impl IntoView {
    let plot_h = H - PAD_T - PAD_B;
    let bottom = PAD_T + plot_h;
    let gridlines: Vec<_> = (1..=4)
        .map(|i| {
            let y = PAD_T + plot_h * (i as f64 / 4.0);
            view! {
                <line
                    x1=PAD_L.to_string() y1=format!("{y:.1}")
                    x2=(W - PAD_R).to_string() y2=format!("{y:.1}")
                    stroke="currentColor" stroke-width="0.5"
                    class="text-border" stroke-dasharray="3,3"
                />
            }
        })
        .collect();
    view! {
        {gridlines}
        <line
            x1=PAD_L.to_string() y1=format!("{bottom:.1}")
            x2=(W - PAD_R).to_string() y2=format!("{bottom:.1}")
            stroke="currentColor" stroke-width="1" class="text-border"
        />
        <line
            x1=PAD_L.to_string() y1=PAD_T.to_string()
            x2=PAD_L.to_string() y2=format!("{bottom:.1}")
            stroke="currentColor" stroke-width="1" class="text-border"
        />
    }
}

/// Render x-axis category labels below the chart.
pub(crate) fn x_labels_view(
    data: &[ChartPoint],
    x_of: &impl Fn(usize) -> f64,
) -> Vec<impl IntoView> {
    data.iter()
        .enumerate()
        .map(|(i, p)| {
            let x = x_of(i);
            let label = p.label.clone();
            view! {
                <text x=format!("{x:.1}") y=format!("{:.1}", H - 6.0)
                    text-anchor="middle" font-size="8"
                    class="fill-muted-foreground">{label}</text>
            }
        })
        .collect()
}

pub mod area_chart;
pub use area_chart::*;
pub mod bar_chart;
pub use bar_chart::*;
pub mod line_chart;
pub use line_chart::*;
pub mod pie_chart;
pub use pie_chart::*;
pub mod radar_chart;
pub use radar_chart::*;
pub mod radial_chart;
pub use radial_chart::*;