brainrake / elm-arc-diagram / ArcDiagram

Visualize an acyclic digraph as an arc diagram.

view : Layout -> Paint -> AcyclicDigraph -> Html AcyclicDigraph.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 : Basics.Int
, edgeSpacing : Basics.Int
, edgeRadius : Basics.Int
, labelWidth : Basics.Int
, labelMinHeight : Basics.Int 
}

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 : AcyclicDigraph.Node -> Svg AcyclicDigraph.Node
, colorNode : AcyclicDigraph.Node -> String
, colorEdge : AcyclicDigraph.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 : (AcyclicDigraph.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)