Added Sankey Diagram

Author: andreaferretti

src/main/scala/demo/components/sankey.scala

@@ -0,0 +1,53 @@
+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.Sankey
+
+
+object sankey {
+  case class Sector(id: String)
+  case class SLink(start: String, end: String, weight: Double)
+  case class Flow(sectors: Seq[Seq[Sector]], links: Seq[SLink])
+
+  private def right(p: js.Array[Double]) = s"translate(${ p(0) + 7 }, ${ p(1) })"
+  private def left(p: js.Array[Double]) = s"translate(${ p(0) - 7 }, ${ p(1) })"
+  private val palette = List("#707B82", "#7881C2", "#3E90F0")
+
+  val SankeyDiagram = ReactComponentB[Flow]("Sankey Diagram")
+    .render(flow => {
+      val sankey = Sankey[Sector, SLink](
+        nodes = flow.sectors,
+        links = flow.links,
+        nodeaccessor = _.id,
+        linkaccessor = identity,
+        width = 420,
+        height = 360,
+        gutter = 15,
+        rectWidth = 10
+      )
+
+      val rects = sankey.rectangles map { r =>
+        val firstHalf = r.group <= flow.sectors.length / 2
+
+        g(
+          path(d := r.curve.path.print, fill := palette(r.group), stroke := "none", opacity := 0.7),
+          if (firstHalf) text(transform := right(r.curve.centroid), textAnchor := "start", r.item.id)
+          else text(transform := left(r.curve.centroid), textAnchor := "end", r.item.id)
+        )
+      }
+      val flows = sankey.curvedRectangles map { r =>
+        path(d := r.curve.path.print, fill := "#acd1e9", stroke := "none", opacity := 0.7)
+      }
+
+      svg(width := 460, height := 400,
+        g(transform := "translate(30,30)",
+          flows,
+          rects
+        )
+      )
+    })
+    .build
+}

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

@@ -11,6 +11,7 @@ import radar._
 import tree._
 import bar._
 import graph._
+import sankey._
 
 
 object toplevel {
@@ -63,6 +64,36 @@ object toplevel {
 
     Family(characters = characters.toList, links = links.toList)
   }
+  val flow = Flow(
+    sectors = List(
+      List(
+        Sector("Energy"),
+        Sector("Agriculture"),
+        Sector("Minerals")
+      ),
+      List(
+        Sector("Transportation"),
+        Sector("Harvest"),
+        Sector("Fuel")
+      ),
+      List(
+        Sector("Road"),
+        Sector("Chemicals")
+      )
+    ),
+    links = List(
+      SLink(start = "Energy", end = "Harvest", weight = 10),
+      SLink(start = "Energy", end = "Fuel", weight = 30),
+      SLink(start = "Agriculture", end = "Road", weight = 10),
+      SLink(start = "Agriculture", end = "Transportation", weight = 10),
+      SLink(start = "Agriculture", end = "Harvest", weight = 10),
+      SLink(start = "Minerals", end = "Fuel", weight = 30),
+      SLink(start = "Transportation", end = "Chemicals", weight =  20),
+      SLink(start = "Harvest", end = "Chemicals", weight =  10),
+      SLink(start = "Fuel", end = "Road", weight =  30),
+      SLink(start = "Minerals", end = "Chemicals", weight =  25)
+    )
+  )
 
   val TopLevel = ReactComponentB[Unit]("Top level component")
     .render(_ =>
@@ -97,7 +128,12 @@ object toplevel {
             id = Some("graph"),
             title = "Graph Chart",
             text = "A preliminary example of force-directed graph."
-          ), GraphChart(randomGraph(30, 0.15)))
+          ), GraphChart(randomGraph(30, 0.15))),
+          Panel(PanelContent(
+            id = Some("sankey"),
+            title = "Sankey Diagram",
+            text = "Displays flow among entities."
+          ), SankeyDiagram(flow))
         )
       )
     )