diff options
| -rw-r--r-- | hyperkitty/static/js/hyperkitty.js | 63 | ||||
| -rw-r--r-- | hyperkitty/templates/recent_activities.html | 64 |
2 files changed, 70 insertions, 57 deletions
diff --git a/hyperkitty/static/js/hyperkitty.js b/hyperkitty/static/js/hyperkitty.js index fdafd26..c709bce 100644 --- a/hyperkitty/static/js/hyperkitty.js +++ b/hyperkitty/static/js/hyperkitty.js @@ -82,6 +82,69 @@ function setup_add_tag() { } +/* + * Recent activity graph + */ + +function activity_graph(dates, data, baseurl) { + var w = 500, + h = 300, + x = pv.Scale.ordinal(pv.range(32)).splitBanded(0, w, 4/5), + y = pv.Scale.linear(0, Math.max.apply(null, data)+1).range(0, h); + + var vis = new pv.Panel() + .width(w) + .height(250) + .bottom(60) + .left(30) + .right(5) + .top(5); + + var bar = vis.add(pv.Bar) + .data(data) + .event("click", function(n) self.location = baseurl + dates[this.index] + "/") + .left(function() x(this.index)) + .width(x.range().band) + .bottom(0) + .height(y); + + bar.anchor("bottom").add(pv.Label) + .textMargin(5) + .textAlign("right") + .textBaseline("middle") + .textAngle(-Math.PI / 3) + .text(function() xlabel(this.index)); + + function xlabel(ind) { + if (!dates[ind -1]) { + return dates[ind]; + } + prev = dates[ind - 1]; + cur = dates[ind]; + if (prev.substring(0,7) == cur.substring(0,7)) { + cur = cur.substring(8); + } + return cur; + } + + vis.add(pv.Rule) + .data(y.ticks()) + .bottom(function(d) Math.round(y(d)) - .5) + .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000") + .add(pv.Rule) + .left(0) + .width(5) + .strokeStyle("#000") + .anchor("left").add(pv.Label) + .text(function(d) d.toFixed(1)); + + vis.render(); +} + + +/* + * Misc. + */ function setup_attachments() { $("ul.email_info li.attachments ul.attachments-list").hide(); diff --git a/hyperkitty/templates/recent_activities.html b/hyperkitty/templates/recent_activities.html index c982182..cec9952 100644 --- a/hyperkitty/templates/recent_activities.html +++ b/hyperkitty/templates/recent_activities.html @@ -10,70 +10,20 @@ {% block content %} <section id="recent_activities"> + <section id="graph"> <h2>Activities on the list over the last 30 days</h2> <div id="fig"> <script type="text/javascript+protovis" > - - var dates = ["{{dates_string|join:'","'}}"]; - - var data = {{evolution}}, - w = 500, - h = 300, - x = pv.Scale.ordinal(pv.range(32)).splitBanded(0, w, 4/5), - y = pv.Scale.linear(0, Math.max.apply(null, data)+1).range(0, h); - - var vis = new pv.Panel() - .width(w) - .height(250) - .bottom(60) - .left(30) - .right(5) - .top(5); - - var bar = vis.add(pv.Bar) - .data(data) - .event("click", function(n) self.location = "{% url archives mlist_fqdn=list_address %}" + dates[this.index] + "/") - .left(function() x(this.index)) - .width(x.range().band) - .bottom(0) - .height(y); - - bar.anchor("bottom").add(pv.Label) - .textMargin(5) - .textAlign("right") - .textBaseline("middle") - .textAngle(-Math.PI / 3) - .text(function() xlabel(this.index)); - - function xlabel(ind){ - if (!dates[ind -1]){ - return dates[ind]; - } - prev = dates[ind - 1]; - cur = dates[ind]; - if (prev.substring(0,7) == cur.substring(0,7)){ - cur = cur.substring(8); - } - return cur; - } - - vis.add(pv.Rule) - .data(y.ticks()) - .bottom(function(d) Math.round(y(d)) - .5) - .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000") - .add(pv.Rule) - .left(0) - .width(5) - .strokeStyle("#000") - .anchor("left").add(pv.Label) - .text(function(d) d.toFixed(1)); - - vis.render(); - + activity_graph( + ["{{dates_string|join:'","'}}"], + {{evolution}}, + "{% url archives mlist_fqdn=list_address %}" + ); </script> </div> </section> + <section id="most_active"> <h2>Recently active discussions</h2> {% for thread in most_active_threads %} |