Add a page with experimental statistics on public bodies

The statistics on the status of the requests to a particular
public body are too slow to calculate on-the-fly, so this
commit adds:

 * Extra columns on public_bodies to store counts of
   the successful, not held, and overdue request counts
   for each public body.

 * A rake task which should be run periodically to update
   the overdue request count column.

If Javascript is not available, the summary statistics are
shown as tables.  If Javascript is available, graphs are
drawn with Flot.

2 files changed, 117 insertions, 0 deletions

diff --git a/public/javascripts/stats-graphs.js b/public/javascripts/stats-graphs.js
new file mode 100644
index 000000000..5d3d52152
--- /dev/null
+++ b/public/javascripts/stats-graphs.js
@@ -0,0 +1,82 @@
+/* From http://stackoverflow.com/a/10284006/223092 */
+function zip(arrays) {
+    return arrays[0].map(function(_,i){
+        return arrays.map(function(array){return array[i]})
+    });
+}
+
+$(document).ready(function() {
+    $.each(graphs_data, function(index, graph_data) {
+        var graph_id = graph_data['id'],
+            dataset,
+            plot,
+            graph_data,
+            graph_div = $('#' + graph_id);
+
+        graph_div.css('width', '700px');
+        graph_div.css('height', '400px');
+
+        dataset = [
+            {'color': 'orange',
+             'bars': {
+                 'show': true,
+                 'barWidth': 0.5,
+                 'align': 'center'
+             },
+             'data': zip([graph_data['x_values'],
+                          graph_data['y_values']])
+            }
+        ]
+
+        if (graph_data['errorbars']) {
+            dataset.push({
+                'color': 'orange',
+                'points': {
+                    // Don't show these, just draw error bars:
+                    'radius': 0,
+                    'errorbars': 'y',
+                    'yerr': {
+                        'asymmetric': true,
+                        'show': true,
+                        'upperCap': "-",
+                        'lowerCap': "-",
+                        'radius': 5
+                    }
+                },
+                'data': zip([graph_data['x_values'],
+                             graph_data['y_values'],
+                             graph_data['cis_below'],
+                             graph_data['cis_above']])
+            });
+        }
+
+        options = {
+            'xaxis': {
+                'ticks': graph_data['x_ticks'],
+            },
+            'yaxis': {
+                'min': 0,
+                'max': graph_data['y_max']
+            },
+            'xaxes': [{
+                'axisLabel': graph_data['x_axis'],
+                'axisLabelPadding': 20,
+                'axisLabelColour': 'black'
+            }],
+            'yaxes': [{
+                'axisLabel': graph_data['y_axis'],
+                'axisLabelPadding': 20,
+                'axisLabelColour': 'black'
+            }],
+            'series': {
+		'lines': {
+		    'show': false
+		}
+	    },
+        }
+
+        plot = $.plot(graph_div,
+                      dataset,
+                      options);
+    });
+});
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index 6f6d7b365..21d0735e0 100644
--- a/public/stylesheets/main.css
+++ b/public/stylesheets/main.css
@@ -1742,3 +1742,38 @@ text-decoration:none;
 .big {
   font-size: larger;
 }
+
+.public-body-ranking {
+  margin-bottom: 40px;
+}
+
+.public-body-ranking-title {
+  margin-top: 25px;
+  margin-bottom: 10px;
+}
+
+.public-body-ranking table {
+    margin-top: 20px;
+    margin-left: 30px;
+}
+
+.public-body-ranking td, th {
+    border: 0px;
+    padding: 5px;
+    padding-right: 20px;
+}
+
+.public-body-ranking td.statistic {
+    text-align: center;
+}
+
+.public-body-ranking .axisLabels {
+    /* Justification for using !important hereL the axis label color is
+       set in the style attribute in Flot's Javascript to the same
+       colour as the grid background. Changing this requires quite
+       invasive changes to the Javascript, and is likely to be
+       irrelevant in the next version of Flot anyway, which will have
+       core support for axis labels.  So, just use !important to make
+       the axes black rather than transparent grey for the moment: */
+    color: #000 !important;
+}