New version of /reports main page.

This is a much broader summary page, plus a body name autocomplete.
This was originally implemented for fixmystreet.com in 8a6a4ccb7.

It also adds '(no longer exists)' in the autocomplete next to
bodies not covering any areas.

You can supply the `--table` argument to `update-all-reports` to
generate the old-style data.

1 files changed, 142 insertions, 0 deletions

diff --git a/web/js/dashboard.js b/web/js/dashboard.js
new file mode 100644
index 000000000..f436b8d18
--- /dev/null
+++ b/web/js/dashboard.js
@@ -0,0 +1,142 @@
+$(function(){
+
+    Chart.defaults.global.defaultFontSize = 16;
+
+    var setUpLabelsForChart = function(chart){
+        var $parent = $(chart.chart.canvas).parent();
+        var xGutterInPixels = 30;
+
+        var lasty = 0;
+        $.each(chart.config.data.datasets, function(datasetIndex, dataset){
+            var $label = $('.label[data-datasetIndex="' + datasetIndex + '"]', $parent);
+            var latestPoint = chart.getDatasetMeta(datasetIndex).data[ dataset.data.length - 1 ];
+            var y = latestPoint._model.y;
+            if (y < lasty) {
+                y = lasty;
+            }
+            $label.css({
+                top: y,
+                left: latestPoint._model.x + xGutterInPixels
+            });
+            lasty = y + $label.height() + 8;
+        });
+    };
+
+    // Returns an array `numberOfPoints` long, where the final item
+    // is `radius`, and all the other items are 0.
+    var pointRadiusFinalDot = function(numberOfPoints, radius){
+        var pointRadius = [];
+        for (var i=1; i < numberOfPoints; i++) {
+            pointRadius.push(0);
+        }
+        pointRadius.push(radius);
+        return pointRadius;
+    };
+
+    var makeSparkline = function makeSparkline($el, valuesStr, color, title){
+        var values = [];
+        var labels = [];
+        $.each(valuesStr.split(' '), function(key, value){
+            values.push(Number(value));
+            labels.push('');
+        });
+        var spread = Math.max.apply(null, values) - Math.min.apply(null, values);
+
+        return new Chart($el, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: values,
+                    pointRadius: pointRadiusFinalDot(values.length, 4),
+                    pointBackgroundColor: color,
+                    borderColor: color,
+                    lineTension: 0
+                }]
+            },
+            options: {
+                layout: {
+                    padding: {
+                        top: 0,
+                        right: 5,
+                        bottom: 0,
+                        left: 2
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                        type: "category",
+                        display: false
+                    }],
+                    yAxes: [{
+                        type: "linear",
+                        display: false,
+                        ticks: {
+                            min: Math.min.apply(null, values) - (spread * 0.3),
+                            max: Math.max.apply(null, values) + (spread * 0.3)
+                        }
+                    }]
+                }
+            }
+        });
+    };
+
+    $('.labelled-sparkline canvas').each(function(){
+        makeSparkline(
+            $(this),
+            $(this).data('values'),
+            $(this).data('color')
+        );
+    });
+
+    var $allReports = $('#chart-all-reports'),
+        labels = $allReports.data('labels'),
+        data0 = $allReports.data('values-reports'),
+        data1 = $allReports.data('values-fixed');
+    window.chartAllReports = new Chart($allReports, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [{
+                data: data0,
+                pointRadius: pointRadiusFinalDot(data0.length, 4),
+                pointBackgroundColor: '#F4A140',
+                borderColor: '#F4A140'
+            }, {
+                data: data1,
+                pointRadius: pointRadiusFinalDot(data1.length, 4),
+                pointBackgroundColor: '#62B356',
+                borderColor: '#62B356'
+            }]
+        },
+        options: {
+            animation: {
+                onComplete: function(){
+                    setUpLabelsForChart(this);
+                }
+            },
+            layout: {
+                padding: {
+                    top: 4
+                }
+            },
+            scales: {
+                xAxes: [{
+                    type: 'category',
+                    gridLines: {
+                        display: false
+                    }
+                }],
+                yAxes: [{
+                    type: "linear",
+                    ticks: {
+                        display: false
+                    }
+                }]
+            },
+            onResize: function(chart, size){
+                setUpLabelsForChart(chart);
+            }
+        }
+    });
+});