1
|
|
|
#!/usr/bin/env python3 |
|
|
|
|
2
|
|
|
# -*- coding: utf-8 -*- |
3
|
|
|
|
4
|
|
|
import datetime |
5
|
|
|
import jinja2 |
6
|
|
|
import os |
|
|
|
|
7
|
|
|
|
8
|
|
|
import lighthouse_garden |
9
|
|
|
from lighthouse_garden import info |
10
|
|
|
from lighthouse_garden.utility import output, system |
11
|
|
|
from lighthouse_garden.lighthouse import database, utility |
12
|
|
|
|
13
|
|
|
""" |
14
|
|
|
CONSTANTS |
15
|
|
|
""" |
|
|
|
|
16
|
|
|
ASSETS_CSS = '/templates/assets/css' |
17
|
|
|
ASSETS_JS = '/templates/assets/js' |
18
|
|
|
|
19
|
|
|
TAG_CSS = 'style' |
20
|
|
|
TAG_JS = 'script' |
21
|
|
|
|
22
|
|
|
|
23
|
|
|
def generate_dashboard(): |
24
|
|
|
""" |
25
|
|
|
Generate the static html dashboard |
26
|
|
|
:return: |
27
|
|
|
""" |
28
|
|
|
_now = datetime.datetime.now() |
29
|
|
|
_file = f'{system.config["export_path"]}index.html' |
30
|
|
|
output.println(f'{output.Subject.INFO} Generating dashboard {output.CliFormat.BLACK}{_file}{output.CliFormat.ENDC}') |
|
|
|
|
31
|
|
|
|
32
|
|
|
html = open(_file, "w") |
33
|
|
|
|
34
|
|
|
_rendered_html = render_template('index.html.j2', |
35
|
|
|
logo=render_logo(), |
36
|
|
|
date=_now.strftime("%Y-%m-%dT%H:%M:%SZ"), |
37
|
|
|
assets_css=render_assets(ASSETS_CSS, TAG_CSS), |
38
|
|
|
assets_js=render_assets(ASSETS_JS, TAG_JS), |
39
|
|
|
items=render_items(), |
40
|
|
|
title=system.config['title'], |
41
|
|
|
description=system.config['description'], |
42
|
|
|
version=info.__version__, |
43
|
|
|
homepage=info.__homepage__, |
44
|
|
|
lighthouse_version=system.config['lighthouse']['version'] |
45
|
|
|
) |
46
|
|
|
html.write(_rendered_html) |
47
|
|
|
html.close() |
48
|
|
|
|
49
|
|
|
|
50
|
|
|
def render_items(): |
51
|
|
|
""" |
52
|
|
|
Render the target items for the dashboard |
53
|
|
|
@ToDo: Outsource description text? |
54
|
|
|
:return: |
55
|
|
|
""" |
56
|
|
|
_items = '' |
57
|
|
|
results = database.sort_by_average( |
58
|
|
|
database.get_last_results() |
59
|
|
|
) |
60
|
|
|
|
61
|
|
|
for result in results: |
62
|
|
|
_target = database.get_target_by_attribute(result['title'], 'title') |
63
|
|
|
_item = render_template('partials/item.html.j2', |
64
|
|
|
title=result['title'], |
65
|
|
|
url=result['url'], |
66
|
|
|
last_report=result['report'], |
67
|
|
|
identifier=_target['identifier'], |
68
|
|
|
graph_values_y=','.join(map(str, database.get_history_by_attribute( |
69
|
|
|
_target, 'performance'))), |
70
|
|
|
graph_values_x=','.join(map(str, database.get_history_by_attribute( |
71
|
|
|
_target, 'date'))), |
72
|
|
|
graph_values_text=','.join(map(str, database.get_history_by_attribute( |
|
|
|
|
73
|
|
|
_target, 'report'))), |
74
|
|
|
circle_average=render_percentage_circle( |
75
|
|
|
description=f'<strong>Average</strong><br/>' |
76
|
|
|
f'Calculates all available performance values to an average value.<br/><br/>' |
|
|
|
|
77
|
|
|
f'Maximum value: {int(result["average"]["max"])}<br/>' |
|
|
|
|
78
|
|
|
f'Minimum value: {int(result["average"]["min"])}<br/>', |
|
|
|
|
79
|
|
|
value=result['average']['value'] |
80
|
|
|
), |
81
|
|
|
circle_performance=render_percentage_circle( |
82
|
|
|
trend=render_trend(result), |
83
|
|
|
description=f'<strong>Performance</strong><br/>' |
|
|
|
|
84
|
|
|
f'The performance score is calculated directly from various metrics.<br/><br/>' |
|
|
|
|
85
|
|
|
f'Click here to get more information from the last report.', |
|
|
|
|
86
|
|
|
url=f'{result["report"]}#performance', |
87
|
|
|
title=f'Report {result["date"]}', |
88
|
|
|
value=result['performance'] |
89
|
|
|
), |
90
|
|
|
circle_accessibility=render_percentage_circle( |
91
|
|
|
description=f'<strong>Accessibility</strong><br/>' |
|
|
|
|
92
|
|
|
f'These checks highlight opportunities to improve the accessibility of ' |
|
|
|
|
93
|
|
|
f'your web app.<br/><br/>' |
94
|
|
|
f'Click here to get more information from the last report.', |
|
|
|
|
95
|
|
|
value=result['accessibility'], |
96
|
|
|
url=f'{result["report"]}#accessibility', |
97
|
|
|
title=f'Report {result["date"]}', |
98
|
|
|
additional_class='small' |
99
|
|
|
), |
100
|
|
|
circle_best_practices=render_percentage_circle( |
101
|
|
|
description=f'<strong>Best practices</strong><br/>' |
|
|
|
|
102
|
|
|
f'Further information about best practices.' |
103
|
|
|
f'See the lighthouse report for further information.<br/><br/>' |
|
|
|
|
104
|
|
|
f'Click here to get more information from the last report.', |
|
|
|
|
105
|
|
|
value=result['best-practices'], |
106
|
|
|
url=f'{result["report"]}#best-practices', |
107
|
|
|
title=f'Report {result["date"]}', |
108
|
|
|
additional_class='small' |
109
|
|
|
), |
110
|
|
|
circle_seo=render_percentage_circle( |
111
|
|
|
description=f'<strong>SEO</strong><br/>' |
|
|
|
|
112
|
|
|
f'These checks ensure that your page is optimized for search engine ' |
|
|
|
|
113
|
|
|
f'results ranking.<br/><br/>' |
114
|
|
|
f'Click here to get more information from the last report.', |
|
|
|
|
115
|
|
|
value=result['seo'], |
116
|
|
|
url=f'{result["report"]}#seo', |
117
|
|
|
title=f'Report {result["date"]}', |
118
|
|
|
additional_class='small' |
119
|
|
|
), |
120
|
|
|
api_json=f'{utility.get_data_dir(absolute_path=False)}_{_target["identifier"]}.json', |
|
|
|
|
121
|
|
|
badge_average=f'{utility.get_data_dir(absolute_path=False)}_{_target["identifier"]}.average.svg', |
|
|
|
|
122
|
|
|
badge_performance=f'{utility.get_data_dir(absolute_path=False)}_{_target["identifier"]}.performance.svg', |
|
|
|
|
123
|
|
|
badge_accessibility=f'{utility.get_data_dir(absolute_path=False)}_{_target["identifier"]}.accessibility.svg', |
|
|
|
|
124
|
|
|
badge_best_practices=f'{utility.get_data_dir(absolute_path=False)}_{_target["identifier"]}.best-practices.svg', |
|
|
|
|
125
|
|
|
badge_seo=f'{utility.get_data_dir(absolute_path=False)}_{_target["identifier"]}.seo.svg', |
|
|
|
|
126
|
|
|
) |
127
|
|
|
_items += _item |
128
|
|
|
return _items |
129
|
|
|
|
130
|
|
|
|
131
|
|
|
def render_percentage_circle(description, value, trend='', url='', title='', additional_class=None): |
|
|
|
|
132
|
|
|
""" |
133
|
|
|
Render the percentage circle for a specific attribute |
134
|
|
|
:param description: String |
135
|
|
|
:param value: Integer |
136
|
|
|
:param trend: String |
137
|
|
|
:param url: String |
138
|
|
|
:param additional_class: |
139
|
|
|
:return: |
140
|
|
|
""" |
141
|
|
|
return render_template('partials/circle.html.j2', |
142
|
|
|
url=url, |
143
|
|
|
title=title, |
144
|
|
|
value=str(int(round(value))), |
145
|
|
|
description=description, |
146
|
|
|
color=get_percentage_classification(int(round(value))), |
147
|
|
|
small=additional_class, |
148
|
|
|
trend=trend |
149
|
|
|
) |
150
|
|
|
|
151
|
|
|
|
152
|
|
|
def render_trend(result): |
153
|
|
|
""" |
154
|
|
|
Render the performance trend |
155
|
|
|
:param result: Dict |
156
|
|
|
:return: |
157
|
|
|
""" |
158
|
|
|
_description = '' |
159
|
|
|
_class = '' |
160
|
|
|
if result['average']['trend'] == 1: |
161
|
|
|
_description = f'<strong>Performance trend</strong><br/>' \ |
|
|
|
|
162
|
|
|
f'Ascending trend in dependence of the last performance measurement to the average value.' |
|
|
|
|
163
|
|
|
_class = 'asc' |
164
|
|
|
elif result['average']['trend'] == -1: |
165
|
|
|
_description = f'<strong>Performance trend</strong><br/>' \ |
|
|
|
|
166
|
|
|
f'Descending trend in dependence of the last performance measurement to the average value.' |
|
|
|
|
167
|
|
|
_class = 'desc' |
168
|
|
|
|
169
|
|
|
if result['average']['trend'] == 0: |
|
|
|
|
170
|
|
|
return '' |
171
|
|
|
else: |
172
|
|
|
return render_template('partials/trend.html.j2', |
173
|
|
|
description=_description, |
|
|
|
|
174
|
|
|
trend=_class |
|
|
|
|
175
|
|
|
) |
|
|
|
|
176
|
|
|
|
177
|
|
|
|
178
|
|
|
def get_percentage_classification(value): |
179
|
|
|
""" |
180
|
|
|
Get the percentage classification by a value |
181
|
|
|
@ToDo: Make this configurable |
182
|
|
|
:param value: |
183
|
|
|
:return: |
184
|
|
|
""" |
185
|
|
|
if value >= 90: |
|
|
|
|
186
|
|
|
return 'green' |
187
|
|
|
elif value >= 50: |
188
|
|
|
return 'orange' |
189
|
|
|
else: |
190
|
|
|
return 'red' |
191
|
|
|
|
192
|
|
|
|
193
|
|
|
def render_assets(path, tag): |
194
|
|
|
""" |
195
|
|
|
Render the css/js assets |
196
|
|
|
:param path: String |
197
|
|
|
:param tag: String |
198
|
|
|
:return: String |
199
|
|
|
""" |
200
|
|
|
_html = '' |
201
|
|
|
for file in os.listdir(os.path.dirname(lighthouse_garden.__file__) + path): |
202
|
|
|
with open(os.path.dirname(lighthouse_garden.__file__) + path + '/' + file, 'r') as read_file: |
|
|
|
|
203
|
|
|
_html += f'<!-- {file} -->\n<{tag}>\n{read_file.read()}\n</{tag}>\n' |
204
|
|
|
return _html |
205
|
|
|
|
206
|
|
|
|
207
|
|
|
def render_logo(): |
208
|
|
|
""" |
209
|
|
|
Render the SVG logo file |
210
|
|
|
:return: |
211
|
|
|
""" |
212
|
|
|
with open(os.path.dirname(lighthouse_garden.__file__) + '/templates/assets/tower.svg', 'r') as read_file: |
|
|
|
|
213
|
|
|
return read_file.read() |
214
|
|
|
|
215
|
|
|
|
216
|
|
|
def render_template(template, **args): |
217
|
|
|
""" |
218
|
|
|
Render a template with jinja2 |
219
|
|
|
:param template: String Template file |
220
|
|
|
:param args: Dictionary Template arguments |
221
|
|
|
:return: String Rendered Template |
222
|
|
|
""" |
223
|
|
|
_template_loader = jinja2.FileSystemLoader(searchpath=os.path.dirname(lighthouse_garden.__file__) + "/templates/") |
|
|
|
|
224
|
|
|
_template_environment = jinja2.Environment(loader=_template_loader) |
225
|
|
|
_template = _template_environment.get_template(template) |
226
|
|
|
return _template.render(args) |
227
|
|
|
|