Rounding out timeseries with customization and title updating

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

@@ -5,23 +5,40 @@
       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');
       this.el.append(
         '<div class="box">' +
+          '<div class="title">' +
+            '<h2>' + this.title + '</h2>' +
+          '</div>' +
           '<canvas class="timeseries"></canvas>' +
-          '</div>'
+        '</div>'
       );
 
       this.$canvas = this.el.find(".timeseries");
+      this.$titlecontainer = this.el.find("div.title");
+      this.$titlecontainer.css({"color": "#f2f2f2",
+                                "text-shadow": "#262626 2px 2px 4px",
+                                "font-size": "2em"})
+      
+      this.$title = this.$titlecontainer.find("h2");
       this.canvas = this.$canvas.get(0);
-      this.smoothie = new SmoothieChart();
-      this.smoothie.streamTo(this.canvas, 2000);
-
-      this.series = new TimeSeries();
-      this.smoothie.addTimeSeries(this.series, {lineWidth: 3});
 
       this.reflow();
+
+      this.smoothie = new SmoothieChart();
+      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;
@@ -29,6 +46,12 @@
         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)
+
         });
       }
     }
@@ -36,14 +59,16 @@
     view.inherit(view.View, TimeSeriesView);
     view.TimeSeries = TimeSeriesView;
     view.types.TimeSeries = TimeSeriesView;
-    console.log(view.types);
-    console.log("Hello world!!!");
 
     TimeSeriesView.prototype.json = function() {
       return $.extend(view.View.prototype.json.call(this), {
         type: 'TimeSeries',
         title: this.title,
-        query: this.query
+        delay: this.delay,
+        query: this.query,
+        strokeStyle: this.strokeStyle,
+        lineWidth: this.lineWidth,
+        fillStyle: this.fillStyle
       });
     }
 
@@ -51,7 +76,15 @@
       return Mustache.render('<label for="title">Title</label>' +
           '<input type="text" name="title" value="{{title}}" /><br />' +
           '<label for="query">Query</label>' +
-          '<input type="text" name="query" value="{{query}}" />',
+          '<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)
     }