use hydroxy_leptos::button::*;
use hydroxy_leptos::chart_frame::ChartFrame;
use hydroxy_leptos::radial_chart::*;
use leptos::prelude::*;
pub fn demo() -> AnyView {
let goals = vec![
Datum::new("Interviews", 42.0),
Datum::new("Surveys", 28.0),
Datum::new("Tickets", 65.0),
Datum::new("Reviews", 12.0),
];
// The arc takes the colour of the highest band the value has reached.
let bands = || {
vec![
Threshold::new(0.0, "var(--status-danger)"),
Threshold::new(70.0, "var(--status-warning)"),
Threshold::new(90.0, "var(--status-success)"),
]
};
let arcs = goals.clone();
// Low load is good here, so the bands run green to red.
let load_bands = || {
vec![
Threshold::new(0.0, "var(--status-success)"),
Threshold::new(60.0, "var(--status-warning)"),
Threshold::new(85.0, "var(--status-danger)"),
]
};
// The needle swings to each new reading and settles.
let tick = RwSignal::new(0_usize);
let load = Signal::derive(move || [47.0, 72.0, 91.0, 28.0][tick.get() % 4]);
// A changed value glides along the arc.
let week = RwSignal::new(0_usize);
let backlog = Signal::derive(move || [38.0, 64.0, 91.0][week.get() % 3]);
view! {
<div style="display: grid; gap: var(--space-8);">
<ChartFrame title="Support SLA met" description="Share of tickets answered inside the target time.">
<div style="display: flex; flex-wrap: wrap; gap: var(--space-8);">
<GaugeChart value=94.0 label="SLA met this week" caption="this week" thresholds=bands() format=|v: f64| format!("{v:.0}%") />
<GaugeChart value=78.0 label="SLA met last week" caption="last week" thresholds=bands() format=|v: f64| format!("{v:.0}%") />
<GaugeChart value=52.0 label="SLA met two weeks ago" caption="two weeks ago" thresholds=bands() format=|v: f64| format!("{v:.0}%") />
</div>
</ChartFrame>
<ChartFrame title="Backlog cleared" description="Step through the last three sprints.">
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6);">
<GaugeChart value=backlog label="Backlog cleared this sprint" caption="of planned work" thresholds=bands() format=|v: f64| format!("{v:.0}%") />
<Button variant=ButtonVariant::Secondary on_click=move |_| week.update(|w| *w += 1)>"Next sprint"</Button>
</div>
</ChartFrame>
<ChartFrame title="Server load" description="One reading in three gauge styles: arc, segmented status bands and needle.">
<div style="display: flex; flex-wrap: wrap; gap: var(--space-8);">
<GaugeChart value=load label="CPU load, arc" caption="CPU" thresholds=load_bands() format=|v: f64| format!("{v:.0}%") />
<GaugeChart value=load label="CPU load, segmented" caption="CPU" thresholds=load_bands() variant=GaugeVariant::Segmented format=|v: f64| format!("{v:.0}%") />
<GaugeChart value=load label="CPU load, needle" caption="CPU" thresholds=load_bands() variant=GaugeVariant::Needle format=|v: f64| format!("{v:.0}%") />
</div>
<Button variant=ButtonVariant::Secondary on_click=move |_| tick.update(|t| *t += 1)>"New reading"</Button>
</ChartFrame>
<ChartFrame title="Research goals" description="Progress against a target of 100 each.">
<RadialBarChart data=goals max=100.0 label="Progress towards each research goal" />
</ChartFrame>
<ChartFrame title="Research goals, as arcs" description="Three-quarter arcs with each label at its arc's start.">
<RadialBarChart data=arcs max=100.0 sweep=270.0 size=240 label="Progress towards each research goal, as arcs" />
</ChartFrame>
</div>
}
.into_any()
}
use dioxus::prelude::*;
use hydroxy_dioxus::button::{Button, ButtonVariant};
use hydroxy_dioxus::chart_frame::ChartFrame;
use hydroxy_dioxus::radial_chart::{Datum, GaugeChart, GaugeVariant, RadialBarChart, Threshold};
fn bands() -> Vec<Threshold> {
vec![
Threshold::new(0.0, "var(--status-danger)"),
Threshold::new(70.0, "var(--status-warning)"),
Threshold::new(90.0, "var(--status-success)"),
]
}
// Low load is good here, so the bands run green to red.
fn load_bands() -> Vec<Threshold> {
vec![
Threshold::new(0.0, "var(--status-success)"),
Threshold::new(60.0, "var(--status-warning)"),
Threshold::new(85.0, "var(--status-danger)"),
]
}
#[component]
pub fn RadialChartsDemo() -> Element {
let goals = vec![
Datum::new("Interviews", 42.0),
Datum::new("Surveys", 28.0),
Datum::new("Tickets", 65.0),
Datum::new("Reviews", 12.0),
];
// A changed value glides along the arc.
let mut week = use_signal(|| 0_usize);
let backlog = [38.0, 64.0, 91.0][week() % 3];
// The needle swings to each new reading and settles.
let mut tick = use_signal(|| 0_usize);
let load = [47.0, 72.0, 91.0, 28.0][tick() % 4];
rsx! {
div { style: "display: grid; gap: var(--space-8);",
ChartFrame { title: "Support SLA met", description: "Share of tickets answered inside the target time.",
div { style: "display: flex; flex-wrap: wrap; gap: var(--space-8);",
GaugeChart {
value: 94.0,
label: "SLA met this week",
caption: "this week",
thresholds: bands(),
format: move |v: f64| format!("{v:.0}%"),
}
GaugeChart {
value: 78.0,
label: "SLA met last week",
caption: "last week",
thresholds: bands(),
format: move |v: f64| format!("{v:.0}%"),
}
GaugeChart {
value: 52.0,
label: "SLA met two weeks ago",
caption: "two weeks ago",
thresholds: bands(),
format: move |v: f64| format!("{v:.0}%"),
}
}
}
ChartFrame { title: "Backlog cleared", description: "Step through the last three sprints.",
div { style: "display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6);",
GaugeChart {
value: backlog,
label: "Backlog cleared this sprint",
caption: "of planned work",
thresholds: bands(),
format: move |v: f64| format!("{v:.0}%"),
}
Button { variant: ButtonVariant::Secondary, on_click: move |_| week += 1, "Next sprint" }
}
}
ChartFrame { title: "Server load", description: "One reading in three gauge styles: arc, segmented status bands and needle.",
div { style: "display: flex; flex-wrap: wrap; gap: var(--space-8);",
GaugeChart { value: load, label: "CPU load, arc", caption: "CPU", thresholds: load_bands(), format: move |v: f64| format!("{v:.0}%") }
GaugeChart {
value: load,
label: "CPU load, segmented",
caption: "CPU",
thresholds: load_bands(),
variant: GaugeVariant::Segmented,
format: move |v: f64| format!("{v:.0}%"),
}
GaugeChart {
value: load,
label: "CPU load, needle",
caption: "CPU",
thresholds: load_bands(),
variant: GaugeVariant::Needle,
format: move |v: f64| format!("{v:.0}%"),
}
}
Button { variant: ButtonVariant::Secondary, on_click: move |_| tick += 1, "New reading" }
}
ChartFrame { title: "Research goals", description: "Progress against a target of 100 each.",
RadialBarChart { data: goals.clone(), max: 100.0, label: "Progress towards each research goal" }
}
ChartFrame { title: "Research goals, as arcs", description: "Three-quarter arcs with each label at its arc's start.",
RadialBarChart {
data: goals,
max: 100.0,
sweep: 270.0,
size: 240,
label: "Progress towards each research goal, as arcs",
}
}
}
}
}