Added line charts

Author: andreaferretti

src/main/scala/demo/colors.scala

@@ -1,19 +1,20 @@
 package demo
 
 object colors {
-  case class Color(r: Double, g: Double, b: Double)
+  case class Color(r: Double, g: Double, b: Double, alpha: Double = 1)
 
   def cut(x: Double) = x.floor min 255
 
   def multiply(factor: Double) = { c: Color =>
-    Color(cut(factor * c.r), cut(factor * c.g), cut(factor * c.b))
+    Color(cut(factor * c.r), cut(factor * c.g), cut(factor * c.b), c.alpha)
   }
 
   def average(c1: Color, c2: Color) =
     Color(
       cut((c1.r + c2.r) / 2),
       cut((c1.g + c2.g) / 2),
-      cut((c1.b + c2.b) / 2)
+      cut((c1.b + c2.b) / 2),
+      (c1.alpha + c2.alpha / 2)
     )
 
   val lighten = multiply(1.2)
@@ -34,5 +35,9 @@ object colors {
     )
   }
 
-  def string(c: Color) = s"rgb(${ c.r.floor },${ c.g.floor },${ c.b.floor })"
+  def transparent(c: Color, alpha: Double = 0.7) = c.copy(alpha = alpha)
+
+  def string(c: Color) =
+    if (c.alpha == 1) s"rgb(${ c.r.floor },${ c.g.floor },${ c.b.floor })"
+    else s"rgba(${ c.r.floor },${ c.g.floor },${ c.b.floor },${ c.alpha })"
 }

src/main/scala/demo/components/line.scala

@@ -0,0 +1,50 @@
+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.Stock
+
+import demo.colors._
+
+
+object line {
+  case class Event(date: String, value: Double)
+
+  private val palette = mix(Color(130, 140, 210), Color(180, 205, 150))
+  private val months = List("Jan", "Feb", "Mar", "Apr", "May",
+    "Jun", "Jul","Aug", "Sep", "Oct", "Nov", "Dec")
+
+  private def parseDate(event: Event) = {
+    val date = new js.Date
+    val Array(month, year) = event.date split ' '
+    date.setFullYear(year.toInt)
+    date.setMonth(months.indexOf(month))
+
+    date.getTime
+  }
+
+  val LineChart = ReactComponentB[Seq[Seq[Event]]]("Stock chart")
+    .render(events => {
+      val stock = Stock[Event](
+        data = events,
+        xaccessor = parseDate,
+        yaccessor = _.value,
+        width = 420,
+        height = 360,
+        closed = true
+      )
+      val lines = stock.curves map { curve =>
+        g(transform := "translate(50,0)",
+          path(d := curve.area.path.print, fill := string(transparent(palette(curve.index))), stroke := "none"),
+          path(d := curve.line.path.print, fill := "none", stroke := string(palette(curve.index)))
+        )
+      }
+
+      svg(width := 480, height := 400,
+        lines
+      )
+    })
+    .build
+}

src/main/scala/demo/components/smoothline.scala

@@ -0,0 +1,49 @@
+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.SmoothLine
+
+import demo.colors._
+import line.Event
+
+
+object smoothline {
+  private val palette = mix(Color(130, 140, 210), Color(180, 205, 150))
+  private val months = List("Jan", "Feb", "Mar", "Apr", "May",
+    "Jun", "Jul","Aug", "Sep", "Oct", "Nov", "Dec")
+
+  private def parseDate(event: Event) = {
+    val date = new js.Date
+    val Array(month, year) = event.date split ' '
+    date.setFullYear(year.toInt)
+    date.setMonth(months.indexOf(month))
+
+    date.getTime
+  }
+
+  val SmoothLineChart = ReactComponentB[Seq[Seq[Event]]]("Stock chart")
+    .render(events => {
+      val chart = SmoothLine[Event](
+        data = events,
+        xaccessor = parseDate,
+        yaccessor = _.value,
+        width = 420,
+        height = 360,
+        closed = true
+      )
+      val lines = chart.curves map { curve =>
+        g(transform := "translate(50,0)",
+          path(d := curve.area.path.print, fill := string(transparent(palette(curve.index))), stroke := "none"),
+          path(d := curve.line.path.print, fill := "none", stroke := string(palette(curve.index)))
+        )
+      }
+
+      svg(width := 480, height := 400,
+        lines
+      )
+    })
+    .build
+}