switch to typescript
This commit is contained in:
@@ -1,203 +0,0 @@
|
||||
pub mod server;
|
||||
pub mod sidebar;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn LineChart(
|
||||
data: Vec<i32>,
|
||||
max: Option<i32>,
|
||||
start_opacity: Option<f32>,
|
||||
end_opacity: Option<f32>,
|
||||
class: Option<String>,
|
||||
) -> Element {
|
||||
let width = 300.0;
|
||||
let height = 200.0;
|
||||
let start_opacity = start_opacity.unwrap_or(0.4);
|
||||
let end_opacity = end_opacity.unwrap_or(0.0);
|
||||
let class_attr = match class {
|
||||
Some(c) => format!("line-chart {}", c),
|
||||
None => "line-chart".to_string(),
|
||||
};
|
||||
|
||||
let max_y = max
|
||||
.map(|v| v as f64)
|
||||
.unwrap_or_else(|| *data.iter().max().unwrap_or(&100) as f64);
|
||||
|
||||
let points: Vec<(f64, f64)> = data
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(i, &y)| {
|
||||
let x = i as f64 / (data.len() - 1).max(1) as f64 * width;
|
||||
let y = height - (y as f64 / max_y * height);
|
||||
(x, y)
|
||||
})
|
||||
.collect();
|
||||
|
||||
let path_data = {
|
||||
let mut d = format!("M {} {}", points[0].0, points[0].1);
|
||||
for i in 0..points.len() - 1 {
|
||||
let (x0, y0) = if i == 0 { points[0] } else { points[i - 1] };
|
||||
let (x1, y1) = points[i];
|
||||
let (x2, y2) = points[i + 1];
|
||||
let (x3, y3) = if i + 2 < points.len() {
|
||||
points[i + 2]
|
||||
} else {
|
||||
points[i + 1]
|
||||
};
|
||||
|
||||
let cp1x = x1 + (x2 - x0) / 6.0;
|
||||
let cp1y = y1 + (y2 - y0) / 6.0;
|
||||
let cp2x = x2 - (x3 - x1) / 6.0;
|
||||
let cp2y = y2 - (y3 - y1) / 6.0;
|
||||
|
||||
d += &format!(" C {} {}, {} {}, {} {}", cp1x, cp1y, cp2x, cp2y, x2, y2);
|
||||
}
|
||||
d
|
||||
};
|
||||
|
||||
let fill_path_data = {
|
||||
let mut d = format!("M {} {}", points[0].0, height);
|
||||
|
||||
for i in 0..points.len() - 1 {
|
||||
let (x0, y0) = if i == 0 { points[0] } else { points[i - 1] };
|
||||
let (x1, y1) = points[i];
|
||||
let (x2, y2) = points[i + 1];
|
||||
let (x3, y3) = if i + 2 < points.len() {
|
||||
points[i + 2]
|
||||
} else {
|
||||
points[i + 1]
|
||||
};
|
||||
|
||||
let cp1x = x1 + (x2 - x0) / 6.0;
|
||||
let cp1y = y1 + (y2 - y0) / 6.0;
|
||||
let cp2x = x2 - (x3 - x1) / 6.0;
|
||||
let cp2y = y2 - (y3 - y1) / 6.0;
|
||||
|
||||
if i == 0 {
|
||||
d += &format!(" L {} {}", points[0].0, points[0].1);
|
||||
}
|
||||
|
||||
d += &format!(" C {} {}, {} {}, {} {}", cp1x, cp1y, cp2x, cp2y, x2, y2);
|
||||
}
|
||||
|
||||
d += &format!(" L {} {}", points.last().unwrap().0, height);
|
||||
d + " Z"
|
||||
};
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: "{class_attr}",
|
||||
svg {
|
||||
preserve_aspect_ratio: "none",
|
||||
class: "line-chart-svg",
|
||||
width: "{width}",
|
||||
height: "{height}",
|
||||
view_box: "0 0 {width} {height}",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
|
||||
defs {
|
||||
linearGradient {
|
||||
id: "gradient-fill",
|
||||
x1: "0",
|
||||
y1: "0",
|
||||
x2: "0",
|
||||
y2: "1",
|
||||
|
||||
stop {
|
||||
offset: "0%",
|
||||
stop_color: "currentColor",
|
||||
stop_opacity: "{start_opacity}",
|
||||
}
|
||||
stop {
|
||||
offset: "100%",
|
||||
stop_color: "#currentColor",
|
||||
stop_opacity: "{end_opacity}",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
path {
|
||||
class: "fill",
|
||||
d: "{fill_path_data}",
|
||||
fill: "url(#gradient-fill)"
|
||||
}
|
||||
|
||||
path {
|
||||
class: "line",
|
||||
d: "{path_data}",
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
stroke_width: "2"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[allow(unused)]
|
||||
const RADIUS: f64 = 50.0;
|
||||
#[allow(unused)]
|
||||
const CIRCUMFERENCE: f64 = 2.0 * std::f64::consts::PI * RADIUS;
|
||||
|
||||
#[component]
|
||||
pub fn RadialChart(percent: f64) -> Element {
|
||||
let offset = CIRCUMFERENCE * (1.0 - percent.clamp(0.0, 1.0));
|
||||
|
||||
rsx! {
|
||||
svg {
|
||||
width: "140",
|
||||
height: "140",
|
||||
view_box: "0 0 120 120",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
|
||||
// Outline circle
|
||||
circle {
|
||||
cx: "60",
|
||||
cy: "60",
|
||||
r: "{RADIUS}",
|
||||
stroke: "none",
|
||||
stroke_width: "10.0",
|
||||
fill: "none",
|
||||
}
|
||||
|
||||
// Progress circle
|
||||
circle {
|
||||
cx: "60",
|
||||
cy: "60",
|
||||
r: "{RADIUS}",
|
||||
stroke: "#4f46e5",
|
||||
stroke_width: "10.5",
|
||||
fill: "none",
|
||||
stroke_dasharray: "{CIRCUMFERENCE}",
|
||||
stroke_dashoffset: "{offset}",
|
||||
transform: "rotate(-90 60 60)",
|
||||
stroke_linecap: "round",
|
||||
}
|
||||
|
||||
// Optional center text
|
||||
text {
|
||||
x: "60",
|
||||
y: "65",
|
||||
text_anchor: "middle",
|
||||
font_size: "18",
|
||||
fill: "#4f46e5",
|
||||
font_family: "sans-serif",
|
||||
"{(percent * 100.0).round()}%"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn ProgressBar(percent: u8, class: Option<String>) -> Element {
|
||||
let class_attr = match class {
|
||||
Some(c) => format!("progress-bar {}", c),
|
||||
None => "progress-bar".to_string(),
|
||||
};
|
||||
|
||||
rsx! {
|
||||
span { class: "{class_attr}",
|
||||
span { class: "progress", style: format!("width: {}%; background-color: currentColor;", percent.clamp(0, 100)) }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
use crate::components::ProgressBar;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const SERVER_CSS: Asset = asset!("/assets/styles/server.css");
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
|
||||
pub enum Status {
|
||||
Online,
|
||||
Offline,
|
||||
Warning,
|
||||
Maintenance,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
|
||||
pub struct Server {
|
||||
pub name: String,
|
||||
pub status: Status,
|
||||
pub ip: String,
|
||||
pub cpu: u8,
|
||||
pub memory: u8,
|
||||
pub storage: u8,
|
||||
pub network: u8,
|
||||
}
|
||||
|
||||
impl std::fmt::Display for Status {
|
||||
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
|
||||
match self {
|
||||
Status::Online => write!(f, "Online"),
|
||||
Status::Warning => write!(f, "Warning"),
|
||||
Status::Offline => write!(f, "Offline"),
|
||||
Status::Maintenance => write!(f, "Maintenance"),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn ServerComponent(server: Server) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: SERVER_CSS }
|
||||
|
||||
div { class: "server",
|
||||
div { class: "server-heading",
|
||||
div { class: "server-heading-inner",
|
||||
div { class: "server-icon",
|
||||
lucide_dioxus::Server { size: 20, color: "currentColor" }
|
||||
}
|
||||
div { class: "server-heading-info",
|
||||
h3 { "{server.name}" }
|
||||
div {
|
||||
div { class: "{server.status}",
|
||||
lucide_dioxus::CircleCheckBig { size: 12, color: "currentColor" }
|
||||
p { "{server.status}" }
|
||||
}
|
||||
p { "{server.ip}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button { lucide_dioxus::EllipsisVertical { size: 16, color: "currentColor" } }
|
||||
}
|
||||
|
||||
div { class: "server-monitor",
|
||||
div { p {
|
||||
lucide_dioxus::Cpu { size: 16, color: "currentColor", class: "cpu" }
|
||||
"CPU"
|
||||
} p { "{server.cpu}%" } }
|
||||
ProgressBar { percent: server.cpu, class: get_level(server.cpu) }
|
||||
|
||||
div { p {
|
||||
lucide_dioxus::MemoryStick { size: 16, color: "currentColor", class: "ram" }
|
||||
"Memory"
|
||||
} p { "{server.memory}%" } }
|
||||
ProgressBar { percent: server.memory, class: get_level(server.memory) }
|
||||
|
||||
div { p {
|
||||
lucide_dioxus::HardDrive { size: 16, color: "currentColor", class: "storage" }
|
||||
"Storage"
|
||||
} p { "{server.storage}%" } }
|
||||
ProgressBar { percent: server.storage, class: get_level(server.storage) }
|
||||
|
||||
div { p {
|
||||
lucide_dioxus::Wifi { size: 16, color: "currentColor", class: "network" }
|
||||
"Network"
|
||||
} p { "{server.network}%" } }
|
||||
ProgressBar { percent: server.network, class: get_level(server.network) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn get_level(i: u8) -> String {
|
||||
if i > 80 {
|
||||
String::from("high")
|
||||
} else if i > 50 {
|
||||
String::from("medium")
|
||||
} else {
|
||||
String::from("low")
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::Route;
|
||||
|
||||
const SIDEBAR_CSS: Asset = asset!("/assets/styles/sidebar.css");
|
||||
|
||||
pub struct SideBarItem {
|
||||
pub name: &'static str,
|
||||
pub icon: fn() -> Element,
|
||||
pub route: Route,
|
||||
}
|
||||
|
||||
const SIDEBAR_ITEMS: &[SideBarItem] = &[
|
||||
SideBarItem {
|
||||
name: "Dashboard",
|
||||
icon: || rsx!(lucide_dioxus::Gauge { size: 35 }),
|
||||
route: Route::Dashboard {},
|
||||
},
|
||||
SideBarItem {
|
||||
name: "Settings",
|
||||
icon: || rsx!(lucide_dioxus::Settings { size: 35 }),
|
||||
route: Route::Settings {},
|
||||
},
|
||||
];
|
||||
|
||||
#[component]
|
||||
pub fn SideBar(selected: usize) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: SIDEBAR_CSS }
|
||||
|
||||
div {
|
||||
id: "sidebar",
|
||||
|
||||
for (i, itm) in SIDEBAR_ITEMS.iter().enumerate() {
|
||||
Link {
|
||||
to: itm.route.clone(),
|
||||
class: if i == selected {"sidebar-item sidebar-selected"} else {"sidebar-item"},
|
||||
|
||||
{(itm.icon)()}
|
||||
|
||||
p { "{itm.name}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user