From 07d0574b4dd11185d99d92f66d05b091fb455600 Mon Sep 17 00:00:00 2001
From: cubedro <contact@siteshop.ro>
Date: Thu, 23 Apr 2015 17:03:14 +0300
Subject: [PATCH] histogram improvements

---
 public/css/style.css    |  2 +-
 public/js/directives.js | 31 ++++++++++++++++++-------------
 public/js/script.js     | 18 ------------------
 3 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index c3660e4..1f8615c 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -342,7 +342,7 @@ svg .bar:hover {
 svg .line {
 	fill: none;
 	stroke: #ff0000;
-	stroke-width: 2px;
+	stroke-width: 1.2px;
 	shape-rendering: auto;
 }
 
diff --git a/public/js/directives.js b/public/js/directives.js
index 30bc00f..3249798 100644
--- a/public/js/directives.js
+++ b/public/js/directives.js
@@ -83,8 +83,8 @@ angular.module('netStatsApp.directives', []).
 				data: '='
 			},
 			link: function(scope, element, attrs) {
-				var margin = {top: 0, right: 0, bottom: 0, left: 5};
-				var width = 285 - margin.left - margin.right,
+				var margin = {top: 0, right: 0, bottom: 0, left: 0};
+				var width = 280 - margin.left - margin.right,
 					height = 173 - margin.top - margin.bottom;
 
 				var TICKS = 40;
@@ -107,24 +107,30 @@ angular.module('netStatsApp.directives', []).
 				var yAxis = d3.svg.axis()
 					.scale(y)
 					.orient("left")
-					.ticks(4);
+					.ticks(4)
+					.tickFormat(d3.format("%"));
 
 				var line = d3.svg.line()
 					.x(function(d) { return x(d.x + d.dx); })
 					.y(function(d) { return y(d.y); })
 					.interpolate('basis');
 
-				scope.init = function() {
-
+				scope.init = function()
+				{
+					// Init data
 					var data = d3.layout.histogram()
-					.frequency(true)
-					.bins(x.ticks(TICKS))
-					(scope.data);
+						.frequency(false)
+						.bins(x.ticks(TICKS))
+						(scope.data);
 
+					// Adjust y axis
 					y.domain([0, d3.max(data, function(d) { return d.y; })]);
+					// y.domain([0, 1]);
 
+					// Delete previous histogram
 					element.empty();
 
+					/* Start drawing */
 					var svg = d3.select(".d3-blockpropagation").append("svg")
 						.attr("width", width + margin.left + margin.right)
 						.attr("height", height + margin.top + margin.bottom)
@@ -134,13 +140,12 @@ angular.module('netStatsApp.directives', []).
 					svg.append("g")
 						.attr("class", "x axis")
 						.attr("transform", "translate(0," + height + ")")
-						// .attr("transform", "translate(0,0)")
 						.call(xAxis);
 
 					svg.append("g")
 						.attr("class", "y axis")
-						.attr("transform", "translate(0, 0)")
-						// .attr("transform", "translate(" + width + ", 0)")
+						// .attr("transform", "translate(0, 0)")
+						.attr("transform", "translate(" + width + ", 0)")
 						.call(yAxis);
 
 
@@ -150,8 +155,8 @@ angular.module('netStatsApp.directives', []).
 						.attr("class", "bar")
 						.attr("x", function(d) { return x(d.x) + 1; })
 						.attr("y", function(d) { return y(d.y); })
-						.attr("rx", 1.5)
-						.attr("ry", 1.5)
+						.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); });
 
diff --git a/public/js/script.js b/public/js/script.js
index 05d034e..3f61247 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -26,24 +26,6 @@
 	moment.relativeTimeThreshold('M', 12);
 
 
-	json = [4292,12436,13141,14268,14650,0,55,774,891,1045,1184,1520,1786,1819,2103,2523,2846,2895,3010,3219,13046,0,284,507,525,1410,1531,1673,1803,1978,2652,2961,4224,4863,5056,12281,0,561,812,903,2161,2210,2312,2450,2559,2725,3273,4559,4727,5868,7777,0,1621,6982,9008,14035,0,1181,2753,2782,3580,3945,5779,7936,21489,0,196,1587,1611,1648,2603,2998,3802,4265,4464,5323,5606,6551,9982,10417,0,884,989,1202,1247,1282,2297,2577,2735,2935,3288,4261,4652,4706,4855,6509];
-
-	// var data = lineData = d3.layout.histogram()
-	// 	  .frequency(true)
-	// 	  .bins(x.ticks(40))
-	// 	  (json);
-
-	// y.domain([0, d3.max(data, function(d) { return d.y; })]);
-
-	/* Start drawing */
-
-
-
-	// d3.tsv("histogram.tsv", type, function(error, histogram) {
-	//   var n = d3.sum(histogram, function(d) { return d.y = d.a; });
-
-	//   y.domain([0, d3.max(histogram, function(d) { return d.y; })]);
-
 	//   var bar = svg.insert("g", ".axis")
 	//       .attr("class", "bar")
 	//     .selectAll("g")