Merge pull request #75 from mchandramouli/master

adding warning and error indicator lines to TimeSeriesView

Author: jondot

app/css/high-contrast.scss

@@ -79,6 +79,17 @@ line.tick {
   stroke-opacity: 0.3;
 }
 
+path.line-warn {
+    stroke: yellow;
+    fill: yellow;
+    stroke-width: 2px;
+}
+path.line-error {
+    stroke: red;
+    fill: red;
+    stroke-width: 2px;
+}
+
 .min-tag{
   fill:red;
   margin: 0 1em;

app/js/graphene.coffee

@@ -338,6 +338,8 @@ class Graphene.TimeSeriesView extends Backbone.View
   initialize: ()->
     @name = @options.name || "g-" + parseInt(Math.random() * 1000000)
     @line_height = @options.line_height || 16
+    @x_ticks = @options.x_ticks || 4
+    @y_ticks = @options.y_ticks || 4
     @animate_ms = @options.animate_ms || 500
     @label_offset = @options.label_offset || 0
     @label_columns = @options.label_columns || 1
@@ -399,8 +401,8 @@ class Graphene.TimeSeriesView extends Backbone.View
     # build axis
     #
     xtick_sz = if @display_verticals then -@height else 0
-    xAxis = d3.svg.axis().scale(x).ticks(4).tickSize(xtick_sz).tickSubdivide(true)
-    yAxis = d3.svg.axis().scale(y).ticks(4).tickSize(-@width).orient("left").tickFormat(d3.format("s"))
+    xAxis = d3.svg.axis().scale(x).ticks(@x_ticks).tickSize(xtick_sz).tickSubdivide(true)
+    yAxis = d3.svg.axis().scale(y).ticks(@y_ticks).tickSize(-@width).orient("left").tickFormat(d3.format("s"))
 
     vis = @vis
 
@@ -452,7 +454,27 @@ class Graphene.TimeSeriesView extends Backbone.View
       #
       vis.selectAll("path.line").data(points).enter().append('path').attr("d", line).attr('class',  (d,i) -> 'line '+"h-col-#{i+1}")
       vis.selectAll("path.area").data(points).enter().append('path').attr("d", area).attr('class',  (d,i) -> 'area '+"h-col-#{i+1}")
-
+          
+      if (@options.warn && (dmax.ymax_graph > @options.warn))
+          warnData = [[[@options.warn, xmin],[@options.warn, xmax]]]
+          vis.selectAll("path.line-warn")
+            .data(warnData)
+            .enter()
+            .append('path')
+            .attr('d', line)
+            .attr('stroke-dasharray', '10,10')
+            .attr('class', 'line-warn')
+      
+      if (@options.error && (dmax.ymax_graph > @options.error))
+          errorData= [[[@options.error, xmin],[@options.error, xmax]]]
+          vis.selectAll("path.line-error")
+            .data(errorData)
+            .enter()
+            .append('path')
+            .attr('d', line)
+            .attr('stroke-dasharray', '10,10')
+            .attr('class', 'line-error')
+                      
       #
       # Title + Legend
       #
@@ -540,7 +562,7 @@ class Graphene.TimeSeriesView extends Backbone.View
         .transition()
         .ease("linear")
         .duration(@animate_ms)
-
+        
     @postrender(@vis)
 
 # Barcharts

app/js/graphene.events.js

@@ -12,14 +12,11 @@ function toggleHighlight(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"));                      
@@ -32,7 +29,6 @@ function postRenderTimeSeriesView(vis) {
               })
           })
           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"));                      

build/index.css

@@ -711,6 +711,16 @@ line.tick {
   fill: none;
   stroke-opacity: 0.3; }
 
+path.line-warn {
+  stroke: yellow;
+  fill: yellow;
+  stroke-width: 2px; }
+
+path.line-error {
+  stroke: red;
+  fill: red;
+  stroke-width: 2px; }
+
 .min-tag {
   fill: red;
   margin: 0 1em; }

build/index.js

@@ -42,8 +42,10 @@
       source: "http://localhost:4567/",
       TimeSeries: {
         parent: '#g1-1',
-		label_offset: 200, 
-		label_columns: 2,
+        title: 'New Message',
+        label_offset: 200, 
+        label_columns: 2,
+        time_span_mins: 12,
         observer: function(data){
           console.log("Time series observing ", data);
         }
@@ -52,19 +54,27 @@
     "Feed Poll": {
       source: "http://localhost:4567/",
       TimeSeries: {
+        title: 'Feed Poll',
+        y_ticks: 2,
+        display_verticals: true,
         parent: '#g1-2'
       }
     },
     "Topics": {
       source: "http://localhost:4567/",
       refresh_interval: 20000,
       TimeSeries: {
+        title: 'Topics',
         parent: '#g1-3'
       }
     },
     "Queue Push": {
       source: "http://localhost:4567/",
       TimeSeries: {
+        title: 'Queue Push',
+        ymax: 1000,
+        warn: 600,
+        error: 800,
         parent: '#g2-1'
       }
     },