Visualize.Components.Chart (Visualize v0.6.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 renders the chart's SVG inside TooltipHook, 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:

<.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)
  • 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")