Feature additions to TimeSeriesView

Gemfile

@@ -4,3 +4,4 @@ gem 'guard-sprockets', :git => 'https://github.com/jondot/guard-sprockets.git'
 gem 'coffee-script'
 gem 'uglifier'
 gem 'sass'
+gem 'listen', '= 1.2.2'

Gemfile.lock

@@ -1,35 +1,56 @@
 GIT
-  remote: git://github.com/jondot/guard-sprockets.git
+  remote: https://github.com/jondot/guard-sprockets.git
   revision: 4c6ebac094d5f06452bcc74fe75e7c1e2c4f99f2
   specs:
     guard-sprockets (0.2.0)
       guard (>= 0.2.2)
       sprockets (~> 2)
 
 GEM
-  remote: http://rubygems.org/
+  remote: https://rubygems.org/
   specs:
+    coderay (1.0.9)
     coffee-script (2.2.0)
       coffee-script-source
       execjs
     coffee-script-source (1.2.0)
     execjs (1.3.0)
       multi_json (~> 1.0)
-    ffi (1.0.11)
-    guard (1.0.0)
-      ffi (>= 0.5.0)
-      thor (~> 0.14.6)
-    hike (1.2.1)
+    ffi (1.9.0)
+    formatador (0.2.4)
+    guard (1.8.2)
+      formatador (>= 0.2.4)
+      listen (>= 1.0.0)
+      lumberjack (>= 1.0.2)
+      pry (>= 0.9.10)
+      thor (>= 0.14.6)
+    hike (1.2.3)
+    listen (1.2.2)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9)
+      rb-kqueue (>= 0.2)
+    lumberjack (1.0.4)
+    method_source (0.8.2)
     multi_json (1.0.4)
-    rack (1.4.1)
+    pry (0.9.12.2)
+      coderay (~> 1.0.5)
+      method_source (~> 0.8)
+      slop (~> 3.4)
+    rack (1.5.2)
+    rb-fsevent (0.9.3)
+    rb-inotify (0.9.2)
+      ffi (>= 0.5.0)
+    rb-kqueue (0.2.0)
+      ffi (>= 0.5.0)
     sass (3.1.15)
-    sprockets (2.3.1)
+    slop (3.4.6)
+    sprockets (2.10.0)
       hike (~> 1.2)
       multi_json (~> 1.0)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
-    thor (0.14.6)
-    tilt (1.3.3)
+    thor (0.18.1)
+    tilt (1.4.1)
     uglifier (1.2.3)
       execjs (>= 0.3.0)
       multi_json (>= 1.0.2)
@@ -40,5 +61,6 @@ PLATFORMS
 DEPENDENCIES
   coffee-script
   guard-sprockets!
+  listen (= 1.2.2)
   sass
   uglifier

app/css/high-contrast.scss

@@ -51,6 +51,13 @@ line.tick {
   stroke-width: 1px;
 }
 
+.line-highlight {
+  stroke-width: 5px;  
+}
+
+.area-highlight {
+}
+
 .axis {
   shape-rendering: crispEdges;
 }

app/js/graphene.coffee

@@ -336,21 +336,26 @@ class Graphene.TimeSeriesView extends Backbone.View
   tagName: 'div'
 
   initialize: ()->
+    @name = @options.name || "g-" + parseInt(Math.random() * 1000000)
     @line_height = @options.line_height || 16
     @animate_ms = @options.animate_ms || 500
+    @label_offset = @options.label_offset || 0
+    @label_columns = @options.label_columns || 1
+    @label_href = @options.label_href || (label) -> '#'
+    @label_formatter = @options.label_formatter || (label) -> label
     @num_labels = @options.num_labels || 3
     @sort_labels = @options.labels_sort
     @display_verticals = @options.display_verticals || false
     @width = @options.width || 400
     @height = @options.height || 100
-    @padding = @options.padding || [@line_height*2, 32, @line_height*(3+@num_labels), 32] #trbl
+    @padding = @options.padding || [@line_height*2, 32, @line_height*(3+(@num_labels / @label_columns)), 32] #trbl
     @title = @options.title
-    @label_formatter = @options.label_formatter || (label) -> label
     @firstrun = true
     @parent = @options.parent || '#parent'
     @null_value = 0
     @show_current = @options.show_current || false
     @observer = @options.observer
+    @postrender = @options.post_render || postRenderTimeSeriesView
 
     @vis = d3.select(@parent).append("svg")
             .attr("class", "tsview")
@@ -363,7 +368,7 @@ class Graphene.TimeSeriesView extends Backbone.View
     @value_format = d3.format(@value_format)
 
     @model.bind('change', @render)
