aboutsummaryrefslogtreecommitdiffstats
path: root/templates/web/base/reports/index.html
blob: dcad59dade656929b9737f7b13899cc5adb1d791 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
[% USE Number.Format -%]
[% extra_js = [
    version('/vendor/chart.min.js'),
    version('/vendor/accessible-autocomplete.min.js'),
    version('/js/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') %]
    [% IF body %] – [% body.name %] [% END %]
    </h1>
</div>

<div class="dashboard-row">
    <div class="dashboard-item dashboard-item--12">
        <h2>[% loc('All time') %]</h2>
        <div class="labelled-line-chart">
            <canvas id="chart-all-reports" width="600" height="300"
                data-labels="[[% FOR period IN problem_periods %]&quot;[% period %]&quot;[% IF NOT loop.last %],[% END %][% END %]]"
                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 problem marked as fixed", "%s problems 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">[% 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">
            <h2>[% loc('Show reports in your area') %]</h2>
          [% IF body %]
            <label for="ward">[% loc('Pick your ward') %]</label>
            <div class="dashboard-search__input">
                <select id="ward" name="ward" class="js-autocomplete">
                    <option value="">[% loc('Pick your ward') %]</option>
                  [% FOR child IN children.values.sort('name') %]
                    <option>[% child.name | html ~%]</option>
                  [% END %]
                </select>
            </div>
          [% ELSE %]
            <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 b IN bodies # Not body as 'body' may be on stash %]
                    <option value="[% b.id %]">[% b.name | html ~%]
                        [% IF NOT b.area_count %] [% loc('(no longer exists)') %][% END ~%]
                    </option>
                  [% END %]
                </select>
            </div>
          [% END %]
            <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">
      [% IF body %]
        <h2 class="dashboard-subheading">[% loc('Top 5 wards') %]</h2>
        <p>[% loc('Number of problems reported in each ward, in the last 7 days.') %]</p>
        <table class="dashboard-ranking-table">
            <tbody>
              [% FOR line IN wards %]
                <tr><td>[% line.name %]</td><td>[% tprintf(nget("%s report", "%s reports", line.reports), line.reports) %]</td></tr>
              [% END %]
            </tbody>
            <tfoot>
                <tr><td>[% loc('Other wards') %]</td><td>[% tprintf(nget("%s report", "%s reports", other_wards), other_wards) %]</td></tr>
            </tfoot>
        </table>
      [% ELSE %]
        <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('Overall average') %]</td><td>[% tprintf(nget("%s day", "%s days", average), average) %]</td></tr>
            </tfoot>
        </table>
      [% END %]
    </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' %]