Skip to content

Commit

Permalink
clean up graph code
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnutt
mnutt committed Sep 19, 2012
1 parent b91976a commit a8999b6
Showing 1 changed file with 68 additions and 40 deletions.
108 changes: 68 additions & 40 deletions public/js/widgets/graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,44 @@ Hummingbird.Graph = function(element, socket, options) {
}

var defaults = {
ratePerSecond: 20,
showLogDate: false,
showMarkers: true,
showBackgroundBars: true,
tickLineColor: '#666',
bgLineColor: '#555',
barColor: null,
graphHeight: 216,
averageOver: 0.5
averageOver: 0.5,
startingScale: 50,
lineColors: {
6400: "#FFFFFF",
3200: "#BBBBBB",
1600: "#999999",
800: "#983839",
400: "#C44939",
200: "#F1E29F",
100: "#7BE4D6",
50: "#65B88A",
25: "#5BC4B6",
12.5: "#3BA496",
6.25: "#1B8476",
3.125: "#006456",
def: "#7BF4D6"
}
}

this.options = $.extend(defaults, options);

this.scale = 50;
this.scale = this.options.startingScale;
this.element = element;
this.socket = socket;
this.graph = this.element.find('div.graph');
this.trafficLog = [];
this.buffer = [];

this.createGraph();
this.initialize();
this.initialize(options);
};

Hummingbird.Graph.prototype = new Hummingbird.Base();
Expand All @@ -46,26 +64,30 @@ $.extend(Hummingbird.Graph.prototype, {
name: "Graph",

onMessage: function(message, average) {
this.drawLogPath(average * this.options.averageOver);
var value = average * this.options.averageOver;

if(this.pageIsVisible()) {
this.processBuffer();
this.drawLogPath(value);
} else {
this.sendToBuffer(value);
}
},

createGraph: function() {
this.lineColors = {
6400: "#FFFFFF",
3200: "#BBBBBB",
1600: "#999999",
800: "#983839",
400: "#C44939",
200: "#F1E29F",
100: "#7BE4D6",
50: "#65B88A",
25: "#5BC4B6",
12.5: "#3BA496",
6.25: "#1B8476",
3.125: "#006456",
def: "#7BF4D6"
};
processBuffer: function() {
while(this.buffer.length > 0) {
this.drawLogPath(this.buffer.shift());
}
},

sendToBuffer: function(value) {
this.buffer.push(value);
if(this.buffer.length > this.numPoints) {
this.buffer.shift();
}
},

createGraph: function() {
this.lineWidth = 3;

this.graphHeight = this.options.graphHeight; // this.graph.height();
Expand All @@ -74,7 +96,7 @@ $.extend(Hummingbird.Graph.prototype, {

this.numPoints = Math.ceil(this.graphWidth / (this.lineWidth * 2));

this.numMarkers = Math.floor(this.graphHeight / 23);
this.numMarkers = Math.floor(this.graphHeight / 20);
this.resetMarkers();

this.drawEmptyGraph();
Expand All @@ -85,40 +107,42 @@ $.extend(Hummingbird.Graph.prototype, {
var leftMarkerContainer = this.element.find('div.axis_left');
var rightMarkerContainer = this.element.find('div.axis_right');

if(leftMarkerContainer.length == 0) { return; }

var resetMarkerContainer = function(container, numMarkers, scale) {
container.css({opacity: 1});
var incr = scale / numMarkers;
for(var i = 0; i <= numMarkers; i++) {
var markerValue = Math.floor(scale - (i * incr));
container.append('<p>' + markerValue + '</p>');
}
container.animate({opacity: 0.3});
container.animate({opacity: 0.6});
};

var numMarkers = this.numMarkers;
var scale = this.scale;

rightMarkerContainer.html('');
resetMarkerContainer(rightMarkerContainer, numMarkers, scale);

var millisecsBeforeUpdating = 0;
if (this.lineWidth != null && this.messageRate != null) {
var millisecsPerTick = 1000 / this.messageRate;
if (this.lineWidth != null && this.options.ratePerSecond != null) {
var millisecsPerTick = 1000 / this.options.ratePerSecond;
var ticksPerFrame = this.graphWidth / (this.lineWidth * 2.0);
millisecsBeforeUpdating = millisecsPerTick * ticksPerFrame;
}

if(leftMarkerContainer.html().length == 0) {
// Update immediately if it's empty
resetMarkerContainer(leftMarkerContainer, numMarkers, scale);
} else {
// Otherwise wait until the scale change reaches it
setTimeout(function() {
leftMarkerContainer.html('');
if(rightMarkerContainer.length > 0) {
rightMarkerContainer.html('');
resetMarkerContainer(rightMarkerContainer, numMarkers, scale);
}

if(leftMarkerContainer.length > 0) {
if(leftMarkerContainer.html().length == 0) {
// Update immediately if it's empty
resetMarkerContainer(leftMarkerContainer, numMarkers, scale);
}, millisecsBeforeUpdating);
} else {
// Otherwise wait until the scale change reaches it
setTimeout(function() {
leftMarkerContainer.html('');
resetMarkerContainer(leftMarkerContainer, numMarkers, scale);
}, millisecsBeforeUpdating);
}
}
},

Expand Down Expand Up @@ -163,6 +187,10 @@ $.extend(Hummingbird.Graph.prototype, {
var lineHeight = Math.abs(oldHeight - newHeight);
var borderBottom = Math.min(oldHeight, newHeight);
var borderTop = this.graphHeight - lineHeight - borderBottom;
if(borderTop < 0) {
borderTop = 0;
lineHeight = this.graphHeight - borderBottom;
}

var line = $("<div style='border-bottom: " + borderBottom + "px solid #333; height: " + lineHeight + "px; border-top: " + borderTop + "px solid #333; background-color: #FFF' class='line'></div>");
line.prependTo(this.graph);
Expand All @@ -175,10 +203,10 @@ $.extend(Hummingbird.Graph.prototype, {
var average = Math.round(value);
var percent = average / this.scale;
var height = Math.min(Math.floor(percent * this.graphHeight), this.graphHeight);
var color = this.options.barColor || this.lineColors[this.scale] || this.lineColors.def;
var color = this.options.barColor || this.options.lineColors[this.scale] || this.options.lineColors.def;
var lineHeight = this.graphHeight - height;

if(this.tick % (this.messageRate * 2) == 0) { // Every 2 seconds
if(this.tick % (this.options.ratePerSecond * 2) == 0) { // Every 2 seconds
this.element.attr('data-average', average);

this.rescale(percent);
Expand All @@ -189,7 +217,7 @@ $.extend(Hummingbird.Graph.prototype, {
}

var backgroundColor;
if(this.tick % this.messageRate == 0) {
if(this.tick % this.options.ratePerSecond == 0) {
backgroundColor = this.options.tickLineColor;
} else {
backgroundColor = this.options.bgLineColor;
Expand Down

0 comments on commit a8999b6

Please sign in to comment.