radial charts

src/components/mod.rs

@@ -96,3 +96,55 @@ pub fn LineChart(
         }
     }
 }
+
+const RADIUS: f64 = 50.0;
+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()}%"
+            }
+        }
+    }
+}

src/dashboard.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 
-use crate::components::LineChart;
+use crate::components::{LineChart, RadialChart};
 
 const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
 
@@ -15,11 +15,27 @@ pub fn Dashboard() -> Element {
             div { id: "sidebar" }
             div {
                 class: "left_container",
-                div { id: "top_container" }
+                div { id: "top_container",
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                }
                 div { id: "mid_container",
                     LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 }
                 }
-                div { id: "bottom_container" }
+                div { id: "bottom_container",
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                    RadialChart { percent: 0.6 }
+                }
             }
             div {
                 class: "right_container",