Poor man's version of multi-event timeseries

lib/riemann/dash/public/views/timeseries.js

@@ -1,14 +1,89 @@
 (function() {
     var fitopts = {min: 6, max: 1000};
 
+    var nameFor = function(event) {
+      return event.host + event.service;
+    };
+
     var TimeSeriesView = function(json) {
+
+      var self = this;
+      self.smoothie = new SmoothieChart();
+
+      var seriesCollection = {};
+      
+      var appendEvent = function(series, event) {
+        return series.append(new Date(event.time).getTime(), format.float(event.metric));
+      };
+
+
+      var colorTemplate = _.template("hsla(<%=hue%>,<%=saturation%>%,<%=lightness%>%,<%=alpha%>)");
+
+      var HSLfromString = function(s) {
+        // return a hsl triple generated from a string checksum
+
+        var hashCode = function(s){ 
+          var hash = 0, char;
+          if (s.length == 0) return hash;
+          for (i = 0; i < s.length; i++) {
+            char = s.charCodeAt(i);
+            hash = ((hash<<5)-hash)+char;
+            hash = hash & hash; // Convert to 32bit integer
+          }
+          return hash;
+        }
+        
+        sum = hashCode(s)
+        // 0 and 359
+        var hue = Math.abs(sum) % 359;
+        var sat = Math.abs(sum) % 101;
+        var lum = Math.abs(sum) % 101;
+
+        lum = (lum > 50) ? lum : lum+50;
+
+        return [hue, sat, lum];
+      };
+
+      var colorStringFromHSL = function(hsl, alpha) {
+        return colorTemplate({
+          hue: hsl[0],
+          saturation: hsl[1],
+          lightness: hsl[2],
+          alpha: alpha || 1
+        });
+      };
+
+  
+      var createTimeSeries = function(event) {
+        var seriesName = nameFor(event);
+        var seriesColor = HSLfromString(seriesName);
+        var series = new TimeSeries();
+	series.append = _.throttle(series.append, 750);
+
+        self.smoothie.addTimeSeries(series, {lineWidth: self.lineWidth || 2,
+                                             strokeStyle: colorStringFromHSL(seriesColor)
+                                             });
+
+        return series;
+      };
+
+      var intoSeries = function(event) {
+        var seriesName = nameFor(event)
+        
+        var cachedSeries = seriesCollection[seriesName];
+        if (cachedSeries) {
+          return appendEvent(cachedSeries, event);
+        } else {
+          var newSeries = seriesCollection[seriesName] = createTimeSeries(event);
+          return appendEvent(newSeries, event);
+        };
+      };
+
       view.View.call(this, json);
       this.query = json.query;
       this.title = json.title;
       this.delay = json.delay;
       this.lineWidth = json.lineWidth;
-      this.strokeStyle = json.strokeStyle;
-      this.fillStyle = json.fillStyle;
 
       this.clickFocusable = true;
       this.el.addClass('timeseries');
@@ -32,27 +107,26 @@
 
       this.reflow();
 
-      this.smoothie = new SmoothieChart();
+      this.smoothie.streamTo(this.canvas, this.delay);      
-      this.smoothie.streamTo(this.canvas, this.delay);
+/*
-
       this.series = new TimeSeries();
       this.smoothie.addTimeSeries(this.series, {lineWidth: this.lineWidth || 2,
                                                 strokeStyle: this.strokeStyle || "#FFF",
                                                 fillStyle: this.fillStyle});
-      
+  */    
       if (this.query) {
         var reflowed = false;
         var me = this;
-        this.sub = subs.subscribe(this.query, function(e) {
+        this.sub = subs.subscribe(this.query, /* function(e) {
           var metric = format.float(e.metric);
           me.series.append(new Date(e.time).getTime(), metric);
           _.delay(function() {
             if (me.$title) {
               me.$title.text(me.title + ": " + metric);
             }
-          }, +me.delay)
+          }, +me.delay) 
 
-        });
+        }   */ intoSeries);
       }
     }
 
@@ -66,9 +140,7 @@
         title: this.title,
         delay: this.delay,
         query: this.query,
-        strokeStyle: this.strokeStyle,
         lineWidth: this.lineWidth,
-        fillStyle: this.fillStyle
       });
     }
 
@@ -77,12 +149,8 @@
           '<input type="text" name="title" value="{{title}}" /><br />' +
           '<label for="query">Query</label>' +
           '<input type="text" name="query" value="{{query}}" /><br />' +
-          '<label for="strokeStyle">StrokeStyle</label>' +
-          '<input type="text" name="strokeStyle" value="{{strokeStyle}}" /><br />' +
           '<label for="lineWidth">LineWidth</label>' +
           '<input type="text" name="lineWidth" value="{{lineWidth}}" /><br />' +
-          '<label for="fillStyle">FillStyle</label>' +
-          '<input type="text" name="fillStyle" value="{{fillStyle}}" /><br />' +
           '<label for="delay">Delay</label>' +
           '<input type="text" name="delay" value="{{delay}}" />',
         this)