From f331d4c6443aa6086ffde133474fc02c255aeebe Mon Sep 17 00:00:00 2001 From: Máirín Duffy Date: Tue, 24 Sep 2013 17:20:42 -0400 Subject: Update database.rst i kept trying to import the .gz mbox files, and i was going crazy, then on a whim i tried the .txt ones and that worked! --- doc/database.rst | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/doc/database.rst b/doc/database.rst index c71162f..ade71f9 100644 --- a/doc/database.rst +++ b/doc/database.rst @@ -61,7 +61,8 @@ where: ``django-admin`` command) * ``NAME`` is the fully-qualified list name (including the ``@`` sign and the domain name) -* The ``mbox_file`` arguments are the existing archives to import. +* The ``mbox_file`` arguments are the existing archives to import. Make sure you point +at the *.txt version of the files and not the *.gz. If the previous archives aren't available locally, you need to download them from your current Mailman 2.1 installation. The ``kittystore-download21`` -- cgit From f41a36329282ebecffb44cdbf1706b4cd9979185 Mon Sep 17 00:00:00 2001 From: Máirín Duffy Date: Thu, 26 Sep 2013 15:05:31 -0400 Subject: Redesign of the list overview page, including extensive modification of the graph and a lot of CSS tweaks (no extra breadcrumb) --- .../static/hyperkitty/css/hyperkitty-overview.css | 177 ++++++++++++++++-- .../hyperkitty/css/hyperkitty-threadslist.css | 1 - .../static/hyperkitty/js/hyperkitty-overview.js | 200 +++++++++++++++++++-- hyperkitty/templates/overview.html | 140 ++++++++------- hyperkitty/templates/threads/summary_thread.html | 10 +- 5 files changed, 431 insertions(+), 97 deletions(-) diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css b/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css index a54c281..cc00b5f 100644 --- a/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css +++ b/hyperkitty/static/hyperkitty/css/hyperkitty-overview.css @@ -1,53 +1,69 @@ /* Summary page */ #overview h2 { - font-size: 22px; + margin-top: 0px; + font-size: 28px; line-height: 32px; margin-bottom: 0.5em; - text-align: center; +} + +#overview h2 #breadcrumb { + font-weight: normal; + font-size: 12px; } #overview h3 { - font-size: 20px; + font-size: 14px; line-height: 28px; margin-bottom: 0.5em; margin-top: 0; - text-align: center; } -#graph h2 { - text-align: center; -} -#graph rect { +#chart-data rect { cursor: pointer; } -#fig { +#fig, #chart-data { position: relative; margin: auto; - width: 540px; - height: 300px; + font-size: 8pt; + font-family: "Droid Sans", sans-serf; + font-color: #777; } -#fig .axis path, #fig .axis line { + +#fig .axis path, #fig .axis line, +#chart-data .axis path, #chart-data .axis line { +/* fill: none; - stroke: #000; + stroke: #bbb; shape-rendering: geometricPrecision; +*/ + display: none; } -#fig .area { +#fig .area, +#chart-data .bars rect { fill: steelBlue; } -#overview .list-stats { - text-align: center; -} -#overview p.thread-new { - text-align: center; +/* Next 2 blocks for grid lines */ + +/* +#fig .grid .tick, +#chart-data .grid .tick { + stroke: lightgrey; + opacity: 0.3; } +#fig .grid path, +#chart-data .grid path { + stroke-width: 0; +} +*/ +/* #overview .widget { padding: 1em; border: 1px solid #ddd; @@ -56,6 +72,7 @@ border-radius: 10px; margin: 1em 0; } +*/ #overview .thread { margin: 1.5em 0 0 0; @@ -140,3 +157,125 @@ #discussion-by-category .thread .category { display: none; } + + +section#title h2 { + + margin-bottom: 0px; +} + + +section#title #description { + font-size: 12pt; + font-weight: normal; +} + +section#title svg { + padding-top: 3px; + border: 1px solid #bbb; +} + +section#title #chart { + margin-top: 2em; +} + +section#title p.thread-new { + text-align: left; + margin-top: 1em; +} + +section#statistics { + color: #555; +} + +section#statistics .caption { + font-size: x-small; + color: #aaa; + margin-top: -.5%; + margin-left: .25em; + margin-bottom: 0px; +} + +section#statistics ul { + list-style-type: none; + margin-left: 0px; +} + +section#statistics li { + font-size: small; +} + +section#statistics h3 { + margin-bottom: .5em; + margin-top: 3em; +} + +#overview h3 { + color: #999; + text-transform: uppercase; + font-size: small; + font-weight: normal; +} + + +#title { + float: left; + width: 23%; + min-width: 20%; + margin-right: 2%; +} + +#discussions { + margin-top: 3em; + padding-left: 1%; + float: right; + width: 74%; +} + +/* this needs to be integrated into hyperkitty-threadslist.css eventually */ +div.thread { + border: 1px solid #e5e5e5; + padding: 1%; + margin: .5% !important; +} + +.thread { + min-height: 1.2em; +} + +.widget { + clear: both; + margin-bottom: 2em; +} + +.thread ul.inline-block { + width: 28%; +} + +.thread ul.inline-block li, +.thread ul.inline-block span { + text-align: left; + min-width: 6.5%; +} + +.thread-title { + width: 68%; + float: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 2%; +} + + +.maker-name, .maker-id { + font-size: small; +} + +.maker-id { + color: #aaa; +} + +.thread-id { + float: left; +} diff --git a/hyperkitty/static/hyperkitty/css/hyperkitty-threadslist.css b/hyperkitty/static/hyperkitty/css/hyperkitty-threadslist.css index a2e49ad..629442b 100644 --- a/hyperkitty/static/hyperkitty/css/hyperkitty-threadslist.css +++ b/hyperkitty/static/hyperkitty/css/hyperkitty-threadslist.css @@ -53,7 +53,6 @@ .thread-title { font-weight: bold; - font-size: 125%; } .thread-date { diff --git a/hyperkitty/static/hyperkitty/js/hyperkitty-overview.js b/hyperkitty/static/hyperkitty/js/hyperkitty-overview.js index bf88118..e020554 100644 --- a/hyperkitty/static/hyperkitty/js/hyperkitty-overview.js +++ b/hyperkitty/static/hyperkitty/js/hyperkitty-overview.js @@ -21,8 +21,9 @@ /* - * Recent activity graph + * Recent activity graph (area graph) */ + function activity_graph(elem_id, dates, counts, baseurl) { function merge(dates, counts) { result = [] @@ -34,13 +35,30 @@ function activity_graph(elem_id, dates, counts, baseurl) { } return result; } + + /* Function for grid lines, for x-axis */ + function make_x_axis() { + return d3.svg.axis() + .scale(x) + .orient("bottom") + .ticks(d3.time.days, 1) + } + + /* Function for grid lines, for y-axis */ + function make_y_axis() { + return d3.svg.axis() + .scale(y) + .orient("left") + .ticks(5) + } + var data = merge(dates, counts); - var margin = {top: 20, right: 20, bottom: 100, left: 50}, - width = 540 - margin.left - margin.right, - height = 330 - margin.top - margin.bottom; + var margin = {top: 20, right: 20, bottom: 50, left: 40}, + width = 350 - margin.left - margin.right, + height = 150 - margin.top - margin.bottom; var format_in = d3.time.format("%Y-%m-%d"); - var format_out = d3.time.format("%m-%d"); + var format_out = d3.time.format(""); var x = d3.time.scale() .range([0, width]); @@ -51,16 +69,19 @@ function activity_graph(elem_id, dates, counts, baseurl) { var xAxis = d3.svg.axis() .scale(x) .orient("bottom") + .tickSize(2,2) .tickFormat(format_out) - .ticks(d3.time.days, 2); - + .ticks(d3.time.days, 1); + var yAxis = d3.svg.axis() .scale(y) .orient("left") - .ticks(5) + .tickSize(4,3) + .ticks(2) .tickSubdivide(1); var area = d3.svg.area() + .interpolate("monotone") .x(function(d) { return x(d.date); }) .y0(height) .y1(function(d) { return y(d.count); }); @@ -78,6 +99,23 @@ function activity_graph(elem_id, dates, counts, baseurl) { x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return d.count; })]); + + /* Draw the grid lines, for x-axis */ + svg.append("g") + .attr("class", "grid") + .attr("Transform", "translate(0, " + height + ")") + .call(make_x_axis() + .tickSize(height, 0, 0) + .tickFormat("") + ) + + /* Draw the grid lines, for y-axis */ + svg.append("g") + .attr("class", "grid") + .call(make_y_axis() + .tickSize(-width, 0, 0) + .tickFormat("") + ) svg.append("path") .datum(data) @@ -95,13 +133,153 @@ function activity_graph(elem_id, dates, counts, baseurl) { return "rotate(-90)" }); + /* Y-axis label */ svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") - .attr("y", 6) - .attr("dy", ".71em") - .style("text-anchor", "end") + .attr("y", 0) + .attr("x", 0 - height/2) + .attr("dy", "-3em") + .style("text-anchor", "middle") + .style("fill", "#777") .text("Messages"); + +} + + +/* + * Recent activity bar chart + */ +function chart(elem_id, dates, counts, baseurl) { + function merge(dates, counts) { + result = [] + for(i = 0; i < dates.length; i++) { + result.push({ + "date": dates[i], + "count": counts[i] + }) + } + return result; + } + + /* Function for grid lines, for x-axis */ + function make_x_axis() { + return d3.svg.axis() + .scale(x) + .orient("bottom") + .ticks(d3.time.days, 1) + } + + /* Function for grid lines, for y-axis */ + function make_y_axis() { + return d3.svg.axis() + .scale(y) + .orient("left") + .ticks(5) + } + + var data = merge(dates, counts); + var margin = {top: 0, right: 0, bottom: 0, left: 0}, + width = 200 - margin.left - margin.right, + height = 50 - margin.top - margin.bottom; + + var w = 5; + + var format_in = d3.time.format("%Y-%m-%d"); + var format_out = d3.time.format(""); + + var x = d3.time.scale() + .range([0, width]); + + var y = d3.scale.linear() + .range([height, 0]); + + var xAxis = d3.svg.axis() + .scale(x) + .orient("bottom") + .tickSize(0,0) // change to 2,2 for ticks + .tickFormat(format_out) + .ticks(d3.time.days, 1); + + var yAxis = d3.svg.axis() + .scale(y) + .orient("left") + .tickSize(0,0) // change to 4,3 for ticks + .ticks("") // change to 2 for y-axis tick labels + .tickSubdivide(1); + + var area = d3.svg.area() + .x(function(d) { return x(d.date); }) + // .y0(height) + .y(function(d) { return y(d.count); }); + + var svg = d3.select(elem_id).append("svg") + .attr("id", "chart-data") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + data.forEach(function(d) { + d.date = format_in.parse(d.date); + d.count = parseInt(d.count); + }); + + x.domain(d3.extent(data, function(d) { return d.date; })); + y.domain([0, d3.max(data, function(d) { return d.count; })]); + + + /* Draw the grid lines, for x-axis */ + svg.append("g") + .attr("class", "grid") + .attr("Transform", "translate(0, " + height + ")") + .call(make_x_axis() + .tickSize(height, 0, 0) + .tickFormat("") + ) + + /* Draw the grid lines, for y-axis */ + svg.append("g") + .attr("class", "grid") + .call(make_y_axis() + .tickSize(-width, 0, 0) + .tickFormat("") + ) + + svg.append("g").attr("class","bars").selectAll("rect") + .data(data) + .enter().append("rect") + .attr("x", function(d) { return x(d.date); }) + //.attr("y0", height) + .attr("y", function(d) { return y(d.count); }) + .attr("width", w) + .attr("height", function(d) { return height - y(d.count); }); + + /* draw x-axis */ + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + /*.selectAll("text") + .attr("y", -5) + .attr("x", -30) + .attr("transform", function(d) { + return "rotate(-90)" + });*/ + + /* Y-axis label */ + svg.append("g") + .attr("class", "y axis") + .call(yAxis) + /*.append("text") + .attr("transform", "rotate(-90)") + .attr("y", 0) + .attr("x", 0 - height/2) + .attr("dy", "-3em") + .style("text-anchor", "middle") + .style("fill", "#777") + .text("Messages"); */ + } diff --git a/hyperkitty/templates/overview.html b/hyperkitty/templates/overview.html index 8d521a6..1b812ac 100644 --- a/hyperkitty/templates/overview.html +++ b/hyperkitty/templates/overview.html @@ -18,66 +18,72 @@ {% include 'threads/month_list.html' %}
- -
-

