Added Voronoi and Stack charts

Author: andreaferretti

build.sbt

@@ -18,7 +18,7 @@ scalacOptions ++= Seq(
 libraryDependencies ++= Seq(
     "org.scala-js" %%% "scalajs-dom" % "0.8.0",
     "com.github.japgolly.scalajs-react" %%% "core" % "0.8.1",
-    "eu.unicredit" %%% "paths-scala-js" % "0.4.0"
+    "eu.unicredit" %%% "paths-scala-js" % "0.4.4"
 )
 
 jsDependencies ++= Seq(

src/main/scala/demo/colors.scala

@@ -22,7 +22,7 @@ object colors {
 
   def mix(c1: Color, c2: Color) = {
     val c3 = average(c1, c2)
-    List(
+    val colors = List(
       lighten(c1),
       c1,
       darken(c1),
@@ -33,6 +33,8 @@ object colors {
       c2,
       darken(c2)
     )
+
+    Stream.continually(colors).flatten
   }
 
   def transparent(c: Color, alpha: Double = 0.7) = c.copy(alpha = alpha)

src/main/scala/demo/components/stack.scala

@@ -0,0 +1,45 @@
+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.Stack
+
+import demo.colors._
+import bar.Stats
+
+
+object stack {
+  private val palette = mix(Color(130, 140, 210), Color(180, 205, 150))
+  private def below(p: js.Array[Double]) = s"translate(${ p(0) }, 320)"
+
+  val StackChart = ReactComponentB[Stats]("Stack chart")
+    .render(stats => {
+      val stack = Stack[Double](
+        data = stats.values,
+        accessor = identity,
+        width = 380,
+        height = 300,
+        gutter = 10
+      )
+      val groups = stats.values.length
+      val middle = groups / 2
+      val count = stats.values.head.length
+
+      js.Dynamic.global.console.log(stack)
+
+      val rectangles = stack.curves.zipWithIndex map { case (curve, i) =>
+        if (curve.group == 0) g(
+          path(d := curve.line.path.print, stroke := "none", fill := string(palette(curve.group))),
+          text(transform := below(curve.line.centroid), textAnchor := "middle", stats.labels(curve.index))
+        )
+        else path(d := curve.line.path.print, stroke := "none", fill := string(palette(curve.group)))
+      }
+
+      svg(width := 460, height := 400,
+        g(transform := "translate(80,50)", rectangles)
+      )
+    })
+    .build
+}

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

@@ -15,6 +15,8 @@ import sankey._
 import line._
 import smoothline._
 import waterfall._
+import voronoi._
+import stack._
 
 
 object toplevel {
@@ -97,6 +99,9 @@ object toplevel {
       SLink(start = "Minerals", end = "Chemicals", weight =  25)
     )
   )
+  val voronoiPoints = (1 to 30) map { _ =>
+    (js.Math.random(), js.Math.random())
+  }
   val tickers = List(
     List(
       Event("Jan 2000", 39.81),
@@ -506,7 +511,19 @@ object toplevel {
             id = Some("waterfall"),
             title = "Waterfall Chart",
             text = "A breakdown of incomes and costs."
-          ), WaterfallChart(balance))
+          ), WaterfallChart(balance)),
+          Panel(PanelContent(
+            id = Some("voronoi"),
+            title = "Voronoi Diagram",
+            text = "A convex tiling of the plane."
+          ), VoronoiChart(voronoiPoints))
+        ),
+        div(className := "row",
+          Panel(PanelContent(
+            id = Some("stack"),
+            title = "Stack Chart",
+            text = "Here is a stacked bar chart example."
+          ), StackChart(stats))
         )
       )
     )

src/main/scala/demo/components/voronoi.scala

@@ -0,0 +1,45 @@
+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.Voronoi
+
+import demo.colors._
+
+
+object voronoi {
+  private val palette = List("LightCoral", "NavajoWhite", "LemonChiffon",
+    "PaleGreen", "CornflowerBlue", "Thistle", "Lavender", "#FFB347", "#A05FAB",
+    "#E7D6B6", "#DE9AA4", "#AFCFAA", "#B3AF9C", "#C1C5C0","#1b85b8",
+    "#ae5a41", "#c3cb71", "#FFD1DC", "#AEC6CF", "#E7D943", "#A3E743",
+    "#FDFD96", "#836953", "#779ECB", "#D5B13B", "#66A0A5", "#E4DE12",
+    "#B94BE4",  "#F2DE9C", "#3BBDD1", "#A3E8F3", "#ffff00")
+
+  val VoronoiChart = ReactComponentB[Seq[(Double, Double)]]("Voronoi chart")
+    .render(points => {
+      val diagram = Voronoi[(Double, Double)](
+        data = points,
+        accessor = identity,
+        width = 460,
+        height = 400,
+        xrange = (0, 1),
+        yrange = (0, 1)
+      )
+
+      val areas = diagram.curves map { curve =>
+        path(d := curve.line.path.print, stroke := "grey", fill := palette(curve.index))
+      }
+      val circles = diagram.nodes map { node =>
+        val p = node.point
+        circle(cx := p(0), cy := p(1), r := 3, stroke := "none", fill := "red")
+      }
+
+      svg(width := 460, height := 400,
+        areas,
+        circles
+      )
+    })
+    .build
+}