-    console.log("TS view: #{@width}x#{@height} padding:#{@padding} animate: #{@animate_ms} labels: #{@num_labels}")
+    console.log("TS view: #{@name} #{@width}x#{@height} padding:#{@padding} animate: #{@animate_ms} labels: #{@num_labels}")
 
 
   render: ()=>
@@ -480,13 +485,19 @@ class Graphene.TimeSeriesView extends Backbone.View
     # only per entering item, attach a color box and text.
     litem_enters = leg_items.enter()
       .append('svg:g')
-      .attr('transform', (d, i) => "translate(0, #{i*@line_height})")
+      .attr('transform', (d, i) => "translate(#{(i % @label_columns) * @label_offset}, #{parseInt(i / @label_columns) * @line_height})")
       .attr('class', 'l')
     litem_enters.append('svg:rect')
       .attr('width', 5)
       .attr('height', 5)
       .attr('class', (d,i) -> 'ts-color '+"h-col-#{i+1}")
-    litem_enters_text = litem_enters.append('svg:text')
+
+    litem_enters_a = litem_enters.append('svg:a')
+      .attr('xlink:href', (d) => @label_href(d.label))
+      .attr('class', 'l')
+      .attr('id', (d, i) =>  @name + "-" + i)
+
+    litem_enters_text = litem_enters_a.append('svg:text')
       .attr('dx', 10)
       .attr('dy', 6)
       .attr('class', 'ts-text')
@@ -508,8 +519,6 @@ class Graphene.TimeSeriesView extends Backbone.View
           .attr('dx', 2)
           .text((d) => @value_format(d.last)+"last")
 
-
-
     #
     # update the graph
     #
@@ -519,18 +528,20 @@ class Graphene.TimeSeriesView extends Backbone.View
     vis.selectAll("path.area")
         .data(points)
         .attr("d", area)
+        .attr("id", (d, i) =>  "a-" + @name + "-" + i)
         .transition()
         .ease("linear")
         .duration(@animate_ms)
 
-
     vis.selectAll("path.line")
         .data(points)
         .attr("d", line)
+        .attr("id", (d, i) =>  "l-" + @name + "-" + i)
         .transition()
         .ease("linear")
         .duration(@animate_ms)
 
+    @postrender(@vis)
 
 # Barcharts
 class Graphene.BarChartView extends Backbone.View

app/js/graphene.events.js

@@ -0,0 +1,49 @@
+function toggleHighlight(classVal, toggleVal) {
+	function replaceAll(find, replace, str) {
+	  return str.replace(new RegExp(find, 'g'), replace);
+	}
+
+    if (classVal.indexOf(toggleVal) != -1) {
+        return replaceAll("highlight", "", classVal)
+    }
+    else {
+        return classVal + " " + toggleVal;
+    }
+}
+
+function postRenderTimeSeriesView(vis) {
+  console.log("attaching hover event...");
+  var svg = vis;
+  svg.selectAll('a.l').forEach( function(g) { 
+      g.forEach(function(a){ 
+          var aid = a.getAttribute('id')
+          console.log("adding mouse enter and exit events for "  + aid);
+          a.addEventListener('mouseenter', function() {
+              console.log("enter " + aid)
+              svg.selectAll('path#l-' + aid).forEach ( function (g) {
+                  g.forEach(function (path) {
+                      path.setAttribute('class', toggleHighlight(path.getAttribute('class'), "line-highlight"));                      
+                  })
+              })
+              svg.selectAll('path#a-' + aid).forEach ( function (g) {
+                  g.forEach(function (path) {
+                      path.setAttribute('class', toggleHighlight(path.getAttribute('class'), "area-highlight"));                      
+                  })
+              })
+          })
+          a.addEventListener('mouseleave', function() {
+              console.log("exit " + aid)
+              svg.selectAll('path#l-' + aid).forEach ( function (g) {
+                  g.forEach(function (path) {
+                      path.setAttribute('class', toggleHighlight(path.getAttribute('class'), "line-highlight"));                      
+                  })
+              })
+              svg.selectAll('path#a-' + aid).forEach ( function (g) {
+                  g.forEach(function (path) {
+                      path.setAttribute('class', toggleHighlight(path.getAttribute('class'), "area-highlight"));                      
+                  })
+              })
+          })
+      }) 
+  })
+}

app/js/index.js

@@ -3,6 +3,7 @@
 //= require 'vendor/js/d3'
 
 //= require 'js/d3.gauge'
+//= require 'js/graphene.events'
 //= require 'js/graphene'
 
 

build/index.css

@@ -694,6 +694,9 @@ line.tick {
   fill: none;
   stroke-width: 1px; }
 
+.line-highlight {
+  stroke-width: 5px; }
+
 .axis {
   shape-rendering: crispEdges; }