MetricCard builder

A compact KPI card.

A builder is RenderOnce. Construct and mount it in one expression.

The verified metric-card scene in studio-dark

use gpui_kit::display::metric::MetricCard;

Reviewed in metric-card.

Construct

new(ident: impl Into<Ident>, label: impl Into<SharedString>, state: MetricState) -> Self

Options

Chain onto the value.

tint(tint: Hsla) -> Self

Example · metric-card

fn metric_card(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    stack(&theme)
        .w(px(420.0))
        .child(caption(
            &theme,
            "a KPI keeps the last verified reading when a refresh fails",
        ))
        .child(MetricCard::new(
            "scene.metric.ready",
            "Tokens",
            MetricState::Ready(
                MetricReading::new("12.4k")
                    .delta("+8%", Tone::Success)
                    .trend([
                        SparklinePoint::new(0.0, 0.30),
                        SparklinePoint::new(0.35, 0.55),
                        SparklinePoint::new(0.70, 0.48),
                        SparklinePoint::new(1.0, 0.72),
                    ]),
            ),
        ))
        .child(MetricCard::new(
            "scene.metric.loading",
            "Tokens",
            MetricState::Loading,
        ))
        .child(MetricCard::new(
            "scene.metric.empty",
            "Tokens",
            MetricState::Empty,
        ))
        .child(MetricCard::new(
            "scene.metric.unavailable",
            "Tokens",
            MetricState::Unavailable("The meter host is offline.".into()),
        ))
        .child(MetricCard::new(
            "scene.metric.error",
            "Tokens",
            MetricState::Error("The meter returned an invalid reading.".into()),
        ))
        .child(MetricCard::new(
            "scene.metric.stale",
            "Tokens",
            MetricState::Stale {
                reading: MetricReading::new("12.4k").delta("+8%", Tone::Warning),
                reason: "Refresh failed; showing last verified reading".into(),
            },
        ))
        .into_any_element()
}

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