Word cloud

Weighted words, largest first, placed along a spiral from the centre without overlapping. Placement is deterministic, so the same words always land in the same places.

Feedback themes

Mentions in support tickets this month.

Themes in feedback
Word	Mentions
export	64
search	58
slow dashboards	47
SSO	41
pricing	36
dark mode	31
mobile app	29
API limits	26
onboarding	22
notifications	19
permissions	17
integrations	15
billing	13
audit log	11
templates	10
offline	8
keyboard shortcuts	7
comments	6
time zones	5
CSV import	4

Usage

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

pub fn demo() -> AnyView {
    let themes = [
        ("export", 64.0),
        ("search", 58.0),
        ("slow dashboards", 47.0),
        ("SSO", 41.0),
        ("pricing", 36.0),
        ("dark mode", 31.0),
        ("mobile app", 29.0),
        ("API limits", 26.0),
        ("onboarding", 22.0),
        ("notifications", 19.0),
        ("permissions", 17.0),
        ("integrations", 15.0),
        ("billing", 13.0),
        ("audit log", 11.0),
        ("templates", 10.0),
        ("offline", 8.0),
        ("keyboard shortcuts", 7.0),
        ("comments", 6.0),
        ("time zones", 5.0),
        ("CSV import", 4.0),
    ];
    let words: Vec<Word> = themes.iter().map(|(t, n)| Word::new(*t, *n)).collect();

    view! {
        <ChartFrame title="Feedback themes" description="Mentions in support tickets this month.">
            <WordCloudChart words=words label="Themes in feedback" weight_label="Mentions" />
        </ChartFrame>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::chart_frame::ChartFrame;
use hydroxy_dioxus::word_cloud_chart::{Word, WordCloudChart};

#[component]
pub fn WordCloudChartDemo() -> Element {
    let themes = [
        ("export", 64.0),
        ("search", 58.0),
        ("slow dashboards", 47.0),
        ("SSO", 41.0),
        ("pricing", 36.0),
        ("dark mode", 31.0),
        ("mobile app", 29.0),
        ("API limits", 26.0),
        ("onboarding", 22.0),
        ("notifications", 19.0),
        ("permissions", 17.0),
        ("integrations", 15.0),
        ("billing", 13.0),
        ("audit log", 11.0),
        ("templates", 10.0),
        ("offline", 8.0),
        ("keyboard shortcuts", 7.0),
        ("comments", 6.0),
        ("time zones", 5.0),
        ("CSV import", 4.0),
    ];
    let words: Vec<Word> = themes.iter().map(|(t, n)| Word::new(*t, *n)).collect();

    rsx! {
        ChartFrame { title: "Feedback themes", description: "Mentions in support tickets this month.",
            WordCloudChart { words, label: "Themes in feedback", weight_label: "Mentions" }
        }
    }
}

Anatomy

Component	data-part	Renders
`WordCloudChart`	root	figure with a screen-reader table of every word
	plot	Focusable cloud; arrow keys step from heaviest to lightest
	word	Sized by weight; the heaviest third in the first series colour
	tooltip	Word and weight

Keyboard

Key	Does
`ArrowRight / ArrowDown`	Next word, heaviest first
`ArrowLeft / ArrowUp`	Previous word
`Home / End`	Heaviest or lightest word
`Escape`	Clear the active word

Props

Prop	Type	Notes
`words`	Vec<Word>	Required. Word::new(text, weight)
`label`	String	Required. What the chart shows; the accessible name
`width / height`	u16	Layout box in px; scales down to fit. Default 520 × 300
`weight_label`	String	Name of the weight. Default "Weight"
`format`	Fn(f64) -> String	Formats weights in the tooltip and 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