Treemap chart

A tree as nested rectangles sized by value. Hover, touch or step to a cell to read its value and share; click a team, or press Enter, to zoom in, and use Backspace or the breadcrumb to climb back out.

Annual spend by team
Item	Value	Share
Spend > Engineering > Platform	420	16.4%
Spend > Engineering > Product	380	14.8%
Spend > Engineering > Data	210	8.2%
Spend > Engineering > Security	90	3.5%
Spend > Sales > Enterprise	300	11.7%
Spend > Sales > SMB	180	7.0%
Spend > Sales > Partners	90	3.5%
Spend > Marketing > Brand	150	5.9%
Spend > Marketing > Growth	210	8.2%
Spend > Marketing > Events	80	3.1%
Spend > Support > Tier 1	140	5.5%
Spend > Support > Tier 2	90	3.5%
Spend > Operations > People	110	4.3%
Spend > Operations > Finance	70	2.7%
Spend > Operations > Legal	40	1.6%

Usage

use hydroxy_leptos::treemap_chart::*;
use leptos::prelude::*;

fn team(name: &str, parts: &[(&str, f64)]) -> Tree {
    Tree::branch(name, parts.iter().map(|(n, v)| Tree::leaf(*n, *v)).collect())
}

#[component]
pub fn Demo() -> impl IntoView {
    let spend = Tree::branch(
        "Spend",
        vec![
            team("Engineering", &[("Platform", 420.0), ("Product", 380.0), ("Data", 210.0), ("Security", 90.0)]),
            team("Sales", &[("Enterprise", 300.0), ("SMB", 180.0), ("Partners", 90.0)]),
            team("Marketing", &[("Brand", 150.0), ("Growth", 210.0), ("Events", 80.0)]),
            team("Support", &[("Tier 1", 140.0), ("Tier 2", 90.0)]),
            team("Operations", &[("People", 110.0), ("Finance", 70.0), ("Legal", 40.0)]),
        ],
    );

    view! { <TreemapChart root=spend label="Annual spend by team" /> }
}

use dioxus::prelude::*;
use hydroxy_dioxus::treemap_chart::{Tree, TreemapChart};

fn team(name: &str, parts: &[(&str, f64)]) -> Tree {
    Tree::branch(name, parts.iter().map(|(n, v)| Tree::leaf(*n, *v)).collect())
}

#[component]
pub fn TreemapChartDemo() -> Element {
    let spend = Tree::branch(
        "Spend",
        vec![
            team("Engineering", &[("Platform", 420.0), ("Product", 380.0), ("Data", 210.0), ("Security", 90.0)]),
            team("Sales", &[("Enterprise", 300.0), ("SMB", 180.0), ("Partners", 90.0)]),
            team("Marketing", &[("Brand", 150.0), ("Growth", 210.0), ("Events", 80.0)]),
            team("Support", &[("Tier 1", 140.0), ("Tier 2", 90.0)]),
            team("Operations", &[("People", 110.0), ("Finance", 70.0), ("Legal", 40.0)]),
        ],
    );

    rsx! {
        TreemapChart { root: spend, label: "Annual spend by team" }
    }
}

Anatomy

Component	data-part	Renders
`TreemapChart`	root	figure labelled by `label`; `data-active` while a cell is picked
	breadcrumb	Path from the root to the current zoom; earlier steps are buttons
	plot	Focusable group holding the cells and tooltip; keeps focus while zooming
	cell	One node; `data-depth` 1 or 2, `data-leaf` when it can't zoom, `data-active` when picked
	tooltip	Name, value and share of the current level for the picked cell
	sr-live	Announces the picked cell and each zoom
	sr-table	Every leaf with its path, value and share of the whole, for screen readers and CSV export

Keyboard

Key	Does
`ArrowRight / ArrowLeft`	Step to the next or previous cell, parents before their children
`Home / End`	Jump to the first or last cell
`Enter / Space`	Zoom into the picked cell if it has parts
`Backspace`	Zoom out one level
`Escape`	Clear the picked cell; with none picked, zoom out one level

Props

Prop	Type	Notes
`root`	Tree	Required. Branch values come from their children
`label`	String	Required. What the chart shows; the accessible name
`height`	u16	Plot height in px at an 800px drawing width. Default 380
`format`	Fn(f64) -> String	Formats values in cells, the tooltip and the table

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
`view`	Signal<View>	Controlled focused node. Uncontrolled when left off
`on_view_change`	Callback<View>	Called when the focused node changes; not for changes that came from `view`