Even better dashboard
This commit is contained in:
Generated
+10
@@ -2497,6 +2497,15 @@ version = "0.1.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "b3bd0dd2cd90571056fdb71f6275fada10131182f84899f4b2a916e565d81d86"
|
||||
|
||||
[[package]]
|
||||
name = "lucide-dioxus"
|
||||
version = "2.15.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "0d06f27420e7a960d76a02f43819fba2fb3a513738714cc6262c02d9fd256e5c"
|
||||
dependencies = [
|
||||
"dioxus",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "mac"
|
||||
version = "0.1.1"
|
||||
@@ -3632,6 +3641,7 @@ name = "sentryx"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"dioxus",
|
||||
"lucide-dioxus",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
|
||||
@@ -8,6 +8,7 @@ edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { version = "0.6.0", features = ["router", "fullstack"] }
|
||||
lucide-dioxus = { version = "2.15.0", features = ["all-icons"] }
|
||||
|
||||
[features]
|
||||
default = ["web"]
|
||||
|
||||
+125
-65
@@ -1,95 +1,155 @@
|
||||
body {
|
||||
background-color: #111526;
|
||||
background-color: #f1f5f9;
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.summary-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary-card h3 {
|
||||
font-size: x-large;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 400px 2fr 1.6fr;
|
||||
gap: 20px;
|
||||
.summary-card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.left_container {
|
||||
display: grid;
|
||||
grid-template-rows: 200px 450px 230px;
|
||||
gap: 20px;
|
||||
padding-top: 20px;
|
||||
.summary-card svg {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#top_container,
|
||||
#mid_container,
|
||||
#bottom_container {
|
||||
box-sizing: border-box;
|
||||
background-color: #171b2e;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
#online {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.right_container {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
padding-top: 20px;
|
||||
padding-right: 20px;
|
||||
max-height: calc(100vh - 40px);
|
||||
#issues {
|
||||
color: rgb(234, 71, 12);
|
||||
}
|
||||
|
||||
.right_box {
|
||||
box-sizing: border-box;
|
||||
padding: 30px;
|
||||
background-color: #171b2e;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
#cpu {
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.container {
|
||||
#ram {
|
||||
color: rgb(147, 51, 234);
|
||||
}
|
||||
|
||||
.summary-card p {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.overview-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.performance-card {
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.summary-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.overview-container {
|
||||
flex-direction: column;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: none;
|
||||
height: 150px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.right_container {
|
||||
padding-top: 10px;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 100%;
|
||||
.dashboard-container {
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.line-chart {
|
||||
.search-container {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.line-chart-svg {
|
||||
.search-input input {
|
||||
appearance: auto;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(226, 232, 240);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
color: rgb(2, 8, 23);
|
||||
cursor: auto;
|
||||
display: flex;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: 8px 12px 8px 40px;
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.line-chart .fill {
|
||||
background: linear-gradient(to right, red, yellow);
|
||||
-webkit-mask: url(#svg-path);
|
||||
mask: url(#svg-path);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
.search-input input:focus {
|
||||
border-color: rgb(0, 0, 0);
|
||||
border-width: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.line-chart .line {
|
||||
stroke-width: 1px;
|
||||
.search-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input svg {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.search-container button {
|
||||
background-color: transparent;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
+38
-26
@@ -1,79 +1,91 @@
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-Regular.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-Regular.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-Bold.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-Bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-Italic.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-Italic.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-BoldItalic.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-BoldItalic.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto Condensed';
|
||||
src: url('assets/font/Roboto_Condensed-ExtraLight.ttf') format('truetype');
|
||||
font-family: "Roboto Condensed";
|
||||
src: url("assets/font/Roboto_Condensed-ExtraLight.ttf") format("truetype");
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto Condensed';
|
||||
src: url('assets/font/Roboto_Condensed-ExtraLightItalic.ttf') format('truetype');
|
||||
font-family: "Roboto Condensed";
|
||||
src: url("assets/font/Roboto_Condensed-ExtraLightItalic.ttf")
|
||||
format("truetype");
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-Medium.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-MediumItalic.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-MediumItalic.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-SemiBold.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-SemiBold.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-SemiBoldItalic.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-SemiBoldItalic.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-ExtraBold.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-ExtraBold.ttf") format("truetype");
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('assets/font/Roboto-ExtraBoldItalic.ttf') format('truetype');
|
||||
font-family: "Roboto";
|
||||
src: url("assets/font/Roboto-ExtraBoldItalic.ttf") format("truetype");
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', 'Roboto Condensed', sans-serif;
|
||||
font-family: "Roboto", "Roboto Condensed", sans-serif;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.line-chart-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
+6
-6
@@ -1,10 +1,10 @@
|
||||
#sidebar {
|
||||
box-sizing: border-box;
|
||||
background-color: #171b2e;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
background-color: #fff;
|
||||
width: 300px;
|
||||
height: calc(100vh - 40px);
|
||||
border-radius: 20px;
|
||||
margin-left: 25px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
.sidebar-item p {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" class="icon icon-tabler icons-tabler-filled icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2.954a10 10 0 0 1 6.222 17.829a1 1 0 0 1 -.622 .217h-11.2a1 1 0 0 1 -.622 -.217a10 10 0 0 1 6.222 -17.829m4.207 5.839a1 1 0 0 0 -1.414 0l-2.276 2.274a2.003 2.003 0 0 0 -2.514 1.815l-.003 .118a2 2 0 1 0 3.933 -.517l2.274 -2.276a1 1 0 0 0 0 -1.414" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000" class="icon icon-tabler icons-tabler-filled icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2.954a10 10 0 0 1 6.222 17.829a1 1 0 0 1 -.622 .217h-11.2a1 1 0 0 1 -.622 -.217a10 10 0 0 1 6.222 -17.829m4.207 5.839a1 1 0 0 0 -1.414 0l-2.276 2.274a2.003 2.003 0 0 0 -2.514 1.815l-.003 .118a2 2 0 1 0 3.933 -.517l2.274 -2.276a1 1 0 0 0 0 -1.414" /></svg>
|
||||
|
Before Width: | Height: | Size: 487 B After Width: | Height: | Size: 487 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M13.45 11.55l2.05 -2.05" /><path d="M6.4 20a9 9 0 1 1 11.2 0z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M13.45 11.55l2.05 -2.05" /><path d="M6.4 20a9 9 0 1 1 11.2 0z" /></svg>
|
||||
|
Before Width: | Height: | Size: 435 B After Width: | Height: | Size: 435 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" class="icon icon-tabler icons-tabler-filled icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000" class="icon icon-tabler icons-tabler-filled icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z" /></svg>
|
||||
|
Before Width: | Height: | Size: 512 B After Width: | Height: | Size: 512 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
|
||||
|
Before Width: | Height: | Size: 449 B After Width: | Height: | Size: 449 B |
@@ -98,7 +98,9 @@ pub fn LineChart(
|
||||
}
|
||||
}
|
||||
|
||||
#[allow(unused)]
|
||||
const RADIUS: f64 = 50.0;
|
||||
#[allow(unused)]
|
||||
const CIRCUMFERENCE: f64 = 2.0 * std::f64::consts::PI * RADIUS;
|
||||
|
||||
#[component]
|
||||
|
||||
+64
-30
@@ -1,6 +1,7 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::components::{sidebar::SideBar, LineChart, RadialChart};
|
||||
use crate::components::{sidebar::SideBar, LineChart};
|
||||
use lucide_dioxus;
|
||||
|
||||
const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
|
||||
|
||||
@@ -9,41 +10,74 @@ pub fn Dashboard() -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: DASHBOARD_CSS }
|
||||
|
||||
div {
|
||||
class: "container",
|
||||
|
||||
div { class: "sidebar-container",
|
||||
SideBar { selected: 0 }
|
||||
|
||||
div { class: "dashboard-container",
|
||||
div { class: "summary-container",
|
||||
div { class: "summary-card", id: "online",
|
||||
div {
|
||||
class: "left_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",
|
||||
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 }
|
||||
p { "Online Servers" }
|
||||
h3 { "3" }
|
||||
}
|
||||
lucide_dioxus::CircleCheckBig { size: 32, color: "currentColor" }
|
||||
}
|
||||
|
||||
div { class: "summary-card", id: "issues",
|
||||
div {
|
||||
class: "right_container",
|
||||
div { class: "right_box",
|
||||
LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 }
|
||||
p { "Issues" }
|
||||
h3 { "2" }
|
||||
}
|
||||
lucide_dioxus::TriangleAlert { size: 32, color: "currentColor" }
|
||||
}
|
||||
|
||||
div { class: "summary-card", id: "cpu",
|
||||
div {
|
||||
p { "Avg CPU Usage" }
|
||||
h3 { "42%" }
|
||||
}
|
||||
lucide_dioxus::Cpu { size: 32, color: "currentColor" }
|
||||
}
|
||||
|
||||
div { class: "summary-card", id: "ram",
|
||||
div {
|
||||
p { "Avg Memory" }
|
||||
h3 { "42%" }
|
||||
}
|
||||
lucide_dioxus::MemoryStick { size: 32, color: "currentColor" }
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "overview-container",
|
||||
div { class: "performance-card",
|
||||
LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
|
||||
}
|
||||
|
||||
div { class: "performance-card",
|
||||
LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "search-container",
|
||||
div { class: "search-input",
|
||||
lucide_dioxus::Search { size: 16, color: "currentColor" }
|
||||
input { placeholder: "Search servers by name, location, or IP..." }
|
||||
}
|
||||
button { "All (4)" }
|
||||
button { id: "online", "Online (3)" }
|
||||
button { id: "issues", "Warning (1)" }
|
||||
button { id: "ram", "Offline (1)" }
|
||||
button { id: "cpu", "Maintenance (1)" }
|
||||
}
|
||||
|
||||
div { class: "server-container",
|
||||
div { class: "performance-card",
|
||||
LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
|
||||
}
|
||||
|
||||
div { class: "performance-card",
|
||||
LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
|
||||
}
|
||||
div { class: "right_box",
|
||||
LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user