Added tree example

Author: andreaferretti

src/main/resources/main.css

@@ -108,3 +108,14 @@
 #radar .label {
   float: right;
 }
+
+/*Tree*/
+
+#tree circle {
+  stroke: #003366;
+  fill: #dddddd;
+}
+#tree path {
+  stroke: #336699;
+  fill: none;
+}

src/main/scala/demo/components/toplevel.scala

@@ -7,6 +7,7 @@ import panel._
 import logo._
 import piechart._
 import radar._
+import tree._
 
 
 object toplevel {
@@ -27,6 +28,20 @@ object toplevel {
     Pokemon("Blastoise", 79, 83, 100, 85, 105, 78),
     Pokemon("Butterfree", 60, 45, 50, 90, 80, 70)
   )
+  val tree = Duck("Grandma", List(
+    Duck("Eider", List(
+      Duck("Fethry"), Duck("Abner")
+    )),
+    Duck("Daphne", List(
+      Duck("Gladstone")
+    )),
+    Duck("Quackmore", List(
+      Duck("Donald"),
+      Duck("Della", List(
+        Duck("Huey"), Duck("Dewey"), Duck("Louie")
+      ))
+    ))
+  ))
 
   val TopLevel = ReactComponentB[Unit]("Top level component")
     .render(_ =>
@@ -43,6 +58,13 @@ object toplevel {
             title = "Radar Chart",
             text = "Here is a radar chart showing Pokémon stats. Try changing Pokémon."
           ), RadarChart(pokemons))
+        ),
+        div(className := "row",
+          Panel(PanelContent(
+            id = Some("tree"),
+            title = "Tree Chart",
+            text = "Here is part of the duck family tree."
+          ), TreeChart(tree))
         )
       )
     )

src/main/scala/demo/components/tree.scala

@@ -0,0 +1,48 @@
+package demo.components
+
+import scala.scalajs.js
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.all.key
+import japgolly.scalajs.react.vdom.svg.all._
+import paths.high.Tree
+
+import demo.colors._
+
+
+object tree {
+  case class Duck(name: String, descendants: List[Duck] = List())
+  private def move(p: js.Array[Double]) = s"translate(${ p(0) },${ p(1) })"
+  private def isLeaf(duck: Duck) = duck.descendants.length == 0
+
+  val TreeChart = ReactComponentB[Duck]("Pie chart")
+    .render(ducks => {
+      val tree = Tree[Duck](
+        data = ducks,
+        children = _.descendants,
+        width = 300,
+        height = 300
+      )
+
+      val branches = tree.curves map { curve =>
+        path(d := curve.connector.path.print)
+      }
+      val nodes = tree.nodes map { node =>
+        g(transform := move(node.point),
+          circle(r := 5, cx := 0, cy := 0),
+          text(
+            transform := (if (isLeaf(node.item)) "translate(10,0)" else "translate(-10,0)"),
+            textAnchor := (if (isLeaf(node.item)) "start" else "end"),
+            node.item.name
+          )
+        )
+      }
+
+      svg(width := 460, height := 400,
+        g(transform := "translate(80,50)",
+          branches,
+          nodes
+        )
+      )
+    })
+    .build
+}