PhiaUi.Components.ArcDiagram (phia_ui v0.1.17)

Copy Markdown View Source

Arc diagram — pure SVG, zero JS.

Nodes arranged on a horizontal baseline with curved arcs connecting related nodes. Arc height is proportional to the distance between source and target nodes, and stroke width scales with link value.

Examples

<.arc_diagram
  nodes={["A", "B", "C", "D"]}
  links={[
    %{source: "A", target: "C", value: 3},
    %{source: "B", target: "D", value: 1}
  ]}
/>

<.arc_diagram
  nodes={["Alpha", "Beta", "Gamma"]}
  links={[%{source: "Alpha", target: "Gamma", value: 2}]}
  colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
  node_radius={8}
  show_labels={true}
/>

Summary

Functions

arc_diagram(assigns)

Functions

arc_diagram(assigns)

Attributes

  • nodes (:list) - List of node labels: ["A", "B", "C"]. Defaults to [].
  • links (:list) - Links: [%{source: "A", target: "B", value: 1}]. Defaults to [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • node_radius (:integer) - Radius of node circles in pixels. Defaults to 6.
  • link_opacity (:float) - Opacity for link arcs (0.0–1.0). Defaults to 0.4.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 800.
  • show_labels (:boolean) - Show node labels below the baseline. Defaults to true.
  • 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.