canonrs-server 0.1.0

CanonRS server-side rendering support
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

use leptos::prelude::*;
use super::chart_ui::{Chart, ChartData, ChartSeries};
use canonrs_core::primitives::ChartType;

#[component]
pub fn BasicExample() -> impl IntoView {
    let data = ChartData {
        labels: vec![
            "Jan".into(), "Feb".into(), "Mar".into(),
            "Apr".into(), "May".into(), "Jun".into(),
        ],
        series: vec![
            ChartSeries {
                name: "Revenue".into(),
                data: vec![42.0, 58.0, 45.0, 72.0, 65.0, 88.0],
                color: None,
            },
            ChartSeries {
                name: "Expenses".into(),
                data: vec![28.0, 35.0, 32.0, 48.0, 41.0, 55.0],
                color: None,
            },
        ],
    };

    view! {
        <Chart
            data=data
            chart_type=ChartType::Line
            height=320u32
        />
    }
}

#[component]
pub fn ChartDatatableSyncExample() -> impl IntoView {
    use crate::ui::data_table::{DataTableFull, DataTableColumn};

    #[derive(Clone)]
    struct Row {
        month: String,
        revenue: f64,
        expenses: f64,
    }

    let rows = vec![
        Row { month: "Jan".into(), revenue: 42.0, expenses: 28.0 },
        Row { month: "Feb".into(), revenue: 58.0, expenses: 35.0 },
        Row { month: "Mar".into(), revenue: 45.0, expenses: 32.0 },
        Row { month: "Apr".into(), revenue: 72.0, expenses: 48.0 },
        Row { month: "May".into(), revenue: 65.0, expenses: 41.0 },
        Row { month: "Jun".into(), revenue: 88.0, expenses: 55.0 },
    ];

    let labels: Vec<String> = rows.iter().map(|r| r.month.clone()).collect();
    let rev: Vec<f64>  = rows.iter().map(|r| r.revenue).collect();
    let exp: Vec<f64>  = rows.iter().map(|r| r.expenses).collect();

    let data = ChartData {
        labels,
        series: vec![
            ChartSeries { name: "Revenue".into(),  data: rev,  color: None },
            ChartSeries { name: "Expenses".into(), data: exp, color: None },
        ],
    };

    let columns = vec![
        DataTableColumn::new("month",    "Month",    |r: &Row| r.month.clone()),
        DataTableColumn::new("revenue",  "Revenue",  |r: &Row| format!("{:.0}", r.revenue)),
        DataTableColumn::new("expenses", "Expenses", |r: &Row| format!("{:.0}", r.expenses)),
    ];

    view! {
        <div style="display:flex;flex-direction:column;gap:1.5rem;">
            <Chart
                data=data
                chart_type=ChartType::Line
                height=320u32
                sync_scope="revenue-2026".to_string()
            />
            <DataTableFull
                data=rows
                columns=columns
                page_size=6usize
                sync_scope="revenue-2026".to_string()
            />
        </div>
    }
}