Stat card

One key figure with its name and change. Lead with the number; the diamond ties a card to its chart series.

Interviews read

22 of 24

+6this week

Median reading time

11min

−4 minvs last week

Open flags

+1since Monday

Usage

use hydroxy_leptos::stat_card::{DeltaTone, Jewel, StatCard};
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    view! {
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5);">
            <StatCard
                label="Interviews read"
                value="22 of 24"
                delta="+6"
                delta_tone=DeltaTone::Up
                caption="this week"
                jewel=Jewel::Amethyst
            />
            <StatCard
                label="Median reading time"
                value="11"
                unit="min"
                delta="−4 min"
                delta_tone=DeltaTone::Up
                caption="vs last week"
                jewel=Jewel::Sapphire
            />
            <StatCard label="Open flags" value="2" delta="+1" delta_tone=DeltaTone::Down caption="since Monday" />
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::stat_card::{DeltaTone, Jewel, StatCard};

#[component]
pub fn StatCardDemo() -> Element {
    rsx! {
        div { style: "display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5);",
            StatCard {
                label: "Interviews read",
                value: "22 of 24",
                delta: Some("+6".to_string()),
                delta_tone: DeltaTone::Up,
                caption: "this week",
                jewel: Jewel::Amethyst,
            }
            StatCard {
                label: "Median reading time",
                value: "11",
                unit: "min",
                delta: Some("−4 min".to_string()),
                delta_tone: DeltaTone::Up,
                caption: "vs last week",
                jewel: Jewel::Sapphire,
            }
            StatCard {
                label: "Open flags",
                value: "2",
                delta: Some("+1".to_string()),
                delta_tone: DeltaTone::Down,
                caption: "since Monday",
            }
        }
    }
}

Anatomy

Component	data-part	Renders
`StatCard`	—	div[data-scope=stat-card]
	label	What the figure measures, with an optional jewel diamond
	value	The figure in mono, with an optional unit
	delta	The change, coloured by delta_tone

Props

Prop	Type	Notes
`label`	String	Required. Sentence case
`value`	String	Required. The figure
`unit`	String	After the figure, such as min
`delta`	String	The change, such as −4 min
`delta_tone`	DeltaTone	Up (good), Down (bad) or Neutral (default)
`jewel`	Jewel	Diamond beside the label
`caption`	String	Context after the change