Skip to the content
Vehicles in service
  1. 210
  2. 140
  3. 100
  4. 90
  5. 120
  6. 380
  7. 820
  8. 1 240
  9. 1 260
  10. 1 100
  11. 940
  12. 960
  13. 980
  14. 990
  15. 1 020
  16. 1 180
  17. 1 250
  18. 1 260
  19. 1 120
  20. 860
  21. 640
  22. 520
  23. 420
  24. 300

Props

NameTypeDefaultDescription
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".
unknownLabelstringThe locale'sOverrides "Unknown", heard in place of "—" for a point whose count no data gives
classNamestring—Joined after pn-DayProfileChart on the root
styleCSSProperties—Reaches the root
refRef<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-DayProfileChart on 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.

KeyDoesFrom
TabMoves 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
ArrowRightHighlights the next point, staying on the last; with none highlighted, as after Escape, highlights the last point, as focus doesPerron
ArrowLeftHighlights the point before, staying on the first; with none highlighted, as after Escape, highlights the last point, as focus doesPerron
HomeHighlights the first pointPerron
EndHighlights the last pointPerron
EscapeWhile 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+TabMoves focus back out, to whatever came before the chart; leaving clears the highlightThe 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).

ElementRoleAccessible name fromStates announced
rootfigure, from the native <figure>Its figcaption, the caller's labelNone
captionNone (the figure's caption)None: its text names the figure and the plotNone
plotgrouparia-labelledby the caption: "Vehicles in service"Its active descendant, the highlighted point, read as the keys move: "08:00 1 260"
graph, scale, tip, axishidden, aria-hidden="true"None: what they show, each point saysNone
pointslist, from the native <ol>NoneIts number of items, from the <ol>
pointlistitem, 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: label as a string, an element and an array; points empty, 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 as HH:MM (CR-2)
  • A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; nothing animates or collapses. The graph, scale, tip and axis are aria-hidden because 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" and aria-activedescendant on 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-min square: 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.

KeyEnglishOverrideSeen or heard where
unknownUnknownunknownLabelHeard 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.

RuleLevelDoDon'tChecked by
DD-1mustGive each point's time in Copenhagen's time as HH:MM, in time order, one per hour or per quarter-hourPass 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 clockreview
DD-2mustGive 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 knowsreview
DD-3mustGive the points so far today and let the line end at the latestPad the rest of the day with zeros or the timetable's figures: the line would drop to 0 or show plans as countsreview
DD-4mustName 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 readerreview
DD-5mustWrap the chart in DataStatePanel while its data loads, is empty or could not be loadedShow 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 itreview
DD-6mustLet the chart redraw in silence as each hour's count arrives, and announce a change of state in the screen's own polite live regionMake the chart or its tip a live region: every new count would be read outreview
DD-7shouldGive the chart its container's width, from a 320 px phone to the overview sheet, and let its height followSet a fixed height or width through className: the plot keeps its shape by its ratio, and a squeezed one distorts the curvereview