altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 2 Packages Projects Releases Wiki Activity

Show IDs that expired with a fading gradient and don't extend their box after

Browse source 
185 days. Plus a bunch of cosmetic changes.
 - Legacy-Id: 10605
This commit is contained in:
Lars Eggert 2015-12-16 16:49:57 +00:00
parent 3763c4980c
commit 5cd86a5d40
2 changed files with 55 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ietf/static/ietf/css/ietf.css
View file

@ -204,18 +204,6 @@ pre {
word-break: keep-all;
}
/* Make ampersands pretty */
/* This sets ampersand in a different font than the rest of the text. Fancy, but it's
really better to select a pretty font in the first place. Additionally, _which_ 'pretty'
ampersand you get is dependent on which fonts are available in the browser. Hacky. */
/*
.amp {
font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
font-size:110%;
font-style:italic;
}
*/
/* Turn off link underlining for panels in the search results */
.ipr a:hover { text-decoration: none }
@ -447,11 +435,11 @@ form.navbar-form input.form-control.input-sm { width: 141px; }
}
/* like label-success */
#timeline .bar:nth-child(odd) rect { fill: #5CB85C; }
#timeline .bar:nth-child(odd) rect { fill: #3abf03; }
#timeline .bar:nth-child(odd) rect:hover,
#timeline .bar:nth-child(odd) rect:focus { fill: #2b8d02; }
/* like label-primary */
#timeline .bar:nth-child(even) rect { fill: #337AB7; }
/* like label-warning */
#timeline .gradient.left { stop-color: #F0AD4E; }
#timeline .gradient.right { stop-color: white; }
#timeline .bar:nth-child(even) rect { fill: #54478e; }
#timeline .bar:nth-child(even) rect:hover,
#timeline .bar:nth-child(even) rect:focus { fill: #40366c; }

71
ietf/static/ietf/js/document_timeline.js
View file

@ -7,7 +7,7 @@ var bar_height;
var y_label_width;
var x_axis;
var width;
var now;
function expiration_date(d) {
return new Date(d.published.getTime() + 1000 * 60 * 60 * 24 * 185);
@ -31,12 +31,14 @@ function offset(d) {
function bar_width(d, i) {
// check for next rev of this name
// check for next rev of this name, or published RFC
for (i++; i < data.length; i++) {
if (data[i].name === d.name) { break; }
if (data[i].name === d.name || data[i].name.match(/^rfc/)) { break; }
}
var w = i === data.length ? expiration_date(d) : data[i].published;
// don't extend the bar past the expiration date of the document
w = w > expiration_date(d) ? expiration_date(d) : w;
return x_scale(w) - x_scale(d.published);
}
@ -50,11 +52,15 @@ function scale_x() {
d3.max(data, function(d) { return d.published; })
]).range([y_label_width, width]);
// if the end of the timeline is past the current date, show it
var tv = data.slice(0, -1);
now = Date.now();
if (tv[tv.length - 1].published > now) { tv.push(new Date(now)); }
// resort data by publication time to suppress some ticks if they are closer
// than 12px, and don't add a tick for the final pseudo entry
var tv = data
.slice(0, -1)
.sort(function(a, b) { return a.published - b.published; })
tv = tv.sort(function(a, b) { return a.published - b.published; })
.map(function(d, i, arr) {
if (i === 0 ||
x_scale(d.published) > x_scale(arr[i - 1].published) + 12) {
@ -65,7 +71,10 @@ function scale_x() {
x_axis = d3.svg.axis()
.scale(x_scale)
.tickValues(tv)
.tickFormat(d3.time.format("%b %Y"))
.tickFormat(function(d) {
if (d.getTime() < now) { return d3.time.format("%b %Y")(d); }
return "Now";
})
.orient("bottom");
}
@ -94,24 +103,38 @@ function draw_timeline() {
var div = $("#timeline");
if (div.is(":empty")) {
div.append("<svg></svg>");
div.append("<svg xmlns:xlink='http://www.w3.org/1999/xlink'></svg>");
}
var chart = d3.select("#timeline svg").attr("width", width);
var gradient = chart.append("defs")
.append("linearGradient")
.attr("id", "gradient");
gradient.append("stop")
var defs = chart.append("defs");
var fade = defs.append("linearGradient")
.attr("id", "maskGradient");
fade.append("stop")
.attr({
class: "gradient left",
offset: 0
offset: 0.9,
"stop-color": "white",
"stop-opacity": 1
});
gradient.append("stop")
fade.append("stop")
.attr({
class: "gradient right",
offset: 1
offset: 1,
"stop-color": "white",
"stop-opacity": 0
});
defs.append("mask")
.attr({
id: "fade",
maskContentUnits: "objectBoundingBox"
})
.append("rect")
.attr({
height: 1,
width: 1,
fill: "url(#maskGradient)"
});
var y_labels = data
.map(function(d) { return d.name; })
.filter(function(val, i, self) { return self.indexOf(val) === i; });
@ -156,8 +179,16 @@ function draw_timeline() {
.append("rect")
.attr({
height: bar_height,
width: bar_width
width: bar_width,
mask: function(d, i) {
// apply gradient it the document expired
if (bar_width(d, i) >= x_scale(expiration_date(d)) -
x_scale(d.published)) {
return "url(#fade)";
}
}
});
g.append("text")
.attr({
x: 3,
@ -165,10 +196,6 @@ function draw_timeline() {
})
.text(function(d) { return d.rev; });
// since the gradient is defined inside the SVG, we need to set the CSS
// style here, so the relative URL works
$("#timeline .bar:last-child rect").css("fill", "url(#gradient)");
var y_scale = d3.scale.ordinal()
.domain(y_labels)
.rangePoints([0, max(bar_y) + bar_height]);