ArcDiagram

Visualize an acyclic digraph as an arc diagram.

view : Layout -> Paint -> AcyclicDigraph -> Html Node

Create an arc diagram with the specified layout and paint options. The view produces Node messages when a node or its label are clicked by the user.

type Msg
  = ToggleNode Node
  | ...




view : AcyclicDigraph -> Html Msg
view graph =
  graph
    |> ArcDiagram.view
        ArcDiagram.defaultLayout
        ArcDiagram.defaultPaint
    |> Html.map ToggleNode

Layout

Represents values, in pixels, used to layout the diagram.

type alias Layout =

{ nodePadding : Int

, edgeSpacing : Int

, edgeRadius : Int

, labelWidth : Int

, labelMinHeight : Int

}

nodePadding: Nodes are drawn as rectangles tall enough to fit their incoming connections and wide enough to fit their outgoing connections. This determines how much padding to give nodes in addition to the minimum dimensions required to fit their edge connections.
edgeSpacing: Edges are drawn as 1px lines, and they do not overlap when connecting to a node. This determines the spacing between each edge connection.
edgeRadius: Edges are drawn as L-shaped connections with rounded corners. This determines the corner radius. It can be set to a high number to give the look of a more traditional arc diagram.
labelWidth: The width for each label.
labelMinHeight: The minimum height for each label. This ensures space for labels when their node heights are otherwise too small.

defaultLayout : Layout

{ nodePadding = 4
, edgeSpacing = 2
, edgeRadius = 4
, labelWidth = 100
, labelMinHeight = 20
}

Paint

Represents functions used to draw labels and set the color for each node and edge.

type alias Paint =

{ viewLabel : Node -> Svg Node

, colorNode : Node -> String

, colorEdge : Edge -> String

}

Color is represented as a string, and should be a CSS color value.

defaultPaint : Paint

The defaultPaint will color nodes black, edges gray, and draw labels displaying the integer represention of each node.

basicPaint : (Node -> String) -> Paint

Get a Paint value that uses the default colors and your own label text, by providing a toLabel function that determines the label text for each node.

view : (Node -> String) -> AcyclicDigraph -> Html Node
view toLabel =
    ArcDiagram.view
        ArcDiagram.defaultLayout
        (ArcDiagram.basicPaint toLabel)

brainrake/elm-arc-diagram/1.0.0

ArcDiagram

Layout

Paint

Modules