Beginnings of graphical document timelines using d3.js

- Legacy-Id: 10546

ietf/bower.json

@@ -5,6 +5,7 @@
   "main": [],
   "dependencies": {
     "bootstrap-datepicker": "1.5.0",
+    "d3": "3.5.10",
     "font-awesome": "4.5.0",
     "html5shiv": "3.7.3",
     "jquery": "1.11.3",

ietf/templates/doc/document_draft.html

@@ -13,6 +13,20 @@
   .inline	{ display: inline; }
 {% endblock %}
 
+{% block js %}
+<script>
+$(window).on({
+    resize: function (event) {
+    	draw_timeline();
+    },
+    load: function (event) {
+        draw_timeline();
+    }
+});
+</script>
+{% endblock %}
+
+
 {% block title %}
   {% if doc.get_state_slug == "rfc" %}
     RFC {{ rfc_number }}
@@ -26,6 +40,7 @@
   {{ top|safe }}
 
   {% include "doc/revisions_list.html" %}
+  {% include "doc/timeline.html" %}
 
   <table class="table table-condensed">
     <thead id="message-row">
@@ -34,7 +49,7 @@
 	  <th colspan="4" class="alert-warning">The information below is for an old version of the document</th>
 	  {% else %}
 	  <th colspan="4"></th>
-	  {% endif %}  
+	  {% endif %}
        </tr>
     </thead>
 

ietf/templates/doc/timeline.html

@@ -0,0 +1,110 @@
+{% load staticfiles %}
+<script src="{% static 'd3/d3.min.js' %}"></script>
+
+<style>
+#timeline { width: 100%; }
+#timeline text { fill: white; }
+#timeline > :nth-child(odd)  { fill: steelblue; }
+#timeline > :nth-child(even)  { fill: red; }
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: black;
+}
+
+#timeline .axis text {
+  fill: black;
+  font-size: small;
+}
+</style>
+
+<svg id="timeline"></svg>
+
+<script>
+
+var data = [
+  {% for r in rev_history %}
+    {% if forloop.first %}
+      { name: '{{ r.2 }}'.substring(0, 4), rev: '', time: new Date('{{ r.2 }}'.substring(0, 4))},
+    {% endif %}
+    { name: '{{r.0}}', rev: '{{r.1}}', time: new Date('{{ r.2 }}')},
+    {% if forloop.last %}
+      { name: (parseInt('{{ r.2 }}'.substring(0, 4)) + 1).toString(), rev: '', time: new Date((parseInt('{{ r.2 }}'.substring(0, 4)) + 1).toString())},
+    {% endif %}
+  {% endfor %}
+];
+
+var x;
+var y;
+var bar_height;
+
+
+function offset(d, i) {
+  if (i > 1 && data[i - 1].name !== d.name || d.rev.match("rfc"))
+    y += bar_height;
+  return "translate(" + x(d.time) + ", " + y + ")";
+}
+
+
+function bar_width(d, i) {
+  if (i > 0 && i < data.length - 1)
+    return x(data[i + 1].time) - x(d.time);
+}
+
+
+function draw_timeline() {
+  var w = $("#timeline").width();
+  bar_height = parseFloat($("body").css('line-height'));
+
+  x = d3.time.scale().domain([
+    d3.min(data, function(d) { return d.time; }),
+    d3.max(data, function(d) { return d.time; })
+  ]).range([0, w]);
+
+  y = 0;
+  var chart = d3.select("#timeline");
+  var bar = chart.selectAll("g").data(data);
+
+  // update
+  bar
+    .attr("transform", offset)
+    .select("rect")
+      .attr("width", bar_width);
+
+  // enter
+  var g = bar.enter()
+    .append("g")
+      .attr("transform", offset);
+  g.append("rect")
+    .attr({
+      height: bar_height,
+      width: bar_width
+    });
+  g.append("text")
+    .attr("y", bar_height/2)
+    .text(function (d) { return d.rev; });
+
+  // exit
+  bar.exit().remove();
+
+  chart.attr("height", y + 3*bar_height);
+
+  var axis = d3.svg.axis()
+    .scale(x)
+    .tickValues(data.slice(1, -1).map(function(d) { return d.time; }))
+    .tickFormat(d3.time.format("%b %Y"))
+    .orient("bottom");
+
+  chart.append("g")
+    .attr("class", "x axis")
+    .attr("transform", "translate(0, " + y + ")")
+    .call(axis)
+    .selectAll("text")
+    .style("text-anchor", "end")
+    .attr("transform", "translate(-13, 10) rotate(-90)");
+}
+
+</script>
+
+