How one count moves across a day, such as the vehicles in service each hour from midnight to midnight: one line in the chart colour, the area under it, a 24-hour time axis, and a value tip that gives the time and the count under the pointer or the keys.
DayProfileChart plots one series of counts across one calendar day, 00:00 to 24:00, as a line with the area under it, with no marker for the time now, no second series and no day to compare with. The one series token, color.chart.series, is the vehicles in service curve, and the foundations give a chart no second series colour; a marker for now, a second series or a fixed scale to compare two days can each join later as an optional prop without a break, as KioskBar leaves a date for later.
When to use
Use DayProfileChart to show how one count moves across one day, from midnight to midnight, such as the vehicles in service each hour.
- 210
- 140
- 100
- 90
- 120
- 380
- 820
- 1 240
- 1 260
- 1 100
- 940
- 960
- 980
- 990
- 1 020
- 1 180
- 1 250
- 1 260
- 1 120
- 860
- 640
- 520
- 420
- 300
Props
| Name | Type | Default | Description |
|---|---|---|---|
points* | readonly DayProfileChartPoint[] | — | Required. The day's counts in time order, each one's time and count, such as one per hour from '00:00' to '23:00'. The line runs through them in the order given and ends at the last; empty, the plot shows its baseline alone and takes no focus. |
label* | ReactNode | — | Required. What the chart counts, in a few words, shown above the plot as the figure's caption and naming the plot for screen readers: "Vehicles in service". |
unknownLabel | string | The locale's | Overrides "Unknown", heard in place of "—" for a point whose count no data gives |
className | string | — | Joined after pn-DayProfileChart on the root |
style | CSSProperties | — | Reaches the root |
ref | Ref<HTMLElement> | — | Reaches the root element, the figure |
slotProps | { caption?: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined; plot?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined; graph?: SVGProps<SVGSVGElement> | undefined; scale?: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined; points?: DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> | undefined; point?: DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | undefined; tip?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined; axis?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined; } | — | Props for each part: caption, plot, graph, scale, points, point, tip, axis. |
points (required)readonly DayProfileChartPoint[], default —- Required. The day's counts in time order, each one's time and count, such as one per hour from
'00:00'to'23:00'. The line runs through them in the order given and ends at the last; empty, the plot shows its baseline alone and takes no focus. label (required)ReactNode, default —- Required. What the chart counts, in a few words, shown above the plot as the figure's caption and naming the plot for screen readers: "Vehicles in service".
unknownLabelstring, default The locale's- Overrides "Unknown", heard in place of "—" for a point whose count no data gives
classNamestring, default —- Joined after
pn-DayProfileCharton the root styleCSSProperties, default —- Reaches the root
refRef<HTMLElement>, default —- Reaches the root element, the
figure slotProps{ caption?: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> | undefined; plot?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined; graph?: SVGProps<SVGSVGElement> | undefined; scale?: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined; points?: DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> | undefined; point?: DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | undefined; tip?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined; axis?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined; }, default —- Props for each part:
caption,plot,graph,scale,points,point,tip,axis.
Use it
import { DayProfileChart } from '@mylder/perron/patterns'Ask your agent
search_docs({ query: "DayProfileChart" })Keyboard and ARIA
No Base UI part, so nothing from Base UI here. The plot is one focus stop, and the keys move its highlight while focus stays on it.
| Key | Does | From |
|---|---|---|
Tab | Moves focus to the plot, when points holds a point; the last point is highlighted and the tip shows it, unless a point is already highlighted (CR-6) | The browser, then Perron |
ArrowRight | Highlights the next point, staying on the last; with none highlighted, as after Escape, highlights the last point, as focus does | Perron |
ArrowLeft | Highlights the point before, staying on the first; with none highlighted, as after Escape, highlights the last point, as focus does | Perron |
Home | Highlights the first point | Perron |
End | Highlights the last point | Perron |
Escape | While a point is highlighted and the plot has focus: clears the highlight and the tip, focus staying on the plot, and stops there; with none highlighted, it does nothing and goes on to whatever holds the chart. While the pointer's highlight shows and focus is elsewhere: clears it wherever focus is, and goes on to what has focus (CR-7) | Perron |
Shift+Tab | Moves focus back out, to whatever came before the chart; leaving clears the highlight | The browser |
The pointer and touch reach the same tip: moving the pointer over the plot highlights the point nearest it in time, pressing or touching the plot does the same and focuses it, and a mouse or pen leaving clears the highlight unless the plot has focus, while a finger leaving keeps it, so a tap keeps the tip until the person taps elsewhere. Escape closes a tip the pointer showed wherever focus is, as a hover card closes with Esc (CR-7).
| Element | Role | Accessible name from | States announced |
|---|---|---|---|
root | figure, from the native <figure> | Its figcaption, the caller's label | None |
caption | None (the figure's caption) | None: its text names the figure and the plot | None |
plot | group | aria-labelledby the caption: "Vehicles in service" | Its active descendant, the highlighted point, read as the keys move: "08:00 1 260" |
graph, scale, tip, axis | hidden, aria-hidden="true" | None: what they show, each point says | None |
points | list, from the native <ol> | None | Its number of items, from the <ol> |
point | listitem, from the native <li> | Its text, read in order: the time, then the count, or "Unknown" | None |
A point reads "08:00 1 260", and one with no count "05:00 Unknown". A screen reader in browse mode reads the whole list in order; one that tabs to the plot hears "Vehicles in service, group", then each point as the arrow keys reach it.
What axe won't catch, from the contract, each with how this component meets it:
- Everything the eye is told, the ear is told, for every shape each prop accepts: every point's time and count, which the line, the tip and the guide show, is heard from its list item, an unknown count as "Unknown", while the tip's "—" is
aria-hidden; the caption, which says what the line counts, names the figure and the plot; the axis ticks and the scale's top count, eye-only context for the line's shape, are hidden, since each point says its own time and count - Every landmark and named region has an accessible name: the figure and the plot's group are named by the caption; the chart adds no landmark
- Every default label can be overridden:
unknownLabel - Every shape the type accepts renders, in every variant:
labelas a string, an element and an array;pointsempty, one point, a whole day of 24, 96 points a quarter-hour apart, a part of a day, every count unknown, a lone known count between unknown ones, a count of 0, and a time that doesn't read asHH:MM(CR-2) - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; nothing animates or collapses. The graph, scale, tip and axis arearia-hiddenbecause the points say what they show, not because they are copies - Native semantics first:
<figure>and<figcaption>,<ol>and<li>for the points,<time>for each point's time;role="group"andaria-activedescendanton the plot only, where no element says a focus stop that moves through its items - Focus moves in reading order and returns on close: the plot is one stop between the caption and whatever follows; Escape clears the tip and leaves focus on the plot, and closes a tip the pointer showed wherever focus is; nothing opens elsewhere
- Every target is at least
size.target-minsquare: the one target is the whole plot, at least 107 px tall at 320 px wide; the points are not targets of their own - Loops stop when the system asks for less motion: none here; nothing moves
Owned strings
One string, and it is in packages/perron/src/locale/en.ts already. Every other word is the caller's label; the times and counts are digits, which expectOwnedStrings passes.
| Key | English | Override | Seen or heard where |
|---|---|---|---|
unknown | Unknown | unknownLabel | Heard in place of the tip's "—" for a point whose count is unknown, in its list item's hidden words (CR-5) |
Do and don't
For a caller using the pattern, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.
| Rule | Level | Do | Don't | Checked by |
|---|---|---|---|---|
| DD-1 | must | Give each point's time in Copenhagen's time as HH:MM, in time order, one per hour or per quarter-hour | Pass the device's local time, a 12-hour time or points out of order: the line runs through them as given, and the brand keeps the city's 24-hour clock | review |
| DD-2 | must | Give count null for an hour no data covers, so the line breaks and the point says "Unknown" | Pass 0 or a guess for an hour the data doesn't know: a dip to 0 claims no vehicles ran, and the brand never claims more than the data knows | review |
| DD-3 | must | Give the points so far today and let the line end at the latest | Pad the rest of the day with zeros or the timetable's figures: the line would drop to 0 or show plans as counts | review |
| DD-4 | must | Name what the line counts in label, in a few words: "Vehicles in service" | Leave the chart to a heading above it alone: the caption is what names the figure and the plot to a screen reader | review |
| DD-5 | must | Wrap the chart in DataStatePanel while its data loads, is empty or could not be loaded | Show an empty chart, or one of all-unknown points, while the data is on its way: the baseline alone reads as a day with nothing in it | review |
| DD-6 | must | Let the chart redraw in silence as each hour's count arrives, and announce a change of state in the screen's own polite live region | Make the chart or its tip a live region: every new count would be read out | review |
| DD-7 | should | Give the chart its container's width, from a 320 px phone to the overview sheet, and let its height follow | Set a fixed height or width through className: the plot keeps its shape by its ratio, and a squeezed one distorts the curve | review |