[tor-commits] [depictor/master] Add bwauth statistics graphs to graphs.py

tom at torproject.org tom at torproject.org
Wed May 3 17:52:58 UTC 2017


commit 4386adee38d7740b54572fe575f24639f87c2e90
Author: Tom Ritter <tom at ritter.vg>
Date:   Fri Apr 14 23:42:09 2017 -0500

    Add bwauth statistics graphs to graphs.py
---
 graphs.py | 236 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 208 insertions(+), 28 deletions(-)

diff --git a/graphs.py b/graphs.py
index 6ed4a1f..65de394 100755
--- a/graphs.py
+++ b/graphs.py
@@ -61,17 +61,23 @@ class GraphWriter(WebsiteWriter):
 			+ "    	font-size: 16px;\n"
 			+ "    	text-decoration: underline;\n"
 			+ "    }\n"
+			+ "    .bwauth-graph-title {\n"
+			+ "    	font-size: 12px;\n"
+			+ "    	text-decoration: underline;\n"
+			+ "    }\n"
 			+ "    .graphbox {\n"
 			+ "      text-align: center;\n"
 			+ "      display: none;\n"
 			+ "    }\n"
-
-			+ "    .auth1 {\n"
+			+ "    .auth1, .steelblue {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: steelblue;\n"
 			+ "      background-color: steelblue;\n"
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
+			+ "    .steelblue {\n"
+			+ "      fill: steelblue;\n"
+			+ "    }\n"
 			+ "    .auth2, .orange {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: orange;\n"
@@ -79,14 +85,17 @@ class GraphWriter(WebsiteWriter):
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
 			+ "    .orange {\n"
-			+ "      fill: orange;"
+			+ "      fill: orange;\n"
 			+ "    }\n"
-			+ "    .auth3 {\n"
+			+ "    .auth3, .yellow {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: yellow;\n"
 			+ "      background-color: yellow;\n"
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
+			+ "    .yellow {\n"
+			+ "      fill: yellow;\n"
+			+ "    }\n"
 			+ "    .auth4, .green {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: green;\n"
@@ -94,7 +103,7 @@ class GraphWriter(WebsiteWriter):
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
 			+ "    .green {\n"
-			+ "      fill: green;"
+			+ "      fill: green;\n"
 			+ "    }\n"
 			+ "    .auth5, .red {\n"
 			+ "      fill: none;\n"
@@ -103,39 +112,50 @@ class GraphWriter(WebsiteWriter):
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
 			+ "    .red {\n"
-			+ "      fill: red;"
+			+ "      fill: red;\n"
 			+ "    }\n"
-			+ "    .auth6 {\n"
+			+ "    .auth6, .purple {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: purple;\n"
 			+ "      background-color: purple;\n"
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
+			+ "    .purple {\n"
+			+ "      fill: purple;\n"
+			+ "    }\n"
 			+ "    .auth7 {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: black;\n"
 			+ "      background-color: black;\n"
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
-			+ "    .auth8 {\n"
+			+ "    .auth8, .blue {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: #0000FF;\n"
 			+ "      background-color: #0000FF;\n"
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
-			+ "    .auth9 {\n"
+			+ "    .blue {\n"
+			+ "      fill: blue;\n"
+			+ "    }\n"
+			+ "    .auth9, .limegreen {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: limegreen;\n"
 			+ "      background-color: limegreen;\n"
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
-			+ "    .auth10 {\n"
+			+ "    .limegreen {\n"
+			+ "      fill: limegreen;\n"
+			+ "    }\n"
+			+ "    .auth10, .pink {\n"
 			+ "      fill: none;\n"
 			+ "      stroke: pink;\n"
 			+ "      background-color: pink;\n"
 			+ "      stroke-width: 1.5px;\n"
 			+ "    }\n"
-
+			+ "    .pink {\n"
+			+ "      fill: pink;\n"
+			+ "    }\n"
 			+ "  </style>\n"
 			+ "    <div class=\"center\">\n"
 			+ "      <div class=\"main-column\">\n"
@@ -251,6 +271,20 @@ class GraphWriter(WebsiteWriter):
 		self.site.write("      </div>\n"
 		+ "    </td>\n"
 		+ "  </tr>\n")
