Components / display
Sparkline builder
A compact, accessible trend reading.
A builder is RenderOnce. Construct and mount it in one expression.
use gpui_kit::display::sparkline::Sparkline;
Reviewed in sparkline.
Construct
new(ident: impl Into<Ident>, label: impl Into<SharedString>, state: SparklineState) -> Self
Options
Chain onto the value.
tint(tint: Hsla) -> Self
embedded() -> Self
stale(stale: bool) -> Self
Example · sparkline
fn sparkline(_window: &mut Window, cx: &mut App) -> AnyElement {
let theme = cx.theme().clone();
let points = [
SparklinePoint::new(0.0, 0.20),
SparklinePoint::new(0.14, 0.34),
SparklinePoint::new(0.28, 0.29),
SparklinePoint::new(0.42, 0.56),
SparklinePoint::new(0.57, 0.48),
SparklinePoint::new(0.71, 0.74),
SparklinePoint::new(0.85, 0.66),
SparklinePoint::new(1.0, 0.82),
];
// A second metric is a second shape. Two readings that draw the same
// curve prove only that both were handed the same fixture.
let queue = [
SparklinePoint::new(0.0, 0.72),
SparklinePoint::new(0.14, 0.64),
SparklinePoint::new(0.28, 0.80),
SparklinePoint::new(0.42, 0.45),
SparklinePoint::new(0.57, 0.38),
SparklinePoint::new(0.71, 0.52),
SparklinePoint::new(0.85, 0.30),
SparklinePoint::new(1.0, 0.34),
];
stack(&theme)
.w(px(520.0))
.child(caption(
&theme,
"normalized geometry with caller-formatted current, minimum and maximum",
))
.child(Sparkline::new(
"scene.sparkline.rate",
"Fixture throughput",
SparklineState::Ready(SparklineReading::new(
points, "82 req/s", "20 req/s", "82 req/s",
)),
))
.child(caption(
&theme,
"a reading that is no longer verified draws quieter, and its latest \
sample is a ring rather than a mark",
))
.child(Sparkline::new(
"scene.sparkline.stale",
"Fixture queue depth",
SparklineState::Stale {
reading: SparklineReading::new(queue, "34 jobs", "8 jobs", "41 jobs"),
reason: "The latest sample is unavailable; the verified reading remains.".into(),
},
))
.child(caption(
&theme,
"a series the caller has already spent a colour on",
))
.child(
Sparkline::new(
"scene.sparkline.tinted",
"Fixture tokens",
SparklineState::Ready(SparklineReading::new(points, "1.2k", "0.4k", "1.4k")),
)
.tint(identity_tint(&theme, "agent.read")),
)
.into_any_element()
}