Activities on the list over the last 30 days

-
    -
  • {{ num_participants }} participants
    • -
  • {{ num_threads }} discussions
    • -
- -
-
- -

- + Start a new thread -

- -
-
- -
-

Recently active discussions

- {% for thread in most_active_threads %} - {% include "threads/summary_thread.html" with counter=forloop.counter %} - {% endfor %} -
- - - -
-

Most active posters

- {% for poster in top_posters %} -
-
- #{{forloop.counter}} -
-
- {% gravatar poster.email 40 %} -
-
-
- {{ poster.name }} -
- {{ poster.count }} posts -
-
- {% endfor %} -
- -
-
- -
+ +
+

{{ mlist.display_name }}

+

{{ mlist.description}}

+ +
+ +
+

Post volume over the past 30 days.

+ +

+ + + Start a new thread +

+ +

Activity Summary

+

The following statistics are from the past 30 days:

+
    +
  • {{ num_participants }} participants
    • +
  • {{ num_threads }} discussions
    • +
+ +
+

Most active posters

+ {% for poster in top_posters %} +
+
+ #{{forloop.counter}} +
+
+ {% gravatar poster.email 40 %} +
+
+
+ {{ poster.name }} +
+ {{ poster.count }} posts +
+
+ {% endfor %} +
+ + +
+
+ +
+ +
+

Recently active discussions

+ {% for thread in most_active_threads %} + {% include "threads/summary_thread.html" %} + {% endfor %} +
+ + + +

Most active discussions

{% for thread in top_threads %} {% include "threads/summary_thread.html" with counter=forloop.counter %} @@ -129,8 +135,7 @@
{% endif %} -
-
+
@@ -141,6 +146,7 @@ {% block additionaljs %} {% endblock %} diff --git a/hyperkitty/templates/threads/summary_thread.html b/hyperkitty/templates/threads/summary_thread.html index 2176936..a6857e5 100644 --- a/hyperkitty/templates/threads/summary_thread.html +++ b/hyperkitty/templates/threads/summary_thread.html @@ -3,13 +3,15 @@ {% load storm %}
- {% if counter %}#{{counter}}{% endif %} - + {% if counter %}#{{counter}}{% endif %} + {{ thread.subject|strip_subject:mlist }} - {% if thread.unread %} + > + {% if thread.unread %} {% endif %} + {{ thread.subject|strip_subject:mlist }}
-- cgit