+	def _write_bandwidth_scanner_statistics_graphs_spot(self, divName, timeframe):
+		self.site.write("  <tr>\n"
+		+ "    <td>\n"
+		+ "      <div id=\"" + str(divName) + "\" class=\"graphbox\">\n"
+        + "         <span class=\"graph-title\">Bandwidth Auth Statistics, Past " + timeframe + " Days</span>\n"
+        + "         <br />\n"
+        + "         <span class=\"steelblue\" style=\"margin-left:5px\">     </span> above\n"
+        + "         <span class=\"purple\" style=\"margin-left:5px\">     </span> shared\n"
+        + "         <span class=\"green\" style=\"margin-left:5px\">     </span> exclusive\n"
+        + "         <span class=\"orange\" style=\"margin-left:5px\">     </span> below\n"
+        + "         <span class=\"blue\" style=\"margin-left:5px\">     </span> unmeasured\n"
+		+ "      </div>\n"
+		+ "    </td>\n"
+		+ "  </tr>\n")
 	def _write_bandwidth_scanner_graphs(self):
 		"""
 		Write the graphs of the bandwidth scanners
@@ -276,6 +310,10 @@ class GraphWriter(WebsiteWriter):
 		self._write_bandwidth_scanner_graphs_spot("bwauth_measured_2", get_bwauths())
 		self._write_bandwidth_scanner_graphs_spot("bwauth_measured_3", get_bwauths())
 		self._write_bandwidth_scanner_graphs_spot("bwauth_measured_4", get_bwauths())
+		self._write_bandwidth_scanner_statistics_graphs_spot("bwauths_stats_1", "7")
+		self._write_bandwidth_scanner_statistics_graphs_spot("bwauths_stats_2", "14")
+		self._write_bandwidth_scanner_statistics_graphs_spot("bwauths_stats_3", "30")
+		self._write_bandwidth_scanner_statistics_graphs_spot("bwauths_stats_4", "90")
 		#self._write_bandwidth_scanner_graphs_spot("bwauth_running_unmeasured_1")
 		#self._write_bandwidth_scanner_graphs_spot("bwauth_running_unmeasured_2")
 		#self._write_bandwidth_scanner_graphs_spot("bwauth_running_unmeasured_3")
@@ -286,9 +324,12 @@ class GraphWriter(WebsiteWriter):
 		s = """<script>
 		var AUTH_LOGICAL_MIN = """ + str(self.config['graph_logical_min']) + """,
 		    AUTH_LOGICAL_MAX = """ + str(self.config['graph_logical_max']) + """;
-		var WIDTH = 800,
-		    HEIGHT = 500,
-		    MARGIN = {top: 40, right: 40, bottom: 40, left: 40};
+		var WIDTH = 800,  BWAUTH_WIDTH = 800,
+		    HEIGHT = 500, BWAUTH_HEIGHT = 200,
+		    MARGIN = {top: 40, right: 40, bottom: 40, left: 40},
+		    BWAUTH_MARGIN = {top: 14, right: 40, bottom: 20, left: 40};
+		
+		
 
 		var bwauths = """ + str(get_bwauths().keys()) + """;
 		var dirauths = """ + str(get_dirauths().keys()) + """;
@@ -336,7 +377,8 @@ class GraphWriter(WebsiteWriter):
 				data_func: _getBandwidthDataValue, authorities: bwauths, min_ignore_limit:AUTH_LOGICAL_MIN, max_ignore_limit:AUTH_LOGICAL_MAX },
 			{ title: "BWAuth Measured Relays, Past 90 Days", data_slice: 2160, div: "bwauth_measured_4", 
 				data_func: _getBandwidthDataValue, authorities: bwauths, min_ignore_limit:AUTH_LOGICAL_MIN, max_ignore_limit:AUTH_LOGICAL_MAX },
-/* These graphs are very misleading and not helpful
+
+			/* These graphs are very misleading and not helpful
 			{ title: "BWAuth Running Unmeasured Relays, Past 30 Days", data_slice: 720, div: "bwauth_running_unmeasured_1", 
 				data_func: _getRunningUnmeasuredDataValue, authorities: bwauths, min_ignore_limit:-1000, max_ignore_limit:AUTH_LOGICAL_MAX },
 			{ title: "BWAuth Running Unmeasured Relays, Past 90 Days", data_slice: 2160, div: "bwauth_running_unmeasured_2", 
@@ -345,22 +387,34 @@ class GraphWriter(WebsiteWriter):
 				data_func: _getRunningUnmeasuredDataValue, authorities: bwauths, min_ignore_limit:-1000, max_ignore_limit:AUTH_LOGICAL_MAX },
 			{ title: "BWAuth Running Unmeasured Relays, Past 2 Years", data_slice: 17520, div: "bwauth_running_unmeasured_4", 
 				data_func: _getRunningUnmeasuredDataValue, authorities: bwauths, min_ignore_limit:-1000, max_ignore_limit:AUTH_LOGICAL_MAX },
-*/
+			*/
 		];
 
