Visualize.Components.Chart (Visualize v0.8.0)

Copy Markdown View Source

A chart whose marks declare events, in LiveView (spec/10 §19, D-170).

A Phoenix.LiveComponent over a %Visualize.Chart.Applied{}. It draws the chart — as SVG by default, or on a canvas — inside TooltipHook, the datum under the pointer outlined as the palette's :hover (Visualize.Hooks.Tooltip.attrs/1), holds the drawing and a token for it, and resolves a click on a mark's datum to the row that was drawn. The page receives the click as one Visualize.Event, the same on every backend (D-197):

<.live_component module={Visualize.Components.Chart} id="sales" chart={@applied} />

def handle_info({:visualize_event, "sales", %Visualize.Event{event: "point_click", row: row}}, socket) do
  {:noreply, assign(socket, picked: row)}
end

A click is dropped, never forwarded with partial data, when it was made on a drawing the component no longer holds, names an event its mark does not declare, or names a row the drawing does not have. A chart whose marks declare no event needs no component.

Assigns

  • id - the component's id, its hook element's DOM id, and the id of the events it sends (required)
  • chart - the %Visualize.Chart.Applied{} drawn (required)
  • backend - :svg (default) or :canvas: on a canvas the drawing carries its hit index, Visualize.Hooks.Tooltip.items/1, so a click resolves as on the SVG
  • canvas_format - :binary (default) for CanvasBinaryChart, or :json for CanvasChart; the binary stream draws no text, so its text is laid over the canvas as an SVG layer
  • render - options for Visualize.Chart.render/2 — title:, description:, responsive: … — the SVG always a root (default [])
  • tooltip_class - the hook's data-tooltip-class (default "vis-tooltip")

What a move sends

The drawing travels as keyed segments (Visualize.Render.Segments, spec/10 §19.3, D-203): one per item — a mark's element, a label — and one for each start and end of a group, each keyed by the item's identity (D-167) or its place in the drawing, sent as a LiveView comprehension. An update that changes three cells of a grid sends those three segments and none of the others, on SVG and on either canvas, where the canvas's hook puts the stream together from its segments. The keyboard's points travel one element each the same way (Visualize.Hooks.Keyboard.listed/2, D-204), and every other part — the hit index, the canvas's text layer, the summary — is its own assign, sent only when it changed (D-205). A segment whose element did not change is not written again.