Clock chart

Activity by hour of the day as bars growing out from the centre of a 24-hour clock face, midnight at the top. The shape of a day reads at a glance, and the night wraps round to the morning instead of splitting across two ends of an axis. A second series sits beside the first in each hour.

Support chats by hour

Chats started per hour, averaged over October. Weekdays peak mid-morning; weekends spread out.

Support chats started by hour, weekdays and weekends
Hour	Weekdays	Weekends
00:00–01:00	3	6
01:00–02:00	2	4
02:00–03:00	1	2
03:00–04:00	1	1
04:00–05:00	2	1
05:00–06:00	4	1
06:00–07:00	9	2
07:00–08:00	21	5
08:00–09:00	38	9
09:00–10:00	46	15
10:00–11:00	44	20
11:00–12:00	40	24
12:00–13:00	35	26
13:00–14:00	39	25
14:00–15:00	42	23
15:00–16:00	37	22
16:00–17:00	31	21
17:00–18:00	24	20
18:00–19:00	17	19
19:00–20:00	13	18
20:00–21:00	11	17
21:00–22:00	9	14
22:00–23:00	6	11
23:00–00:00	4	8

Steps on Saturday

One series, hour by hour. Hover an hour or focus the clock and use the arrow keys.

Steps by hour on Saturday
Hour	Steps
00:00–01:00	0
01:00–02:00	0
02:00–03:00	0
03:00–04:00	0
04:00–05:00	0
05:00–06:00	0
06:00–07:00	0
07:00–08:00	120
08:00–09:00	840
09:00–10:00	2310
10:00–11:00	1460
11:00–12:00	980
12:00–13:00	1720
13:00–14:00	640
14:00–15:00	3850
15:00–16:00	4120
16:00–17:00	1210
17:00–18:00	690
18:00–19:00	1030
19:00–20:00	410
20:00–21:00	260
21:00–22:00	180
22:00–23:00	40
23:00–00:00	0

Usage

use hydroxy_leptos::chart_frame::ChartFrame;
use hydroxy_leptos::clock_chart::{ClockChart, Series};
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    // Support chats started in each hour, averaged over October.
    let weekdays = Series::new(
        "Weekdays",
        [
            3.0, 2.0, 1.0, 1.0, 2.0, 4.0, 9.0, 21.0, 38.0, 46.0, 44.0, 40.0, 35.0, 39.0, 42.0, 37.0, 31.0, 24.0, 17.0,
            13.0, 11.0, 9.0, 6.0, 4.0,
        ],
    );
    let weekends = Series::new(
        "Weekends",
        [
            6.0, 4.0, 2.0, 1.0, 1.0, 1.0, 2.0, 5.0, 9.0, 15.0, 20.0, 24.0, 26.0, 25.0, 23.0, 22.0, 21.0, 20.0, 19.0,
            18.0, 17.0, 14.0, 11.0, 8.0,
        ],
    );
    // Steps by hour on one Saturday.
    let steps = Series::new(
        "Steps",
        [
            0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 120.0, 840.0, 2_310.0, 1_460.0, 980.0, 1_720.0, 640.0, 3_850.0, 4_120.0,
            1_210.0, 690.0, 1_030.0, 410.0, 260.0, 180.0, 40.0, 0.0,
        ],
    );

    view! {
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-10);">
            <ChartFrame title="Support chats by hour" description="Chats started per hour, averaged over October. Weekdays peak mid-morning; weekends spread out.">
                <ClockChart series=vec![weekdays, weekends] label="Support chats started by hour, weekdays and weekends" />
            </ChartFrame>
            <ChartFrame title="Steps on Saturday" description="One series, hour by hour. Hover an hour or focus the clock and use the arrow keys.">
                <ClockChart series=vec![steps] label="Steps by hour on Saturday" size=260 format=|v: f64| format!("{v:.0}") />
            </ChartFrame>
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::chart_frame::ChartFrame;
use hydroxy_dioxus::clock_chart::{ClockChart, Series};

#[component]
pub fn ClockChartDemo() -> Element {
    // Support chats started in each hour, averaged over October.
    let weekdays = Series::new(
        "Weekdays",
        [
            3.0, 2.0, 1.0, 1.0, 2.0, 4.0, 9.0, 21.0, 38.0, 46.0, 44.0, 40.0, 35.0, 39.0, 42.0, 37.0, 31.0, 24.0, 17.0,
            13.0, 11.0, 9.0, 6.0, 4.0,
        ],
    );
    let weekends = Series::new(
        "Weekends",
        [
            6.0, 4.0, 2.0, 1.0, 1.0, 1.0, 2.0, 5.0, 9.0, 15.0, 20.0, 24.0, 26.0, 25.0, 23.0, 22.0, 21.0, 20.0, 19.0,
            18.0, 17.0, 14.0, 11.0, 8.0,
        ],
    );
    // Steps by hour on one Saturday.
    let steps = Series::new(
        "Steps",
        [
            0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 120.0, 840.0, 2_310.0, 1_460.0, 980.0, 1_720.0, 640.0, 3_850.0, 4_120.0,
            1_210.0, 690.0, 1_030.0, 410.0, 260.0, 180.0, 40.0, 0.0,
        ],
    );

    rsx! {
        div { style: "display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-10);",
            ChartFrame {
                title: "Support chats by hour",
                description: "Chats started per hour, averaged over October. Weekdays peak mid-morning; weekends spread out.",
                ClockChart { series: vec![weekdays, weekends], label: "Support chats started by hour, weekdays and weekends" }
            }
            ChartFrame { title: "Steps on Saturday", description: "One series, hour by hour. Hover an hour or focus the clock and use the arrow keys.",
                ClockChart { series: vec![steps], label: "Steps by hour on Saturday", size: 260, format: move |v: f64| format!("{v:.0}") }
            }
        }
    }
}

Anatomy

Component	data-part	Renders
`ClockChart`	root	figure with a screen-reader table of every hour
	face	The clock face
	hour-tick	A tick per hour on the rim, longer every six hours
	hour	Hour labels every three hours
	ring	Value rings at nice steps, labelled up the middle
	bar	One per hour and series, growing out from the hub
	tooltip	The hour and each series' value
	legend	Series names and colours, shown for two series

Keyboard

Key	Does
`ArrowLeft / ArrowRight`	Previous or next hour (Up and Down too)
`Home / End`	Midnight or the last hour
`Escape`	Hide the tooltip

Props

Prop	Type	Notes
`series`	Vec<Series>	Required. One or two series of 24 values from midnight
`label`	String	Required. What the chart shows; the accessible name
`size`	u16	Face diameter in px. Default 300
`format`	Fn(f64) -> String	Formats the rings, 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