-	    var FALLBACK_GRAPHS_TO_GENERATE = [
-	      { title: "Fallback Directories Running, Past 7 Days", data_slice: 168, div: "fallbackdirs_1", 
-	        data_func: _getRunningDataValue, authorities: dirauths, min_ignore_limit:AUTH_LOGICAL_MIN, max_ignore_limit:AUTH_LOGICAL_MAX },
-	      { title: "Fallback Directories Running, Past 14 Days", data_slice: 336, div: "fallbackdirs_2", 
-	        data_func: _getRunningDataValue, authorities: dirauths, min_ignore_limit:AUTH_LOGICAL_MIN, max_ignore_limit:AUTH_LOGICAL_MAX },
-	      { title: "Fallback Directories Running, Past 30 Days", data_slice: 720, div: "fallbackdirs_3", 
-	        data_func: _getRunningDataValue, authorities: dirauths, min_ignore_limit:AUTH_LOGICAL_MIN, max_ignore_limit:AUTH_LOGICAL_MAX },
-	      { title: "Fallback Directories Running, Past 90 Days", data_slice: 2160, div: "fallbackdirs_4", 
-	        data_func: _getRunningDataValue, authorities: dirauths, min_ignore_limit:AUTH_LOGICAL_MIN, max_ignore_limit:AUTH_LOGICAL_MAX },
-	    ];
+		var FALLBACK_GRAPHS_TO_GENERATE = [
+			{ title: "Fallback Directories Running, Past 7 Days", data_slice: 168, div: "fallbackdirs_1", 
+				data_func: null, authorities: dirauths, min_ignore_limit:null, max_ignore_limit:null },
+			{ title: "Fallback Directories Running, Past 14 Days", data_slice: 336, div: "fallbackdirs_2", 
+				data_func: null, authorities: dirauths, min_ignore_limit:null, max_ignore_limit:null },
+			{ title: "Fallback Directories Running, Past 30 Days", data_slice: 720, div: "fallbackdirs_3", 
+				data_func: null, authorities: dirauths, min_ignore_limit:null, max_ignore_limit:null },
+			{ title: "Fallback Directories Running, Past 90 Days", data_slice: 2160, div: "fallbackdirs_4", 
+				data_func: null, authorities: dirauths, min_ignore_limit:null, max_ignore_limit:null },
+		];
+
+		var BWAUTH_GRAPHS_TO_GENERATE = [
+			{ title: "Bandwidth Auth Statistics, Past 7 Days", data_slice: 168, div: "bwauths_stats_1", 
+				data_func: null, authorities: bwauths, min_ignore_limit:null, max_ignore_limit:null },
+			{ title: "Bandwidth Auth Statistics, Past 14 Days", data_slice: 336, div: "bwauths_stats_2", 
+				data_func: null, authorities: bwauths, min_ignore_limit:null, max_ignore_limit:null },
+			{ title: "Bandwidth Auth Statistics, Past 30 Days", data_slice: 720, div: "bwauths_stats_3", 
+				data_func: null, authorities: bwauths, min_ignore_limit:null, max_ignore_limit:null },
+			{ title: "Bandwidth Auth Statistics, Past 90 Days", data_slice: 2160, div: "bwauths_stats_4", 
+				data_func: null, authorities: bwauths, min_ignore_limit:null, max_ignore_limit:null },
+		];
 
 	    relays_done = false;
 	    fallbackdirs_done = ignore_fallback_dirs;
