Stat ring

A compact ring that fills towards a goal, with the share of the goal in the middle. Past the goal the ring stays full and the figure reads over 100%.

Weekly active
Measure	Value	Goal	Progress
Weekly active	7420	10000	74%

Story points
Measure	Value	Goal	Progress
Story points	38	40	95%

Quota
Measure	Value	Goal	Progress
Quota	$1.12m	$1.00m	112%

Usage

use hydroxy_leptos::stat_ring::StatRing;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    view! {
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-8);">
            <StatRing value=7_420.0 goal=10_000.0 label="Weekly active" />
            <StatRing value=38.0 goal=40.0 label="Story points" />
            <StatRing value=1.12 goal=1.0 label="Quota" format=|v: f64| format!("${v:.2}m") />
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::stat_ring::StatRing;

#[component]
pub fn StatRingDemo() -> Element {
    rsx! {
        div { style: "display: flex; flex-wrap: wrap; gap: var(--space-8);",
            StatRing { value: 7_420.0, goal: 10_000.0, label: "Weekly active" }
            StatRing { value: 38.0, goal: 40.0, label: "Story points" }
            StatRing { value: 1.12, goal: 1.0, label: "Quota", format: move |v: f64| format!("${v:.2}m") }
        }
    }
}

Anatomy

Component	data-part	Renders
`StatRing`	root	figure with a screen-reader table of value, goal and progress
	ring	Focusable ring; focus or hover shows the reading
	track	The full circle behind the value
	value	The arc, filling clockwise from 12 o'clock
	center	Share of the goal and the label
	tooltip	Value and goal

Keyboard

Key	Does
`Escape`	Hide the reading

Props

Prop	Type	Notes
`value`	f64	Required. The current value
`goal`	f64	Required. What the ring fills towards
`label`	String	Required. What it measures; shown in the middle
`size`	u16	Diameter in px. Default 112
`thickness`	u16	Ring width in px. Default 10
`format`	Fn(f64) -> String	Formats the value and goal

Events

Prop	Type	Notes
`on_hover`	Callback<Option<Datum>>	The mark under the pointer or keyboard focus changes, or is left. Fires only on a change
`on_select`	Callback<Datum>	Click, tap or Enter on a mark