Added bar chart example

Author: andreaferretti

src/main/scala/demo/components/bar.scala

@@ -0,0 +1,43 @@
+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.Bar
+
+import demo.colors._
+
+
+object bar {
+  case class Stats(values: List[List[Double]], labels: List[String])
+  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 BarChart = ReactComponentB[Stats]("Bar chart")
+    .render(stats => {
+      val bar = Bar[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
+
+      val rectangles = bar.curves.zipWithIndex map { case (curve, i) =>
+        if (curve.index == middle) g(
+          path(d := curve.line.path.print, stroke := "none", fill := string(palette(curve.index))),
+          text(transform := below(curve.line.centroid), textAnchor := "middle", stats.labels(i / count))
+        )
+        else path(d := curve.line.path.print, stroke := "none", fill := string(palette(curve.index)))
+      }
+
+      svg(width := 460, height := 400,
+        g(transform := "translate(80,50)", rectangles)
+      )
+    })
+    .build
+}

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

@@ -8,6 +8,7 @@ import logo._
 import piechart._
 import radar._
 import tree._
+import bar._
 
 
 object toplevel {
@@ -42,6 +43,14 @@ object toplevel {
       ))
     ))
   ))
+  val stats = Stats(
+    values = List(
+      List(1, 2.0, 3, 4),
+      List(2, 3.0, 1, 4),
+      List(2, 2.5, 3, 3)
+    ),
+    labels = List("2009", "2010", "2011", "2012")
+  )
 
   val TopLevel = ReactComponentB[Unit]("Top level component")
     .render(_ =>
@@ -64,7 +73,12 @@ object toplevel {
             id = Some("tree"),
             title = "Tree Chart",
             text = "Here is part of the duck family tree."
-          ), TreeChart(tree))
+          ), TreeChart(tree)),
+          Panel(PanelContent(
+            id = Some("bar"),
+            title = "Bar Chart",
+            text = "Here is a bar chart example."
+          ), BarChart(stats))
         )
       )
     )

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

@@ -14,7 +14,7 @@ object tree {
   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")
+  val TreeChart = ReactComponentB[Duck]("Tree chart")
     .render(ducks => {
       val tree = Tree[Duck](
         data = ducks,