Rounding out timeseries with customization and title updating
This commit is contained in:
parent
8fe48d6390
commit
fa2996265f
1 changed files with 43 additions and 10 deletions
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue