Depth chart

An order book as two step areas: bids stepping down to the left of the spread and asks stepping up to the right, each the total size available up to that price. A dashed line marks the mid price.

BTC-USD order book
Price	Side	Size	Cumulative
$64187.6	Bid	1.35	17.150000000000002
$64192.7	Bid	1.3	15.8
$64199.2	Bid	2.28	14.5
$64205.0	Bid	1.22	12.22
$64208.4	Bid	1.64	11
$64213.6	Bid	1.11	9.36
$64217.3	Bid	0.84	8.25
$64222.2	Bid	1.51	7.41
$64229.9	Bid	1.17	5.9
$64232.8	Bid	1.73	4.73
$64237.6	Bid	1.68	3
$64243.1	Bid	1.32	1.32
$64256.9	Ask	0.38	0.38
$64260.0	Ask	1.5	1.88
$64265.6	Ask	0.66	2.54
$64272.9	Ask	1.66	4.2
$64275.9	Ask	1.87	6.07
$64281.6	Ask	1.55	7.62
$64285.6	Ask	2	9.620000000000001
$64292.1	Ask	2.11	11.73
$64297.7	Ask	1.26	12.99
$64301.1	Ask	1.15	14.14
$64305.4	Ask	1.09	15.23
$64310.9	Ask	1.92	17.15

Usage

use hydroxy_leptos::depth_chart::{DepthChart, Level};
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let bids = vec![
        Level::new(64243.1, 1.32),
        Level::new(64237.6, 1.68),
        Level::new(64232.8, 1.73),
        Level::new(64229.9, 1.17),
        Level::new(64222.2, 1.51),
        Level::new(64217.3, 0.84),
        Level::new(64213.6, 1.11),
        Level::new(64208.4, 1.64),
        Level::new(64205.0, 1.22),
        Level::new(64199.2, 2.28),
        Level::new(64192.7, 1.30),
        Level::new(64187.6, 1.35),
    ];
    let asks = vec![
        Level::new(64256.9, 0.38),
        Level::new(64260.0, 1.50),
        Level::new(64265.6, 0.66),
        Level::new(64272.9, 1.66),
        Level::new(64275.9, 1.87),
        Level::new(64281.6, 1.55),
        Level::new(64285.6, 2.00),
        Level::new(64292.1, 2.11),
        Level::new(64297.7, 1.26),
        Level::new(64301.1, 1.15),
        Level::new(64305.4, 1.09),
        Level::new(64310.9, 1.92),
    ];

    view! { <DepthChart bids=bids asks=asks label="BTC-USD order book" format=|v: f64| format!("${v:.1}") /> }
        .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::depth_chart::{DepthChart, Level};

#[component]
pub fn DepthChartDemo() -> Element {
    let bids = vec![
        Level::new(64243.1, 1.32),
        Level::new(64237.6, 1.68),
        Level::new(64232.8, 1.73),
        Level::new(64229.9, 1.17),
        Level::new(64222.2, 1.51),
        Level::new(64217.3, 0.84),
        Level::new(64213.6, 1.11),
        Level::new(64208.4, 1.64),
        Level::new(64205.0, 1.22),
        Level::new(64199.2, 2.28),
        Level::new(64192.7, 1.30),
        Level::new(64187.6, 1.35),
    ];
    let asks = vec![
        Level::new(64256.9, 0.38),
        Level::new(64260.0, 1.50),
        Level::new(64265.6, 0.66),
        Level::new(64272.9, 1.66),
        Level::new(64275.9, 1.87),
        Level::new(64281.6, 1.55),
        Level::new(64285.6, 2.00),
        Level::new(64292.1, 2.11),
        Level::new(64297.7, 1.26),
        Level::new(64301.1, 1.15),
        Level::new(64305.4, 1.09),
        Level::new(64310.9, 1.92),
    ];

    rsx! {
        DepthChart { bids, asks, label: "BTC-USD order book", format: move |v: f64| format!("${v:.1}") }
    }
}

Anatomy

Component	data-part	Renders
`DepthChart`	root	figure with a screen-reader table of every level
	overlay	Focusable plot; arrow keys move between price levels
	area	Cumulative bid or ask steps, data-side bid or ask
	mid	Dashed line at the mid price, with its label
	tooltip	Price, cumulative depth and size at the level
	annotation	Reference line, band or point

Keyboard

Key	Does
`ArrowRight / ArrowLeft`	Next or previous price level
`Home / End`	Lowest or highest price
`Escape`	Clear

Props

Prop	Type	Notes
`bids`	Vec<Level>	Required. Level::new(price, size), any order
`asks`	Vec<Level>	Required. Level::new(price, size), any order
`label`	String	Required. What the chart shows; the accessible name
`annotations`	Vec<Annotation>	X in prices, y in cumulative size
`height`	u16	Plot height in px. Default 240
`format`	Fn(f64) -> String	Formats prices; sizes are shortened, such as 12.5k

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