Phoenix LiveView hook that reaches a chart's points from the keyboard (spec/10 §17, spec/14 §21.5, D-142).

KeyboardHook makes the chart one tab stop. Inside it the arrow keys move between the points of a series and between series, Home and End jump to a series' ends, and a polite live region reads the point: y, 3 of 51: x 2, y 54.3. Like CrosshairHook it never reads the chart's DOM: attrs/1 writes every point once on the server — its readout and its position in the chart's pixels — so the same attributes serve a chart drawn as SVG and one on a canvas. The live region and the focus marker are appended to document.body, so a LiveView patch of the chart neither removes nor sees them.

A board adds the order across its cells one level up: each cell one stop, or, when the board moves between cells with arrows, Escape inside a chart hands focus back to the nearest element carrying data-vis-cell.

Usage

<div id="chart-keys" phx-hook="KeyboardHook" {Visualize.Hooks.Keyboard.attrs(applied)}>
  {Phoenix.HTML.raw(@svg)}
</div>

Configuration

Data attributes on the container, from attrs/1 (spec/10 §17.2):

• data-keyboard-name - the chart's name
• data-keyboard-points - per series, {"name", "points": [[x, y, readout], …]}
• data-size - width,height of the chart

Set by the host:

• data-keyboard-event - the event pushed with {series, index} when the focused point changes; unset, nothing is pushed
• data-keyboard-pick-event - the event pushed with {series, index} when a point is picked: Enter at the reached point, or a click, which picks the point nearest to it (spec/10 §17.3, spec/15 §13); unset, nothing is picked
• data-keyboard-target - the phx-target both events go to with pushEventTo; unset, they go to the LiveView