fix #4; add back in mark support

src/panels/Performance.js

@@ -40,7 +40,7 @@ Performance.prototype.createPanelElement = function () {
 };
 
 Performance.prototype.update = function () {
-    this.graph.addData(this.parent.timings);
+    this.graph.addData(this.parent.timings, this.eventQueue.shift());
 };
 
 Performance.prototype.mark = function (label) {

src/util/Graph.js

@@ -20,6 +20,8 @@ function Graph(container, width, height, colors, options) {
     this.legendBoxSize = 10;
     this.legendIndent = 5;
 
+    this.eventY = this.padding * 2;
+
     this.colors = colors;
 
     this.dataCanvas = document.createElement('canvas');
@@ -38,13 +40,13 @@ Graph.prototype.constructor = Graph;
 module.exports = Graph;
 
 // render the graph with the new data point
-Graph.prototype.addData = function (values) {
+Graph.prototype.addData = function (values, event) {
     // clear the main canvas
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
     this.drawBg();
     this.drawLegend(values);
-    this.drawData(values);
+    this.drawData(values, event);
 };
 
 Graph.prototype.drawBg = function () {
@@ -116,7 +118,7 @@ Graph.prototype.drawLegend = function (values) {
     }
 };
 
-Graph.prototype.drawData = function (values) {
+Graph.prototype.drawData = function (values, event) {
     var x = this.dataCanvas.width - this.dataLineWidth + 0.5,
         y = this.dataCanvas.height - 0.5;
 
@@ -136,6 +138,27 @@ Graph.prototype.drawData = function (values) {
     // draw the buffer back to the data canvas
     this.dctx.drawImage(this.dataCanvasBuffer, 0, 0);
 
+    // draw event to the new line of the data canvas if there was one
+    if (event) {
+        this.dctx.beginPath();
+        this.dctx.strokeStyle = this.dctx.fillStyle = '#ff0000';
+        this.dctx.lineWidth = this.dataLineWidth;
+
+        this.dctx.moveTo(x, y);
+        this.dctx.lineTo(x, 0);
+
+        this.dctx.stroke();
+
+        this.dctx.textAlign = 'right';
+        this.dctx.fillText(event, x - this.padding, this.eventY);
+
+        this.eventY += (this.padding * 2);
+
+        if (this.eventY > (this.dataCanvas.height / 2)) {
+            this.eventY = (this.padding * 2);
+        }
+    }
+
     // draws the data values to the new line of the data canvas
 
     // draw the new data points