111 lines
2.4 KiB
HTML
111 lines
2.4 KiB
HTML
{% 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>
|
|
|
|
|