Visualize.Components.Chart (Visualize v0.7.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")