Pareto chart

Find the few causes behind most of a total. Bars sort largest first and a line climbs to 100% on its own labelled right-hand axis, the one chart here with two.

Tickets by cause

Two causes account for most of the volume. The line reads on the right-hand axis.

Support tickets by cause
	Tickets	Cumulative %
Billing questions	212	36%
Missing invoices	129	58%
Login problems	84	72%
Sync conflicts	66	84%
Slow exports	47	92%
Permissions	31	97%
Other	18	100%

Usage

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

#[component]
pub fn Demo() -> impl IntoView {
    // Any order: the chart sorts largest first.
    let causes = vec![
        Datum::new("Login problems", 84.0),
        Datum::new("Billing questions", 212.0),
        Datum::new("Slow exports", 47.0),
        Datum::new("Missing invoices", 129.0),
        Datum::new("Sync conflicts", 66.0),
        Datum::new("Permissions", 31.0),
        Datum::new("Other", 18.0),
    ];

    view! {
        <ChartFrame title="Tickets by cause" description="Two causes account for most of the volume. The line reads on the right-hand axis.">
            <ParetoChart data=causes label="Support tickets by cause" value_label="Tickets" />
        </ChartFrame>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::chart_frame::ChartFrame;
use hydroxy_dioxus::pareto_chart::{Datum, ParetoChart};

#[component]
pub fn ParetoChartDemo() -> Element {
    let causes = vec![
        Datum::new("Login problems", 84.0),
        Datum::new("Billing questions", 212.0),
        Datum::new("Slow exports", 47.0),
        Datum::new("Missing invoices", 129.0),
        Datum::new("Sync conflicts", 66.0),
        Datum::new("Permissions", 31.0),
        Datum::new("Other", 18.0),
    ];

    rsx! {
        ChartFrame { title: "Tickets by cause", description: "Two causes account for most of the volume. The line reads on the right-hand axis.",
            ParetoChart { data: causes, label: "Support tickets by cause", value_label: "Tickets" }
        }
    }
}

Anatomy

Component	data-part	Renders
`ParetoChart`	root	figure with a screen-reader table of values and cumulative shares
	bar	One per category, largest first
	line	Cumulative share of the total, through the bar centres
	dot	One per category on the cumulative line
	gridline	Left ticks for the bars; right ticks (data-axis=right) for 0-100%
	tooltip	The category's value and the cumulative share up to it
	legend	The bar measure and the cumulative line

Keyboard

Key	Does
`ArrowLeft / ArrowRight`	Previous or next category
`Home / End`	Largest or smallest category
`Escape`	Hide the tooltip

Props

Prop	Type	Notes
`data`	Vec<Datum>	Required. Datum::new(label, value), any order
`label`	String	Required. What the chart shows; the accessible name
`value_label`	String	What the bars count. Default "Count"
`height`	u16	Plot height in px. Default 240
`format`	Fn(f64) -> String	Formats the left ticks, tooltip and table
`annotations`	Vec<Annotation>	On the left axis; x is a position in sorted order

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