PhiaUi.Components.SankeyChart (phia_ui v0.1.17)

Copy Markdown View Source

Sankey flow diagram — pure SVG, zero JS.

Shows flows between nodes as variable-width links. Node rectangles are positioned in columns, links are cubic Bezier paths.

Examples

<.sankey_chart data={%{
  nodes: [%{id: "a", label: "Source"}, %{id: "b", label: "Target"}],
  links: [%{source: "a", target: "b", value: 100}]
}} />

Summary

Functions

sankey_chart(assigns)

Functions

sankey_chart(assigns)

Attributes

  • data (:map) - Flow data: %{nodes: [%{id, label}], links: [%{source, target, value}]}. Defaults to %{links: [], nodes: []}.
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • node_width (:integer) - Width of node rectangles in pixels. Defaults to 16.
  • node_padding (:integer) - Vertical padding between nodes in same column. Defaults to 8.
  • link_opacity (:float) - Fill opacity for link paths. Defaults to 0.4.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 800.
  • theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
  • id (:string) - Unique ID for the chart (auto-generated if not provided). Defaults to nil.
  • title (:string) - Chart title rendered above the visualization. Defaults to nil.
  • description (:string) - Chart description for context (rendered below title). Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.