yogsototh/riemann-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Small UI tweaks (todo: make ui customizable)

Browse source
This commit is contained in:
Thomas Omans 2013-03-05 16:35:09 -08:00 committed by egghead
parent 44545c1fe4
commit 791aae09db
1 changed files with 26 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
lib/riemann/dash/public/views/timeseries.js
View file

@ -8,7 +8,10 @@
var TimeSeriesView = function(json) {
var self = this;
self.smoothie = new SmoothieChart();
self.smoothie = new SmoothieChart({
grid: {strokeStyle:'#ccc', fillStyle:'rgba(255, 255, 255, 0.0)', lineWidth: 1, millisPerLine: 1000},
labels: { fillStyle:'#262626' }
});
var seriesCollection = {};
@ -16,7 +19,6 @@
return series.append(new Date(event.time).getTime(), format.float(event.metric));
};
var colorTemplate = _.template("hsla(<%=hue%>,<%=saturation%>%,<%=lightness%>%,<%=alpha%>)");
var HSLfromString = function(s) {
@ -39,7 +41,17 @@
var sat = Math.abs(sum) % 101;
var lum = Math.abs(sum) % 101;
lum = (lum > 50) ? lum : lum+50;
while (sat < 35) {
sat += 10;
}
while (lum > 85) {
lum -= 10;
}
while (lum < 35) {
lum += 10;
}
return [hue, sat, lum];
};
@ -58,19 +70,20 @@
var seriesName = nameFor(event);
var seriesColor = HSLfromString(seriesName);
var series = new TimeSeries();
series.append = _.throttle(series.append, 750);
series.append = _.throttle(series.append, 750);
self.smoothie.addTimeSeries(series, {lineWidth: self.lineWidth || 2,
strokeStyle: colorStringFromHSL(seriesColor)
});
var seriesOpts = {lineWidth: self.lineWidth || 2,
strokeStyle: colorStringFromHSL(seriesColor),
fillStyle: colorStringFromHSL(seriesColor, 0.1)};
self.smoothie.addTimeSeries(series, seriesOpts);
return series;
};
var intoSeries = function(event) {
var seriesName = nameFor(event)
var cachedSeries = seriesCollection[seriesName];
if (cachedSeries) {
return appendEvent(cachedSeries, event);
} else {
@ -88,7 +101,7 @@
this.clickFocusable = true;
this.el.addClass('timeseries');
this.el.append(
'<div class="box">' +
'<div>' +
'<div class="title">' +
'<h2>' + this.title + '</h2>' +
'</div>' +
@ -98,9 +111,8 @@
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.$titlecontainer.css({"color": "#4D4D4D",
"font-size": "1.5em"})
this.$title = this.$titlecontainer.find("h2");
this.canvas = this.$canvas.get(0);
@ -108,25 +120,11 @@
this.reflow();
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) {
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)
} */ intoSeries);
this.sub = subs.subscribe(this.query, intoSeries);
}
}