GPUI Box GitHub

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()
}

Source: crates/gpui-kit/src/display/sparkline.rs