From cc0a181f3f78c8d7253a3750cdc6165a55f632d4 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Sun, 13 Jul 2025 01:39:00 +0200
Subject: [PATCH] graph guides

---
 assets/styles/dashboard.css | 44 +++++++++++++++++++++++++++++++++++++
 src/dashboard.rs            | 19 ++++++++++++----
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/assets/styles/dashboard.css b/assets/styles/dashboard.css
index f8dd34e..06ef5aa 100644
--- a/assets/styles/dashboard.css
+++ b/assets/styles/dashboard.css
@@ -126,6 +126,50 @@ body {
   color: var(--network);
 }
 
+.chart-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.y-axis {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.y-axis div {
+  height: 100%;
+  text-align: right;
+}
+
+.chart-area {
+  display: flex;
+  flex-direction: column;
+}
+
+.performance-stack {
+  display: flex;
+  position: relative;
+  height: 300px;
+}
+
+.x-axis {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  padding-top: 0.5rem;
+}
+
+.x-axis div {
+  width: calc(100% / 24);
+  text-align: center;
+}
+
 .overview-card {
   background-color: var(--card-bg);
   box-sizing: border-box;
diff --git a/src/dashboard.rs b/src/dashboard.rs
index 97e1ea8..f43cb33 100644
--- a/src/dashboard.rs
+++ b/src/dashboard.rs
@@ -54,11 +54,22 @@ pub fn Dashboard() -> Element {
 
                 div { class: "overview-container",
                     div { class: "performance-card",
-                        div { class: "performance-stack",
-                            LineChart { data: vec![30, 30, 30, 70, 30], max: 100, class: "lc1" }
-                            LineChart { data: vec![47, 50, 60, 30, 50], max: 100, class: "lc2" }
-                            LineChart { data: vec![23, 50, 40, 50, 52], max: 100, class: "lc3" }
+                        div { class: "chart-container",
+                            div { class: "y-axis",
+                                {(0..=100).rev().step_by(25).map(|v| rsx!(div { "{v}" }))}
+                            }
+                            div { class: "chart-area",
+                                div { class: "performance-stack",
+                                    LineChart { data: vec![30, 35, 23, 21, 32, 40, 53, 61, 47, 36, 26, 18], max: 100, class: "lc1" }
+                                    LineChart { data: vec![47, 50, 60, 30, 50], max: 100, class: "lc2" }
+                                    LineChart { data: vec![23, 50, 40, 50, 52], max: 100, class: "lc3" }
+                                }
+                                div { class: "x-axis",
+                                    {(0..24).step_by(2).map(|h| rsx!(div { "{h}h" }))}
+                                }
+                            }
                         }
+
                     }
 
                     div { class: "overview-card",