updated plotter to refactor code somewhat; interface is a little clea…

…ner. also fixed plot colors not matching. closes #91

src/visualizers/widgets/ResultsViz/ResultsVizWidget.Parser.js

@@ -14,6 +14,7 @@ define([], function() {
 		var alias = result[1];
 		if (!log_data[alias]) {
 		    log_data[alias] = {
+			name : alias,
 			data : [],
 		    };
 		}

src/visualizers/widgets/ResultsViz/ResultsVizWidget.Plotter.js

@@ -3,16 +3,34 @@
 define(['d3'], function() {
     'use strict';
     return {
-	plotData: function(plotId, data, names) {
+	plotData: function(plotId, data) {
+	    if (_.isEmpty(data))
+		return;
+
+	    var names = Object.keys(data);
 
 	    var bandPos = [-1, -1];
 	    var pos;
 
 	    // extent returns array: [min, max]
-	    var xdomain = d3.extent(data, function(d) { return d3.extent(d, function(xy) { return xy[0]; })[1]; })[1];
-	    var ydomain = d3.extent(data, function(d) { return d3.extent(d, function(xy) { return xy[1]; })[1]; })[1];
-
-	    var colors = ["steelblue", "green", "red", "purple", "lavender"];
+	    var maxXs = Object.keys(data).map(function(key) {
+		return d3.extent(data[key].data, function(xy) { return xy[0]; })[1];
+	    });
+	    var maxYs = Object.keys(data).map(function(key) {
+		return d3.extent(data[key].data, function(xy) { return xy[1]; })[1];
+	    });
+	    var xdomain = d3.max(maxXs);
+	    var ydomain = d3.max(maxYs); 
+
+	    var colors = ["steelblue", "green", "red", "purple", "lavender", "orange", "yellow", "blue", "grey"];
+	    var colorMap = {};
+	    var tmp =0;
+	    for (var key in data) {
+		colorMap[key] = colors[tmp];
+		tmp++;
+		if (tmp >= colors.length)
+		    tmp = 0;
+	    }
 
 	    var margin = {
 		top: 40,
@@ -82,26 +100,35 @@ define(['d3'], function() {
 		.attr("height", height);
 
 	    // add data
-	    for (var idx=0; idx< data.length; idx++) {
+	    for (var alias in data) {
 		svg.append("path")
-		    .datum(data[idx])
-		    .attr("class", "line line" + idx)
+		    .datum(data[alias].data)
+		    .attr("class", "line line" + alias)
 		    .attr("clip-path", "url(#clip)")
-		    .style("stroke", colors[idx])
+		    .style("stroke", colorMap[alias])
 		    .attr("d", line);
 	    }
 
 	    var longestName = names.sort(function (a, b) { return b.length - a.length; })[0];
 	    var legendWidth = longestName.length * 5 + 10;
 	    // add legend   
+	    var legend = svg.append("g")
+		.attr("class", "legend")
+		//.attr("x", width - legendWidth)
+		//.attr("y", 25)
+		.attr("height", 100)
+		.attr("width", legendWidth * 2)
+	    .attr('transform', 'translate(0, 0)');
+
+	    /*
 	    var legend = svg.append("g")
 		.attr("class", "legend")
 		.attr("x", width - legendWidth)
 		.attr("y", 25)
 		.attr("height", 100)
 		.attr("width", legendWidth * 2);
-
-	    legend.selectAll('g').data(data)
+	    */
+	    legend.selectAll('g').data(names)
 		.enter()
 		.append('g')
 		.each(function(d, i) {
@@ -111,15 +138,15 @@ define(['d3'], function() {
 			.attr("y", i*25)
 			.attr("width", 10)
 			.attr("height", 10)
-			.style("fill", colors[i]);
+			.style("fill", colorMap[d]);
 
 		    g.append("text")
 			.attr("x", width - legendWidth + 10)
 			.attr("y", i * 25 + 8)
 			.attr("height",30)
 			.attr("width",legendWidth)
 			.style("fill", "black")
-			.text(names[i]);
+			.text(d);
 
 		});
 

src/visualizers/widgets/ResultsViz/ResultsVizWidget.js

@@ -60,14 +60,9 @@ define([
 		$(p).attr('id',"plot_" + a);
 
 		// parse the logs
-		var log_data = Parser.getDataFromAttribute(desc.attributes[a]);
-		var plot_data = [];
-		var aliases = Object.keys(log_data);
-		aliases.map(function(alias) {
-		    plot_data.push(log_data[alias].data);
-		});
-		if (plot_data.length > 0)
-		    Plotter.plotData('#plot_'+a, plot_data, aliases);
+		var data = Parser.getDataFromAttribute(desc.attributes[a]);
+		if (!_.isEmpty(data))
+		    Plotter.plotData('#plot_'+a, data);
 		else
 		    $(container).detach();
 	    }