fix: Properly display graph

bgpranking/querying.py

@@ -77,10 +77,13 @@ class Querying():
             return descriptions
         return descriptions[sorted(descriptions.keys(), reverse=True)[0]]
 
-    def get_asn_history(self, asn: int, period: int=200, source: str='', ipversion: str='v4'):
+    def get_asn_history(self, asn: int, period: int=100, source: str='', ipversion: str='v4'):
         to_return = []
         today = datetime.date.today()
         for i in range(period):
             date = today - timedelta(days=i)
-            to_return.insert(0, (date.isoformat(), self.asn_rank(asn, date, source, ipversion)))
+            rank = self.asn_rank(asn, date, source, ipversion)
+            if rank is None:
+                rank = 0
+            to_return.insert(0, (date.isoformat(), rank))
         return to_return

website/web/__init__.py

@@ -63,7 +63,6 @@ def asn_details():
 @app.route('/asn_history', methods=['GET', 'POST'])
 def asn_history():
     load_session()
-    print(session.keys())
     session.pop('date')
     q = Querying()
     return json.dumps(q.get_asn_history(**session))

website/web/static/linegraph.js

@@ -1,7 +1,10 @@
+var canvas = document.querySelector("canvas"),
+    context = canvas.getContext("2d");
+
 // set the dimensions and margins of the graph
 var margin = {top: 20, right: 20, bottom: 30, left: 50},
-    width = 960 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom;
+    width = canvas.width - margin.left - margin.right,
+    height = canvas.height - margin.top - margin.bottom;
 
 // parse the date / time
 var parseTime = d3.timeParse("%Y-%m-%d");
@@ -11,45 +14,84 @@ var x = d3.scaleTime().range([0, width]);
 var y = d3.scaleLinear().range([height, 0]);
 
 // define the line
-var valueline = d3.line()
-    .x(function(d) { return x(d[0]); })
-    .y(function(d) { return y(d[1]); });
+var line = d3.line()
+    .x(function(d) { return x(parseTime(d[0])); })
+    .y(function(d) { return y(d[1]); })
+    .curve(d3.curveStep)
+    .context(context);
 
-// append the svg obgect to the body of the page
-// appends a 'group' element to 'svg'
-// moves the 'group' element to the top left margin
-var svg = d3.select("body").append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-  .append("g")
-    .attr("transform",
-          "translate(" + margin.left + "," + margin.top + ")");
-
-function draw(data) {
-
-  var data = data;
-
-  // Scale the range of the data
-  x.domain(d3.extent(data, function(d) { return d[0]; }));
-  y.domain([0, d3.max(data, function(d) { return d[1]; })]);
-
-  // Add the valueline path.
-  svg.append("path")
-      .data([data])
-      .attr("class", "line")
-      .attr("d", valueline);
-  // Add the X Axis
-  svg.append("g")
-      .attr("transform", "translate(0," + height + ")")
-      .call(d3.axisBottom(x));
-
-  // Add the Y Axis
-  svg.append("g")
-      .call(d3.axisLeft(y));
-  }
+context.translate(margin.left, margin.top);
 
 // Get the data
 d3.json("/asn_history", {credentials: 'same-origin'}).then(function(data) {
-  // trigger render
-  draw(data);
+  x.domain(d3.extent(data, function(d) { return parseTime(d[0]); }));
+  y.domain(d3.extent(data, function(d) { return d[1]; }));
+
+  xAxis();
+  yAxis();
+
+  context.beginPath();
+  line(data);
+  context.lineWidth = 1.5;
+  context.strokeStyle = "steelblue";
+  context.stroke();
 });
+
+function xAxis() {
+  var tickCount = 10,
+      tickSize = .1,
+      ticks = x.ticks(tickCount),
+      tickFormat = x.tickFormat();
+
+  context.beginPath();
+  ticks.forEach(function(d) {
+    context.moveTo(x(d), height);
+    context.lineTo(x(d), height + tickSize);
+  });
+  context.strokeStyle = "black";
+  context.stroke();
+
+  context.textAlign = "center";
+  context.textBaseline = "top";
+  ticks.forEach(function(d) {
+    context.fillText(tickFormat(d), x(d), height + tickSize);
+  });
+}
+
+function yAxis() {
+  var tickCount = 20,
+      tickSize = 3,
+      tickPadding = 1,
+      ticks = y.ticks(tickCount),
+      tickFormat = y.tickFormat(tickCount);
+
+  context.beginPath();
+  ticks.forEach(function(d) {
+    context.moveTo(0, y(d));
+    context.lineTo(-6, y(d));
+  });
+  context.strokeStyle = "black";
+  context.stroke();
+
+  context.beginPath();
+  context.moveTo(-tickSize, 0);
+  context.lineTo(0.5, 0);
+  context.lineTo(0.5, height);
+  context.lineTo(-tickSize, height);
+  context.strokeStyle = "black";
+  context.stroke();
+
+  context.textAlign = "right";
+  context.textBaseline = "middle";
+  ticks.forEach(function(d) {
+    context.fillText(tickFormat(d), -tickSize - tickPadding, y(d));
+  });
+
+  context.save();
+  context.rotate(-Math.PI / 2);
+  context.textAlign = "right";
+  context.textBaseline = "top";
+  context.font = "bold 10px sans-serif";
+  context.fillText("Rank", -10, 10);
+  context.restore();
+}

website/web/templates/asn.html

@@ -29,4 +29,5 @@
         </tr>
       {% endfor %}
   </table>
+  <canvas width="960" height="500"></canvas>
 {% endblock %}