+	    bwauth_done = false;
 		fetch("vote-stats.csv").then(function(response) {
 			return response.text();
 		}).then(function(text) {
@@ -485,7 +539,7 @@ class GraphWriter(WebsiteWriter):
 		}
 
 		relays_done = true;
-		if(fallbackdirs_done) {
+		if(fallbackdirs_done && bwauth_done) {
 			var toShow = document.getElementsByClassName('graphbox');
 			for(i=0; i<toShow.length; i++) {
 				toShow[i].style.display = 'block';
@@ -498,6 +552,132 @@ class GraphWriter(WebsiteWriter):
 
 		});
 
+		// ===========================================================================================
+		// ===========================================================================================
+
+		fetch("bwauth-stats.csv").then(function(response) {
+			return response.text();
+		}).then(function(text) {
+			return d3.csvParse(text, function(d) {
+				for(i in d) {
+					if(i == "date")
+						d[i] = new Date(Number(d[i]));
+					else
+						d[i] = Number(d[i]);
+				}
+				return d;
+			});
+		}).then(function(data) {
+			for(g in BWAUTH_GRAPHS_TO_GENERATE)
+			{
+				graph = BWAUTH_GRAPHS_TO_GENERATE[g];
+
+				var key_to_color = function(k) { 
+					if(k.includes("_above"))
+						return "steelblue";
+					else if(k.includes("_shared"))
+						return "purple";
+					else if(k.includes("_exclusive"))
+						return "green";
+					else if(k.includes("_below"))
+						return "orange";
+					else
+						return "blue";
+				};
+
+				if(graph.data_slice+1 > data.length) {
+					data_subset = data.slice(0);
+					console.log("("+graph.title+") Requested " + (graph.data_slice+1) + " but there are only " + data.length + " items...");
+				}
+				else
+					data_subset = data.slice(0, graph.data_slice);
+				data_subset.reverse();
+
+				for(a in graph.authorities)
+				{
+					a = graph.authorities[a];
+
+					max = 0;
+					for(d in data_subset)
+					{
+						x = data_subset[d][a + "_above"] +
+							data_subset[d][a + "_shared"] +
+							data_subset[d][a + "_exclusive"] +
+							data_subset[d][a + "_below"] +
+							data_subset[d][a + "_unmeasured"];
+						if(x > max)
+							max = x;
+					}
+
+					var x = d3.scaleTime()
+						.domain([data_subset[0].date, data_subset[data_subset.length-1].date])
+						.range([0, BWAUTH_WIDTH]);
+
+					var y = d3.scaleLinear()
+						.domain([0, max])
+						.range([BWAUTH_HEIGHT, 0]);
+
+					var stack = d3.stack()
+						.keys([a + "_unmeasured", a + "_below", a + "_exclusive", a + "_shared", a + "_above"])
+						.order(d3.stackOrderNone)
+						.offset(d3.stackOffsetNone);
+
+					var area = d3.area()
+						.x(function(d, i) { return x(d.data.date); })
+						.y0(function(d) { return y(d[0]); })
+						.y1(function(d) { return y(d[1]); });
+
+					var svg = d3.select("#" + graph.div).append("svg")
+						.attr("width", BWAUTH_WIDTH + BWAUTH_MARGIN.left + BWAUTH_MARGIN.right)
+						.attr("height", BWAUTH_HEIGHT + BWAUTH_MARGIN.top + BWAUTH_MARGIN.bottom)
+						.append("g")
+						.attr("transform", "translate(" + BWAUTH_MARGIN.left + "," + BWAUTH_MARGIN.top + ")");
+
+					var layer = svg.selectAll(".layer")
+						.data(stack(data_subset))
+						.enter().append("g")
+						//.attr("class", "layer");
+
+					layer.append("path")
+						//.attr("class", "area")
+						.attr("class", function(d) { return key_to_color(d.key); })
+						.attr("d", area);
+
+					svg.append("g")
+						.attr("class", "axis axis--x")
+						.attr("transform", "translate(0," + BWAUTH_HEIGHT + ")")
+						.call(d3.axisBottom().scale(x));
+
+					svg.append("g")
+						.attr("class", "axis axis--y")
+						.call(d3.axisLeft().scale(y));
+
+					svg.append("text")
+						.attr("x", (BWAUTH_WIDTH / 2))
+						.attr("y", 5 - (BWAUTH_MARGIN.top / 2))
+						.attr("text-anchor", "middle")
+						.attr("class", "bwauth-graph-title")
+						.text(a);
+					}
+				}
+
+
+				bwauth_done = true;
+				if(relays_done && fallbackdirs_done) {
+					var toShow = document.getElementsByClassName('graphbox');
+					for(i=0; i<toShow.length; i++) {
+						toShow[i].style.display = 'block';
+					}
+					var toHide = document.getElementsByClassName('graphplaceholder');
+					for(i=0; i<toHide.length; i++) {
+						toHide[i].style.display = 'none';
+					}
+				}
+		});
+
+		// ===========================================================================================
+		// ===========================================================================================
+
 		if(!ignore_fallback_dirs) {
 
 			fetch("fallback-dir-stats.csv").then(function(response) {
@@ -619,7 +799,7 @@ class GraphWriter(WebsiteWriter):
 
 				
 				fallbackdirs_done = true;
-				if(relays_done) {
+				if(relays_done && bwauth_done) {
 					var toShow = document.getElementsByClassName('graphbox');
 					for(i=0; i<toShow.length; i++) {
 						toShow[i].style.display = 'block';



More information about the tor-commits mailing list