Threshold chart

A line judged against a limit: one colour above it, another below, with the gap shaded. Good for objectives, budgets and alert levels.

API latency

Daily p95 against the 300 ms objective. Days over it show in the first colour.

Objective

Daily p95 API latency against the 300 ms objective
	Value	Objective
Oct 1	240 ms	300 ms
Oct 2	262 ms	300 ms
Oct 3	251 ms	300 ms
Oct 4	298 ms	300 ms
Oct 5	334 ms	300 ms
Oct 6	356 ms	300 ms
Oct 7	312 ms	300 ms
Oct 8	276 ms	300 ms
Oct 9	259 ms	300 ms
Oct 10	288 ms	300 ms
Oct 11	321 ms	300 ms
Oct 12	305 ms	300 ms
Oct 13	270 ms	300 ms
Oct 14	248 ms	300 ms

Usage

use hydroxy_leptos::chart_frame::ChartFrame;
use hydroxy_leptos::threshold_chart::*;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    // p95 API latency over two weeks, in milliseconds.
    let latency = vec![
        Datum::new("Oct 1", 240.0),
        Datum::new("Oct 2", 262.0),
        Datum::new("Oct 3", 251.0),
        Datum::new("Oct 4", 298.0),
        Datum::new("Oct 5", 334.0),
        Datum::new("Oct 6", 356.0),
        Datum::new("Oct 7", 312.0),
        Datum::new("Oct 8", 276.0),
        Datum::new("Oct 9", 259.0),
        Datum::new("Oct 10", 288.0),
        Datum::new("Oct 11", 321.0),
        Datum::new("Oct 12", 305.0),
        Datum::new("Oct 13", 270.0),
        Datum::new("Oct 14", 248.0),
    ];

    view! {
        <ChartFrame title="API latency" description="Daily p95 against the 300 ms objective. Days over it show in the first colour.">
            <ThresholdChart
                data=latency
                threshold=300.0
                label="Daily p95 API latency against the 300 ms objective"
                threshold_label="Objective"
                above_label="Over objective"
                below_label="Within objective"
                curve=Curve::Monotone
                format=|v: f64| format!("{v:.0} ms")
                annotations=vec![Annotation::x_band(4.0, 6.0, "Incident")]
            />
        </ChartFrame>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::chart_frame::ChartFrame;
use hydroxy_dioxus::threshold_chart::{Annotation, Curve, Datum, ThresholdChart};

#[component]
pub fn ThresholdChartDemo() -> Element {
    // p95 API latency over two weeks, in milliseconds.
    let latency = vec![
        Datum::new("Oct 1", 240.0),
        Datum::new("Oct 2", 262.0),
        Datum::new("Oct 3", 251.0),
        Datum::new("Oct 4", 298.0),
        Datum::new("Oct 5", 334.0),
        Datum::new("Oct 6", 356.0),
        Datum::new("Oct 7", 312.0),
        Datum::new("Oct 8", 276.0),
        Datum::new("Oct 9", 259.0),
        Datum::new("Oct 10", 288.0),
        Datum::new("Oct 11", 321.0),
        Datum::new("Oct 12", 305.0),
        Datum::new("Oct 13", 270.0),
        Datum::new("Oct 14", 248.0),
    ];

    rsx! {
        ChartFrame { title: "API latency", description: "Daily p95 against the 300 ms objective. Days over it show in the first colour.",
            ThresholdChart {
                data: latency,
                threshold: 300.0,
                label: "Daily p95 API latency against the 300 ms objective",
                threshold_label: "Objective",
                above_label: "Over objective",
                below_label: "Within objective",
                curve: Curve::Monotone,
                format: move |v: f64| format!("{v:.0} ms"),
                annotations: vec![Annotation::x_band(4.0, 6.0, "Incident")],
            }
        }
    }
}

Anatomy

Component	data-part	Renders
`ThresholdChart`	root	figure with a screen-reader table of values and the threshold
	clip	Two copies of the line and fill, clipped above (data-side=above) and below the threshold
	line	The values
	area	Fill between the line and the threshold
	threshold	Dashed line at the threshold, with its label
	tooltip	The value, the threshold and the difference
	legend	Above and below

Keyboard

Key	Does
`ArrowLeft / ArrowRight`	Previous or next point
`Home / End`	First or last point
`Escape`	Hide the tooltip

Props

Prop	Type	Notes
`data`	Vec<Datum>	Required. Datum::new(label, value) in x order
`threshold`	f64	Required. The value the line is judged against
`label`	String	Required. What the chart shows; the accessible name
`threshold_label`	String	Default "Threshold"
`above_label / below_label`	String	Legend names. Default "Above" and "Below"
`curve`	Curve	Linear (default) or Monotone
`scale`	ScaleKind	Linear (default), Log or Symlog
`height`	u16	Plot height in px. Default 240
`format`	Fn(f64) -> String	Formats the ticks, tooltip and table
`annotations`	Vec<Annotation>	x is a point index

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