Merge pull request #89 from cubedro/develop

Code cleanup & propagation histogram styling

public/css/style.css

@@ -336,35 +336,28 @@ svg {
 }
 
 svg .bars .bar {
-	fill: #10a0de;
+	opacity: 1;
-	opacity: 0.8;
 	shape-rendering: auto;
 }
 
 svg .bars .handle {
-	fill: #10a0de;
 	opacity: 0;
 }
 
 svg .bars .highlight {
-	fill: #fff;
 	opacity: 0;
 }
 
-svg .bars g:hover .bar {
+svg .bars g:hover .highlight {
 	opacity: 1;
 }
 
 svg .line {
 	fill: none;
 	stroke: #ff0000;
-	opacity: 0.8;
+	stroke-width: 1.3px;
-	stroke-width: 2px;
+	shape-rendering: geometric-precision;
-	shape-rendering: auto;
+	-webkit-svg-shadow: 0 0 7px #fff;
-}
-
-svg .bar .a {
-	fill: #aec7e8;
 }
 
 svg .bar text {
@@ -387,3 +380,7 @@ svg .axis text {
 	-webkit-font-smoothing: subpixel-antialiased;
 	-moz-font-smoothing: subpixel-antialiased;
 }
+
+svg .y.axis .tick:first-child text {
+	opacity: 0;
+}

public/js/directives.js

@@ -98,6 +98,10 @@ angular.module('netStatsApp.directives', []).
 					.range([height, 0])
 					.interpolate(d3.interpolateRound);
 
+				var color = d3.scale.linear()
+					.domain([1000, 3000, 7000, 10000, 20000])
+					.range(["#7bcc3a", "#FFD162", "#ff8a00", "#F74B4B", "#CC0000"]);
+
 				var xAxis = d3.svg.axis()
 					.scale(x)
 					.orient("bottom")
@@ -112,7 +116,7 @@ angular.module('netStatsApp.directives', []).
 
 				var line = d3.svg.line()
 					.x(function(d) { return x(d.x + d.dx/2) - 1; })
-					.y(function(d) { return y(d.y); })
+					.y(function(d) { return y(d.y) - 2; })
 					.interpolate('basis');
 
 				var tip = d3.tip()
@@ -156,13 +160,13 @@ angular.module('netStatsApp.directives', []).
 						.call(yAxis);
 
 
-					var bar = svg.insert("g", ".axis")
+					var bar = svg.append("g")
 						.attr("class", "bars")
 					  .selectAll("g")
 					  .data(data)
 					  .enter().append("g")
 						.attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; })
-						.on('mouseover', function(d) { tip.show(d, d3.select(this).select('.bar')[0][0]); })
+						.on('mouseover', function(d) { tip.show(d, d3.select(this).select('.bar').node()); })
 						.on('mouseout', tip.hide);
 
 					bar.insert("rect")
@@ -176,16 +180,18 @@ angular.module('netStatsApp.directives', []).
 						.attr("y", function(d) { return y(d.y); })
 						.attr("rx", 1.2)
 						.attr("ry", 1.2)
+						.attr("fill", function(d) { return color(d.x); })
 						.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
 						.attr("height", function(d) { return height - y(d.y) + 1; });
 
 					bar.insert("rect")
 						.attr("class", "highlight")
 						.attr("y", function(d) { return y(d.y); })
+						.attr("fill", function(d) { return d3.rgb(color(d.x)).brighter(.7).toString(); })
 						.attr("rx", 1)
 						.attr("ry", 1)
 						.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
-						.attr("height", function(d) { return height - y(d.y); });
+						.attr("height", function(d) { return height - y(d.y) + 1; });
 
 					svg.append("path")
 						.attr("class", "line")

public/js/script.js

@@ -25,33 +25,4 @@
 	moment.relativeTimeThreshold('d', 28);
 	moment.relativeTimeThreshold('M', 12);
 
-
-	//   var bar = svg.insert("g", ".axis")
-	//       .attr("class", "bar")
-	//     .selectAll("g")
-	//       .data(histogram)
-	//     .enter().append("g")
-	//       .attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; });
-
-	  // bar.append("rect")
-	  //     .attr("class", "b")
-	  //     .attr("x", 1)
-	  //     .attr("y", function(d) { return y(d.b); })
-	  //     .attr("width", x(histogram[0].dx) - 1)
-	  //     .attr("height", function(d) { return height - y(d.b); });
-
-	//   bar.append("rect")
-	//       .attr("class", "a")
-	//       .attr("x", 1)
-	//       .attr("y", function(d) { return y(d.y); })
-	//       .attr("width", x(histogram[0].dx) - 1)
-	//       .attr("height", function(d) { return height - y(d.a); });
-
-	  // bar.filter(function(d) { return d.y / n >= .0095; }).append("text")
-	  //     .attr("dy", ".015em")
-	  //     .attr("transform", function(d) { return "translate(" + x(histogram[0].dx) / 2 + "," + (y(1000) + 6) + ")rotate(-90)"; })
-	  //     // .attr("transform", function(d) { return "translate(" + x(histogram[0].dx) / 2 + "," + (y(d.y) + 6) + ")rotate(-90)"; })
-	  //     .text(function(d) { return formatPercent(d.y / n); });
-	// });
-
 })();