[fixmystreet.com] New version of /reports page.

This is a much broader summary page, plus a body name autocomplete.

This uses a cut down version of chart.js. [1]

[1] The full version was 149Kb (41Kb gzipped) plus you needed moment
(50Kb/17Kb), for a total of 199Kb/58Kb. By stripping out unused graphs
and code and config options, and switching to category axis rather than
time, it is now a total of 39Kb/13Kb.

2 files changed, 111 insertions, 31 deletions

diff --git a/templates/web/fixmystreet.com/reports/_extras.html b/templates/web/fixmystreet.com/reports/_extras.html
deleted file mode 100755
index ff9db567f..000000000
--- a/templates/web/fixmystreet.com/reports/_extras.html
+++ /dev/null
@@ -1,31 +0,0 @@
-[%
-    fms_councils = {
-        'Angus Council' = 'fix.angus.gov.uk'
-        'Bromley Council' = 'fix.bromley.gov.uk'
-        'Bristol City Council' = 'fixmystreet.bristol.gov.uk'
-        'East Hertfordshire District Council' = 'fixmystreet.eastherts.gov.uk'
-        'Hart District Council' = 'hart.fixmystreet.com'
-        'Oxfordshire County Council' = 'fixmystreet.oxfordshire.gov.uk'
-        'Stevenage Borough Council' = 'stevenage.fixmystreet.com',
-        'Royal Borough of Greenwich' = 'fix.royalgreenwich.gov.uk'
-        'Warwickshire County Council' = 'warwickshire.fixmystreet.com'
-    }
-    secure = {
-        'fixmystreet.bristol.gov.uk' = 's'
-        'fix.bromley.gov.uk' = 's'
-        'fix.angus.gov.uk' = 's'
-        'fixmystreet.eastherts.gov.uk' = 's'
-    }
-    site = fms_councils.${body.name}
-%]
-[% IF site %]
-<tr align="center"
-[%- IF ! (loop.count % 2) %] class="a"
-[%- END %]>
-<td class="title" colspan="6" style="padding-top:0">
-    <small title="This council's online reporting is powered by FixMyStreet">(includes reports from
-    <a href="http[% secure.$site %]://[% site %]">[% site %]</a> using
-    <a href="/about/council">FixMyStreet Professional</a>)</small>
-</td>
-</tr>
-[% END %]
diff --git a/templates/web/fixmystreet.com/reports/index.html b/templates/web/fixmystreet.com/reports/index.html
new file mode 100755
index 000000000..2e0ba4596
--- /dev/null
+++ b/templates/web/fixmystreet.com/reports/index.html
@@ -0,0 +1,111 @@
+[% USE Number.Format -%]
+[% extra_js = [
+    version('/vendor/chart.min.js'),
+    version('/vendor/accessible-autocomplete.min.js'),
+    version('/cobrands/fixmystreet.com/dashboard.js')
+] -%]
+[%
+    problems_reported = problems_reported_by_period.last | format_number;
+    problems_fixed = problems_fixed_by_period.last | format_number;
+    last_seven_reported = last_seven_days.problems_total | format_number;
+    last_seven_updated = last_seven_days.updated_total | format_number;
+    last_seven_fixed = last_seven_days.fixed_total | format_number;
+    other_categories_formatted = other_categories | format_number;
+-%]
+[% INCLUDE 'header.html', title = loc('Dashboard'), bodyclass => 'dashboard fullwidthpage' %]
+
+<div class="dashboard-header">
+    <h1>[% loc('Dashboard') %]</h1>
+</div>
+
+<div class="dashboard-row">
+    <div class="dashboard-item dashboard-item--12">
+        <h2>UK: [% loc('All time') %]</h2>
+        <div class="labelled-line-chart">
+            <canvas id="chart-all-reports" width="600" height="300"
+                data-labels="[[% problem_periods.join(',') %]]"
+                data-values-reports="[[% problems_reported_by_period.join(',') %]]"
+                data-values-fixed="[[% problems_fixed_by_period.join(',') %]]"
+                ></canvas>
+            <span class="label" data-datasetindex="0"><strong style="color: #F4A140">[% tprintf(nget("%s problem reported", "%s problems reported", problems_reported_by_period.last), decode(problems_reported) _ '</strong>') %]</span>
+            <span class="label" data-datasetindex="1"><strong style="color: #62B356">[% tprintf(nget("%s report marked as fixed", "%s reports marked as fixed", problems_fixed_by_period.last), decode(problems_fixed) _ '</strong>') %]</span>
+        </div>
+    </div>
+</div>
+
+<div class="dashboard-row">
+    <div class="dashboard-item dashboard-item--6">
+        <h2 class="dashboard-subheading">UK: [% loc('Last 7 days') %]</h2>
+        <div class="dashboard-sparklines">
+            <div>
+                <div class="labelled-sparkline">
+                    <canvas width="200" height="50" data-color="#F4A140" data-values="[% last_seven_days.problems.join(' ') %]"></canvas>
+                    <span class="label" data-datasetindex="0"><strong style="color: #F4A140;">[% tprintf(nget("%s problem reported", "%s problems reported", last_seven_days.problems_total), decode(last_seven_reported) _ '</strong>') %]</span>
+                </div>
+            </div>
+            <div>
+                <div class="labelled-sparkline">
+                    <canvas width="200" height="50" data-color="#4FADED" data-values="[% last_seven_days.updated.join(' ') %]"></canvas>
+                    <span class="label" data-datasetindex="0"><strong style="color: #4FADED;">[% tprintf(nget("%s update on problems", "%s updates on problems", last_seven_days.updated_total), decode(last_seven_updated) _ '</strong>') %]</span>
+                </div>
+            </div>
+            <div>
+                <div class="labelled-sparkline">
+                    <canvas width="200" height="50" data-color="#62B356" data-values="[% last_seven_days.fixed.join(' ') %]"></canvas>
+                    <span class="label" data-datasetindex="0"><strong style="color: #62B356;">[% tprintf(nget("%s problem marked as fixed", "%s problems marked as fixed", last_seven_days.fixed_total), decode(last_seven_fixed) _ '</strong>') %]</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="dashboard-item dashboard-item--6">
+        <form class="dashboard-search" action="/reports">
+            <h2>[% loc('Show reports in your area') %]</h2>
+            <label for="body">[% loc('Pick your council') %]</label>
+            <div class="dashboard-search__input">
+                <select id="body" name="body" class="js-autocomplete">
+                    <option value="">[% loc('Pick your council') %]</option>
+                  [% FOR body IN bodies %]
+                    <option value="[% body.id %]">[% body.name | html %]</option>
+                  [% END %]
+                </select>
+            </div>
+            <div class="dashboard-search__submit">
+                <input type="submit" value="[% loc('Go') %]">
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="dashboard-row">
+    <div class="dashboard-item dashboard-item--6">
+        <h2 class="dashboard-subheading">[% loc('Top 5 responsive councils') %]</h2>
+        <p>[% loc('Average time between a problem being reported and being fixed, last 100 reports.') %]</p>
+        <table class="dashboard-ranking-table">
+            <tbody>
+              [% FOR line IN top_five_bodies %]
+                <tr><td>[% line.name %]</td><td>[% tprintf(nget("%s day", "%s days", line.days), line.days) %]</td></tr>
+              [% END %]
+            </tbody>
+            <tfoot>
+                <tr><td>[% loc('UK average') %]</td><td>[% tprintf(nget("%s day", "%s days", average), average) %]</td></tr>
+            </tfoot>
+        </table>
+    </div>
+    <div class="dashboard-item dashboard-item--6">
+        <h2 class="dashboard-subheading">[% loc('Top 5 most used categories') %]</h2>
+        <p>[% loc('Number of problems reported in each category, in the last 7 days.') %]</p>
+        <table class="dashboard-ranking-table">
+            <tbody>
+              [% FOR line IN top_five_categories %]
+                [% line_count = line.count | format_number ~%]
+                <tr><td>[% line.category %]</td><td>[% tprintf(nget("%s report", "%s reports", line.count), decode(line_count)) %]</td></tr>
+              [% END %]
+            </tbody>
+            <tfoot>
+                <tr><td>[% loc('Other categories') %]</td><td>[% tprintf(nget("%s report", "%s reports", other_categories), decode(other_categories_formatted)) %]</td></tr>
+            </tfoot>
+        </table>
+    </div>
+</div>
+
+[% INCLUDE 'footer.html' pagefooter = 'yes' %]